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 {
} ) }
-
-
-
- e.stopPropagation() }
- tabIndex="-1"
- />
-
-
{ 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: [