From 467e54fdedf68b88f43c124df8476a64c61c7730 Mon Sep 17 00:00:00 2001 From: louwie17 Date: Fri, 29 Jan 2021 17:23:02 -0400 Subject: [PATCH] Update product template icon and copy (https://github.com/woocommerce/woocommerce-admin/pull/6177) * Update product template task copy and icon, updated wordpress/icons * Fix tests * Fix css lint errors * Make use of the re-usable Pill component from Woo --- .../client/task-list/style.scss | 9 ++++- .../task-list/tasks/products/products.js | 14 +++++--- .../client/task-list/test/products.js | 6 ++-- plugins/woocommerce-admin/package-lock.json | 35 +++++++++++++++---- plugins/woocommerce-admin/package.json | 2 +- 5 files changed, 51 insertions(+), 15 deletions(-) diff --git a/plugins/woocommerce-admin/client/task-list/style.scss b/plugins/woocommerce-admin/client/task-list/style.scss index 1291698e13d..e34667ee4a3 100644 --- a/plugins/woocommerce-admin/client/task-list/style.scss +++ b/plugins/woocommerce-admin/client/task-list/style.scss @@ -32,13 +32,20 @@ height: 32px; } - .woocommerce-list__item-before svg { + .woocommerce-list__item-before .woocommerce-task__icon svg { fill: $white; position: relative; top: 4px; left: 5px; } + .woocommerce-list__item-text { + .woocommerce-pill { + padding: 1px $gap-smaller; + margin-left: $gap-smaller; + } + } + .components-popover__content { min-width: unset; } diff --git a/plugins/woocommerce-admin/client/task-list/tasks/products/products.js b/plugins/woocommerce-admin/client/task-list/tasks/products/products.js index 7d0717503f0..94adb537759 100644 --- a/plugins/woocommerce-admin/client/task-list/tasks/products/products.js +++ b/plugins/woocommerce-admin/client/task-list/tasks/products/products.js @@ -4,7 +4,8 @@ import { __ } from '@wordpress/i18n'; import { Fragment, useState } from '@wordpress/element'; import { Card, CardBody } from '@wordpress/components'; -import { List } from '@woocommerce/components'; +import { Icon, templatePartSidebar } from '@wordpress/icons'; +import { List, Pill } from '@woocommerce/components'; import { getAdminLink } from '@woocommerce/wc-admin-settings'; import { recordEvent } from '@woocommerce/tracks'; @@ -16,12 +17,17 @@ import ProductTemplateModal from './product-template-modal'; const subTasks = [ { key: 'addProductTemplate', - title: __( 'Start with a template (recommended)', 'woocommerce-admin' ), + title: ( + <> + { __( 'Start with a template', 'woocommerce-admin' ) } + { __( 'Recommended', 'woocommerce-admin' ) } + + ), content: __( - 'For small stores we recommend adding products manually', + 'Use a template to add physical, digital, and variable products', 'woocommerce-admin' ), - before: add_box, + before: , after: chevron_right, onClick: () => recordEvent( 'tasklist_add_product', { diff --git a/plugins/woocommerce-admin/client/task-list/test/products.js b/plugins/woocommerce-admin/client/task-list/test/products.js index 1a93fc775bd..d4b1bd75d5f 100644 --- a/plugins/woocommerce-admin/client/task-list/test/products.js +++ b/plugins/woocommerce-admin/client/task-list/test/products.js @@ -17,7 +17,7 @@ describe( 'products', () => { render( ); expect( - screen.queryByText( 'Start with a template (recommended)' ) + screen.queryByText( 'Start with a template' ) ).toBeInTheDocument(); expect( screen.queryByText( 'Add manually' ) ).toBeInTheDocument(); expect( screen.queryByText( 'Import' ) ).toBeInTheDocument(); @@ -34,7 +34,7 @@ describe( 'products', () => { render( ); fireEvent( - screen.queryByText( 'Start with a template (recommended)' ), + screen.queryByText( 'Start with a template' ), // eslint-disable-next-line no-undef new MouseEvent( 'click', { bubbles: true } ) ); @@ -53,7 +53,7 @@ describe( 'products', () => { render( ); fireEvent( - screen.queryByText( 'Start with a template (recommended)' ), + screen.queryByText( 'Start with a template' ), // eslint-disable-next-line no-undef new MouseEvent( 'click', { bubbles: true } ) ); diff --git a/plugins/woocommerce-admin/package-lock.json b/plugins/woocommerce-admin/package-lock.json index 20839067047..0681fd5530b 100644 --- a/plugins/woocommerce-admin/package-lock.json +++ b/plugins/woocommerce-admin/package-lock.json @@ -48,6 +48,7 @@ "config": "^3.2.4", "eslint": "6.7.2", "jest": "^24.9.0", + "prettier": "npm:wp-prettier@1.19.1", "puppeteer": "^2.0.0" }, "dependencies": { @@ -103,6 +104,11 @@ } } } + }, + "prettier": { + "version": "npm:wp-prettier@1.19.1", + "resolved": "https://registry.npmjs.org/wp-prettier/-/wp-prettier-1.19.1.tgz", + "integrity": "sha512-mqAC2r1NDmRjG+z3KCJ/i61tycKlmADIjxnDhQab+KBxSAGbF/W7/zwB2guy/ypIeKrrftNsIYkNZZQKf3vJcg==" } } }, @@ -11018,13 +11024,13 @@ } }, "@wordpress/icons": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@wordpress/icons/-/icons-2.0.0.tgz", - "integrity": "sha512-+clpVHv6ABqxjTzXinuVfUlQubJ4FbNFkh8mX6KQHVn+i4nLq/3Qy8ktYNGB2fs1ck0c17tfAKG+FEz+E5AF4g==", + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/@wordpress/icons/-/icons-2.9.0.tgz", + "integrity": "sha512-eQJQIaCLdmdo8iTjequNkB14Fzx3qLRbjzZTk26fnggG41L+uGRblIeheZDcHY/jPKDd2H4+v9c9/0LqfjuPCA==", "requires": { - "@babel/runtime": "^7.9.2", - "@wordpress/element": "^2.14.0", - "@wordpress/primitives": "^1.5.0" + "@babel/runtime": "^7.12.5", + "@wordpress/element": "^2.19.0", + "@wordpress/primitives": "^1.11.0" }, "dependencies": { "@wordpress/element": { @@ -15058,6 +15064,15 @@ "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==", "optional": true }, + "bindings": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", + "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", + "optional": true, + "requires": { + "file-uri-to-path": "1.0.0" + } + }, "bl": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/bl/-/bl-4.0.3.tgz", @@ -20846,6 +20861,12 @@ } } }, + "file-uri-to-path": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", + "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", + "optional": true + }, "filelist": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.1.tgz", @@ -25997,6 +26018,7 @@ "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", "optional": true, "requires": { + "bindings": "^1.5.0", "nan": "^2.12.1" } } @@ -38278,6 +38300,7 @@ "dev": true, "optional": true, "requires": { + "bindings": "^1.5.0", "nan": "^2.12.1" } } diff --git a/plugins/woocommerce-admin/package.json b/plugins/woocommerce-admin/package.json index 3868a997aa6..3ee51892d17 100644 --- a/plugins/woocommerce-admin/package.json +++ b/plugins/woocommerce-admin/package.json @@ -101,7 +101,7 @@ "@wordpress/hooks": "2.8.0", "@wordpress/html-entities": "2.7.0", "@wordpress/i18n": "3.11.0", - "@wordpress/icons": "2.0.0", + "@wordpress/icons": "2.9.0", "@wordpress/keycodes": "2.11.0", "@wordpress/notices": "1.12.0", "@wordpress/plugins": "2.22.0",