Add checkout sidebar (#1921)

assets/js/base/components/sidebar-layout/index.js

@@ -0,0 +1,8 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+export { default as Sidebar } from './sidebar';
+export { default as Main } from './main';
+export { default as SidebarLayout } from './sidebar-layout';

assets/js/base/components/sidebar-layout/main.js

@@ -0,0 +1,14 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+const Main = ( { children, className } ) => {
+	return (
+		<div className={ classNames( 'wc-block-main', className ) }>
+			{ children }
+		</div>
+	);
+};
+
+export default Main;

assets/js/base/components/sidebar-layout/sidebar-layout.js

@@ -0,0 +1,14 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+const SidebarLayout = ( { children, className } ) => {
+	return (
+		<div className={ classNames( 'wc-block-sidebar-layout', className ) }>
+			{ children }
+		</div>
+	);
+};
+
+export default SidebarLayout;

assets/js/base/components/sidebar-layout/sidebar.js

@@ -0,0 +1,14 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+const Sidebar = ( { children, className } ) => {
+	return (
+		<div className={ classNames( 'wc-block-sidebar', className ) }>
+			{ children }
+		</div>
+	);
+};
+
+export default Sidebar;

assets/js/base/components/sidebar-layout/style.scss

@@ -0,0 +1,86 @@
+.wc-block-sidebar-layout {
+	display: flex;
+	flex-wrap: wrap;
+	margin: 0 (-$gap) $gap;
+
+	.wc-block-main {
+		flex: 1 0 65%;
+		margin: 0;
+		padding: 0 $gap;
+		min-width: 500px;
+	}
+
+	.wc-block-sidebar {
+		flex: 1 1 35%;
+		margin: 0;
+		max-width: 35%;
+		padding: 0 $gap;
+
+		// Reset Gutenberg <Panel> styles when used in the sidebar.
+		.components-panel__body {
+			border-top: 1px solid $core-grey-light-600;
+			border-bottom: 1px solid $core-grey-light-600;
+
+			&.is-opened {
+				padding-left: 0;
+				padding-right: 0;
+
+				> .components-panel__body-title {
+					margin-left: 0;
+					margin-right: 0;
+				}
+			}
+
+			> .components-panel__body-title,
+			.components-panel__body-toggle {
+				&,
+				&:hover,
+				&:focus,
+				&:active {
+					background-color: transparent;
+					color: inherit;
+				}
+			}
+
+			.components-panel__body-toggle {
+				font-weight: normal;
+				font-size: inherit;
+				padding-left: 0;
+				padding-right: 36px;
+
+				&.components-button,
+				&.components-button:focus:not(:disabled):not([aria-disabled="true"]) {
+					color: inherit;
+				}
+			}
+		}
+	}
+}
+
+@include breakpoint( "<782px" ) {
+	.wc-block-sidebar-layout {
+		display: block;
+		margin: 0 0 $gap;
+
+		.wc-block-main {
+			padding: 0;
+			flex: none;
+			min-width: 200px;
+		}
+		.wc-block-sidebar {
+			padding: 0;
+			flex: none;
+			max-width: 100%;
+
+			// Reset (remove) totals "card" styling on mobile.
+			.components-card {
+				box-shadow: none;
+				border: none;
+			}
+			.components-card__body {
+				border: none;
+				padding: 0;
+			}
+		}
+	}
+}

assets/js/base/components/totals/totals-coupon-code-input/index.js

@@ -19,6 +19,7 @@ import LoadingMask from '../../loading-mask';
 const TotalsCouponCodeInput = ( {
 	instanceId,
 	isLoading = false,
+	initialOpen,
 	onSubmit = () => {},
 } ) => {
 	const [ couponValue, setCouponValue ] = useState( '' );
@@ -49,7 +50,7 @@ const TotalsCouponCodeInput = ( {
 					htmlFor={ `wc-block-coupon-code__input-${ instanceId }` }
 				/>
 			}
-			initialOpen={ true }
+			initialOpen={ initialOpen }
 		>
 			<LoadingMask
 				screenReaderLabel={ __(

assets/js/base/components/totals/totals-shipping-item/index.js

@@ -36,11 +36,15 @@ const TotalsShippingItem = ( {
 			currency={ currency }
 			description={
 				<>
-					<ShippingLocation address={ shippingAddress } />
-					<ShippingCalculator
-						address={ shippingAddress }
-						setAddress={ updateShippingAddress }
-					/>
+					{ shippingAddress && (
+						<ShippingLocation address={ shippingAddress } />
+					) }
+					{ updateShippingAddress && shippingAddress && (
+						<ShippingCalculator
+							address={ shippingAddress }
+							setAddress={ updateShippingAddress }
+						/>
+					) }
 				</>
 			}
 			label={ __( 'Shipping', 'woo-gutenberg-products-block' ) }

assets/js/blocks/cart-checkout/cart/full-cart/index.js

@@ -25,6 +25,11 @@ import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-mone
 import { decodeEntities } from '@wordpress/html-entities';
 import { useStoreCartCoupons, useShippingRates } from '@woocommerce/base-hooks';
 import classnames from 'classnames';
+import {
+	Sidebar,
+	SidebarLayout,
+	Main,
+} from '@woocommerce/base-components/sidebar-layout';
 
 /**
  * Internal dependencies
@@ -118,15 +123,15 @@ const Cart = ( {
 	} );
 
 	return (
-		<div className={ cartClassName }>
-			<div className="wc-block-cart__main">
+		<SidebarLayout className={ cartClassName }>
+			<Main className="wc-block-cart__main">
 				<CartLineItemsTitle itemCount={ cartItems.length } />
 				<CartLineItemsTable
 					lineItems={ cartItems }
 					isLoading={ isLoading }
 				/>
-			</div>
-			<div className="wc-block-cart__sidebar">
+			</Main>
+			<Sidebar className="wc-block-cart__sidebar">
 				<Card isElevated={ true }>
 					<CardBody>
 						<h2 className="wc-block-cart__totals-title">
@@ -183,6 +188,7 @@ const Cart = ( {
 						{ COUPONS_ENABLED && (
 							<TotalsCouponCodeInput
 								onSubmit={ applyCoupon }
+								initialOpen={ true }
 								isLoading={ isApplyingCoupon }
 							/>
 						) }
@@ -193,8 +199,8 @@ const Cart = ( {
 						<CheckoutButton />
 					</CardBody>
 				</Card>
-			</div>
-		</div>
+			</Sidebar>
+		</SidebarLayout>
 	);
 };
 

assets/js/blocks/cart-checkout/cart/full-cart/style.scss

@@ -1,21 +1,6 @@
 .wc-block-cart {
 	color: $core-grey-dark-600;
-	display: flex;
-	flex-wrap: wrap;
-	margin: 0 (-$gap) $gap;
 
-	.wc-block-cart__main {
-		flex: 1 0 65%;
-		margin: 0;
-		padding: 0 $gap;
-		min-width: 500px;
-	}
-	.wc-block-cart__sidebar {
-		flex: 1 1 35%;
-		margin: 0;
-		max-width: 35%;
-		padding: 0 $gap;
-	}
 	.wc-block-cart__item-count {
 		float: right;
 	}
@@ -275,75 +260,13 @@ table.wc-block-cart-items {
 	display: flex;
 }
 
-// Reset Gutenberg <Panel> styles when used in the sidebar.
-.wc-block-cart__sidebar {
-	.components-panel__body {
-		border-top: 1px solid $core-grey-light-600;
-		border-bottom: 1px solid $core-grey-light-600;
-
-		&.is-opened {
-			padding-left: 0;
-			padding-right: 0;
-
-			> .components-panel__body-title {
-				margin-left: 0;
-				margin-right: 0;
-			}
-		}
-
-		> .components-panel__body-title,
-		.components-panel__body-toggle {
-			&,
-			&:hover,
-			&:focus,
-			&:active {
-				background-color: transparent;
-				color: inherit;
-			}
-		}
-
-		.components-panel__body-toggle {
-			font-weight: normal;
-			font-size: inherit;
-			padding-left: 0;
-			padding-right: 36px;
-
-			&.components-button,
-			&.components-button:focus:not(:disabled):not([aria-disabled="true"]) {
-				color: inherit;
-			}
-		}
-	}
-}
-
 // Mobile styles.
 @include breakpoint( "<782px" ) {
-	.wc-block-cart:not(.wc-block-cart--is-loading):not(.wc-block-cart--skeleton) {
-		display: block;
-		margin: 0 0 $gap;
-		.wc-block-cart__main {
-			padding: 0;
-			flex: none;
-			min-width: 200px;
-		}
-		.wc-block-cart__sidebar {
-			padding: 0;
-			flex: none;
-			max-width: 100%;
-
+	.wc-block-cart {
+		.wc-block-sidebar {
 			.wc-block-cart__totals-title {
 				display: none;
 			}
-
-			// Reset (remove) totals "card" styling on mobile.
-			.components-card {
-				box-shadow: none;
-				border: none;
-			}
-			.components-card__body {
-				border: none;
-				padding: 0;
-			}
 		}
 	}
 	table.wc-block-cart-items {