Add Breadcrumb component

src/collections/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,48 @@
+import cx from 'classnames'
+import React, { PropTypes } from 'react'
+import META from 'src/utils/Meta'
+import { getUnhandledProps } from '../../utils/propUtils'
+import * as sui from '../../utils/semanticUtils'
+import BreadcrumbSection from './BreadcrumbSection'
+
+function Breadcrumb(props) {
+  const {
+    children,
+    size,
+  } = props
+
+  const classes = cx(
+    'ui',
+    size,
+    'breadcrumb'
+  )
+
+  const rest = getUnhandledProps(Breadcrumb, props)
+
+  return (
+    <div className={classes} {...rest}>
+      {children}
+    </div>
+  )
+}
+
+Breadcrumb._meta = {
+  library: META.library.semanticUI,
+  name: 'Breadcrumb',
+  type: META.type.collection,
+  props: {
+    size: sui.sizes,
+  },
+}
+
+Breadcrumb.propTypes = {
+  /** Primary content of the Breadcrumb */
+  children: PropTypes.node,
+
+  /** Size of Breadcrumb */
+  size: PropTypes.oneOf(Breadcrumb._meta.props.size),
+}
+
+Breadcrumb.Section = BreadcrumbSection
+
+export default Breadcrumb

src/collections/Breadcrumb/BreadcrumbSection.js

@@ -0,0 +1,95 @@
+import * as _ from 'lodash'
+import React, { PropTypes } from 'react'
+import cx from 'classnames'
+import META from '../../utils/Meta'
+
+/**
+ * A section sub-component for Breadcrumb component.
+ *
+ * @see Breadcrumb
+ */
+function BreadcrumbSection(props) {
+  const {
+    active, children, className, link, href, onClick, ...rest,
+  } = props
+
+  /**
+   * Handles onClick event. If onClick is not defined, does nothing.
+   * */
+  const handleClick = (e) => {
+    if (!_.isUndefined(e)) e.preventDefault()
+    if (!_.isFunction(onClick)) return
+
+    onClick()
+  }
+
+  const classes = cx(
+    active && 'active',
+    className,
+    'section',
+  )
+
+  // Handle link and onClick props.
+  //
+  // <Breadcrumb.Section link>Home</Breadcrumb.Section>
+  // <Breadcrumb.Section onClick={this.handleClick}>Home</Breadcrumb.Section>
+
+  if (link || onClick) {
+    return (
+      <a {...rest} className={classes} href='#' onClick={handleClick}>
+        {children}
+      </a>
+    )
+  }
+
+  // Handle href prop.
+  //
+  // <Breadcrumb.Section href='http://google.com'>Home</Breadcrumb.Section>
+
+  if (href) {
+    return (
+      <a {...rest} className={classes} href={href} onClick={handleClick}>
+        {children}
+      </a>
+    )
+  }
+
+  // Default variant.
+  //
+  // <Breadcrumb.Section>Home</Breadcrumb.Section>
+
+  return (
+    <div {...rest} className={classes} onClick={handleClick}>
+      {children}
+    </div>
+  )
+}
+
+BreadcrumbSection._meta = {
+  library: META.library.semanticUI,
+  name: 'BreadcrumbSection',
+  type: META.type.collection,
+  parent: 'Breadcrumb',
+}
+
+BreadcrumbSection.propTypes = {
+  /** Optional props that adds class active */
+  active: PropTypes.bool,
+
+  /** Primary content of the Breadcrumb.Section */
+  children: PropTypes.node,
+
+  /** Additional classes added to the element. */
+  className: PropTypes.string,
+
+  /** Makes element link (<a>) instead of text (<div>) */
+  link: PropTypes.bool,
+
+  /** Makes element link (<a>) instead of text (<div>) and adds href attribute. */
+  href: PropTypes.string,
+
+  /** Makes element link (<a>) instead of text (<div>) and adds onClick event. */
+  onClick: PropTypes.func,
+}
+
+export default BreadcrumbSection

src/index.js

@@ -11,6 +11,8 @@ export Select from './addons/Select/Select'
 // 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)

test/specs/collections/Breadcrumb/Breadcrumb-test.js

@@ -0,0 +1,15 @@
+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 <div /> element', () => {
+    shallow(<Breadcrumb />)
+      .should.have.tagName('div')
+  })
+})

test/specs/collections/Breadcrumb/BreadcrumbSection-test.js

@@ -0,0 +1,84 @@
+import React from 'react'
+import Breadcrumb from 'src/collections/Breadcrumb/Breadcrumb'
+import * as common from 'test/specs/commonTests'
+import sandbox from 'test/utils/Sandbox-util'
+
+describe('BreadcrumbSection', () => {
+  common.isConformant(Breadcrumb.Section)
+  common.rendersChildren(Breadcrumb.Section)
+
+  describe('active', () => {
+    it('is not by default', () => {
+      const section = shallow(<Breadcrumb.Section>Home</Breadcrumb.Section>)
+
+      section.should.not.have.className('active')
+      section.should.have.tagName('div')
+    })
+
+    it('is should be active by prop', () => {
+      const section = shallow(<Breadcrumb.Section active>Home</Breadcrumb.Section>)
+
+      section.should.have.className('active')
+      section.should.have.tagName('div')
+    })
+  })
+
+  describe('link prop', () => {
+    it('is not by default', () => {
+      shallow(<Breadcrumb.Section>Home</Breadcrumb.Section>)
+        .should.have.tagName('div')
+    })
+
+    it('is should be active by prop', () => {
+      const section = shallow(<Breadcrumb.Section link>Home</Breadcrumb.Section>)
+
+      section.should.have.tagName('a')
+      section.should.have.attr('href').and.equal('#')
+    })
+  })
+
+  describe('href prop', () => {
+    it('is not by default', () => {
+      const section = shallow(<Breadcrumb.Section>Home</Breadcrumb.Section>)
+
+      section.should.have.tagName('div')
+      section.should.not.have.attr('href')
+    })
+
+    it('is should have attr when prop', () => {
+      const section = shallow(<Breadcrumb.Section href='http://google.com'>Home</Breadcrumb.Section>)
+
+      section.should.have.tagName('a')
+      section.should.have.attr('href').and.equal('http://google.com')
+    })
+  })
+
+  describe('onclick prop', () => {
+    it('is not by default', () => {
+      shallow(<Breadcrumb.Section>Home</Breadcrumb.Section>)
+        .should.have.tagName('div')
+    })
+
+    it('is should run click by prop', () => {
+      const handleClick = sandbox.spy()
+      const wrapper = shallow(<Breadcrumb.Section onClick={handleClick}>Home</Breadcrumb.Section>)
+
+      wrapper.should.have.tagName('a')
+      wrapper.should.have.attr('href').and.equal('#')
+
+      wrapper.simulate('click')
+      handleClick.should.have.been.calledOnce()
+    })
+
+    it('is shouldn not run click by prop, if prop not function', () => {
+      const handleClick = sandbox.spy()
+      const wrapper = shallow(<Breadcrumb.Section onClick='test'>Home</Breadcrumb.Section>)
+
+      wrapper.should.have.tagName('a')
+      wrapper.should.have.attr('href').and.equal('#')
+
+      wrapper.simulate('click')
+      handleClick.should.have.callCount(0)
+    })
+  })
+})