@utrecht/form-field-css 1.0.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +110 -0
- package/dist/index.js +1 -0
- package/package.json +11 -4
- package/src/_mixin.scss +146 -0
- package/src/index.scss +54 -0
- package/src/stories/_email.md +4 -0
- package/src/stories/_new-password.md +6 -0
- package/src/stories/_tel.md +4 -0
- package/src/stories/checkbox-group.stories.mdx +215 -0
- package/src/stories/checkbox.stories.mdx +136 -0
- package/src/stories/example.stories.mdx +292 -0
- package/src/stories/radio-group.stories.mdx +162 -0
- package/src/stories/readme.stories.mdx +6 -0
- package/src/stories/rtl.stories.mdx +404 -0
- package/src/stories/textbox.stories.mdx +128 -0
- package/src/stories/voorvoegsels-tabel-36.json +335 -0
- package/src/story-template.jsx +352 -0
- package/src/tokens.json +68 -0
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
{/* @license CC0-1.0 */}
|
|
2
|
+
|
|
3
|
+
import { Canvas, Meta, Story } from "@storybook/blocks";
|
|
4
|
+
import { argTypes, defaultArgs, exampleArgs, FormFieldCheckbox } from "../story-template";
|
|
5
|
+
import "../../../checkbox/src/index.scss";
|
|
6
|
+
import "../../../form-label/src/index.scss";
|
|
7
|
+
import "../index.scss";
|
|
8
|
+
|
|
9
|
+
export
|
|
10
|
+
|
|
11
|
+
<Meta
|
|
12
|
+
id="css-form-field--checkbox"
|
|
13
|
+
title="CSS Component/Form field/with one checkbox"
|
|
14
|
+
component={FormFieldCheckbox}
|
|
15
|
+
argTypes={argTypes}
|
|
16
|
+
args={defaultArgs}
|
|
17
|
+
parameters={{
|
|
18
|
+
status: {
|
|
19
|
+
type: "WORK IN PROGRESS",
|
|
20
|
+
},
|
|
21
|
+
}}
|
|
22
|
+
/>
|
|
23
|
+
|
|
24
|
+
# label
|
|
25
|
+
|
|
26
|
+
<Canvas>
|
|
27
|
+
<Story
|
|
28
|
+
name="label"
|
|
29
|
+
args={{
|
|
30
|
+
...exampleArgs,
|
|
31
|
+
id: "172cd71b-8854-41ee-bcdc-9c8ac856c5d1",
|
|
32
|
+
label: "Ik ga akkoord met de algemene voorwaarden",
|
|
33
|
+
type: "checkbox",
|
|
34
|
+
}}
|
|
35
|
+
>
|
|
36
|
+
{FormFieldCheckbox.bind({})}
|
|
37
|
+
</Story>
|
|
38
|
+
</Canvas>
|
|
39
|
+
|
|
40
|
+
# Form field with description
|
|
41
|
+
|
|
42
|
+
<Canvas>
|
|
43
|
+
<Story
|
|
44
|
+
name="description"
|
|
45
|
+
args={{
|
|
46
|
+
...exampleArgs,
|
|
47
|
+
id: "7cdd4f82-e7eb-4573-bad3-2b520aac504b",
|
|
48
|
+
label: "Ik ga akkoord met de algemene voorwaarden",
|
|
49
|
+
description: "U kunt ons echt vertrouwen!",
|
|
50
|
+
type: "checkbox",
|
|
51
|
+
}}
|
|
52
|
+
>
|
|
53
|
+
{FormFieldCheckbox.bind({})}
|
|
54
|
+
</Story>
|
|
55
|
+
</Canvas>
|
|
56
|
+
|
|
57
|
+
## Invalid
|
|
58
|
+
|
|
59
|
+
<Canvas>
|
|
60
|
+
<Story
|
|
61
|
+
name="invalid"
|
|
62
|
+
args={{
|
|
63
|
+
...exampleArgs,
|
|
64
|
+
id: "6cfb69fc-3a52-4fd8-b8a1-0c2d0dfb11ed",
|
|
65
|
+
label: "Ik ga akkoord met de algemene voorwaarden",
|
|
66
|
+
description: "U kunt ons echt vertrouwen!",
|
|
67
|
+
invalid: true,
|
|
68
|
+
required: true,
|
|
69
|
+
invalidDescription: "U moet akkoord gaan met de algemene voorwaarden, anders kunt u niet verder.",
|
|
70
|
+
type: "checkbox",
|
|
71
|
+
}}
|
|
72
|
+
>
|
|
73
|
+
{FormFieldCheckbox.bind({})}
|
|
74
|
+
</Story>
|
|
75
|
+
</Canvas>
|
|
76
|
+
|
|
77
|
+
## Right-to-left script
|
|
78
|
+
|
|
79
|
+
<Canvas>
|
|
80
|
+
<Story
|
|
81
|
+
name="Right-to-left script"
|
|
82
|
+
decorators={[
|
|
83
|
+
(Story) => (
|
|
84
|
+
<div lang="ar" dir="rtl">
|
|
85
|
+
{Story()}
|
|
86
|
+
</div>
|
|
87
|
+
),
|
|
88
|
+
]}
|
|
89
|
+
args={{
|
|
90
|
+
...exampleArgs,
|
|
91
|
+
id: "2d692d60-e111-4582-a487-385cdbd3f994",
|
|
92
|
+
label: "أوافق على الشروط",
|
|
93
|
+
description: "يمكنك حقا أن تثق بنا!",
|
|
94
|
+
invalid: true,
|
|
95
|
+
required: true,
|
|
96
|
+
invalidDescription: "يجب أن توافق على الشروط والأحكام وإلا فلن تتمكن من المتابعة.",
|
|
97
|
+
type: "checkbox",
|
|
98
|
+
}}
|
|
99
|
+
>
|
|
100
|
+
{FormFieldCheckbox.bind({})}
|
|
101
|
+
</Story>
|
|
102
|
+
</Canvas>
|
|
103
|
+
|
|
104
|
+
## Rich text description
|
|
105
|
+
|
|
106
|
+
<Canvas>
|
|
107
|
+
<Story
|
|
108
|
+
name="Rich text description"
|
|
109
|
+
args={{
|
|
110
|
+
...exampleArgs,
|
|
111
|
+
id: "f23a0d30-29b5-4e82-a6e5-7eb83e5cd47a",
|
|
112
|
+
description: (
|
|
113
|
+
<>
|
|
114
|
+
<p className="utrecht-paragraph">Your new password needs to meet these requirements:</p>
|
|
115
|
+
<ul className="utrecht-unordered-list">
|
|
116
|
+
<li>At least 1 character</li>
|
|
117
|
+
<li>No more than 2 characters</li>
|
|
118
|
+
<li>Use at least one uppercase letter and one lowercase letter.</li>
|
|
119
|
+
</ul>
|
|
120
|
+
</>
|
|
121
|
+
),
|
|
122
|
+
invalidDescription: (
|
|
123
|
+
<>
|
|
124
|
+
<p className="utrecht-paragraph">Your new password does not meet these requirements:</p>
|
|
125
|
+
<ul className="utrecht-unordered-list">
|
|
126
|
+
<li>Your password is too long.</li>
|
|
127
|
+
<li>Use at least one uppercase letter.</li>
|
|
128
|
+
</ul>
|
|
129
|
+
</>
|
|
130
|
+
),
|
|
131
|
+
type: "checkbox",
|
|
132
|
+
}}
|
|
133
|
+
>
|
|
134
|
+
{FormFieldCheckbox.bind({})}
|
|
135
|
+
</Story>
|
|
136
|
+
</Canvas>
|
|
@@ -0,0 +1,292 @@
|
|
|
1
|
+
{/* @license CC0-1.0 */}
|
|
2
|
+
|
|
3
|
+
import { Canvas, Description, Meta, Story } from "@storybook/blocks";
|
|
4
|
+
import emailDocs from "./_email.md";
|
|
5
|
+
import newPasswordDocs from "./_new-password.md";
|
|
6
|
+
import telDocs from "./_tel.md";
|
|
7
|
+
import voorvoegsels from "./voorvoegsels-tabel-36.json";
|
|
8
|
+
import achternaamDocs from "../../../textbox/_achternaam.md";
|
|
9
|
+
import naamDocs from "../../../textbox/_naam.md";
|
|
10
|
+
import postcodeDocs from "../../../textbox/_postcode.md";
|
|
11
|
+
import voornaamDocs from "../../../textbox/_voornaam.md";
|
|
12
|
+
import voorvoegselDocs from "../../../textbox/_voorvoegsel.md";
|
|
13
|
+
import { argTypes, defaultArgs, FormFieldExample } from "../story-template";
|
|
14
|
+
|
|
15
|
+
<Meta
|
|
16
|
+
id="css-form-field--examples"
|
|
17
|
+
title="CSS Component/Form field/Common examples"
|
|
18
|
+
component={FormFieldExample}
|
|
19
|
+
argTypes={argTypes}
|
|
20
|
+
args={defaultArgs}
|
|
21
|
+
parameters={{
|
|
22
|
+
status: {
|
|
23
|
+
type: "WORK IN PROGRESS",
|
|
24
|
+
},
|
|
25
|
+
}}
|
|
26
|
+
/>
|
|
27
|
+
|
|
28
|
+
# Common examples of form fields
|
|
29
|
+
|
|
30
|
+
## Naam
|
|
31
|
+
|
|
32
|
+
<Description>{naamDocs}</Description>
|
|
33
|
+
|
|
34
|
+
<Canvas>
|
|
35
|
+
<Story
|
|
36
|
+
name="Naam"
|
|
37
|
+
args={{
|
|
38
|
+
control: "text",
|
|
39
|
+
type: "text",
|
|
40
|
+
label: "Naam",
|
|
41
|
+
minLength: 1,
|
|
42
|
+
maxLength: 412, // 200 + 1 + 10 + 1 + 200,
|
|
43
|
+
required: true,
|
|
44
|
+
autoComplete: "name",
|
|
45
|
+
spellcheck: "false",
|
|
46
|
+
id: "4c6d647b-bacd-437f-b160-6304353ddbdd",
|
|
47
|
+
}}
|
|
48
|
+
parameters={{
|
|
49
|
+
chromatic: { disableSnapshot: true },
|
|
50
|
+
}}
|
|
51
|
+
>
|
|
52
|
+
{FormFieldExample.bind({})}
|
|
53
|
+
</Story>
|
|
54
|
+
</Canvas>
|
|
55
|
+
|
|
56
|
+
## Voornaam
|
|
57
|
+
|
|
58
|
+
<Description>{voornaamDocs}</Description>
|
|
59
|
+
|
|
60
|
+
<Canvas>
|
|
61
|
+
<Story
|
|
62
|
+
name="Voornaam"
|
|
63
|
+
args={{
|
|
64
|
+
control: "text",
|
|
65
|
+
type: "text",
|
|
66
|
+
label: "Voornaam",
|
|
67
|
+
required: true,
|
|
68
|
+
minLength: 1,
|
|
69
|
+
maxLength: 200,
|
|
70
|
+
spellcheck: "false",
|
|
71
|
+
autoComplete: "given-name",
|
|
72
|
+
id: "af0084ba-cef6-489d-a876-1da92277624c",
|
|
73
|
+
}}
|
|
74
|
+
parameters={{
|
|
75
|
+
chromatic: { disableSnapshot: true },
|
|
76
|
+
}}
|
|
77
|
+
>
|
|
78
|
+
{FormFieldExample.bind({})}
|
|
79
|
+
</Story>
|
|
80
|
+
</Canvas>
|
|
81
|
+
|
|
82
|
+
## Voornamen
|
|
83
|
+
|
|
84
|
+
<Canvas>
|
|
85
|
+
<Story
|
|
86
|
+
name="Voornamen"
|
|
87
|
+
args={{
|
|
88
|
+
control: "text",
|
|
89
|
+
type: "text",
|
|
90
|
+
label: "Voornaam (1 of meerdere)",
|
|
91
|
+
minLength: 1,
|
|
92
|
+
maxLength: 200,
|
|
93
|
+
spellcheck: "false",
|
|
94
|
+
required: true,
|
|
95
|
+
id: "8ad75c24-32b9-4558-9057-9b5b327f9b70",
|
|
96
|
+
}}
|
|
97
|
+
parameters={{
|
|
98
|
+
chromatic: { disableSnapshot: true },
|
|
99
|
+
}}
|
|
100
|
+
>
|
|
101
|
+
{FormFieldExample.bind({})}
|
|
102
|
+
</Story>
|
|
103
|
+
</Canvas>
|
|
104
|
+
|
|
105
|
+
## Achternaam
|
|
106
|
+
|
|
107
|
+
<Description>{achternaamDocs}</Description>
|
|
108
|
+
|
|
109
|
+
<Canvas>
|
|
110
|
+
<Story
|
|
111
|
+
name="Achternaam"
|
|
112
|
+
args={{
|
|
113
|
+
control: "text",
|
|
114
|
+
type: "text",
|
|
115
|
+
label: "Achternaam",
|
|
116
|
+
minLength: 1,
|
|
117
|
+
maxLength: 200,
|
|
118
|
+
required: true,
|
|
119
|
+
spellcheck: "false",
|
|
120
|
+
autoComplete: "family-name",
|
|
121
|
+
id: "12719913-e6d1-43a9-8068-239f609abea0",
|
|
122
|
+
}}
|
|
123
|
+
parameters={{
|
|
124
|
+
chromatic: { disableSnapshot: true },
|
|
125
|
+
}}
|
|
126
|
+
>
|
|
127
|
+
{FormFieldExample.bind({})}
|
|
128
|
+
</Story>
|
|
129
|
+
</Canvas>
|
|
130
|
+
|
|
131
|
+
## Voorvoegsel
|
|
132
|
+
|
|
133
|
+
<Description>{voorvoegselDocs}</Description>
|
|
134
|
+
|
|
135
|
+
<Canvas>
|
|
136
|
+
<Story
|
|
137
|
+
name="Voorvoegsel"
|
|
138
|
+
args={{
|
|
139
|
+
control: "text",
|
|
140
|
+
type: "text",
|
|
141
|
+
label: "Voorvoegsel",
|
|
142
|
+
minLength: 1,
|
|
143
|
+
maxLength: 10,
|
|
144
|
+
required: false,
|
|
145
|
+
spellcheck: "false",
|
|
146
|
+
datalist: voorvoegsels.map((item) => ({ label: item })),
|
|
147
|
+
id: "ac0c98d6-2ad1-453e-9e06-6b26a5f61546",
|
|
148
|
+
}}
|
|
149
|
+
parameters={{
|
|
150
|
+
chromatic: { disableSnapshot: true },
|
|
151
|
+
}}
|
|
152
|
+
>
|
|
153
|
+
{FormFieldExample.bind({})}
|
|
154
|
+
</Story>
|
|
155
|
+
</Canvas>
|
|
156
|
+
|
|
157
|
+
## Postcode
|
|
158
|
+
|
|
159
|
+
<Description>{postcodeDocs}</Description>
|
|
160
|
+
|
|
161
|
+
<Canvas>
|
|
162
|
+
<Story
|
|
163
|
+
name="Postcode"
|
|
164
|
+
args={{
|
|
165
|
+
control: "text",
|
|
166
|
+
type: "text",
|
|
167
|
+
label: "Postcode",
|
|
168
|
+
spellcheck: "false",
|
|
169
|
+
autoComplete: "postal-code",
|
|
170
|
+
id: "16e1fde4-94e2-4848-9cae-27679070bc93",
|
|
171
|
+
}}
|
|
172
|
+
parameters={{
|
|
173
|
+
chromatic: { disableSnapshot: true },
|
|
174
|
+
}}
|
|
175
|
+
>
|
|
176
|
+
{FormFieldExample.bind({})}
|
|
177
|
+
</Story>
|
|
178
|
+
</Canvas>
|
|
179
|
+
|
|
180
|
+
## Gebruikersnaam
|
|
181
|
+
|
|
182
|
+
<Canvas>
|
|
183
|
+
<Story
|
|
184
|
+
name="Gebruikersnaam"
|
|
185
|
+
args={{
|
|
186
|
+
control: "text",
|
|
187
|
+
type: "text",
|
|
188
|
+
label: "Gebruikersnaam",
|
|
189
|
+
spellcheck: "false",
|
|
190
|
+
autoComplete: "username",
|
|
191
|
+
id: "6b4dc32d-1a12-496b-bfe6-19470f48f156",
|
|
192
|
+
}}
|
|
193
|
+
parameters={{
|
|
194
|
+
chromatic: { disableSnapshot: true },
|
|
195
|
+
}}
|
|
196
|
+
>
|
|
197
|
+
{FormFieldExample.bind({})}
|
|
198
|
+
</Story>
|
|
199
|
+
</Canvas>
|
|
200
|
+
|
|
201
|
+
## Wachtwoord
|
|
202
|
+
|
|
203
|
+
<Canvas>
|
|
204
|
+
<Story
|
|
205
|
+
name="Wachtwoord"
|
|
206
|
+
args={{
|
|
207
|
+
control: "text",
|
|
208
|
+
type: "password",
|
|
209
|
+
label: "Wachtwoord",
|
|
210
|
+
autoComplete: "current-password",
|
|
211
|
+
spellcheck: "false",
|
|
212
|
+
id: "0e462594-7b98-4755-ad8e-3a661df6da05",
|
|
213
|
+
}}
|
|
214
|
+
parameters={{
|
|
215
|
+
chromatic: { disableSnapshot: true },
|
|
216
|
+
}}
|
|
217
|
+
>
|
|
218
|
+
{FormFieldExample.bind({})}
|
|
219
|
+
</Story>
|
|
220
|
+
</Canvas>
|
|
221
|
+
|
|
222
|
+
## E-mail
|
|
223
|
+
|
|
224
|
+
<Description>{emailDocs}</Description>
|
|
225
|
+
|
|
226
|
+
<Canvas>
|
|
227
|
+
<Story
|
|
228
|
+
name="E-mail"
|
|
229
|
+
args={{
|
|
230
|
+
control: "text",
|
|
231
|
+
type: "email",
|
|
232
|
+
label: "E-mailadres",
|
|
233
|
+
description: "Wij sturen op dit e-mailadres de ontvangstbevestiging en we nemen via e-mail contact met u op.",
|
|
234
|
+
required: true,
|
|
235
|
+
autoComplete: "email",
|
|
236
|
+
spellcheck: "false",
|
|
237
|
+
id: "ba119f18-ce9d-42d7-8d32-cdfbc6531137",
|
|
238
|
+
}}
|
|
239
|
+
parameters={{
|
|
240
|
+
chromatic: { disableSnapshot: true },
|
|
241
|
+
}}
|
|
242
|
+
>
|
|
243
|
+
{FormFieldExample.bind({})}
|
|
244
|
+
</Story>
|
|
245
|
+
</Canvas>
|
|
246
|
+
|
|
247
|
+
## Telefoonnummer
|
|
248
|
+
|
|
249
|
+
<Description>{telDocs}</Description>
|
|
250
|
+
|
|
251
|
+
<Canvas>
|
|
252
|
+
<Story
|
|
253
|
+
name="Telefoonnummer"
|
|
254
|
+
args={{
|
|
255
|
+
control: "text",
|
|
256
|
+
type: "tel",
|
|
257
|
+
label: "Telefoonnummer",
|
|
258
|
+
description: "Wij bellen u als de afspraak onverwacht niet door kan gaan. We sturen dan ook een e-mail.",
|
|
259
|
+
autoComplete: "tel",
|
|
260
|
+
spellcheck: "false",
|
|
261
|
+
id: "88b391aa-7b6b-4e86-8033-e810ee4e847e",
|
|
262
|
+
}}
|
|
263
|
+
parameters={{
|
|
264
|
+
chromatic: { disableSnapshot: true },
|
|
265
|
+
}}
|
|
266
|
+
>
|
|
267
|
+
{FormFieldExample.bind({})}
|
|
268
|
+
</Story>
|
|
269
|
+
</Canvas>
|
|
270
|
+
|
|
271
|
+
## Nieuw wachtwoord
|
|
272
|
+
|
|
273
|
+
<Description>{newPasswordDocs}</Description>
|
|
274
|
+
|
|
275
|
+
<Canvas>
|
|
276
|
+
<Story
|
|
277
|
+
name="Nieuw wachtwoord"
|
|
278
|
+
args={{
|
|
279
|
+
control: "text",
|
|
280
|
+
type: "password",
|
|
281
|
+
label: "Nieuw wachtwoord",
|
|
282
|
+
autoComplete: "new-password",
|
|
283
|
+
spellcheck: "false",
|
|
284
|
+
id: "6dcec3ba-eb91-4173-af55-1b229688d3f7",
|
|
285
|
+
}}
|
|
286
|
+
parameters={{
|
|
287
|
+
chromatic: { disableSnapshot: true },
|
|
288
|
+
}}
|
|
289
|
+
>
|
|
290
|
+
{FormFieldExample.bind({})}
|
|
291
|
+
</Story>
|
|
292
|
+
</Canvas>
|
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
{/* @license CC0-1.0 */}
|
|
2
|
+
|
|
3
|
+
import { Canvas, Meta, Story } from "@storybook/blocks";
|
|
4
|
+
import { argTypes, defaultArgs, exampleArgs, FormFieldRadioGroup } from "../story-template";
|
|
5
|
+
import "../../../checkbox/src/index.scss";
|
|
6
|
+
import "../../../form-label/src/index.scss";
|
|
7
|
+
import "../index.scss";
|
|
8
|
+
|
|
9
|
+
<Meta
|
|
10
|
+
id="css-form-field--radio-group"
|
|
11
|
+
title="CSS Component/Form field/with radio group"
|
|
12
|
+
component={FormFieldRadioGroup}
|
|
13
|
+
argTypes={argTypes}
|
|
14
|
+
args={defaultArgs}
|
|
15
|
+
parameters={{
|
|
16
|
+
status: {
|
|
17
|
+
type: "WORK IN PROGRESS",
|
|
18
|
+
},
|
|
19
|
+
}}
|
|
20
|
+
/>
|
|
21
|
+
|
|
22
|
+
# Form field with radio group
|
|
23
|
+
|
|
24
|
+
## with only a label
|
|
25
|
+
|
|
26
|
+
<Canvas>
|
|
27
|
+
<Story
|
|
28
|
+
name="label"
|
|
29
|
+
args={{
|
|
30
|
+
...exampleArgs,
|
|
31
|
+
name: "890a84a6-5088-47df-8f8e-4566d3bd42ad",
|
|
32
|
+
groupLabel: "Choose your option",
|
|
33
|
+
groupId: "115a159b-7527-452d-bcfc-f4770b30d00e",
|
|
34
|
+
options: [
|
|
35
|
+
{
|
|
36
|
+
id: "2185ffaa-0086-43f7-82ef-162d048df198",
|
|
37
|
+
value: "1",
|
|
38
|
+
label: "Option 1",
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
id: "c664343d-22d9-417d-a3ca-356e2d0774d5",
|
|
42
|
+
value: "2",
|
|
43
|
+
label: "Option 2",
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
id: "36242fff-3a06-48eb-8451-f32ffcd00f7a",
|
|
47
|
+
value: "3",
|
|
48
|
+
label: "Option 3",
|
|
49
|
+
},
|
|
50
|
+
],
|
|
51
|
+
}}
|
|
52
|
+
>
|
|
53
|
+
{FormFieldRadioGroup.bind({})}
|
|
54
|
+
</Story>
|
|
55
|
+
</Canvas>
|
|
56
|
+
|
|
57
|
+
## with heading as label
|
|
58
|
+
|
|
59
|
+
<Canvas>
|
|
60
|
+
<Story
|
|
61
|
+
name="Heading as label"
|
|
62
|
+
args={{
|
|
63
|
+
...exampleArgs,
|
|
64
|
+
name: "2ce3b9f7-5ade-4048-8719-e4b57fc0fd4f",
|
|
65
|
+
groupLabel: "Choose your option",
|
|
66
|
+
groupId: "4adcc33d-1ac3-4e2e-9630-04c09213dbb9",
|
|
67
|
+
headingLevel: 1,
|
|
68
|
+
options: [
|
|
69
|
+
{
|
|
70
|
+
id: "3bce233e-57aa-49b3-bba7-87fa36f3774c",
|
|
71
|
+
value: "1",
|
|
72
|
+
label: "Option 1",
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
id: "de55cc3e-ca5b-4487-8295-ee3ca804ed5e",
|
|
76
|
+
value: "2",
|
|
77
|
+
label: "Option 2",
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
id: "d3bcfabb-ed87-4185-87b9-65dc63ac5430",
|
|
81
|
+
value: "3",
|
|
82
|
+
label: "Option 3",
|
|
83
|
+
},
|
|
84
|
+
],
|
|
85
|
+
}}
|
|
86
|
+
>
|
|
87
|
+
{FormFieldRadioGroup.bind({})}
|
|
88
|
+
</Story>
|
|
89
|
+
</Canvas>
|
|
90
|
+
|
|
91
|
+
## with an additional description
|
|
92
|
+
|
|
93
|
+
<Canvas>
|
|
94
|
+
<Story
|
|
95
|
+
name="description"
|
|
96
|
+
args={{
|
|
97
|
+
...exampleArgs,
|
|
98
|
+
name: "398a943f-a170-4be4-af6b-c74ed3452bce",
|
|
99
|
+
groupId: "2c0d76a7-0232-45ba-bbf3-6897288253dd",
|
|
100
|
+
groupLabel: "Label",
|
|
101
|
+
groupDescription: "Description",
|
|
102
|
+
options: [
|
|
103
|
+
{
|
|
104
|
+
id: "555a9615-6ad3-453f-a504-14bf71fc3cf9",
|
|
105
|
+
label: "Option 1",
|
|
106
|
+
value: "1",
|
|
107
|
+
description: "The first option is the most popular, but not the best option.",
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
id: "37aa1094-9b94-4d56-99af-615adc6bd861",
|
|
111
|
+
checked: true,
|
|
112
|
+
label: "Option 2",
|
|
113
|
+
value: "2",
|
|
114
|
+
description: "The best option!",
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
id: "8f4b330a-a554-4545-a616-17578766a534",
|
|
118
|
+
label: "Option 3",
|
|
119
|
+
value: "3",
|
|
120
|
+
description: "The last option.",
|
|
121
|
+
},
|
|
122
|
+
],
|
|
123
|
+
}}
|
|
124
|
+
>
|
|
125
|
+
{FormFieldRadioGroup.bind({})}
|
|
126
|
+
</Story>
|
|
127
|
+
</Canvas>
|
|
128
|
+
|
|
129
|
+
## with a description for an invalid value
|
|
130
|
+
|
|
131
|
+
<Canvas>
|
|
132
|
+
<Story
|
|
133
|
+
name="invalid"
|
|
134
|
+
args={{
|
|
135
|
+
...exampleArgs,
|
|
136
|
+
name: "ddf3c086-5337-4032-8b23-367d9423c7bb",
|
|
137
|
+
groupLabel: "Choose your option",
|
|
138
|
+
groupInvalidDescription: "Bad option!",
|
|
139
|
+
groupId: "9257c2a4-4445-47f5-9847-4c5eb9f3ab9e",
|
|
140
|
+
invalid: true,
|
|
141
|
+
options: [
|
|
142
|
+
{
|
|
143
|
+
id: "2140c911-983d-47bc-ade4-199cf2d09ea8",
|
|
144
|
+
value: "1",
|
|
145
|
+
label: "Option 1",
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
id: "d713af44-62e4-41be-8d05-8d7917e9bc66",
|
|
149
|
+
value: "2",
|
|
150
|
+
label: "Option 2",
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
id: "17988dcf-d790-4204-a0a4-87f0211d2ac2",
|
|
154
|
+
value: "3",
|
|
155
|
+
label: "Option 3",
|
|
156
|
+
},
|
|
157
|
+
],
|
|
158
|
+
}}
|
|
159
|
+
>
|
|
160
|
+
{FormFieldRadioGroup.bind({})}
|
|
161
|
+
</Story>
|
|
162
|
+
</Canvas>
|