Skip to content

Commit b9432b6

Browse files
colinrotherhamcolinrotherham
committed
Remove unnecessary wrappers
1 parent f853f73 commit b9432b6

File tree

3 files changed

+105
-139
lines changed

3 files changed

+105
-139
lines changed

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

Lines changed: 77 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -51,13 +51,11 @@ type CheckboxState = {
5151

5252
export const Standard: Story = {
5353
render: (args) => (
54-
<form>
55-
<Checkboxes {...args}>
56-
<Checkboxes.Item value="british">British</Checkboxes.Item>
57-
<Checkboxes.Item value="irish">Irish</Checkboxes.Item>
58-
<Checkboxes.Item value="other">Citizen of another country</Checkboxes.Item>
59-
</Checkboxes>
60-
</form>
54+
<Checkboxes {...args}>
55+
<Checkboxes.Item value="british">British</Checkboxes.Item>
56+
<Checkboxes.Item value="irish">Irish</Checkboxes.Item>
57+
<Checkboxes.Item value="other">Citizen of another country</Checkboxes.Item>
58+
</Checkboxes>
6159
),
6260
};
6361

@@ -67,25 +65,23 @@ export const WithHintText: Story = {
6765
hint: undefined,
6866
},
6967
render: (args) => (
70-
<form>
71-
<Checkboxes {...args}>
72-
<Checkboxes.Item
73-
name="gateway"
74-
type="checkbox"
75-
value="gov-gateway"
76-
hint="You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before."
77-
>
78-
Sign in with Government Gateway
79-
</Checkboxes.Item>
80-
<Checkboxes.Item
81-
name="verify"
82-
value="nhsuk-verify"
83-
hint="You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
84-
>
85-
Sign in with NHS.UK login
86-
</Checkboxes.Item>
87-
</Checkboxes>
88-
</form>
68+
<Checkboxes {...args}>
69+
<Checkboxes.Item
70+
name="gateway"
71+
type="checkbox"
72+
value="gov-gateway"
73+
hint="You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before."
74+
>
75+
Sign in with Government Gateway
76+
</Checkboxes.Item>
77+
<Checkboxes.Item
78+
name="verify"
79+
value="nhsuk-verify"
80+
hint="You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
81+
>
82+
Sign in with NHS.UK login
83+
</Checkboxes.Item>
84+
</Checkboxes>
8985
),
9086
};
9187

@@ -94,13 +90,11 @@ export const Small: Story = {
9490
small: true,
9591
},
9692
render: (args) => (
97-
<form>
98-
<Checkboxes small {...args}>
99-
<Checkboxes.Item value="british">British</Checkboxes.Item>
100-
<Checkboxes.Item value="irish">Irish</Checkboxes.Item>
101-
<Checkboxes.Item value="other">Citizen of another country</Checkboxes.Item>
102-
</Checkboxes>
103-
</form>
93+
<Checkboxes small {...args}>
94+
<Checkboxes.Item value="british">British</Checkboxes.Item>
95+
<Checkboxes.Item value="irish">Irish</Checkboxes.Item>
96+
<Checkboxes.Item value="other">Citizen of another country</Checkboxes.Item>
97+
</Checkboxes>
10498
),
10599
};
106100

@@ -111,39 +105,35 @@ export const SmallWithHintText: Story = {
111105
small: true,
112106
},
113107
render: (args) => (
114-
<form>
115-
<Checkboxes {...args}>
116-
<Checkboxes.Item
117-
name="gateway"
118-
type="checkbox"
119-
value="gov-gateway"
120-
hint="You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before."
121-
>
122-
Sign in with Government Gateway
123-
</Checkboxes.Item>
124-
<Checkboxes.Item
125-
name="verify"
126-
value="nhsuk-verify"
127-
hint="You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
128-
>
129-
Sign in with NHS.UK login
130-
</Checkboxes.Item>
131-
</Checkboxes>
132-
</form>
108+
<Checkboxes {...args}>
109+
<Checkboxes.Item
110+
name="gateway"
111+
type="checkbox"
112+
value="gov-gateway"
113+
hint="You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before."
114+
>
115+
Sign in with Government Gateway
116+
</Checkboxes.Item>
117+
<Checkboxes.Item
118+
name="verify"
119+
value="nhsuk-verify"
120+
hint="You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
121+
>
122+
Sign in with NHS.UK login
123+
</Checkboxes.Item>
124+
</Checkboxes>
133125
),
134126
};
135127

136128
export const WithDisabledItem: Story = {
137129
render: (args) => (
138-
<form>
139-
<Checkboxes {...args}>
140-
<Checkboxes.Item value="british">British</Checkboxes.Item>
141-
<Checkboxes.Item value="irish">Irish</Checkboxes.Item>
142-
<Checkboxes.Item value="other" disabled>
143-
Citizen of another country
144-
</Checkboxes.Item>
145-
</Checkboxes>
146-
</form>
130+
<Checkboxes {...args}>
131+
<Checkboxes.Item value="british">British</Checkboxes.Item>
132+
<Checkboxes.Item value="irish">Irish</Checkboxes.Item>
133+
<Checkboxes.Item value="other" disabled>
134+
Citizen of another country
135+
</Checkboxes.Item>
136+
</Checkboxes>
147137
),
148138
};
149139

@@ -153,13 +143,11 @@ export const WithConditionalContent: Story = {
153143
hint: 'Select all that apply',
154144
},
155145
render: (args) => (
156-
<form>
157-
<Checkboxes {...args}>
158-
<Checkboxes.Item conditional={<p>This includes rocks and earth.</p>} value="mines">
159-
Waste from mines or quarries
160-
</Checkboxes.Item>
161-
</Checkboxes>
162-
</form>
146+
<Checkboxes {...args}>
147+
<Checkboxes.Item conditional={<p>This includes rocks and earth.</p>} value="mines">
148+
Waste from mines or quarries
149+
</Checkboxes.Item>
150+
</Checkboxes>
163151
),
164152
};
165153

@@ -169,17 +157,15 @@ export const WithExclusiveNoneOption: Story = {
169157
hint: 'Select all the symptoms you have',
170158
},
171159
render: (args) => (
172-
<form>
173-
<Checkboxes {...args}>
174-
<Checkboxes.Item value="sore-throat">Sore throat</Checkboxes.Item>
175-
<Checkboxes.Item value="runny-nose">Runny nose</Checkboxes.Item>
176-
<Checkboxes.Item value="muscle-pain">Muscle or joint pain</Checkboxes.Item>
177-
<Checkboxes.Divider />
178-
<Checkboxes.Item value="none" exclusive>
179-
None
180-
</Checkboxes.Item>
181-
</Checkboxes>
182-
</form>
160+
<Checkboxes {...args}>
161+
<Checkboxes.Item value="sore-throat">Sore throat</Checkboxes.Item>
162+
<Checkboxes.Item value="runny-nose">Runny nose</Checkboxes.Item>
163+
<Checkboxes.Item value="muscle-pain">Muscle or joint pain</Checkboxes.Item>
164+
<Checkboxes.Divider />
165+
<Checkboxes.Item value="none" exclusive>
166+
None
167+
</Checkboxes.Item>
168+
</Checkboxes>
183169
),
184170
};
185171

@@ -192,7 +178,7 @@ export const WithError: Story = {
192178
// eslint-disable-next-line react-hooks/rules-of-hooks
193179
const [error, setError] = useState('Please select an option');
194180
return (
195-
<form>
181+
<>
196182
<Checkboxes error={error} {...args}>
197183
<Checkboxes.Item value="animal">Waste from animal carcasses</Checkboxes.Item>
198184
<Checkboxes.Item value="mines">Waste from mines or quarries</Checkboxes.Item>
@@ -203,7 +189,7 @@ export const WithError: Story = {
203189
value={error}
204190
onChange={(e) => setError(e.currentTarget.value)}
205191
/>
206-
</form>
192+
</>
207193
);
208194
},
209195
name: 'With Error (String)',
@@ -248,7 +234,7 @@ export const NoIDSupplied: Story = {
248234
}, []);
249235

250236
return (
251-
<form style={{ padding: 20 }}>
237+
<>
252238
<h2>Scenario: No ID Supplied</h2>
253239
<h5>Expected Behaviour</h5>
254240
<ul className="nhsuk-hint">
@@ -288,7 +274,7 @@ export const NoIDSupplied: Story = {
288274
<Checkboxes.Item ref={checkbox2Ref}>Box 2</Checkboxes.Item>
289275
<Checkboxes.Item ref={checkbox3Ref}>Box 3</Checkboxes.Item>
290276
</Checkboxes>
291-
</form>
277+
</>
292278
);
293279
},
294280
};
@@ -332,7 +318,7 @@ export const NameSupplied: Story = {
332318
}, []);
333319

334320
return (
335-
<form style={{ padding: 20 }}>
321+
<>
336322
<h2>Scenario: Name Supplied</h2>
337323
<h5>Expected Behaviour</h5>
338324
<ul className="nhsuk-hint">
@@ -372,7 +358,7 @@ export const NameSupplied: Story = {
372358
<Checkboxes.Item ref={checkbox2Ref}>Box 2</Checkboxes.Item>
373359
<Checkboxes.Item ref={checkbox3Ref}>Box 3</Checkboxes.Item>
374360
</Checkboxes>
375-
</form>
361+
</>
376362
);
377363
},
378364
};
@@ -416,7 +402,7 @@ export const IDPrefixSupplied: Story = {
416402
}, []);
417403

418404
return (
419-
<form style={{ padding: 20 }}>
405+
<>
420406
<h2>Scenario: ID Prefix Supplied</h2>
421407
<h5>Expected Behaviour</h5>
422408
<ul className="nhsuk-hint">
@@ -457,7 +443,7 @@ export const IDPrefixSupplied: Story = {
457443
<Checkboxes.Item ref={checkbox2Ref}>Box 2</Checkboxes.Item>
458444
<Checkboxes.Item ref={checkbox3Ref}>Box 3</Checkboxes.Item>
459445
</Checkboxes>
460-
</form>
446+
</>
461447
);
462448
},
463449
};
@@ -501,7 +487,7 @@ export const IDPrefixAndNameSupplied: Story = {
501487
}, []);
502488

503489
return (
504-
<form style={{ padding: 20 }}>
490+
<>
505491
<h2>Scenario: ID Prefix and Name Supplied</h2>
506492
<h5>Expected Behaviour</h5>
507493
<ul className="nhsuk-hint">
@@ -542,7 +528,7 @@ export const IDPrefixAndNameSupplied: Story = {
542528
<Checkboxes.Item ref={checkbox2Ref}>Box 2</Checkboxes.Item>
543529
<Checkboxes.Item ref={checkbox3Ref}>Box 3</Checkboxes.Item>
544530
</Checkboxes>
545-
</form>
531+
</>
546532
);
547533
},
548534
};
@@ -575,7 +561,7 @@ export const OnChangeAndOnInputHandlers: Story = {
575561
};
576562

577563
return (
578-
<form style={{ padding: 20 }}>
564+
<>
579565
<h2>Scenario: onChange and onInput handlers are bound without any other props</h2>
580566
<h5>Expected Behaviour</h5>
581567
<ul className="nhsuk-hint">
@@ -603,7 +589,7 @@ export const OnChangeAndOnInputHandlers: Story = {
603589
<li key={index}>{event}</li>
604590
))}
605591
</ul>
606-
</form>
592+
</>
607593
);
608594
},
609595
};

0 commit comments

Comments
 (0)