Merge branch 'main' into revert-14689-ab/self-styled-subtitles

Author: abeddow91

dotcom-rendering/src/components/Picture.tsx

@@ -20,7 +20,8 @@ export type Orientation = 'portrait' | 'landscape';
 type PictureRoleType =
 	| RoleType
 	// Custom image role types that are used but do not come from CAPI / FE
-	| 'podcastCover';
+	| 'podcastCover'
+	| 'productCard';
 
 type Props = {
 	role: PictureRoleType;
@@ -268,6 +269,11 @@ const decideImageWidths = ({
 					{ breakpoint: breakpoints.mobile, width: 140 },
 					{ breakpoint: breakpoints.wide, width: 219 },
 				];
+			case 'productCard':
+				return [
+					{ breakpoint: breakpoints.mobile, width: 328 },
+					{ breakpoint: breakpoints.wide, width: 220 },
+				];
 			case 'inline':
 			default:
 				return [
@@ -358,6 +364,11 @@ const decideImageWidths = ({
 				];
 			case 'halfWidth':
 				return [{ breakpoint: breakpoints.mobile, width: 445 }];
+			case 'productCard':
+				return [
+					{ breakpoint: breakpoints.mobile, width: 328 },
+					{ breakpoint: breakpoints.wide, width: 220 },
+				];
 			case 'podcastCover':
 				return [
 					{ breakpoint: breakpoints.mobile, width: 140 },

dotcom-rendering/src/components/ProductCardButtons.tsx

@@ -0,0 +1,33 @@
+import type { ProductCta } from '../types/content';
+import { ProductLinkButton } from './ProductLinkButton';
+
+const getLabel = (cta: ProductCta): string => {
+	const overrideLabel = cta.text.trim().length > 0;
+	return overrideLabel ? cta.text : `${cta.price} at ${cta.retailer}`;
+};
+
+export const ProductCardButtons = ({
+	productCtas,
+	dataComponent,
+}: {
+	productCtas: ProductCta[];
+	dataComponent?: string;
+}) => (
+	<>
+		{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}`}
+				/>
+			);
+		})}
+	</>
+);

dotcom-rendering/src/components/ProductCardImage.tsx

@@ -0,0 +1,64 @@
+import { css } from '@emotion/react';
+import type { HTMLAttributes } from 'react';
+import type { ArticleFormat } from '../lib/articleFormat';
+import type { ProductImage } from '../types/content';
+import { Caption } from './Caption';
+import { Picture } from './Picture';
+
+interface ProductCardImageProps extends HTMLAttributes<HTMLDivElement> {
+	format: ArticleFormat;
+	image?: ProductImage;
+	url?: string;
+}
+
+export const ProductCardImage = ({
+	format,
+	image,
+	url,
+}: ProductCardImageProps) => {
+	if (!image) {
+		return null;
+	}
+
+	const ProductPicture = () => (
+		<Picture
+			role={'productCard'}
+			format={format}
+			master={image.url}
+			alt={image.alt}
+			height={image.height}
+			width={image.width}
+			loading={'eager'}
+		/>
+	);
+
+	return (
+		<figure>
+			{url ? (
+				<a
+					href={url}
+					target="_blank"
+					rel="noopener noreferrer"
+					// 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)
+					css={css`
+						&&:focus {
+							box-shadow: none;
+						}
+					`}
+				>
+					<ProductPicture />
+				</a>
+			) : (
+				<ProductPicture />
+			)}
+			<Caption
+				format={format}
+				displayCredit={image.displayCredit}
+				credit={image.credit}
+				isOverlaid={false}
+			/>
+		</figure>
+	);
+};

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

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { centreColumnDecorator } from '../../.storybook/decorators/gridDecorators';
+import { allModes } from '../../.storybook/modes';
+import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
+import type { ProductImage } from '../types/content';
+import { ProductCardInline } from './ProductCardInline';
+
+const productImage: ProductImage = {
+	url: 'https://media.guimcode.co.uk/cb193848ed75d40103eceaf12b448de2330770dc/0_0_725_725/725.jpg',
+	caption: 'Filter-2 test image for live demo',
+	height: 1,
+	width: 1,
+	alt: 'Bosch Sky kettle',
+	credit: 'Photograph: Rachel Ogden/The Guardian',
+	displayCredit: false,
+};
+
+const meta = {
+	component: ProductCardInline,
+	title: 'Components/ProductCardInline',
+	parameters: {
+		chromatic: {
+			modes: {
+				'light mobile': allModes['light mobile'],
+				'light desktop': allModes['light desktop'],
+				'light wide': allModes['light wide'],
+				'horizontal split': allModes['splitHorizontal'],
+			},
+		},
+	},
+	args: {
+		format: {
+			design: ArticleDesign.Standard,
+			display: ArticleDisplay.Standard,
+			theme: Pillar.Lifestyle,
+		},
+		image: productImage,
+		productCtas: [
+			{
+				url: 'https://www.theguardian.com',
+				price: '£89.99',
+				retailer: 'Amazon',
+				text: '',
+			},
+			{
+				url: 'https://www.theguardian.com',
+				price: '£95.99',
+				retailer: 'John Lewis',
+				text: '',
+			},
+		],
+		brandName: 'AirCraft',
+		productName: 'Lume',
+		customAttributes: [
+			{ name: 'What we love', value: 'It packs away pretty small' },
+			{
+				name: "What we don't love",
+				value: 'There’s nowhere to stow the remote control',
+			},
+		],
+		lowestPrice: '£89.99',
+		isCardOnly: false,
+	},
+	decorators: [centreColumnDecorator],
+} satisfies Meta<typeof ProductCardInline>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default = {} satisfies Story;
+
+export const ProductCardOnly = {
+	args: {
+		...meta.args,
+		isCardOnly: true,
+	},
+};
+export const ProductCardOnlyDisplayCredit = {
+	args: {
+		...meta.args,
+		isCardOnly: true,
+		image: { ...productImage, displayCredit: true },
+	},
+} satisfies Story;