Skip to content

Commit 32b4952

Browse files
ThomasThomas
Thomas
authored and
Thomas
committed
Re-add panel and promo stories
1 parent 572ffe0 commit 32b4952

File tree

2 files changed

+160
-0
lines changed

2 files changed

+160
-0
lines changed

‎stories/Panel.stories.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/* eslint-disable import/no-extraneous-dependencies */
2+
import React from 'react';
3+
import { Panel } from '../src';
4+
5+
export const Standard = () => (
6+
<Panel>
7+
<h3>Live Well</h3>
8+
<p>Advice, tips and tools to help you make the best choices about your health and wellbeing</p>
9+
</Panel>
10+
);
11+
12+
export const WithLabel = () => (
13+
<Panel label="Live well">
14+
<p>Advice, tips and tools to help you make the best choices about your health and wellbeing</p>
15+
</Panel>
16+
);
17+
18+
export const GreyPanel = () => (
19+
<Panel grey>
20+
<p>Advice, tips and tools to help you make the best choices about your health and wellbeing</p>
21+
</Panel>
22+
);
23+
24+
export const PanelGroup = () => (
25+
<>
26+
<Panel.Group>
27+
<Panel>
28+
<h3>Eat well</h3>
29+
<p>All you need to know about the major food groups and a healthy, balanced diet</p>
30+
</Panel>
31+
<Panel>
32+
<h3>Healthy weight</h3>
33+
<p>
34+
Check your BMI using our healthy weight calculator and find out if you&apos;re a healthy
35+
weight
36+
</p>
37+
</Panel>
38+
</Panel.Group>
39+
<Panel.Group>
40+
<Panel>
41+
<h3>Excercise</h3>
42+
<p>
43+
Programmes, workouts and tips to get you moving and improve your fitness and wellbeing
44+
</p>
45+
</Panel>
46+
<Panel>
47+
<h3>Sleep and tiredness</h3>
48+
<p>Find out how to sleep well and the common lifestyle factors that are making you tired</p>
49+
</Panel>
50+
</Panel.Group>
51+
</>
52+
);
53+
54+
export default {
55+
title: 'Components/Panel',
56+
component: Panel,
57+
};

‎stories/Promo.stories.tsx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
/* eslint-disable import/no-extraneous-dependencies */
2+
import React from 'react';
3+
import { Promo } from '../src';
4+
5+
export const Standard = () => (
6+
<Promo href="https://www.nhs.uk">
7+
<Promo.Heading>Save a life: give blood</Promo.Heading>
8+
<Promo.Description>
9+
Please register today. Donating blood is easy, and saves lives.
10+
</Promo.Description>
11+
</Promo>
12+
);
13+
14+
export const WithImage = () => (
15+
<Promo
16+
href="https://www.nhs.uk"
17+
imageSrc="https://assets.nhs.uk/prod/images/MS_1018_give_blood.2e16d0ba.fill-2400x1350.jpg"
18+
imageProps={{ alt: '' }}
19+
>
20+
<Promo.Heading>Save a life: give blood</Promo.Heading>
21+
<Promo.Description>
22+
Please register today. Donating blood is easy, and saves lives.
23+
</Promo.Description>
24+
</Promo>
25+
);
26+
27+
export const WithNoDescription = () => (
28+
<Promo
29+
href="https://www.nhs.uk"
30+
imageSrc="https://assets.nhs.uk/prod/images/MS_1018_give_blood.2e16d0ba.fill-2400x1350.jpg"
31+
imageProps={{ alt: '' }}
32+
>
33+
<Promo.Heading>Save a life: give blood</Promo.Heading>
34+
</Promo>
35+
);
36+
37+
export const SmallPromo = () => (
38+
<Promo
39+
small
40+
href="https://www.nhs.uk"
41+
imageSrc="https://assets.nhs.uk/prod/images/MS_1018_give_blood.2e16d0ba.fill-2400x1350.jpg"
42+
imageProps={{ alt: '' }}
43+
>
44+
<Promo.Heading>Access your GP record</Promo.Heading>
45+
<Promo.Description>
46+
Please register today. Donating blood is easy, and saves lives.
47+
</Promo.Description>
48+
</Promo>
49+
);
50+
51+
export const PromoGroup = () => (
52+
<>
53+
<Promo.Group>
54+
<Promo
55+
href="https://www.nhs.uk"
56+
imageSrc="https://assets.nhs.uk/prod/images/MS_1018_give_blood.2e16d0ba.fill-2400x1350.jpg"
57+
imageProps={{ alt: '' }}
58+
>
59+
<Promo.Heading>Save a life: give blood</Promo.Heading>
60+
<Promo.Description>
61+
Please register today. Donating blood is easy, and saves lives.
62+
</Promo.Description>
63+
</Promo>
64+
<Promo
65+
href="https://www.nhs.uk"
66+
imageSrc="https://assets.nhs.uk/prod/images/MS_1018_give_blood.2e16d0ba.fill-2400x1350.jpg"
67+
imageProps={{ alt: '' }}
68+
>
69+
<Promo.Heading>Save a life: give blood</Promo.Heading>
70+
<Promo.Description>
71+
Please register today. Donating blood is easy, and saves lives.
72+
</Promo.Description>
73+
</Promo>
74+
</Promo.Group>
75+
<Promo.Group>
76+
<Promo
77+
href="https://www.nhs.uk"
78+
imageSrc="https://assets.nhs.uk/prod/images/MS_1018_give_blood.2e16d0ba.fill-2400x1350.jpg"
79+
imageProps={{ alt: '' }}
80+
>
81+
<Promo.Heading>Save a life: give blood</Promo.Heading>
82+
<Promo.Description>
83+
Please register today. Donating blood is easy, and saves lives.
84+
</Promo.Description>
85+
</Promo>
86+
<Promo
87+
href="https://www.nhs.uk"
88+
imageSrc="https://assets.nhs.uk/prod/images/MS_1018_give_blood.2e16d0ba.fill-2400x1350.jpg"
89+
imageProps={{ alt: '' }}
90+
>
91+
<Promo.Heading>Save a life: give blood</Promo.Heading>
92+
<Promo.Description>
93+
Please register today. Donating blood is easy, and saves lives.
94+
</Promo.Description>
95+
</Promo>
96+
</Promo.Group>
97+
</>
98+
);
99+
100+
export default {
101+
title: 'Components/Promo',
102+
component: Promo,
103+
};

0 commit comments

Comments
 (0)