Refactor layout so the product description can occupy more width

woocommerce · Mar 13, 2020 · c575d54 · c575d54
1 parent 87214e3
commit c575d54
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 13 deletions.
diff --git a/assets/js/base/components/cart-checkout/product-price/index.js b/assets/js/base/components/cart-checkout/product-price/index.js
@@ -2,25 +2,29 @@
  * External dependencies
  */
 import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 
-const ProductPrice = ( { currency, regularValue, value } ) => {
+const ProductPrice = ( { className, currency, regularValue, value } ) => {
 	return (
 		<>
 			{ Number.isFinite( regularValue ) && regularValue !== value && (
 				<FormattedMonetaryAmount
-					className="wc-block-product-price--regular"
+					className={ classNames(
+						'wc-block-product-price--regular',
+						className
+					) }
 					currency={ currency }
 					value={ regularValue }
 				/>
 			) }
 			<FormattedMonetaryAmount
-				className="wc-block-product-price"
+				className={ classNames( 'wc-block-product-price', className ) }
 				currency={ currency }
 				value={ 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
@@ -45,8 +45,15 @@ const CheckoutOrderSummaryItem = ( { cartItem } ) => {
 				</div>
 			</div>
 			<div className="wc-block-order-summary-item__description">
-				<div className="wc-block-order-summary-item__prices">
+				<div className="wc-block-order-summary-item__header">
+					<ProductPrice
+						className="wc-block-order-summary-item__total-price"
+						currency={ currency }
+						value={ purchasePrice * quantity }
+					/>
 					<ProductName permalink={ permalink } name={ name } />
+				</div>
+				<div className="wc-block-order-summary-item__prices">
 					<ProductPrice
 						currency={ currency }
 						regularValue={ regularPrice }
@@ -56,12 +63,6 @@ const CheckoutOrderSummaryItem = ( { cartItem } ) => {
 				<ProductLowStockBadge lowStockRemaining={ lowStockRemaining } />
 				<ProductMetadata summary={ summary } variation={ variation } />
 			</div>
-			<div className="wc-block-order-summary-item__total-price">
-				<ProductPrice
-					currency={ currency }
-					value={ purchasePrice * quantity }
-				/>
-			</div>
 		</div>
 	);
 };

diff --git 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;