moved where CTA label is decided.

oliverabrahams · oliverabrahams · commit 288e33a7ec2c · 2025-10-30T08:34:19.000Z
diff --git a/dotcom-rendering/src/components/InlineProductCard.stories.tsx b/dotcom-rendering/src/components/InlineProductCard.stories.tsx
@@ -81,11 +81,15 @@ const sampleProductCard: InlineProductCardProps = {
 	productCtas: [
 		{
 			url: 'https://www.theguardian.com',
-			label: '£89.99 at Amazon',
+			price: '£89.99',
+			retailer: 'Amazon',
+			text: '',
 		},
 		{
 			url: 'https://www.theguardian.com',
-			label: '£99.99 at John Lewis',
+			price: '£95.99',
+			retailer: 'John Lewis',
+			text: '',
 		},
 	],
 	brandName: 'AirCraft',
@@ -97,16 +101,17 @@ const sampleProductCard: InlineProductCardProps = {
 			value: 'There’s nowhere to stow the remote control',
 		},
 	],
+	lowestPrice: '£89.99',
 	isCardOnly: false,
 };
 
 export const Default = () => <InlineProductCard {...sampleProductCard} />;
 
-export const productCardOnly = () => (
+export const ProductCardOnly = () => (
 	<InlineProductCard {...sampleProductCard} isCardOnly={true} />
 );
 
-export const productCardOnlyDisplayCredit = () => (
+export const ProductCardOnlyDisplayCredit = () => (
 	<InlineProductCard
 		{...sampleProductCard}
 		image={{
diff --git a/dotcom-rendering/src/components/InlineProductCard.tsx b/dotcom-rendering/src/components/InlineProductCard.tsx
@@ -13,14 +13,10 @@ import {
 } from '@guardian/source/foundations';
 import type { ArticleFormat } from '../lib/articleFormat';
 import { palette } from '../palette';
-import type { ProductImage } from '../types/content';
+import type { ProductCta, ProductImage } from '../types/content';
 import { ProductCardButtons } from './ProductCardButtons';
 import { ProductCardImage } from './ProductCardImage';
 
-export type ProductCardCta = {
-	label: string;
-	url: string;
-};
 export type CustomAttributes = {
 	name: string;
 	value: string;
@@ -31,7 +27,7 @@ export type InlineProductCardProps = {
 	brandName: string;
 	productName: string;
 	image?: ProductImage;
-	productCtas: ProductCardCta[];
+	productCtas: ProductCta[];
 	customAttributes: CustomAttributes[];
 	isCardOnly: boolean;
 	shouldShowLeftColCard?: boolean;
@@ -107,7 +103,8 @@ const productNameStyle = css`
 
 const mobileButtonWrapper = css`
 	grid-column: 1 / span 2;
-	grid-gap: ${space[1]}px;
+	display: grid;
+	row-gap: ${space[1]}px;
 	${from.mobileLandscape} {
 		display: none;
 	}
@@ -116,7 +113,8 @@ const mobileButtonWrapper = css`
 const desktopButtonWrapper = css`
 	display: none;
 	${from.mobileLandscape} {
-		display: inline;
+		display: grid;
+		row-gap: ${space[1]}px;
 	}
 `;
 
@@ -174,7 +172,6 @@ export const InlineProductCard = ({
 				format={format}
 				image={image}
 				url={productCtas[0]?.url}
-				label={productCtas[0]?.label}
 			/>
 			<div css={productInfoContainer}>
 				<div css={primaryHeading}>{brandName}</div>
diff --git a/dotcom-rendering/src/components/LeftColProductCard.stories.tsx b/dotcom-rendering/src/components/LeftColProductCard.stories.tsx
@@ -41,11 +41,15 @@ const meta = {
 		productCtas: [
 			{
 				url: 'https://www.theguardian.com',
-				label: '£89.99 at Amazon',
+				price: '£89.99',
+				retailer: 'Amazon',
+				text: '',
 			},
 			{
 				url: 'https://www.theguardian.com',
-				label: '£99.99 at John Lewis',
+				price: '£95.99',
+				retailer: 'John Lewis',
+				text: '',
 			},
 		],
 		customAttributes: [
@@ -76,7 +80,9 @@ export const SingleCta: Story = {
 		productCtas: [
 			{
 				url: 'https://www.theguardian.com',
-				label: '£89.99 at Amazon',
+				price: '£89.99',
+				retailer: 'at Amazon',
+				text: '',
 			},
 		],
 		lowestPrice: '£89.99',
@@ -88,7 +94,9 @@ export const ShortCta: Story = {
 		productCtas: [
 			{
 				url: 'https://www.theguardian.com',
-				label: '£8 at Z',
+				price: '£8',
+				retailer: 'Z',
+				text: '',
 			},
 		],
 		lowestPrice: '£89.99',
@@ -100,31 +108,27 @@ export const LotsOfCtas: Story = {
 		productCtas: [
 			{
 				url: 'https://www.theguardian.com',
-				label: '£89.99 at Cotswolds Outdoors',
+				price: '£89.99',
+				retailer: 'Cotswold Outdoor',
+				text: '',
 			},
 			{
 				url: 'https://www.theguardian.com',
-				label: '£89 at Zara',
+				price: '£95',
+				retailer: 'REI',
+				text: '',
 			},
 			{
 				url: 'https://www.theguardian.com',
-				label: '£9 at Kenwood',
+				price: '£99.99',
+				retailer: 'John Lewis',
+				text: '',
 			},
 			{
 				url: 'https://www.theguardian.com',
-				label: '£70 at Amazon',
-			},
-			{
-				url: 'https://www.theguardian.com',
-				label: '£12 for 10 at John Lewis',
-			},
-			{
-				url: 'https://www.theguardian.com',
-				label: '£30 at eBay',
-			},
-			{
-				url: 'https://www.theguardian.com',
-				label: '£45 at Etsy',
+				price: '£105',
+				retailer: 'Amazon',
+				text: '',
 			},
 		],
 		lowestPrice: '£89.99',
diff --git a/dotcom-rendering/src/components/LeftColProductCard.tsx b/dotcom-rendering/src/components/LeftColProductCard.tsx
@@ -9,8 +9,7 @@ import {
 } from '@guardian/source/foundations';
 import type { ArticleFormat } from '../lib/articleFormat';
 import { palette } from '../palette';
-import type { ProductImage } from '../types/content';
-import type { ProductCardCta } from './InlineProductCard';
+import type { ProductCta, ProductImage } from '../types/content';
 import { ProductCardButtons } from './ProductCardButtons';
 import { ProductCardImage } from './ProductCardImage';
 
@@ -25,7 +24,7 @@ export type LeftColProductCardProps = {
 	image?: ProductImage;
 	customAttributes: CustomAttributes[];
 	format: ArticleFormat;
-	productCtas: ProductCardCta[];
+	productCtas: ProductCta[];
 	lowestPrice?: string;
 };
 
@@ -67,6 +66,8 @@ const productNameFont = css`
 const buttonContainer = css`
 	padding-bottom: ${space[6]}px;
 	min-width: 100%;
+	display: grid;
+	row-gap: ${space[1]}px;
 `;
 const customAttributesContainer = css`
 	border-top: 1px solid ${palette('--section-border')};
@@ -102,7 +103,6 @@ export const LeftColProductCard = ({
 				format={format}
 				image={image}
 				url={productCtas[0]?.url}
-				label={productCtas[0]?.label}
 			/>
 			<div css={productInfoContainer}>
 				<div css={brandNameFont}>{brandName}</div>
diff --git a/dotcom-rendering/src/components/ProductCardButtons.tsx b/dotcom-rendering/src/components/ProductCardButtons.tsx
@@ -1,27 +1,34 @@
-import type { ProductCardCta } from './InlineProductCard';
+import type { ProductCta } from '../types/content';
 import { ProductLinkButton } from './ProductLinkButton';
 
 export const ProductCardButtons = ({
 	productCtas,
 	dataComponent,
 }: {
-	productCtas: ProductCardCta[];
+	productCtas: ProductCta[];
 	dataComponent?: string;
 }) => {
+	const getLabel = (cta: ProductCta): string => {
+		const overrideLabel = cta.text.trim().length > 0;
+		return overrideLabel ? cta.text : `${cta.price} at ${cta.retailer}`;
+	};
 	return (
 		<>
-			{productCtas.map((productCta, index) => (
-				<ProductLinkButton
-					key={productCta.label}
-					label={productCta.label}
-					url={productCta.url}
-					priority={index === 0 ? 'primary' : 'tertiary'}
-					fullwidth={true}
-					data-component={`${
-						dataComponent ?? 'product-card-button'
-					}-${index}`}
-				/>
-			))}
+			{productCtas.map((productCta, index) => {
+				const label = getLabel(productCta);
+				return (
+					<ProductLinkButton
+						key={label}
+						label={label}
+						url={productCta.url}
+						priority={index === 0 ? 'primary' : 'tertiary'}
+						fullwidth={true}
+						data-component={`${
+							dataComponent ?? 'product-card-button'
+						}-${index}`}
+					/>
+				);
+			})}
 		</>
 	);
 };
diff --git a/dotcom-rendering/src/components/ProductCardImage.tsx b/dotcom-rendering/src/components/ProductCardImage.tsx
@@ -16,7 +16,6 @@ export const ProductCardImage = ({
 	format,
 	image,
 	url,
-	label,
 	...props
 }: ProductCardImageProps) => {
 	if (!image) {
@@ -25,12 +24,11 @@ export const ProductCardImage = ({
 
 	return (
 		<div {...props}>
-			{url && label ? (
+			{url ? (
 				<a
 					href={url}
 					target="_blank"
 					rel="noopener noreferrer"
-					aria-label={label}
 					// this is needed to override global style
 					// html:not(.src-focus-disabled) *:focus
 					// it has specificity(0, 2, 1) so we need (0, 3, 0)
diff --git a/dotcom-rendering/src/components/ProductLinkButton.tsx b/dotcom-rendering/src/components/ProductLinkButton.tsx
@@ -68,8 +68,7 @@ export const ProductLinkButton = ({
 			<span
 				css={css`
 					white-space: normal;
-					width: 100%;
-					padding: 10px 0 10px;
+					padding: 4px 0 4px;
 				`}
 			>
 				{label}
diff --git a/dotcom-rendering/src/types/content.ts b/dotcom-rendering/src/types/content.ts
@@ -865,6 +865,13 @@ export interface ImageSource {
 	srcSet: SrcSetItem[];
 }
 
+export type ProductCta = {
+	url: string;
+	text: string;
+	retailer: string;
+	price: string;
+};
+
 export interface SrcSetItem {
 	src: string;
 	width: number;
