Fix Cart and Checkout sidebar styling issues (https://github.com/woocommerce/woocommerce-blocks/pull/2694)

* Order summary: Add spacing between product name and price name

* Remove border from shipping options in the side bar

* Add a hasBorder prop to Panel

* Checkout Order summary: remove margin product description

* Fix padding when there are multiple packages and remove old code

* Simplify selector

* Add margin botton to no shipping options notice

* Make sure Checkout titles are aligned when there are no express payment methods

* Update step heading margins according to new designs

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form-step/style.scss

@@ -19,7 +19,7 @@
 }
 
 .wc-block-checkout-step__content {
-	padding-bottom: $gap-larger;
+	padding-bottom: em($gap-large);
 }
 
 .wc-block-checkout-form fieldset.wc-block-checkout-step:disabled {
@@ -31,12 +31,15 @@
 	justify-content: space-between;
 	align-content: center;
 	flex-wrap: wrap;
-	margin-bottom: $gap-smaller;
+	margin: em($gap-small) 0 em($gap);
 	position: relative;
 }
 
+.wc-block-checkout-step:first-child .wc-block-checkout-step__heading {
+	margin-top: 0;
+}
+
 .wc-block-checkout-step__title {
-	line-height: 1.5;
 	margin: 0 $gap-small 0 0;
 }
 
@@ -75,7 +78,7 @@
 
 .wc-block-checkout-step__container::after {
 	content: "";
-	height: calc(100% - #{$gap-smaller});
+	height: 100%;
 	border-left: 1px solid;
 	position: absolute;
 	left: -$gap-larger/2;

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/order-summary/style.scss

@@ -1,5 +1,8 @@
 .wc-block-components-order-summary {
-	border: 0;
+	.wc-blocks-components-panel__button {
+		margin-top: 0;
+		padding-top: 0;
+	}
 }
 
 .wc-block-components-order-summary__content {

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-metadata/index.js

@@ -18,6 +18,7 @@ const ProductMetadata = ( {
 	return (
 		<div className="wc-block-product-metadata">
 			<ProductSummary
+				className="wc-block-product-description"
 				shortDescription={ shortDescription }
 				fullDescription={ fullDescription }
 			/>

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-metadata/style.scss

@@ -2,7 +2,7 @@
 	@include font-size(smaller);
 	color: $core-grey-dark-400;
 
-	p,
+	.wc-block-product-description > p,
 	.wc-block-product-variation-data {
 		margin: 0.25em 0 0 0;
 	}

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/product-summary/index.js

@@ -8,7 +8,11 @@ import { getSetting } from '@woocommerce/settings';
 /**
  * Returns an element containing a summary of the product.
  */
-const ProductSummary = ( { shortDescription = '', fullDescription = '' } ) => {
+const ProductSummary = ( {
+	className,
+	shortDescription = '',
+	fullDescription = '',
+} ) => {
 	const source = shortDescription ? shortDescription : fullDescription;
 
 	if ( ! source ) {
@@ -16,11 +20,17 @@ const ProductSummary = ( { shortDescription = '', fullDescription = '' } ) => {
 	}
 
 	return (
-		<Summary source={ source } maxLength={ 15 } countType={ getSetting( 'wordCountType', 'words' ) } />
+		<Summary
+			className={ className }
+			source={ source }
+			maxLength={ 15 }
+			countType={ getSetting( 'wordCountType', 'words' ) }
+		/>
 	);
 };
 
 ProductSummary.propTypes = {
+	className: PropTypes.string,
 	shortDescription: PropTypes.string,
 	fullDescription: PropTypes.string,
 };

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control/package.js

@@ -81,6 +81,7 @@ const Package = ( {
 		return (
 			<Panel
 				className="wc-block-shipping-rates-control__package"
+				hasBorder={ true }
 				initialOpen={ true }
 				title={ header }
 			>

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control/style.scss

@@ -34,31 +34,8 @@
 	margin-bottom: 0;
 }
 
-// Resets when it's inside a panel.
 .wc-block-shipping-rates-control {
-	.wc-block-shipping-rates-control__package.components-panel__body {
+	.wc-blocks-components-panel__content {
-		border-bottom: none;
+		padding-bottom: 0;
-
-		&,
-		&.is-opened {
-			padding-bottom: 0;
-		}
-
-		.wc-block-shipping-rates-control__package-items {
-			margin: 0;
-		}
-
-		.wc-block-radio-control {
-			width: 100%;
-		}
-
-		.wc-block-radio-control__option {
-			margin-right: 0;
-			max-width: none;
-
-			&:first-child {
-				border-top: 1px solid $core-grey-light-600;
-			}
-		}
 	}
 }

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/totals-coupon-code-input/index.js

@@ -44,6 +44,7 @@ const TotalsCouponCodeInput = ( {
 	return (
 		<Panel
 			className="wc-block-coupon-code"
+			hasBorder={ true }
 			initialOpen={ initialOpen }
 			title={
 				<Label

plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/totals-shipping-item/style.scss

@@ -15,14 +15,19 @@
 			flex-basis: 100%;
 			text-align: left;
 		}
+	}
 
-		.wc-block-radio-control__option {
+	.wc-block-radio-control__option,
-			&:last-child {
+	.wc-block-radio-control__option-layout {
-				border-bottom: none;
+		&:last-child {
-			}
+			border-bottom: none;
 		}
 	}
 
+	.wc-block-shipping-rates-control__no-results-notice {
+		margin-bottom: em($gap-small);
+	}
+
 	.wc-block-shipping-totals__change-address-button {
 		@include link-button();
 

plugins/woocommerce-blocks/assets/js/base/components/panel/index.js

@@ -15,6 +15,7 @@ const Panel = ( {
 	children,
 	className,
 	initialOpen = false,
+	hasBorder = false,
 	title,
 	titleTag: TitleTag = 'div',
 } ) => {
@@ -22,7 +23,9 @@ const Panel = ( {
 
 	return (
 		<div
-			className={ classNames( className, 'wc-blocks-components-panel' ) }
+			className={ classNames( className, 'wc-blocks-components-panel', {
+				'has-border': hasBorder,
+			} ) }
 		>
 			<TitleTag>
 				<button
@@ -50,6 +53,7 @@ const Panel = ( {
 
 Panel.propTypes = {
 	className: PropTypes.string,
+	hasBorder: PropTypes.bool,
 	initialOpen: PropTypes.bool,
 	title: PropTypes.element,
 	titleTag: PropTypes.string,

plugins/woocommerce-blocks/assets/js/base/components/panel/style.scss

@@ -1,3 +1,9 @@
+.wc-blocks-components-panel.has-border {
+	border-top: 1px solid $core-grey-light-600;
+	border-bottom: 1px solid $core-grey-light-600;
+	margin-bottom: -1px;
+}
+
 .wc-blocks-components-panel__button {
 	&,
 	&:hover,

plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/style.scss

@@ -17,13 +17,6 @@
 	width: 35%;
 
 	.wc-blocks-components-panel {
-		border-top: 1px solid $core-grey-light-600;
-		border-bottom: 1px solid $core-grey-light-600;
-
-		+ .wc-blocks-components-panel {
-			border-top: none;
-		}
-
 		> h2 {
 			@include font-size(large);
 			@include reset-box();

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss

@@ -13,15 +13,10 @@
 	}
 }
 
-.wc-block-checkout__main {
-	fieldset.wc-block-checkout-step:first-child {
-		margin-top: $gap-small;
-	}
-}
-
 .wc-block-checkout__sidebar {
 	.wc-block-product-name {
 		color: inherit;
+		padding-right: $gap-small;
 		flex-grow: 1;
 		// Required by IE11.
 		flex-basis: 0;