Left col card changes:

- minor tweaks to left col card so its more aligned with the figma
- removed retailer from the price row (TBC)
- reworded cta (this TBC)
- updated storybooks to reflect the likes/dislikes of product

Author: charleycampbell

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

@@ -27,23 +27,20 @@ const meta = {
 export default meta;
 
 const sampleProductCard: LeftColProductCardProps = {
-	image: 'https://i.guim.co.uk/img/media/d8755abe62a318b62e2736b98383bf11762d6c91/0_0_2562_2562/master/2562.jpg?width=620&dpr=2&s=none&crop=none',
-	url: 'https://go.skimresources.com/?id=114047X1572903&url=https%3A%2F%2Fwww.waitrose.com%2Fecom%2Fproducts%2Fkenko-mayonnaise%2F424830-807548-807549&sref=https://www.theguardian.com/thefilter/2025/jun/07/best-supermarket-mayonnaise-tom-hunt&xcust=referrer%7Cwww.theguardian.com%7CaccountId%7C114047X1572903',
-	price: '£4.40',
-	retailer: 'Waitrose',
-	brandName: 'Kenko',
-	productName: 'Japanese mayonnaise',
+	format,
+	brandName: 'AirCraft',
+	productName: 'Lume',
+	image: 'https://media.guim.co.uk/ed32f52c10d742be18c4ff1b218dce611e71f57e/500_0_3000_3000/master/3000.jpg',
+	primaryCta: 'Buy at AirCraft',
+	primaryUrl: 'https://www.aircraft.com/lume',
+	primaryPrice: '£199.99',
 	statistics: [
+		{ name: 'We love', value: 'It packs away pretty small' },
 		{
-			name: 'Rating',
-			value: '4.8/5',
-		},
-		{
-			name: 'Taste',
-			value: 'sweet, sour, salty and has an umami-rich profile',
+			name: 'We dont love',
+			value: 'there’s nowhere to stow the remote control',
 		},
 	],
-	format,
 };
 
 export const Default = () => <LeftColProductCard {...sampleProductCard} />;

dotcom-rendering/src/components/LeftColProductCard.tsx

@@ -3,7 +3,7 @@ import {
 	from,
 	headlineMedium17,
 	space,
-	textSans14,
+	textSans15,
 	textSans17,
 } from '@guardian/source/foundations';
 import type { ArticleFormat } from '../lib/articleFormat';
@@ -20,9 +20,9 @@ export type LeftColProductCardProps = {
 	brandName: string;
 	productName: string;
 	image: string;
-	url: string;
-	price: string;
-	retailer: string;
+	primaryCta: string;
+	primaryUrl: string;
+	primaryPrice: string;
 	statistics: Statistics[];
 	format: ArticleFormat;
 };
@@ -34,13 +34,12 @@ const card = css`
 		position: sticky;
 		display: block;
 		margin-top: 10px;
-		padding: 10px;
 		width: 220px;
 		border-top: 1px solid ${palette('--section-border-lifestyle')};
 	}
 	img {
-		height: 200px;
-		width: 200px;
+		height: 220px;
+		width: 220px;
 	}
 	strong {
 		font-weight: 700;
@@ -50,7 +49,7 @@ const card = css`
 const productInfoContainer = css`
 	display: grid;
 	row-gap: ${space[1]}px;
-	padding-bottom: ${space[2]}px;
+	padding: 0 10px 8px 0;
 `;
 
 const primaryHeading = css`
@@ -73,19 +72,21 @@ const buttonOverride = css`
 const statisticsContainer = css`
 	border-top: 1px solid ${palette('--section-border')};
 	padding-top: ${space[3]}px;
+	padding-bottom: ${space[4]}px;
 	display: grid;
-	row-gap: ${space[2]}px;
+	row-gap: ${space[3]}px;
 `;
 
 const Statistic = ({ name, value }: Statistics) => (
 	<div
 		css={css`
-			${textSans14};
+			${textSans15};
 			margin-top: 4px;
 		`}
 	>
-		{name}:<br />
-		<strong>{value}</strong>
+		<strong>{name}</strong>
+		<br />
+		{value}
 	</div>
 );
 
@@ -95,9 +96,9 @@ export const LeftColProductCard = ({
 	brandName,
 	productName,
 	image,
-	url,
-	price,
-	retailer,
+	primaryCta,
+	primaryUrl,
+	primaryPrice,
 	statistics,
 	format,
 }: LeftColProductCardProps) => (
@@ -117,29 +118,13 @@ export const LeftColProductCard = ({
 			<div css={primaryHeading}>{brandName}</div>
 			<div css={secondaryHeading}>{productName}</div>
 			<div css={priceRowStyle}>
-				<strong>{price}</strong> from{' '}
-				<a
-					css={css`
-						color: ${palette('--article-text')};
-						border-bottom: 1px solid
-							${palette('--article-link-border')};
-						text-decoration: none;
-						:hover,
-						:active {
-							border-bottom: 1px solid
-								${palette('--article-text')};
-						}
-					`}
-					href={url}
-				>
-					{retailer}
-				</a>
+				<strong>{primaryPrice}</strong>
 			</div>
 		</div>
 		<div css={buttonOverride}>
 			<ProductLinkButton
-				label={'Shop Now'}
-				url={url}
+				label={primaryCta}
+				url={primaryUrl}
 				size={'small'}
 				cssOverrides={css`
 					min-width: 100%;

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

@@ -39,23 +39,18 @@ const product: ProductBlockElement = {
 	primaryProductUrl: 'https://www.aircraft.com/lume',
 	primaryPrice: '£199.99',
 	primaryRetailer: 'AirCraft',
-	primaryCta: '£199.99 at AirCraft',
+	primaryCta: 'Buy at AirCraft',
 	starRating: 'none-selected',
 	secondaryProductUrl:
 		'https://www.amazon.co.uk/Devola-16-Inch-Desk-Fan/dp/B0B3Z9K5XH?tag=theguardianbookshop-21&ascsubtag=trd-10001-1b2f-00000-00000-a0000-00000-00000-00000',
 	secondaryCta: '£132.99 at Amazon',
 	secondaryPrice: '£132.99',
 	secondaryRetailer: 'Amazon',
 	statistics: [
-		{ name: 'Style', value: 'Pedestal (or desk)' },
-		{ name: 'Dimensions', value: '37 x 28 x 95cm (WDH)' },
-		{ name: 'Number of speeds', value: '12' },
-		{ name: 'Remote control', value: 'Yes' },
-		{ name: 'Peak noise level on test', value: '55dB' },
-		{ name: 'Power use on top setting', value: '18W' },
+		{ name: 'We love', value: 'It packs away pretty small' },
 		{
-			name: 'Air speed on top setting',
-			value: '5.9 metres a second (m/s)',
+			name: 'We dont love',
+			value: 'there’s nowhere to stow the remote control',
 		},
 	],
 	content: [

dotcom-rendering/src/components/ProductElement.tsx

@@ -77,9 +77,9 @@ export const ProductElement = ({
 					brandName={product.brandName}
 					productName={product.productName}
 					image={product.image.url}
-					url={product.primaryProductUrl}
-					price={product.primaryPrice}
-					retailer={product.primaryRetailer}
+					primaryUrl={product.primaryProductUrl}
+					primaryPrice={product.primaryPrice}
+					primaryCta={product.primaryCta}
 					statistics={product.statistics}
 					format={format}
 				/>