Skip to content

Commit 5f025aa

Browse files
colinrotherhamcolinrotherham
committed
Add small form control examples
1 parent 90bf06b commit 5f025aa

File tree

2 files changed

+152
-0
lines changed

2 files changed

+152
-0
lines changed

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,46 @@ export const WithHintText: Story = {
6767
),
6868
};
6969

70+
export const Small: Story = {
71+
args: {
72+
small: true,
73+
},
74+
render: (args) => (
75+
<Checkboxes small {...args}>
76+
<Checkboxes.Item value="british">British</Checkboxes.Item>
77+
<Checkboxes.Item value="irish">Irish</Checkboxes.Item>
78+
<Checkboxes.Item value="other">Citizen of another country</Checkboxes.Item>
79+
</Checkboxes>
80+
),
81+
};
82+
83+
export const SmallWithHintText: Story = {
84+
args: {
85+
legend: 'How do you want to sign in?',
86+
hint: undefined,
87+
small: true,
88+
},
89+
render: (args) => (
90+
<Checkboxes {...args}>
91+
<Checkboxes.Item
92+
name="gateway"
93+
type="checkbox"
94+
value="gov-gateway"
95+
hint="You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before."
96+
>
97+
Sign in with Government Gateway
98+
</Checkboxes.Item>
99+
<Checkboxes.Item
100+
name="verify"
101+
value="nhsuk-verify"
102+
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."
103+
>
104+
Sign in with NHS.UK login
105+
</Checkboxes.Item>
106+
</Checkboxes>
107+
),
108+
};
109+
70110
export const WithDisabledItem: Story = {
71111
render: (args) => (
72112
<Checkboxes {...args}>

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

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,118 @@ export const RadiosWithHintsOnItems: Story = {
120120
),
121121
};
122122

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

0 commit comments

Comments
 (0)