From 448e1f3e113c2b9214fc2eef8aed413c39d3f7be Mon Sep 17 00:00:00 2001 From: Justin Shreve Date: Mon, 2 Dec 2019 12:39:22 -0500 Subject: [PATCH] Remove Newspack Dependency (https://github.com/woocommerce/woocommerce-admin/pull/3302) * Switch to @wordpress/component's Button * Finish button conversion * Move to @wp/component's CheckboxControl * Add ImageUpload component * Remove Newspack package * CSS Cleanup * Handle PR feedback: Fix tests, add ImageUploader basic test, fix FireFox/Safari Display issues, and currency input bug --- .../settings/historical-data/style.scss | 6 + .../profile-wizard/steps/business-details.js | 3 +- .../profile-wizard/steps/industry.js | 3 +- .../dashboard/profile-wizard/steps/plugins.js | 2 +- .../profile-wizard/steps/product-types.js | 3 +- .../profile-wizard/steps/start/index.js | 2 +- .../profile-wizard/steps/store-details.js | 13 +- .../profile-wizard/steps/theme/index.js | 3 +- .../profile-wizard/steps/theme/preview.js | 2 +- .../profile-wizard/steps/theme/style.scss | 4 +- .../profile-wizard/steps/usage-modal.js | 3 +- .../dashboard/profile-wizard/style.scss | 62 +-- .../client/dashboard/style.scss | 61 ++- .../client/dashboard/task-list/style.scss | 18 +- .../dashboard/task-list/tasks/appearance.js | 4 +- .../task-list/tasks/payments/index.js | 3 +- .../task-list/tasks/payments/klarna.js | 2 +- .../task-list/tasks/payments/paypal.js | 4 +- .../task-list/tasks/payments/square.js | 2 +- .../task-list/tasks/payments/stripe.js | 3 +- .../task-list/tasks/shipping/rates.js | 3 +- .../task-list/tasks/steps/connect.js | 2 +- .../task-list/tasks/steps/location.js | 2 +- .../task-list/tasks/steps/plugins.js | 2 +- .../client/dashboard/task-list/tasks/tax.js | 2 +- .../client/devdocs/examples.json | 1 + .../stylesheets/abstracts/_variables.scss | 18 - .../client/stylesheets/shared/_global.scss | 32 -- .../docs/components/_sidebar.md | 1 + plugins/woocommerce-admin/package-lock.json | 375 +++++++----------- plugins/woocommerce-admin/package.json | 2 +- .../packages/components/CHANGELOG.md | 3 + .../packages/components/package.json | 1 + .../components/src/image-upload/README.md | 18 + .../src/image-upload/docs/example.js | 18 + .../components/src/image-upload/index.js | 78 ++++ .../components/src/image-upload/style.scss | 38 ++ .../components/src/image-upload/test/index.js | 30 ++ .../packages/components/src/index.js | 1 + .../packages/components/src/style.scss | 1 + .../components/src/text-control/style.scss | 9 +- .../tests/js/jest.config.json | 3 - plugins/woocommerce-admin/webpack.config.js | 1 - 43 files changed, 453 insertions(+), 391 deletions(-) create mode 100644 plugins/woocommerce-admin/packages/components/src/image-upload/README.md create mode 100644 plugins/woocommerce-admin/packages/components/src/image-upload/docs/example.js create mode 100644 plugins/woocommerce-admin/packages/components/src/image-upload/index.js create mode 100644 plugins/woocommerce-admin/packages/components/src/image-upload/style.scss create mode 100644 plugins/woocommerce-admin/packages/components/src/image-upload/test/index.js diff --git a/plugins/woocommerce-admin/client/analytics/settings/historical-data/style.scss b/plugins/woocommerce-admin/client/analytics/settings/historical-data/style.scss index 32e5eaeceb6..55f16cf3a97 100644 --- a/plugins/woocommerce-admin/client/analytics/settings/historical-data/style.scss +++ b/plugins/woocommerce-admin/client/analytics/settings/historical-data/style.scss @@ -49,6 +49,12 @@ } } +.woocommerce-setting__options-group { + input[type='checkbox']:checked::before { + content: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27#{url-friendly-colour($studio-white)}%27%2F%3E%3C%2Fsvg%3E'); + } +} + .woocommerce-settings-historical-data__progress-label { display: inline-block; font-weight: bold; diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/business-details.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/business-details.js index 7ce3598fa16..bebedb0111d 100644 --- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/business-details.js +++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/business-details.js @@ -5,8 +5,7 @@ import { __, _x, sprintf } from '@wordpress/i18n'; import { Component, Fragment } from '@wordpress/element'; import { compose } from '@wordpress/compose'; -import { FormToggle } from '@wordpress/components'; -import { Button } from 'newspack-components'; +import { Button, FormToggle } from '@wordpress/components'; import { withDispatch } from '@wordpress/data'; import { keys, get, pickBy } from 'lodash'; diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/industry.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/industry.js index 4dd5eccb594..9e827054095 100644 --- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/industry.js +++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/industry.js @@ -4,7 +4,7 @@ */ import { __ } from '@wordpress/i18n'; import { Component, Fragment } from '@wordpress/element'; -import { Button, CheckboxControl } from 'newspack-components'; +import { Button, CheckboxControl } from '@wordpress/components'; import { compose } from '@wordpress/compose'; import { filter, get, includes } from 'lodash'; import { withDispatch } from '@wordpress/data'; @@ -106,6 +106,7 @@ class Industry extends Component { label={ industries[ slug ] } onChange={ () => this.onChange( slug ) } checked={ selected.includes( slug ) } + className="woocommerce-profile-wizard__checkbox" /> ); } ) } diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/plugins.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/plugins.js index 5b0df0ba6a1..cd837e087d4 100644 --- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/plugins.js +++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/plugins.js @@ -3,7 +3,7 @@ * External dependencies */ import { __, sprintf } from '@wordpress/i18n'; -import { Button } from 'newspack-components'; +import { Button } from '@wordpress/components'; import { Component, Fragment } from '@wordpress/element'; import { compose } from '@wordpress/compose'; import { difference } from 'lodash'; diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/product-types.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/product-types.js index 21be2089aff..92164cb22a5 100644 --- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/product-types.js +++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/product-types.js @@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n'; import { Component, Fragment } from '@wordpress/element'; import { compose } from '@wordpress/compose'; -import { Button, CheckboxControl } from 'newspack-components'; +import { Button, CheckboxControl } from '@wordpress/components'; import { includes, filter, get } from 'lodash'; import interpolateComponents from 'interpolate-components'; import { withDispatch } from '@wordpress/data'; @@ -129,6 +129,7 @@ class ProductTypes extends Component { help={ helpText } onChange={ () => this.onChange( slug ) } checked={ selected.includes( slug ) } + className="woocommerce-profile-wizard__checkbox" /> ); } ) } 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 270726d5dbd..7de7078b889 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,7 @@ * External dependencies */ import { __, sprintf } from '@wordpress/i18n'; -import { Button } from 'newspack-components'; +import { Button } from '@wordpress/components'; import { Component, Fragment } from '@wordpress/element'; import { compose } from '@wordpress/compose'; import interpolateComponents from 'interpolate-components'; diff --git a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/store-details.js b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/store-details.js index b3c46c7800c..ec1210e7d1c 100644 --- a/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/store-details.js +++ b/plugins/woocommerce-admin/client/dashboard/profile-wizard/steps/store-details.js @@ -4,7 +4,7 @@ */ import { __ } from '@wordpress/i18n'; import apiFetch from '@wordpress/api-fetch'; -import { Button, CheckboxControl } from 'newspack-components'; +import { Button, CheckboxControl } from '@wordpress/components'; import { Component, Fragment } from '@wordpress/element'; import { compose } from '@wordpress/compose'; import { withDispatch } from '@wordpress/data'; @@ -162,10 +162,13 @@ class StoreDetails extends Component { /> ) } - + +
+ +
+ + ) } + { ! image && ( +
+ +
+ ) } + + ); + } +} + +export default ImageUpload; diff --git a/plugins/woocommerce-admin/packages/components/src/image-upload/style.scss b/plugins/woocommerce-admin/packages/components/src/image-upload/style.scss new file mode 100644 index 00000000000..5ea4888f06d --- /dev/null +++ b/plugins/woocommerce-admin/packages/components/src/image-upload/style.scss @@ -0,0 +1,38 @@ +.woocommerce-image-upload { + button { + color: $studio-pink; + font-size: 16px; + line-height: 24px; + padding: 0; + vertical-align: middle; + } + + .woocommerce-image-upload__image-preview { + font-size: 16px; + margin-right: 2em; + + img { + max-width: 240px; + height: auto; + } + } + + &.no-image { + .woocommerce-image-upload__add-image { + &::before { + content: ''; + /* stylelint-disable function-url-quotes */ + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23636d75' d='M18 20H4V6h9V4H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-9h-2v9zm-7.79-3.17l-1.96-2.36L5.5 18h11l-3.54-4.71zM20 4V1h-2v3h-3c.01.01 0 2 0 2h3v2.99c.01.01 2 0 2 0V6h3V4h-3z'/%3E%3C/svg%3E"); + /* stylelint-enable */ + width: 24px; + height: 24px; + margin-right: 12px; + } + } + } + + &.has-image { + display: flex; + align-items: center; + } +} diff --git a/plugins/woocommerce-admin/packages/components/src/image-upload/test/index.js b/plugins/woocommerce-admin/packages/components/src/image-upload/test/index.js new file mode 100644 index 00000000000..117238fa9fa --- /dev/null +++ b/plugins/woocommerce-admin/packages/components/src/image-upload/test/index.js @@ -0,0 +1,30 @@ +/** @format */ +/** + * External dependencies + */ +import { shallow } from 'enzyme'; + +/** + * Internal dependencies + */ +import ImageUpload from '../index'; + +describe( 'ImageUpload', () => { + describe( 'basic rendering', () => { + it( 'should render an image uploader ready for upload', () => { + const uploader = shallow( ); + expect( uploader.children().hasClass( 'woocommerce-image-upload' ) ).toBe( true ); + expect( uploader.children().hasClass( 'no-image' ) ).toBe( true ); + } ); + + it( 'should render an image uploader prepopulated with an upload', () => { + const image = { + id: 1234, + url: 'https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg', + }; + const uploader = shallow( ); + expect( uploader.children().hasClass( 'woocommerce-image-upload' ) ).toBe( true ); + expect( uploader.children().hasClass( 'has-image' ) ).toBe( true ); + } ); + } ); +} ); diff --git a/plugins/woocommerce-admin/packages/components/src/index.js b/plugins/woocommerce-admin/packages/components/src/index.js index a546f39c81d..5dbe23263a7 100644 --- a/plugins/woocommerce-admin/packages/components/src/index.js +++ b/plugins/woocommerce-admin/packages/components/src/index.js @@ -24,6 +24,7 @@ export { default as Form } from './form'; export { default as FilterPicker } from './filter-picker'; export { default as Gravatar } from './gravatar'; export { H, Section } from './section'; +export { default as ImageUpload } from './image-upload'; export { default as Link } from './link'; export { default as List } from './list'; export { default as MenuItem } from './ellipsis-menu/menu-item'; diff --git a/plugins/woocommerce-admin/packages/components/src/style.scss b/plugins/woocommerce-admin/packages/components/src/style.scss index 2cf439ded75..75b51d43035 100644 --- a/plugins/woocommerce-admin/packages/components/src/style.scss +++ b/plugins/woocommerce-admin/packages/components/src/style.scss @@ -17,6 +17,7 @@ @import 'filters/style.scss'; @import 'flag/style.scss'; @import 'gravatar/style.scss'; +@import 'image-upload/style.scss'; @import 'list/style.scss'; @import 'order-status/style.scss'; @import 'pagination/style.scss'; diff --git a/plugins/woocommerce-admin/packages/components/src/text-control/style.scss b/plugins/woocommerce-admin/packages/components/src/text-control/style.scss index ad1f8c0ea88..b75aa2b3612 100644 --- a/plugins/woocommerce-admin/packages/components/src/text-control/style.scss +++ b/plugins/woocommerce-admin/packages/components/src/text-control/style.scss @@ -3,7 +3,8 @@ .muriel-input-text { background: $studio-white; border: 1px solid $studio-gray-20; - border-radius: 0; + border-radius: 3px; + height: 56px; box-shadow: none; padding: 12px 12px 4px; position: relative; @@ -47,10 +48,16 @@ &.with-value { .components-base-control__label { display: block; + position: relative; + top: -8px; + width: 100%; + font-size: 12px; } input { color: $studio-gray-80; + position: relative; + top: -12px; } } diff --git a/plugins/woocommerce-admin/tests/js/jest.config.json b/plugins/woocommerce-admin/tests/js/jest.config.json index d4b3609153e..0889cbfc204 100644 --- a/plugins/woocommerce-admin/tests/js/jest.config.json +++ b/plugins/woocommerce-admin/tests/js/jest.config.json @@ -23,8 +23,5 @@ "/.*/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 706f73c13be..6f33d147ea4 100644 --- a/plugins/woocommerce-admin/webpack.config.js +++ b/plugins/woocommerce-admin/webpack.config.js @@ -114,7 +114,6 @@ const webpackConfig = { '|acorn-jsx' + '|d3-array' + '|debug' + - '|newspack-components' + '|regexpu-core' + '|unicode-match-property-ecmascript' + '|unicode-match-property-value-ecmascript)/'