diff --git a/README.md b/README.md index 645fe24e4d..1ab18fee6e 100644 --- a/README.md +++ b/README.md @@ -118,7 +118,7 @@ Be sure to check out the above migrations before embarking on a new component. | Elements | Collections | Views | Modules | Behaviors | |-----------------|-----------------|-----------------|-----------------|--------------------| -| x Button | _ Breadcrumb | _ Advertisement | x Accordion | x Form Validation | +| x Button | x Breadcrumb | _ Advertisement | x Accordion | x Form Validation | | x Container | x Form | _ Card | x Checkbox | *API (NA)* | | x Divider | x Grid | _ Comment | _ Dimmer | *Visibility (NA)* | | x Flag | x Menu | _ Feed | x Dropdown | | diff --git a/docs/app/Examples/collections/Breadcrumb/BreadcrumbExamples.js b/docs/app/Examples/collections/Breadcrumb/BreadcrumbExamples.js new file mode 100644 index 0000000000..9e379520a3 --- /dev/null +++ b/docs/app/Examples/collections/Breadcrumb/BreadcrumbExamples.js @@ -0,0 +1,62 @@ +import React, { Component } from 'react' +import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample' +import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection' + +export default class BreadcrumbExamples extends Component { + render() { + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ) + } +} diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerExample.js new file mode 100644 index 0000000000..73c376ccdb --- /dev/null +++ b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerExample.js @@ -0,0 +1,14 @@ +import React from 'react' +import { Breadcrumb } from 'stardust' + +const BreadcrumbDividerExample = () => ( + + Home + / + Registration + / + Personal Information + +) + +export default BreadcrumbDividerExample diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerPropExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerPropExample.js new file mode 100644 index 0000000000..c832093cf1 --- /dev/null +++ b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbDividerPropExample.js @@ -0,0 +1,14 @@ +import React from 'react' +import { Breadcrumb } from 'stardust' + +const sections = [ + { text: 'Home', link: true }, + { text: 'Registration', link: true }, + { text: 'Personal Information', active: true }, +] + +const BreadcrumbDividerPropExample = () => ( + +) + +export default BreadcrumbDividerPropExample diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerExample.js new file mode 100644 index 0000000000..cc50511887 --- /dev/null +++ b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerExample.js @@ -0,0 +1,14 @@ +import React from 'react' +import { Breadcrumb } from 'stardust' + +const BreadcrumbIconDividerExample = () => ( + + Home + + Registration + + Personal Information + +) + +export default BreadcrumbIconDividerExample diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerPropExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerPropExample.js new file mode 100644 index 0000000000..c832093cf1 --- /dev/null +++ b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbIconDividerPropExample.js @@ -0,0 +1,14 @@ +import React from 'react' +import { Breadcrumb } from 'stardust' + +const sections = [ + { text: 'Home', link: true }, + { text: 'Registration', link: true }, + { text: 'Personal Information', active: true }, +] + +const BreadcrumbDividerPropExample = () => ( + +) + +export default BreadcrumbDividerPropExample diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbLinkExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbLinkExample.js new file mode 100644 index 0000000000..0c9c23b5f5 --- /dev/null +++ b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbLinkExample.js @@ -0,0 +1,14 @@ +import React from 'react' +import { Breadcrumb } from 'stardust' + +const BreadcrumbLinkExample = () => ( + + Home + + Store + + Search for: paper towels + +) + +export default BreadcrumbLinkExample diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionExample.js new file mode 100644 index 0000000000..f5821760eb --- /dev/null +++ b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionExample.js @@ -0,0 +1,12 @@ +import React from 'react' +import { Breadcrumb } from 'stardust' + +const BreadcrumbSectionExample = () => ( + + Home + + Search + +) + +export default BreadcrumbSectionExample diff --git a/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionPropExample.js b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionPropExample.js new file mode 100644 index 0000000000..84652419fc --- /dev/null +++ b/docs/app/Examples/collections/Breadcrumb/Content/BreadcrumbSectionPropExample.js @@ -0,0 +1,13 @@ +import React from 'react' +import { Breadcrumb } from 'stardust' + +const sections = [ + { text: 'Home', link: true }, + { text: 'Search', active: true }, +] + +const BreadcrumbSectionPropExample = () => ( + +) + +export default BreadcrumbSectionPropExample diff --git a/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbDividerExample.js b/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbDividerExample.js new file mode 100644 index 0000000000..7f790796ce --- /dev/null +++ b/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbDividerExample.js @@ -0,0 +1,14 @@ +import React from 'react' +import { Breadcrumb } from 'stardust' + +const BreadcrumbDividerExample = () => ( + + Home + + Store + + T-Shirt + +) + +export default BreadcrumbDividerExample diff --git a/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExample.js b/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExample.js new file mode 100644 index 0000000000..ff05f11b71 --- /dev/null +++ b/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbExample.js @@ -0,0 +1,14 @@ +import React from 'react' +import { Breadcrumb } from 'stardust' + +const BreadcrumbExample = () => ( + + Home + + Store + + T-Shirt + +) + +export default BreadcrumbExample diff --git a/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbPropExample.js b/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbPropExample.js new file mode 100644 index 0000000000..801b30a1ba --- /dev/null +++ b/docs/app/Examples/collections/Breadcrumb/Types/BreadcrumbPropExample.js @@ -0,0 +1,14 @@ +import React from 'react' +import { Breadcrumb } from 'stardust' + +const sections = [ + { text: 'Home', link: true }, + { text: 'Store', link: true }, + { text: 'T-Shirt', active: true }, +] + +const BreadcrumbPropExample = () => ( + +) + +export default BreadcrumbPropExample diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbBigSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbBigSizeExample.js new file mode 100644 index 0000000000..31ea8bf071 --- /dev/null +++ b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbBigSizeExample.js @@ -0,0 +1,14 @@ +import React from 'react' +import { Breadcrumb } from 'stardust' + +const BreadcrumbBigSizeExample = () => ( + + Home + + Registration + + Personal Information + +) + +export default BreadcrumbBigSizeExample diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbHugeSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbHugeSizeExample.js new file mode 100644 index 0000000000..1e60714fba --- /dev/null +++ b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbHugeSizeExample.js @@ -0,0 +1,14 @@ +import React from 'react' +import { Breadcrumb } from 'stardust' + +const BreadcrumbHugeSizeExample = () => ( + + Home + + Registration + + Personal Information + +) + +export default BreadcrumbHugeSizeExample diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbLargeSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbLargeSizeExample.js new file mode 100644 index 0000000000..7f457ba08a --- /dev/null +++ b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbLargeSizeExample.js @@ -0,0 +1,14 @@ +import React from 'react' +import { Breadcrumb } from 'stardust' + +const BreadcrumbLargeSizeExample = () => ( + + Home + + Registration + + Personal Information + +) + +export default BreadcrumbLargeSizeExample diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMassiveSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMassiveSizeExample.js new file mode 100644 index 0000000000..90d646c907 --- /dev/null +++ b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMassiveSizeExample.js @@ -0,0 +1,14 @@ +import React from 'react' +import { Breadcrumb } from 'stardust' + +const BreadcrumbMassiveSizeExample = () => ( + + Home + + Registration + + Personal Information + +) + +export default BreadcrumbMassiveSizeExample diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMiniSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMiniSizeExample.js new file mode 100644 index 0000000000..c2cc9d7808 --- /dev/null +++ b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbMiniSizeExample.js @@ -0,0 +1,14 @@ +import React from 'react' +import { Breadcrumb } from 'stardust' + +const BreadcrumbMiniSizeExample = () => ( + + Home + + Registration + + Personal Information + +) + +export default BreadcrumbMiniSizeExample diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbSmallSizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbSmallSizeExample.js new file mode 100644 index 0000000000..933bf7e2dd --- /dev/null +++ b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbSmallSizeExample.js @@ -0,0 +1,14 @@ +import React from 'react' +import { Breadcrumb } from 'stardust' + +const BreadcrumbSmallSizeExample = () => ( + + Home + + Registration + + Personal Information + +) + +export default BreadcrumbSmallSizeExample diff --git a/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbTinySizeExample.js b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbTinySizeExample.js new file mode 100644 index 0000000000..fc8da8d991 --- /dev/null +++ b/docs/app/Examples/collections/Breadcrumb/Variations/BreadcrumbTinySizeExample.js @@ -0,0 +1,14 @@ +import React from 'react' +import { Breadcrumb } from 'stardust' + +const BreadcrumbTinySizeExample = () => ( + + Home + + Registration + + Personal Information + +) + +export default BreadcrumbTinySizeExample diff --git a/src/collections/Breadcrumb/Breadcrumb.js b/src/collections/Breadcrumb/Breadcrumb.js new file mode 100644 index 0000000000..f92ea77d20 --- /dev/null +++ b/src/collections/Breadcrumb/Breadcrumb.js @@ -0,0 +1,93 @@ +import _ from 'lodash' +import cx from 'classnames' +import React, { PropTypes } from 'react' +import META from 'src/utils/Meta' +import { customPropTypes, getUnhandledProps } from '../../utils/propUtils' +import * as sui from '../../utils/semanticUtils' +import BreadcrumbDivider from './BreadcrumbDivider' +import BreadcrumbSection from './BreadcrumbSection' + +/** + * A breadcrumb is used to show hierarchy between content. + */ +function Breadcrumb(props) { + const { + children, className, divider, icon, size, sections, + } = props + const classes = cx( + 'ui', + className, + size, + 'breadcrumb' + ) + const rest = getUnhandledProps(Breadcrumb, props) + + if (!sections) { + return
{children}
+ } + + const dividerJSX = {divider} + const sectionsJSX = [] + + sections.forEach(({ text, ...restSection }, index) => { + const key = `${text}-${index}` + const dividerKey = `${key}-divider` + + sectionsJSX.push( + {text} + ) + + if (index !== sections.length - 1) { + sectionsJSX.push(React.cloneElement(dividerJSX, { key: dividerKey })) + } + }) + + return
{sectionsJSX}
+} + +Breadcrumb._meta = { + library: META.library.semanticUI, + name: 'Breadcrumb', + type: META.type.collection, + props: { + size: _.without(sui.sizes, 'medium'), + }, +} + +Breadcrumb.propTypes = { + /** Primary content of the Breadcrumb */ + children: customPropTypes.all([ + customPropTypes.mutuallyExclusive(['sections', 'icon', 'divider']), + PropTypes.node, + ]), + + /** Classes that will be added to the Breadcrumb className. */ + className: PropTypes.string, + + /** For use with the sections prop. Primary content of the Breadcrumb.Divider. */ + divider: customPropTypes.all([ + customPropTypes.mutuallyExclusive(['icon']), + PropTypes.string, + ]), + + /** For use with the sections prop. Render as an `Icon` component with `divider` class instead of a `div` in + * Breadcrumb.Divider. */ + icon: customPropTypes.all([ + customPropTypes.mutuallyExclusive(['divider']), + PropTypes.node, + ]), + + /** Array of props for Breadcrumb.Section. */ + sections: customPropTypes.all([ + customPropTypes.mutuallyExclusive(['children']), + React.PropTypes.array, + ]), + + /** Size of Breadcrumb */ + size: PropTypes.oneOf(Breadcrumb._meta.props.size), +} + +Breadcrumb.Divider = BreadcrumbDivider +Breadcrumb.Section = BreadcrumbSection + +export default Breadcrumb diff --git a/src/collections/Breadcrumb/BreadcrumbDivider.js b/src/collections/Breadcrumb/BreadcrumbDivider.js new file mode 100644 index 0000000000..40fe35a54e --- /dev/null +++ b/src/collections/Breadcrumb/BreadcrumbDivider.js @@ -0,0 +1,61 @@ +import _ from 'lodash' +import React, { PropTypes } from 'react' +import cx from 'classnames' +import META from '../../utils/Meta' +import { customPropTypes, iconPropRenderer, getUnhandledProps } from '../../utils/propUtils' + +/** + * A divider sub-component for Breadcrumb component. + */ +function BreadcrumbDivider(props) { + const { + children, icon, className, + } = props + const classes = cx( + className, + 'divider', + ) + const rest = getUnhandledProps(BreadcrumbDivider, props) + + if (icon) { + // TODO: After update to API update propName + + const iconClasses = _.isString(icon) + ? cx(icon, classes) + : cx(icon.props.className, classes) + + return iconPropRenderer(icon, { ...rest, className: iconClasses }) + } + + return
{children}
+} + +BreadcrumbDivider._meta = { + library: META.library.semanticUI, + name: 'BreadcrumbDivider', + type: META.type.collection, + parent: 'Breadcrumb', +} + +BreadcrumbDivider.defaultProps = { + children: '/', +} + +BreadcrumbDivider.propTypes = { + /** Primary content of the Breadcrumb.Divider. */ + children: customPropTypes.all([ + customPropTypes.mutuallyExclusive(['icon']), + PropTypes.node, + ]), + + /** Classes that will be added to the BreadcrumbDivider className. */ + className: PropTypes.string, + + /** Render as an `Icon` component with `divider` class instead of a `div`. */ + icon: customPropTypes.all([ + customPropTypes.mutuallyExclusive(['children']), + PropTypes.node, + ]), +} + +export default BreadcrumbDivider diff --git a/src/collections/Breadcrumb/BreadcrumbSection.js b/src/collections/Breadcrumb/BreadcrumbSection.js new file mode 100644 index 0000000000..34be351739 --- /dev/null +++ b/src/collections/Breadcrumb/BreadcrumbSection.js @@ -0,0 +1,80 @@ +import React, { PropTypes } from 'react' +import cx from 'classnames' +import META from '../../utils/Meta' +import { customPropTypes, getUnhandledProps, useKeyOnly } from '../../utils/propUtils' + +/** + * A section sub-component for Breadcrumb component. + */ +function BreadcrumbSection(props) { + const { + active, children, className, link, href, onClick, + } = props + const classes = cx( + useKeyOnly(active, 'active'), + className, + 'section', + ) + const rest = getUnhandledProps(BreadcrumbSection, props) + + const handleClick = (e) => { + if (onClick) onClick(e) + } + + if (link || onClick) { + return ( + + {children} + + ) + } + + if (href) { + return ( + + {children} + + ) + } + + return ( +
+ {children} +
+ ) +} + +BreadcrumbSection._meta = { + library: META.library.semanticUI, + name: 'BreadcrumbSection', + type: META.type.collection, + parent: 'Breadcrumb', +} + +BreadcrumbSection.propTypes = { + /** Style as the currently active section. */ + active: PropTypes.bool, + + /** Primary content of the Breadcrumb.Section. */ + children: PropTypes.node, + + /** Classes that will be added to the BreadcrumbSection className. */ + className: PropTypes.string, + + /** Render as an `a` tag instead of a `div`. */ + link: customPropTypes.all([ + customPropTypes.mutuallyExclusive(['href']), + PropTypes.bool, + ]), + + /** Render as an `a` tag instead of a `div` and adds the href attribute. */ + href: customPropTypes.all([ + customPropTypes.mutuallyExclusive(['link']), + PropTypes.string, + ]), + + /** Render as an `a` tag instead of a `div` and called with event on Section click. */ + onClick: PropTypes.func, +} + +export default BreadcrumbSection diff --git a/src/index.js b/src/index.js index 9d19b24c3c..8c7aca6602 100644 --- a/src/index.js +++ b/src/index.js @@ -13,6 +13,8 @@ export Textarea from './addons/Textarea/Textarea' // Collections // ---------------------------------------- +export Breadcrumb from './collections/Breadcrumb/Breadcrumb' + import _Form from './collections/Form/Form' export { _Form as Form } export const Field = deprecateComponent('Field', 'Use "Form.Field" instead.', _Form.Field) diff --git a/test/specs/collections/Breadcrumb/Breadcrumb-test.js b/test/specs/collections/Breadcrumb/Breadcrumb-test.js new file mode 100644 index 0000000000..943095ad18 --- /dev/null +++ b/test/specs/collections/Breadcrumb/Breadcrumb-test.js @@ -0,0 +1,33 @@ +import React from 'react' +import Breadcrumb from 'src/collections/Breadcrumb/Breadcrumb' +import * as common from 'test/specs/commonTests' + +describe('Breadcrumb', () => { + common.isConformant(Breadcrumb) + common.hasUIClassName(Breadcrumb) + common.rendersChildren(Breadcrumb) + + it('renders a
element', () => { + shallow() + .should.have.tagName('div') + }) + + const sections = [ + { text: 'Home', link: true }, + { text: 'T-Shirt', href: 'google.com' }, + ] + + it('renders children with `sections` prop', () => { + const wrapper = shallow() + + wrapper.should.have.exactly(1).descendants('BreadcrumbDivider') + wrapper.should.have.exactly(2).descendants('BreadcrumbSection') + }) + + it('renders defined divider with `divider` prop', () => { + const wrapper = mount() + const divider = wrapper.find('BreadcrumbDivider').first() + + divider.should.contain.text('>') + }) +}) diff --git a/test/specs/collections/Breadcrumb/BreadcrumbDivider-test.js b/test/specs/collections/Breadcrumb/BreadcrumbDivider-test.js new file mode 100644 index 0000000000..ec151b02ff --- /dev/null +++ b/test/specs/collections/Breadcrumb/BreadcrumbDivider-test.js @@ -0,0 +1,14 @@ +import React from 'react' +import BreadcrumbDivider from 'src/collections/Breadcrumb/BreadcrumbDivider' +import * as common from 'test/specs/commonTests' + +describe('BreadcrumbDivider', () => { + common.isConformant(BreadcrumbDivider) + common.implementsIconProp(BreadcrumbDivider) + common.rendersChildren(BreadcrumbDivider) + + it('renders as a div by default', () => { + shallow() + .should.have.tagName('div') + }) +}) diff --git a/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js b/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js new file mode 100644 index 0000000000..ea1462cd22 --- /dev/null +++ b/test/specs/collections/Breadcrumb/BreadcrumbSection-test.js @@ -0,0 +1,54 @@ +import React from 'react' +import BreadcrumbSection from 'src/collections/Breadcrumb/BreadcrumbSection' +import * as common from 'test/specs/commonTests' +import sandbox from 'test/utils/Sandbox-util' + +describe('BreadcrumbSection', () => { + common.isConformant(BreadcrumbSection) + common.rendersChildren(BreadcrumbSection) + common.propKeyOnlyToClassName(BreadcrumbSection, 'active') + + it('renders as a div by default', () => { + shallow(Home) + .should.have.tagName('div') + }) + + describe('link prop', () => { + it('is should be `a` when has prop link', () => { + shallow(Home) + .should.have.tagName('a') + }) + }) + + describe('href prop', () => { + it('is not present by default', () => { + shallow(Home) + .should.not.have.attr('href') + }) + + it('should have attr `href` when has prop', () => { + const section = shallow(Home) + + section.should.have.tagName('a') + section.should.have.attr('href').and.equal('http://google.com') + }) + }) + + describe('onClick prop', () => { + it('can be omitted', () => { + const click = () => mount(Home).simulate('click') + expect(click).to.not.throw() + }) + + it('is called with (event) on click', () => { + const handleClick = sandbox.spy() + const section = mount(Home) + + section.should.have.tagName('a') + section.simulate('click') + + handleClick.should.have.been.calledOnce() + handleClick.should.have.been.calledWithMatch({}) + }) + }) +})