Updates

.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

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)

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,

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;

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 (
 		<div className="wc-block-components-product-metadata">
 			<ProductSummary

assets/js/base/components/cart-checkout/shipping-rates-control-package/package-rates.tsx

@@ -11,7 +11,7 @@ import type { CartShippingPackageShippingRate } from '@woocommerce/types';
  * Internal dependencies
  */
 import { renderPackageRateOption } from './render-package-rate-option';
-import type { PackageRateRenderOption } from '../shipping-rates-control-package';
+import type { PackageRateRenderOption } from '.';
 
 interface PackageRates {
 	onSelectRate: ( selectedRateId: string ) => void;

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', () => {

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 {

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

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',

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 : (
 		<Icon className={ iconClass } icon={ icon } size={ 18 } />

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

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

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 => {
 			<Icon
 				className="wc-block-mini-cart__icon"
 				size={ 20 }
-				icon={ miniCart }
+				icon={ miniCartThin }
 			/>
-			<span className="wc-block-mini-cart__badge">{ count }</span>
+			{ count > 0 && (
+				<span className="wc-block-mini-cart__badge">{ count }</span>
+			) }
 		</span>
 	);
 };

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

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,

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

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:

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

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', () => {

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 = () => {};
 

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 = () => {};
 

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