From 821408fc839cb7eb6d1d4b4646207f9b69f46c20 Mon Sep 17 00:00:00 2001 From: Justin Shreve Date: Tue, 28 May 2019 10:05:55 -0400 Subject: [PATCH] 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 --- .../client/dashboard/profile-wizard/index.js | 3 +- .../profile-wizard/steps/industry.js | 56 ++++++++++++++++ .../profile-wizard/steps/start/index.js | 45 +++++++------ .../profile-wizard/steps/start/style.scss | 36 +++++++++- .../dashboard/profile-wizard/style.scss | 65 ++++++++++++++++++- plugins/woocommerce-admin/package.json | 2 + plugins/woocommerce-admin/postcss.config.js | 7 ++ .../tests/js/jest.config.json | 3 + plugins/woocommerce-admin/webpack.config.js | 4 ++ 9 files changed, 198 insertions(+), 23 deletions(-) create mode 100644 plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/industry.js diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/index.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/index.js index a014fc5bb65..0ee9cab45b3 100644 --- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/index.js +++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/index.js @@ -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( { diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/industry.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/industry.js new file mode 100644 index 00000000000..aaf11528fa8 --- /dev/null +++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/industry.js @@ -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 ( + + { + this.setState( { textInput: value } ); + } } + /> + + this.setState( { selectValue1: value } ) } + /> + + this.setState( { selectValue2: value } ) } + /> + + + + ); + } +} + +export default Industry; diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/start/index.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/start/index.js index c60bdb471b4..f070b3fa0e9 100644 --- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/start/index.js +++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/start/index.js @@ -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 { } ) }

-
- - -
-
{ benefits.map( benefit => this.renderBenefit( benefit ) ) }
- diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/start/style.scss b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/start/style.scss index 55a7dd5b0cc..5ae17d0c05f 100644 --- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/start/style.scss +++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/start/style.scss @@ -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; + } } diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss b/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss index e2df0c483b3..81be507f4b4 100644 --- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss +++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/style.scss @@ -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, diff --git a/plugins/woocommerce-admin/package.json b/plugins/woocommerce-admin/package.json index 1cf023bec00..a0320b24b43 100644 --- a/plugins/woocommerce-admin/package.json +++ b/plugins/woocommerce-admin/package.json @@ -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" diff --git a/plugins/woocommerce-admin/postcss.config.js b/plugins/woocommerce-admin/postcss.config.js index 3993f9f9d28..0975a54c046 100644 --- a/plugins/woocommerce-admin/postcss.config.js +++ b/plugins/woocommerce-admin/postcss.config.js @@ -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', diff --git a/plugins/woocommerce-admin/tests/js/jest.config.json b/plugins/woocommerce-admin/tests/js/jest.config.json index cf61057c7b7..7cf4c219ac1 100644 --- a/plugins/woocommerce-admin/tests/js/jest.config.json +++ b/plugins/woocommerce-admin/tests/js/jest.config.json @@ -22,5 +22,8 @@ "/.*/build/", "/.*/build-module/" ], + "transformIgnorePatterns": [ + "node_modules/(?!(newspack-components)/)" + ], "verbose": true } diff --git a/plugins/woocommerce-admin/webpack.config.js b/plugins/woocommerce-admin/webpack.config.js index 068d9b6767f..c899b8129bf 100644 --- a/plugins/woocommerce-admin/webpack.config.js +++ b/plugins/woocommerce-admin/webpack.config.js @@ -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: [