style(Step): update typings, tests and propTypes usage (#1203)

* style(Step): update typings, tests and propTypes usage

* style(Step): fix type

src/elements/Step/Step.js

@@ -17,7 +17,7 @@ import StepGroup from './StepGroup'
 import StepTitle from './StepTitle'
 
 /**
- * A step shows the completion status of an activity in a series of activities
+ * A step shows the completion status of an activity in a series of activities.
  */
 export default class Step extends Component {
   static propTypes = {
@@ -27,12 +27,12 @@ export default class Step extends Component {
     /** A step can be highlighted as active. */
     active: PropTypes.bool,
 
-    /** Additional classes. */
-    className: PropTypes.string,
-
     /** Primary content. */
     children: PropTypes.node,
 
+    /** Additional classes. */
+    className: PropTypes.string,
+
     /** A step can show that a user has completed it. */
     completed: PropTypes.bool,
 
@@ -42,15 +42,15 @@ export default class Step extends Component {
     /** Show that the Loader is inactive. */
     disabled: PropTypes.bool,
 
+    /** Render as an `a` tag instead of a `div` and adds the href attribute. */
+    href: PropTypes.string,
+
     /** Shorthand for Icon. */
     icon: customPropTypes.itemShorthand,
 
     /** A step can be link. */
     link: PropTypes.bool,
 
-    /** Render as an `a` tag instead of a `div` and adds the href attribute. */
-    href: PropTypes.string,
-
     /**
      * Called on click. When passed, the component will render as an `a`
      * tag by default instead of a `div`.

src/elements/Step/StepContent.js

@@ -1,6 +1,6 @@
+import cx from 'classnames'
 import _ from 'lodash'
 import React, { PropTypes } from 'react'
-import cx from 'classnames'
 
 import {
   createShorthand,
@@ -12,9 +12,12 @@ import {
 import StepDescription from './StepDescription'
 import StepTitle from './StepTitle'
 
+/**
+ * A step can contain a content.
+ */
 function StepContent(props) {
   const { children, className, description, title } = props
-  const classes = cx(className, 'content')
+  const classes = cx('content', className)
   const rest = getUnhandledProps(StepContent, props)
   const ElementType = getElementType(StepContent, props)
 

src/elements/Step/StepDescription.js

@@ -11,11 +11,15 @@ import {
 
 function StepDescription(props) {
   const { children, className, description } = props
-  const classes = cx(className, 'description')
+  const classes = cx('description', className)
   const rest = getUnhandledProps(StepDescription, props)
   const ElementType = getElementType(StepDescription, props)
 
-  return <ElementType {...rest} className={classes}>{_.isNil(children) ? description : children}</ElementType>
+  return (
+    <ElementType {...rest} className={classes}>
+      {_.isNil(children) ? description : children}
+    </ElementType>
+  )
 }
 
 StepDescription._meta = {

src/elements/Step/StepGroup.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -13,17 +13,29 @@ import {
 } from '../../lib'
 import Step from './Step'
 
+/**
+ * A set of steps.
+ */
 function StepGroup(props) {
-  const { children, className, fluid, items, ordered, size, stackable, vertical } = props
+  const {
+    children,
+    className,
+    fluid,
+    items,
+    ordered,
+    size,
+    stackable,
+    vertical,
+  } = props
   const classes = cx(
     'ui',
+    size,
     useKeyOnly(fluid, 'fluid'),
     useKeyOnly(ordered, 'ordered'),
-    useValueAndKey(stackable, 'stackable'),
     useKeyOnly(vertical, 'vertical'),
-    size,
-    className,
+    useValueAndKey(stackable, 'stackable'),
     'steps',
+    className,
   )
   const rest = getUnhandledProps(StepGroup, props)
   const ElementType = getElementType(StepGroup, props)
@@ -43,23 +55,19 @@ function StepGroup(props) {
 StepGroup._meta = {
   name: 'StepGroup',
   parent: 'Step',
-  props: {
-    sizes: _.without(SUI.SIZES, 'medium'),
-    stackable: ['tablet'],
-  },
   type: META.TYPES.ELEMENT,
 }
 
 StepGroup.propTypes = {
   /** An element type to render as (string or function). */
   as: customPropTypes.as,
 
-  /** Additional classes. */
-  className: PropTypes.string,
-
   /** Primary content. */
   children: PropTypes.node,
 
+  /** Additional classes. */
+  className: PropTypes.string,
+
   /** A fluid step takes up the width of its container. */
   fluid: PropTypes.bool,
 
@@ -70,10 +78,10 @@ StepGroup.propTypes = {
   ordered: PropTypes.bool,
 
   /** Steps can have different sizes. */
-  size: PropTypes.oneOf(StepGroup._meta.props.sizes),
+  size: PropTypes.oneOf(_.without(SUI.SIZES, 'medium')),
 
   /** A step can stack vertically only on smaller screens. */
-  stackable: PropTypes.oneOf(StepGroup._meta.props.stackable),
+  stackable: PropTypes.oneOf(['tablet']),
 
   /** A step can be displayed stacked vertically. */
   vertical: PropTypes.bool,

src/elements/Step/StepTitle.js

@@ -1,5 +1,5 @@
-import _ from 'lodash'
 import cx from 'classnames'
+import _ from 'lodash'
 import React, { PropTypes } from 'react'
 
 import {
@@ -9,13 +9,20 @@ import {
   META,
 } from '../../lib'
 
+/**
+ * A step can contain a title.
+ */
 function StepTitle(props) {
   const { children, className, title } = props
-  const classes = cx(className, 'title')
+  const classes = cx('title', className)
   const rest = getUnhandledProps(StepTitle, props)
   const ElementType = getElementType(StepTitle, props)
 
-  return <ElementType {...rest} className={classes}>{_.isNil(children) ? title : children}</ElementType>
+  return (
+    <ElementType {...rest} className={classes}>
+      {_.isNil(children) ? title : children}
+    </ElementType>
+  )
 }
 
 StepTitle._meta = {

src/elements/Step/index.d.ts

@@ -1,14 +1,14 @@
-import { ReactMouseEvents, SemanticSIZES, SemanticVERTICALALIGNMENTS } from '../..';
 import * as React from 'react';
 
-
-interface StepProps extends ReactMouseEvents<any> {
-  /** A step can be highlighted as active. */
-  active?: boolean;
+interface StepProps {
+  [key: string]: any;
 
   /** An element type to render as (string or function). */
   as?: any;
 
+  /** A step can be highlighted as active. */
+  active?: boolean;
+
   /** Primary content. */
   children?: React.ReactNode;
 
@@ -34,13 +34,13 @@ interface StepProps extends ReactMouseEvents<any> {
   link?: boolean;
 
   /**
-   * Called on click. When passed, the component will render as an `a`
+   * Called on click. When passed, the component will render as an `a`.
    * tag by default instead of a `div`.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
    * @param {object} data - All props.
    */
-  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  onClick?: (event: React.MouseEvent<HTMLAnchorElement>, data: StepProps) => void;
 
   /** A step can show a ordered sequence of steps. Passed from StepGroup. */
   ordered?: boolean;
@@ -49,16 +49,18 @@ interface StepProps extends ReactMouseEvents<any> {
   title?: any;
 }
 
-interface StepClass extends React.ComponentClass<StepProps> {
+interface StepComponent extends React.ComponentClass<StepProps> {
   Content: typeof StepContent;
   Description: typeof StepDescription;
   Group: typeof StepGroup;
   Title: typeof StepTitle;
 }
 
-export const Step: StepClass;
+export const Step: StepComponent;
 
 interface StepContentProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -69,15 +71,17 @@ interface StepContentProps {
   className?: string;
 
   /** Shorthand for StepDescription. */
-  description?: any;
+  description?: React.ReactNode;
 
   /** Shorthand for StepTitle. */
   title?: any;
 }
 
-export const StepContent: React.ComponentClass<StepContentProps>;
+export const StepContent: React.StatelessComponent<StepContentProps>;
 
 interface StepDescriptionProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -88,12 +92,14 @@ interface StepDescriptionProps {
   className?: string;
 
   /** Shorthand for primary content. */
-  description?: any;
+  description?: React.ReactNode;
 }
 
-export const StepDescription: React.ComponentClass<StepDescriptionProps>;
+export const StepDescription: React.StatelessComponent<StepDescriptionProps>;
 
 interface StepGroupProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -113,18 +119,20 @@ interface StepGroupProps {
   ordered?: boolean;
 
   /** Steps can have different sizes. */
-  size?: SemanticSIZES;
+  size?: 'mini' | 'tiny' | 'small' | 'large' | 'big' | 'huge' | 'massive';
 
   /** A step can stack vertically only on smaller screens. */
-  stackable?: boolean;
+  stackable?: 'tablet';
 
   /** A step can be displayed stacked vertically. */
-  vertical?: SemanticVERTICALALIGNMENTS;
+  vertical?: boolean;
 }
 
-export const StepGroup: React.ComponentClass<StepGroupProps>;
+export const StepGroup: React.StatelessComponent<StepGroupProps>;
 
 interface StepTitleProps {
+  [key: string]: any;
+
   /** An element type to render as (string or function). */
   as?: any;
 
@@ -135,7 +143,7 @@ interface StepTitleProps {
   className?: string;
 
   /** Shorthand for primary content. */
-  title?: any;
+  title?: React.ReactNode;
 }
 
-export const StepTitle: React.ComponentClass<StepTitleProps>;
+export const StepTitle: React.StatelessComponent<StepTitleProps>;

test/specs/elements/Step/Step-test.js

@@ -1,22 +1,24 @@
 import faker from 'faker'
 import React from 'react'
 
-import * as common from 'test/specs/commonTests'
-import { sandbox } from 'test/utils'
 import Step from 'src/elements/Step/Step'
 import StepContent from 'src/elements/Step/StepContent'
 import StepDescription from 'src/elements/Step/StepDescription'
 import StepTitle from 'src/elements/Step/StepTitle'
+import * as common from 'test/specs/commonTests'
+import { sandbox } from 'test/utils'
 
 describe('Step', () => {
   common.isConformant(Step)
-  common.implementsIconProp(Step)
   common.hasSubComponents(Step, [StepContent, StepDescription, StepTitle])
+  common.rendersChildren(Step)
+
+  common.implementsIconProp(Step)
+
   common.propKeyOnlyToClassName(Step, 'active')
   common.propKeyOnlyToClassName(Step, 'completed')
   common.propKeyOnlyToClassName(Step, 'disabled')
   common.propKeyOnlyToClassName(Step, 'link')
-  common.rendersChildren(Step)
 
   it('renders only children by default', () => {
     shallow(<Step>{faker.hacker.phrase()}</Step>)

test/specs/elements/Step/StepContent-test.js

@@ -1,11 +1,12 @@
-import * as common from 'test/specs/commonTests'
 import StepContent from 'src/elements/Step/StepContent'
 import StepDescription from 'src/elements/Step/StepDescription'
 import StepTitle from 'src/elements/Step/StepTitle'
+import * as common from 'test/specs/commonTests'
 
 describe('StepContent', () => {
   common.isConformant(StepContent)
   common.rendersChildren(StepContent)
+
   common.implementsShorthandProp(StepContent, {
     propKey: 'title',
     ShorthandComponent: StepTitle,

test/specs/elements/Step/StepDescription-test.js

@@ -1,8 +1,8 @@
 import faker from 'faker'
 import React from 'react'
 
-import * as common from 'test/specs/commonTests'
 import StepDescription from 'src/elements/Step/StepDescription'
+import * as common from 'test/specs/commonTests'
 
 describe('StepDescription', () => {
   common.isConformant(StepDescription)

test/specs/elements/Step/StepGroup-test.js

@@ -1,15 +1,18 @@
 import faker from 'faker'
 import React from 'react'
-import * as common from 'test/specs/commonTests'
+
 import Step from 'src/elements/Step/Step'
 import StepGroup from 'src/elements/Step/StepGroup'
+import * as common from 'test/specs/commonTests'
 
 describe('StepGroup', () => {
   common.isConformant(StepGroup)
   common.hasUIClassName(StepGroup)
+
+  common.propKeyAndValueToClassName(StepGroup, 'stackable')
+
   common.propKeyOnlyToClassName(StepGroup, 'fluid')
   common.propKeyOnlyToClassName(StepGroup, 'ordered')
-  common.propKeyAndValueToClassName(StepGroup, 'stackable')
   common.propKeyOnlyToClassName(StepGroup, 'vertical')
 
   describe('renders children', () => {