Add onboarding profile wizard step 1 (https://github.com/woocommerce/woocommerce-admin/pull/2260)
* Add onboarding step 1 content * Add onboarding content styling * Extract step 1 specific styles to separate stylesheet * Update muriel box shadow variable names
This commit is contained in:
Joshua T Flowers
GitHub
parent
a2946ab6d1
commit
7c5394408d
|
|
@ -8,7 +8,7 @@ import { Component, createElement } from '@wordpress/element';
|
|||
* Internal depdencies
|
||||
*/
|
||||
import Plugins from './steps/plugins';
|
||||
import Start from './steps/start';
|
||||
import Start from './steps/start/';
|
||||
import './style.scss';
|
||||
|
||||
const getSteps = () => {
|
||||
|
|
|
|||
|
|
@ -1,35 +0,0 @@
|
|||
/** @format */
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Component, Fragment } from '@wordpress/element';
|
||||
|
||||
/**
|
||||
* Internal depdencies
|
||||
*/
|
||||
import { H } from '@woocommerce/components';
|
||||
import ProfileWizardHeader from '../header';
|
||||
|
||||
export default class Start extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Fragment>
|
||||
<ProfileWizardHeader />
|
||||
<div className="woocommerce-profile-wizard__container">
|
||||
<H className="woocommerce-profile-wizard__header-title">
|
||||
{ __( 'Start setting up your WooCommerce store', 'woocommerce-admin' ) }
|
||||
</H>
|
||||
|
||||
<p>
|
||||
{ __(
|
||||
'Simplify and enhance the setup of your store with features and benefits offered by Jetpack ' +
|
||||
'& WooCommerce Services.',
|
||||
'woocommerce-admin'
|
||||
) }
|
||||
</p>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
/** @format */
|
||||
|
||||
export default () => (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask
|
||||
id="flash_on_mask"
|
||||
mask-type="alpha"
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="7"
|
||||
y="2"
|
||||
width="10"
|
||||
height="20"
|
||||
>
|
||||
<path d="M7 2V13H10V22L17 10H13L16 2H7Z" fill="white" />
|
||||
</mask>
|
||||
<g mask="url(#flash_on_mask)">
|
||||
<rect width="24" height="24" fill="#50575D" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
/** @format */
|
||||
|
||||
export default () => (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask
|
||||
id="local_atm_mask"
|
||||
mask-type="alpha"
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="2"
|
||||
y="4"
|
||||
width="20"
|
||||
height="16"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M20 4H4C2.89 4 2.01 4.89 2.01 6L2 18C2 19.11 2.89 20 4 20H20C21.11
|
||||
20 22 19.11 22 18V6C22 4.89 21.11 4 20 4ZM11 17H13V16H14C14.55 16 15 15.55 15 15V12C15
|
||||
11.45 14.55 11 14 11H11V10H15V8H13V7H11V8H10C9.45 8 9 8.45 9 9V12C9 12.55 9.45 13 10
|
||||
13H13V14H9V16H11V17ZM4 18H20V6H4V18Z"
|
||||
fill="white"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#local_atm_mask)">
|
||||
<rect width="24" height="24" fill="#50575D" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
/** @format */
|
||||
|
||||
export default () => (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask
|
||||
id="phone_android_mask"
|
||||
mask-type="alpha"
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="5"
|
||||
y="1"
|
||||
width="14"
|
||||
height="22"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M16 1H8C6.34 1 5 2.34 5 4V20C5 21.66 6.34 23 8 23H16C17.66 23 19 21.66 19 20V4C19
|
||||
2.34 17.66 1 16 1ZM14 21H10V20H14V21ZM7 18H17V4H7V18Z"
|
||||
fill="white"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#phone_android_mask)">
|
||||
<rect width="24" height="24" fill="#50575D" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
/** @format */
|
||||
|
||||
export default () => (
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask
|
||||
id="security_mask"
|
||||
mask-type="alpha"
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="3"
|
||||
y="1"
|
||||
width="18"
|
||||
height="22"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M3 5L12 1L21 5V11C21 16.55 17.16 21.74 12 23C6.84 21.74 3 16.55 3 11V5ZM19
|
||||
11.99H12V3.19L5 6.3V12H12V20.93C15.72 19.78 18.47 16.11 19 11.99Z"
|
||||
fill="white"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#security_mask)">
|
||||
<rect width="24" height="24" fill="#50575D" />
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
/** @format */
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Button, CheckboxControl, FormToggle } from '@wordpress/components';
|
||||
import { Component, Fragment } from '@wordpress/element';
|
||||
import interpolateComponents from 'interpolate-components';
|
||||
|
||||
/**
|
||||
* Internal depdencies
|
||||
*/
|
||||
import { Card, H, Link } from '@woocommerce/components';
|
||||
import ProfileWizardHeader from '../../header';
|
||||
import SecurityIcon from './images/security';
|
||||
import SalesTaxIcon from './images/local_atm';
|
||||
import SpeedIcon from './images/flash_on';
|
||||
import MobileAppIcon from './images/phone_android';
|
||||
import './style.scss';
|
||||
|
||||
const benefits = [
|
||||
{
|
||||
title: __( 'Security', 'woocommerce-admin' ),
|
||||
icon: <SecurityIcon />,
|
||||
description: __(
|
||||
'Jetpack automatically blocks brute force attacks to protect your store from unauthorized access.',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
},
|
||||
{
|
||||
title: __( 'Sales Tax', 'woocommerce-admin' ),
|
||||
icon: <SalesTaxIcon />,
|
||||
description: __(
|
||||
'With WooCommerce Services we ensure that the correct rate of tax is charged on all of your orders.',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
},
|
||||
{
|
||||
title: __( 'Speed', 'woocommerce-admin' ),
|
||||
icon: <SpeedIcon />,
|
||||
description: __(
|
||||
'Cache your images and static files on our own powerful global network of servers and speed up your site.',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
},
|
||||
{
|
||||
title: __( 'Mobile App', 'woocommerce-admin' ),
|
||||
icon: <MobileAppIcon />,
|
||||
description: __(
|
||||
'Your store in your pocket. Manage orders, receive sales notifications, and more. Only with a Jetpack connection.',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
export default class Start extends Component {
|
||||
constructor() {
|
||||
super( ...arguments );
|
||||
|
||||
this.state = {
|
||||
trackingChecked: true,
|
||||
};
|
||||
|
||||
this.onTrackingChange = this.onTrackingChange.bind( this );
|
||||
}
|
||||
|
||||
skipWizard() {
|
||||
// @todo This should close the wizard and set the `skipped` property to true via the API.
|
||||
}
|
||||
|
||||
startWizard() {
|
||||
// @todo This should go to the next step.
|
||||
}
|
||||
|
||||
onTrackingChange() {
|
||||
this.setState( {
|
||||
trackingChecked: ! this.state.trackingChecked,
|
||||
} );
|
||||
}
|
||||
|
||||
renderBenefit( benefit ) {
|
||||
const { description, icon, title } = benefit;
|
||||
|
||||
return (
|
||||
<div className="woocommerce-profile-wizard__benefit" key={ title }>
|
||||
{ icon }
|
||||
<div className="woocommerce-profile-wizard__benefit-content">
|
||||
<H className="woocommerce-profile-wizard__benefit-title">{ title }</H>
|
||||
<p>{ description }</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { trackingChecked } = this.state;
|
||||
|
||||
const trackingLabel = interpolateComponents( {
|
||||
mixedString: __(
|
||||
'Help improve WooCommerce with usage tracking. {{link}}Learn More.{{/link}}',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
components: {
|
||||
link: (
|
||||
<Link href="https://woocommerce.com/usage-tracking" target="_blank" type="external" />
|
||||
),
|
||||
},
|
||||
} );
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<ProfileWizardHeader />
|
||||
<div className="woocommerce-profile-wizard__container">
|
||||
<H className="woocommerce-profile-wizard__header-title">
|
||||
{ __( 'Start setting up your WooCommerce store', 'woocommerce-admin' ) }
|
||||
</H>
|
||||
|
||||
<p>
|
||||
{ interpolateComponents( {
|
||||
mixedString: __(
|
||||
'Simplify and enhance the setup of your store with features and benefits offered by ' +
|
||||
'{{strong}}Jetpack & WooCommerce Services{{/strong}}.',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
components: {
|
||||
strong: <strong />,
|
||||
},
|
||||
} ) }
|
||||
</p>
|
||||
|
||||
<div className="woocommerce-profile-wizard__tracking">
|
||||
<CheckboxControl
|
||||
className="woocommerce-profile-wizard__tracking-checkbox"
|
||||
checked={ trackingChecked }
|
||||
label={ __( trackingLabel, 'woocommerce-admin' ) }
|
||||
onChange={ this.onTrackingChange }
|
||||
/>
|
||||
|
||||
<FormToggle
|
||||
aria-hidden="true"
|
||||
checked={ trackingChecked }
|
||||
onChange={ this.onTrackingChange }
|
||||
onClick={ e => e.stopPropagation() }
|
||||
tabIndex="-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<div className="woocommerce-profile-wizard__benefits">
|
||||
{ benefits.map( benefit => this.renderBenefit( benefit ) ) }
|
||||
</div>
|
||||
|
||||
<Button isPrimary onClick={ this.startWizard }>
|
||||
{ __( 'Get started', 'woocommerce-admin' ) }
|
||||
</Button>
|
||||
</Card>
|
||||
|
||||
<p>
|
||||
<Link href="#" onClick={ this.skipWizard }>
|
||||
{ __( 'Proceed without Jetpack or WooCommerce Services', 'woocommerce-admin' ) }
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
/** @format */
|
||||
|
||||
.woocommerce-profile-wizard__body {
|
||||
.woocommerce-profile-wizard__tracking {
|
||||
margin-bottom: $gap-large;
|
||||
|
||||
label {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.components-base-control {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.components-form-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.components-base-control__field {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include breakpoint( '<782px' ) {
|
||||
.components-form-toggle {
|
||||
display: inline-block;
|
||||
}
|
||||
.components-checkbox-control__input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-profile-wizard__benefit {
|
||||
display: flex;
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
min-width: 24px;
|
||||
margin-right: $gap-large;
|
||||
}
|
||||
|
||||
.woocommerce-profile-wizard__benefit-title {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
margin-top: 0;
|
||||
margin-bottom: $gap-smaller;
|
||||
}
|
||||
|
||||
.woocommerce-profile-wizard__benefit-content p {
|
||||
padding-bottom: $gap;
|
||||
margin-top: 0;
|
||||
border-bottom: 1px solid $muriel-gray-50;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&:last-child p {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -6,6 +6,25 @@
|
|||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
|
||||
'Helvetica Neue', sans-serif;
|
||||
|
||||
.woocommerce-profile-wizard__container a {
|
||||
color: $muriel-gray-600;
|
||||
}
|
||||
|
||||
.woocommerce-card {
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
color: $muriel-gray-800;
|
||||
}
|
||||
color: $muriel-gray-600;
|
||||
text-align: left;
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-profile-wizard__header {
|
||||
height: 56px;
|
||||
border-bottom: 1px solid $muriel-gray-50;
|
||||
|
|
@ -33,16 +52,23 @@
|
|||
margin-top: $gap-larger;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 476px;
|
||||
|
||||
@include breakpoint( '>960px' ) {
|
||||
width: 70%;
|
||||
@include breakpoint( '<782px' ) {
|
||||
padding-left: $gap;
|
||||
padding-right: $gap;
|
||||
}
|
||||
|
||||
p {
|
||||
p,
|
||||
div {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.woocommerce-card ~ p {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
#woocommerce-layout__primary {
|
||||
|
|
|
|||
|
|
@ -35,5 +35,7 @@ $adminbar-height: 32px;
|
|||
$adminbar-height-mobile: 46px;
|
||||
|
||||
// Muriel
|
||||
$muriel-card-box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
|
||||
$muriel-box-shadow-1dp: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
|
||||
0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
||||
$muriel-box-shadow-8dp: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
||||
0 3px 14px 2px rgba(0, 0, 0, 0.12);
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
margin-bottom: $gap-large;
|
||||
background: $white;
|
||||
border-radius: 3px;
|
||||
box-shadow: $muriel-card-box-shadow;
|
||||
box-shadow: $muriel-box-shadow-1dp;
|
||||
transition: box-shadow 0.2s cubic-bezier(0.4, 1, 0.4, 1);
|
||||
|
||||
@include breakpoint( '<782px' ) {
|
||||
|
|
@ -13,13 +13,11 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
|
||||
0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
||||
0 3px 14px 2px rgba(0, 0, 0, 0.12);
|
||||
box-shadow: $box-shadow-8dp;
|
||||
}
|
||||
|
||||
&.is-inactive {
|
||||
background-color: #f6f6f6;
|
||||
background-color: $muriel-gray-0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.woocommerce-stepper {
|
||||
background: #fff;
|
||||
box-shadow: $muriel-card-box-shadow;
|
||||
box-shadow: $muriel-box-shadow-1dp;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
|
|
|||
Loading…
Reference in New Issue