* 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
This commit is contained in:
louwie17 2021-01-29 17:23:02 -04:00 committed by GitHub
parent 1f368b73f8
commit 467e54fded
5 changed files with 51 additions and 15 deletions

View File

@ -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;
}

View File

@ -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' ) }
<Pill>{ __( 'Recommended', 'woocommerce-admin' ) }</Pill>
</>
),
content: __(
'For small stores we recommend adding products manually',
'Use a template to add physical, digital, and variable products',
'woocommerce-admin'
),
before: <i className="material-icons-outlined">add_box</i>,
before: <Icon icon={ templatePartSidebar }></Icon>,
after: <i className="material-icons-outlined">chevron_right</i>,
onClick: () =>
recordEvent( 'tasklist_add_product', {

View File

@ -17,7 +17,7 @@ describe( 'products', () => {
render( <Products /> );
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( <Products /> );
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( <Products /> );
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 } )
);

View File

@ -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"
}
}

View File

@ -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",