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

Add Muriel/Newspack components for use in onboarding (https://github.com/woocommerce/woocommerce-admin/pull/2313) 

* Add Muriel/Newspack components for use in onboarding

* Adjust some alignment
This commit is contained in:
Justin Shreve 2019-05-28 10:05:55 -04:00 committed by GitHub
parent 5e8509edd3
commit 821408fc83
9 changed files with 198 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,6 +19,7 @@ import { updateQueryString } from '@woocommerce/navigation';
import ProfileWizardHeader from './header';
import Plugins from './steps/plugins';
import Start from './steps/start';
import Industry from './steps/industry';
import './style.scss';
import { __ } from '@wordpress/i18n';
@ -39,7 +40,7 @@ const getSteps = () => {
} );
steps.push( {
key: 'industry',
container: Fragment,
container: Industry,
label: __( 'Industry', 'woocommerce-admin' ),
} );
steps.push( {

56
plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/industry.js Normal file
View File

@ -0,0 +1,56 @@
/** @format */
/**
* External dependencies
*/
import { Component, Fragment } from '@wordpress/element';
import { SelectControl, TextControl, Button } from 'newspack-components';
class Industry extends Component {
constructor() {
super();
this.state = {
textInput: '',
selectValue1: '1st',
selectValue2: '',
};
}
render() {
return (
<Fragment>
<TextControl
label={ 'Text Input' }
value={ this.state.textInput }
onChange={ value => {
this.setState( { textInput: value } );
} }
/>
<SelectControl
label="Select with value"
value={ this.state.selectValue1 }
options={ [
{ value: '1st', label: 'First' },
{ value: '2nd', label: 'Second' },
{ value: '3rd', label: 'Third' },
] }
onChange={ value => this.setState( { selectValue1: value } ) }
/>
<SelectControl
label="Select empty"
value={ this.state.selectValue2 }
options={ [
{ value: '1st', label: 'First' },
{ value: '2nd', label: 'Second' },
{ value: '3rd', label: 'Third' },
] }
onChange={ value => this.setState( { selectValue2: value } ) }
/>
<Button isPrimary>Button</Button>
</Fragment>
);
}
}
export default Industry;

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

@ -3,7 +3,8 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Button, CheckboxControl, FormToggle } from '@wordpress/components';
import { FormToggle } from '@wordpress/components';
import { Button, CheckboxControl } from 'newspack-components';
import { Component, Fragment } from '@wordpress/element';
import interpolateComponents from 'interpolate-components';
@ -99,7 +100,7 @@ export default class Start extends Component {
const trackingLabel = interpolateComponents( {
mixedString: __(
'Help improve WooCommerce with usage tracking. {{link}}Learn More.{{/link}}',
'Help improve WooCommerce with {{link}}usage tracking{{/link}}',
'woocommerce-admin'
),
components: {
@ -128,29 +129,33 @@ export default class Start extends Component {
} ) }
</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 }>
<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>
<Button
isPrimary
onClick={ this.startWizard }
className="woocommerce-profile-wizard__start"
>
{ __( 'Get started', 'woocommerce-admin' ) }
</Button>
</Card>

36
plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/start/style.scss
View File

@ -2,7 +2,7 @@
.woocommerce-profile-wizard__body {
.woocommerce-profile-wizard__tracking {
margin-bottom: $gap-large;
margin-bottom: $gap;
label {
font-size: 14px;
@ -20,6 +20,26 @@
margin-bottom: 0;
}
.muriel-checkbox label.components-checkbox-control__label {
margin-left: $gap-large;
}
.muriel-checkbox input {
background-color: $muriel-hot-purple-600;
border-color: $muriel-hot-purple-600;
}
.components-form-toggle__track {
background-color: $muriel-hot-purple-600;
}
border-bottom: 1px solid $muriel-gray-50;
border-top: 1px solid $muriel-gray-50;
margin-left: -$gap;
margin-right: -$gap;
padding-left: $gap;
padding-right: $gap;
@include breakpoint( '<782px' ) {
.components-form-toggle {
display: inline-block;
@ -27,6 +47,15 @@
.components-checkbox-control__input {
display: none;
}
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: flex-end;
.muriel-checkbox label.components-checkbox-control__label {
margin-left: $gap-small;
}
}
}
@ -57,4 +86,9 @@
border-bottom: 0;
}
}
.woocommerce-profile-wizard__start {
padding-left: $gap-larger * 2;
padding-right: $gap-larger * 2;
}
}

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

@ -108,7 +108,70 @@
padding-right: 0;
}
/* Hide wp-admin and WooCommerce elements when viewing the profile wizard*/
/* Muriel style overrides */
.muriel-input-text {
&.empty {
.components-base-control__label {
display: none;
}
input {
top: 15px;
}
}
input[type='text']:focus {
box-shadow: none;
border: 0;
}
}
.muriel-input-text label,
.muriel-select label {
display: initial;
width: auto;
right: auto;
left: $gap;
}
.muriel-select select {
left: 15px;
}
.muriel-select.empty label {
top: 15px;
}
.muriel-select::after {
margin-top: -$gap-smallest;
}
.muriel-input-text.active,
.muriel-select.active {
border: 2px solid $muriel-hot-purple-600;
input,
select {
top: 25px;
}
}
.muriel-checkbox input[type='checkbox'] {
width: 18px;
height: 18px;
}
.muriel-checkbox input[type='checkbox']:checked::before {
font-size: 18px;
margin-left: -3px;
margin-top: -1px;
}
.muriel-button.is-button {
height: 48px;
}
/* Hide wp-admin and WooCommerce elements when viewing the profile wizard */
#adminmenumain,
#wpadminbar,
.woocommerce-layout__header,

2
plugins/woocommerce-admin/package.json
View File

@ -95,6 +95,7 @@
"interpolate-components": "1.1.1",
"marked": "0.6.2",
"memoize-one": "5.0.4",
"newspack-components": "0.1.5",
"prismjs": "1.16.0",
"qs": "6.7.0",
"react-click-outside": "3.0.1",
@ -165,6 +166,7 @@
"style-loader": "0.23.1",
"stylelint": "9.10.1",
"stylelint-config-wordpress": "13.1.0",
"url-loader": "1.1.2",
"webpack": "4.31.0",
"webpack-cli": "3.3.1",
"webpack-rtl-plugin": "github:yoavf/webpack-rtl-plugin#develop"

7
plugins/woocommerce-admin/postcss.config.js
View File

@ -10,6 +10,13 @@ module.exports = {
outlines: '#007cba',
},
themes: {
'woocommerce-profile-wizard__body': {
primary: '#d52c82',
secondary: '#d52c82',
toggle: '#d52c82',
button: '#d52c82',
outlines: '#d52c82',
},
'woocommerce-page': {
primary: '#95588a',
secondary: '#95588a',

3
plugins/woocommerce-admin/tests/js/jest.config.json
View File

@ -22,5 +22,8 @@
"<rootDir>/.*/build/",
"<rootDir>/.*/build-module/"
],
"transformIgnorePatterns": [
"node_modules/(?!(newspack-components)/)"
],
"verbose": true
}

4
plugins/woocommerce-admin/webpack.config.js
View File

@ -106,6 +106,10 @@ const webpackConfig = {
),
},
{ test: /\.md$/, use: 'raw-loader' },
{
test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/,
loader: 'url-loader',
},
{
test: /\.s?css$/,
use: [