Divider Component updated to v1 API

docs/app/Examples/elements/Divider/Types/DividerHorizontalExample.js

@@ -6,7 +6,7 @@ export default class DividerHorizontalExample extends Component {
     return (
       <Segment className='padded'>
         <Button className='primary fluid'>Login</Button>
-        <Divider className='large horizontal'>Or</Divider>
+        <Divider horizontal>Or</Divider>
         <Button className='secondary fluid'>Sign Up Now</Button>
       </Segment>
     )

docs/app/Examples/elements/Divider/Types/DividerVerticalExample.js

@@ -10,13 +10,13 @@ export default class DividerVerticalExample extends Component {
             Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
           </Segment>
         </Grid.Column>
-        <Divider className='vertical'>Or</Divider>
+        <Divider vertical>Or</Divider>
         <Grid.Column>
           <Segment className='basic'>
             Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
           </Segment>
         </Grid.Column>
-        <Divider className='vertical'>And</Divider>
+        <Divider vertical>And</Divider>
         <Grid.Column>
           <Segment className='basic'>
             Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.

docs/app/Examples/elements/Divider/Variations/DividerClearingExample.js

@@ -6,7 +6,7 @@ export default class DividerClearingExample extends Component {
     return (
       <Segment>
         <Button className='right floated'>Floated Button</Button>
-        <Divider className='clearing' />
+        <Divider clearing />
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore...
       </Segment>
     )

docs/app/Examples/elements/Divider/Variations/DividerFittedExample.js

@@ -6,7 +6,7 @@ export default class DividerFittedExample extends Component {
     return (
       <Segment>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore...
-        <Divider className='fitted' />
+        <Divider fitted />
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore...
       </Segment>
     )

docs/app/Examples/elements/Divider/Variations/DividerHiddenExample.js

@@ -6,7 +6,7 @@ export default class DividerHiddenExample extends Component {
     return (
       <Segment>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore...
-        <Divider className='hidden' />
+        <Divider hidden />
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore...
       </Segment>
     )

docs/app/Examples/elements/Divider/Variations/DividerInvertedExample.js

@@ -5,8 +5,8 @@ export default class DividerInvertedExample extends Component {
   render() {
     return (
       <Segment className='inverted'>
-        <Divider className='inverted' />
-        <Divider className='horizontal inverted'>Horizontal</Divider>
+        <Divider inverted />
+        <Divider horizontal inverted >Horizontal</Divider>
       </Segment>
     )
   }

docs/app/Examples/elements/Divider/Variations/DividerSectionExample.js

@@ -6,7 +6,7 @@ export default class DividerSectionExample extends Component {
     return (
       <Segment>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore...
-        <Divider className='section' />
+        <Divider section />
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore...
       </Segment>
     )

src/elements/Divider/Divider.js

@@ -1,30 +1,75 @@
-import React, { Component, PropTypes } from 'react'
-import classNames from 'classnames'
+import cx from 'classnames'
+import React, { PropTypes } from 'react'
 import META from '../../utils/Meta'
+import {
+  getUnhandledProps,
+  useKeyOnly,
+} from '../../utils/propUtils'
 
-export default class Divider extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-  }
-
-  static _meta = {
-    library: META.library.semanticUI,
-    name: 'Divider',
-    type: META.type.element,
-  }
-
-  render() {
-    const classes = classNames(
-      'sd-divider',
-      'ui',
-      this.props.className,
-      'divider'
-    )
-    return (
-      <div {...this.props} className={classes}>
-        {this.props.children}
-      </div>
-    )
-  }
+/**
+ * A divider visually segments content into groups
+ */
+function Divider(props) {
+  const {
+    horizontal, vertical, inverted, fitted, hidden, section, clearing,
+    children, className,
+  } = props
+
+  const classes = cx('sd-divider ui',
+    useKeyOnly(horizontal, 'horizontal'),
+    useKeyOnly(vertical, 'vertical'),
+    useKeyOnly(inverted, 'inverted'),
+    useKeyOnly(fitted, 'fitted'),
+    useKeyOnly(hidden, 'hidden'),
+    useKeyOnly(section, 'section'),
+    useKeyOnly(clearing, 'clearing'),
+    'divider',
+    className
+  )
+
+  const DividerComponent = 'div'
+  const rest = getUnhandledProps(Divider, props)
+
+  return (
+    <DividerComponent className={classes} {...rest}>
+      {children}
+    </DividerComponent>
+  )
+}
+
+Divider._meta = {
+  library: META.library.semanticUI,
+  name: 'Divider',
+  type: META.type.element,
+}
+
+Divider.propTypes = {
+  /** Primary content of the Divider */
+  children: PropTypes.node,
+
+  /** Classes to add to the divider className. */
+  className: PropTypes.string,
+
+  /** Divider can segment content horizontally */
+  horizontal: PropTypes.bool,
+
+  /** Divider can segment content vertically */
+  vertical: PropTypes.bool,
+
+  /** Divider can have it's colours inverted */
+  inverted: PropTypes.bool,
+
+  /** Divider can be fitted without any space above or below it */
+  fitted: PropTypes.bool,
+
+  /** Divider can divide content without creating a dividing line */
+  hidden: PropTypes.bool,
+
+  /** Divider can provide greater margins to divide sections of content */
+  section: PropTypes.bool,
+
+  /** Divider can clear the content above it */
+  clearing: PropTypes.bool,
 }
+
+export default Divider

test/specs/elements/Divider/Divider-test.js

@@ -0,0 +1,28 @@
+import React from 'react'
+
+import Divider from 'src/elements/Divider/Divider'
+import * as common from 'test/specs/commonTests'
+
+describe('Divider', () => {
+  common.isConformant(Divider)
+  common.rendersChildren(Divider)
+  common.hasUIClassName(Divider)
+
+  common.propKeyOnlyToClassName(Divider, 'horizontal')
+  common.propKeyOnlyToClassName(Divider, 'vertical')
+  common.propKeyOnlyToClassName(Divider, 'inverted')
+  common.propKeyOnlyToClassName(Divider, 'fitted')
+  common.propKeyOnlyToClassName(Divider, 'hidden')
+  common.propKeyOnlyToClassName(Divider, 'section')
+  common.propKeyOnlyToClassName(Divider, 'clearing')
+
+  it('renders a <div /> element', () => {
+    shallow(<Divider />)
+      .should.have.tagName('div')
+  })
+
+  it('adds the "divider" class', () => {
+    shallow(<Divider />)
+      .should.have.className('divider')
+  })
+})