diff --git a/dotcom-rendering/src/components/ProductCardButtons.tsx b/dotcom-rendering/src/components/ProductCardButtons.tsx index 57ae0ea0c0f..a627fadba0a 100644 --- a/dotcom-rendering/src/components/ProductCardButtons.tsx +++ b/dotcom-rendering/src/components/ProductCardButtons.tsx @@ -8,12 +8,14 @@ const getLabel = (cta: ProductCta): string => { export const ProductCardButtons = ({ productCtas, + buttonLabelOverride, }: { productCtas: ProductCta[]; + buttonLabelOverride?: string; }) => ( <> {productCtas.map((productCta, index) => { - const label = getLabel(productCta); + const label = buttonLabelOverride ?? getLabel(productCta); return ( Offering variable temperatures and a double-walled stainless-steel housing, the 3kW Sky is a brilliant blend of robust form and function. It boasts a low minimum boil (300ml), a keep-warm setting and touch controls.

', + elementId: '4a27eb68-6a03-4e82-a7d0-e4f1ef3ccb6f', + }, + { + _type: 'model.dotcomrendering.pageElements.TextBlockElement', + html: '

Why we love it
I found it difficult to select a best kettle from so many that performed well, but the Bosch Sky clinched it because it’s such a good all-rounder that will suit most people. It pours well, has a button that’s within easy reach of the handle so it’s simple to open the lid without touching it, and it’s insulated so the exterior doesn’t become too hot to touch. From a design perspective, it has a more industrial feel than many others – no frippery here – but not too modern that it wouldn’t fit into most kitchens. Its display is thoughtfully designed, easy to keep clean and lights up as it heats.

', + elementId: 'f48f03d4-bece-4763-874b-4027a311643e', + }, + { + _type: 'model.dotcomrendering.pageElements.TextBlockElement', + html: '

The exterior doesn’t get too hot (up to 40C), and while it wasn’t the fastest to boil in testing, it was only seconds behind the Dualit below. It clicked off at boiling point, and the water was still a toasty 78C 30 minutes later. At the hour point, it was 66C, and two hours 52C, meaning you’ll spend less time and energy reboiling.

', + elementId: 'df571922-33b1-416a-8b3d-ee756b638cc1', + }, + { + _type: 'model.dotcomrendering.pageElements.TextBlockElement', + html: '

It’s a shame that … its premium look ends at the handle, which seems cheap and plasticky next to the sleek aesthetic of the rest of it.

', + elementId: 'd98fc724-8908-46e2-acc6-4739ad4d5719', + }, + ], +} satisfies ProductBlockElement; + +const meta = { + component: ProductCarouselCard, + title: 'Components/ProductCarouselCard', + args: { + product, + format: { + design: ArticleDesign.Standard, + display: ArticleDisplay.Standard, + theme: Pillar.Lifestyle, + }, + showReadMore: true, + }, + render: (args) => ( +
+ +
+ ), +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default = {} satisfies Story; + +export const WithoutReadMore = { + args: { + showReadMore: false, + }, +} satisfies Story; + +export const WithoutHeadingDisclaimerOrReadMore = { + args: { + product: { + ...product, + primaryHeadingHtml: '', + }, + showReadMore: false, + }, +} satisfies Story; + +export const WithLongHeadingProductNameAndCTA = { + args: { + product: { + ...product, + primaryHeadingHtml: 'Super long product category review name', + productName: + 'Sky Kettle with a super duper long name that goes on and on', + productCtas: [ + { + url: 'https://www.johnlewis.com/bosch-twk7203gb-sky-variable-temperature-kettle-1-7l-black/p3228625', + text: '', + retailer: 'John Lewis with a very long name', + price: '£45.99', + }, + ], + }, + }, +}; diff --git a/dotcom-rendering/src/components/ProductCarouselCard.tsx b/dotcom-rendering/src/components/ProductCarouselCard.tsx new file mode 100644 index 00000000000..95cdcdb9dcf --- /dev/null +++ b/dotcom-rendering/src/components/ProductCarouselCard.tsx @@ -0,0 +1,131 @@ +import { css } from '@emotion/react'; +import { + headlineBold20, + headlineMedium17, + space, + textSans17, + textSansBold15, + textSansBold17, +} from '@guardian/source/foundations'; +import type { ArticleFormat } from '../lib/articleFormat'; +import { palette } from '../palette'; +import type { ProductBlockElement } from '../types/content'; +import { ProductCardButtons } from './ProductCardButtons'; +import { ProductCardImage } from './ProductCardImage'; + +export type ProductCarouselCardProps = { + product: ProductBlockElement; + format: ArticleFormat; + showReadMore?: boolean; +}; + +const baseCard = css` + display: flex; + flex-direction: column; +`; + +const productCarouselCardHeading = css` + ${headlineBold20}; + color: ${palette('--product-card-headline')}; +`; + +const brandAndProductName = css` + ${headlineMedium17}; +`; + +const readMoreCta = css` + ${textSansBold15}; + text-decoration-line: underline; + text-decoration-color: #dcdcdc; /* stylelint-disable-line */ + color: ${palette('--product-card-read-more')}; + text-underline-offset: 20%; + padding-bottom: ${space[2]}px; +`; + +const priceStyle = css` + ${textSansBold17}; + padding-top: ${space[1]}px; + padding-bottom: ${space[2]}px; +`; + +const buttonWrapper = css` + display: flex; + flex-direction: column; + gap: ${space[1]}px; +`; + +const imageArea = css` + img { + width: 100%; + height: auto; + } +`; + +const brandAndProductNameRow = css` + line-height: 1.3; +`; + +const brandAndProductNameInline = css` + ${headlineMedium17}; +`; + +const productNameStyle = css` + ${textSans17}; +`; + +export const ProductCarouselCard = ({ + product, + format, + showReadMore, +}: ProductCarouselCardProps) => { + const hasHeading = !!product.primaryHeadingHtml; + + const firstCta = product.productCtas[0]; + + return ( +
+ {hasHeading && ( + <> +
+
+ + {product.brandName}{' '} + + + {product.productName} + +
+ + )} + {showReadMore &&
Read more
} +
+ +
+ {!hasHeading && ( +
+
{product.brandName}
+
{product.productName}
+
+ )} +
{firstCta?.price ?? 'Price unavailable'}
+ +
+ +
+
+ ); +}; diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts index c6b0d50efc7..34991d19a99 100644 --- a/dotcom-rendering/src/paletteDeclarations.ts +++ b/dotcom-rendering/src/paletteDeclarations.ts @@ -5096,10 +5096,19 @@ const productCardBorderLight: PaletteFunction = () => sourcePalette.lifestyle[300]; const productCardBorderDark: PaletteFunction = () => sourcePalette.lifestyle[500]; +const productCardHeadingTextLight: PaletteFunction = () => + sourcePalette.lifestyle[300]; +const productCardHeadingTextDark: PaletteFunction = () => + sourcePalette.lifestyle[500]; const productCardBorderNeutralDark: PaletteFunction = () => sourcePalette.neutral[38]; const productCardBorderNeutralLight: PaletteFunction = () => sourcePalette.neutral[86]; +const productCardReadMoreLight: PaletteFunction = () => + sourcePalette.lifestyle[400]; +const productCardReadMoreDark: PaletteFunction = () => + sourcePalette.lifestyle[600]; + const privacyTextRegularLight: PaletteFunction = () => sourcePalette.neutral[7]; const privacyTextDark: PaletteFunction = () => sourcePalette.neutral[86]; const witnessTitleText: PaletteFunction = ({ theme }) => { @@ -7536,6 +7545,14 @@ const paletteColours = { light: productCardBorderNeutralLight, dark: productCardBorderNeutralDark, }, + '--product-card-headline': { + light: productCardHeadingTextLight, + dark: productCardHeadingTextDark, + }, + '--product-card-read-more': { + light: productCardReadMoreLight, + dark: productCardReadMoreDark, + }, '--pullquote-background': { light: pullQuoteBackgroundLight, dark: pullQuoteBackgroundDark,