Add product Element

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

@@ -0,0 +1,56 @@
+import { breakpoints } from '@guardian/source/foundations';
+import type { Meta } from '@storybook/react';
+import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
+import type { InlineProductCardProps } from './InlineProductCard';
+import { InlineProductCard } from './InlineProductCard';
+
+const meta = {
+	component: InlineProductCard,
+	title: 'Components/InlineProductCard',
+	parameters: {
+		chromatic: {
+			viewports: [
+				breakpoints.mobile,
+				breakpoints.mobileMedium,
+				breakpoints.desktop,
+			],
+		},
+
+		formats: [
+			{
+				design: ArticleDesign.Standard,
+				display: ArticleDisplay.Standard,
+				theme: Pillar.Lifestyle,
+			},
+		],
+	},
+} satisfies Meta<typeof InlineProductCard>;
+
+export default meta;
+
+const sampleProductCard: InlineProductCardProps = {
+	format: {
+		design: ArticleDesign.Standard,
+		display: ArticleDisplay.Standard,
+		theme: Pillar.Lifestyle,
+	},
+	image: 'https://media.guim.co.uk/ed32f52c10d742be18c4ff1b218dce611e71f57e/500_0_3000_3000/master/3000.jpg',
+	primaryUrl: 'https://www.aircraft.com/lume',
+	primaryCTA: 'Buy at AirCraft',
+	primaryPrice: '£199.99',
+	primaryRetailer: 'AirCraft',
+	secondaryCTA: '£199.99 at Amazon',
+	secondaryUrl:
+		'https://www.amazon.co.uk/AirCraft-Home-Backlight-Oscillating-Circulator/dp/B0D8QNGB3M',
+	brandName: 'AirCraft',
+	productName: 'Lume',
+	statistics: [
+		{ 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',
+		},
+	],
+};
+
+export const Default = () => <InlineProductCard {...sampleProductCard} />;

dotcom-rendering/src/components/InlineProductCard.tsx

@@ -0,0 +1,196 @@
+import { css } from '@emotion/react';
+import {
+	from,
+	headlineMedium20,
+	space,
+	textSans15,
+	textSans17,
+} from '@guardian/source/foundations';
+import type { ReactNode } from 'react';
+import type { ArticleFormat } from '../lib/articleFormat';
+import { palette } from '../palette';
+import { Picture } from './Picture';
+import { ProductLinkButton } from './ProductLinkButton';
+import { stripHtmlFromString } from './TextBlockComponent';
+
+export type Statistics = {
+	name: string;
+	value: string;
+};
+
+const card = css`
+	background-color: ${palette('--product-card-background')};
+	padding: ${space[2]}px ${space[3]}px ${space[3]}px ${space[3]}px;
+	column-gap: 10px;
+	display: grid;
+	max-width: 100%;
+	min-width: 100%;
+	row-gap: ${space[4]}px;
+	grid-template-columns: 1fr 1fr;
+	strong {
+		font-weight: 700;
+	}
+	img {
+		height: 165px;
+		width: 165px;
+	}
+	border-top: 1px solid ${palette('--section-border-lifestyle')};
+	${from.wide} {
+		display: none;
+	}
+`;
+
+export type InlineProductCardProps = {
+	format: ArticleFormat;
+	brandName: string;
+	productName: string;
+	image: string;
+	primaryCTA: string;
+	primaryUrl: string;
+	primaryPrice: string;
+	primaryRetailer: string;
+	secondaryCTA?: string;
+	secondaryUrl?: string;
+	statistics: Statistics[];
+};
+
+const productInfoContainer = css`
+	${textSans17};
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: ${space[2]}px;
+`;
+
+const primaryHeading = css`
+	${headlineMedium20};
+`;
+
+const statisticsContainer = css`
+	grid-column: span 2;
+	border-top: 1px solid ${palette('--section-border')};
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 2px;
+`;
+
+const Statistic = ({ name, value }: Statistics) => (
+	<div
+		css={css`
+			${textSans15};
+			margin-top: ${space[2]}px;
+		`}
+	>
+		<strong>{name}</strong> <br /> {value}
+	</div>
+);
+
+const ButtonContainer = ({ children }: { children: ReactNode }) => (
+	<div
+		css={css`
+			grid-column: span 2;
+			display: flex;
+			flex-direction: column;
+			gap: ${space[1]}px;
+			padding-bottom: ${space[2]}px;
+		`}
+	>
+		{children}
+	</div>
+);
+
+const RetailerLink = ({
+	primaryUrl,
+	primaryRetailer,
+}: {
+	primaryUrl: string;
+	primaryRetailer: string;
+}) => (
+	<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={primaryUrl}
+	>
+		{primaryRetailer}
+	</a>
+);
+
+const ProductInfoContainer = ({ children }: { children: ReactNode }) => (
+	<div css={productInfoContainer}>{children}</div>
+);
+
+export const InlineProductCard = ({
+	format,
+	brandName,
+	productName,
+	image,
+	primaryCTA,
+	primaryUrl,
+	primaryPrice,
+	primaryRetailer,
+	secondaryCTA,
+	secondaryUrl,
+	statistics,
+}: InlineProductCardProps) => (
+	<div css={card}>
+		{!!image && (
+			<Picture
+				role={'productCard'}
+				format={format}
+				master={image}
+				alt={productName + brandName}
+				height={165}
+				width={165}
+				loading={'eager'}
+			/>
+		)}
+		<ProductInfoContainer>
+			<div css={primaryHeading}>{brandName}</div>
+			<div>{productName}</div>
+			<div>
+				<strong>{primaryPrice}</strong> at{' '}
+				<RetailerLink
+					primaryUrl={primaryUrl}
+					primaryRetailer={primaryRetailer}
+				/>
+			</div>
+		</ProductInfoContainer>
+		<ButtonContainer>
+			<ProductLinkButton
+				label={stripHtmlFromString(primaryCTA)}
+				url={primaryUrl}
+				cssOverrides={css`
+					width: 100%;
+				`}
+			/>
+			{!!secondaryCTA && !!secondaryUrl && (
+				<ProductLinkButton
+					cssOverrides={css`
+						width: 100%;
+					`}
+					label={stripHtmlFromString(secondaryCTA)}
+					url={secondaryUrl}
+					priority={'tertiary'}
+				/>
+			)}
+		</ButtonContainer>
+		{statistics.length > 0 && (
+			<div css={statisticsContainer}>
+				{statistics.map((statistic) => (
+					<Statistic
+						key={statistic.name}
+						name={statistic.name}
+						value={statistic.value}
+					/>
+				))}
+			</div>
+		)}
+	</div>
+);

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

@@ -0,0 +1,51 @@
+import type { Meta } from '@storybook/react';
+import type { ArticleFormat } from '../lib/articleFormat';
+import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
+import type { LeftColProductCardProps } from './LeftColProductCard';
+import { LeftColProductCard } from './LeftColProductCard';
+
+const format: ArticleFormat = {
+	design: ArticleDesign.Standard,
+	display: ArticleDisplay.Standard,
+	theme: Pillar.Lifestyle,
+};
+const meta = {
+	component: LeftColProductCard,
+	title: 'Components/LeftColProductCard',
+	parameters: {
+		layout: 'padded',
+		formats: [
+			{
+				design: ArticleDesign.Standard,
+				display: ArticleDesign.Standard,
+				theme: Pillar.Lifestyle,
+			},
+		],
+	},
+} satisfies Meta<typeof LeftColProductCard>;
+
+export default meta;
+
+const sampleProductCard: LeftColProductCardProps = {
+	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',
+	primaryRetailer: 'AirCraft',
+	statistics: [
+		{ 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',
+		},
+	],
+};
+
+export const Default = () => <LeftColProductCard {...sampleProductCard} />;
+
+export const WithNoStatistics = () => (
+	<LeftColProductCard {...sampleProductCard} statistics={[]} />
+);