diff --git a/assets/js/base/components/cart-checkout/product-price/index.js b/assets/js/base/components/cart-checkout/product-price/index.js index 31d7bea1c03..9b05ce58943 100644 --- a/assets/js/base/components/cart-checkout/product-price/index.js +++ b/assets/js/base/components/cart-checkout/product-price/index.js @@ -2,6 +2,7 @@ * External dependencies */ import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount'; +import classNames from 'classnames'; import PropTypes from 'prop-types'; /** @@ -9,18 +10,21 @@ import PropTypes from 'prop-types'; */ import './style.scss'; -const ProductPrice = ( { currency, regularValue, value } ) => { +const ProductPrice = ( { className, currency, regularValue, value } ) => { return ( <> { Number.isFinite( regularValue ) && regularValue !== value && ( ) } @@ -31,6 +35,7 @@ const ProductPrice = ( { currency, regularValue, value } ) => { ProductPrice.propTypes = { currency: PropTypes.object.isRequired, value: PropTypes.number.isRequired, + className: PropTypes.string, regularValue: PropTypes.number, }; diff --git a/assets/js/blocks/cart-checkout/checkout/order-summary-item.js b/assets/js/blocks/cart-checkout/checkout/order-summary-item.js index 25d3266c011..9585af114f0 100644 --- a/assets/js/blocks/cart-checkout/checkout/order-summary-item.js +++ b/assets/js/blocks/cart-checkout/checkout/order-summary-item.js @@ -45,8 +45,15 @@ const CheckoutOrderSummaryItem = ( { cartItem } ) => {
-
+
+ +
+
{
-
- -
); }; diff --git a/assets/js/blocks/cart-checkout/checkout/style.scss b/assets/js/blocks/cart-checkout/checkout/style.scss index d2143b7c1e2..b9fd22bb09c 100644 --- a/assets/js/blocks/cart-checkout/checkout/style.scss +++ b/assets/js/blocks/cart-checkout/checkout/style.scss @@ -70,12 +70,16 @@ padding-right: $gap-small; } + .wc-block-product-name { + display: inline; + } + .wc-block-order-summary-item__prices { font-size: 0.875em; } .wc-block-order-summary-item__total-price { - text-align: right; + float: right; } } @@ -109,9 +113,7 @@ padding-left: $gap-small; padding-right: $gap-small; } - } - .wc-block-checkout__sidebar { .wc-block-order-summary { > .components-panel__body-title { padding-left: $gap-small;