Skip to content

Commit 114be98

Browse files
colinrotherhamcolinrotherham
committed
Add small form control examples
1 parent 24ce121 commit 114be98

File tree

2 files changed

+158
-0
lines changed

2 files changed

+158
-0
lines changed

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,50 @@ export const WithHintText: Story = {
8989
),
9090
};
9191

92+
export const Small: Story = {
93+
args: {
94+
small: true,
95+
},
96+
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>
104+
),
105+
};
106+
107+
export const SmallWithHintText: Story = {
108+
args: {
109+
legend: 'How do you want to sign in?',
110+
hint: undefined,
111+
small: true,
112+
},
113+
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>
133+
),
134+
};
135+
92136
export const WithDisabledItem: Story = {
93137
render: (args) => (
94138
<form>

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

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,120 @@ export const RadiosWithHintsOnItems: Story = {
122122
),
123123
};
124124

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

0 commit comments

Comments
 (0)