Skip to content

Commit f98d12a

Browse files
colinrotherhamcolinrotherham
committed
Update form examples with isPageHeading 
1 parent 4be2977 commit f98d12a

File tree

8 files changed

+61
-90
lines changed

8 files changed

+61
-90
lines changed

‎stories/Form Elements/Checkboxes.stories.tsx‎

Lines changed: 8 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export const Standard: Story = {
4848
<form>
4949
<Checkboxes
5050
legend="What is your nationality?"
51-
legendProps={{ size: 'l' }}
51+
legendProps={{ isPageHeading: true, size: 'l' }}
5252
hint="If you have more than 1 nationality, select all options that are relevant to you"
5353
idPrefix={args.idPrefix}
5454
name="nationality"
@@ -65,7 +65,10 @@ export const Standard: Story = {
6565
export const WithHintText: Story = {
6666
render: (args) => (
6767
<form>
68-
<Checkboxes legend="How do you want to sign in?" legendProps={{ size: 'l' }}>
68+
<Checkboxes
69+
legend="How do you want to sign in?"
70+
legendProps={{ isPageHeading: true, size: 'l' }}
71+
>
6972
<Checkboxes.Item
7073
id="government-gateway"
7174
name="gateway"
@@ -107,7 +110,7 @@ export const WithConditionalContent: Story = {
107110
<form>
108111
<Checkboxes
109112
legend="What types of waste do you transport regularly?"
110-
legendProps={{ size: 'l' }}
113+
legendProps={{ isPageHeading: true, size: 'l' }}
111114
hint="Select all that apply"
112115
id="waste"
113116
name="waste"
@@ -120,30 +123,12 @@ export const WithConditionalContent: Story = {
120123
),
121124
};
122125

123-
export const WithLegendAsPageHeading: Story = {
124-
render: (args) => (
125-
<form>
126-
<Checkboxes
127-
legend="Which types of waste do you transport regularly?"
128-
legendProps={{ isPageHeading: true, size: 'l' }}
129-
hint="Select all that apply"
130-
id="waste"
131-
name="waste"
132-
>
133-
<Checkboxes.Item value="animal">Waste from animal carcasses</Checkboxes.Item>
134-
<Checkboxes.Item value="mines">Waste from mines or quarries</Checkboxes.Item>
135-
<Checkboxes.Item value="farm">Farm or agricultural waste</Checkboxes.Item>
136-
</Checkboxes>
137-
</form>
138-
),
139-
};
140-
141126
export const WithExclusiveNoneOption: Story = {
142127
render: (args) => (
143128
<form>
144129
<Checkboxes
145130
legend="Do you have any of these symptoms?"
146-
legendProps={{ size: 'l' }}
131+
legendProps={{ isPageHeading: true, size: 'l' }}
147132
hint="Select all the symptoms you have"
148133
id="symptoms"
149134
name="symptoms"
@@ -168,7 +153,7 @@ export const WithError: Story = {
168153
<form>
169154
<Checkboxes
170155
legend="Which types of waste do you transport regularly?"
171-
legendProps={{ size: 'l' }}
156+
legendProps={{ isPageHeading: true, size: 'l' }}
172157
hint="Select all that apply"
173158
error={error}
174159
id="waste"

‎stories/Form Elements/DateInput.stories.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export const Standard: Story = {
2121
<h5>Component</h5>
2222
<DateInput
2323
legend="What is your date of birth?"
24-
legendProps={{ size: 'l' }}
24+
legendProps={{ isPageHeading: true, size: 'l' }}
2525
hint="For example, 15 3 1984"
2626
onChange={(e) => console.log(e.target.value)}
2727
/>
@@ -41,7 +41,7 @@ export const StandardWithError: Story = {
4141
<h5>Component</h5>
4242
<DateInput
4343
legend="What is your date of birth?"
44-
legendProps={{ size: 'l' }}
44+
legendProps={{ isPageHeading: true, size: 'l' }}
4545
hint="For example, 15 3 1984"
4646
error="Enter your date of birth"
4747
onChange={(e) => console.log(e.target.value)}
@@ -51,7 +51,7 @@ export const StandardWithError: Story = {
5151
<DateInput
5252
hint="For example, 15 3 1984"
5353
legend="What is your date of birth?"
54-
legendProps={{ size: 'l' }}
54+
legendProps={{ isPageHeading: true, size: 'l' }}
5555
error="Date of birth must include a day"
5656
onChange={(e) => console.log(e.target.value)}
5757
>
@@ -71,7 +71,7 @@ export const PrePopulatedIndividualComponents: Story = {
7171
<h5>Component</h5>
7272
<DateInput
7373
legend="What is your date of birth?"
74-
legendProps={{ size: 'l' }}
74+
legendProps={{ isPageHeading: true, size: 'l' }}
7575
hint="For example, 15 3 1984"
7676
>
7777
<DateInput.Day defaultValue={defaultValue.day} />
@@ -91,7 +91,7 @@ export const PrePopulatedWrapper: Story = {
9191
<h5>Component</h5>
9292
<DateInput
9393
legend="What is your date of birth?"
94-
legendProps={{ size: 'l' }}
94+
legendProps={{ isPageHeading: true, size: 'l' }}
9595
hint="For example, 15 3 1984"
9696
defaultValue={defaultValue}
9797
/>
@@ -108,7 +108,7 @@ export const ControlledElementIndividualComponents: Story = {
108108
<h5>Component</h5>
109109
<DateInput
110110
legend="What is your date of birth?"
111-
legendProps={{ size: 'l' }}
111+
legendProps={{ isPageHeading: true, size: 'l' }}
112112
hint="For example, 15 3 1984"
113113
>
114114
<DateInput.Day value={value.day} />
@@ -128,7 +128,7 @@ export const ControlledElementWrapper: Story = {
128128
<h5>Component</h5>
129129
<DateInput
130130
legend="What is your date of birth?"
131-
legendProps={{ size: 'l' }}
131+
legendProps={{ isPageHeading: true, size: 'l' }}
132132
hint="For example, 15 3 1984"
133133
value={value}
134134
/>
@@ -148,7 +148,7 @@ export const ChangeableControlledElement: Story = {
148148
return (
149149
<DateInput
150150
legend="What is your date of birth?"
151-
legendProps={{ size: 'l' }}
151+
legendProps={{ isPageHeading: true, size: 'l' }}
152152
hint="For example, 15 3 1984"
153153
value={value}
154154
onChange={(e) => setValue(e.currentTarget.value)}

‎stories/Form Elements/Fieldset.stories.tsx‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { Fieldset, TextInput } from '#components';
2020
* const Element = () => {
2121
* return (
2222
* <Fieldset>
23-
* <Fieldset.Legend size="l">What is your address?</Fieldset.Legend>
23+
* <Fieldset.Legend isPageHeading size="l">What is your address?</Fieldset.Legend>
2424
* </Fieldset>
2525
* );
2626
* }
@@ -36,7 +36,9 @@ type Story = StoryObj<typeof Fieldset>;
3636
export const Standard: Story = {
3737
render: (args) => (
3838
<Fieldset>
39-
<Fieldset.Legend size="l">What is your address?</Fieldset.Legend>
39+
<Fieldset.Legend isPageHeading size="l">
40+
What is your address?
41+
</Fieldset.Legend>
4042
<TextInput
4143
label="Address line 1"
4244
id="address-line-1"
@@ -67,19 +69,13 @@ export const Standard: Story = {
6769
),
6870
};
6971

70-
export const WithLegendAsAPageHeading: Story = {
71-
render: (args) => (
72-
<Fieldset>
73-
<Fieldset.Legend isPageHeading>What is your address?</Fieldset.Legend>
74-
</Fieldset>
75-
),
76-
};
77-
7872
export const WithCustomLegendSizeS: Story = {
7973
name: 'With Bold Text (S)',
8074
render: (args) => (
8175
<Fieldset>
82-
<Fieldset.Legend size="s">What is your address?</Fieldset.Legend>
76+
<Fieldset.Legend isPageHeading size="s">
77+
What is your address?
78+
</Fieldset.Legend>
8379
</Fieldset>
8480
),
8581
};
@@ -88,7 +84,9 @@ export const WithCustomLegendSizeM: Story = {
8884
name: 'With Custom Size (M)',
8985
render: (args) => (
9086
<Fieldset>
91-
<Fieldset.Legend size="m">What is your address?</Fieldset.Legend>
87+
<Fieldset.Legend isPageHeading size="m">
88+
What is your address?
89+
</Fieldset.Legend>
9290
</Fieldset>
9391
),
9492
};
@@ -97,7 +95,9 @@ export const WithCustomLegendSizeL: Story = {
9795
name: 'With Custom Size (L)',
9896
render: (args) => (
9997
<Fieldset>
100-
<Fieldset.Legend size="l">What is your address?</Fieldset.Legend>
98+
<Fieldset.Legend isPageHeading size="l">
99+
What is your address?
100+
</Fieldset.Legend>
101101
</Fieldset>
102102
),
103103
};
@@ -106,7 +106,9 @@ export const WithCustomLegendSizeXL: Story = {
106106
name: 'With Custom Size (XL)',
107107
render: (args) => (
108108
<Fieldset>
109-
<Fieldset.Legend size="xl">What is your address?</Fieldset.Legend>
109+
<Fieldset.Legend isPageHeading size="xl">
110+
What is your address?
111+
</Fieldset.Legend>
110112
</Fieldset>
111113
),
112114
};

‎stories/Form Elements/Label.stories.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const meta: Meta<typeof Label> = {
77
args: {
88
children: 'National Insurance Number',
99
size: undefined,
10-
isPageHeading: false,
10+
isPageHeading: true,
1111
},
1212
argTypes: {
1313
size: { control: 'select', options: [undefined, 's', 'm', 'l', 'xl'] },
@@ -16,11 +16,9 @@ const meta: Meta<typeof Label> = {
1616
export default meta;
1717
type Story = StoryObj<typeof Label>;
1818

19-
export const Standard: Story = {};
20-
21-
export const AsPageHeading: Story = {
19+
export const Standard: Story = {
2220
args: {
23-
isPageHeading: true,
21+
size: 'l',
2422
},
2523
};
2624

‎stories/Form Elements/Radios.stories.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const StandardRadios: Story = {
1313
render: (args) => (
1414
<Radios
1515
legend="Have you changed your name?"
16-
legendProps={{ size: 'l' }}
16+
legendProps={{ isPageHeading: true, size: 'l' }}
1717
hint="This includes changing your last name or spelling your name differently"
1818
name="example"
1919
id="standard-example"
@@ -30,7 +30,7 @@ export const InlineRadios: Story = {
3030
render: (args) => (
3131
<Radios
3232
legend="Have you changed your name?"
33-
legendProps={{ size: 'l' }}
33+
legendProps={{ isPageHeading: true, size: 'l' }}
3434
hint="This includes changing your last name or spelling your name differently"
3535
name="example"
3636
id="inline-example"
@@ -48,7 +48,7 @@ export const DisabledRadios: Story = {
4848
render: (args) => (
4949
<Radios
5050
legend="Have you changed your name?"
51-
legendProps={{ size: 'l' }}
51+
legendProps={{ isPageHeading: true, size: 'l' }}
5252
hint="This includes changing your last name or spelling your name differently"
5353
name="example"
5454
id="disabled-example"
@@ -86,7 +86,7 @@ export const RadiosWithConditionalContent: Story = {
8686
<form style={{ padding: 20 }}>
8787
<Radios
8888
legend="Impairment requirement"
89-
legendProps={{ size: 'l' }}
89+
legendProps={{ isPageHeading: true, size: 'l' }}
9090
hint="Select relevant options"
9191
name="example"
9292
id="example-conditional"
@@ -107,7 +107,7 @@ export const RadiosWithADivider: Story = {
107107
render: (args) => (
108108
<Radios
109109
legend="How do you want to sign in?"
110-
legendProps={{ size: 'l' }}
110+
legendProps={{ isPageHeading: true, size: 'l' }}
111111
name="example"
112112
id="example-divider"
113113
>
@@ -123,7 +123,7 @@ export const RadiosWithHintsOnItems: Story = {
123123
render: (args) => (
124124
<Radios
125125
legend="How do you want to sign in?"
126-
legendProps={{ size: 'l' }}
126+
legendProps={{ isPageHeading: true, size: 'l' }}
127127
name="example"
128128
id="example-with-hints"
129129
>
@@ -160,7 +160,7 @@ export const RadiosWithError: Story = {
160160
<>
161161
<Radios
162162
legend="Have you changed your name?"
163-
legendProps={{ size: 'l' }}
163+
legendProps={{ isPageHeading: true, size: 'l' }}
164164
hint="This includes changing your last name or spelling your name differently"
165165
name="example-with-err-string"
166166
error={error}

‎stories/Form Elements/Select.stories.tsx‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,11 @@ type Story = StoryObj<typeof Select>;
1111

1212
export const Standard: Story = {
1313
render: (args) => (
14-
<Select label="Label text goes here" labelProps={{ size: 'l' }} defaultValue="2">
14+
<Select
15+
label="Label text goes here"
16+
labelProps={{ isPageHeading: true, size: 'l' }}
17+
defaultValue="2"
18+
>
1519
<Select.Option value="1">NHS.UK frontend option 1</Select.Option>
1620
<Select.Option value="2">NHS.UK frontend option 2</Select.Option>
1721
<Select.Option value="3" disabled>
@@ -23,7 +27,11 @@ export const Standard: Story = {
2327

2428
export const SelectWithHintText: Story = {
2529
render: (args) => (
26-
<Select label="Label text goes here" labelProps={{ size: 'l' }} hint="Hint text goes here">
30+
<Select
31+
label="Label text goes here"
32+
labelProps={{ isPageHeading: true, size: 'l' }}
33+
hint="Hint text goes here"
34+
>
2735
<Select.Option value="1">NHS.UK frontend option 1</Select.Option>
2836
<Select.Option value="2">NHS.UK frontend option 2</Select.Option>
2937
<Select.Option value="3">NHS.UK frontend option 3</Select.Option>
@@ -36,7 +44,11 @@ export const SelectWithError: Story = {
3644
const [error, setError] = useState<string>('Error message goes here');
3745
return (
3846
<>
39-
<Select label="Label text goes here" labelProps={{ size: 'l' }} error={error}>
47+
<Select
48+
label="Label text goes here"
49+
labelProps={{ isPageHeading: true, size: 'l' }}
50+
error={error}
51+
>
4052
<Select.Option value="1">NHS.UK frontend option 1</Select.Option>
4153
<Select.Option value="2">NHS.UK frontend option 2</Select.Option>
4254
<Select.Option value="3">NHS.UK frontend option 3</Select.Option>
@@ -56,7 +68,7 @@ export const SelectWithErrorAndHintString: Story = {
5668
<>
5769
<Select
5870
label="Label text goes here"
59-
labelProps={{ size: 'l' }}
71+
labelProps={{ isPageHeading: true, size: 'l' }}
6072
hint="Hint text goes here"
6173
error={error}
6274
>

‎stories/Form Elements/TextInput.stories.tsx‎

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ const meta: Meta<typeof TextInput> = {
88
id: 'input-example',
99
name: 'test-name',
1010
label: 'National Insurance number',
11+
labelProps: { isPageHeading: true, size: 'l' },
1112
},
1213
argTypes: {
1314
ref: { table: { disable: true } },
@@ -24,24 +25,6 @@ export const WithHintText: Story = {
2425
},
2526
};
2627

27-
export const WithLabelAsPageHeading: Story = {
28-
args: {
29-
labelProps: {
30-
isPageHeading: true,
31-
size: 'l',
32-
},
33-
hint: 'It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.',
34-
},
35-
parameters: {
36-
docs: {
37-
description: {
38-
story:
39-
'To be used when the input label should also be a page heading - such as when it is the main question on a page.',
40-
},
41-
},
42-
},
43-
};
44-
4528
export const WithError: Story = {
4629
args: {
4730
error: 'Error message goes here',

0 commit comments

Comments
 (0)