diff --git a/src/Stepper/Step.js b/src/Stepper/Step.js index d9e7501102761e..98aa15833d702d 100644 --- a/src/Stepper/Step.js +++ b/src/Stepper/Step.js @@ -1,11 +1,12 @@ -// @flow weak +// @flow import React from 'react'; -import PropTypes from 'prop-types'; +import type { Element, Node } from 'react'; import classNames from 'classnames'; import withStyles from '../styles/withStyles'; +import type { Orientation } from './Stepper'; -export const styles = theme => ({ +export const styles = (theme: Object) => ({ root: { flex: '0 0 auto', }, @@ -26,7 +27,69 @@ export const styles = theme => ({ }, }); -function Step(props) { +type ProvidedProps = { + alternativeLabel: boolean, + classes: Object, + connector: Element, + disabled: boolean, + index: number, + last: boolean, + optional: boolean, + orientation: Orientation, +}; + +export type Props = { + /** + * Sets the step as active. Is passed to child components. + */ + active?: boolean, + /** + * @ignore + * Set internally by Stepper when it's supplied with the alternativeLabel prop. + */ + alternativeLabel?: boolean, + /** + * Should be `Step` sub-components such as `StepLabel`, `StepContent`. + */ + children?: Node, + /** + * @ignore + */ + classes?: Object, + /** + * Mark the step as completed. Is passed to child components. + */ + completed?: boolean, + /** + * @ignore + * Passed down from Stepper if alternativeLabel is also set. + */ + connector?: Element, + /** + * Mark the step as disabled, will also disable the button if + * `StepButton` is a child of `Step`. Is passed to child components. + */ + disabled?: boolean, + /** + * @ignore + * Used internally for numbering. + */ + index?: number, + /** + * @ignore + */ + last?: boolean, + /** + * Define this step as optional. + */ + optional?: boolean, + /** + * @ignore + */ + orientation?: Orientation, +}; + +function Step(props: ProvidedProps & Props) { const { active, alternativeLabel, @@ -69,55 +132,11 @@ function Step(props) { ); } -Step.propTypes = { - /** - * Sets the step as active. Is passed to child components. - */ - active: PropTypes.bool, - /** - * @ignore - * Set internally by Stepper when it's supplied with the alternativeLabel prop. - */ - alternativeLabel: PropTypes.bool, - /** - * Should be `Step` sub-components such as `StepLabel`. - */ - children: PropTypes.node, - /** - * @ignore - */ - classes: PropTypes.object, - /** - * Mark the step as completed. Is passed to child components. - */ - completed: PropTypes.bool, - /** - * @ignore - * Passed down from Stepper if alternativeLabel is also set. - */ - connector: PropTypes.node, - /** - * Mark the step as disabled, will also disable the button if - * `StepButton` is a child of `Step`. Is passed to child components. - */ - disabled: PropTypes.bool, - /** - * @ignore - * Used internally for numbering. - */ - index: PropTypes.number.isRequired, - /** - * @ignore - */ - last: PropTypes.bool, - /** - * Define this step as optional. - */ - optional: PropTypes.bool, - /** - * @ignore - */ - orientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired, +Step.defaultProps = { + active: false, + completed: false, + disabled: false, + optional: false, }; export default withStyles(styles)(Step); diff --git a/src/Stepper/StepButton.js b/src/Stepper/StepButton.js index 7af1c88585b4b5..950b591014b24d 100644 --- a/src/Stepper/StepButton.js +++ b/src/Stepper/StepButton.js @@ -1,14 +1,16 @@ -// @flow weak +// @flow +// @inheritedComponent ButtonBase -import React from 'react'; -import PropTypes from 'prop-types'; +import React, { Children } from 'react'; +import type { Element } from 'react'; import classNames from 'classnames'; import withStyles from '../styles/withStyles'; import ButtonBase from '../ButtonBase'; import StepLabel from './StepLabel'; +import type { Orientation } from './Stepper'; -const isLabel = child => { - return child && child.type && child.type.muiName === 'StepLabel'; +const isLabel = children => { + return children && Children.count(children) === 1 && children.type && children.type === StepLabel; }; export const styles = () => ({ @@ -24,96 +26,120 @@ export const styles = () => ({ }, }); -function StepButton(props) { - const { - active, - alternativeLabel, - children, - className: classNameProp, - completed, - classes, - disabled, - icon, - iconContainerClassName, - last, // eslint-disable-line no-unused-vars - optional, - orientation, - ...other - } = props; +export type Icon = Element | string | number; - const className = classNames( - classes.root, - ([classes.alternativeLabelRoot]: alternativeLabel), - classNameProp, - ); - const child = isLabel(children) ? children : {children}; - - return ( - - {React.cloneElement(child, { - active, - alternativeLabel, - completed, - disabled, - icon, - iconContainerClassName, - optional, - orientation, - })} - - ); -} +type ProvidedProps = { + active: boolean, + alternativeLabel: boolean, + classes: Object, + completed: boolean, + disabled: boolean, + icon: Icon, + last: boolean, + optional: boolean, + orientation: Orientation, +}; -StepButton.propTypes = { +export type Props = { /** - * Passed from `Step` Is passed to StepLabel. + * @ignore + * Passed in via `Step` - passed through to `StepLabel`. */ - active: PropTypes.bool, + active?: boolean, /** * @ignore * Set internally by Stepper when it's supplied with the alternativeLabel prop. */ - alternativeLabel: PropTypes.bool, + alternativeLabel?: boolean, /** * Can be a `StepLabel` or a node to place inside `StepLabel` as children. */ - children: PropTypes.node, + children: Element, /** * @ignore */ - classes: PropTypes.object, + classes?: Object, /** * @ignore */ - className: PropTypes.string, + className?: string, /** + * @ignore * Sets completed styling. Is passed to StepLabel. */ - completed: PropTypes.bool, + completed?: boolean, /** + * @ignore * Disables the button and sets disabled styling. Is passed to StepLabel. */ - disabled: PropTypes.bool, + disabled?: boolean, /** * The icon displayed by the step label. */ - icon: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.number]), + icon?: Icon, /** - * Override the inline-styles of the icon container element. + * Pass down to the the `StepLabel` prop `iconContainerClassName`. */ - iconContainerClassName: PropTypes.string, + iconContainerClassName?: string, /** * @ignore */ - last: PropTypes.bool, + last?: boolean, /** * @ignore */ - optional: PropTypes.bool, + optional?: boolean, /** * @ignore */ - orientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired, + orientation: Orientation, }; +function StepButton(props: ProvidedProps & Props) { + const { + active, + alternativeLabel, + children, + className: classNameProp, + completed, + classes, + disabled, + icon, + iconContainerClassName, + last, // eslint-disable-line no-unused-vars + optional, + orientation, + ...other + } = props; + + const className = classNames( + classes.root, + { + [classes.alternativeLabelRoot]: alternativeLabel, + }, + classNameProp, + ); + const childProps = { + active, + alternativeLabel, + completed, + disabled, + icon, + iconContainerClassName, + optional, + orientation, + }; + const child = isLabel(children) ? ( + React.cloneElement(children, childProps) + ) : ( + {children} + ); + + return ( + + {child} + + ); +} + export default withStyles(styles)(StepButton); diff --git a/src/Stepper/StepButton.spec.js b/src/Stepper/StepButton.spec.js index f878e69d070303..ef3e59af1a8ab6 100644 --- a/src/Stepper/StepButton.spec.js +++ b/src/Stepper/StepButton.spec.js @@ -23,7 +23,11 @@ describe('', () => { }); it('merges user className into the root node', () => { - const wrapper = shallow(); + const wrapper = shallow( + + Hello + , + ); assert.include(wrapper.props().className, 'foo'); }); diff --git a/src/Stepper/StepConnector.js b/src/Stepper/StepConnector.js index 0546a3fa666142..16325e7a059297 100644 --- a/src/Stepper/StepConnector.js +++ b/src/Stepper/StepConnector.js @@ -1,11 +1,11 @@ -// @flow weak +// @flow import React from 'react'; -import PropTypes from 'prop-types'; import classNames from 'classnames'; import withStyles from '../styles/withStyles'; +import type { Orientation } from './Stepper'; -export const styles = theme => ({ +export const styles = (theme: Object) => ({ root: { flex: '1 1 auto', }, @@ -37,7 +37,33 @@ export const styles = theme => ({ }, }); -function StepConnector(props) { +type ProvidedProps = { + alternativeLabel: boolean, + classes: Object, + orientation: Orientation, +}; + +export type Props = { + /** + * @ignore + * Set internally by Step when it's supplied with the alternativeLabel prop. + */ + alternativeLabel?: boolean, + /** + * Useful to extend the style applied to the component. + */ + classes?: Object, + /** + * @ignore + */ + className?: string, + /** + * @ignore + */ + orientation?: Orientation, +}; + +function StepConnector(props: ProvidedProps & Props) { const { alternativeLabel, className: classNameProp, classes, orientation, ...other } = props; const className = classNames( @@ -61,24 +87,9 @@ function StepConnector(props) { ); } -StepConnector.propTypes = { - /** - * @ignore - * Set internally by Step when it's supplied with the alternativeLabel prop. - */ - alternativeLabel: PropTypes.bool, - /** - * Useful to extend the style applied to the component. - */ - classes: PropTypes.object.isRequired, - /** - * @ignore - */ - className: PropTypes.string, - /** - * @ignore - */ - orientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired, +StepConnector.defaultProps = { + alternativeLabel: false, + orientation: 'horizontal', }; export default withStyles(styles)(StepConnector); diff --git a/src/Stepper/StepContent.js b/src/Stepper/StepContent.js index a3bfcf649637b9..c24473845d1693 100644 --- a/src/Stepper/StepContent.js +++ b/src/Stepper/StepContent.js @@ -1,13 +1,13 @@ -// @flow weak +// @flow import React from 'react'; -import PropTypes from 'prop-types'; import warning from 'warning'; import classNames from 'classnames'; import Collapse from '../transitions/Collapse'; import withStyles from '../styles/withStyles'; +import type { Orientation } from './Stepper'; -export const styles = theme => ({ +export const styles = (theme: Object) => ({ root: { marginTop: theme.spacing.unit, marginLeft: 12, // half icon @@ -20,7 +20,71 @@ export const styles = theme => ({ }, }); -function StepContent(props) { +export type TransitionDuration = number | 'auto'; + +type ProvidedProps = { + active: boolean, + alternativeLabel: boolean, + classes: Object, + last: boolean, + optional: boolean, + orientation: Orientation, + transition: Function, + transitionDuration: TransitionDuration, +}; + +export type Props = { + /** + * @ignore + * Expands the content + */ + active?: boolean, + /** + * @ignore + * Set internally by Step when it's supplied with the alternativeLabel prop. + */ + alternativeLabel?: boolean, + /** + * Step content + */ + children: Node, + /** + * @ignore + */ + classes?: Object, + /** + * @ignore + */ + className?: string, + /** + * @ignore + */ + completed?: boolean, + /** + * @ignore + */ + last?: boolean, + /** + * @ignore + * Set internally by Step when it's supplied with the optional prop. + */ + optional?: boolean, + /** + * @ignore + */ + orientation?: Orientation, + /** + * Collapse component. + */ + transition?: Function, + /** + * Adjust the duration of the content expand transition. + * Passed as a prop to the transition component. + */ + transitionDuration: TransitionDuration, +}; + +function StepContent(props: ProvidedProps & Props) { const { active, alternativeLabel, // eslint-disable-line no-unused-vars @@ -59,60 +123,12 @@ function StepContent(props) { }; return ( -
{React.createElement(transition, transitionProps, children)}
+
+ {React.createElement(transition, transitionProps, children)} +
); } -StepContent.propTypes = { - /** - * Expands the content - */ - active: PropTypes.bool, - /** - * @ignore - * Set internally by Step when it's supplied with the alternativeLabel prop. - */ - alternativeLabel: PropTypes.bool, - /** - * Step content - */ - children: PropTypes.node, - /** - * Useful to extend the style applied to the component. - */ - classes: PropTypes.object.isRequired, - /** - * @ignore - */ - className: PropTypes.string, - /** - * @ignore - */ - completed: PropTypes.bool, - /** - * @ignore - */ - last: PropTypes.bool, - /** - * @ignore - * Set internally by Step when it's supplied with the optional prop. - */ - optional: PropTypes.bool, - /** - * @ignore - */ - orientation: PropTypes.oneOf(['vertical']).isRequired, - /** - * Collapse component. - */ - transition: PropTypes.func, - /** - * Adjust the duration of the content expand transition. - * Passed as a prop to the transition component. - */ - transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), -}; - StepContent.defaultProps = { transition: Collapse, transitionDuration: 'auto', diff --git a/src/Stepper/StepContent.spec.js b/src/Stepper/StepContent.spec.js index e17ef86ea7b17a..6183981fa45576 100644 --- a/src/Stepper/StepContent.spec.js +++ b/src/Stepper/StepContent.spec.js @@ -23,7 +23,7 @@ describe('', () => { }); it('renders a div', () => { - const wrapper = shallow(); + const wrapper = shallow(Here is the content); assert.ok(wrapper.is('div')); }); @@ -31,15 +31,17 @@ describe('', () => { const wrapper = shallow( , + > + Lorem ipsum + , ); const { style, role } = wrapper.props(); assert.strictEqual(style.paddingRight, 200); assert.strictEqual(style.color, 'purple'); assert.strictEqual(style.border, '1px solid tomato'); - assert.strictEqual(role, 'hello'); + assert.strictEqual(role, 'Tabpanel'); }); it('renders children inside an Collapse component', () => { diff --git a/src/Stepper/StepIcon.js b/src/Stepper/StepIcon.js index 4cf0b9dbe6e174..fca893432f3b24 100644 --- a/src/Stepper/StepIcon.js +++ b/src/Stepper/StepIcon.js @@ -1,50 +1,57 @@ -// @flow weak +// @flow import React from 'react'; -import PropTypes from 'prop-types'; import classNames from 'classnames'; import CheckCircle from '../svg-icons/CheckCircle'; import withStyles from '../styles/withStyles'; import StepPositionIcon from './StepPositionIcon'; +import type { Icon } from './StepButton'; -export const styles = theme => ({ +export const styles = (theme: Object) => ({ root: {}, completed: { fill: theme.palette.primary[500], }, }); -function StepIcon(props) { - const { completed, icon, active, classes } = props; - const iconType = typeof icon; - - if (iconType === 'number' || iconType === 'string') { - if (completed) { - return ; - } - return ; - } - - return icon; -} +type ProvidedProps = { + active: boolean, + classes: Object, + completed: boolean, + icon: Icon, +}; -StepIcon.propTypes = { +export type Props = { /** * Whether this step is active. */ - active: PropTypes.bool, + active?: boolean, /** * Classses for component style customizations. */ - classes: PropTypes.object, + classes?: Object, /** * Mark the step as completed. Is passed to child components. */ - completed: PropTypes.bool, + completed?: boolean, /** * The icon displayed by the step label. */ - icon: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.number]), + icon?: Icon, }; +function StepIcon(props: ProvidedProps & Props) { + const { completed, icon, active, classes } = props; + const iconType = typeof icon; + + if (iconType === 'number' || iconType === 'string') { + if (completed) { + return ; + } + return ; + } + + return icon; +} + export default withStyles(styles)(StepIcon); diff --git a/src/Stepper/StepLabel.js b/src/Stepper/StepLabel.js index b1903ec305ab20..c6cf9a01f963a5 100644 --- a/src/Stepper/StepLabel.js +++ b/src/Stepper/StepLabel.js @@ -1,13 +1,15 @@ -// @flow weak +// @flow import React from 'react'; -import PropTypes from 'prop-types'; +import type { Node } from 'react'; import classNames from 'classnames'; import withStyles from '../styles/withStyles'; import Typography from '../Typography'; import StepIcon from './StepIcon'; +import type { Orientation } from './Stepper'; +import type { Icon } from './StepButton'; -export const styles = theme => ({ +export const styles = (theme: Object) => ({ root: { display: 'flex', alignItems: 'center', @@ -39,7 +41,69 @@ export const styles = theme => ({ }, }); -function StepLabel(props) { +type ProvidedProps = { + active: boolean, + alternativeLabel: boolean, + classes: Object, + completed: boolean, + disabled: boolean, + icon: Icon, + last: boolean, + orientation: Orientation, +}; + +export type Props = { + /** + * @ignore + * Sets the step as active. Is passed to child components. + */ + active?: boolean, + /** + * @ignore + * Set internally by Stepper when it's supplied with the alternativeLabel prop. + */ + alternativeLabel?: boolean, + /** + * In most cases will simply be a string containing a title for the label. + */ + children: Node | string, + /** + * Custom styles for component. + */ + classes?: Object, + /** + * @ignore + * Mark the step as completed. Is passed to child components. + */ + completed?: boolean, + /** + * Mark the step as disabled, will also disable the button if + * `StepLabelButton` is a child of `StepLabel`. Is passed to child components. + */ + disabled?: boolean, + /** + * The icon displayed by the step label - if not set will be set by Step component. + */ + icon?: Icon, + /** + * Icon container class name + */ + iconContainerClassName?: string, + /** + * @ignore + */ + last?: boolean, + /** + * @ignore + */ + optional?: boolean, + /** + * @ignore + */ + orientation?: Orientation, +}; + +function StepLabel(props: ProvidedProps & Props) { const { active, completed, @@ -98,53 +162,16 @@ function StepLabel(props) { ); } -StepLabel.propTypes = { - /** - * Sets the step as active. Is passed to child components. - */ - active: PropTypes.bool, - /** - * @ignore - * Set internally by Stepper when it's supplied with the alternativeLabel prop. - */ - alternativeLabel: PropTypes.bool, - /** - * Should be `StepLabel` sub-components such as `StepLabelLabel`. - */ - children: PropTypes.node, - /** - * Custom styles for component. - */ - classes: PropTypes.object, - /** - * Mark the step as completed. Is passed to child components. - */ - completed: PropTypes.bool, - /** - * Mark the step as disabled, will also disable the button if - * `StepLabelButton` is a child of `StepLabel`. Is passed to child components. - */ - disabled: PropTypes.bool, - /** - * The icon displayed by the step label. - */ - icon: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.number]), - /** - * Icon container class name - */ - iconContainerClassName: PropTypes.string, - /** - * @ignore - */ - last: PropTypes.bool, - /** - * @ignore - */ - optional: PropTypes.bool, - /** - * @ignore - */ - orientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired, +StepLabel.defaultProps = { + active: false, + alternativeLabel: false, + completed: false, + disabled: false, + last: false, + optional: false, + orientation: 'horizontal', }; +StepLabel.muiName = 'StepLabel'; + export default withStyles(styles)(StepLabel); diff --git a/src/Stepper/StepLabel.spec.js b/src/Stepper/StepLabel.spec.js index 1fc126229daf3c..247c69d613d947 100644 --- a/src/Stepper/StepLabel.spec.js +++ b/src/Stepper/StepLabel.spec.js @@ -26,7 +26,9 @@ describe('', () => { orientation="horizontal" style={{ paddingRight: 200, color: 'purple', border: '1px solid tomato' }} data-myProp="hello" - />, + > + My Label + , ); const props = wrapper.props(); assert.strictEqual(props.style.paddingRight, 200); diff --git a/src/Stepper/StepPositionIcon.js b/src/Stepper/StepPositionIcon.js index 985e9b3e37ae15..8ee5c06397f142 100644 --- a/src/Stepper/StepPositionIcon.js +++ b/src/Stepper/StepPositionIcon.js @@ -1,12 +1,12 @@ -// @flow weak +// @flow import React from 'react'; -import PropTypes from 'prop-types'; import classNames from 'classnames'; import withStyles from '../styles/withStyles'; import SvgIcon from '../SvgIcon'; +import type { Icon } from './StepButton'; -export const styles = theme => ({ +export const styles = (theme: Object) => ({ root: { fill: theme.palette.action.disabled, display: 'block', @@ -20,7 +20,28 @@ export const styles = theme => ({ }, }); -function StepPositionIcon(props) { +type ProvidedProps = { + active: boolean, + classes: Object, + position: Icon, +}; + +export type Props = { + /** + * Whether this step is active. + */ + active?: boolean, + /** + * Classses for component style customizations. + */ + classes: Object, + /** + * The step position as a number. + */ + position?: Icon, +}; + +function StepPositionIcon(props: ProvidedProps & Props) { const { position, classes, active } = props; const className = classNames(classes.root, { @@ -37,19 +58,4 @@ function StepPositionIcon(props) { ); } -StepPositionIcon.propTypes = { - /** - * Whether this step is active. - */ - active: PropTypes.bool, - /** - * Classses for component style customizations. - */ - classes: PropTypes.object, - /** - * The step position as a number. - */ - position: PropTypes.number.isRequired, -}; - export default withStyles(styles)(StepPositionIcon); diff --git a/src/Stepper/StepPositionIcon.spec.js b/src/Stepper/StepPositionIcon.spec.js index e5c54afc98d095..64a2ef6023d425 100644 --- a/src/Stepper/StepPositionIcon.spec.js +++ b/src/Stepper/StepPositionIcon.spec.js @@ -10,7 +10,6 @@ describe('', () => { let shallow; let mount; before(() => { - shallow = createShallow({ dive: true }); mount = createMount(); }); diff --git a/src/Stepper/Stepper.js b/src/Stepper/Stepper.js index f1fbe0299c1698..62cf50844589ab 100644 --- a/src/Stepper/Stepper.js +++ b/src/Stepper/Stepper.js @@ -1,13 +1,15 @@ -// @flow weak +// @flow +// @inheritedComponent Paper import React, { Children } from 'react'; -import PropTypes from 'prop-types'; +import type { Element, Node, ChildrenArray } from 'react'; import classNames from 'classnames'; import withStyles from '../styles/withStyles'; import Paper from '../Paper'; import StepConnector from './StepConnector'; +import Step from './Step'; -export const styles = theme => ({ +export const styles = (theme: Object) => ({ root: { display: 'flex', padding: theme.spacing.unit * 3, @@ -22,7 +24,54 @@ export const styles = theme => ({ }, }); -function Stepper(props) { +export type Orientation = 'horizontal' | 'vertical'; + +type ProvidedProps = { + activeStep: number, + alternativeLabel: boolean, + classes: Object, + connector: Element, + nonLinear: boolean, + orientation: Orientation, +}; + +export type Props = { + /** + * Set the active step (zero based index). + */ + activeStep?: number, + /** + * If set to 'true' and orientation is horizontal, + * then the step label will be positioned under the icon. + */ + alternativeLabel?: boolean, + /** + * Two or more `` components. + */ + children: ChildrenArray>, + /** + * Useful to extend the style applied to components. + */ + classes?: Object, + /** + * @ignore + */ + className?: string, + /** + * A component to be placed between each step. + */ + connector?: Element | Node, + /** + * If set the `Stepper` will not assist in controlling steps for linear flow + */ + nonLinear?: boolean, + /** + * The stepper orientation (layout flow direction) + */ + orientation?: Orientation, +}; + +function Stepper(props: ProvidedProps & Props) { const { activeStep, alternativeLabel, @@ -47,6 +96,12 @@ function Stepper(props) { const controlProps = { index, orientation, + active: false, + completed: false, + disabled: false, + last: index + 1 === numChildren, + alternativeLabel, + connector: connectorProp, }; if (activeStep === index) { @@ -57,15 +112,6 @@ function Stepper(props) { controlProps.disabled = true; } - if (index + 1 === numChildren) { - controlProps.last = true; - } - - if (alternativeLabel) { - controlProps.alternativeLabel = true; - controlProps.connector = connectorProp; - } - return [ !alternativeLabel && index > 0 && connector, React.cloneElement(step, Object.assign(controlProps, step.props)), @@ -79,42 +125,6 @@ function Stepper(props) { ); } -Stepper.propTypes = { - /** - * Set the active step (zero based index). - */ - activeStep: PropTypes.number, - /** - * If set to 'true' and orientation is horizontal, - * then the step label will be positioned under the icon. - */ - alternativeLabel: PropTypes.bool, - /** - * Two or more `` components. - */ - children: PropTypes.node, - /** - * Useful to extend the style applied to components. - */ - classes: PropTypes.object.isRequired, - /** - * @ignore - */ - className: PropTypes.string, - /** - * A component to be placed between each step. - */ - connector: PropTypes.node, - /** - * If set the `Stepper` will not assist in controlling steps for linear flow - */ - nonLinear: PropTypes.bool, - /** - * The stepper orientation (layout flow direction) - */ - orientation: PropTypes.oneOf(['horizontal', 'vertical']), -}; - Stepper.defaultProps = { activeStep: 0, alternativeLabel: false, diff --git a/src/Stepper/Stepper.spec.js b/src/Stepper/Stepper.spec.js index e4a4f4e1f77ef4..c90947bd8373c6 100644 --- a/src/Stepper/Stepper.spec.js +++ b/src/Stepper/Stepper.spec.js @@ -22,13 +22,21 @@ describe('', () => { }); it('merges user className into the root node', () => { - const wrapper = shallow(); + const wrapper = shallow( + + + , + ); assert.include(wrapper.props().className, 'foo'); }); it('should render a Paper component', () => { - const wrapper = shallow(); + const wrapper = shallow( + + + , + ); assert.strictEqual(wrapper.name(), 'withStyles(Paper)'); assert.strictEqual(wrapper.props().elevation, 0, 'should have no elevation'); }); @@ -103,8 +111,8 @@ describe('', () => { ); const steps = wrapper.children().find('div'); - assert.strictEqual(steps.at(0).props().last, undefined); - assert.strictEqual(steps.at(1).props().last, undefined); + assert.strictEqual(steps.at(0).props().last, false); + assert.strictEqual(steps.at(1).props().last, false); assert.strictEqual(steps.at(2).props().last, true); }); }); diff --git a/src/Stepper/index.d.ts b/src/Stepper/index.d.ts deleted file mode 100644 index f1a0b90a301924..00000000000000 --- a/src/Stepper/index.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { default } from './Radio'; -export * from './Radio'; -export { default as RadioGroup } from './RadioGroup'; -export * from './RadioGroup'; diff --git a/src/Stepper/index.js b/src/Stepper/index.js index 7cad8eb6687fc1..790784239eae72 100644 --- a/src/Stepper/index.js +++ b/src/Stepper/index.js @@ -1,8 +1,7 @@ // @flow -export Step from './Step'; -export StepButton from './StepButton'; -export StepContent from './StepContent'; -// export StepContent from './StepContent'; -export StepLabel from './StepLabel'; -export Stepper from './Stepper'; +export { default as Stepper } from './Stepper'; +export { default as Step } from './Step'; +export { default as StepButton } from './StepButton'; +export { default as StepContent } from './StepContent'; +export { default as StepLabel } from './StepLabel';