Skip to content
This repository was archived by the owner on Feb 23, 2024. It is now read-only.

Commit c9c72e5

Browse files
danieldudzicdanieldudzic
authored
Mini Cart: Add an alternative icon setting (#9570)
* Mini Cart: Add an icon setting with 3 alternative icon options. Closes #8556. * Mini Cart: Fix Mini-cart icons in the toggle setting. * Minor type fixes. * Clean up type definitions. * Move alt icon logic to a separate function. * Fix cart icons sizes * Add a negative margin to the mini cart icon
1 parent 12c642e commit c9c72e5

File tree

12 files changed

+212
-43
lines changed

12 files changed

+212
-43
lines changed

‎assets/js/blocks/mini-cart/block.tsx‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import classnames from 'classnames';
3434
/**
3535
* Internal dependencies
3636
*/
37+
import type { BlockAttributes } from './types';
3738
import QuantityBadge from './quantity-badge';
3839
import { MiniCartContentsBlock } from './mini-cart-contents/block';
3940
import './style.scss';
@@ -42,14 +43,7 @@ import {
4243
attributes as miniCartContentsAttributes,
4344
} from './mini-cart-contents/attributes';
4445

45-
interface Props {
46-
isInitiallyOpen?: boolean;
47-
colorClassNames?: string;
48-
style?: Record< string, Record< string, string > >;
49-
contents: string;
50-
addToCartBehaviour: string;
51-
hasHiddenPrice: boolean;
52-
}
46+
type Props = BlockAttributes;
5347

5448
function getScrollbarWidth() {
5549
return window.innerWidth - document.documentElement.clientWidth;
@@ -61,6 +55,7 @@ const MiniCartBlock = ( attributes: Props ): JSX.Element => {
6155
colorClassNames,
6256
style,
6357
contents = '',
58+
miniCartIcon,
6459
addToCartBehaviour = 'none',
6560
hasHiddenPrice = false,
6661
} = attributes;
@@ -269,7 +264,7 @@ const MiniCartBlock = ( attributes: Props ): JSX.Element => {
269264
{ taxLabel }
270265
</small>
271266
) }
272-
<QuantityBadge count={ cartItemsCount } />
267+
<QuantityBadge count={ cartItemsCount } icon={ miniCartIcon } />
273268
</button>
274269
<Drawer
275270
className={ classnames(

‎assets/js/blocks/mini-cart/component-frontend.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ const renderMiniCartFrontend = () => {
4141
isInitiallyOpen: el.dataset.isInitiallyOpen === 'true',
4242
colorClassNames,
4343
style: el.dataset.style ? JSON.parse( el.dataset.style ) : {},
44+
miniCartIcon: el.dataset.miniCartIcon,
4445
addToCartBehaviour: el.dataset.addToCartBehaviour || 'none',
4546
hasHiddenPrice: el.dataset.hasHiddenPrice,
4647
contents:

‎assets/js/blocks/mini-cart/edit.tsx‎

Lines changed: 59 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import Noninteractive from '@woocommerce/base-components/noninteractive';
1717
import { isSiteEditorPage } from '@woocommerce/utils';
1818
import type { ReactElement } from 'react';
1919
import { select } from '@wordpress/data';
20+
import { cartOutline, bag, bagAlt } from '@woocommerce/icons';
21+
import { Icon } from '@wordpress/icons';
2022

2123
/**
2224
* Internal dependencies
@@ -25,6 +27,7 @@ import QuantityBadge from './quantity-badge';
2527
import './editor.scss';
2628

2729
interface Attributes {
30+
miniCartIcon: 'cart' | 'bag' | 'bag-alt';
2831
addToCartBehaviour: string;
2932
hasHiddenPrice: boolean;
3033
cartAndCheckoutRenderStyle: boolean;
@@ -36,8 +39,12 @@ interface Props {
3639
}
3740

3841
const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
39-
const { addToCartBehaviour, hasHiddenPrice, cartAndCheckoutRenderStyle } =
40-
attributes;
42+
const {
43+
miniCartIcon,
44+
addToCartBehaviour,
45+
hasHiddenPrice,
46+
cartAndCheckoutRenderStyle,
47+
} = attributes;
4148
const blockProps = useBlockProps( {
4249
className: `wc-block-mini-cart`,
4350
} );
@@ -58,22 +65,57 @@ const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
5865
<PanelBody
5966
title={ __( 'Settings', 'woo-gutenberg-products-block' ) }
6067
>
61-
<ToggleControl
68+
<ToggleGroupControl
69+
className="wc-block-editor-mini-cart__cart-icon-toggle"
70+
isBlock={ true }
6271
label={ __(
63-
'Display total price',
72+
'Cart Icon',
6473
'woo-gutenberg-products-block'
6574
) }
66-
help={ __(
67-
'Toggle to display the total price of products in the shopping cart. If no products have been added, the price will not display.',
75+
value={ miniCartIcon }
76+
onChange={ ( value ) => {
77+
setAttributes( {
78+
miniCartIcon: value,
79+
} );
80+
} }
81+
>
82+
<ToggleGroupControlOption
83+
value={ 'cart' }
84+
label={ <Icon size={ 32 } icon={ cartOutline } /> }
85+
/>
86+
<ToggleGroupControlOption
87+
value={ 'bag' }
88+
label={ <Icon size={ 32 } icon={ bag } /> }
89+
/>
90+
<ToggleGroupControlOption
91+
value={ 'bag-alt' }
92+
label={ <Icon size={ 32 } icon={ bagAlt } /> }
93+
/>
94+
</ToggleGroupControl>
95+
<BaseControl
96+
id="wc-block-mini-cart__display-toggle"
97+
label={ __(
98+
'Display',
6899
'woo-gutenberg-products-block'
69100
) }
70-
checked={ ! hasHiddenPrice }
71-
onChange={ () =>
72-
setAttributes( {
73-
hasHiddenPrice: ! hasHiddenPrice,
74-
} )
75-
}
76-
/>
101+
>
102+
<ToggleControl
103+
label={ __(
104+
'Display total price',
105+
'woo-gutenberg-products-block'
106+
) }
107+
help={ __(
108+
'Toggle to display the total price of products in the shopping cart. If no products have been added, the price will not display.',
109+
'woo-gutenberg-products-block'
110+
) }
111+
checked={ ! hasHiddenPrice }
112+
onChange={ () =>
113+
setAttributes( {
114+
hasHiddenPrice: ! hasHiddenPrice,
115+
} )
116+
}
117+
/>
118+
</BaseControl>
77119
{ isSiteEditor && (
78120
<ToggleGroupControl
79121
className="wc-block-editor-mini-cart__render-in-cart-and-checkout-toggle"
@@ -177,7 +219,10 @@ const Edit = ( { attributes, setAttributes }: Props ): ReactElement => {
177219
{ formatPrice( productTotal ) }
178220
</span>
179221
) }
180-
<QuantityBadge count={ productCount } />
222+
<QuantityBadge
223+
count={ productCount }
224+
icon={ miniCartIcon }
225+
/>
181226
</button>
182227
</Noninteractive>
183228
</div>

‎assets/js/blocks/mini-cart/index.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,10 @@ const settings: BlockConfiguration = {
5353
type: 'boolean',
5454
default: false,
5555
},
56+
miniCartIcon: {
57+
type: 'string',
58+
default: 'cart',
59+
},
5660
addToCartBehaviour: {
5761
type: 'string',
5862
default: 'none',

‎assets/js/blocks/mini-cart/quantity-badge/index.tsx‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,41 @@
11
/**
22
* External dependencies
33
*/
4-
import { miniCart } from '@woocommerce/icons';
4+
import { cartOutline, bag, bagAlt } from '@woocommerce/icons';
55
import { Icon } from '@wordpress/icons';
66

77
/**
88
* Internal dependencies
99
*/
1010
import './style.scss';
11+
import { IconType } from '.././types';
1112

1213
interface Props {
1314
count: number;
1415
colorClassNames?: string;
16+
icon?: IconType;
1517
}
1618

17-
const QuantityBadge = ( { count }: Props ): JSX.Element => {
19+
const QuantityBadge = ( { count, icon }: Props ): JSX.Element => {
20+
function getIcon( iconName?: 'cart' | 'bag' | 'bag-alt' ) {
21+
switch ( iconName ) {
22+
case 'cart':
23+
return cartOutline;
24+
case 'bag':
25+
return bag;
26+
case 'bag-alt':
27+
return bagAlt;
28+
default:
29+
return cartOutline;
30+
}
31+
}
32+
1833
return (
1934
<span className="wc-block-mini-cart__quantity-badge">
2035
<Icon
2136
className="wc-block-mini-cart__icon"
22-
size={ 20 }
23-
icon={ miniCart }
37+
size={ 32 }
38+
icon={ getIcon( icon ) }
2439
/>
2540
<span className="wc-block-mini-cart__badge">
2641
{ count > 0 ? count : '' }

‎assets/js/blocks/mini-cart/quantity-badge/style.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,9 @@
3535

3636
.wc-block-mini-cart__icon {
3737
display: block;
38-
height: em(24px);
39-
width: em(24px);
38+
height: em(32px);
39+
width: em(32px);
40+
margin: -0.25em;
4041

4142
html[dir="rtl"] & {
4243
transform: scaleX(-1);

‎assets/js/blocks/mini-cart/types.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export type IconType = 'cart' | 'bag' | 'bag-alt';
2+
3+
export interface BlockAttributes {
4+
isInitiallyOpen?: boolean;
5+
colorClassNames?: string;
6+
style?: Record< string, Record< string, string > >;
7+
contents: string;
8+
miniCartIcon?: IconType;
9+
addToCartBehaviour: string;
10+
hasHiddenPrice: boolean;
11+
}

‎assets/js/icons/index.js‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
1+
export { default as Alert } from './library/alert';
2+
export { default as bag } from './library/bag';
3+
export { default as bagAlt } from './library/bag-alt';
14
export { default as barcode } from './library/barcode';
25
export { default as cart } from './library/cart';
6+
export { default as cartOutline } from './library/cart-outline';
37
export { default as checkPayment } from './library/check-payment';
8+
export { default as customerAccount } from './library/customer-account';
9+
export { default as customerAccountStyle } from './library/customer-account-style';
10+
export { default as customerAccountStyleAlt } from './library/customer-account-style-alt';
411
export { default as eye } from './library/eye';
512
export { default as fields } from './library/fields';
613
export { default as filledCart } from './library/filled-cart';
714
export { default as folderStarred } from './library/folder-starred';
15+
export { default as miniCart } from './library/mini-cart';
16+
export { default as miniCartAlt } from './library/mini-cart-alt';
17+
export { default as productDetails } from './library/product-details';
18+
export { default as productMeta } from './library/product-meta';
819
export { default as removeCart } from './library/remove-cart';
20+
export { default as stacks } from './library/stacks';
921
export { default as thumbUp } from './library/thumb-up';
1022
export { default as toggle } from './library/toggle';
1123
export { default as totals } from './library/totals';
1224
export { default as woo } from './library/woo';
13-
export { default as miniCart } from './library/mini-cart';
14-
export { default as miniCartAlt } from './library/mini-cart-alt';
15-
export { default as stacks } from './library/stacks';
16-
export { default as Alert } from './library/alert';
17-
export { default as customerAccount } from './library/customer-account';
18-
export { default as customerAccountStyle } from './library/customer-account-style';
19-
export { default as customerAccountStyleAlt } from './library/customer-account-style-alt';
20-
export { default as productMeta } from './library/product-meta';
21-
export { default as productDetails } from './library/product-details';

‎assets/js/icons/library/bag-alt.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import { SVG } from '@wordpress/primitives';
5+
6+
const bagAlt = (
7+
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
8+
<path
9+
fillRule="evenodd"
10+
clipRule="evenodd"
11+
d="M19.5556 12.3333C19.0646 12.3333 18.6667 11.9354 18.6667 11.4444C18.6667 10.7372 18.3857 8.05893 17.8856 7.55883C17.3855 7.05873 16.7073 6.77778 16 6.77778C15.2928 6.77778 14.6145 7.05873 14.1144 7.55883C13.6143 8.05893 13.3333 10.7372 13.3333 11.4444C13.3333 11.9354 12.9354 12.3333 12.4445 12.3333C11.9535 12.3333 11.5556 11.9354 11.5556 11.4444C11.5556 10.2657 12.0238 7.13524 12.8573 6.30175C13.6908 5.46825 14.8213 5 16 5C17.1788 5 18.3092 5.46825 19.1427 6.30175C19.9762 7.13524 20.4445 10.2657 20.4445 11.4444C20.4445 11.9354 20.0465 12.3333 19.5556 12.3333Z"
12+
fill="currentColor"
13+
/>
14+
<path
15+
fillRule="evenodd"
16+
clipRule="evenodd"
17+
d="M7.5 12C7.5 11.4477 7.94772 11 8.5 11H23.5C24.0523 11 24.5 11.4477 24.5 12V25.3333C24.5 25.8856 24.0523 26.3333 23.5 26.3333H8.5C7.94772 26.3333 7.5 25.8856 7.5 25.3333V12ZM9.5 13V24.3333H22.5V13H9.5Z"
18+
fill="currentColor"
19+
/>
20+
</SVG>
21+
);
22+
23+
export default bagAlt;

‎assets/js/icons/library/bag.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import { SVG } from '@wordpress/primitives';
5+
6+
const bag = (
7+
<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
8+
<path
9+
fillRule="evenodd"
10+
clipRule="evenodd"
11+
d="M12.4444 14.2222C12.9354 14.2222 13.3333 14.6202 13.3333 15.1111C13.3333 15.8183 13.6143 16.4966 14.1144 16.9967C14.6145 17.4968 15.2927 17.7778 16 17.7778C16.7072 17.7778 17.3855 17.4968 17.8856 16.9967C18.3857 16.4966 18.6667 15.8183 18.6667 15.1111C18.6667 14.6202 19.0646 14.2222 19.5555 14.2222C20.0465 14.2222 20.4444 14.6202 20.4444 15.1111C20.4444 16.2898 19.9762 17.4203 19.1427 18.2538C18.3092 19.0873 17.1787 19.5555 16 19.5555C14.8212 19.5555 13.6908 19.0873 12.8573 18.2538C12.0238 17.4203 11.5555 16.2898 11.5555 15.1111C11.5555 14.6202 11.9535 14.2222 12.4444 14.2222Z"
12+
fill="currentColor"
13+
/>
14+
<path
15+
fillRule="evenodd"
16+
clipRule="evenodd"
17+
d="M11.2408 6.68254C11.4307 6.46089 11.7081 6.33333 12 6.33333H20C20.2919 6.33333 20.5693 6.46089 20.7593 6.68254L24.7593 11.3492C25.0134 11.6457 25.0717 12.0631 24.9085 12.4179C24.7453 12.7727 24.3905 13 24 13H8.00001C7.60948 13 7.25469 12.7727 7.0915 12.4179C6.92832 12.0631 6.9866 11.6457 7.24076 11.3492L11.2408 6.68254ZM12.4599 8.33333L10.1742 11H21.8258L19.5401 8.33333H12.4599Z"
18+
fill="currentColor"
19+
/>
20+
<path
21+
fillRule="evenodd"
22+
clipRule="evenodd"
23+
d="M7 12C7 11.4477 7.44772 11 8 11H24C24.5523 11 25 11.4477 25 12V25.3333C25 25.8856 24.5523 26.3333 24 26.3333H8C7.44772 26.3333 7 25.8856 7 25.3333V12ZM9 13V24.3333H23V13H9Z"
24+
fill="currentColor"
25+
/>
26+
</SVG>
27+
);
28+
29+
export default bag;

0 commit comments

Comments
 (0)