Skip to content

Commit 9ee9c4f

Browse files
colinrotherhamcolinrotherham
committed
Update card examples
1 parent 998c3e7 commit 9ee9c4f

File tree

1 file changed

+138
-16
lines changed

1 file changed

+138
-16
lines changed

‎stories/Navigation/Card.stories.tsx‎

Lines changed: 138 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
import { type Meta, type StoryObj } from '@storybook/react-vite';
33

44
import { ChevronRightCircleIcon } from '#components/content-presentation/icons/individual/index.js';
5+
import { SummaryList } from '#components/content-presentation/summary-list/index.js';
56
import { Card } from '#components/navigation/card/index.js';
7+
import { BodyText } from '#components/typography/BodyText.js';
68

79
const meta: Meta<typeof Card> = {
810
title: 'Navigation/Card',
@@ -16,7 +18,9 @@ export const Standard: Story = {
1618
render: (args) => (
1719
<Card {...args}>
1820
<Card.Content>
19-
<Card.Heading>If you need help now but it&apos;s not an emergency</Card.Heading>
21+
<Card.Heading className="nhsuk-heading-m">
22+
If you need help now but it&apos;s not an emergency
23+
</Card.Heading>
2024
<Card.Description>
2125
Go to <a href="stories#">111.nhs.uk</a> or <a href="stories#">call 111</a>
2226
</Card.Description>
@@ -25,10 +29,7 @@ export const Standard: Story = {
2529
),
2630
};
2731

28-
export const ClickableCard: Story = {
29-
args: {
30-
clickable: true,
31-
},
32+
export const BasicWithHeadingLink: Story = {
3233
render: (args) => (
3334
<Card {...args}>
3435
<Card.Content>
@@ -43,6 +44,66 @@ export const ClickableCard: Story = {
4344
),
4445
};
4546

47+
export const BasicWithCustomHTML: Story = {
48+
render: (args) => (
49+
<Card {...args}>
50+
<Card.Content>
51+
<Card.Heading className="nhsuk-heading-m">Help from NHS 111</Card.Heading>
52+
<BodyText>
53+
If you&apos;re worried about a symptom and not sure what help you need, NHS 111 can tell
54+
you what to do next.
55+
</BodyText>
56+
<BodyText>
57+
Go to <a href="#">111.nhs.uk</a> or <a href="#">call 111</a>.
58+
</BodyText>
59+
<BodyText>For a life-threatening emergency call 999.</BodyText>
60+
</Card.Content>
61+
</Card>
62+
),
63+
};
64+
65+
export const BasicWithSummaryList: Story = {
66+
render: (args) => (
67+
<Card {...args}>
68+
<Card.Content>
69+
<Card.Heading className="nhsuk-heading-m">Help from NHS 111</Card.Heading>
70+
<SummaryList>
71+
<SummaryList.Row>
72+
<SummaryList.Key>Name</SummaryList.Key>
73+
<SummaryList.Value>Karen Francis</SummaryList.Value>
74+
</SummaryList.Row>
75+
<SummaryList.Row noBorder>
76+
<SummaryList.Key>Date of birth</SummaryList.Key>
77+
<SummaryList.Value>15 March 1984</SummaryList.Value>
78+
</SummaryList.Row>
79+
</SummaryList>
80+
</Card.Content>
81+
</Card>
82+
),
83+
};
84+
85+
export const BasicWithSummaryListAndHeadingLink: Story = {
86+
render: (args) => (
87+
<Card {...args}>
88+
<Card.Content>
89+
<Card.Heading className="nhsuk-heading-m">
90+
<Card.Link href="#">Help from NHS 111</Card.Link>
91+
</Card.Heading>
92+
<SummaryList>
93+
<SummaryList.Row>
94+
<SummaryList.Key>Name</SummaryList.Key>
95+
<SummaryList.Value>Karen Francis</SummaryList.Value>
96+
</SummaryList.Row>
97+
<SummaryList.Row noBorder>
98+
<SummaryList.Key>Date of birth</SummaryList.Key>
99+
<SummaryList.Value>15 March 1984</SummaryList.Value>
100+
</SummaryList.Row>
101+
</SummaryList>
102+
</Card.Content>
103+
</Card>
104+
),
105+
};
106+
46107
export const CardWithImage: Story = {
47108
args: {
48109
clickable: true,
@@ -72,7 +133,7 @@ export const FeatureCard: Story = {
72133
render: (args) => (
73134
<Card {...args}>
74135
<Card.Content>
75-
<Card.Heading>Feature card heading</Card.Heading>
136+
<Card.Heading className="nhsuk-heading-m">Feature card heading</Card.Heading>
76137
<Card.Description>Feature card description</Card.Description>
77138
</Card.Content>
78139
</Card>
@@ -86,7 +147,7 @@ export const FeatureCardWithList: Story = {
86147
render: (args) => (
87148
<Card {...args}>
88149
<Card.Content>
89-
<Card.Heading>Feature card heading</Card.Heading>
150+
<Card.Heading className="nhsuk-heading-m">Feature card heading</Card.Heading>
90151
<ul className="nhsuk-list nhsuk-list--border">
91152
<li>
92153
<a href="/conditions/abdominal-aortic-aneurysm/">AAA</a>
@@ -111,16 +172,53 @@ export const PrimaryCardWithChevron: Story = {
111172
render: (args) => (
112173
<Card {...args}>
113174
<Card.Content>
114-
<Card.Heading>
115-
<Card.Link href="#">Primary card heading</Card.Link>
175+
<Card.Heading className="nhsuk-heading-m">
176+
<Card.Link href="#">Breast screening</Card.Link>
116177
</Card.Heading>
117-
<Card.Description>Primary card description</Card.Description>
118178
<ChevronRightCircleIcon />
119179
</Card.Content>
120180
</Card>
121181
),
122182
};
123183

184+
export const PrimaryCardWithChevronAndDescription: Story = {
185+
args: {
186+
cardType: 'primary',
187+
clickable: true,
188+
},
189+
render: (args) => (
190+
<Card {...args}>
191+
<Card.Content>
192+
<Card.Heading className="nhsuk-heading-m">
193+
<Card.Link href="#">Introduction to care and support</Card.Link>
194+
</Card.Heading>
195+
<Card.Description>
196+
A quick guide for people who have care and support needs and their carers
197+
</Card.Description>
198+
<ChevronRightCircleIcon />
199+
</Card.Content>
200+
</Card>
201+
),
202+
};
203+
204+
export const ClickableCard: Story = {
205+
args: {
206+
clickable: true,
207+
},
208+
render: (args) => (
209+
<Card {...args}>
210+
<Card.Content>
211+
<Card.Heading className="nhsuk-heading-m">
212+
<Card.Link href="#">Introduction to care and support</Card.Link>
213+
</Card.Heading>
214+
<Card.Description>
215+
A quick guide for people who have care and support needs and their carers
216+
</Card.Description>
217+
</Card.Content>
218+
</Card>
219+
),
220+
};
221+
124222
export const SecondaryCard: Story = {
125223
args: {
126224
cardType: 'secondary',
@@ -129,10 +227,34 @@ export const SecondaryCard: Story = {
129227
render: (args) => (
130228
<Card {...args}>
131229
<Card.Content>
132-
<Card.Heading>
133-
<Card.Link href="#">Secondary card heading</Card.Link>
230+
<Card.Heading className="nhsuk-heading-m">
231+
<Card.Link href="#">Urgent and emergency care services</Card.Link>
134232
</Card.Heading>
135-
<Card.Description>Secondary card description</Card.Description>
233+
<Card.Description>
234+
Services the NHS provides if you need urgent or emergency medical help
235+
</Card.Description>
236+
</Card.Content>
237+
</Card>
238+
),
239+
};
240+
241+
export const SecondaryNonClickableWithCustomHTML: Story = {
242+
args: {
243+
cardType: 'secondary',
244+
},
245+
render: (args) => (
246+
<Card {...args}>
247+
<Card.Content>
248+
<Card.Heading className="nhsuk-u-font-size-22 nhsuk-u-margin-bottom-2">
249+
<Card.Link href="#">Why we are reinvesting in the NHS Prototype kit</Card.Link>
250+
</Card.Heading>
251+
<BodyText className="nhsuk-body-s nhsuk-u-margin-bottom-2">
252+
Services the NHS provides if you need urgent or emergency medical help
253+
</BodyText>
254+
<Card.Description>
255+
Frankie and Mike explain why we revived the NHS prototype kit, the benefits of prototyping
256+
in code and how digital teams in the NHS can get started using it.
257+
</Card.Description>
136258
</Card.Content>
137259
</Card>
138260
),
@@ -206,7 +328,7 @@ export const NonUrgentCareCard: Story = {
206328
},
207329
render: (args) => (
208330
<Card {...args}>
209-
<Card.Heading>Speak to a GP if:</Card.Heading>
331+
<Card.Heading className="nhsuk-heading-m">Speak to a GP if:</Card.Heading>
210332
<Card.Content>
211333
<ul>
212334
<li>you&apos;re not sure it&apos;s chickenpox</li>
@@ -231,7 +353,7 @@ export const UrgentCareCard: Story = {
231353
},
232354
render: (args) => (
233355
<Card {...args}>
234-
<Card.Heading>Ask for an urgent GP appointment if:</Card.Heading>
356+
<Card.Heading className="nhsuk-heading-m">Ask for an urgent GP appointment if:</Card.Heading>
235357
<Card.Content>
236358
<ul>
237359
<li>you&apos;re an adult and have chickenpox</li>
@@ -259,7 +381,7 @@ export const EmergencyCareCard: Story = {
259381
},
260382
render: (args) => (
261383
<Card {...args}>
262-
<Card.Heading>Call 999 or go to A&E now if:</Card.Heading>
384+
<Card.Heading className="nhsuk-heading-m">Call 999 or go to A&E now if:</Card.Heading>
263385
<Card.Content>
264386
<ul>
265387
<li>you or someone you know needs immediate help</li>

0 commit comments

Comments
 (0)