Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update Profile Wizard Header to Display Stepper (https://github.com/woocommerce/woocommerce-admin/pull/2296) 

* Update Profile Wizard Header to contain steps

* Handle PR Feedback: Fix wpbody-content height only applying on onboarding routes, fix width/alignment of stepper.
This commit is contained in:
Justin Shreve 2019-05-27 12:37:02 -04:00 committed by GitHub
parent e21a8f6b91
commit fa673a66c6
5 changed files with 155 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
plugins/woocommerce-admin/client/dashboard/profile-wizard/header.js
View File

@ -3,17 +3,26 @@
* External dependencies * External dependencies
*/ */
import { Component } from '@wordpress/element'; import { Component } from '@wordpress/element';
import { filter } from 'lodash';
import classnames from 'classnames';
/** /**
* Internal dependencies * Internal dependencies
*/ */
import { Stepper } from '@woocommerce/components';
import HeaderLogo from './header-logo'; import HeaderLogo from './header-logo';
export default class ProfileWizardHeader extends Component { export default class ProfileWizardHeader extends Component {
renderStepper() {
const steps = filter( this.props.steps, step => !! step.label );
return <Stepper steps={ steps } currentStep={ this.props.currentStep } />;
}
render() { render() {
return ( const currentStep = this.props.steps.find( s => s.key === this.props.currentStep );
<div className="woocommerce-profile-wizard__header"> const showStepper = ! currentStep || ! currentStep.label ? false : true;
<HeaderLogo /> const classes = classnames( 'woocommerce-profile-wizard__header', {
</div> 'is-stepper': showStepper,
); } );
return <div className={ classes }>{ showStepper ? this.renderStepper() : <HeaderLogo /> }</div>;
} }
} }

44
plugins/woocommerce-admin/client/dashboard/profile-wizard/index.js
View File

@ -2,18 +2,20 @@
/** /**
* External dependencies * External dependencies
*/ */
import { Component, createElement } from '@wordpress/element'; import { Component, createElement, Fragment } from '@wordpress/element';
import { pick } from 'lodash';
/** /**
* Internal depdencies * Internal depdencies
*/ */
import ProfileWizardHeader from './header';
import Plugins from './steps/plugins'; import Plugins from './steps/plugins';
import Start from './steps/start/'; import Start from './steps/start';
import './style.scss'; import './style.scss';
import { __ } from '@wordpress/i18n';
const getSteps = () => { const getSteps = () => {
const steps = []; const steps = [];
steps.push( { steps.push( {
key: 'start', key: 'start',
container: Start, container: Start,
@ -22,7 +24,31 @@ const getSteps = () => {
key: 'plugins', key: 'plugins',
container: Plugins, container: Plugins,
} ); } );
steps.push( {
key: 'store-details',
container: Fragment,
label: __( 'Store Details', 'woocommerce-admin' ),
} );
steps.push( {
key: 'industry',
container: Fragment,
label: __( 'Industry', 'woocommerce-admin' ),
} );
steps.push( {
key: 'product-types',
container: Fragment,
label: __( 'Product Types', 'woocommerce-admin' ),
} );
steps.push( {
key: 'business-details',
container: Fragment,
label: __( 'Business Details', 'woocommerce-admin' ),
} );
steps.push( {
key: 'theme',
container: Fragment,
label: __( 'Theme', 'woocommerce-admin' ),
} );
return steps; return steps;
}; };
@ -52,6 +78,14 @@ export default class ProfileWizard extends Component {
const { query } = this.props; const { query } = this.props;
const step = this.getStep(); const step = this.getStep();
return createElement( step.container, { query } ); const container = createElement( step.container, { query } );
const steps = getSteps().map( _step => pick( _step, [ 'key', 'label' ] ) );
return (
<Fragment>
<ProfileWizardHeader currentStep={ step.key } steps={ steps } />
<div className="woocommerce-profile-wizard__container">{ container }</div>
</Fragment>
);
} }
} }

68
plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/plugins.js
View File

@ -14,7 +14,6 @@ import { withDispatch } from '@wordpress/data';
* Internal depdencies * Internal depdencies
*/ */
import { H, Stepper, Card } from '@woocommerce/components'; import { H, Stepper, Card } from '@woocommerce/components';
import ProfileWizardHeader from '../header';
const plugins = [ 'jetpack', 'woocommerce-services' ]; const plugins = [ 'jetpack', 'woocommerce-services' ];
@ -162,45 +161,42 @@ class Plugins extends Component {
const { step, isPending, isError } = this.state; const { step, isPending, isError } = this.state;
return ( return (
<Fragment> <Fragment>
<ProfileWizardHeader /> <H className="woocommerce-profile-wizard__header-title">
<div className="woocommerce-profile-wizard__container"> { __( 'Install plugins', 'woocommerce-admin' ) }
<H className="woocommerce-profile-wizard__header-title"> </H>
{ __( 'Install plugins', 'woocommerce-admin' ) }
</H>
<Card className="woocommerce-profile-wizard__plugins-card"> <Card className="woocommerce-profile-wizard__plugins-card">
<Stepper <Stepper
direction="vertical" direction="vertical"
currentStep={ step } currentStep={ step }
isPending={ isPending } isPending={ isPending }
steps={ [ steps={ [
{ {
label: __( 'Install Jetpack and WooCommerce Services', 'woocommerce-admin' ), label: __( 'Install Jetpack and WooCommerce Services', 'woocommerce-admin' ),
key: 'install', key: 'install',
}, },
{ {
label: __( 'Activate Jetpack and WooCommerce Services', 'woocommerce-admin' ), label: __( 'Activate Jetpack and WooCommerce Services', 'woocommerce-admin' ),
key: 'activate', key: 'activate',
}, },
] } ] }
/> />
<div className="woocommerce-profile-wizard__plugins-actions"> <div className="woocommerce-profile-wizard__plugins-actions">
{ isError && ( { isError && (
<Button isPrimary onClick={ () => location.reload() }> <Button isPrimary onClick={ () => location.reload() }>
{ __( 'Retry', 'woocommerce-admin' ) } { __( 'Retry', 'woocommerce-admin' ) }
</Button>
) }
{ ! isError &&
'activate' === step && (
<Button isPrimary isBusy={ isPending } onClick={ this.activatePlugins }>
{ __( 'Activate & continue', 'woocommerce-admin' ) }
</Button> </Button>
) } ) }
</div>
{ ! isError && </Card>
'activate' === step && (
<Button isPrimary isBusy={ isPending } onClick={ this.activatePlugins }>
{ __( 'Activate & continue', 'woocommerce-admin' ) }
</Button>
) }
</div>
</Card>
</div>
</Fragment> </Fragment>
); );
} }

90
plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/start/index.js
View File

@ -11,7 +11,6 @@ import interpolateComponents from 'interpolate-components';
* Internal depdencies * Internal depdencies
*/ */
import { Card, H, Link } from '@woocommerce/components'; import { Card, H, Link } from '@woocommerce/components';
import ProfileWizardHeader from '../../header';
import SecurityIcon from './images/security'; import SecurityIcon from './images/security';
import SalesTaxIcon from './images/local_atm'; import SalesTaxIcon from './images/local_atm';
import SpeedIcon from './images/flash_on'; import SpeedIcon from './images/flash_on';
@ -109,58 +108,55 @@ export default class Start extends Component {
return ( return (
<Fragment> <Fragment>
<ProfileWizardHeader /> <H className="woocommerce-profile-wizard__header-title">
<div className="woocommerce-profile-wizard__container"> { __( 'Start setting up your WooCommerce store', 'woocommerce-admin' ) }
<H className="woocommerce-profile-wizard__header-title"> </H>
{ __( 'Start setting up your WooCommerce store', 'woocommerce-admin' ) }
</H>
<p> <p>
{ interpolateComponents( { { interpolateComponents( {
mixedString: __( mixedString: __(
'Simplify and enhance the setup of your store with features and benefits offered by ' + 'Simplify and enhance the setup of your store with features and benefits offered by ' +
'{{strong}}Jetpack & WooCommerce Services{{/strong}}.', '{{strong}}Jetpack & WooCommerce Services{{/strong}}.',
'woocommerce-admin' 'woocommerce-admin'
), ),
components: { components: {
strong: <strong />, strong: <strong />,
}, },
} ) } } ) }
</p> </p>
<div className="woocommerce-profile-wizard__tracking"> <div className="woocommerce-profile-wizard__tracking">
<CheckboxControl <CheckboxControl
className="woocommerce-profile-wizard__tracking-checkbox" className="woocommerce-profile-wizard__tracking-checkbox"
checked={ trackingChecked } checked={ trackingChecked }
label={ __( trackingLabel, 'woocommerce-admin' ) } label={ __( trackingLabel, 'woocommerce-admin' ) }
onChange={ this.onTrackingChange } onChange={ this.onTrackingChange }
/> />
<FormToggle <FormToggle
aria-hidden="true" aria-hidden="true"
checked={ trackingChecked } checked={ trackingChecked }
onChange={ this.onTrackingChange } onChange={ this.onTrackingChange }
onClick={ e => e.stopPropagation() } onClick={ e => e.stopPropagation() }
tabIndex="-1" tabIndex="-1"
/> />
</div>
<Card>
<div className="woocommerce-profile-wizard__benefits">
{ benefits.map( benefit => this.renderBenefit( benefit ) ) }
</div> </div>
<Card> <Button isPrimary onClick={ this.startWizard }>
<div className="woocommerce-profile-wizard__benefits"> { __( 'Get started', 'woocommerce-admin' ) }
{ benefits.map( benefit => this.renderBenefit( benefit ) ) } </Button>
</div> </Card>
<Button isPrimary onClick={ this.startWizard }> <p>
{ __( 'Get started', 'woocommerce-admin' ) } <Link href="#" onClick={ this.skipWizard }>
</Button> { __( 'Proceed without Jetpack or WooCommerce Services', 'woocommerce-admin' ) }
</Card> </Link>
</p>
<p>
<Link href="#" onClick={ this.skipWizard }>
{ __( 'Proceed without Jetpack or WooCommerce Services', 'woocommerce-admin' ) }
</Link>
</p>
</div>
</Fragment> </Fragment>
); );
} }

27
plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss
View File

@ -6,6 +6,10 @@
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
'Helvetica Neue', sans-serif; 'Helvetica Neue', sans-serif;
#wpbody-content {
min-height: 100vh;
}
.woocommerce-profile-wizard__container a { .woocommerce-profile-wizard__container a {
color: $muriel-gray-600; color: $muriel-gray-600;
} }
@ -53,6 +57,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: $muriel-white;
svg > g { svg > g {
transform: translateX(25%); transform: translateX(25%);
@ -140,3 +145,25 @@
} }
} }
} }
.woocommerce-profile-wizard__header.is-stepper {
svg > g {
transform: initial;
}
@include breakpoint( '<782px' ) {
position: absolute;
width: 100%;
bottom: 0;
border-top: 1px solid $muriel-gray-50;
border-bottom: none;
}
.woocommerce-stepper {
margin: 0 $gap 0 $gap;
background: transparent;
box-shadow: none;
margin-bottom: 0;
width: 100%;
}
}