Skip to content

Commit 0f64327

Browse files
oliverabrahamsemma-imber
oliverabrahams
and
emma-imber
authored
Add horizontal product summary card (#15055)
* Add horizontal summary product card. --------- Co-authored-by: Emma Imber <[email protected]>
1 parent 71d4acb commit 0f64327

File tree

3 files changed

+396
-0
lines changed

3 files changed

+396
-0
lines changed

‎dotcom-rendering/fixtures/manual/productBlockElement.ts‎

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
import type { ProductBlockElement } from '../../src/types/content';
2+
import { productImage } from './productImage';
3+
4+
export const exampleProduct: ProductBlockElement = {
5+
_type: 'model.dotcomrendering.pageElements.ProductBlockElement',
6+
elementId: 'b1f6e8e2-3f3a-4f0c-8d1e-5f3e3e3e3e3e',
7+
primaryHeadingHtml: 'Best overall',
8+
secondaryHeadingHtml: 'Bosch Sky Kettle',
9+
brandName: 'Bosch',
10+
productName: 'Sky Kettle',
11+
image: productImage,
12+
displayType: 'InlineWithProductCard',
13+
lowestPrice: '£39.99',
14+
customAttributes: [
15+
{ name: 'What we love', value: 'It pours well and looks great' },
16+
{
17+
name: "What we don't love",
18+
value: 'The handle feels a bit cheap compared to the rest of it',
19+
},
20+
],
21+
productCtas: [
22+
{
23+
url: 'https://www.johnlewis.com/bosch-twk7203gb-sky-variable-temperature-kettle-1-7l-black/p3228625',
24+
text: '',
25+
retailer: 'John Lewis',
26+
price: '£45.99',
27+
},
28+
{
29+
url: 'https://www.amazon.co.uk/Bosch-TWK7203GB-Sky-Variable-Temperature/dp/B07Z8VQ2V6',
30+
text: '',
31+
retailer: 'Amazon',
32+
price: '£39.99',
33+
},
34+
],
35+
starRating: 'none-selected',
36+
content: [
37+
{
38+
displayCredit: true,
39+
_type: 'model.dotcomrendering.pageElements.ImageBlockElement',
40+
role: 'inline',
41+
media: {
42+
allImages: [
43+
{
44+
index: 0,
45+
fields: {
46+
height: '3213',
47+
width: '3213',
48+
},
49+
mediaType: 'Image',
50+
mimeType: 'image/jpeg',
51+
url: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/3213.jpg',
52+
},
53+
{
54+
index: 1,
55+
fields: {
56+
isMaster: 'true',
57+
height: '3213',
58+
width: '3213',
59+
},
60+
mediaType: 'Image',
61+
mimeType: 'image/jpeg',
62+
url: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
63+
},
64+
{
65+
index: 2,
66+
fields: {
67+
height: '2000',
68+
width: '2000',
69+
},
70+
mediaType: 'Image',
71+
mimeType: 'image/jpeg',
72+
url: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/2000.jpg',
73+
},
74+
{
75+
index: 3,
76+
fields: {
77+
height: '1000',
78+
width: '1000',
79+
},
80+
mediaType: 'Image',
81+
mimeType: 'image/jpeg',
82+
url: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/1000.jpg',
83+
},
84+
{
85+
index: 4,
86+
fields: {
87+
height: '500',
88+
width: '500',
89+
},
90+
mediaType: 'Image',
91+
mimeType: 'image/jpeg',
92+
url: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/500.jpg',
93+
},
94+
{
95+
index: 5,
96+
fields: {
97+
height: '140',
98+
width: '140',
99+
},
100+
mediaType: 'Image',
101+
mimeType: 'image/jpeg',
102+
url: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/140.jpg',
103+
},
104+
],
105+
},
106+
elementId: '76686aa1-2e47-4616-b4ed-a88d0afe07ed',
107+
imageSources: [
108+
{
109+
weighting: 'inline',
110+
srcSet: [
111+
{
112+
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
113+
width: 620,
114+
},
115+
{
116+
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
117+
width: 1240,
118+
},
119+
{
120+
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
121+
width: 605,
122+
},
123+
{
124+
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
125+
width: 1210,
126+
},
127+
{
128+
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
129+
width: 445,
130+
},
131+
{
132+
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
133+
width: 890,
134+
},
135+
],
136+
},
137+
{
138+
weighting: 'thumbnail',
139+
srcSet: [
140+
{
141+
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
142+
width: 140,
143+
},
144+
{
145+
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
146+
width: 280,
147+
},
148+
{
149+
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
150+
width: 120,
151+
},
152+
{
153+
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
154+
width: 240,
155+
},
156+
],
157+
},
158+
{
159+
weighting: 'supporting',
160+
srcSet: [
161+
{
162+
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
163+
width: 380,
164+
},
165+
{
166+
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
167+
width: 760,
168+
},
169+
{
170+
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
171+
width: 300,
172+
},
173+
{
174+
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
175+
width: 600,
176+
},
177+
{
178+
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
179+
width: 620,
180+
},
181+
{
182+
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
183+
width: 1240,
184+
},
185+
{
186+
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
187+
width: 605,
188+
},
189+
{
190+
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
191+
width: 1210,
192+
},
193+
{
194+
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
195+
width: 445,
196+
},
197+
{
198+
src: 'https://media.guimcode.co.uk/bacede2d976c26d6a224ede074d5634a3f1d304f/0_0_3213_3213/master/3213.jpg',
199+
width: 890,
200+
},
201+
],
202+
},
203+
],
204+
data: {
205+
alt: 'Testing Bosch Sky Kettle',
206+
credit: 'Photograph: Rachel Ogden/The Guardian',
207+
},
208+
},
209+
{
210+
_type: 'model.dotcomrendering.pageElements.LinkBlockElement',
211+
url: 'https://www.johnlewis.com/bosch-twk7203gb-sky-variable-temperature-kettle-1-7l-black/p3228625',
212+
label: '£79.99 at John Lewis',
213+
linkType: 'ProductButton',
214+
},
215+
{
216+
_type: 'model.dotcomrendering.pageElements.LinkBlockElement',
217+
url: 'https://www.amazon.co.uk/Bosch-TWK7203GB-Sky-Variable-Temperature/dp/B07Z8VQ2V6',
218+
label: '£79.99 at Amazon',
219+
linkType: 'ProductButton',
220+
},
221+
{
222+
_type: 'model.dotcomrendering.pageElements.TextBlockElement',
223+
html: '<p>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.</p>',
224+
elementId: '4a27eb68-6a03-4e82-a7d0-e4f1ef3ccb6f',
225+
},
226+
{
227+
_type: 'model.dotcomrendering.pageElements.TextBlockElement',
228+
html: '<p><strong>Why we love it<br></strong>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.</p>',
229+
elementId: 'f48f03d4-bece-4763-874b-4027a311643e',
230+
},
231+
{
232+
_type: 'model.dotcomrendering.pageElements.TextBlockElement',
233+
html: '<p>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.</p>',
234+
elementId: 'df571922-33b1-416a-8b3d-ee756b638cc1',
235+
},
236+
{
237+
_type: 'model.dotcomrendering.pageElements.TextBlockElement',
238+
html: '<p><strong>It’s a shame that … </strong> its premium look ends at the handle, which seems cheap and plasticky next to the sleek aesthetic of the rest of it.</p>',
239+
elementId: 'd98fc724-8908-46e2-acc6-4739ad4d5719',
240+
},
241+
],
242+
};

‎dotcom-rendering/src/components/HorizontalSummaryProductCard.stories.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import type { Meta, StoryObj } from '@storybook/react-webpack5';
2+
import { centreColumnDecorator } from '../../.storybook/decorators/gridDecorators';
3+
import { allModes } from '../../.storybook/modes';
4+
import { exampleProduct } from '../../fixtures/manual/productBlockElement';
5+
import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
6+
import { HorizontalSummaryProductCard } from './HorizontalSummaryProductCard';
7+
8+
const meta = {
9+
title: 'Components/Horizontal Summary Product Card',
10+
component: HorizontalSummaryProductCard,
11+
args: {
12+
product: { ...exampleProduct, h2Id: 'example-1' },
13+
format: {
14+
design: ArticleDesign.Standard,
15+
display: ArticleDisplay.Standard,
16+
theme: Pillar.Lifestyle,
17+
},
18+
},
19+
parameters: {
20+
chromatic: {
21+
modes: {
22+
'vertical mobile': allModes['vertical mobile'],
23+
'vertical wide': allModes['vertical wide'],
24+
},
25+
},
26+
},
27+
decorators: [centreColumnDecorator],
28+
} satisfies Meta<typeof HorizontalSummaryProductCard>;
29+
30+
export default meta;
31+
32+
type Story = StoryObj<typeof meta>;
33+
34+
export const Default = {} satisfies Story;

‎dotcom-rendering/src/components/HorizontalSummaryProductCard.tsx‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import { css } from '@emotion/react';
2+
import {
3+
from,
4+
headlineBold20,
5+
headlineMedium17,
6+
space,
7+
textSansBold15,
8+
textSansBold17,
9+
} from '@guardian/source/foundations';
10+
import type { ArticleFormat } from '../lib/articleFormat';
11+
import { palette } from '../palette';
12+
import type { ProductBlockElement } from '../types/content';
13+
import { ProductCardImage } from './ProductCardImage';
14+
import { ProductLinkButton } from './ProductLinkButton';
15+
16+
const horizontalCard = css`
17+
position: relative;
18+
border-top: 1px solid ${palette('--section-border')};
19+
padding-top: ${space[2]}px;
20+
display: grid;
21+
grid-template-columns: 118px 1fr;
22+
grid-column-gap: 10px;
23+
grid-row-gap: ${space[2]}px;
24+
grid-template-areas:
25+
'image information'
26+
'button button';
27+
${from.phablet} {
28+
grid-template-areas: 'image information';
29+
}
30+
`;
31+
const imageContainer = css`
32+
img {
33+
width: 100%;
34+
height: auto;
35+
}
36+
grid-area: image;
37+
`;
38+
const informationContainer = css`
39+
display: flex;
40+
flex-direction: column;
41+
grid-area: information;
42+
`;
43+
44+
const buttonContainer = css`
45+
grid-area: button;
46+
${from.phablet} {
47+
grid-area: information;
48+
position: absolute;
49+
width: 220px;
50+
bottom: 0;
51+
right: 0;
52+
}
53+
`;
54+
55+
const readMore = css`
56+
${textSansBold15};
57+
text-decoration-line: underline;
58+
text-decoration-color: ${palette('--product-card-read-more-decoration')};
59+
color: ${palette('--product-card-read-more')};
60+
text-underline-offset: 20%;
61+
`;
62+
63+
const productCardHeading = css`
64+
${headlineBold20};
65+
color: ${palette('--product-card-headline')};
66+
`;
67+
68+
const secondaryHeading = css`
69+
${headlineMedium17};
70+
`;
71+
72+
const price = css`
73+
margin-top: auto;
74+
${textSansBold17};
75+
`;
76+
77+
export const HorizontalSummaryProductCard = ({
78+
product,
79+
format,
80+
}: {
81+
product: ProductBlockElement;
82+
format: ArticleFormat;
83+
}) => {
84+
const cardCta = product.productCtas[0];
85+
if (!cardCta) return null;
86+
87+
return (
88+
<div css={horizontalCard}>
89+
<div css={imageContainer}>
90+
<ProductCardImage
91+
format={format}
92+
image={product.image}
93+
url={cardCta.url}
94+
/>
95+
</div>
96+
<div css={informationContainer}>
97+
<div
98+
css={productCardHeading}
99+
dangerouslySetInnerHTML={{
100+
__html: product.primaryHeadingHtml,
101+
}}
102+
></div>
103+
<div css={secondaryHeading}>{product.secondaryHeadingHtml}</div>
104+
<a href={`#${product.h2Id}`} css={readMore}>
105+
Read more
106+
</a>
107+
<div css={price}>{cardCta.price}</div>
108+
</div>
109+
<div css={buttonContainer}>
110+
<ProductLinkButton
111+
size="small"
112+
fullwidth={true}
113+
minimisePadding={true}
114+
label={'Buy at ' + cardCta.retailer}
115+
url={cardCta.url}
116+
/>
117+
</div>
118+
</div>
119+
);
120+
};

0 commit comments

Comments
 (0)