Skip to content

Commit 94797b0

Browse files
colinrotherhamcolinrotherham
committed
Add small form control examples
1 parent e2e4e54 commit 94797b0

File tree

2 files changed

+177
-0
lines changed

2 files changed

+177
-0
lines changed

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

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,58 @@ export const WithHintText: Story = {
9393
),
9494
};
9595

96+
export const Small: Story = {
97+
render: (args) => (
98+
<form>
99+
<Checkboxes
100+
legend="What is your nationality?"
101+
legendProps={{ isPageHeading: true, size: 'm' }}
102+
hint="If you have more than 1 nationality, select all options that are relevant to you"
103+
idPrefix={args.idPrefix}
104+
name="nationality"
105+
id="nationality"
106+
small
107+
{...args}
108+
>
109+
<Checkboxes.Item value="british">British</Checkboxes.Item>
110+
<Checkboxes.Item value="irish">Irish</Checkboxes.Item>
111+
<Checkboxes.Item value="other">Citizen of another country</Checkboxes.Item>
112+
</Checkboxes>
113+
</form>
114+
),
115+
};
116+
117+
export const SmallWithHintText: Story = {
118+
render: (args) => (
119+
<form>
120+
<Checkboxes
121+
legend="How do you want to sign in?"
122+
legendProps={{ isPageHeading: true, size: 'm' }}
123+
small
124+
{...args}
125+
>
126+
<Checkboxes.Item
127+
id="government-gateway"
128+
name="gateway"
129+
type="checkbox"
130+
value="gov-gateway"
131+
hint="You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before."
132+
>
133+
Sign in with Government Gateway
134+
</Checkboxes.Item>
135+
<Checkboxes.Item
136+
id="nhsuk-login"
137+
name="verify"
138+
value="nhsuk-verify"
139+
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."
140+
>
141+
Sign in with NHS.UK login
142+
</Checkboxes.Item>
143+
</Checkboxes>
144+
</form>
145+
),
146+
};
147+
96148
export const WithDisabledItem: Story = {
97149
render: (args) => (
98150
<form>

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

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,131 @@ export const RadiosWithHintsOnItems: Story = {
129129
),
130130
};
131131

132+
export const SmallRadios: Story = {
133+
render: (args) => (
134+
<Radios
135+
legend="Have you changed your name?"
136+
legendProps={{ isPageHeading: true, size: 'm' }}
137+
hint="This includes changing your last name or spelling your name differently"
138+
name="example"
139+
id="standard-example"
140+
small
141+
{...args}
142+
>
143+
<Radios.Item value="yes">Yes</Radios.Item>
144+
<Radios.Item value="no" defaultChecked>
145+
No
146+
</Radios.Item>
147+
</Radios>
148+
),
149+
};
150+
151+
export const SmallInlineRadios: Story = {
152+
render: (args) => (
153+
<Radios
154+
legend="Have you changed your name?"
155+
legendProps={{ isPageHeading: true, size: 'm' }}
156+
hint="This includes changing your last name or spelling your name differently"
157+
name="example"
158+
id="inline-example"
159+
inline
160+
small
161+
{...args}
162+
>
163+
<Radios.Item value="yes">Yes</Radios.Item>
164+
<Radios.Item value="no" defaultChecked>
165+
No
166+
</Radios.Item>
167+
</Radios>
168+
),
169+
};
170+
171+
export const SmallRadiosWithConditionalContent: Story = {
172+
render: (args) => {
173+
const impairmentsForm = (
174+
<Checkboxes name="impairments" id="impairments">
175+
<Checkboxes.Item value="autism">Autism</Checkboxes.Item>
176+
<Checkboxes.Item value="developmental-conditions">
177+
Developmental conditions (excluding autism)
178+
</Checkboxes.Item>
179+
<Checkboxes.Item value="dementia">Dementia</Checkboxes.Item>
180+
<Checkboxes.Item value="learning-disability">Learning disability</Checkboxes.Item>
181+
<Checkboxes.Item value="mental-health-condition">Mental Health Condition</Checkboxes.Item>
182+
<Checkboxes.Item value="physical-disability">Physical disability</Checkboxes.Item>
183+
<Checkboxes.Item value="sensory-disability">
184+
Sensory disability - such as sight, hearing or verbal
185+
</Checkboxes.Item>
186+
<Checkboxes.Item value="long-term-condition">Long-term condition</Checkboxes.Item>
187+
</Checkboxes>
188+
);
189+
190+
return (
191+
<form style={{ padding: 20 }}>
192+
<Radios
193+
legend="Impairment requirement"
194+
legendProps={{ isPageHeading: true, size: 'm' }}
195+
hint="Select relevant options"
196+
name="example"
197+
id="example-conditional"
198+
small
199+
{...args}
200+
>
201+
<Radios.Item id="hello1" value="yes" conditional={impairmentsForm}>
202+
Patient requires an impairment to be added
203+
</Radios.Item>
204+
<Radios.Item id="hello2" value="no">
205+
Patient would prefer not to say
206+
</Radios.Item>
207+
</Radios>
208+
</form>
209+
);
210+
},
211+
};
212+
213+
export const SmallRadiosWithADivider: Story = {
214+
render: (args) => (
215+
<Radios
216+
legend="How do you want to sign in?"
217+
legendProps={{ isPageHeading: true, size: 'm' }}
218+
name="example"
219+
id="example-divider"
220+
small
221+
{...args}
222+
>
223+
<Radios.Item value="government-gateway">Use Government Gateway</Radios.Item>
224+
<Radios.Item value="nhsuk-login">Use NHS.UK login</Radios.Item>
225+
<Radios.Divider>or</Radios.Divider>
226+
<Radios.Item value="create-account">Create an account</Radios.Item>
227+
</Radios>
228+
),
229+
};
230+
231+
export const SmallRadiosWithHintsOnItems: Story = {
232+
render: (args) => (
233+
<Radios
234+
legend="How do you want to sign in?"
235+
legendProps={{ isPageHeading: true, size: 'm' }}
236+
name="example"
237+
id="example-with-hints"
238+
small
239+
{...args}
240+
>
241+
<Radios.Item
242+
value="government-gateway"
243+
hint="You&#39;ll have a user ID if you've registered for self-assessment or filed a tax return online before."
244+
>
245+
Use Government Gateway
246+
</Radios.Item>
247+
<Radios.Item
248+
value="nhsuk-login"
249+
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."
250+
>
251+
Use NHS.UK login
252+
</Radios.Item>
253+
</Radios>
254+
),
255+
};
256+
132257
export const DisabledRadios: Story = {
133258
render: (args) => (
134259
<Radios

0 commit comments

Comments
 (0)