style(Container|Divider|Header|Icon): propTypes cleanups and typings …

…update (#1159)

* style(Icon): propTypes update

* style(Container): propTypes and typings update

* style(Divider): propTypes and typings update

* style(Icon): propTypes and typings update

* style(Header): propTypes and typings update

* test(commonTests): remove obsolete tests

* style(mixed): fix review comments

src/elements/Container/Container.js

@@ -1,5 +1,6 @@
 import cx from 'classnames'
 import React, { PropTypes } from 'react'
+
 import {
   customPropTypes,
   getElementType,
@@ -11,10 +12,16 @@ import {
 } from '../../lib'
 
 /**
- * A container limits content to a maximum width
+ * A container limits content to a maximum width.
  */
 function Container(props) {
-  const { text, textAlign, fluid, children, className } = props
+  const {
+    children,
+    className,
+    fluid,
+    text,
+    textAlign,
+  } = props
   const classes = cx(
     'ui',
     useKeyOnly(text, 'text'),
@@ -32,9 +39,6 @@ function Container(props) {
 Container._meta = {
   name: 'Container',
   type: META.TYPES.ELEMENT,
-  props: {
-    textAlign: SUI.TEXT_ALIGNMENTS,
-  },
 }
 
 Container.propTypes = {
@@ -47,14 +51,14 @@ Container.propTypes = {
   /** Additional classes. */
   className: PropTypes.string,
 
-  /** Reduce maximum width to more naturally accommodate text */
-  text: PropTypes.bool,
-
-  /** Container has no maximum with */
+  /** Container has no maximum with. */
   fluid: PropTypes.bool,
 
-  /** Align container text */
-  textAlign: PropTypes.oneOf(Container._meta.props.textAlign),
+  /** Reduce maximum width to more naturally accommodate text. */
+  text: PropTypes.bool,
+
+  /** Align container text. */
+  textAlign: PropTypes.oneOf(SUI.TEXT_ALIGNMENTS),
 }
 
 export default Container

src/elements/Container/index.d.ts

@@ -1,9 +1,8 @@
-import { SemanticTEXTALIGNMENTS } from '../..';
 import * as React from 'react';
+import { SemanticTEXTALIGNMENTS } from '../..';
 
-// Container
-// ----------------------------------
 interface ContainerProps {
+  [key: string]: any;
 
   /** An element type to render as (string or function). */
   as?: any;
@@ -14,14 +13,14 @@ interface ContainerProps {
   /** Additional classes. */
   className?: string;
 
-  /** Container has no maximum with */
+  /** Container has no maximum with. */
   fluid?: boolean,
 
-  /** Reduce maximum width to more naturally accommodate text */
+  /** Reduce maximum width to more naturally accommodate text. */
   text?: boolean,
 
   /** Describes how the text inside this component should be aligned. */
   textAlign?: SemanticTEXTALIGNMENTS,
 }
-export class Container extends React.Component<ContainerProps, void> {
-}
+
+export const Container: React.StatelessComponent<ContainerProps>;

src/elements/Divider/Divider.js

@@ -10,23 +10,30 @@ import {
 } from '../../lib'
 
 /**
- * A divider visually segments content into groups
+ * A divider visually segments content into groups.
  */
 function Divider(props) {
   const {
-    horizontal, vertical, inverted, fitted, hidden, section, clearing,
-    children, className,
+    children,
+    className,
+    clearing,
+    fitted,
+    hidden,
+    horizontal,
+    inverted,
+    section,
+    vertical,
   } = props
 
   const classes = cx(
     'ui',
-    useKeyOnly(horizontal, 'horizontal'),
-    useKeyOnly(vertical, 'vertical'),
-    useKeyOnly(inverted, 'inverted'),
+    useKeyOnly(clearing, 'clearing'),
     useKeyOnly(fitted, 'fitted'),
     useKeyOnly(hidden, 'hidden'),
+    useKeyOnly(horizontal, 'horizontal'),
+    useKeyOnly(inverted, 'inverted'),
     useKeyOnly(section, 'section'),
-    useKeyOnly(clearing, 'clearing'),
+    useKeyOnly(vertical, 'vertical'),
     'divider',
     className
   )
@@ -51,26 +58,26 @@ Divider.propTypes = {
   /** Additional classes. */
   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 clear the content above it. */
+  clearing: PropTypes.bool,
 
-  /** Divider can be fitted without any space above or below it */
+  /** Divider can be fitted without any space above or below it. */
   fitted: PropTypes.bool,
 
-  /** Divider can divide content without creating a dividing line */
+  /** Divider can divide content without creating a dividing line. */
   hidden: PropTypes.bool,
 
-  /** Divider can provide greater margins to divide sections of content */
+  /** Divider can segment content horizontally. */
+  horizontal: PropTypes.bool,
+
+  /** Divider can have it's colours inverted. */
+  inverted: 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,
+  /** Divider can segment content vertically. */
+  vertical: PropTypes.bool,
 }
 
 export default Divider

src/elements/Divider/index.d.ts

@@ -1,38 +1,37 @@
 import * as React from 'react';
 
-// Divider
-// ----------------------------------
 interface DividerProps {
-
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
-  /** Primary content. */   
+  /** Primary content. */
   children?: React.ReactNode,
 
   /** Additional classes. */
   className?: string;
 
-  /** Divider can clear the content above it */
+  /** Divider can clear the content above it. */
   clearing?: boolean,
 
-  /** Divider can be fitted without any space above or below it */
+  /** Divider can be fitted without any space above or below it. */
   fitted?: boolean,
 
-  /** Divider can divide content without creating a dividing line */
+  /** Divider can divide content without creating a dividing line. */
   hidden?: boolean,
 
-  /** Divider can segment content horizontally */
+  /** Divider can segment content horizontally. */
   horizontal?: boolean,
 
-  /** Divider can have it's colours inverted */
+  /** Divider can have it's colours inverted. */
   inverted?: boolean,
-  
-  /** Divider can provide greater margins to divide sections of content */
+
+  /** Divider can provide greater margins to divide sections of content. */
   section?: boolean,
 
-  /** Divider can segment content vertically */
+  /** Divider can segment content vertically. */
   vertical?: boolean,
 }
-export class Divider extends React.Component<DividerProps, void> {
-}
+
+export const Container: React.StatelessComponent<DividerProps>;

src/elements/Header/Header.js

@@ -1,6 +1,7 @@
 import _ from 'lodash'
 import cx from 'classnames'
 import React, { PropTypes } from 'react'
+
 import {
   customPropTypes,
   getElementType,
@@ -23,15 +24,28 @@ import HeaderContent from './HeaderContent'
  */
 function Header(props) {
   const {
-    color, content, dividing, block, attached, floated, inverted, disabled, sub, size, textAlign,
-    icon, image, children, className, subheader,
+    attached,
+    block,
+    children,
+    className,
+    color,
+    content,
+    disabled,
+    dividing,
+    floated,
+    icon,
+    image,
+    inverted,
+    size,
+    sub,
+    subheader,
+    textAlign,
   } = props
 
   const classes = cx(
     'ui',
-    size,
     color,
-    useKeyOrValueAndKey(attached, 'attached'),
+    size,
     useKeyOnly(block, 'block'),
     useKeyOnly(disabled, 'disabled'),
     useKeyOnly(dividing, 'dividing'),
@@ -40,9 +54,10 @@ function Header(props) {
     useKeyOnly(image === true, 'image'),
     useKeyOnly(inverted, 'inverted'),
     useKeyOnly(sub, 'sub'),
+    useKeyOrValueAndKey(attached, 'attached'),
     useTextAlignProp(textAlign),
-    className,
     'header',
+    className,
   )
   const rest = getUnhandledProps(Header, props)
   const ElementType = getElementType(Header, props)
@@ -80,29 +95,43 @@ function Header(props) {
 Header._meta = {
   name: 'Header',
   type: META.TYPES.ELEMENT,
-  props: {
-    attached: ['top', 'bottom'],
-    color: SUI.COLORS,
-    size: _.without(SUI.SIZES, 'big', 'massive'),
-    floated: SUI.FLOATS,
-    textAlign: SUI.TEXT_ALIGNMENTS,
-  },
 }
 
 Header.propTypes = {
   /** An element type to render as (string or function). */
   as: customPropTypes.as,
 
-  /** Additional classes. */
-  className: PropTypes.string,
+  /** Attach header  to other content, like a segment. */
+  attached: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.oneOf(['top', 'bottom']),
+  ]),
+
+  /** Format header to appear inside a content block. */
+  block: PropTypes.bool,
 
   /** Primary content. */
   children: PropTypes.node,
 
+  /** Additional classes. */
+  className: PropTypes.string,
+
+  /** Color of the header. */
+  color: PropTypes.oneOf(SUI.COLORS),
+
   /** Shorthand for primary content. */
   content: customPropTypes.contentShorthand,
 
-  /** Add an icon by icon name or pass an <Icon /.> */
+  /** Show that the header is inactive. */
+  disabled: PropTypes.bool,
+
+  /** Divide header from the content below it. */
+  dividing: PropTypes.bool,
+
+  /** Header can sit to the left or right of other content. */
+  floated: PropTypes.oneOf(SUI.FLOATS),
+
+  /** Add an icon by icon name or pass an Icon. */
   icon: customPropTypes.every([
     customPropTypes.disallow(['image']),
     PropTypes.oneOfType([
@@ -111,7 +140,7 @@ Header.propTypes = {
     ]),
   ]),
 
-  /** Add an image by img src or pass an <Image />. */
+  /** Add an image by img src or pass an Image. */
   image: customPropTypes.every([
     customPropTypes.disallow(['icon']),
     PropTypes.oneOfType([
@@ -120,41 +149,20 @@ Header.propTypes = {
     ]),
   ]),
 
-  /** Color of the header. */
-  color: PropTypes.oneOf(Header._meta.props.color),
-
-  /** Divide header from the content below it */
-  dividing: PropTypes.bool,
-
-  /** Format header to appear inside a content block */
-  block: PropTypes.bool,
-
-  /** Attach header  to other content, like a segment */
-  attached: PropTypes.oneOfType([
-    PropTypes.oneOf(Header._meta.props.attached),
-    PropTypes.bool,
-  ]),
-
-  /** Header can sit to the left or right of other content */
-  floated: PropTypes.oneOf(Header._meta.props.floated),
-
-  /** Inverts the color of the header for dark backgrounds */
+  /** Inverts the color of the header for dark backgrounds. */
   inverted: PropTypes.bool,
 
-  /** Show that the header is inactive */
-  disabled: PropTypes.bool,
+  /** Content headings are sized with em and are based on the font-size of their container. */
+  size: PropTypes.oneOf(_.without(SUI.SIZES, 'big', 'massive')),
 
-  /** Headers may be formatted to label smaller or de-emphasized content */
+  /** Headers may be formatted to label smaller or de-emphasized content. */
   sub: PropTypes.bool,
 
-  /** Content headings are sized with em and are based on the font-size of their container. */
-  size: PropTypes.oneOf(Header._meta.props.size),
-
   /** Shorthand for Header.Subheader. */
   subheader: customPropTypes.itemShorthand,
 
-  /** Align header content */
-  textAlign: PropTypes.oneOf(Header._meta.props.textAlign),
+  /** Align header content. */
+  textAlign: PropTypes.oneOf(SUI.TEXT_ALIGNMENTS),
 }
 
 Header.Content = HeaderContent

src/elements/Header/HeaderContent.js

@@ -13,7 +13,7 @@ import {
  */
 function HeaderContent(props) {
   const { children, className } = props
-  const classes = cx(className, 'content')
+  const classes = cx('content', className)
   const rest = getUnhandledProps(HeaderContent, props)
   const ElementType = getElementType(HeaderContent, props)