Skip to content

Commit 78e9909

Browse files
TomdangoTomdango
committed
Add Storybook examples
1 parent d3c5072 commit 78e9909

File tree

6 files changed

+57
-43
lines changed

6 files changed

+57
-43
lines changed

‎src/components/date-input/DateInput.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -98,15 +98,15 @@ DateInputInput.defaultProps = {
9898
pattern: '[0-9]*',
9999
};
100100

101-
const DateInputDay: React.FC<HTMLProps<HTMLInputElement>> = props => (
101+
const DateInputDay: React.FC<Omit<DateInputInputProps, 'dateInputType'>> = props => (
102102
<DateInputInput dateInputType="Day" {...props} />
103103
);
104104

105-
const DateInputMonth: React.FC<HTMLProps<HTMLInputElement>> = props => (
105+
const DateInputMonth: React.FC<Omit<DateInputInputProps, 'dateInputType'>> = props => (
106106
<DateInputInput dateInputType="Month" {...props} />
107107
);
108108

109-
const DateInputYear: React.FC<HTMLProps<HTMLInputElement>> = props => (
109+
const DateInputYear: React.FC<Omit<DateInputInputProps, 'dateInputType'>> = props => (
110110
<DateInputInput dateInputType="Year" {...props} />
111111
);
112112

‎stories/Checkboxes.stories.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,11 @@ stories
1212
<Form>
1313
<Fieldset aria-describedby="nationality-hint">
1414
<Fieldset.Legend>What is your nationality?</Fieldset.Legend>
15-
<Hint id="nationality-hint">
16-
If you have more than 1 nationality, select all options that are relevant to you.
17-
</Hint>
18-
<Checkboxes name="nationality" id="nationality">
15+
<Checkboxes
16+
name="nationality"
17+
id="nationality"
18+
hint="If you have more than 1 nationality, select all options that are relevant to you."
19+
>
1920
<Checkboxes.Box value="british">British</Checkboxes.Box>
2021
<Checkboxes.Box value="irish">Irish</Checkboxes.Box>
2122
<Checkboxes.Box value="other">Citizen of another country</Checkboxes.Box>
@@ -66,8 +67,7 @@ stories
6667
<Fieldset.Legend isPageHeading>
6768
Which types of waste do you transport regularly?
6869
</Fieldset.Legend>
69-
<Hint id="waste-hint">Select all that apply</Hint>
70-
<Checkboxes id="waste" name="waste">
70+
<Checkboxes id="waste" name="waste" hint="Select all that apply">
7171
<Checkboxes.Box value="animal">Waste from animal carcasses</Checkboxes.Box>
7272
<Checkboxes.Box value="mines">Waste from mines or quarries</Checkboxes.Box>
7373
<Checkboxes.Box value="farm">Farm or agricultural waste</Checkboxes.Box>
@@ -84,8 +84,7 @@ stories
8484
<Fieldset.Legend isPageHeading>
8585
Which types of waste do you transport regularly?
8686
</Fieldset.Legend>
87-
<Hint id="waste-hint">Select all that apply</Hint>
88-
<Checkboxes error={errorToggle} id="waste" name="waste">
87+
<Checkboxes error={errorToggle} id="waste" name="waste" hint="Select all that apply">
8988
<Checkboxes.Box value="animal">Waste from animal carcasses</Checkboxes.Box>
9089
<Checkboxes.Box value="mines">Waste from mines or quarries</Checkboxes.Box>
9190
<Checkboxes.Box value="farm">Farm or agricultural waste</Checkboxes.Box>
@@ -113,8 +112,7 @@ stories
113112
<Fieldset.Legend isPageHeading>
114113
Which types of waste do you transport regularly?
115114
</Fieldset.Legend>
116-
<Hint id="waste-hint">Select all that apply</Hint>
117-
<Checkboxes id="waste" name="waste" error={error}>
115+
<Checkboxes id="waste" name="waste" hint="Select all that apply" error={error}>
118116
<Checkboxes.Box value="animal">Waste from animal carcasses</Checkboxes.Box>
119117
<Checkboxes.Box value="mines">Waste from mines or quarries</Checkboxes.Box>
120118
<Checkboxes.Box value="farm">Farm or agricultural waste</Checkboxes.Box>

‎stories/Fieldset.stories.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,9 @@ stories
1717
<Fieldset>
1818
<Fieldset.Legend isPageHeading>What is your address?</Fieldset.Legend>
1919
</Fieldset>
20+
))
21+
.add('With Size', () => (
22+
<Fieldset>
23+
<Fieldset.Legend size="m">What is your address?</Fieldset.Legend>
24+
</Fieldset>
2025
));

‎stories/Input.stories.tsx‎

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -9,55 +9,52 @@ const stories = storiesOf('Input', module);
99
stories
1010
.addDecorator(centered)
1111
.add('Standard', () => (
12-
<Input id="input-example" name="test-name">
13-
National Insurance Number
14-
</Input>
12+
<Input id="input-example" name="test-name" label="National Insurance Number" />
1513
))
1614
.add('With autoComplete attribute', () => (
17-
<Input id="input-with-autocomplete-attribute" name="postcode" autoComplete="postal-code">
18-
Postcode
19-
</Input>
15+
<Input
16+
id="input-with-autocomplete-attribute"
17+
name="postcode"
18+
autoComplete="postal-code"
19+
label="Postcode"
20+
/>
2021
))
2122
.add('With hint text', () => (
2223
<Input
2324
id="input-with-hint-text"
2425
name="test-name-2"
26+
label="National Insurance Number"
2527
hint="It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
26-
>
27-
National Insurance Number
28-
</Input>
28+
/>
2929
))
3030
.add('With error (Boolean)', () => (
3131
<Form>
3232
<Input
3333
id="input-with-error-message"
3434
name="test-name-3"
35+
label="National Insurance Number"
3536
error
3637
hint="It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
37-
>
38-
National Insurance Number
39-
</Input>
38+
/>
4039
</Form>
4140
))
4241
.add('With error (String)', () => (
4342
<Form>
4443
<Input
4544
id="input-with-error-message"
4645
name="test-name-3"
46+
label="National Insurance Number"
4747
error="Error message goes here"
4848
hint="It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
49-
>
50-
National Insurance Number
51-
</Input>
49+
/>
5250
</Form>
5351
))
5452
.add('With width modifier', () => (
5553
<Input
5654
hint="It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’."
55+
label="National Insurance Number"
5756
width="10"
58-
>
59-
National Insurance Number
60-
</Input>
57+
/>
6158
))
6259
.add('Multiple Error States', () => {
6360
const [firstName, setFirstName] = useState<string>('');

‎stories/Label.stories.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,5 @@ stories
1010
.addDecorator(centered)
1111
.add('Standard', () => <Label>National Insurance Number</Label>)
1212
.add('Bold', () => <Label bold>National Insurance Number</Label>)
13-
.add('Page Heading', () => <Label isPageHeading>National Insurance Number</Label>);
13+
.add('Page Heading', () => <Label isPageHeading>National Insurance Number</Label>)
14+
.add('With Size', () => <Label size="m">National Insurance Number</Label>);

‎stories/Radios.stories.tsx‎

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import React, { MouseEvent } from 'react';
33
import { storiesOf } from '@storybook/react';
44
import centered from '@storybook/addon-centered';
5-
import { Radios, Form, Fieldset, Hint, Button, Input } from '../src';
5+
import { Radios, Form, Fieldset, Button, Input } from '../src';
66

77
const stories = storiesOf('Radios', module);
88

@@ -12,8 +12,10 @@ stories
1212
<Form>
1313
<Fieldset>
1414
<Fieldset.Legend>Have you changed your name?</Fieldset.Legend>
15-
<Hint>This includes charging your last name or spelling your name differently.</Hint>
16-
<Radios name="example">
15+
<Radios
16+
name="example"
17+
hint="This includes charging your last name or spelling your name differently."
18+
>
1719
<Radios.Radio id="example-1" value="yes">
1820
Yes
1921
</Radios.Radio>
@@ -28,8 +30,11 @@ stories
2830
<Form>
2931
<Fieldset>
3032
<Fieldset.Legend>Have you changed your name?</Fieldset.Legend>
31-
<Hint>This includes charging your last name or spelling your name differently.</Hint>
32-
<Radios name="example" inline>
33+
<Radios
34+
name="example"
35+
inline
36+
hint="This includes charging your last name or spelling your name differently."
37+
>
3338
<Radios.Radio id="example-1" value="yes">
3439
Yes
3540
</Radios.Radio>
@@ -44,8 +49,10 @@ stories
4449
<Form>
4550
<Fieldset>
4651
<Fieldset.Legend>Have you changed your name?</Fieldset.Legend>
47-
<Hint>This includes charging your last name or spelling your name differently.</Hint>
48-
<Radios name="example">
52+
<Radios
53+
name="example"
54+
hint="This includes charging your last name or spelling your name differently."
55+
>
4956
<Radios.Radio disabled id="example-1" value="yes">
5057
Yes
5158
</Radios.Radio>
@@ -106,8 +113,11 @@ stories
106113
<Form>
107114
<Fieldset>
108115
<Fieldset.Legend>Have you changed your name?</Fieldset.Legend>
109-
<Hint>This includes charging your last name or spelling your name differently.</Hint>
110-
<Radios name="example" error={error}>
116+
<Radios
117+
name="example"
118+
error={error}
119+
hint="This includes changing your last name or spelling your name differently."
120+
>
111121
<Radios.Radio id="example-1" value="yes">
112122
Yes
113123
</Radios.Radio>
@@ -135,8 +145,11 @@ stories
135145
<Form>
136146
<Fieldset>
137147
<Fieldset.Legend>Have you changed your name?</Fieldset.Legend>
138-
<Hint>This includes charging your last name or spelling your name differently.</Hint>
139-
<Radios name="example" error={error}>
148+
<Radios
149+
name="example"
150+
error={error}
151+
hint="This includes charging your last name or spelling your name differently."
152+
>
140153
<Radios.Radio id="example-1" value="yes">
141154
Yes
142155
</Radios.Radio>

0 commit comments

Comments
 (0)