Skip to content

Commit 967f8a4

Browse files
colinrotherhamcolinrotherham
committed
Align stories with NHS.UK frontend
1 parent 5e96956 commit 967f8a4

41 files changed

Lines changed: 814 additions & 307 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎stories/Content Presentation/Details.stories.tsx‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,19 @@ const meta: Meta<typeof Details> = {
1717
title: 'Content Presentation/Details',
1818
component: Details,
1919
};
20+
2021
export default meta;
2122
type Story = StoryObj<typeof Details>;
2223

23-
export const Standard: Story = {
24-
argTypes: { expander: { table: { disable: true } } },
24+
export const Default: Story = {
25+
name: 'Details default',
26+
argTypes: {
27+
expander: {
28+
table: {
29+
disable: true,
30+
},
31+
},
32+
},
2533
render: ({ expander }) => (
2634
<Details expander={expander}>
2735
<Details.Summary>Where can I find my NHS number?</Details.Summary>
@@ -44,7 +52,10 @@ export const Standard: Story = {
4452
};
4553

4654
export const Expander: Story = {
47-
args: { expander: true },
55+
name: 'Details expander',
56+
args: {
57+
expander: true,
58+
},
4859
render: ({ expander }) => (
4960
<Details expander={expander}>
5061
<Details.Summary>Opening times</Details.Summary>
@@ -95,6 +106,7 @@ export const Expander: Story = {
95106
};
96107

97108
export const ExpanderGroup: Story = {
109+
name: 'Details expander group',
98110
render: (args) => (
99111
<Details.ExpanderGroup>
100112
<Details expander>

‎stories/Content Presentation/DoAndDontList.stories.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,15 @@ import { DoAndDontList } from '#components/content-presentation/do-and-dont-list
1616
* See the <b><a href="#custom-prefix-text" >custom prefix text</a></b> story for an example.
1717
*/
1818
const meta: Meta<typeof DoAndDontList> = {
19-
title: 'Content Presentation/DoAndDontList',
19+
title: "Content Presentation/Do and Don't list",
2020
component: DoAndDontList,
2121
};
22+
2223
export default meta;
2324
type Story = StoryObj<typeof DoAndDontList>;
2425

2526
export const Do: Story = {
27+
name: "Do and Don't list (do)",
2628
args: {
2729
listType: 'do',
2830
},
@@ -40,6 +42,7 @@ export const Do: Story = {
4042
};
4143

4244
export const Dont: Story = {
45+
name: "Do and Don't list (don't)",
4346
args: {
4447
listType: 'dont',
4548
},
@@ -74,6 +77,7 @@ export const Dont: Story = {
7477
* | JSX | The JSX will be rendered, such as `<span>` |
7578
*/
7679
export const CustomPrefixText: Story = {
80+
name: "Do and Don't list with custom prefix",
7781
args: {
7882
listType: 'dont',
7983
},

‎stories/Content Presentation/Hero.stories.tsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,12 @@ const meta: Meta<typeof Hero> = {
1010
width: false,
1111
},
1212
};
13+
1314
export default meta;
1415
type Story = StoryObj<typeof Hero>;
1516

16-
export const HeroWithHeadingAndContent: Story = {
17+
export const Default: Story = {
18+
name: 'Hero default',
1719
render: (args) => (
1820
<Hero>
1921
<Hero.Heading>We&apos;re here for you.</Hero.Heading>
@@ -22,17 +24,19 @@ export const HeroWithHeadingAndContent: Story = {
2224
),
2325
};
2426

25-
export const HeroWithImageHeadingAndContent: Story = {
27+
export const WithImage: Story = {
28+
name: 'Hero with image',
2629
render: (args) => (
27-
<Hero imageSrc="https://assets.nhs.uk/prod/images/S_0818_homepage_hero_1_F0147446.width-1000.jpg">
28-
<Hero.Heading>We&apos;re here for you.</Hero.Heading>
29-
<Hero.Text>Helping you take control of your health and wellbeing.</Hero.Text>
30-
</Hero>
30+
<Hero imageSrc="https://assets.nhs.uk/prod/images/S_0818_homepage_hero_1_F0147446.width-1000.jpg" />
3131
),
3232
};
3333

34-
export const HeroWithImageOnly: Story = {
34+
export const WithImageContent: Story = {
35+
name: 'Hero with image, content',
3536
render: (args) => (
36-
<Hero imageSrc="https://assets.nhs.uk/prod/images/S_0818_homepage_hero_1_F0147446.width-1000.jpg" />
37+
<Hero imageSrc="https://assets.nhs.uk/prod/images/S_0818_homepage_hero_1_F0147446.width-1000.jpg">
38+
<Hero.Heading>We&apos;re here for you.</Hero.Heading>
39+
<Hero.Text>Helping you take control of your health and wellbeing.</Hero.Text>
40+
</Hero>
3741
),
3842
};

‎stories/Content Presentation/Icons.stories.tsx‎

Lines changed: 40 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,46 @@ import {
1414
const meta: Meta = {
1515
title: 'Content Presentation/Icons',
1616
};
17+
1718
export default meta;
1819
type Story = StoryObj<Element>;
1920

20-
export const ArrowLeft: Story = { render: (args) => <ArrowLeftIcon /> };
21-
export const ArrowRight: Story = { render: (args) => <ArrowRightIcon /> };
22-
export const ArrowRightCircle: Story = { render: (args) => <ArrowRightCircleIcon /> };
23-
export const ChevronRightCircle: Story = { render: (args) => <ChevronRightCircleIcon /> };
24-
export const Cross: Story = { render: (args) => <CrossIcon /> };
25-
export const Search: Story = { render: (args) => <SearchIcon /> };
26-
export const Tick: Story = { render: (args) => <TickIcon /> };
27-
export const User: Story = { render: (args) => <UserIcon /> };
21+
export const ArrowLeft: Story = {
22+
name: 'Arrow left',
23+
render: (args) => <ArrowLeftIcon />,
24+
};
25+
26+
export const ArrowRight: Story = {
27+
name: 'Arrow right',
28+
render: (args) => <ArrowRightIcon />,
29+
};
30+
31+
export const ArrowRightCircle: Story = {
32+
name: 'Arrow right circle',
33+
render: (args) => <ArrowRightCircleIcon />,
34+
};
35+
36+
export const ChevronRightCircle: Story = {
37+
name: 'Chevron right circle',
38+
render: (args) => <ChevronRightCircleIcon />,
39+
};
40+
41+
export const Cross: Story = {
42+
name: 'Cross',
43+
render: (args) => <CrossIcon />,
44+
};
45+
46+
export const Search: Story = {
47+
name: 'Search',
48+
render: (args) => <SearchIcon />,
49+
};
50+
51+
export const Tick: Story = {
52+
name: 'Tick',
53+
render: (args) => <TickIcon />,
54+
};
55+
56+
export const User: Story = {
57+
name: 'User',
58+
render: (args) => <UserIcon />,
59+
};

‎stories/Content Presentation/Images.stories.tsx‎

Lines changed: 37 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,49 @@ import { Images } from '#components/content-presentation/images/index.js';
55
const meta: Meta<typeof Images> = {
66
title: 'Content Presentation/Images',
77
component: Images,
8+
};
9+
10+
export default meta;
11+
type Story = StoryObj<typeof Images>;
12+
13+
export const Default: Story = {
14+
name: 'Image default',
815
args: {
9-
src: 'https://assets.nhs.uk/prod/images/S_1017_allergic-conjunctivitis_M15.2e16d0ba.fill-320x213.jpg',
10-
alt: 'Picture of allergic conjunctivitis',
11-
sizes: '(min-width: 1020px) 320px, (min-width: 768px) 50vw, 100vw',
16+
src: 'https://assets.nhs.uk/prod/images/A_0218_exercise-main_FKW1X7.width-690.jpg',
17+
caption:
18+
'No specific amount of time is recommended, but a typical training session could take less than 20 minutes.',
19+
},
20+
};
21+
22+
export const WithSrcSet: Story = {
23+
name: 'Image with srcset',
24+
args: {
25+
src: 'https://service-manual.nhs.uk/assets/image-example-stretch-marks-600w.jpg',
26+
sizes: '(max-width: 768px) 100vw, 66vw',
1227
srcSet:
13-
'https://assets.nhs.uk/prod/images/S_1017_allergic-conjunctivitis_M15.2e16d0ba.fill-640x427.jpg 640w, https://assets.nhs.uk/prod/images/S_1017_allergic-conjunctivitis_M15.2e16d0ba.fill-767x511.jpg 767w',
28+
'https://service-manual.nhs.uk/assets/image-example-stretch-marks-600w.jpg 600w, https://service-manual.nhs.uk/assets/image-example-stretch-marks-1000w.jpg 1000w',
29+
caption:
30+
'Stretch marks can be pink, red, brown, black, silver or purple. They usually start off darker and fade over time.',
1431
},
1532
};
16-
export default meta;
17-
type Story = StoryObj<typeof Images>;
1833

19-
export const ImageWithCaption: Story = {
34+
export const WithSrcSetAltText: Story = {
35+
name: 'Image with srcset and alt text',
2036
args: {
21-
caption: 'Caption for image',
37+
src: 'https://service-manual.nhs.uk/assets/image-example-stretch-marks-600w.jpg',
38+
sizes: '(max-width: 768px) 100vw, 66vw',
39+
srcSet:
40+
'https://service-manual.nhs.uk/assets/image-example-stretch-marks-600w.jpg 600w, https://service-manual.nhs.uk/assets/image-example-stretch-marks-1000w.jpg 1000w',
41+
alt: "Close-up of a person's tummy showing a number of creases in the skin under their belly button. Shown on light brown skin.",
42+
caption:
43+
'Stretch marks can be pink, red, brown, black, silver or purple. They usually start off darker and fade over time.',
2244
},
2345
};
2446

25-
export const ImageWithoutCaption: Story = {};
47+
export const WithoutCaption: Story = {
48+
name: 'Image without caption',
49+
args: {
50+
src: 'https://service-manual.nhs.uk/assets/image-example-stretch-marks-600w.jpg',
51+
alt: "Close-up of a person's tummy showing a number of creases in the skin under their belly button. Shown on light brown skin.",
52+
},
53+
};

‎stories/Content Presentation/InsetText.stories.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
33
import { InsetText } from '#components/content-presentation/inset-text/index.js';
44

55
const meta: Meta<typeof InsetText> = {
6-
title: 'Content Presentation/InsetText',
6+
title: 'Content Presentation/Inset text',
77
component: InsetText,
88
render: (args) => (
99
<InsetText {...args}>
@@ -17,7 +17,8 @@ const meta: Meta<typeof InsetText> = {
1717
</InsetText>
1818
),
1919
};
20+
2021
export default meta;
2122
type Story = StoryObj<typeof InsetText>;
2223

23-
export const Standard: Story = {};
24+
export const Default: Story = {};

‎stories/Content Presentation/NotificationBanner.stories.tsx‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,15 @@ import { NotificationBanner } from '#components/content-presentation/notificatio
1515
* - `NotificationBanner.Link`
1616
*/
1717
const meta: Meta<typeof NotificationBanner> = {
18-
title: 'Content Presentation/Notification Banner',
18+
title: 'Content Presentation/Notification banner',
1919
component: NotificationBanner,
2020
};
21+
2122
export default meta;
2223
type Story = StoryObj<typeof NotificationBanner>;
2324

24-
export const StandardPanel: Story = {
25-
args: {},
25+
export const Default: Story = {
26+
name: 'Notification banner default',
2627
render: (args) => (
2728
<NotificationBanner {...args}>
2829
<NotificationBanner.Heading>
@@ -32,7 +33,8 @@ export const StandardPanel: Story = {
3233
),
3334
};
3435

35-
export const SuccessPanel: Story = {
36+
export const Success: Story = {
37+
name: 'Notification banner success',
3638
args: {
3739
success: true,
3840
},
@@ -48,8 +50,8 @@ export const SuccessPanel: Story = {
4850
),
4951
};
5052

51-
export const StandardPanelWithLink: Story = {
52-
args: {},
53+
export const WithLink: Story = {
54+
name: 'Notification banner with link',
5355
render: (args) => (
5456
<NotificationBanner {...args}>
5557
<NotificationBanner.Heading>
@@ -60,7 +62,8 @@ export const StandardPanelWithLink: Story = {
6062
),
6163
};
6264

63-
export const StandardPanelWithCustomTitle: Story = {
65+
export const WithCustomTitle: Story = {
66+
name: 'Notification banner with custom title',
6467
args: {
6568
title: 'Important Message',
6669
},
@@ -72,8 +75,8 @@ export const StandardPanelWithCustomTitle: Story = {
7275
),
7376
};
7477

75-
export const StandardPanelWithCustomTitleElement: Story = {
76-
args: {},
78+
export const WithCustomTitleElement: Story = {
79+
name: 'Notification banner with custom title element',
7780
render: (args) => (
7881
<NotificationBanner {...args}>
7982
<NotificationBanner.Title>
@@ -85,8 +88,8 @@ export const StandardPanelWithCustomTitleElement: Story = {
8588
),
8689
};
8790

88-
export const StandardPanelWithList: Story = {
89-
args: {},
91+
export const WithList: Story = {
92+
name: 'Notification banner with list',
9093
render: (args) => (
9194
<NotificationBanner {...args}>
9295
<NotificationBanner.Heading>4 files uploaded</NotificationBanner.Heading>
@@ -108,8 +111,8 @@ export const StandardPanelWithList: Story = {
108111
),
109112
};
110113

111-
export const StandardPanelWithLotsOfContent: Story = {
112-
args: {},
114+
export const WithLotsOfContent: Story = {
115+
name: 'Notification banner with lots of content',
113116
render: (args) => (
114117
<NotificationBanner {...args}>
115118
<NotificationBanner.Heading>

‎stories/Content Presentation/Panel.stories.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,12 @@ const meta: Meta<typeof Panel> = {
77
title: 'Content Presentation/Panel',
88
component: Panel,
99
};
10+
1011
export default meta;
1112
type Story = StoryObj<typeof Panel>;
1213

13-
export const StandardPanel: Story = {
14+
export const Default: Story = {
15+
name: 'Panel default',
1416
render: (args) => (
1517
<Panel {...args}>
1618
<Panel.Title>Booking complete</Panel.Title>

‎stories/Content Presentation/SummaryList.stories.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Card } from '#components/navigation/card/index.js';
55
import { BodyText } from '#components/typography/BodyText.js';
66

77
const meta: Meta<typeof SummaryList> = {
8-
title: 'Content Presentation/SummaryList',
8+
title: 'Content Presentation/Summary list',
99
component: SummaryList,
1010
argTypes: {
1111
noBorder: {
@@ -14,10 +14,11 @@ const meta: Meta<typeof SummaryList> = {
1414
},
1515
},
1616
};
17+
1718
export default meta;
1819
type Story = StoryObj<typeof SummaryList>;
1920

20-
export const Standard: Story = {
21+
export const Default: Story = {
2122
name: 'Summary list default',
2223
render: (args) => (
2324
<SummaryList {...args}>

0 commit comments

Comments
 (0)