Skip to content

Commit 060029d

Browse files
charleycampbellcharleycampbell
committed
updated storybooks to use Component Story Format 3
1 parent 5a04f03 commit 060029d

File tree

3 files changed

+161
-216
lines changed

3 files changed

+161
-216
lines changed

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

Lines changed: 26 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import { css } from '@emotion/react';
22
import { breakpoints } from '@guardian/source/foundations';
3-
import type { Meta } from '@storybook/react';
3+
import type { Meta, StoryObj } from '@storybook/react';
44
import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
55
import type { ProductImage } from '../types/content';
66
import { ArticleContainer } from './ArticleContainer';
77
import type { InlineProductCardProps } from './InlineProductCard';
88
import { InlineProductCard } from './InlineProductCard';
99
import { Section as SectionComponent } from './Section';
1010

11-
const meta = {
12-
component: InlineProductCard,
11+
const meta: Meta<typeof InlineProductCard> = {
1312
title: 'Components/InlineProductCard',
13+
component: InlineProductCard,
1414
parameters: {
1515
chromatic: {
1616
viewports: [
@@ -19,7 +19,6 @@ const meta = {
1919
breakpoints.wide,
2020
],
2121
},
22-
2322
formats: [
2423
{
2524
design: ArticleDesign.Standard,
@@ -33,7 +32,7 @@ const meta = {
3332
<SectionComponent
3433
shouldCenter={true}
3534
showSideBorders={true}
36-
centralBorder={'full'}
35+
centralBorder="full"
3736
css={css`
3837
strong {
3938
font-weight: bold;
@@ -57,10 +56,11 @@ const meta = {
5756
</SectionComponent>
5857
),
5958
],
60-
} satisfies Meta<typeof InlineProductCard>;
61-
59+
};
6260
export default meta;
6361

62+
type Story = StoryObj<typeof InlineProductCard>;
63+
6464
const productImage: ProductImage = {
6565
url: 'https://media.guimcode.co.uk/cb193848ed75d40103eceaf12b448de2330770dc/0_0_725_725/725.jpg',
6666
caption: 'Filter-2 test image for live demo',
@@ -100,19 +100,26 @@ const sampleProductCard: InlineProductCardProps = {
100100
isCardOnly: false,
101101
};
102102

103-
export const Default = () => <InlineProductCard {...sampleProductCard} />;
103+
export const Default: Story = {
104+
args: {
105+
...sampleProductCard,
106+
},
107+
};
104108

105-
export const productCardOnly = () => (
106-
<InlineProductCard {...sampleProductCard} isCardOnly={true} />
107-
);
109+
export const ProductCardOnly: Story = {
110+
args: {
111+
...sampleProductCard,
112+
isCardOnly: true,
113+
},
114+
};
108115

109-
export const productCardOnlyDisplayCredit = () => (
110-
<InlineProductCard
111-
{...sampleProductCard}
112-
image={{
116+
export const ProductCardOnlyDisplayCredit: Story = {
117+
args: {
118+
...sampleProductCard,
119+
isCardOnly: true,
120+
image: {
113121
...productImage,
114122
displayCredit: true,
115-
}}
116-
isCardOnly={true}
117-
/>
118-
);
123+
},
124+
},
125+
};

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

Lines changed: 64 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
1-
import type { Meta } from '@storybook/react';
1+
import type { Meta, StoryObj } from '@storybook/react';
22
import type { ArticleFormat } from '../lib/articleFormat';
33
import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
44
import type { ProductImage } from '../types/content';
5-
import type { LeftColProductCardProps } from './LeftColProductCard';
65
import { LeftColProductCard } from './LeftColProductCard';
76

87
const format: ArticleFormat = {
98
design: ArticleDesign.Standard,
109
display: ArticleDisplay.Standard,
1110
theme: Pillar.Lifestyle,
1211
};
12+
13+
const productImage: ProductImage = {
14+
url: 'https://media.guimcode.co.uk/cb193848ed75d40103eceaf12b448de2330770dc/0_0_725_725/725.jpg',
15+
caption: 'Filter-2 test image for live demo',
16+
height: 1,
17+
width: 1,
18+
alt: 'Bosch Sky kettle',
19+
credit: 'Photograph: Rachel Ogden/The Guardian',
20+
displayCredit: false,
21+
};
22+
1323
const meta = {
1424
component: LeftColProductCard,
1525
title: 'Components/LeftColProductCard',
@@ -23,81 +33,71 @@ const meta = {
2333
},
2434
],
2535
},
36+
args: {
37+
format,
38+
brandName: 'AirCraft',
39+
productName: 'Lume',
40+
image: productImage,
41+
productCtas: [
42+
{
43+
url: 'https://www.theguardian.com',
44+
label: '£89.99 at Amazon',
45+
},
46+
{
47+
url: 'https://www.theguardian.com',
48+
label: '£99.99 at John Lewis',
49+
},
50+
],
51+
customAttributes: [
52+
{ name: 'What we love', value: 'It packs away pretty small' },
53+
{
54+
name: "What we don't love",
55+
value: 'there’s nowhere to stow the remote control',
56+
},
57+
],
58+
lowestPrice: '£89.99',
59+
},
2660
} satisfies Meta<typeof LeftColProductCard>;
2761

2862
export default meta;
2963

30-
const productImage: ProductImage = {
31-
url: 'https://media.guimcode.co.uk/cb193848ed75d40103eceaf12b448de2330770dc/0_0_725_725/725.jpg',
32-
caption: 'Filter-2 test image for live demo',
33-
height: 1,
34-
width: 1,
35-
alt: 'Bosch Sky kettle',
36-
credit: 'Photograph: Rachel Ogden/The Guardian',
37-
displayCredit: false,
38-
};
39-
40-
const sampleProductCard: LeftColProductCardProps = {
41-
format,
42-
brandName: 'AirCraft',
43-
productName: 'Lume',
44-
image: productImage,
45-
productCtas: [
46-
{
47-
url: 'https://www.theguardian.com',
48-
label: '£89.99 at Amazon',
49-
},
50-
{
51-
url: 'https://www.theguardian.com',
52-
label: '£99.99 at John Lewis',
53-
},
54-
],
55-
customAttributes: [
56-
{ name: 'What we love', value: 'It packs away pretty small' },
57-
{
58-
name: "What we don't love",
59-
value: 'there’s nowhere to stow the remote control',
60-
},
61-
],
62-
lowestPrice: '£89.99',
63-
};
64+
type Story = StoryObj<typeof meta>;
6465

65-
export const Default = () => <LeftColProductCard {...sampleProductCard} />;
66+
export const Default: Story = {};
6667

67-
export const WithNoCustomAttributes = () => (
68-
<LeftColProductCard {...sampleProductCard} customAttributes={[]} />
69-
);
68+
export const WithNoCustomAttributes: Story = {
69+
args: {
70+
customAttributes: [],
71+
},
72+
};
7073

71-
export const SingleCta = () => (
72-
<LeftColProductCard
73-
{...sampleProductCard}
74-
productCtas={[
74+
export const SingleCta: Story = {
75+
args: {
76+
productCtas: [
7577
{
7678
url: 'https://www.theguardian.com',
7779
label: '£89.99 at Amazon',
7880
},
79-
]}
80-
lowestPrice={'£89.99'}
81-
/>
82-
);
81+
],
82+
lowestPrice: '£89.99',
83+
},
84+
};
8385

84-
export const ShortCta = () => (
85-
<LeftColProductCard
86-
{...sampleProductCard}
87-
productCtas={[
86+
export const ShortCta: Story = {
87+
args: {
88+
productCtas: [
8889
{
8990
url: 'https://www.theguardian.com',
9091
label: '£8 at Z',
9192
},
92-
]}
93-
lowestPrice={'£89.99'}
94-
/>
95-
);
93+
],
94+
lowestPrice: '£89.99',
95+
},
96+
};
9697

97-
export const LotsOfCtas = () => (
98-
<LeftColProductCard
99-
{...sampleProductCard}
100-
productCtas={[
98+
export const LotsOfCtas: Story = {
99+
args: {
100+
productCtas: [
101101
{
102102
url: 'https://www.theguardian.com',
103103
label: '£89.99 at Cotswolds Outdoors',
@@ -126,7 +126,7 @@ export const LotsOfCtas = () => (
126126
url: 'https://www.theguardian.com',
127127
label: '£45 at Etsy',
128128
},
129-
]}
130-
lowestPrice={'£89.99'}
131-
/>
132-
);
129+
],
130+
lowestPrice: '£89.99',
131+
},
132+
};

0 commit comments

Comments
 (0)