diff --git a/docs/app/Examples/elements/Divider/Types/DividerHorizontalExample.js b/docs/app/Examples/elements/Divider/Types/DividerHorizontalExample.js index 818d90627e..d1b0d0f876 100644 --- a/docs/app/Examples/elements/Divider/Types/DividerHorizontalExample.js +++ b/docs/app/Examples/elements/Divider/Types/DividerHorizontalExample.js @@ -6,7 +6,7 @@ export default class DividerHorizontalExample extends Component { return ( - Or + Or ) diff --git a/docs/app/Examples/elements/Divider/Types/DividerVerticalExample.js b/docs/app/Examples/elements/Divider/Types/DividerVerticalExample.js index dfbf993af3..9bfbb2615a 100644 --- a/docs/app/Examples/elements/Divider/Types/DividerVerticalExample.js +++ b/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. - Or + Or Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. - And + And 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... - + ) 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') + }) +})