From 8f528ee824fbcf632146f1400dd365f40e2b42b0 Mon Sep 17 00:00:00 2001 From: Joshua T Flowers Date: Fri, 17 May 2019 16:01:40 +0800 Subject: [PATCH] Add Stepper component (https://github.com/woocommerce/woocommerce-admin/pull/2246) * Add Stepper component * Add Muriel colors as variables * Add changelog entry for Stepper component --- .../client/devdocs/examples.json | 1 + .../client/stylesheets/abstracts/_colors.scss | 4 + .../packages/components/CHANGELOG.md | 1 + .../packages/components/src/index.js | 1 + .../components/src/stepper/check-icon.js | 22 +++++ .../components/src/stepper/example.md | 68 +++++++++++++++ .../packages/components/src/stepper/index.js | 84 +++++++++++++++++++ .../components/src/stepper/style.scss | 72 ++++++++++++++++ .../packages/components/src/style.scss | 1 + 9 files changed, 254 insertions(+) create mode 100644 plugins/woocommerce-admin/packages/components/src/stepper/check-icon.js create mode 100644 plugins/woocommerce-admin/packages/components/src/stepper/example.md create mode 100644 plugins/woocommerce-admin/packages/components/src/stepper/index.js create mode 100644 plugins/woocommerce-admin/packages/components/src/stepper/style.scss diff --git a/plugins/woocommerce-admin/client/devdocs/examples.json b/plugins/woocommerce-admin/client/devdocs/examples.json index 45b29f8cc10..447d7d2fc57 100644 --- a/plugins/woocommerce-admin/client/devdocs/examples.json +++ b/plugins/woocommerce-admin/client/devdocs/examples.json @@ -22,6 +22,7 @@ { "component": "Section" }, { "component": "SegmentedSelection" }, { "component": "SplitButton" }, + { "component": "Stepper" }, { "component": "Summary", "render": "MySummaryList" }, { "component": "Table" }, { "component": "Tag" }, diff --git a/plugins/woocommerce-admin/client/stylesheets/abstracts/_colors.scss b/plugins/woocommerce-admin/client/stylesheets/abstracts/_colors.scss index 65414bdd700..6223497eb2a 100644 --- a/plugins/woocommerce-admin/client/stylesheets/abstracts/_colors.scss +++ b/plugins/woocommerce-admin/client/stylesheets/abstracts/_colors.scss @@ -57,3 +57,7 @@ $core-orange: #ca4a1f; $button: #f0f2f4; $button-border: darken($button, 20%); + +// Muriel +$muriel-gray-dark-300: #969ca1; +$muriel-active: #bb4f10; diff --git a/plugins/woocommerce-admin/packages/components/CHANGELOG.md b/plugins/woocommerce-admin/packages/components/CHANGELOG.md index 54673f72b11..9faf72dc254 100644 --- a/plugins/woocommerce-admin/packages/components/CHANGELOG.md +++ b/plugins/woocommerce-admin/packages/components/CHANGELOG.md @@ -6,6 +6,7 @@ - Tweaks to SummaryListPlaceholder height in order to better match SummaryNumber. - EllipsisMenu component (breaking change): Remove `children` prop in favor of a render prop `renderContent` so that function arguments `isOpen`, `onToggle`, and `onClose` can be passed down. - Chart has a new prop named `yBelow1Format` which overrides the `yFormat` for values between -1 and 1 (not included). +- Add new component `` for showing a list of steps and progress. # 2.0.0 - Chart legend component now uses withInstanceId HOC so the ids used in several HTML elements are unique. diff --git a/plugins/woocommerce-admin/packages/components/src/index.js b/plugins/woocommerce-admin/packages/components/src/index.js index 12d696abfaf..5a56b19d8a5 100644 --- a/plugins/woocommerce-admin/packages/components/src/index.js +++ b/plugins/woocommerce-admin/packages/components/src/index.js @@ -40,6 +40,7 @@ export { default as SearchListItem } from './search-list-control/item'; export { default as SectionHeader } from './section-header'; export { default as SegmentedSelection } from './segmented-selection'; export { default as SplitButton } from './split-button'; +export { default as Stepper } from './stepper'; export { default as SummaryList } from './summary'; export { default as SummaryListPlaceholder } from './summary/placeholder'; export { default as SummaryNumber } from './summary/number'; diff --git a/plugins/woocommerce-admin/packages/components/src/stepper/check-icon.js b/plugins/woocommerce-admin/packages/components/src/stepper/check-icon.js new file mode 100644 index 00000000000..39d48b7c671 --- /dev/null +++ b/plugins/woocommerce-admin/packages/components/src/stepper/check-icon.js @@ -0,0 +1,22 @@ +/** @format */ + +export default () => ( + +); diff --git a/plugins/woocommerce-admin/packages/components/src/stepper/example.md b/plugins/woocommerce-admin/packages/components/src/stepper/example.md new file mode 100644 index 00000000000..a93b7adc5aa --- /dev/null +++ b/plugins/woocommerce-admin/packages/components/src/stepper/example.md @@ -0,0 +1,68 @@ +```jsx +import { Stepper } from '@woocommerce/components'; + +const MyStepper = withState( { + currentStep: 'first', + isComplete: false, +} )( ( { currentStep, isComplete, setState } ) => { + const steps = [ + { + label: 'First', + key: 'first', + }, + { + label: 'Second', + key: 'second', + }, + { + label: 'Third', + key: 'third', + }, + { + label: 'Fourth', + key: 'fourth', + }, + ]; + const currentIndex = steps.findIndex( s => currentStep === s.key ); + + if ( isComplete ) { + steps.forEach( s => s.isComplete = true ); + } + + return ( +
+ { isComplete ? ( + + ) : ( +
+ + + +
+ ) } + + +
+ ); +} ); +``` diff --git a/plugins/woocommerce-admin/packages/components/src/stepper/index.js b/plugins/woocommerce-admin/packages/components/src/stepper/index.js new file mode 100644 index 00000000000..083d42304f7 --- /dev/null +++ b/plugins/woocommerce-admin/packages/components/src/stepper/index.js @@ -0,0 +1,84 @@ +/** @format */ +/** + * External dependencies + */ +import classnames from 'classnames'; +import { Component, Fragment } from '@wordpress/element'; +import PropTypes from 'prop-types'; + +/** + * Internal dependencies + */ +import CheckIcon from './check-icon'; + +/** + * A stepper component to indicate progress in a set number of steps. + */ +class Stepper extends Component { + render() { + const { className, currentStep, steps } = this.props; + const currentIndex = steps.findIndex( s => currentStep === s.key ); + const stepperClassName = classnames( 'woocommerce-stepper', className ); + + return ( +
+ { steps.map( ( step, i ) => { + const { key, label, isComplete } = step; + const stepClassName = classnames( 'woocommerce-stepper__step', { + 'is-active': key === currentStep, + 'is-complete': 'undefined' !== typeof isComplete ? isComplete : currentIndex > i, + } ); + + return ( + +
+
+ { i + 1 } + +
+ + { label } + +
+
+ + ); + } ) } +
+ ); + } +} + +Stepper.propTypes = { + /** + * Additional class name to style the component. + */ + className: PropTypes.string, + /** + * The current step's key. + */ + currentStep: PropTypes.string.isRequired, + /** + * An array of steps used. + */ + steps: PropTypes.arrayOf( + PropTypes.shape( { + /** + * Key used to identify step. + */ + key: PropTypes.string.isRequired, + /** + * Label displayed in stepper. + */ + label: PropTypes.string.isRequired, + /** + * Optionally mark a step complete regardless of step index. + */ + isComplete: PropTypes.bool, + } ) + ).isRequired, +}; + +export default Stepper; diff --git a/plugins/woocommerce-admin/packages/components/src/stepper/style.scss b/plugins/woocommerce-admin/packages/components/src/stepper/style.scss new file mode 100644 index 00000000000..33376435281 --- /dev/null +++ b/plugins/woocommerce-admin/packages/components/src/stepper/style.scss @@ -0,0 +1,72 @@ +.woocommerce-stepper { + background: #fff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), + 0 2px 2px rgba(0, 0, 0, 0.12), + 0 0 2px rgba(0, 0, 0, 0.14); + display: flex; + justify-content: space-around; + align-items: center; + margin-bottom: $gap-large; + padding-left: $gap; + padding-right: $gap; + font-size: 16px; + + .woocommerce-stepper__step { + display: inline-flex; + align-items: center; + padding: $gap-small; + font-weight: 600; + + svg { + display: none; + } + + &.is-active, + &.is-complete { + color: $muriel-active; + + .woocommerce-stepper__step-icon { + background: $muriel-active; + } + } + + &.is-complete { + .woocommerce-stepper__step-number { + display: none; + } + svg { + display: inline; + } + } + } + + .woocommerce-stepper__step-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + margin-right: $gap-small; + background: $muriel-gray-dark-300; + color: #fff; + border-radius: 50%; + } + + .woocommerce-stepper__step-divider { + flex-grow: 1; + border-bottom: 1px solid $muriel-gray-dark-300; + + &:last-child { + display: none; + } + } + + @include breakpoint( '<782px' ) { + .woocommerce-stepper_step-label { + display: none; + } + .woocommerce-stepper__step-icon { + margin-right: 0; + } + } +} diff --git a/plugins/woocommerce-admin/packages/components/src/style.scss b/plugins/woocommerce-admin/packages/components/src/style.scss index be462b2cf79..719c79e8896 100644 --- a/plugins/woocommerce-admin/packages/components/src/style.scss +++ b/plugins/woocommerce-admin/packages/components/src/style.scss @@ -26,6 +26,7 @@ @import 'section-header/style.scss'; @import 'segmented-selection/style.scss'; @import 'split-button/style.scss'; +@import 'stepper/style.scss'; @import 'summary/style.scss'; @import 'table/style.scss'; @import 'tag/style.scss';