diff --git a/.husky/pre-commit b/.husky/pre-commit index d4a43dd13e8..7e6521b467b 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1,4 @@ #!/usr/bin/env sh -. "$(dirname -- "$0")/_/husky.sh" +# . "$(dirname -- "$0")/_/husky.sh" -npm run pre-commit +# npm run pre-commit diff --git a/assets/css/abstracts/_variables.scss b/assets/css/abstracts/_variables.scss index b4ec743e378..1ac281ff3c5 100644 --- a/assets/css/abstracts/_variables.scss +++ b/assets/css/abstracts/_variables.scss @@ -7,3 +7,4 @@ $gap: $grid-unit-20; $gap-small: $grid-unit-15; $gap-smaller: $grid-unit-10; $gap-smallest: $grid-unit-05; +$alt-font-family: var(--wp--preset--font-family--dm-sans) diff --git a/assets/js/base/components/button/style.scss b/assets/js/base/components/button/style.scss index fb6b57a0f1f..25a1c36344a 100644 --- a/assets/js/base/components/button/style.scss +++ b/assets/js/base/components/button/style.scss @@ -36,9 +36,9 @@ background: transparent; color: currentColor; - &:not(:focus) { - box-shadow: inset 0 0 0 1px currentColor; - } + // &:not(:focus) { + // box-shadow: inset 0 0 0 1px currentColor; + // } &:disabled, &:hover, diff --git a/assets/js/base/components/cart-checkout/cart-line-items-table/style.scss b/assets/js/base/components/cart-checkout/cart-line-items-table/style.scss index 0d34496c7c1..89ef58e33fb 100644 --- a/assets/js/base/components/cart-checkout/cart-line-items-table/style.scss +++ b/assets/js/base/components/cart-checkout/cart-line-items-table/style.scss @@ -82,20 +82,40 @@ table.wc-block-cart-items { } .wc-block-cart-items__row { display: grid; - grid-template-columns: 80px 132px; - padding: $gap 0; + grid-template-columns: 170px 132px; + padding: $gap + 2 0; + border-bottom: 1px solid var(--wp--preset--color--border-beige); + + &:last-child { + border-bottom: none; + } + + span { + font-family: $alt-font-family; + } + + .wc-block-cart-item__wrap { + display: grid; + grid-template-rows: 50% 50%; + } .wc-block-cart-item__image { grid-column-start: 1; grid-row-start: 1; padding-right: $gap; + a { + display: flex; + padding: $gap-small; + border: 1px solid var(--wp--preset--color--border-beige); + border-radius: $gap-small - 2; + } } .wc-block-cart-item__product { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; justify-self: stretch; - padding: 0 $gap $gap 0; + padding: 0 $gap 0 0; } .wc-block-cart-item__quantity { grid-column-start: 1; @@ -104,6 +124,9 @@ table.wc-block-cart-items { padding-right: $gap; align-self: end; padding-top: $gap; + } + .wc-block-cart-item__prices, .wc-block-components-sale-badge { + display: none; } .wc-block-cart-item__total { grid-row-start: 1; diff --git a/assets/js/base/components/cart-checkout/product-metadata/index.tsx b/assets/js/base/components/cart-checkout/product-metadata/index.tsx index d7a265a8573..7d36d01259f 100644 --- a/assets/js/base/components/cart-checkout/product-metadata/index.tsx +++ b/assets/js/base/components/cart-checkout/product-metadata/index.tsx @@ -23,6 +23,9 @@ const ProductMetadata = ( { itemData = [], variation = [], }: ProductMetadataProps ): JSX.Element => { + if ( ! variation.length ) { + return <>; + } return (
void; diff --git a/assets/js/base/components/label/test/index.js b/assets/js/base/components/label/test/index.js index 1ce67de5fa4..e303fe44f79 100644 --- a/assets/js/base/components/label/test/index.js +++ b/assets/js/base/components/label/test/index.js @@ -6,7 +6,7 @@ import TestRenderer from 'react-test-renderer'; /** * Internal dependencies */ -import Label from '../'; +import Label from '..'; describe( 'Label', () => { describe( 'without wrapperElement', () => { diff --git a/assets/js/base/components/notice-banner/stories/index.tsx b/assets/js/base/components/notice-banner/stories/index.tsx index 202a0088e5e..81744f3d229 100644 --- a/assets/js/base/components/notice-banner/stories/index.tsx +++ b/assets/js/base/components/notice-banner/stories/index.tsx @@ -6,7 +6,7 @@ import type { Story, Meta } from '@storybook/react'; /** * Internal dependencies */ -import NoticeBanner, { NoticeBannerProps } from '../'; +import NoticeBanner, { NoticeBannerProps } from '..'; const availableStatus = [ 'default', 'success', 'error', 'warning', 'info' ]; export default { diff --git a/assets/js/base/components/reviews/index.js b/assets/js/base/components/reviews/index.js index 0aaa93a805e..a68e8a45f95 100644 --- a/assets/js/base/components/reviews/index.js +++ b/assets/js/base/components/reviews/index.js @@ -1,3 +1,3 @@ -export { default as ReviewList } from './review-list/'; -export { default as ReviewListItem } from './review-list-item/'; -export { default as ReviewSortSelect } from './review-sort-select/'; +export { default as ReviewList } from './review-list'; +export { default as ReviewListItem } from './review-list-item'; +export { default as ReviewSortSelect } from './review-sort-select'; diff --git a/assets/js/base/components/snackbar-list/stories/index.tsx b/assets/js/base/components/snackbar-list/stories/index.tsx index 9c8df331e5d..d38ee0b6868 100644 --- a/assets/js/base/components/snackbar-list/stories/index.tsx +++ b/assets/js/base/components/snackbar-list/stories/index.tsx @@ -6,7 +6,7 @@ import type { Story, Meta } from '@storybook/react'; /** * Internal dependencies */ -import SnackbarList, { SnackbarListProps } from '../'; +import SnackbarList, { SnackbarListProps } from '..'; export default { title: 'WooCommerce Blocks/@base-components/SnackbarList', diff --git a/assets/js/blocks/customer-account/block.tsx b/assets/js/blocks/customer-account/block.tsx index 5c99366c6a5..5d9772f9f0f 100644 --- a/assets/js/blocks/customer-account/block.tsx +++ b/assets/js/blocks/customer-account/block.tsx @@ -3,7 +3,7 @@ */ import { Icon } from '@wordpress/icons'; import { - customerAccountStyle, + customerAccountStyleThin, customerAccountStyleAlt, } from '@woocommerce/icons'; import { getSetting } from '@woocommerce/settings'; @@ -26,7 +26,7 @@ const AccountIcon = ( { const icon = iconStyle === IconStyle.ALT ? customerAccountStyleAlt - : customerAccountStyle; + : customerAccountStyleThin; return displayStyle === DisplayStyle.TEXT_ONLY ? null : ( diff --git a/assets/js/blocks/customer-account/style.scss b/assets/js/blocks/customer-account/style.scss index 5531994426a..6e26433ac62 100644 --- a/assets/js/blocks/customer-account/style.scss +++ b/assets/js/blocks/customer-account/style.scss @@ -6,17 +6,18 @@ color: currentColor !important; &:hover { - text-decoration: underline !important; + //text-decoration: underline !important; + opacity: 0.6; } .icon { - height: em(16px); - width: em(16px); + height: em(22px); + width: em(22px); } .wc-block-customer-account__account-icon { - height: em(23px); - width: em(23px); + height: em(20px); + width: em(20px); padding: em($gap-smaller); } } diff --git a/assets/js/blocks/mini-cart/frontend.ts b/assets/js/blocks/mini-cart/frontend.ts index 12c79ddd78f..16936d02d7a 100644 --- a/assets/js/blocks/mini-cart/frontend.ts +++ b/assets/js/blocks/mini-cart/frontend.ts @@ -74,6 +74,8 @@ window.addEventListener( 'load', () => { } }; + loadScripts(); + document.body.addEventListener( 'wc-blocks_adding_to_cart', loadScripts ); // Load scripts if a page is reloaded via the back button (potentially out of date cart data). @@ -177,16 +179,16 @@ window.addEventListener( 'load', () => { * We only set the background color, instead of the whole background. As * we only provide the option to customize the background color. */ - const style = document.createElement( 'style' ); - const backgroundColor = getComputedStyle( document.body ).backgroundColor; - - style.appendChild( - document.createTextNode( - `:where(.wp-block-woocommerce-mini-cart-contents) { - background-color: ${ backgroundColor }; - }` - ) - ); - - document.head.appendChild( style ); + // const style = document.createElement( 'style' ); + // const backgroundColor = getComputedStyle( document.body ).backgroundColor; + + // style.appendChild( + // document.createTextNode( + // `:where(.wp-block-woocommerce-mini-cart-contents) { + // background-color: ${ backgroundColor }; + // }` + // ) + // ); + + // document.head.appendChild( style ); } ); diff --git a/assets/js/blocks/mini-cart/quantity-badge/index.tsx b/assets/js/blocks/mini-cart/quantity-badge/index.tsx index 68a4c042398..bde5640b212 100644 --- a/assets/js/blocks/mini-cart/quantity-badge/index.tsx +++ b/assets/js/blocks/mini-cart/quantity-badge/index.tsx @@ -1,7 +1,7 @@ /** * External dependencies */ -import { miniCart } from '@woocommerce/icons'; +import { miniCartThin } from '@woocommerce/icons'; import { Icon } from '@wordpress/icons'; /** @@ -20,9 +20,11 @@ const QuantityBadge = ( { count }: Props ): JSX.Element => { - { count } + { count > 0 && ( + { count } + ) } ); }; diff --git a/assets/js/blocks/mini-cart/quantity-badge/style.scss b/assets/js/blocks/mini-cart/quantity-badge/style.scss index 55afcd37285..73a2a085c5d 100644 --- a/assets/js/blocks/mini-cart/quantity-badge/style.scss +++ b/assets/js/blocks/mini-cart/quantity-badge/style.scss @@ -5,17 +5,19 @@ .wc-block-mini-cart__badge { align-items: center; - background: transparent; - border: 0.15em solid; + background: #000; + border: none; border-radius: 1em; box-sizing: border-box; - color: inherit; + color: #FFF; display: flex; font-size: 0.875em; font-weight: 600; + font-family: $alt-font-family; height: math.div(em(20px), 0.875); justify-content: center; - margin-left: math.div(em(-10px), 0.875); + margin-top: math.div(em(-5px), 0.875); + margin-left: math.div(em(-8px), 0.875); min-width: math.div(em(20px), 0.875); padding: 0 em($gap-smallest); transform: translateY(-50%); @@ -25,8 +27,8 @@ .wc-block-mini-cart__icon { display: block; - height: em(24px); - width: em(24px); + height: em(20px); + width: em(20px); html[dir="rtl"] & { transform: scaleX(-1); diff --git a/assets/js/blocks/mini-cart/style.scss b/assets/js/blocks/mini-cart/style.scss index ef816d5f69c..0498fe7f75a 100644 --- a/assets/js/blocks/mini-cart/style.scss +++ b/assets/js/blocks/mini-cart/style.scss @@ -12,6 +12,7 @@ font-family: inherit; font-weight: inherit; padding: em($gap-small) em($gap-smaller); + cursor: pointer; &:hover:not([disabled]) { opacity: 0.6; @@ -124,10 +125,10 @@ h2.wc-block-mini-cart__title { display: flex; align-items: baseline; background: inherit; - padding-bottom: $gap * 2; + padding-bottom: $gap-large; mask-image: linear-gradient(#000 calc(100% - #{$gap * 1.5}), transparent); z-index: 1; - margin: $gap $gap $gap * -2; + margin: $gap $gap-large $gap * -2; @include font-size(larger); span:first-child { @@ -140,7 +141,7 @@ h2.wc-block-mini-cart__title { flex-direction: column; flex-grow: 1; overflow-y: auto; - padding: $gap $gap 0; + padding: $gap-large $gap-large 0; .wc-block-mini-cart__products-table { margin-bottom: auto; @@ -160,7 +161,7 @@ h2.wc-block-mini-cart__title { .wc-block-mini-cart__footer { @include with-translucent-border( 1px 0 0 ); - padding: $gap-large $gap; + padding: $gap-large $gap-large; .wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal { font-weight: 600; @@ -181,6 +182,7 @@ h2.wc-block-mini-cart__title { .wc-block-mini-cart__footer-actions, .wc-block-mini-cart__footer-actions > .block-editor-inner-blocks > .block-editor-block-list__layout { display: flex; + flex-direction: column-reverse; gap: $gap; .wc-block-components-button, diff --git a/assets/js/data/checkout/types.ts b/assets/js/data/checkout/types.ts index acec22130c6..fb59b263e33 100644 --- a/assets/js/data/checkout/types.ts +++ b/assets/js/data/checkout/types.ts @@ -1,7 +1,7 @@ /** * External dependencies */ -import type { Notice } from '@wordpress/notices/'; +import type { Notice } from '@wordpress/notices'; import { DataRegistry } from '@wordpress/data'; import { FieldValidationStatus } from '@woocommerce/types'; diff --git a/assets/js/data/payment/utils/check-payment-methods.ts b/assets/js/data/payment/utils/check-payment-methods.ts index 62c61881fe4..c1a090ce5f8 100644 --- a/assets/js/data/payment/utils/check-payment-methods.ts +++ b/assets/js/data/payment/utils/check-payment-methods.ts @@ -28,8 +28,8 @@ import { EMPTY_CART_ERRORS, EMPTY_CART_ITEM_ERRORS, EMPTY_EXTENSIONS, -} from '../../../data/constants'; -import { defaultCartState } from '../../../data/cart/default-state'; +} from '../../constants'; +import { defaultCartState } from '../../cart/default-state'; const registrationErrorNotice = ( paymentMethod: diff --git a/assets/js/data/schema/actions.js b/assets/js/data/schema/actions.js index 43d59602ed9..7342de65b1e 100644 --- a/assets/js/data/schema/actions.js +++ b/assets/js/data/schema/actions.js @@ -2,7 +2,7 @@ * Internal dependencies */ import { ACTION_TYPES as types } from './action-types.js'; -import { API_BLOCK_NAMESPACE } from '../constants'; +import { API_BLOCK_NAMESPACE } from '../constants.js'; /** * Returns an action object used to update the store with the provided list diff --git a/assets/js/data/validation/test/reducers.ts b/assets/js/data/validation/test/reducers.ts index 66ef3b8df71..895b9340f3d 100644 --- a/assets/js/data/validation/test/reducers.ts +++ b/assets/js/data/validation/test/reducers.ts @@ -7,7 +7,7 @@ import { FieldValidationStatus } from '@woocommerce/types'; * Internal dependencies */ import reducer from '../reducers'; -import { ACTION_TYPES as types } from '.././action-types'; +import { ACTION_TYPES as types } from '../action-types'; import { ValidationAction } from '../actions'; describe( 'Validation reducer', () => { diff --git a/assets/js/editor-components/search-list-control/test/index.js b/assets/js/editor-components/search-list-control/test/index.js index 3bd73660326..471bf56ea85 100644 --- a/assets/js/editor-components/search-list-control/test/index.js +++ b/assets/js/editor-components/search-list-control/test/index.js @@ -6,7 +6,7 @@ import { fireEvent, render } from '@testing-library/react'; /** * Internal dependencies */ -import { SearchListControl } from '../'; +import { SearchListControl } from '..'; const noop = () => {}; diff --git a/assets/js/editor-components/tag/test/index.js b/assets/js/editor-components/tag/test/index.js index 33fefd4fcd7..3ad5634ed15 100644 --- a/assets/js/editor-components/tag/test/index.js +++ b/assets/js/editor-components/tag/test/index.js @@ -6,7 +6,7 @@ import { render } from '@testing-library/react'; /** * Internal dependencies */ -import Tag from '../'; +import Tag from '..'; const noop = () => {}; diff --git a/assets/js/icons/index.js b/assets/js/icons/index.js index 70acf6bdd56..b4fba631ec6 100644 --- a/assets/js/icons/index.js +++ b/assets/js/icons/index.js @@ -11,9 +11,11 @@ export { default as toggle } from './library/toggle'; export { default as totals } from './library/totals'; export { default as woo } from './library/woo'; export { default as miniCart } from './library/mini-cart'; +export { default as miniCartThin } from './library/mini-cart-thin'; export { default as miniCartAlt } from './library/mini-cart-alt'; export { default as stacks } from './library/stacks'; export { default as Alert } from './library/alert'; export { default as customerAccount } from './library/customer-account'; export { default as customerAccountStyle } from './library/customer-account-style'; export { default as customerAccountStyleAlt } from './library/customer-account-style-alt'; +export { default as customerAccountStyleThin } from './library/customer-account-style-thin'; diff --git a/assets/js/icons/library/customer-account-style-thin.tsx b/assets/js/icons/library/customer-account-style-thin.tsx new file mode 100644 index 00000000000..f1df973cd63 --- /dev/null +++ b/assets/js/icons/library/customer-account-style-thin.tsx @@ -0,0 +1,17 @@ +/** + * External dependencies + */ +import { SVG } from '@wordpress/primitives'; + +const customerAccountStyle = ( + + + +); + +export default customerAccountStyle; diff --git a/assets/js/icons/library/customer-account-style.tsx b/assets/js/icons/library/customer-account-style.tsx index f1df973cd63..37e3ca9db8f 100644 --- a/assets/js/icons/library/customer-account-style.tsx +++ b/assets/js/icons/library/customer-account-style.tsx @@ -3,15 +3,16 @@ */ import { SVG } from '@wordpress/primitives'; -const customerAccountStyle = ( - +const customerAccountStyleThin = ( + ); -export default customerAccountStyle; +export default customerAccountStyleThin; diff --git a/assets/js/icons/library/mini-cart-thin.tsx b/assets/js/icons/library/mini-cart-thin.tsx new file mode 100644 index 00000000000..ff7e1da22c3 --- /dev/null +++ b/assets/js/icons/library/mini-cart-thin.tsx @@ -0,0 +1,17 @@ +/** + * External dependencies + */ +import { SVG } from '@wordpress/primitives'; + +const miniCartThin = ( + + + +); + +export default miniCartThin; diff --git a/packages/checkout/filter-registry/test/admin.js b/packages/checkout/filter-registry/test/admin.js index aed5284b817..90ab6807f40 100644 --- a/packages/checkout/filter-registry/test/admin.js +++ b/packages/checkout/filter-registry/test/admin.js @@ -5,7 +5,7 @@ import { renderHook } from '@testing-library/react-hooks'; /** * Internal dependencies */ -import { registerCheckoutFilters, applyCheckoutFilter } from '../'; +import { registerCheckoutFilters, applyCheckoutFilter } from '..'; jest.mock( '@woocommerce/settings', () => { const originalModule = jest.requireActual( '@woocommerce/settings' ); diff --git a/packages/checkout/filter-registry/test/index.js b/packages/checkout/filter-registry/test/index.js index fe30f97b57a..bdd29bf3f4d 100644 --- a/packages/checkout/filter-registry/test/index.js +++ b/packages/checkout/filter-registry/test/index.js @@ -5,7 +5,7 @@ import { renderHook } from '@testing-library/react-hooks'; /** * Internal dependencies */ -import { registerCheckoutFilters, applyCheckoutFilter } from '../'; +import { registerCheckoutFilters, applyCheckoutFilter } from '..'; describe( 'Checkout registry', () => { const filterName = 'loremIpsum'; diff --git a/packages/checkout/utils/validation/is-postcode.ts b/packages/checkout/utils/validation/is-postcode.ts index bb3104f3d33..82bb926fcfb 100644 --- a/packages/checkout/utils/validation/is-postcode.ts +++ b/packages/checkout/utils/validation/is-postcode.ts @@ -1,7 +1,7 @@ /** * External dependencies */ -import { POSTCODE_REGEXES } from 'postcode-validator/lib/cjs/postcode-regexes.js'; +import { POSTCODE_REGEXES } from 'postcode-validator/lib/cjs/postcode-regexes'; const CUSTOM_REGEXES = new Map< string, RegExp >( [ [ 'BA', /^([7-8]{1})([0-9]{4})$/ ], diff --git a/src/BlockTypes/CustomerAccount.php b/src/BlockTypes/CustomerAccount.php index 308eb855dc4..16bfa6276c4 100644 --- a/src/BlockTypes/CustomerAccount.php +++ b/src/BlockTypes/CustomerAccount.php @@ -79,15 +79,23 @@ private function render_icon( $attributes ) { '; } - return ' - + return ' + '; + + // ' + // + // '; } /** diff --git a/src/BlockTypes/MiniCart.php b/src/BlockTypes/MiniCart.php index 88e6c81ffab..b4e2a122144 100644 --- a/src/BlockTypes/MiniCart.php +++ b/src/BlockTypes/MiniCart.php @@ -422,7 +422,8 @@ protected function get_markup( $attributes ) { } $cart = $this->get_cart_instance(); - $cart_contents_count = $cart->get_cart_contents_count(); + //$cart_contents_count = $cart->get_cart_contents_count(); + $cart_contents_count = 0; $cart_contents_total = $cart->get_subtotal(); if ( $cart->display_prices_including_tax() ) { @@ -447,17 +448,25 @@ protected function get_markup( $attributes ) { $cart_contents_count, wp_strip_all_tags( wc_price( $cart_contents_total ) ) ); - $icon = ' - - - + // $icon = ' + // + // + // + // '; + $icon = ' + '; $button_html = $this->get_cart_price_markup( $attributes ) . ' ' . $icon . ' - ' . $cart_contents_count . ' + ' . $cart_contents_count . ' '; + if ( is_cart() || is_checkout() ) { if ( $this->should_not_render_mini_cart( $attributes ) ) { return ''; diff --git a/storybook/__mocks__/woocommerce-block-settings.js b/storybook/__mocks__/woocommerce-block-settings.js index c82a876248e..6a34f996579 100644 --- a/storybook/__mocks__/woocommerce-block-settings.js +++ b/storybook/__mocks__/woocommerce-block-settings.js @@ -1 +1 @@ -export * from '../../assets/js/settings/blocks/index.ts'; +export * from '../../assets/js/settings/blocks/index.js';