Skip to content

Commit c7741b6

Browse files
colinrotherhamcolinrotherham
committed
Remove unnecessary wrappers
1 parent f3c59d0 commit c7741b6

File tree

3 files changed

+77
-105
lines changed

3 files changed

+77
-105
lines changed

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

Lines changed: 55 additions & 65 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,39 +65,35 @@ 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

9288
export const WithDisabledItem: Story = {
9389
render: (args) => (
94-
<form>
95-
<Checkboxes {...args}>
96-
<Checkboxes.Item value="british">British</Checkboxes.Item>
97-
<Checkboxes.Item value="irish">Irish</Checkboxes.Item>
98-
<Checkboxes.Item value="other" disabled>
99-
Citizen of another country
100-
</Checkboxes.Item>
101-
</Checkboxes>
102-
</form>
90+
<Checkboxes {...args}>
91+
<Checkboxes.Item value="british">British</Checkboxes.Item>
92+
<Checkboxes.Item value="irish">Irish</Checkboxes.Item>
93+
<Checkboxes.Item value="other" disabled>
94+
Citizen of another country
95+
</Checkboxes.Item>
96+
</Checkboxes>
10397
),
10498
};
10599

@@ -109,13 +103,11 @@ export const WithConditionalContent: Story = {
109103
hint: 'Select all that apply',
110104
},
111105
render: (args) => (
112-
<form>
113-
<Checkboxes {...args}>
114-
<Checkboxes.Item conditional={<p>This includes rocks and earth.</p>} value="mines">
115-
Waste from mines or quarries
116-
</Checkboxes.Item>
117-
</Checkboxes>
118-
</form>
106+
<Checkboxes {...args}>
107+
<Checkboxes.Item conditional={<p>This includes rocks and earth.</p>} value="mines">
108+
Waste from mines or quarries
109+
</Checkboxes.Item>
110+
</Checkboxes>
119111
),
120112
};
121113

@@ -125,17 +117,15 @@ export const WithExclusiveNoneOption: Story = {
125117
hint: 'Select all the symptoms you have',
126118
},
127119
render: (args) => (
128-
<form>
129-
<Checkboxes {...args}>
130-
<Checkboxes.Item value="sore-throat">Sore throat</Checkboxes.Item>
131-
<Checkboxes.Item value="runny-nose">Runny nose</Checkboxes.Item>
132-
<Checkboxes.Item value="muscle-pain">Muscle or joint pain</Checkboxes.Item>
133-
<Checkboxes.Divider />
134-
<Checkboxes.Item value="none" exclusive>
135-
None
136-
</Checkboxes.Item>
137-
</Checkboxes>
138-
</form>
120+
<Checkboxes {...args}>
121+
<Checkboxes.Item value="sore-throat">Sore throat</Checkboxes.Item>
122+
<Checkboxes.Item value="runny-nose">Runny nose</Checkboxes.Item>
123+
<Checkboxes.Item value="muscle-pain">Muscle or joint pain</Checkboxes.Item>
124+
<Checkboxes.Divider />
125+
<Checkboxes.Item value="none" exclusive>
126+
None
127+
</Checkboxes.Item>
128+
</Checkboxes>
139129
),
140130
};
141131

@@ -148,7 +138,7 @@ export const WithError: Story = {
148138
// eslint-disable-next-line react-hooks/rules-of-hooks
149139
const [error, setError] = useState('Please select an option');
150140
return (
151-
<form>
141+
<>
152142
<Checkboxes error={error} {...args}>
153143
<Checkboxes.Item value="animal">Waste from animal carcasses</Checkboxes.Item>
154144
<Checkboxes.Item value="mines">Waste from mines or quarries</Checkboxes.Item>
@@ -159,7 +149,7 @@ export const WithError: Story = {
159149
value={error}
160150
onChange={(e) => setError(e.currentTarget.value)}
161151
/>
162-
</form>
152+
</>
163153
);
164154
},
165155
name: 'With Error (String)',
@@ -204,7 +194,7 @@ export const NoIDSupplied: Story = {
204194
}, []);
205195

206196
return (
207-
<form style={{ padding: 20 }}>
197+
<>
208198
<h2>Scenario: No ID Supplied</h2>
209199
<h5>Expected Behaviour</h5>
210200
<ul className="nhsuk-hint">
@@ -244,7 +234,7 @@ export const NoIDSupplied: Story = {
244234
<Checkboxes.Item ref={checkbox2Ref}>Box 2</Checkboxes.Item>
245235
<Checkboxes.Item ref={checkbox3Ref}>Box 3</Checkboxes.Item>
246236
</Checkboxes>
247-
</form>
237+
</>
248238
);
249239
},
250240
};
@@ -288,7 +278,7 @@ export const NameSupplied: Story = {
288278
}, []);
289279

290280
return (
291-
<form style={{ padding: 20 }}>
281+
<>
292282
<h2>Scenario: Name Supplied</h2>
293283
<h5>Expected Behaviour</h5>
294284
<ul className="nhsuk-hint">
@@ -328,7 +318,7 @@ export const NameSupplied: Story = {
328318
<Checkboxes.Item ref={checkbox2Ref}>Box 2</Checkboxes.Item>
329319
<Checkboxes.Item ref={checkbox3Ref}>Box 3</Checkboxes.Item>
330320
</Checkboxes>
331-
</form>
321+
</>
332322
);
333323
},
334324
};
@@ -372,7 +362,7 @@ export const IDPrefixSupplied: Story = {
372362
}, []);
373363

374364
return (
375-
<form style={{ padding: 20 }}>
365+
<>
376366
<h2>Scenario: ID Prefix Supplied</h2>
377367
<h5>Expected Behaviour</h5>
378368
<ul className="nhsuk-hint">
@@ -413,7 +403,7 @@ export const IDPrefixSupplied: Story = {
413403
<Checkboxes.Item ref={checkbox2Ref}>Box 2</Checkboxes.Item>
414404
<Checkboxes.Item ref={checkbox3Ref}>Box 3</Checkboxes.Item>
415405
</Checkboxes>
416-
</form>
406+
</>
417407
);
418408
},
419409
};
@@ -457,7 +447,7 @@ export const IDPrefixAndNameSupplied: Story = {
457447
}, []);
458448

459449
return (
460-
<form style={{ padding: 20 }}>
450+
<>
461451
<h2>Scenario: ID Prefix and Name Supplied</h2>
462452
<h5>Expected Behaviour</h5>
463453
<ul className="nhsuk-hint">
@@ -498,7 +488,7 @@ export const IDPrefixAndNameSupplied: Story = {
498488
<Checkboxes.Item ref={checkbox2Ref}>Box 2</Checkboxes.Item>
499489
<Checkboxes.Item ref={checkbox3Ref}>Box 3</Checkboxes.Item>
500490
</Checkboxes>
501-
</form>
491+
</>
502492
);
503493
},
504494
};
@@ -531,7 +521,7 @@ export const OnChangeAndOnInputHandlers: Story = {
531521
};
532522

533523
return (
534-
<form style={{ padding: 20 }}>
524+
<>
535525
<h2>Scenario: onChange and onInput handlers are bound without any other props</h2>
536526
<h5>Expected Behaviour</h5>
537527
<ul className="nhsuk-hint">
@@ -559,7 +549,7 @@ export const OnChangeAndOnInputHandlers: Story = {
559549
<li key={index}>{event}</li>
560550
))}
561551
</ul>
562-
</form>
552+
</>
563553
);
564554
},
565555
};

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

Lines changed: 16 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ type Story = StoryObj<typeof DateInput>;
1616

1717
export const Standard: Story = {
1818
render: (args) => (
19-
<div style={{ padding: 20 }}>
19+
<>
2020
<h2>Scenario: onChange and onInput handlers are bound without any other props</h2>
2121
<h5>Expected Behaviour</h5>
2222
<ul className="nhsuk-hint">
@@ -25,13 +25,13 @@ export const Standard: Story = {
2525
</ul>
2626
<h5>Component</h5>
2727
<DateInput onChange={(e) => console.log(e.target.value)} {...args} />
28-
</div>
28+
</>
2929
),
3030
};
3131

3232
export const StandardWithError: Story = {
3333
render: (args) => (
34-
<div style={{ padding: 20 }}>
34+
<>
3535
<h2>Scenario: onChange and onInput handlers are bound without any other props</h2>
3636
<h5>Expected Behaviour</h5>
3737
<ul className="nhsuk-hint">
@@ -55,22 +55,19 @@ export const StandardWithError: Story = {
5555
<DateInput.Month error={false} />
5656
<DateInput.Year error={false} />
5757
</DateInput>
58-
</div>
58+
</>
5959
),
6060
};
6161

6262
export const PrePopulatedIndividualComponents: Story = {
6363
render: (args) => {
6464
const defaultValue = { day: '20', month: '09', year: '1996' };
6565
return (
66-
<div style={{ padding: 20 }}>
67-
<h5>Component</h5>
68-
<DateInput {...args}>
69-
<DateInput.Day defaultValue={defaultValue.day} />
70-
<DateInput.Month defaultValue={defaultValue.month} />
71-
<DateInput.Year defaultValue={defaultValue.year} />
72-
</DateInput>
73-
</div>
66+
<DateInput {...args}>
67+
<DateInput.Day defaultValue={defaultValue.day} />
68+
<DateInput.Month defaultValue={defaultValue.month} />
69+
<DateInput.Year defaultValue={defaultValue.year} />
70+
</DateInput>
7471
);
7572
},
7673
};
@@ -84,12 +81,7 @@ export const PrePopulatedWrapper: Story = {
8481
},
8582
},
8683
render: (args) => {
87-
return (
88-
<div style={{ padding: 20 }}>
89-
<h5>Component</h5>
90-
<DateInput {...args} />
91-
</div>
92-
);
84+
return <DateInput {...args} />;
9385
},
9486
};
9587

@@ -103,14 +95,11 @@ export const ControlledElementIndividualComponents: Story = {
10395
},
10496
render: ({ value, ...args }) => {
10597
return (
106-
<div style={{ padding: 20 }}>
107-
<h5>Component</h5>
108-
<DateInput {...args}>
109-
<DateInput.Day value={value?.day} />
110-
<DateInput.Month value={value?.month} />
111-
<DateInput.Year value={value?.year} />
112-
</DateInput>
113-
</div>
98+
<DateInput {...args}>
99+
<DateInput.Day value={value?.day} />
100+
<DateInput.Month value={value?.month} />
101+
<DateInput.Year value={value?.year} />
102+
</DateInput>
114103
);
115104
},
116105
};
@@ -124,12 +113,7 @@ export const ControlledElementWrapper: Story = {
124113
},
125114
},
126115
render: (args) => {
127-
return (
128-
<div style={{ padding: 20 }}>
129-
<h5>Component</h5>
130-
<DateInput {...args} />
131-
</div>
132-
);
116+
return <DateInput {...args} />;
133117
},
134118
};
135119

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

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -69,14 +69,12 @@ export const RadiosWithConditionalContent: Story = {
6969
);
7070

7171
return (
72-
<form style={{ padding: 20 }}>
73-
<Radios {...args}>
74-
<Radios.Item value="yes" conditional={impairmentsForm}>
75-
Patient requires an impairment to be added
76-
</Radios.Item>
77-
<Radios.Item value="no">Patient would prefer not to say</Radios.Item>
78-
</Radios>
79-
</form>
72+
<Radios {...args}>
73+
<Radios.Item value="yes" conditional={impairmentsForm}>
74+
Patient requires an impairment to be added
75+
</Radios.Item>
76+
<Radios.Item value="no">Patient would prefer not to say</Radios.Item>
77+
</Radios>
8078
);
8179
},
8280
};

0 commit comments

Comments
 (0)