diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-items-title.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-items-title.js index a75f5f0c497..c5e67c7d870 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-items-title.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/cart-line-items-title.js @@ -1,34 +1,27 @@ /** * External dependencies */ -import { __, sprintf, _n } from '@wordpress/i18n'; +import { _n, sprintf } from '@wordpress/i18n'; import PropTypes from 'prop-types'; import Title from '@woocommerce/base-components/title'; -const CartLineItemsTitle = ( { - title = __( 'Shopping cart', 'woo-gutenberg-products-block' ), - itemCount = 1, -} ) => { - const itemCountHeading = sprintf( - _n( '%d item', '%d items', itemCount, 'woo-gutenberg-products-block' ), - itemCount - ); - const readableHeading = `${ title } – ${ itemCountHeading }`; - +const CartLineItemsTitle = ( { itemCount = 1 } ) => { return ( - - <span>{ title } </span> - { !! itemCount && ( - <span className="wc-block-cart__item-count"> - { itemCountHeading } - </span> + <Title headingLevel="2"> + { sprintf( + _n( + 'Your cart (%d item)', + 'Your cart (%d items)', + itemCount, + 'woo-gutenberg-products-block' + ), + itemCount ) } ); }; CartLineItemsTitle.propTypes = { - title: PropTypes.string, itemCount: PropTypes.number, }; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss index 9a642b1d52b..3c5b16183cd 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss @@ -1,10 +1,6 @@ .wc-block-cart { color: $core-grey-dark-600; - .wc-block-cart__item-count { - float: right; - } - .wc-block-cart__shipping-calculator { white-space: nowrap; }