Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.
diff --git a/docs/app/Examples/elements/Divider/Variations/DividerClearingExample.js b/docs/app/Examples/elements/Divider/Variations/DividerClearingExample.js
index fee1c4fba2..c40d3770bf 100644
--- a/docs/app/Examples/elements/Divider/Variations/DividerClearingExample.js
+++ b/docs/app/Examples/elements/Divider/Variations/DividerClearingExample.js
@@ -6,7 +6,7 @@ export default class DividerClearingExample extends Component {
return (
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore...
)
diff --git a/docs/app/Examples/elements/Divider/Variations/DividerFittedExample.js b/docs/app/Examples/elements/Divider/Variations/DividerFittedExample.js
index 44b988b4d5..24eb442b73 100644
--- a/docs/app/Examples/elements/Divider/Variations/DividerFittedExample.js
+++ b/docs/app/Examples/elements/Divider/Variations/DividerFittedExample.js
@@ -6,7 +6,7 @@ export default class DividerFittedExample extends Component {
return (
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore...
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore...
)
diff --git a/docs/app/Examples/elements/Divider/Variations/DividerHiddenExample.js b/docs/app/Examples/elements/Divider/Variations/DividerHiddenExample.js
index 0f5d889af3..04497f86ac 100644
--- a/docs/app/Examples/elements/Divider/Variations/DividerHiddenExample.js
+++ b/docs/app/Examples/elements/Divider/Variations/DividerHiddenExample.js
@@ -6,7 +6,7 @@ export default class DividerHiddenExample extends Component {
return (
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore...
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore...
)
diff --git a/docs/app/Examples/elements/Divider/Variations/DividerInvertedExample.js b/docs/app/Examples/elements/Divider/Variations/DividerInvertedExample.js
index 2ce953405c..fe382c594a 100644
--- a/docs/app/Examples/elements/Divider/Variations/DividerInvertedExample.js
+++ b/docs/app/Examples/elements/Divider/Variations/DividerInvertedExample.js
@@ -5,8 +5,8 @@ export default class DividerInvertedExample extends Component {
render() {
return (
-
- Horizontal
+
+ Horizontal
)
}
diff --git a/docs/app/Examples/elements/Divider/Variations/DividerSectionExample.js b/docs/app/Examples/elements/Divider/Variations/DividerSectionExample.js
index 25a29f40ec..7d8d8f9504 100644
--- a/docs/app/Examples/elements/Divider/Variations/DividerSectionExample.js
+++ b/docs/app/Examples/elements/Divider/Variations/DividerSectionExample.js
@@ -6,7 +6,7 @@ export default class DividerSectionExample extends Component {
return (
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore...
-
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore...
)
diff --git a/src/elements/Divider/Divider.js b/src/elements/Divider/Divider.js
index 941bf46f80..44492b1e55 100644
--- a/src/elements/Divider/Divider.js
+++ b/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 (
-
- {this.props.children}
-
- )
- }
+/**
+ * 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 (
+
+ {children}
+
+ )
+}
+
+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
diff --git a/test/specs/elements/Divider/Divider-test.js b/test/specs/elements/Divider/Divider-test.js
new file mode 100644
index 0000000000..8e019935a9
--- /dev/null
+++ b/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 element', () => {
+ shallow()
+ .should.have.tagName('div')
+ })
+
+ it('adds the "divider" class', () => {
+ shallow()
+ .should.have.className('divider')
+ })
+})