Update design of cart and checkout sidebars (#4180)

* Update cart/coupon/shipping design * Add order summary heading * Move and style discounts on checkout sidebar * Add rate to tax lines * Ensure the option to display taxes itemised is available to Cart block * Output individual tax items below the total & add styles for this * Add success notice under coupon input on successful coupon addition * Add border to bottom of Totals footer * Show success message when adding coupon * Add padding to cart item rows * Add preview data to cart for when taxes are enabled * Add rate to cart response type * Add showRateAfterTaxName attribute to Cart block * Add control to cart block to show rate percentage after rate name * Add rate % in cart totals only if option is toggled on * Pass showRateAfterTaxName attribute down to TotalsTaxes * Add showRateAfterTaxName to Checkout block * Add control to block editor for showRateAfterTaxName on Checkout * Pass showRateAfterTaxName down to TotalsTaxes in Checkout * Change label for showing tax rates in cart and checkout blocks * Add test to ensure Taxes section shows in Cart block * Add tests for cart sidebar and rate percentages * Remove order summary title from checkout sidebar * Check if taxes are enabled before rendering the option to show rate %s * Add ShippingVia component to show the selected rate in sidebar * Remove value from individual tax rates * Remove bold from Shipping via label * Remove coupon added successfully message * Ensure panel headings that are h2s are the same colour as others * Clean up eslint warnings * Show rate %s by default * Update snapshots following design changes Co-authored-by: Mike Jolley <mike.jolley@me.com>
woocommerce · Aug 20, 2021 · 0b91fbe · 0b91fbe
1 parent 0464883
commit 0b91fbe
Show file tree

Hide file tree

Showing 30 changed files with 2,575 additions and 77 deletions.
diff --git a/assets/css/abstracts/_colors.scss b/assets/css/abstracts/_colors.scss
@@ -5,6 +5,7 @@
 $no-stock-color: $alert-red;
 $low-stock-color: $alert-yellow;
 $in-stock-color: $alert-green;
+$discount-color: $alert-green;
 
 $placeholder-color: var(--global--color-primary, $gray-200);
 $input-border-gray: #50575e;

diff --git a/assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx b/assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx
@@ -4,11 +4,10 @@
 import classNames from 'classnames';
 import { _n, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
-import Label from '@woocommerce/base-components/label';
-import Title from '@woocommerce/base-components/title';
 import type { ReactElement } from 'react';
 import type { PackageRateOption } from '@woocommerce/type-defs/shipping';
 import { Panel } from '@woocommerce/blocks-checkout';
+import Label from '@woocommerce/base-components/label';
 import { useSelectShippingRate } from '@woocommerce/base-context/hooks';
 import type { CartShippingPackageShippingRate } from '@woocommerce/type-defs/cart';
 
@@ -77,12 +76,9 @@ export const ShippingRatesControlPackage = ( {
 	const header = (
 		<>
 			{ ( showItems || collapsible ) && (
-				<Title
-					className="wc-block-components-shipping-rates-control__package-title"
-					headingLevel="3"
-				>
+				<div className="wc-block-components-shipping-rates-control__package-title">
 					{ packageData.name }
-				</Title>
+				</div>
 			) }
 			{ showItems && (
 				<ul className="wc-block-components-shipping-rates-control__package-items">

diff --git a/assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss b/assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss
@@ -6,12 +6,6 @@
 		padding-top: em($gap-small);
 	}
 
-	.wc-block-components-shipping-rates-control__package-title {
-		@include text-heading();
-		font-weight: bold;
-		margin: 0;
-	}
-
 	// Remove panel padding because we are adding bottom padding to `.wc-block-components-radio-control`
 	// and `.wc-block-components-radio-control__option-layout` in the next ruleset.
 	.wc-block-components-panel__content {

diff --git a/assets/js/base/components/cart-checkout/totals/coupon/index.js b/assets/js/base/components/cart-checkout/totals/coupon/index.js
@@ -51,11 +51,11 @@ const TotalsCoupon = ( {
 			title={
 				<Label
 					label={ __(
-						'Coupon Code?',
+						'Coupon code',
 						'woo-gutenberg-products-block'
 					) }
 					screenReaderLabel={ __(
-						'Introduce Coupon Code',
+						'Apply a coupon code',
 						'woo-gutenberg-products-block'
 					) }
 					htmlFor={ textInputId }

diff --git a/assets/js/base/components/cart-checkout/totals/discount/style.scss b/assets/js/base/components/cart-checkout/totals/discount/style.scss
@@ -3,3 +3,7 @@
 	margin: 0;
 	padding: 0;
 }
+
+.wc-block-components-totals-discount .wc-block-components-totals-item__value {
+	color: $discount-color;
+}
diff --git a/assets/js/base/components/cart-checkout/totals/shipping/index.tsx b/assets/js/base/components/cart-checkout/totals/shipping/index.tsx
@@ -9,6 +9,7 @@ import { TotalsItem } from '@woocommerce/blocks-checkout';
 import type { Currency } from '@woocommerce/price-format';
 import type { ReactElement } from 'react';
 import { getSetting, EnteredAddress } from '@woocommerce/settings';
+import { ShippingVia } from '@woocommerce/base-components/cart-checkout/totals/shipping/shipping-via';
 
 /**
  * Internal dependencies
@@ -146,6 +147,14 @@ const TotalsShipping = ( {
 		setIsShippingCalculatorOpen,
 	};
 
+	const selectedShippingRates = shippingRates.flatMap(
+		( shippingPackage ) => {
+			return shippingPackage.shipping_rates
+				.filter( ( rate ) => rate.selected )
+				.flatMap( ( rate ) => rate.name );
+		}
+	);
+
 	return (
 		<div
 			className={ classnames(
@@ -168,11 +177,18 @@ const TotalsShipping = ( {
 				description={
 					<>
 						{ cartHasCalculatedShipping && (
-							<ShippingAddress
-								shippingAddress={ shippingAddress }
-								showCalculator={ showCalculator }
-								{ ...calculatorButtonProps }
-							/>
+							<>
+								<ShippingVia
+									selectedShippingRates={
+										selectedShippingRates
+									}
+								/>
+								<ShippingAddress
+									shippingAddress={ shippingAddress }
+									showCalculator={ showCalculator }
+									{ ...calculatorButtonProps }
+								/>
+							</>
 						) }
 					</>
 				}

diff --git a/assets/js/base/components/cart-checkout/totals/shipping/shipping-via.tsx b/assets/js/base/components/cart-checkout/totals/shipping/shipping-via.tsx
@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export const ShippingVia = ( {
+	selectedShippingRates,
+}: {
+	selectedShippingRates: string[];
+} ): JSX.Element => {
+	return (
+		<div className="wc-block-components-totals-item__description wc-block-components-totals-shipping__via">
+			{ __( 'via', 'woo-gutenberg-products-block' ) }{ ' ' }
+			{ selectedShippingRates.join( ', ' ) }
+		</div>
+	);
+};
diff --git a/assets/js/base/components/cart-checkout/totals/shipping/style.scss b/assets/js/base/components/cart-checkout/totals/shipping/style.scss
@@ -7,6 +7,10 @@
 		border: 0;
 	}
 
+	.wc-block-components-totals-shipping__via {
+		margin-bottom: $gap;
+	}
+
 	.wc-block-components-totals-shipping__options {
 		.wc-block-components-radio-control__label,
 		.wc-block-components-radio-control__description,

diff --git a/assets/js/base/components/sidebar-layout/style.scss b/assets/js/base/components/sidebar-layout/style.scss
@@ -52,6 +52,13 @@
 	}
 }
 
+.wc-block-components-sidebar .wc-block-components-panel > h2 {
+	@include reset-typography();
+	.wc-block-components-panel__button {
+		font-weight: 400;
+	}
+}
+
 // For Twenty Twenty we need to increase specificity a bit more.
 .theme-twentytwenty {
 	.wc-block-components-sidebar .wc-block-components-panel > h2 {

diff --git a/assets/js/blocks/cart-checkout/cart/attributes.js b/assets/js/blocks/cart-checkout/cart/attributes.js
@@ -21,6 +21,10 @@ const blockAttributes = {
 		type: 'boolean',
 		default: getSetting( 'hasDarkEditorStyleSupport', false ),
 	},
+	showRateAfterTaxName: {
+		type: 'boolean',
+		default: true,
+	},
 };
 
 export default blockAttributes;
diff --git a/assets/js/blocks/cart-checkout/cart/edit.js b/assets/js/blocks/cart-checkout/cart/edit.js
@@ -39,6 +39,7 @@ const BlockSettings = ( { attributes, setAttributes } ) => {
 		isShippingCalculatorEnabled,
 		checkoutPageId,
 		hasDarkControls,
+		showRateAfterTaxName,
 	} = attributes;
 	const { currentPostId } = useEditorContext();
 	const { current: savedCheckoutPageId } = useRef( checkoutPageId );
@@ -95,6 +96,30 @@ const BlockSettings = ( { attributes, setAttributes } ) => {
 					/>
 				</PanelBody>
 			) }
+			{ getSetting( 'taxesEnabled' ) &&
+				getSetting( 'displayItemizedTaxes', false ) &&
+				! getSetting( 'displayCartPricesIncludingTax', false ) && (
+					<PanelBody
+						title={ __( 'Taxes', 'woo-gutenberg-products-block' ) }
+					>
+						<ToggleControl
+							label={ __(
+								'Show rate after tax name',
+								'woo-gutenberg-products-block'
+							) }
+							help={ __(
+								'Show the percentage rate alongside each tax line in the summary.',
+								'woo-gutenberg-products-block'
+							) }
+							checked={ showRateAfterTaxName }
+							onChange={ () =>
+								setAttributes( {
+									showRateAfterTaxName: ! showRateAfterTaxName,
+								} )
+							}
+						/>
+					</PanelBody>
+				) }
 			{ ! (
 				currentPostId === CART_PAGE_ID && savedCheckoutPageId === 0
 			) && (

diff --git a/assets/js/blocks/cart-checkout/cart/full-cart/index.tsx b/assets/js/blocks/cart-checkout/cart/full-cart/index.tsx
@@ -48,6 +48,7 @@ interface CartAttributes {
 	isShippingCalculatorEnabled: boolean;
 	checkoutPageId: number;
 	isPreview: boolean;
+	showRateAfterTaxName: boolean;
 }
 
 interface CartProps {
@@ -60,7 +61,11 @@ interface CartProps {
  * @param {Object} props.attributes Incoming attributes for block.
  */
 const Cart = ( { attributes }: CartProps ) => {
-	const { isShippingCalculatorEnabled, hasDarkControls } = attributes;
+	const {
+		isShippingCalculatorEnabled,
+		hasDarkControls,
+		showRateAfterTaxName,
+	} = attributes;
 
 	const {
 		cartItems,
@@ -141,6 +146,12 @@ const Cart = ( { attributes }: CartProps ) => {
 						removeCoupon={ removeCoupon }
 						values={ cartTotals }
 					/>
+					{ getSetting( 'couponsEnabled', true ) && (
+						<TotalsCoupon
+							onSubmit={ applyCoupon }
+							isLoading={ isApplyingCoupon }
+						/>
+					) }
 					{ cartNeedsShipping && (
 						<TotalsShipping
 							showCalculator={ isShippingCalculatorEnabled }
@@ -154,16 +165,12 @@ const Cart = ( { attributes }: CartProps ) => {
 						false
 					) && (
 						<TotalsTaxes
+							showRateAfterTaxName={ showRateAfterTaxName }
 							currency={ totalsCurrency }
 							values={ cartTotals }
 						/>
 					) }
-					{ getSetting( 'couponsEnabled', true ) && (
-						<TotalsCoupon
-							onSubmit={ applyCoupon }
-							isLoading={ isApplyingCoupon }
-						/>
-					) }
+
 					<TotalsFooterItem
 						currency={ totalsCurrency }
 						values={ cartTotals }

diff --git a/assets/js/blocks/cart-checkout/cart/full-cart/style.scss b/assets/js/blocks/cart-checkout/cart/full-cart/style.scss
@@ -78,8 +78,17 @@ table.wc-block-cart-items {
 	}
 }
 
-.wc-block-cart .wc-block-components-shipping-rates-control__package {
-	@include with-translucent-border(1px 0 0);
+.wc-block-cart {
+	.wc-block-components-totals-taxes,
+	.wc-block-components-totals-footer-item {
+		@include with-translucent-border(1px 0 0);
+		margin: 0;
+		padding: em($gap-small) 0;
+	}
+
+	.wc-block-components-totals-footer-item {
+		@include with-translucent-border(1px 0);
+	}
 }
 
 // Loading placeholder state.
@@ -236,13 +245,15 @@ table.wc-block-cart-items {
 		}
 		td {
 			@include with-translucent-border(1px 0 0);
-			padding: $gap $gap $gap 0;
+			padding: $gap 0 $gap $gap;
 			vertical-align: top;
 		}
-		th:last-child,
-		td:last-child {
+		th:last-child {
 			padding-right: 0;
 		}
+		td:last-child {
+			padding-right: $gap;
+		}
 	}
 
 	.wc-block-components-radio-control__input {