small improvement to product and brand name

Author: oliverabrahams

dotcom-rendering/src/components/ProductCarouselCard.tsx

@@ -68,7 +68,7 @@ const buttonWrapper = css`
 	padding-bottom: ${space[4]}px;
 `;
 
-const brandAndProductNameStyles = css`
+const brandAndProductNameFont = css`
 	${headlineMedium17};
 	line-height: 1.3;
 `;
@@ -84,6 +84,9 @@ export const ProductCarouselCard = ({
 	const hasHeading = !!product.primaryHeadingHtml;
 	const firstCta = product.productCtas[0];
 	const h2Id = product.h2Id;
+	const productAndBrandName = [product.brandName, product.productName]
+		.filter(Boolean)
+		.join(' ');
 	return (
 		<>
 			<div css={headingArea}>
@@ -95,8 +98,8 @@ export const ProductCarouselCard = ({
 								__html: product.primaryHeadingHtml,
 							}}
 						/>
-						<div css={brandAndProductNameStyles}>
-							{`${product.brandName} ${product.productName}`}
+						<div css={brandAndProductNameFont}>
+							{productAndBrandName}
 						</div>
 					</>
 				)}

dotcom-rendering/src/components/ScrollableProducts.stories.tsx

@@ -1025,155 +1025,6 @@ const meta = {
 				molestiae consequatur, vel illum qui dolorem eum fugiat quo
 				voluptas nulla pariatur?"
 			</div>
-			<h1 style={{ fontSize: '50px' }} id={'product-5'}>
-				Product 5
-			</h1>
-			<div style={{ fontSize: '20px' }}>
-				The standard Lorem Ipsum passage, used since the 1500s "Lorem
-				ipsum dolor sit amet, consectetur adipiscing elit, sed do
-				eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
-				enim ad minim veniam, quis nostrud exercitation ullamco laboris
-				nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
-				in reprehenderit in voluptate velit esse cillum dolore eu fugiat
-				nulla pariatur. Excepteur sint occaecat cupidatat non proident,
-				sunt in culpa qui officia deserunt mollit anim id est laborum."
-				Section 1.10.32 of "de Finibus Bonorum et Malorum", written by
-				Cicero in 45 BC "Sed ut perspiciatis unde omnis iste natus error
-				sit voluptatem accusantium doloremque laudantium, totam rem
-				aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
-				architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
-				voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed
-				quia consequuntur magni dolores eos qui ratione voluptatem sequi
-				nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
-				sit amet, consectetur, adipisci velit, sed quia non numquam eius
-				modi tempora incidunt ut labore et dolore magnam aliquam quaerat
-				voluptatem. Ut enim ad minima veniam, quis nostrum
-				exercitationem ullam corporis suscipit laboriosam, nisi ut
-				aliquid ex ea commodi consequatur? Quis autem vel eum iure
-				reprehenderit qui in ea voluptate velit esse quam nihil
-				molestiae consequatur, vel illum qui dolorem eum fugiat quo
-				voluptas nulla pariatur?" The standard Lorem Ipsum passage, used
-				since the 1500s "Lorem ipsum dolor sit amet, consectetur
-				adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-				dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-				exercitation ullamco laboris nisi ut aliquip ex ea commodo
-				consequat. Duis aute irure dolor in reprehenderit in voluptate
-				velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
-				sint occaecat cupidatat non proident, sunt in culpa qui officia
-				deserunt mollit anim id est laborum." Section 1.10.32 of "de
-				Finibus Bonorum et Malorum", written by Cicero in 45 BC "Sed ut
-				perspiciatis unde omnis iste natus error sit voluptatem
-				accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
-				quae ab illo inventore veritatis et quasi architecto beatae
-				vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
-				voluptas sit aspernatur aut odit aut fugit, sed quia
-				consequuntur magni dolores eos qui ratione voluptatem sequi
-				nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
-				sit amet, consectetur, adipisci velit, sed quia non numquam eius
-				modi tempora incidunt ut labore et dolore magnam aliquam quaerat
-				voluptatem. Ut enim ad minima veniam, quis nostrum
-				exercitationem ullam corporis suscipit laboriosam, nisi ut
-				aliquid ex ea commodi consequatur? Quis autem vel eum iure
-				reprehenderit qui in ea voluptate velit esse quam nihil
-				molestiae consequatur, vel illum qui dolorem eum fugiat quo
-				voluptas nulla pariatur?" The standard Lorem Ipsum passage, used
-				since the 1500s "Lorem ipsum dolor sit amet, consectetur
-				adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-				dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-				exercitation ullamco laboris nisi ut aliquip ex ea commodo
-				consequat. Duis aute irure dolor in reprehenderit in voluptate
-				velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
-				sint occaecat cupidatat non proident, sunt in culpa qui officia
-				deserunt mollit anim id est laborum." Section 1.10.32 of "de
-				Finibus Bonorum et Malorum", written by Cicero in 45 BC "Sed ut
-				perspiciatis unde omnis iste natus error sit voluptatem
-				accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
-				quae ab illo inventore veritatis et quasi architecto beatae
-				vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
-				voluptas sit aspernatur aut odit aut fugit, sed quia
-				consequuntur magni dolores eos qui ratione voluptatem sequi
-				nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
-				sit amet, consectetur, adipisci velit, sed quia non numquam eius
-				modi tempora incidunt ut labore et dolore magnam aliquam quaerat
-				voluptatem. Ut enim ad minima veniam, quis nostrum
-				exercitationem ullam corporis suscipit laboriosam, nisi ut
-				aliquid ex ea commodi consequatur? Quis autem vel eum iure
-				reprehenderit qui in ea voluptate velit esse quam nihil
-				molestiae consequatur, vel illum qui dolorem eum fugiat quo
-				voluptas nulla pariatur?" The standard Lorem Ipsum passage, used
-				since the 1500s "Lorem ipsum dolor sit amet, consectetur
-				adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-				dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-				exercitation ullamco laboris nisi ut aliquip ex ea commodo
-				consequat. Duis aute irure dolor in reprehenderit in voluptate
-				velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
-				sint occaecat cupidatat non proident, sunt in culpa qui officia
-				deserunt mollit anim id est laborum." Section 1.10.32 of "de
-				Finibus Bonorum et Malorum", written by Cicero in 45 BC "Sed ut
-				perspiciatis unde omnis iste natus error sit voluptatem
-				accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
-				quae ab illo inventore veritatis et quasi architecto beatae
-				vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
-				voluptas sit aspernatur aut odit aut fugit, sed quia
-				consequuntur magni dolores eos qui ratione voluptatem sequi
-				nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
-				sit amet, consectetur, adipisci velit, sed quia non numquam eius
-				modi tempora incidunt ut labore et dolore magnam aliquam quaerat
-				voluptatem. Ut enim ad minima veniam, quis nostrum
-				exercitationem ullam corporis suscipit laboriosam, nisi ut
-				aliquid ex ea commodi consequatur? Quis autem vel eum iure
-				reprehenderit qui in ea voluptate velit esse quam nihil
-				molestiae consequatur, vel illum qui dolorem eum fugiat quo
-				voluptas nulla pariatur?" The standard Lorem Ipsum passage, used
-				since the 1500s "Lorem ipsum dolor sit amet, consectetur
-				adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-				dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-				exercitation ullamco laboris nisi ut aliquip ex ea commodo
-				consequat. Duis aute irure dolor in reprehenderit in voluptate
-				velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
-				sint occaecat cupidatat non proident, sunt in culpa qui officia
-				deserunt mollit anim id est laborum." Section 1.10.32 of "de
-				Finibus Bonorum et Malorum", written by Cicero in 45 BC "Sed ut
-				perspiciatis unde omnis iste natus error sit voluptatem
-				accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
-				quae ab illo inventore veritatis et quasi architecto beatae
-				vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
-				voluptas sit aspernatur aut odit aut fugit, sed quia
-				consequuntur magni dolores eos qui ratione voluptatem sequi
-				nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
-				sit amet, consectetur, adipisci velit, sed quia non numquam eius
-				modi tempora incidunt ut labore et dolore magnam aliquam quaerat
-				voluptatem. Ut enim ad minima veniam, quis nostrum
-				exercitationem ullam corporis suscipit laboriosam, nisi ut
-				aliquid ex ea commodi consequatur? Quis autem vel eum iure
-				reprehenderit qui in ea voluptate velit esse quam nihil
-				molestiae consequatur, vel illum qui dolorem eum fugiat quo
-				voluptas nulla pariatur?" The standard Lorem Ipsum passage, used
-				since the 1500s "Lorem ipsum dolor sit amet, consectetur
-				adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-				dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-				exercitation ullamco laboris nisi ut aliquip ex ea commodo
-				consequat. Duis aute irure dolor in reprehenderit in voluptate
-				velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
-				sint occaecat cupidatat non proident, sunt in culpa qui officia
-				deserunt mollit anim id est laborum." Section 1.10.32 of "de
-				Finibus Bonorum et Malorum", written by Cicero in 45 BC "Sed ut
-				perspiciatis unde omnis iste natus error sit voluptatem
-				accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
-				quae ab illo inventore veritatis et quasi architecto beatae
-				vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
-				voluptas sit aspernatur aut odit aut fugit, sed quia
-				consequuntur magni dolores eos qui ratione voluptatem sequi
-				nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
-				sit amet, consectetur, adipisci velit, sed quia non numquam eius
-				modi tempora incidunt ut labore et dolore magnam aliquam quaerat
-				voluptatem. Ut enim ad minima veniam, quis nostrum
-				exercitationem ullam corporis suscipit laboriosam, nisi ut
-				aliquid ex ea commodi consequatur? Quis autem vel eum iure
-				reprehenderit qui in ea voluptate velit esse quam nihil
-				molestiae consequatur, vel illum qui dolorem eum fugiat quo
-				voluptas nulla pariatur?"
-			</div>
 		</>
 	),
 } satisfies Meta<typeof ScrollableProduct>;