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

Commit 40c5340

Browse files
kmanijakkmanijak
authored
Merge branch 'trunk' into upkeep/9524
2 parents 4b48aca + e78b3ac commit 40c5340

30 files changed

+350
-69
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/editor-components/block-title/index.js‎ renamed to ‎assets/js/editor-components/block-title/index.tsx‎

Lines changed: 9 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/**
22
* External dependencies
33
*/
4-
import PropTypes from 'prop-types';
54
import { PlainText } from '@wordpress/block-editor';
65
import { withInstanceId } from '@wordpress/compose';
76
import { __ } from '@wordpress/i18n';
@@ -10,15 +9,21 @@ import { __ } from '@wordpress/i18n';
109
* Internal dependencies
1110
*/
1211
import './editor.scss';
13-
12+
interface BlockTitleProps {
13+
className: string;
14+
headingLevel: number;
15+
onChange: ( value: string ) => void;
16+
heading: string;
17+
instanceId: number;
18+
}
1419
const BlockTitle = ( {
1520
className,
1621
headingLevel,
1722
onChange,
1823
heading,
1924
instanceId,
20-
} ) => {
21-
const TagName = `h${ headingLevel }`;
25+
}: BlockTitleProps ) => {
26+
const TagName = `h${ headingLevel }` as keyof JSX.IntrinsicElements;
2227
return (
2328
<TagName className={ className }>
2429
<label
@@ -38,23 +43,4 @@ const BlockTitle = ( {
3843
);
3944
};
4045

41-
BlockTitle.propTypes = {
42-
/**
43-
* Classname to add to title in addition to the defaults.
44-
*/
45-
className: PropTypes.string,
46-
/**
47-
* The value of the heading.
48-
*/
49-
value: PropTypes.string,
50-
/**
51-
* Callback to update the attribute when text is changed.
52-
*/
53-
onChange: PropTypes.func,
54-
/**
55-
* Level of the heading tag (1, 2, 3... will render <h1>, <h2>, <h3>... elements).
56-
*/
57-
headingLevel: PropTypes.number,
58-
};
59-
6046
export default withInstanceId( BlockTitle );

‎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;

0 commit comments

Comments
 (0)