From 8c619da2dc2e94e0e1c4f09746e6c42ed1adeab4 Mon Sep 17 00:00:00 2001 From: Alexander Fedyashov Date: Tue, 24 Jan 2017 20:54:09 +0200 Subject: [PATCH] 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 | 14 +++--- src/elements/Step/StepContent.js | 7 ++- src/elements/Step/StepDescription.js | 8 +++- src/elements/Step/StepGroup.js | 36 +++++++++------ src/elements/Step/StepTitle.js | 13 ++++-- src/elements/Step/index.d.ts | 46 +++++++++++-------- test/specs/elements/Step/Step-test.js | 10 ++-- test/specs/elements/Step/StepContent-test.js | 3 +- .../elements/Step/StepDescription-test.js | 2 +- test/specs/elements/Step/StepGroup-test.js | 7 ++- test/specs/elements/Step/StepTitle-test.js | 2 +- 11 files changed, 92 insertions(+), 56 deletions(-) diff --git a/src/elements/Step/Step.js b/src/elements/Step/Step.js index 8e89d9c422..6c8bb5a178 100644 --- a/src/elements/Step/Step.js +++ b/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`. diff --git a/src/elements/Step/StepContent.js b/src/elements/Step/StepContent.js index 68eb90ff96..4c5ae5a6fa 100644 --- a/src/elements/Step/StepContent.js +++ b/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) diff --git a/src/elements/Step/StepDescription.js b/src/elements/Step/StepDescription.js index d9696e478a..3a2a0de323 100644 --- a/src/elements/Step/StepDescription.js +++ b/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 {_.isNil(children) ? description : children} + return ( + + {_.isNil(children) ? description : children} + + ) } StepDescription._meta = { diff --git a/src/elements/Step/StepGroup.js b/src/elements/Step/StepGroup.js index 22dbaa2b34..dc97408fdd 100644 --- a/src/elements/Step/StepGroup.js +++ b/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,10 +55,6 @@ function StepGroup(props) { StepGroup._meta = { name: 'StepGroup', parent: 'Step', - props: { - sizes: _.without(SUI.SIZES, 'medium'), - stackable: ['tablet'], - }, type: META.TYPES.ELEMENT, } @@ -54,12 +62,12 @@ 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, diff --git a/src/elements/Step/StepTitle.js b/src/elements/Step/StepTitle.js index 1a979818e4..e50b27e6a6 100644 --- a/src/elements/Step/StepTitle.js +++ b/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 {_.isNil(children) ? title : children} + return ( + + {_.isNil(children) ? title : children} + + ) } StepTitle._meta = { diff --git a/src/elements/Step/index.d.ts b/src/elements/Step/index.d.ts index 934060e25b..6d25a33219 100644 --- a/src/elements/Step/index.d.ts +++ b/src/elements/Step/index.d.ts @@ -1,14 +1,14 @@ -import { ReactMouseEvents, SemanticSIZES, SemanticVERTICALALIGNMENTS } from '../..'; import * as React from 'react'; - -interface StepProps extends ReactMouseEvents { - /** 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 { 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; + onClick?: (event: React.MouseEvent, 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 { title?: any; } -interface StepClass extends React.ComponentClass { +interface StepComponent extends React.ComponentClass { 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; +export const StepContent: React.StatelessComponent; 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; +export const StepDescription: React.StatelessComponent; 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; +export const StepGroup: React.StatelessComponent; 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; +export const StepTitle: React.StatelessComponent; diff --git a/test/specs/elements/Step/Step-test.js b/test/specs/elements/Step/Step-test.js index 39b866276c..9ba4dae851 100644 --- a/test/specs/elements/Step/Step-test.js +++ b/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({faker.hacker.phrase()}) diff --git a/test/specs/elements/Step/StepContent-test.js b/test/specs/elements/Step/StepContent-test.js index 92648a3b0f..c29168e131 100644 --- a/test/specs/elements/Step/StepContent-test.js +++ b/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, diff --git a/test/specs/elements/Step/StepDescription-test.js b/test/specs/elements/Step/StepDescription-test.js index 7ade4c1d5f..3940a22300 100644 --- a/test/specs/elements/Step/StepDescription-test.js +++ b/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) diff --git a/test/specs/elements/Step/StepGroup-test.js b/test/specs/elements/Step/StepGroup-test.js index 2779ca7a44..608e24d458 100644 --- a/test/specs/elements/Step/StepGroup-test.js +++ b/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', () => { diff --git a/test/specs/elements/Step/StepTitle-test.js b/test/specs/elements/Step/StepTitle-test.js index 18d5887099..13c1508494 100644 --- a/test/specs/elements/Step/StepTitle-test.js +++ b/test/specs/elements/Step/StepTitle-test.js @@ -1,8 +1,8 @@ import faker from 'faker' import React from 'react' -import * as common from 'test/specs/commonTests' import StepTitle from 'src/elements/Step/StepTitle' +import * as common from 'test/specs/commonTests' describe('StepTitle', () => { common.isConformant(StepTitle)