style(Breadcrumb): update typings and propTypes usage (#1209)

* style(Breadcrumb): update typings and propTypes usage

* style(Breadcrumb): fix type

src/collections/Breadcrumb/Breadcrumb.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -16,8 +16,21 @@ 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 {
+    children,
+    className,
+    divider,
+    icon,
+    sections,
+    size,
+  } = props
+
+  const classes = cx(
+    'ui',
+    size,
+    'breadcrumb',
+    className,
+  )
   const rest = getUnhandledProps(Breadcrumb, props)
   const ElementType = getElementType(Breadcrumb, props)
 
@@ -59,9 +72,6 @@ function Breadcrumb(props) {
 Breadcrumb._meta = {
   name: 'Breadcrumb',
   type: META.TYPES.COLLECTION,
-  props: {
-    size: _.without(SUI.SIZES, 'medium'),
-  },
 }
 
 Breadcrumb.propTypes = {
@@ -90,8 +100,8 @@ Breadcrumb.propTypes = {
   /** Shorthand array of props for Breadcrumb.Section. */
   sections: customPropTypes.collectionShorthand,
 
-  /** Size of Breadcrumb */
-  size: PropTypes.oneOf(Breadcrumb._meta.props.size),
+  /** Size of Breadcrumb. */
+  size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium')),
 }
 
 Breadcrumb.Divider = BreadcrumbDivider

src/collections/Breadcrumb/BreadcrumbDivider.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -15,20 +15,23 @@ import Icon from '../../elements/Icon'
  * A divider sub-component for Breadcrumb component.
  */
 function BreadcrumbDivider(props) {
-  const { children, content, icon, className } = props
-  const classes = cx(className, 'divider')
+  const {
+    children,
+    className,
+    content,
+    icon,
+  } = props
+
+  const classes = cx('divider', className)
   const rest = getUnhandledProps(BreadcrumbDivider, props)
   const ElementType = getElementType(BreadcrumbDivider, props)
 
   const iconElement = Icon.create(icon, { ...rest, className: classes })
   if (iconElement) return iconElement
 
-  let breadcrumbContent
-  if (_.isNil(content)) {
-    breadcrumbContent = _.isNil(children) ? '/' : children
-  } else {
-    breadcrumbContent = content
-  }
+  let breadcrumbContent = content
+  if (_.isNil(content)) breadcrumbContent = _.isNil(children) ? '/' : children
+
   return <ElementType {...rest} className={classes}>{breadcrumbContent}</ElementType>
 }
 

src/collections/Breadcrumb/BreadcrumbSection.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { Component, PropTypes } from 'react'
 
 import {
@@ -12,7 +12,7 @@ import {
 } from '../../lib'
 
 /**
- * A section sub-component for Breadcrumb component
+ * A section sub-component for Breadcrumb component.
  */
 export default class BreadcrumbSection extends Component {
   static propTypes = {
@@ -31,18 +31,18 @@ export default class BreadcrumbSection extends Component {
     /** Shorthand for primary content. */
     content: customPropTypes.contentShorthand,
 
-    /** Render as an `a` tag instead of a `div`. */
-    link: customPropTypes.every([
-      customPropTypes.disallow(['href']),
-      PropTypes.bool,
-    ]),
-
     /** Render as an `a` tag instead of a `div` and adds the href attribute. */
     href: customPropTypes.every([
       customPropTypes.disallow(['link']),
       PropTypes.string,
     ]),
 
+    /** Render as an `a` tag instead of a `div`. */
+    link: customPropTypes.every([
+      customPropTypes.disallow(['href']),
+      PropTypes.bool,
+    ]),
+
     /**
      * Called on click. When passed, the component will render as an `a`
      * tag by default instead of a `div`.

src/collections/Breadcrumb/index.d.ts

@@ -1,7 +1,8 @@
-import { ReactMouseEvents, SemanticSIZES } from '../..';
 import * as React from 'react';
 
-interface BreadcrumbProps extends ReactMouseEvents<HTMLElement> {
+interface BreadcrumbProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -12,7 +13,7 @@ interface BreadcrumbProps extends ReactMouseEvents<HTMLElement> {
   className?: string;
 
   /** Shorthand for primary content of the Breadcrumb.Divider. */
-  divider?: any;
+  divider?: React.ReactNode;
 
   /** For use with the sections prop. Render as an `Icon` component with `divider` class instead of a `div` in
    *  Breadcrumb.Divider.
@@ -23,7 +24,7 @@ interface BreadcrumbProps extends ReactMouseEvents<HTMLElement> {
   sections?: Array<any>;
 
   /** Size of Breadcrumb */
-  size?: SemanticSIZES;
+  size?:  'mini' | 'tiny' | 'small' | 'large' | 'big' | 'huge' | 'massive';
 }
 
 interface BreadcrumbClass extends React.ComponentClass<BreadcrumbProps> {
@@ -34,6 +35,8 @@ interface BreadcrumbClass extends React.ComponentClass<BreadcrumbProps> {
 export const Breadcrumb: BreadcrumbClass;
 
 interface BreadcrumbDividerProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -43,19 +46,24 @@ interface BreadcrumbDividerProps {
   /** Additional classes. */
   className?: string;
 
+  /** Shorthand for primary content. */
+  content?: React.ReactNode;
+
   /** Render as an `Icon` component with `divider` class instead of a `div`. */
   icon?: any;
 }
 
-export const BreadcrumbDivider: React.ComponentClass<BreadcrumbDividerProps>;
+export const BreadcrumbDivider: React.StatelessComponent<BreadcrumbDividerProps>;
 
 interface BreadcrumbSectionProps {
-  /** Style as the currently active section. */
-  active?: boolean;
+  [key: string]: any;
 
   /** An element type to render as (string or function). */
   as?: any;
 
+  /** Style as the currently active section. */
+  active?: boolean;
+
   /** Primary content. */
   children?: React.ReactNode;
 
@@ -75,7 +83,7 @@ interface BreadcrumbSectionProps {
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
    * @param {object} data - All props.
    */
-  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+  onClick?: (event: React.MouseEvent<HTMLAnchorElement>, data: BreadcrumbSectionProps) => void;
 }
 
 export const BreadcrumbSection: React.ComponentClass<BreadcrumbSectionProps>;

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

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import Breadcrumb from 'src/collections/Breadcrumb/Breadcrumb'
 import * as common from 'test/specs/commonTests'
 import { sandbox } from 'test/utils'

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

@@ -1,15 +1,17 @@
 import React from 'react'
+
 import BreadcrumbDivider from 'src/collections/Breadcrumb/BreadcrumbDivider'
 import * as common from 'test/specs/commonTests'
 
 describe('BreadcrumbDivider', () => {
   common.isConformant(BreadcrumbDivider)
+  common.rendersChildren(BreadcrumbDivider)
+
   common.implementsIconProp(BreadcrumbDivider, {
     shorthandDefaultProps: {
       className: 'divider',
     },
   })
-  common.rendersChildren(BreadcrumbDivider)
 
   it('renders as a div by default', () => {
     shallow(<BreadcrumbDivider />)

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

@@ -1,10 +1,12 @@
 import React from 'react'
+
 import BreadcrumbSection from 'src/collections/Breadcrumb/BreadcrumbSection'
 import * as common from 'test/specs/commonTests'
 
 describe('BreadcrumbSection', () => {
   common.isConformant(BreadcrumbSection)
   common.rendersChildren(BreadcrumbSection)
+
   common.propKeyOnlyToClassName(BreadcrumbSection, 'active')
 
   it('renders as a div by default', () => {