Skip to content

Commit 8811f74

Browse files
emma-imberemma-imber
committed
Add StackedProducts component and story
1 parent fb0f74f commit 8811f74

File tree

3 files changed

+307
-0
lines changed

3 files changed

+307
-0
lines changed

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

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -240,3 +240,253 @@ export const exampleProduct: ProductBlockElement = {
240240
},
241241
],
242242
};
243+
244+
export const exampleAtAGlanceProductArray: ProductBlockElement[] = [
245+
{
246+
_type: 'model.dotcomrendering.pageElements.ProductBlockElement',
247+
elementId: 'b85ec38b-091b-40c2-8902-a9114df3cfe3',
248+
primaryHeadingHtml: '<em>Best running watch for beginners:</em>',
249+
secondaryHeadingHtml: 'Garmin Forerunner 55',
250+
brandName: 'Garmin',
251+
productName: 'Forerunner 55',
252+
image: {
253+
url: 'https://media.guim.co.uk/7bf8bdea17b8d7e3f0b9aef1aa88d94737d4bdf3/0_0_725_725/725.jpg',
254+
caption:
255+
'Garmin Forerunner 55 GPS 42mm Running Smartwatch, Easy to use, Lightweight, Training Guidance, Safety & Tracking Features, Black',
256+
height: 725,
257+
width: 725,
258+
alt: '',
259+
credit: 'Photograph: PR Image',
260+
displayCredit: false,
261+
},
262+
displayType: 'InlineWithProductCard',
263+
customAttributes: [],
264+
productCtas: [
265+
{
266+
url: 'https://www.decathlon.co.uk/p/garmin-forerunner-55-gps-watch-black/341619/m8758300',
267+
text: '',
268+
retailer: 'Decathlon',
269+
price: '£179.99',
270+
},
271+
{
272+
url: 'https://www.amazon.co.uk/Garmin-Forerunner-Lightweight-Smartwatch-Training/dp/B0953X73TP?th=1',
273+
text: '',
274+
retailer: 'Amazon',
275+
price: '£122.49',
276+
},
277+
],
278+
starRating: 'none-selected',
279+
content: [],
280+
},
281+
{
282+
_type: 'model.dotcomrendering.pageElements.ProductBlockElement',
283+
elementId: '1cb32565-86fa-4d95-a944-de49a065e71e',
284+
primaryHeadingHtml: '<em>Best budget running watch:</em>',
285+
secondaryHeadingHtml: 'Suunto Run',
286+
brandName: 'Suunto',
287+
productName: 'Run',
288+
image: {
289+
url: 'https://media.guim.co.uk/ecc054be145a6e5b3c6fca3694f9b4cbea5078b1/0_0_725_725/725.jpg',
290+
caption: 'SUUNTO RUN All Black GPS Sport and Running Watch',
291+
height: 725,
292+
width: 725,
293+
alt: '',
294+
credit: 'Photograph: PR Image',
295+
displayCredit: false,
296+
},
297+
displayType: 'InlineWithProductCard',
298+
customAttributes: [],
299+
productCtas: [
300+
{
301+
url: 'https://www.sportsshoes.com/product/suu151/suunto-run-gps-watch',
302+
text: '',
303+
retailer: 'SportsShoes',
304+
price: '£174.99',
305+
},
306+
{
307+
url: 'https://www.suunto.com/en-gb/Products/sports-watches/suunto-run/suunto-run-all-black-with-silicone-strap',
308+
text: '',
309+
retailer: 'Suunto',
310+
price: '£199',
311+
},
312+
],
313+
starRating: 'none-selected',
314+
content: [],
315+
},
316+
{
317+
_type: 'model.dotcomrendering.pageElements.ProductBlockElement',
318+
elementId: '43670bc5-00f2-460d-853e-3e6e0bf205c5',
319+
primaryHeadingHtml: '<em>Best mid-range running watch:</em>',
320+
secondaryHeadingHtml: 'Coros Pace Pro',
321+
brandName: 'Coros',
322+
productName: 'Pace Pro',
323+
image: {
324+
url: 'https://media.guim.co.uk/33599323a25a435d3a5647cc9906d2b011f6763e/0_0_725_725/725.jpg',
325+
caption: 'COROS PACE Pro GPS Sport Watch Black',
326+
height: 725,
327+
width: 725,
328+
alt: '',
329+
credit: 'Photograph: PR Image',
330+
displayCredit: false,
331+
},
332+
displayType: 'InlineWithProductCard',
333+
customAttributes: [],
334+
productCtas: [
335+
{
336+
url: 'https://healf.com/en-uk/products/coros-coros-pace-pro-gps-sport-watch-black',
337+
text: '',
338+
retailer: 'Healf',
339+
price: '£299',
340+
},
341+
{
342+
url: 'https://www.myprotein.com/p/sports-accessories/coros-pace-pro-gps-sport-watch-black-one-size/16889572/',
343+
text: '',
344+
retailer: 'Myprotein',
345+
price: '£299',
346+
},
347+
],
348+
starRating: 'none-selected',
349+
content: [],
350+
},
351+
{
352+
_type: 'model.dotcomrendering.pageElements.ProductBlockElement',
353+
elementId: '830b3256-bd3a-4fc2-a4a3-6d42fcf0467f',
354+
primaryHeadingHtml: '<em>Best-looking mid-range running watch:</em>',
355+
secondaryHeadingHtml: 'Suunto Race 2',
356+
brandName: 'Suunto',
357+
productName: 'Race 2',
358+
image: {
359+
url: 'https://media.guim.co.uk/c9f1e864f353555555af61c83f4fe5acf01be95b/0_0_725_725/725.jpg',
360+
caption: 'Suunto Race 2',
361+
height: 725,
362+
width: 725,
363+
alt: '',
364+
credit: 'Photograph: PR Image',
365+
displayCredit: false,
366+
},
367+
displayType: 'InlineWithProductCard',
368+
customAttributes: [],
369+
productCtas: [
370+
{
371+
url: 'https://www.sportsshoes.com/product/suu123/suunto-race-2-gps-watch---ss26',
372+
text: '',
373+
retailer: 'SportsShoes',
374+
price: '£429',
375+
},
376+
{
377+
url: 'https://www.suunto.com/en-gb/Products/sports-watches/suunto-race-2/suunto-race-2-all-black/',
378+
text: '',
379+
retailer: 'Suunto',
380+
price: '£429',
381+
},
382+
],
383+
starRating: 'none-selected',
384+
content: [],
385+
},
386+
{
387+
_type: 'model.dotcomrendering.pageElements.ProductBlockElement',
388+
elementId: '407575ba-5898-4995-a94b-f7ab624c60de',
389+
primaryHeadingHtml: '<em>The best running watch money can buy:</em>',
390+
secondaryHeadingHtml: 'Garmin Forerunner 970',
391+
brandName: 'Garmin',
392+
productName: 'Forerunner 970',
393+
image: {
394+
url: 'https://media.guim.co.uk/5d6f01a3ac82c8f4208e47f6645034b7155c704b/0_0_725_725/725.jpg',
395+
caption: 'Forerunner 970 GPS Smartwatch',
396+
height: 725,
397+
width: 725,
398+
alt: '',
399+
credit: 'Photograph: PR Image',
400+
displayCredit: false,
401+
},
402+
displayType: 'InlineWithProductCard',
403+
customAttributes: [],
404+
productCtas: [
405+
{
406+
url: 'https://www.blacks.co.uk/19695870/garmin-forerunner-970-gps-watch-19695870/6206138',
407+
text: '',
408+
retailer: 'Blacks',
409+
price: '£579',
410+
},
411+
{
412+
url: 'https://www.cotswoldoutdoor.com/p/garmin-forerunner-970-gps-smartwatch-B3BG3B0054.html',
413+
text: '',
414+
retailer: 'Cotswold Outdoor',
415+
price: '£629.99',
416+
},
417+
],
418+
starRating: 'none-selected',
419+
content: [],
420+
},
421+
{
422+
_type: 'model.dotcomrendering.pageElements.ProductBlockElement',
423+
elementId: 'd7de82bb-fd1c-4efb-a54d-9844156db9e5',
424+
primaryHeadingHtml: '<em>Best running watch for battery life:</em>',
425+
secondaryHeadingHtml: 'Garmin Enduro 3',
426+
brandName: 'Garmin',
427+
productName: 'Enduro 3',
428+
image: {
429+
url: 'https://media.guim.co.uk/4ca5935158967c6b2d1a91fabca27ec20a52ef96/0_0_725_725/725.jpg',
430+
caption: 'Garmin Enduro 3 DLC Titanium GPS Watch',
431+
height: 725,
432+
width: 725,
433+
alt: '',
434+
credit: 'Photograph: PR Image',
435+
displayCredit: false,
436+
},
437+
displayType: 'InlineWithProductCard',
438+
customAttributes: [],
439+
productCtas: [
440+
{
441+
url: 'https://www.sportsshoes.com/product/gar340/garmin-enduro-3-sapphire-gps-watch',
442+
text: '',
443+
retailer: 'SportsShoes',
444+
price: '£615.99',
445+
},
446+
{
447+
url: 'https://www.millets.co.uk/19656651/garmin-enduro-3-gps-smartwatch-19656651/5930679/',
448+
text: '',
449+
retailer: 'Millets',
450+
price: '£649',
451+
},
452+
],
453+
starRating: 'none-selected',
454+
content: [],
455+
},
456+
{
457+
_type: 'model.dotcomrendering.pageElements.ProductBlockElement',
458+
elementId: 'c75a0b5a-929e-4550-a146-ccc080c76655',
459+
primaryHeadingHtml: '<em>Best running watch with LTE/satellite:</em>',
460+
secondaryHeadingHtml: 'Garmin Fenix 8 Pro',
461+
brandName: 'Garmin',
462+
productName: 'Fenix 8 Pro',
463+
image: {
464+
url: 'https://media.guim.co.uk/719acb5d276ed7d64f889ee5a031cfd8d945db67/0_0_725_725/725.jpg',
465+
caption:
466+
'Garmin\nfēnix 8 Pro AMOLED GPS Multisport Smartwatch, Graphite, 47mm',
467+
height: 725,
468+
width: 725,
469+
alt: '',
470+
credit: 'Photograph: PR Image',
471+
displayCredit: false,
472+
},
473+
displayType: 'InlineWithProductCard',
474+
customAttributes: [],
475+
productCtas: [
476+
{
477+
url: 'https://www.sportsshoes.com/product/gar354/garmin-fenix-8-pro-amoled-sapphire--(47mm)-gps-watch---aw25',
478+
text: '',
479+
retailer: 'SportsShoes',
480+
price: '£875.49',
481+
},
482+
{
483+
url: 'https://www.johnlewis.com/garmin-fenix-8-pro-amoled-gps-multisport-smartwatch-graphite/p114305025',
484+
text: '',
485+
retailer: 'John Lewis',
486+
price: '£991.57',
487+
},
488+
],
489+
starRating: 'none-selected',
490+
content: [],
491+
},
492+
];

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import type { Meta, StoryObj } from '@storybook/react-webpack5';
2+
import { centreColumnDecorator } from '../../.storybook/decorators/gridDecorators';
3+
import { exampleAtAGlanceProductArray } from '../../fixtures/manual/productBlockElement';
4+
import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
5+
import { StackedProducts } from './StackedProducts';
6+
7+
const meta = {
8+
title: 'Components/Stacked Horizontal Summary Product Cards',
9+
component: StackedProducts,
10+
args: {
11+
products: exampleAtAGlanceProductArray,
12+
format: {
13+
design: ArticleDesign.Standard,
14+
display: ArticleDisplay.Standard,
15+
theme: Pillar.Lifestyle,
16+
},
17+
},
18+
decorators: [centreColumnDecorator],
19+
} satisfies Meta<typeof StackedProducts>;
20+
21+
export default meta;
22+
23+
type Story = StoryObj<typeof meta>;
24+
25+
export const Default = {} satisfies Story;

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { css } from '@emotion/react';
2+
import { space } from '@guardian/source/foundations';
3+
import type { ArticleFormat } from '../lib/articleFormat';
4+
import type { ProductBlockElement } from '../types/content';
5+
import { HorizontalSummaryProductCard } from './HorizontalSummaryProductCard';
6+
7+
export const StackedProducts = ({
8+
products,
9+
format,
10+
}: {
11+
products: ProductBlockElement[];
12+
format: ArticleFormat;
13+
}) => {
14+
return (
15+
<div
16+
css={[
17+
css`
18+
display: grid;
19+
gap: ${space[4]}px;
20+
`,
21+
]}
22+
>
23+
{products.map((product: ProductBlockElement, index) => (
24+
<HorizontalSummaryProductCard
25+
key={index}
26+
product={product}
27+
format={format}
28+
/>
29+
))}
30+
</div>
31+
);
32+
};

0 commit comments

Comments
 (0)