@solexllc/usx-contracts 0.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/README.md +12 -0
- package/dist/component-contracts.json +4415 -0
- package/package.json +29 -0
- package/src/contracts.js +4439 -0
|
@@ -0,0 +1,4415 @@
|
|
|
1
|
+
{
|
|
2
|
+
"library": "usx",
|
|
3
|
+
"schemaVersion": 1,
|
|
4
|
+
"components": {
|
|
5
|
+
"accordion": {
|
|
6
|
+
"component": "accordion",
|
|
7
|
+
"version": 1,
|
|
8
|
+
"required": [],
|
|
9
|
+
"props": {
|
|
10
|
+
"id": {
|
|
11
|
+
"type": "string",
|
|
12
|
+
"description": "Base ID for the accordion. Each item's ID will be this base plus the item's index."
|
|
13
|
+
},
|
|
14
|
+
"bordered": {
|
|
15
|
+
"type": "boolean",
|
|
16
|
+
"default": false,
|
|
17
|
+
"description": "Whether the accordion has borders."
|
|
18
|
+
},
|
|
19
|
+
"items": {
|
|
20
|
+
"type": "array",
|
|
21
|
+
"default": [],
|
|
22
|
+
"description": "An array of accordion items."
|
|
23
|
+
},
|
|
24
|
+
"multiselectable": {
|
|
25
|
+
"type": "boolean",
|
|
26
|
+
"default": false,
|
|
27
|
+
"description": "Whether multiple accordion items can be expanded at the same time."
|
|
28
|
+
},
|
|
29
|
+
"className": {
|
|
30
|
+
"type": "string",
|
|
31
|
+
"default": "",
|
|
32
|
+
"description": "Additional CSS classes to apply to the accordion. Use usa-accordion--icon-start or usa-accordion--icon-end to set icon position for this accordion. For live global theming, set --usx-accordion-icon-position to 1.25rem auto (start) or auto 1.25rem (end)."
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
},
|
|
36
|
+
"alert": {
|
|
37
|
+
"component": "alert",
|
|
38
|
+
"version": 1,
|
|
39
|
+
"required": [],
|
|
40
|
+
"props": {
|
|
41
|
+
"heading": {
|
|
42
|
+
"type": "string",
|
|
43
|
+
"description": "The heading of the alert, which provides a brief summary of the alert's content."
|
|
44
|
+
},
|
|
45
|
+
"text": {
|
|
46
|
+
"type": "string",
|
|
47
|
+
"description": "The main content of the alert, providing detailed information about the alert."
|
|
48
|
+
},
|
|
49
|
+
"variant": {
|
|
50
|
+
"type": "select",
|
|
51
|
+
"options": [
|
|
52
|
+
"info",
|
|
53
|
+
"success",
|
|
54
|
+
"warning",
|
|
55
|
+
"error",
|
|
56
|
+
"emergency"
|
|
57
|
+
],
|
|
58
|
+
"description": "The visual style of the alert, indicating the type of message being conveyed."
|
|
59
|
+
},
|
|
60
|
+
"slim": {
|
|
61
|
+
"type": "boolean",
|
|
62
|
+
"description": "A boolean that determines whether the alert should be displayed in a more compact, slim style.",
|
|
63
|
+
"default": false
|
|
64
|
+
},
|
|
65
|
+
"noIcon": {
|
|
66
|
+
"type": "boolean",
|
|
67
|
+
"description": "A boolean that determines whether the alert should be displayed without an icon.",
|
|
68
|
+
"default": false
|
|
69
|
+
},
|
|
70
|
+
"className": {
|
|
71
|
+
"type": "string",
|
|
72
|
+
"description": "Additional CSS classes to apply to the alert component."
|
|
73
|
+
},
|
|
74
|
+
"style": {
|
|
75
|
+
"type": "string",
|
|
76
|
+
"description": "Inline styles to apply to the alert component."
|
|
77
|
+
},
|
|
78
|
+
"role": {
|
|
79
|
+
"type": "select",
|
|
80
|
+
"options": [
|
|
81
|
+
"",
|
|
82
|
+
"alert",
|
|
83
|
+
"status",
|
|
84
|
+
"region"
|
|
85
|
+
],
|
|
86
|
+
"description": "Optional ARIA role override. Defaults by variant: error/emergency -> alert, success -> status, info/warning -> region."
|
|
87
|
+
},
|
|
88
|
+
"ariaLabel": {
|
|
89
|
+
"type": "string",
|
|
90
|
+
"description": "Accessible label used when needed (especially for role=region)."
|
|
91
|
+
},
|
|
92
|
+
"ariaLabelledby": {
|
|
93
|
+
"type": "string",
|
|
94
|
+
"description": "ID reference to a labeling element. Takes precedence over ariaLabel."
|
|
95
|
+
},
|
|
96
|
+
"onDismiss": {
|
|
97
|
+
"type": "function",
|
|
98
|
+
"description": "Optional callback function that, if provided, makes the alert dismissible and is called when the alert is dismissed."
|
|
99
|
+
},
|
|
100
|
+
"children": {
|
|
101
|
+
"type": "slot",
|
|
102
|
+
"description": "Alert rich content (React node / HTML string). If provided, this content will be rendered instead of the `heading` and `text` props."
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
"attribution": {
|
|
107
|
+
"component": "attribution",
|
|
108
|
+
"version": 1,
|
|
109
|
+
"required": [],
|
|
110
|
+
"props": {
|
|
111
|
+
"avatarProps": {
|
|
112
|
+
"type": "object",
|
|
113
|
+
"description": "Avatar component props object. When provided, Attribution renders the Avatar component in the media slot.",
|
|
114
|
+
"component": "avatar"
|
|
115
|
+
},
|
|
116
|
+
"media": {
|
|
117
|
+
"type": "string",
|
|
118
|
+
"description": "HTML for the left media area (avatar image or initials badge)."
|
|
119
|
+
},
|
|
120
|
+
"primary": {
|
|
121
|
+
"type": "string",
|
|
122
|
+
"description": "Primary text shown in the top-right cell."
|
|
123
|
+
},
|
|
124
|
+
"secondary": {
|
|
125
|
+
"type": "string",
|
|
126
|
+
"description": "Secondary text shown in the bottom-right cell."
|
|
127
|
+
},
|
|
128
|
+
"children": {
|
|
129
|
+
"type": "string",
|
|
130
|
+
"description": "Optional full custom markup. When provided, it overrides media/primary/secondary."
|
|
131
|
+
},
|
|
132
|
+
"className": {
|
|
133
|
+
"type": "string",
|
|
134
|
+
"description": "Additional classes"
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
},
|
|
138
|
+
"avatar": {
|
|
139
|
+
"component": "avatar",
|
|
140
|
+
"version": 1,
|
|
141
|
+
"required": [],
|
|
142
|
+
"props": {
|
|
143
|
+
"href": {
|
|
144
|
+
"type": "string",
|
|
145
|
+
"description": "Link target for the avatar image."
|
|
146
|
+
},
|
|
147
|
+
"src": {
|
|
148
|
+
"type": "string",
|
|
149
|
+
"description": "Image source URL for the avatar image variant."
|
|
150
|
+
},
|
|
151
|
+
"alt": {
|
|
152
|
+
"type": "string",
|
|
153
|
+
"description": "Accessible label for the avatar. Used as image alt text or non-image avatar aria-label."
|
|
154
|
+
},
|
|
155
|
+
"variant": {
|
|
156
|
+
"type": "select",
|
|
157
|
+
"options": [
|
|
158
|
+
"image",
|
|
159
|
+
"initials",
|
|
160
|
+
"icon"
|
|
161
|
+
],
|
|
162
|
+
"description": "Avatar content mode."
|
|
163
|
+
},
|
|
164
|
+
"value": {
|
|
165
|
+
"type": "string",
|
|
166
|
+
"description": "Value for non-image avatars. Initials text when variant='initials', icon name when variant='icon'."
|
|
167
|
+
},
|
|
168
|
+
"shape": {
|
|
169
|
+
"type": "select",
|
|
170
|
+
"options": [
|
|
171
|
+
"circle",
|
|
172
|
+
"rounded-sm",
|
|
173
|
+
"rounded-md",
|
|
174
|
+
"rounded-lg",
|
|
175
|
+
"rounded-xl"
|
|
176
|
+
],
|
|
177
|
+
"description": "Optional shape utility for avatar image or initials."
|
|
178
|
+
},
|
|
179
|
+
"tooltip": {
|
|
180
|
+
"type": "string",
|
|
181
|
+
"description": "Optional tooltip text displayed on hover."
|
|
182
|
+
},
|
|
183
|
+
"className": {
|
|
184
|
+
"type": "string",
|
|
185
|
+
"description": "Additional classes for the avatar link element."
|
|
186
|
+
},
|
|
187
|
+
"imageClassName": {
|
|
188
|
+
"type": "string",
|
|
189
|
+
"description": "Additional classes for the avatar image element."
|
|
190
|
+
},
|
|
191
|
+
"contentClassName": {
|
|
192
|
+
"type": "string",
|
|
193
|
+
"description": "Additional classes for the non-image avatar content container."
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
},
|
|
197
|
+
"avatar-group": {
|
|
198
|
+
"component": "avatar-group",
|
|
199
|
+
"version": 1,
|
|
200
|
+
"required": [],
|
|
201
|
+
"props": {
|
|
202
|
+
"avatarProps": {
|
|
203
|
+
"type": "array",
|
|
204
|
+
"description": "Array of avatars rendered by the group.",
|
|
205
|
+
"items": {
|
|
206
|
+
"type": "object",
|
|
207
|
+
"description": "Avatar item. Mirrors the avatar component's props, using initials/initialsClassName in place of value/contentClassName, with no variant (auto-detected).",
|
|
208
|
+
"component": "avatar",
|
|
209
|
+
"omit": [
|
|
210
|
+
"variant",
|
|
211
|
+
"value",
|
|
212
|
+
"contentClassName"
|
|
213
|
+
],
|
|
214
|
+
"properties": {
|
|
215
|
+
"initials": {
|
|
216
|
+
"type": "string",
|
|
217
|
+
"description": "Initials text for non-image avatars (passed as the avatar's value prop)."
|
|
218
|
+
},
|
|
219
|
+
"initialsClassName": {
|
|
220
|
+
"type": "string",
|
|
221
|
+
"description": "Additional classes for the non-image avatar content container (passed as the avatar's contentClassName prop)."
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
},
|
|
226
|
+
"overlap": {
|
|
227
|
+
"type": "boolean",
|
|
228
|
+
"description": "When true, avatars overlap each other in the group.",
|
|
229
|
+
"default": false
|
|
230
|
+
},
|
|
231
|
+
"stacked": {
|
|
232
|
+
"type": "boolean",
|
|
233
|
+
"description": "When true, avatars are stacked vertically.",
|
|
234
|
+
"default": false
|
|
235
|
+
},
|
|
236
|
+
"className": {
|
|
237
|
+
"type": "string",
|
|
238
|
+
"description": "Additional classes"
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
},
|
|
242
|
+
"back-to-top": {
|
|
243
|
+
"component": "back-to-top",
|
|
244
|
+
"version": 1,
|
|
245
|
+
"required": [],
|
|
246
|
+
"props": {
|
|
247
|
+
"label": {
|
|
248
|
+
"type": "string",
|
|
249
|
+
"description": "The visible text label. Defaults to 'Back to top'. Omit or pass null for icon-only display."
|
|
250
|
+
},
|
|
251
|
+
"href": {
|
|
252
|
+
"type": "string",
|
|
253
|
+
"description": "If provided, renders as an anchor link (<a>) targeting the given href. Otherwise renders as a <button>."
|
|
254
|
+
},
|
|
255
|
+
"variant": {
|
|
256
|
+
"type": "select",
|
|
257
|
+
"options": [
|
|
258
|
+
"",
|
|
259
|
+
"primary"
|
|
260
|
+
],
|
|
261
|
+
"description": "Visual style for the button variant. Use 'primary' to add the primary color scheme."
|
|
262
|
+
},
|
|
263
|
+
"iconPosition": {
|
|
264
|
+
"type": "select",
|
|
265
|
+
"options": [
|
|
266
|
+
"right",
|
|
267
|
+
"left"
|
|
268
|
+
],
|
|
269
|
+
"description": "Position of the arrow icon relative to the label text. Defaults to 'right'."
|
|
270
|
+
},
|
|
271
|
+
"iconSize": {
|
|
272
|
+
"type": "select",
|
|
273
|
+
"options": [
|
|
274
|
+
"2",
|
|
275
|
+
"3",
|
|
276
|
+
"4"
|
|
277
|
+
],
|
|
278
|
+
"description": "Size of the arrow icon. Corresponds to USWDS icon size utilities. Defaults to '2'."
|
|
279
|
+
},
|
|
280
|
+
"className": {
|
|
281
|
+
"type": "string",
|
|
282
|
+
"description": "Additional CSS classes to apply to the component."
|
|
283
|
+
}
|
|
284
|
+
}
|
|
285
|
+
},
|
|
286
|
+
"banner": {
|
|
287
|
+
"component": "banner",
|
|
288
|
+
"version": 1,
|
|
289
|
+
"required": [],
|
|
290
|
+
"props": {
|
|
291
|
+
"id": {
|
|
292
|
+
"type": "string",
|
|
293
|
+
"description": "The unique ID for the banner, used for aria-controls and element targeting."
|
|
294
|
+
},
|
|
295
|
+
"ariaLabel": {
|
|
296
|
+
"type": "string",
|
|
297
|
+
"description": "The custom aria label users can override."
|
|
298
|
+
},
|
|
299
|
+
"tld": {
|
|
300
|
+
"type": "string",
|
|
301
|
+
"description": "The top level domain for the site. Defaults to `.gov`"
|
|
302
|
+
},
|
|
303
|
+
"bannerText": {
|
|
304
|
+
"type": "string",
|
|
305
|
+
"description": "The text for official government website text."
|
|
306
|
+
},
|
|
307
|
+
"bannerActionText": {
|
|
308
|
+
"type": "string",
|
|
309
|
+
"description": "Action text label \"Here's how you know.\""
|
|
310
|
+
},
|
|
311
|
+
"domainHeading": {
|
|
312
|
+
"type": "string",
|
|
313
|
+
"description": "Heading text for the domain section."
|
|
314
|
+
},
|
|
315
|
+
"domainText": {
|
|
316
|
+
"type": "string",
|
|
317
|
+
"description": "Body text for the domain section."
|
|
318
|
+
},
|
|
319
|
+
"httpsHeading": {
|
|
320
|
+
"type": "string",
|
|
321
|
+
"description": "Heading text for HTTPS section."
|
|
322
|
+
},
|
|
323
|
+
"httpsText": {
|
|
324
|
+
"type": "string",
|
|
325
|
+
"description": "Body text for the HTTPS section."
|
|
326
|
+
},
|
|
327
|
+
"className": {
|
|
328
|
+
"type": "string",
|
|
329
|
+
"description": "Additional classes to add to the banner"
|
|
330
|
+
}
|
|
331
|
+
}
|
|
332
|
+
},
|
|
333
|
+
"block": {
|
|
334
|
+
"component": "block",
|
|
335
|
+
"version": 1,
|
|
336
|
+
"required": [],
|
|
337
|
+
"props": {
|
|
338
|
+
"variant": {
|
|
339
|
+
"type": "select",
|
|
340
|
+
"options": [
|
|
341
|
+
"callout"
|
|
342
|
+
],
|
|
343
|
+
"description": "Visual variant. Omit for standard bordered block; 'callout' for top-border background style."
|
|
344
|
+
},
|
|
345
|
+
"indent": {
|
|
346
|
+
"type": "select",
|
|
347
|
+
"options": [
|
|
348
|
+
"sm",
|
|
349
|
+
"md",
|
|
350
|
+
"lg",
|
|
351
|
+
"xl"
|
|
352
|
+
],
|
|
353
|
+
"description": "Left indent level applied to the block wrapper."
|
|
354
|
+
},
|
|
355
|
+
"dedent": {
|
|
356
|
+
"type": "boolean",
|
|
357
|
+
"description": "Pull the block left beyond the content edge.",
|
|
358
|
+
"default": false
|
|
359
|
+
},
|
|
360
|
+
"big": {
|
|
361
|
+
"type": "boolean",
|
|
362
|
+
"description": "Increases border width for stronger emphasis.",
|
|
363
|
+
"default": false
|
|
364
|
+
},
|
|
365
|
+
"quote": {
|
|
366
|
+
"type": "boolean",
|
|
367
|
+
"description": "Adds a quote icon and flex-row layout (non-callout only).",
|
|
368
|
+
"default": false
|
|
369
|
+
},
|
|
370
|
+
"color": {
|
|
371
|
+
"type": "string",
|
|
372
|
+
"description": "Border color token name. Applied as usx-border-{color} on content (or block wrapper for callout)."
|
|
373
|
+
},
|
|
374
|
+
"contentClassName": {
|
|
375
|
+
"type": "string",
|
|
376
|
+
"description": "Additional classes for the inner content element."
|
|
377
|
+
},
|
|
378
|
+
"attribution": {
|
|
379
|
+
"type": "object",
|
|
380
|
+
"description": "Attribution component props object rendered by the block component.",
|
|
381
|
+
"properties": {
|
|
382
|
+
"avatar": {
|
|
383
|
+
"type": "object",
|
|
384
|
+
"description": "Avatar component props object."
|
|
385
|
+
},
|
|
386
|
+
"media": {
|
|
387
|
+
"type": "string",
|
|
388
|
+
"description": "HTML for the left media area."
|
|
389
|
+
},
|
|
390
|
+
"primary": {
|
|
391
|
+
"type": "string",
|
|
392
|
+
"description": "Primary text shown in the top-right cell."
|
|
393
|
+
},
|
|
394
|
+
"secondary": {
|
|
395
|
+
"type": "string",
|
|
396
|
+
"description": "Secondary text shown in the bottom-right cell."
|
|
397
|
+
},
|
|
398
|
+
"children": {
|
|
399
|
+
"type": "string",
|
|
400
|
+
"description": "Optional full custom markup, overrides media/primary/secondary."
|
|
401
|
+
},
|
|
402
|
+
"className": {
|
|
403
|
+
"type": "string",
|
|
404
|
+
"description": "Additional classes."
|
|
405
|
+
}
|
|
406
|
+
}
|
|
407
|
+
},
|
|
408
|
+
"children": {
|
|
409
|
+
"type": "string",
|
|
410
|
+
"description": "Main block content."
|
|
411
|
+
},
|
|
412
|
+
"className": {
|
|
413
|
+
"type": "string",
|
|
414
|
+
"description": "Additional classes for the block wrapper."
|
|
415
|
+
}
|
|
416
|
+
}
|
|
417
|
+
},
|
|
418
|
+
"breadcrumb": {
|
|
419
|
+
"component": "breadcrumb",
|
|
420
|
+
"version": 1,
|
|
421
|
+
"required": [],
|
|
422
|
+
"props": {
|
|
423
|
+
"items": {
|
|
424
|
+
"type": "array",
|
|
425
|
+
"description": "Array of breadcrumb items",
|
|
426
|
+
"items": {
|
|
427
|
+
"type": "object",
|
|
428
|
+
"description": "Breadcrumb item.",
|
|
429
|
+
"properties": {
|
|
430
|
+
"href": {
|
|
431
|
+
"type": "string",
|
|
432
|
+
"description": "URL for the breadcrumb link"
|
|
433
|
+
},
|
|
434
|
+
"label": {
|
|
435
|
+
"type": "string",
|
|
436
|
+
"description": "Text label for the breadcrumb item"
|
|
437
|
+
},
|
|
438
|
+
"current": {
|
|
439
|
+
"type": "boolean",
|
|
440
|
+
"description": "Whether this item is the current page"
|
|
441
|
+
}
|
|
442
|
+
}
|
|
443
|
+
}
|
|
444
|
+
},
|
|
445
|
+
"wrap": {
|
|
446
|
+
"type": "boolean",
|
|
447
|
+
"default": false,
|
|
448
|
+
"description": "Allow the breadcrumb to wrap onto multiple lines (adds usa-breadcrumb--wrap)"
|
|
449
|
+
},
|
|
450
|
+
"truncate": {
|
|
451
|
+
"type": "boolean",
|
|
452
|
+
"default": false,
|
|
453
|
+
"description": "Use legacy single-line breadcrumb truncation (adds usa-breadcrumb--truncate)"
|
|
454
|
+
},
|
|
455
|
+
"rdfa": {
|
|
456
|
+
"type": "boolean",
|
|
457
|
+
"default": false,
|
|
458
|
+
"description": "Include RDFa metadata attributes for Search engines"
|
|
459
|
+
},
|
|
460
|
+
"ariaLabel": {
|
|
461
|
+
"type": "string",
|
|
462
|
+
"default": "Breadcrumbs",
|
|
463
|
+
"description": "Custom aria-label for the nav element"
|
|
464
|
+
},
|
|
465
|
+
"className": {
|
|
466
|
+
"type": "string",
|
|
467
|
+
"description": "Additional CSS classes to add to the nav element"
|
|
468
|
+
}
|
|
469
|
+
}
|
|
470
|
+
},
|
|
471
|
+
"button": {
|
|
472
|
+
"component": "button",
|
|
473
|
+
"version": 1,
|
|
474
|
+
"required": [],
|
|
475
|
+
"props": {
|
|
476
|
+
"label": {
|
|
477
|
+
"type": "string",
|
|
478
|
+
"description": "The text to be displayed on the button, providing a clear and concise indication of the button's purpose or action."
|
|
479
|
+
},
|
|
480
|
+
"variant": {
|
|
481
|
+
"type": "select",
|
|
482
|
+
"options": [
|
|
483
|
+
"primary",
|
|
484
|
+
"secondary",
|
|
485
|
+
"accent-cool",
|
|
486
|
+
"accent-warm",
|
|
487
|
+
"base",
|
|
488
|
+
"outline"
|
|
489
|
+
],
|
|
490
|
+
"description": "The visual style of the button, which can be used to indicate the importance or type of action the button represents."
|
|
491
|
+
},
|
|
492
|
+
"type": {
|
|
493
|
+
"type": "select",
|
|
494
|
+
"options": [
|
|
495
|
+
"button",
|
|
496
|
+
"submit",
|
|
497
|
+
"reset"
|
|
498
|
+
],
|
|
499
|
+
"description": "The HTML button type attribute, which specifies the behavior of the button when it is clicked."
|
|
500
|
+
},
|
|
501
|
+
"disabled": {
|
|
502
|
+
"type": "boolean",
|
|
503
|
+
"description": "A boolean that determines whether the button is disabled, preventing user interaction and indicating that the button is not currently available for action.",
|
|
504
|
+
"default": false
|
|
505
|
+
},
|
|
506
|
+
"onClick": {
|
|
507
|
+
"type": "function",
|
|
508
|
+
"description": "A function that is called when the button is clicked, allowing for custom behavior to be executed in response to the user's interaction with the button."
|
|
509
|
+
},
|
|
510
|
+
"href": {
|
|
511
|
+
"type": "string",
|
|
512
|
+
"description": "The URL that the button should navigate to when clicked, if the button is used as a link."
|
|
513
|
+
},
|
|
514
|
+
"isExternal": {
|
|
515
|
+
"type": "boolean",
|
|
516
|
+
"description": "A boolean that determines whether the link should open in a new tab or window, indicating that the destination is external to the current site.",
|
|
517
|
+
"default": false
|
|
518
|
+
},
|
|
519
|
+
"big": {
|
|
520
|
+
"type": "boolean",
|
|
521
|
+
"description": "A boolean that determines whether the button should be displayed in a larger size, making it more prominent and easier to interact with.",
|
|
522
|
+
"default": false
|
|
523
|
+
},
|
|
524
|
+
"inverse": {
|
|
525
|
+
"type": "boolean",
|
|
526
|
+
"description": "A boolean that determines whether the button should be displayed with an inverse color scheme, which can be used to create contrast against a darker background.",
|
|
527
|
+
"default": false
|
|
528
|
+
},
|
|
529
|
+
"ghost": {
|
|
530
|
+
"type": "boolean",
|
|
531
|
+
"description": "A boolean that determines whether the button should be displayed in a ghost style, which typically features a transparent background and a border, giving it a more subtle appearance.",
|
|
532
|
+
"default": false
|
|
533
|
+
},
|
|
534
|
+
"loading": {
|
|
535
|
+
"type": "boolean",
|
|
536
|
+
"description": "When true, displays a loading spinner before any left-positioned icons, indicating the button's action is in progress.",
|
|
537
|
+
"default": false
|
|
538
|
+
},
|
|
539
|
+
"iconProps": {
|
|
540
|
+
"type": "array",
|
|
541
|
+
"description": "Icons to render alongside the button label.",
|
|
542
|
+
"items": {
|
|
543
|
+
"type": "object",
|
|
544
|
+
"description": "An icon instance for the button. Mirrors the icon component's props.",
|
|
545
|
+
"component": "icon",
|
|
546
|
+
"properties": {
|
|
547
|
+
"position": {
|
|
548
|
+
"type": "select",
|
|
549
|
+
"options": [
|
|
550
|
+
"left",
|
|
551
|
+
"right"
|
|
552
|
+
],
|
|
553
|
+
"default": "left",
|
|
554
|
+
"description": "Which side of the button label to render this icon on."
|
|
555
|
+
}
|
|
556
|
+
}
|
|
557
|
+
}
|
|
558
|
+
},
|
|
559
|
+
"className": {
|
|
560
|
+
"type": "string",
|
|
561
|
+
"description": "Additional CSS classes to apply to the button component."
|
|
562
|
+
},
|
|
563
|
+
"style": {
|
|
564
|
+
"type": "string",
|
|
565
|
+
"description": "Inline styles to apply to the button component."
|
|
566
|
+
},
|
|
567
|
+
"children": {
|
|
568
|
+
"type": "string",
|
|
569
|
+
"description": "Inner HTML or text to be displayed within the button, allowing for more complex content such as additional elements or formatting."
|
|
570
|
+
},
|
|
571
|
+
"extraAttributes": {
|
|
572
|
+
"type": "object",
|
|
573
|
+
"description": "An object containing any additional HTML attributes to be spread onto the button element, providing flexibility for custom use cases or integrations."
|
|
574
|
+
}
|
|
575
|
+
}
|
|
576
|
+
},
|
|
577
|
+
"button-group": {
|
|
578
|
+
"component": "button-group",
|
|
579
|
+
"version": 1,
|
|
580
|
+
"required": [],
|
|
581
|
+
"props": {
|
|
582
|
+
"buttonProps": {
|
|
583
|
+
"type": "array",
|
|
584
|
+
"description": "Array of buttons rendered by the group.",
|
|
585
|
+
"items": {
|
|
586
|
+
"type": "object",
|
|
587
|
+
"description": "Button item.",
|
|
588
|
+
"component": "button"
|
|
589
|
+
}
|
|
590
|
+
},
|
|
591
|
+
"segmented": {
|
|
592
|
+
"type": "boolean",
|
|
593
|
+
"description": "Whether the button group is segmented",
|
|
594
|
+
"default": false
|
|
595
|
+
},
|
|
596
|
+
"className": {
|
|
597
|
+
"type": "string",
|
|
598
|
+
"description": "Additional classes"
|
|
599
|
+
}
|
|
600
|
+
}
|
|
601
|
+
},
|
|
602
|
+
"calendar-date": {
|
|
603
|
+
"component": "calendar-date",
|
|
604
|
+
"version": 1,
|
|
605
|
+
"required": [],
|
|
606
|
+
"props": {
|
|
607
|
+
"datetime": {
|
|
608
|
+
"type": "string",
|
|
609
|
+
"default": null,
|
|
610
|
+
"description": "ISO 8601 datetime string. Month and day are parsed from this value."
|
|
611
|
+
},
|
|
612
|
+
"underCollection": {
|
|
613
|
+
"type": "boolean",
|
|
614
|
+
"default": false,
|
|
615
|
+
"description": "Whether the calendar date is being rendered within a collection item, which applies specific collection-related styles."
|
|
616
|
+
}
|
|
617
|
+
}
|
|
618
|
+
},
|
|
619
|
+
"card": {
|
|
620
|
+
"component": "card",
|
|
621
|
+
"version": 1,
|
|
622
|
+
"required": [],
|
|
623
|
+
"props": {
|
|
624
|
+
"title": {
|
|
625
|
+
"type": "string",
|
|
626
|
+
"description": "The title text displayed in the card header"
|
|
627
|
+
},
|
|
628
|
+
"description": {
|
|
629
|
+
"type": "string",
|
|
630
|
+
"description": "The description text displayed in the card body"
|
|
631
|
+
},
|
|
632
|
+
"tags": {
|
|
633
|
+
"type": "array",
|
|
634
|
+
"description": "Array of tag objects with value and color properties",
|
|
635
|
+
"items": {
|
|
636
|
+
"type": "object",
|
|
637
|
+
"description": "Card tag.",
|
|
638
|
+
"properties": {
|
|
639
|
+
"value": {
|
|
640
|
+
"type": "string",
|
|
641
|
+
"description": "Tag text"
|
|
642
|
+
},
|
|
643
|
+
"color": {
|
|
644
|
+
"type": "string",
|
|
645
|
+
"description": "Tag color variant"
|
|
646
|
+
}
|
|
647
|
+
}
|
|
648
|
+
}
|
|
649
|
+
},
|
|
650
|
+
"actions": {
|
|
651
|
+
"type": "array",
|
|
652
|
+
"description": "Array of action button objects",
|
|
653
|
+
"items": {
|
|
654
|
+
"type": "object",
|
|
655
|
+
"description": "Card action button.",
|
|
656
|
+
"properties": {
|
|
657
|
+
"children": {
|
|
658
|
+
"type": "string",
|
|
659
|
+
"description": "Button text"
|
|
660
|
+
},
|
|
661
|
+
"variant": {
|
|
662
|
+
"type": "string",
|
|
663
|
+
"description": "Button variant"
|
|
664
|
+
},
|
|
665
|
+
"onClick": {
|
|
666
|
+
"type": "function",
|
|
667
|
+
"description": "Click handler"
|
|
668
|
+
}
|
|
669
|
+
}
|
|
670
|
+
}
|
|
671
|
+
},
|
|
672
|
+
"images": {
|
|
673
|
+
"type": "array",
|
|
674
|
+
"description": "Array of image objects (currently uses first image)",
|
|
675
|
+
"items": {
|
|
676
|
+
"type": "object",
|
|
677
|
+
"description": "Card image.",
|
|
678
|
+
"properties": {
|
|
679
|
+
"src": {
|
|
680
|
+
"type": "string",
|
|
681
|
+
"description": "Image source URL"
|
|
682
|
+
},
|
|
683
|
+
"alt": {
|
|
684
|
+
"type": "string",
|
|
685
|
+
"description": "Alt text for the image"
|
|
686
|
+
}
|
|
687
|
+
}
|
|
688
|
+
}
|
|
689
|
+
},
|
|
690
|
+
"headerFirst": {
|
|
691
|
+
"type": "boolean",
|
|
692
|
+
"default": false,
|
|
693
|
+
"description": "Whether to display the header before the media section"
|
|
694
|
+
},
|
|
695
|
+
"flag": {
|
|
696
|
+
"type": "boolean",
|
|
697
|
+
"default": false,
|
|
698
|
+
"description": "Whether to use the flag layout where media and content are side-by-side"
|
|
699
|
+
},
|
|
700
|
+
"mediaRight": {
|
|
701
|
+
"type": "boolean",
|
|
702
|
+
"default": false,
|
|
703
|
+
"description": "Whether to place media on the right side in flag layout"
|
|
704
|
+
},
|
|
705
|
+
"mediaInset": {
|
|
706
|
+
"type": "boolean",
|
|
707
|
+
"default": false,
|
|
708
|
+
"description": "Whether to inset the media within the card container"
|
|
709
|
+
},
|
|
710
|
+
"mediaExdent": {
|
|
711
|
+
"type": "boolean",
|
|
712
|
+
"default": false,
|
|
713
|
+
"description": "Whether to extend the media outside the card container boundaries"
|
|
714
|
+
},
|
|
715
|
+
"showCarouselDots": {
|
|
716
|
+
"type": "boolean",
|
|
717
|
+
"default": true,
|
|
718
|
+
"description": "Whether to show navigation dots when multiple images are provided"
|
|
719
|
+
},
|
|
720
|
+
"children": {
|
|
721
|
+
"type": "slot",
|
|
722
|
+
"description": "Inner HTML or text content (alternative to structured props)"
|
|
723
|
+
},
|
|
724
|
+
"className": {
|
|
725
|
+
"type": "string",
|
|
726
|
+
"description": "Additional CSS classes"
|
|
727
|
+
},
|
|
728
|
+
"tag": {
|
|
729
|
+
"type": "string",
|
|
730
|
+
"description": "HTML tag to use for the card element (div or li)"
|
|
731
|
+
}
|
|
732
|
+
}
|
|
733
|
+
},
|
|
734
|
+
"card-group": {
|
|
735
|
+
"component": "card-group",
|
|
736
|
+
"version": 1,
|
|
737
|
+
"required": [],
|
|
738
|
+
"props": {
|
|
739
|
+
"cardProps": {
|
|
740
|
+
"type": "array",
|
|
741
|
+
"description": "Array of cards rendered by the group.",
|
|
742
|
+
"items": {
|
|
743
|
+
"type": "object",
|
|
744
|
+
"description": "Card item.",
|
|
745
|
+
"component": "card",
|
|
746
|
+
"omit": [
|
|
747
|
+
"tag"
|
|
748
|
+
]
|
|
749
|
+
}
|
|
750
|
+
},
|
|
751
|
+
"className": {
|
|
752
|
+
"type": "string",
|
|
753
|
+
"description": "Additional classes"
|
|
754
|
+
}
|
|
755
|
+
}
|
|
756
|
+
},
|
|
757
|
+
"carousel": {
|
|
758
|
+
"component": "carousel",
|
|
759
|
+
"version": 1,
|
|
760
|
+
"required": [],
|
|
761
|
+
"props": {
|
|
762
|
+
"id": {
|
|
763
|
+
"type": "string",
|
|
764
|
+
"default": "carousel-1",
|
|
765
|
+
"description": "Base id for slides and anchors"
|
|
766
|
+
},
|
|
767
|
+
"slides": {
|
|
768
|
+
"type": "array",
|
|
769
|
+
"description": "Array of slide objects {content: string|node}"
|
|
770
|
+
},
|
|
771
|
+
"children": {
|
|
772
|
+
"type": "string",
|
|
773
|
+
"description": "Optional raw slide markup rendered directly inside the track."
|
|
774
|
+
},
|
|
775
|
+
"slideIds": {
|
|
776
|
+
"type": "array",
|
|
777
|
+
"description": "Anchor targets used for dot navigation when children are provided."
|
|
778
|
+
},
|
|
779
|
+
"ariaLabel": {
|
|
780
|
+
"type": "string",
|
|
781
|
+
"default": "Featured content",
|
|
782
|
+
"description": "Aria label for the carousel region"
|
|
783
|
+
},
|
|
784
|
+
"showDots": {
|
|
785
|
+
"type": "boolean",
|
|
786
|
+
"default": true,
|
|
787
|
+
"description": "Whether to render navigation dots"
|
|
788
|
+
},
|
|
789
|
+
"className": {
|
|
790
|
+
"type": "string",
|
|
791
|
+
"description": "Additional classes to add to the carousel"
|
|
792
|
+
}
|
|
793
|
+
}
|
|
794
|
+
},
|
|
795
|
+
"character-count": {
|
|
796
|
+
"component": "character-count",
|
|
797
|
+
"version": 1,
|
|
798
|
+
"required": [],
|
|
799
|
+
"props": {
|
|
800
|
+
"id": {
|
|
801
|
+
"type": "string",
|
|
802
|
+
"default": null,
|
|
803
|
+
"description": "ID for the input/textarea field. Used to wire label, hint, message, and error/success spans."
|
|
804
|
+
},
|
|
805
|
+
"label": {
|
|
806
|
+
"type": "string",
|
|
807
|
+
"default": null,
|
|
808
|
+
"description": "Label text for the field."
|
|
809
|
+
},
|
|
810
|
+
"max": {
|
|
811
|
+
"type": "number",
|
|
812
|
+
"default": null,
|
|
813
|
+
"description": "Maximum number of characters allowed. Rendered as the field's maxlength attribute and referenced in the fallback message; USWDS JS moves it to data-maxlength and manages the live count/over-limit state at runtime."
|
|
814
|
+
},
|
|
815
|
+
"hint": {
|
|
816
|
+
"type": "string",
|
|
817
|
+
"default": null,
|
|
818
|
+
"description": "Hint text displayed below the label, referenced by aria-describedby."
|
|
819
|
+
},
|
|
820
|
+
"error": {
|
|
821
|
+
"type": [
|
|
822
|
+
"string",
|
|
823
|
+
"boolean"
|
|
824
|
+
],
|
|
825
|
+
"default": null,
|
|
826
|
+
"description": "Error message (string) or true to mark the field as invalid without a message."
|
|
827
|
+
},
|
|
828
|
+
"success": {
|
|
829
|
+
"type": [
|
|
830
|
+
"string",
|
|
831
|
+
"boolean"
|
|
832
|
+
],
|
|
833
|
+
"default": null,
|
|
834
|
+
"description": "Success message (string) or true to mark the field as valid without a message."
|
|
835
|
+
},
|
|
836
|
+
"disabled": {
|
|
837
|
+
"type": "boolean",
|
|
838
|
+
"default": false,
|
|
839
|
+
"description": "Disables the field."
|
|
840
|
+
},
|
|
841
|
+
"required": {
|
|
842
|
+
"type": "boolean",
|
|
843
|
+
"default": false,
|
|
844
|
+
"description": "Marks the field as required."
|
|
845
|
+
},
|
|
846
|
+
"screenReaderOnlyLabel": {
|
|
847
|
+
"type": "boolean",
|
|
848
|
+
"default": false,
|
|
849
|
+
"description": "Visually hides the label while keeping it screen-reader accessible."
|
|
850
|
+
},
|
|
851
|
+
"placeholder": {
|
|
852
|
+
"type": "string",
|
|
853
|
+
"default": "",
|
|
854
|
+
"description": "Placeholder text for the field."
|
|
855
|
+
},
|
|
856
|
+
"defaultValue": {
|
|
857
|
+
"type": "string",
|
|
858
|
+
"default": "",
|
|
859
|
+
"description": "Initial value of the field."
|
|
860
|
+
},
|
|
861
|
+
"textArea": {
|
|
862
|
+
"type": "boolean",
|
|
863
|
+
"default": false,
|
|
864
|
+
"description": "Renders a textarea instead of an input."
|
|
865
|
+
},
|
|
866
|
+
"className": {
|
|
867
|
+
"type": "string",
|
|
868
|
+
"default": "",
|
|
869
|
+
"description": "Additional CSS classes for the outer character-count wrapper."
|
|
870
|
+
}
|
|
871
|
+
}
|
|
872
|
+
},
|
|
873
|
+
"checkbox": {
|
|
874
|
+
"component": "checkbox",
|
|
875
|
+
"version": 1,
|
|
876
|
+
"required": [],
|
|
877
|
+
"props": {
|
|
878
|
+
"id": {
|
|
879
|
+
"type": "string",
|
|
880
|
+
"description": "Unique identifier for the checkbox input"
|
|
881
|
+
},
|
|
882
|
+
"name": {
|
|
883
|
+
"type": "string",
|
|
884
|
+
"description": "Name attribute for the checkbox input, used for form submission"
|
|
885
|
+
},
|
|
886
|
+
"value": {
|
|
887
|
+
"type": "string",
|
|
888
|
+
"description": "Value attribute for the checkbox input"
|
|
889
|
+
},
|
|
890
|
+
"label": {
|
|
891
|
+
"type": "string",
|
|
892
|
+
"description": "Label text for the checkbox"
|
|
893
|
+
},
|
|
894
|
+
"checked": {
|
|
895
|
+
"type": "boolean",
|
|
896
|
+
"default": false,
|
|
897
|
+
"description": "Whether the checkbox is checked"
|
|
898
|
+
},
|
|
899
|
+
"disabled": {
|
|
900
|
+
"type": "boolean",
|
|
901
|
+
"default": false,
|
|
902
|
+
"description": "Whether the checkbox is disabled"
|
|
903
|
+
},
|
|
904
|
+
"description": {
|
|
905
|
+
"type": "string",
|
|
906
|
+
"default": null,
|
|
907
|
+
"description": "Optional description text that provides additional information about the checkbox"
|
|
908
|
+
},
|
|
909
|
+
"tile": {
|
|
910
|
+
"type": "boolean",
|
|
911
|
+
"default": false,
|
|
912
|
+
"description": "Whether to use the tile checkbox style"
|
|
913
|
+
},
|
|
914
|
+
"small": {
|
|
915
|
+
"type": "boolean",
|
|
916
|
+
"default": false,
|
|
917
|
+
"description": "Whether to use the small checkbox style"
|
|
918
|
+
},
|
|
919
|
+
"error": {
|
|
920
|
+
"type": "string",
|
|
921
|
+
"default": null,
|
|
922
|
+
"description": "Error message to display when the checkbox is in an error state"
|
|
923
|
+
},
|
|
924
|
+
"success": {
|
|
925
|
+
"type": "string",
|
|
926
|
+
"default": null,
|
|
927
|
+
"description": "Success message to display when the checkbox is in a success state"
|
|
928
|
+
},
|
|
929
|
+
"className": {
|
|
930
|
+
"type": "string",
|
|
931
|
+
"description": "Additional classes to add to the checkbox container"
|
|
932
|
+
},
|
|
933
|
+
"onChange": {
|
|
934
|
+
"type": "function",
|
|
935
|
+
"description": "Function called when the checkbox value changes (React) or JavaScript code string for onchange attribute (Django)"
|
|
936
|
+
},
|
|
937
|
+
"required": {
|
|
938
|
+
"type": "boolean",
|
|
939
|
+
"default": false,
|
|
940
|
+
"description": "Whether the checkbox is required, adds asterisk to label and required attribute to input"
|
|
941
|
+
}
|
|
942
|
+
}
|
|
943
|
+
},
|
|
944
|
+
"checkbox-group": {
|
|
945
|
+
"component": "checkbox-group",
|
|
946
|
+
"version": 1,
|
|
947
|
+
"required": [],
|
|
948
|
+
"props": {
|
|
949
|
+
"id": {
|
|
950
|
+
"type": "string",
|
|
951
|
+
"description": "Base ID for the checkbox group. Each checkbox's ID will be this base plus the option's value or index."
|
|
952
|
+
},
|
|
953
|
+
"tile": {
|
|
954
|
+
"type": "boolean",
|
|
955
|
+
"description": "Render each checkbox as a tile when true",
|
|
956
|
+
"default": false
|
|
957
|
+
},
|
|
958
|
+
"small": {
|
|
959
|
+
"type": "boolean",
|
|
960
|
+
"description": "Render compact/small checkboxes when true",
|
|
961
|
+
"default": false
|
|
962
|
+
},
|
|
963
|
+
"legend": {
|
|
964
|
+
"type": "string",
|
|
965
|
+
"description": "Legend text for the fieldset"
|
|
966
|
+
},
|
|
967
|
+
"required": {
|
|
968
|
+
"type": "boolean",
|
|
969
|
+
"description": "Whether the fieldset is required",
|
|
970
|
+
"default": false
|
|
971
|
+
},
|
|
972
|
+
"hint": {
|
|
973
|
+
"type": "string",
|
|
974
|
+
"description": "Group-level hint text, rendered after the legend"
|
|
975
|
+
},
|
|
976
|
+
"error": {
|
|
977
|
+
"type": "string",
|
|
978
|
+
"description": "Group-level error message, rendered after the hint"
|
|
979
|
+
},
|
|
980
|
+
"name": {
|
|
981
|
+
"type": "string",
|
|
982
|
+
"description": "Name attribute shared by the checkbox inputs"
|
|
983
|
+
},
|
|
984
|
+
"options": {
|
|
985
|
+
"type": "array",
|
|
986
|
+
"description": "Array of option objects: {id, value, label, description, checked, disabled}"
|
|
987
|
+
},
|
|
988
|
+
"className": {
|
|
989
|
+
"type": "string",
|
|
990
|
+
"description": "Additional classes to apply to the wrapper"
|
|
991
|
+
}
|
|
992
|
+
}
|
|
993
|
+
},
|
|
994
|
+
"clickable": {
|
|
995
|
+
"component": "clickable",
|
|
996
|
+
"version": 1,
|
|
997
|
+
"required": [
|
|
998
|
+
"href"
|
|
999
|
+
],
|
|
1000
|
+
"props": {
|
|
1001
|
+
"href": {
|
|
1002
|
+
"type": "string",
|
|
1003
|
+
"description": "URL the clickable navigates to."
|
|
1004
|
+
},
|
|
1005
|
+
"className": {
|
|
1006
|
+
"type": "string",
|
|
1007
|
+
"description": "Additional layout or utility classes applied to the root anchor (e.g. 'flex-column padding-2')."
|
|
1008
|
+
},
|
|
1009
|
+
"id": {
|
|
1010
|
+
"type": "string",
|
|
1011
|
+
"description": "Optional id attribute for the anchor element."
|
|
1012
|
+
},
|
|
1013
|
+
"children": {
|
|
1014
|
+
"type": "string",
|
|
1015
|
+
"description": "Safe inner HTML. Apply usx-clickable__link, usx-clickable__color-on-hover, and/or usx-clickable__bg-color-on-hover to any child elements as needed."
|
|
1016
|
+
}
|
|
1017
|
+
}
|
|
1018
|
+
},
|
|
1019
|
+
"code": {
|
|
1020
|
+
"component": "code",
|
|
1021
|
+
"version": 1,
|
|
1022
|
+
"required": [
|
|
1023
|
+
"lines"
|
|
1024
|
+
],
|
|
1025
|
+
"props": {
|
|
1026
|
+
"lines": {
|
|
1027
|
+
"type": "array",
|
|
1028
|
+
"description": "Array of line objects. Each supports: code (string), prefix (string, omit for no data-prefix attribute), className (string).",
|
|
1029
|
+
"items": {
|
|
1030
|
+
"type": "object",
|
|
1031
|
+
"description": "Terminal line.",
|
|
1032
|
+
"properties": {
|
|
1033
|
+
"code": {
|
|
1034
|
+
"type": "string",
|
|
1035
|
+
"description": "Line content."
|
|
1036
|
+
},
|
|
1037
|
+
"prefix": {
|
|
1038
|
+
"type": "string",
|
|
1039
|
+
"description": "data-prefix attribute; omit for no prefix."
|
|
1040
|
+
},
|
|
1041
|
+
"className": {
|
|
1042
|
+
"type": "string",
|
|
1043
|
+
"description": "Additional classes."
|
|
1044
|
+
}
|
|
1045
|
+
}
|
|
1046
|
+
}
|
|
1047
|
+
},
|
|
1048
|
+
"copyText": {
|
|
1049
|
+
"type": "string",
|
|
1050
|
+
"description": "Text to copy when the copy button is clicked. If provided, shows the copy button."
|
|
1051
|
+
},
|
|
1052
|
+
"className": {
|
|
1053
|
+
"type": "string",
|
|
1054
|
+
"description": "Additional CSS classes to apply to the wrapper div."
|
|
1055
|
+
}
|
|
1056
|
+
}
|
|
1057
|
+
},
|
|
1058
|
+
"collection": {
|
|
1059
|
+
"component": "collection",
|
|
1060
|
+
"version": 1,
|
|
1061
|
+
"required": [],
|
|
1062
|
+
"props": {
|
|
1063
|
+
"items": {
|
|
1064
|
+
"type": "array",
|
|
1065
|
+
"default": [],
|
|
1066
|
+
"description": "Array of collection item objects. Each item: { href, heading, description?, imgSrc?, imgAlt?, calendarDate?: { datetime, month, day }, meta?: [{ text, datetime? }], tags?: [{ label, isNew? }] }",
|
|
1067
|
+
"items": {
|
|
1068
|
+
"type": "object",
|
|
1069
|
+
"description": "Collection item.",
|
|
1070
|
+
"properties": {
|
|
1071
|
+
"href": {
|
|
1072
|
+
"type": "string",
|
|
1073
|
+
"description": "Item link URL."
|
|
1074
|
+
},
|
|
1075
|
+
"heading": {
|
|
1076
|
+
"type": "string",
|
|
1077
|
+
"description": "Item heading text."
|
|
1078
|
+
},
|
|
1079
|
+
"description": {
|
|
1080
|
+
"type": "string",
|
|
1081
|
+
"description": "Item description text."
|
|
1082
|
+
},
|
|
1083
|
+
"imgSrc": {
|
|
1084
|
+
"type": "string",
|
|
1085
|
+
"description": "Optional thumbnail image URL."
|
|
1086
|
+
},
|
|
1087
|
+
"imgAlt": {
|
|
1088
|
+
"type": "string",
|
|
1089
|
+
"description": "Alt text for the thumbnail image."
|
|
1090
|
+
},
|
|
1091
|
+
"calendarDate": {
|
|
1092
|
+
"type": "object",
|
|
1093
|
+
"description": "Optional { datetime, month, day } calendar date badge."
|
|
1094
|
+
},
|
|
1095
|
+
"meta": {
|
|
1096
|
+
"type": "array",
|
|
1097
|
+
"description": "Optional meta list: [{ text, datetime? }]."
|
|
1098
|
+
},
|
|
1099
|
+
"tags": {
|
|
1100
|
+
"type": "array",
|
|
1101
|
+
"description": "Optional tag list: [{ label, isNew? }]."
|
|
1102
|
+
}
|
|
1103
|
+
}
|
|
1104
|
+
}
|
|
1105
|
+
},
|
|
1106
|
+
"condensed": {
|
|
1107
|
+
"type": "boolean",
|
|
1108
|
+
"default": false,
|
|
1109
|
+
"description": "Applies usa-collection--condensed for a compact headings-only layout."
|
|
1110
|
+
},
|
|
1111
|
+
"className": {
|
|
1112
|
+
"type": "string",
|
|
1113
|
+
"default": "",
|
|
1114
|
+
"description": "Additional CSS classes for the collection wrapper."
|
|
1115
|
+
}
|
|
1116
|
+
}
|
|
1117
|
+
},
|
|
1118
|
+
"combobox": {
|
|
1119
|
+
"component": "combobox",
|
|
1120
|
+
"version": 1,
|
|
1121
|
+
"required": [],
|
|
1122
|
+
"props": {
|
|
1123
|
+
"id": {
|
|
1124
|
+
"type": "string",
|
|
1125
|
+
"description": "id attribute for the select"
|
|
1126
|
+
},
|
|
1127
|
+
"name": {
|
|
1128
|
+
"type": "string",
|
|
1129
|
+
"description": "name attribute for the select"
|
|
1130
|
+
},
|
|
1131
|
+
"label": {
|
|
1132
|
+
"type": "string",
|
|
1133
|
+
"description": "Label text for the combobox"
|
|
1134
|
+
},
|
|
1135
|
+
"disabled": {
|
|
1136
|
+
"type": "boolean",
|
|
1137
|
+
"description": "Disable the select",
|
|
1138
|
+
"default": false
|
|
1139
|
+
},
|
|
1140
|
+
"required": {
|
|
1141
|
+
"type": "boolean",
|
|
1142
|
+
"description": "Make the select required",
|
|
1143
|
+
"default": false
|
|
1144
|
+
},
|
|
1145
|
+
"hint": {
|
|
1146
|
+
"type": "string",
|
|
1147
|
+
"description": "Hint text (renders aria-describedby)"
|
|
1148
|
+
},
|
|
1149
|
+
"placeholder": {
|
|
1150
|
+
"type": "string",
|
|
1151
|
+
"description": "Data-placeholder on the wrapper"
|
|
1152
|
+
},
|
|
1153
|
+
"defaultValue": {
|
|
1154
|
+
"type": "string",
|
|
1155
|
+
"description": "Default selected value"
|
|
1156
|
+
},
|
|
1157
|
+
"error": {
|
|
1158
|
+
"type": "string",
|
|
1159
|
+
"description": "Error message (renders aria-describedby and error class)"
|
|
1160
|
+
},
|
|
1161
|
+
"options": {
|
|
1162
|
+
"type": "array",
|
|
1163
|
+
"description": "Array of { value, label } option objects",
|
|
1164
|
+
"items": {
|
|
1165
|
+
"type": "object",
|
|
1166
|
+
"description": "Selectable option.",
|
|
1167
|
+
"properties": {
|
|
1168
|
+
"value": {
|
|
1169
|
+
"type": "string",
|
|
1170
|
+
"description": "Option value."
|
|
1171
|
+
},
|
|
1172
|
+
"label": {
|
|
1173
|
+
"type": "string",
|
|
1174
|
+
"description": "Option display label."
|
|
1175
|
+
}
|
|
1176
|
+
}
|
|
1177
|
+
}
|
|
1178
|
+
},
|
|
1179
|
+
"onSearch": {
|
|
1180
|
+
"type": "function",
|
|
1181
|
+
"description": "Called on every keystroke in the text input; receives (value: string)"
|
|
1182
|
+
},
|
|
1183
|
+
"onSelect": {
|
|
1184
|
+
"type": "function",
|
|
1185
|
+
"description": "Called when an option is selected or cleared; receives (value: string, option: object|null)"
|
|
1186
|
+
},
|
|
1187
|
+
"formGroup": {
|
|
1188
|
+
"type": "boolean",
|
|
1189
|
+
"default": true,
|
|
1190
|
+
"description": "Whether to wrap the label/hint/error/control in a `.usa-form-group`. Set to `false` when composing inside another form group."
|
|
1191
|
+
},
|
|
1192
|
+
"className": {
|
|
1193
|
+
"type": "string",
|
|
1194
|
+
"description": "Additional classes"
|
|
1195
|
+
}
|
|
1196
|
+
}
|
|
1197
|
+
},
|
|
1198
|
+
"copy-to-clipboard": {
|
|
1199
|
+
"component": "copy-to-clipboard",
|
|
1200
|
+
"version": 1,
|
|
1201
|
+
"required": [
|
|
1202
|
+
"copyText"
|
|
1203
|
+
],
|
|
1204
|
+
"props": {
|
|
1205
|
+
"copyText": {
|
|
1206
|
+
"type": "string",
|
|
1207
|
+
"description": "Text to copy to clipboard"
|
|
1208
|
+
},
|
|
1209
|
+
"label": {
|
|
1210
|
+
"type": "string",
|
|
1211
|
+
"description": "Visible text label on the button"
|
|
1212
|
+
},
|
|
1213
|
+
"tooltip": {
|
|
1214
|
+
"type": "string",
|
|
1215
|
+
"description": "Tooltip text; omit to hide the tooltip wrapper"
|
|
1216
|
+
},
|
|
1217
|
+
"copiedTooltip": {
|
|
1218
|
+
"type": "string",
|
|
1219
|
+
"description": "Tooltip text shown after copying (default: 'Copied')"
|
|
1220
|
+
},
|
|
1221
|
+
"className": {
|
|
1222
|
+
"type": "string",
|
|
1223
|
+
"description": "Additional CSS classes"
|
|
1224
|
+
}
|
|
1225
|
+
}
|
|
1226
|
+
},
|
|
1227
|
+
"date-picker": {
|
|
1228
|
+
"component": "date-picker",
|
|
1229
|
+
"version": 1,
|
|
1230
|
+
"required": [],
|
|
1231
|
+
"props": {
|
|
1232
|
+
"id": {
|
|
1233
|
+
"type": "string",
|
|
1234
|
+
"default": "appointment-date",
|
|
1235
|
+
"description": "id for the input. Label and hint ids are derived from this."
|
|
1236
|
+
},
|
|
1237
|
+
"name": {
|
|
1238
|
+
"type": "string",
|
|
1239
|
+
"description": "name attribute for the input. Defaults to id."
|
|
1240
|
+
},
|
|
1241
|
+
"label": {
|
|
1242
|
+
"type": "string",
|
|
1243
|
+
"description": "Label text for the field."
|
|
1244
|
+
},
|
|
1245
|
+
"hint": {
|
|
1246
|
+
"type": "string",
|
|
1247
|
+
"default": "mm/dd/yyyy",
|
|
1248
|
+
"description": "Hint text displayed below the label."
|
|
1249
|
+
},
|
|
1250
|
+
"error": {
|
|
1251
|
+
"type": "string",
|
|
1252
|
+
"description": "Error message. Renders aria-describedby and error styling."
|
|
1253
|
+
},
|
|
1254
|
+
"disabled": {
|
|
1255
|
+
"type": "boolean",
|
|
1256
|
+
"default": false,
|
|
1257
|
+
"description": "Disables the input."
|
|
1258
|
+
},
|
|
1259
|
+
"required": {
|
|
1260
|
+
"type": "boolean",
|
|
1261
|
+
"default": false,
|
|
1262
|
+
"description": "Marks the field as required."
|
|
1263
|
+
},
|
|
1264
|
+
"defaultValue": {
|
|
1265
|
+
"type": "string",
|
|
1266
|
+
"description": "Initial date (yyyy-mm-dd). Sets data-default-value on the usa-date-picker wrapper."
|
|
1267
|
+
},
|
|
1268
|
+
"minDate": {
|
|
1269
|
+
"type": "string",
|
|
1270
|
+
"description": "Earliest selectable date (yyyy-mm-dd). Sets data-min-date on the wrapper."
|
|
1271
|
+
},
|
|
1272
|
+
"maxDate": {
|
|
1273
|
+
"type": "string",
|
|
1274
|
+
"description": "Latest selectable date (yyyy-mm-dd). Sets data-max-date on the wrapper."
|
|
1275
|
+
},
|
|
1276
|
+
"rangeDate": {
|
|
1277
|
+
"type": "string",
|
|
1278
|
+
"description": "Companion date (yyyy-mm-dd) used to highlight a range on the calendar. Sets data-range-date on the wrapper."
|
|
1279
|
+
},
|
|
1280
|
+
"formGroup": {
|
|
1281
|
+
"type": "boolean",
|
|
1282
|
+
"default": true,
|
|
1283
|
+
"description": "Whether to wrap the label/hint/error/control in a `.usa-form-group`. Set to `false` when composing inside another form group."
|
|
1284
|
+
},
|
|
1285
|
+
"className": {
|
|
1286
|
+
"type": "string",
|
|
1287
|
+
"default": "",
|
|
1288
|
+
"description": "Additional classes for the usa-date-picker wrapper."
|
|
1289
|
+
}
|
|
1290
|
+
}
|
|
1291
|
+
},
|
|
1292
|
+
"date-range-picker": {
|
|
1293
|
+
"component": "date-range-picker",
|
|
1294
|
+
"version": 1,
|
|
1295
|
+
"required": [],
|
|
1296
|
+
"props": {
|
|
1297
|
+
"startId": {
|
|
1298
|
+
"type": "string",
|
|
1299
|
+
"default": "event-date-start",
|
|
1300
|
+
"description": "id for the start date input. Label and hint ids are derived from this."
|
|
1301
|
+
},
|
|
1302
|
+
"endId": {
|
|
1303
|
+
"type": "string",
|
|
1304
|
+
"default": "event-date-end",
|
|
1305
|
+
"description": "id for the end date input. Label and hint ids are derived from this."
|
|
1306
|
+
},
|
|
1307
|
+
"startName": {
|
|
1308
|
+
"type": "string",
|
|
1309
|
+
"description": "name attribute for the start date input. Defaults to startId."
|
|
1310
|
+
},
|
|
1311
|
+
"endName": {
|
|
1312
|
+
"type": "string",
|
|
1313
|
+
"description": "name attribute for the end date input. Defaults to endId."
|
|
1314
|
+
},
|
|
1315
|
+
"startLabel": {
|
|
1316
|
+
"type": "string",
|
|
1317
|
+
"default": "Event start date",
|
|
1318
|
+
"description": "Label text for the start date field."
|
|
1319
|
+
},
|
|
1320
|
+
"endLabel": {
|
|
1321
|
+
"type": "string",
|
|
1322
|
+
"default": "Event end date",
|
|
1323
|
+
"description": "Label text for the end date field."
|
|
1324
|
+
},
|
|
1325
|
+
"startHint": {
|
|
1326
|
+
"type": "string",
|
|
1327
|
+
"default": "mm/dd/yyyy",
|
|
1328
|
+
"description": "Hint text displayed below the start date label."
|
|
1329
|
+
},
|
|
1330
|
+
"endHint": {
|
|
1331
|
+
"type": "string",
|
|
1332
|
+
"default": "mm/dd/yyyy",
|
|
1333
|
+
"description": "Hint text displayed below the end date label."
|
|
1334
|
+
},
|
|
1335
|
+
"startError": {
|
|
1336
|
+
"type": "string",
|
|
1337
|
+
"description": "Error message for the start date field."
|
|
1338
|
+
},
|
|
1339
|
+
"endError": {
|
|
1340
|
+
"type": "string",
|
|
1341
|
+
"description": "Error message for the end date field."
|
|
1342
|
+
},
|
|
1343
|
+
"disabled": {
|
|
1344
|
+
"type": "boolean",
|
|
1345
|
+
"default": false,
|
|
1346
|
+
"description": "Disables both inputs."
|
|
1347
|
+
},
|
|
1348
|
+
"required": {
|
|
1349
|
+
"type": "boolean",
|
|
1350
|
+
"default": false,
|
|
1351
|
+
"description": "Marks both fields as required."
|
|
1352
|
+
},
|
|
1353
|
+
"defaultStartDate": {
|
|
1354
|
+
"type": "string",
|
|
1355
|
+
"description": "Initial start date (yyyy-mm-dd). Sets data-default-value on the start usa-date-picker wrapper."
|
|
1356
|
+
},
|
|
1357
|
+
"defaultEndDate": {
|
|
1358
|
+
"type": "string",
|
|
1359
|
+
"description": "Initial end date (yyyy-mm-dd). Sets data-default-value on the end usa-date-picker wrapper."
|
|
1360
|
+
},
|
|
1361
|
+
"minDate": {
|
|
1362
|
+
"type": "string",
|
|
1363
|
+
"description": "Earliest selectable date (yyyy-mm-dd). Sets data-min-date on the usa-date-range-picker wrapper."
|
|
1364
|
+
},
|
|
1365
|
+
"maxDate": {
|
|
1366
|
+
"type": "string",
|
|
1367
|
+
"description": "Latest selectable date (yyyy-mm-dd). Sets data-max-date on the usa-date-range-picker wrapper."
|
|
1368
|
+
},
|
|
1369
|
+
"className": {
|
|
1370
|
+
"type": "string",
|
|
1371
|
+
"default": "",
|
|
1372
|
+
"description": "Additional classes for the usa-date-range-picker wrapper."
|
|
1373
|
+
}
|
|
1374
|
+
}
|
|
1375
|
+
},
|
|
1376
|
+
"error-message": {
|
|
1377
|
+
"component": "error-message",
|
|
1378
|
+
"version": 1,
|
|
1379
|
+
"required": [],
|
|
1380
|
+
"props": {
|
|
1381
|
+
"id": {
|
|
1382
|
+
"type": "string",
|
|
1383
|
+
"description": "Element id, referenced by the associated field's aria-describedby"
|
|
1384
|
+
},
|
|
1385
|
+
"children": {
|
|
1386
|
+
"type": "string",
|
|
1387
|
+
"description": "Inner HTML or text"
|
|
1388
|
+
},
|
|
1389
|
+
"className": {
|
|
1390
|
+
"type": "string",
|
|
1391
|
+
"description": "Additional classes"
|
|
1392
|
+
}
|
|
1393
|
+
}
|
|
1394
|
+
},
|
|
1395
|
+
"eyebrow": {
|
|
1396
|
+
"component": "eyebrow",
|
|
1397
|
+
"version": 1,
|
|
1398
|
+
"required": [],
|
|
1399
|
+
"props": {
|
|
1400
|
+
"children": {
|
|
1401
|
+
"type": "string",
|
|
1402
|
+
"description": "Eyebrow text content"
|
|
1403
|
+
},
|
|
1404
|
+
"className": {
|
|
1405
|
+
"type": "string",
|
|
1406
|
+
"description": "Additional classes"
|
|
1407
|
+
}
|
|
1408
|
+
}
|
|
1409
|
+
},
|
|
1410
|
+
"fieldset": {
|
|
1411
|
+
"component": "fieldset",
|
|
1412
|
+
"version": 1,
|
|
1413
|
+
"required": [],
|
|
1414
|
+
"props": {
|
|
1415
|
+
"legend": {
|
|
1416
|
+
"type": "string",
|
|
1417
|
+
"description": "Text for the fieldset legend"
|
|
1418
|
+
},
|
|
1419
|
+
"largeLegend": {
|
|
1420
|
+
"type": "boolean",
|
|
1421
|
+
"description": "Whether to use the larger legend style (adds class `usa-legend--large`)"
|
|
1422
|
+
},
|
|
1423
|
+
"required": {
|
|
1424
|
+
"type": "boolean",
|
|
1425
|
+
"description": "Whether to indicate the field is required (adds an asterisk to the legend)"
|
|
1426
|
+
},
|
|
1427
|
+
"disabled": {
|
|
1428
|
+
"type": "boolean",
|
|
1429
|
+
"description": "Whether to disable all form controls within the fieldset"
|
|
1430
|
+
},
|
|
1431
|
+
"hint": {
|
|
1432
|
+
"type": "string",
|
|
1433
|
+
"description": "Group-level hint text, rendered after the legend"
|
|
1434
|
+
},
|
|
1435
|
+
"error": {
|
|
1436
|
+
"type": "string",
|
|
1437
|
+
"description": "Group-level error message, rendered after the hint"
|
|
1438
|
+
},
|
|
1439
|
+
"hintId": {
|
|
1440
|
+
"type": "string",
|
|
1441
|
+
"description": "Element id for the hint span"
|
|
1442
|
+
},
|
|
1443
|
+
"errorId": {
|
|
1444
|
+
"type": "string",
|
|
1445
|
+
"description": "Element id for the error message span"
|
|
1446
|
+
},
|
|
1447
|
+
"children": {
|
|
1448
|
+
"type": "string",
|
|
1449
|
+
"description": "Inner HTML or text"
|
|
1450
|
+
},
|
|
1451
|
+
"className": {
|
|
1452
|
+
"type": "string",
|
|
1453
|
+
"description": "Additional classes"
|
|
1454
|
+
}
|
|
1455
|
+
}
|
|
1456
|
+
},
|
|
1457
|
+
"file-input": {
|
|
1458
|
+
"component": "file-input",
|
|
1459
|
+
"version": 1,
|
|
1460
|
+
"required": [],
|
|
1461
|
+
"props": {
|
|
1462
|
+
"id": {
|
|
1463
|
+
"type": "string",
|
|
1464
|
+
"default": "file-input-single",
|
|
1465
|
+
"description": "id for the input. Label and hint ids are derived from this."
|
|
1466
|
+
},
|
|
1467
|
+
"name": {
|
|
1468
|
+
"type": "string",
|
|
1469
|
+
"description": "name attribute for the input. Defaults to id."
|
|
1470
|
+
},
|
|
1471
|
+
"label": {
|
|
1472
|
+
"type": "string",
|
|
1473
|
+
"description": "Label text for the field."
|
|
1474
|
+
},
|
|
1475
|
+
"hint": {
|
|
1476
|
+
"type": "string",
|
|
1477
|
+
"description": "Hint text displayed below the label."
|
|
1478
|
+
},
|
|
1479
|
+
"fileListHint": {
|
|
1480
|
+
"type": "string",
|
|
1481
|
+
"default": "Selected files",
|
|
1482
|
+
"description": "Heading/hint text shown above the managed file list, passed to FileList's hint prop. React only."
|
|
1483
|
+
},
|
|
1484
|
+
"error": {
|
|
1485
|
+
"type": "string",
|
|
1486
|
+
"description": "Error message. Renders aria-describedby and error styling."
|
|
1487
|
+
},
|
|
1488
|
+
"disabled": {
|
|
1489
|
+
"type": "boolean",
|
|
1490
|
+
"default": false,
|
|
1491
|
+
"description": "Disables the input."
|
|
1492
|
+
},
|
|
1493
|
+
"required": {
|
|
1494
|
+
"type": "boolean",
|
|
1495
|
+
"default": false,
|
|
1496
|
+
"description": "Marks the field as required."
|
|
1497
|
+
},
|
|
1498
|
+
"accept": {
|
|
1499
|
+
"type": "string",
|
|
1500
|
+
"description": "Comma-separated list of accepted file types/extensions, e.g. \".pdf,.txt\"."
|
|
1501
|
+
},
|
|
1502
|
+
"multiple": {
|
|
1503
|
+
"type": "boolean",
|
|
1504
|
+
"default": false,
|
|
1505
|
+
"description": "Allows selecting more than one file."
|
|
1506
|
+
},
|
|
1507
|
+
"manageIndividualFiles": {
|
|
1508
|
+
"type": "boolean",
|
|
1509
|
+
"default": false,
|
|
1510
|
+
"description": "When multiple is true, selects files one at a time into a managed list where each file has its own Delete action (VA.gov file-input-multiple pattern). React only."
|
|
1511
|
+
},
|
|
1512
|
+
"invalidFileTypeMessage": {
|
|
1513
|
+
"type": "string",
|
|
1514
|
+
"description": "Custom error message shown when a selected file doesn't match `accept`. Sets data-errormessage."
|
|
1515
|
+
},
|
|
1516
|
+
"formGroup": {
|
|
1517
|
+
"type": "boolean",
|
|
1518
|
+
"default": true,
|
|
1519
|
+
"description": "Whether to wrap the label/hint/error/control in a `.usa-form-group`. Set to `false` when composing inside another form group."
|
|
1520
|
+
},
|
|
1521
|
+
"className": {
|
|
1522
|
+
"type": "string",
|
|
1523
|
+
"default": "",
|
|
1524
|
+
"description": "Additional classes for the usa-file-input."
|
|
1525
|
+
},
|
|
1526
|
+
"defaultFiles": {
|
|
1527
|
+
"type": "array",
|
|
1528
|
+
"description": "When manageIndividualFiles is true, seeds the managed file list with files that already exist on the server (no browser File object). Each entry is { name, size?, url? } — omit size to show no size, provide url to render the name as a download link. React only."
|
|
1529
|
+
}
|
|
1530
|
+
}
|
|
1531
|
+
},
|
|
1532
|
+
"file-list": {
|
|
1533
|
+
"component": "file-list",
|
|
1534
|
+
"version": 1,
|
|
1535
|
+
"required": [],
|
|
1536
|
+
"props": {
|
|
1537
|
+
"files": {
|
|
1538
|
+
"type": "array",
|
|
1539
|
+
"description": "Files to render as rows. Each entry is { key, file?, name?, size?, url?, onRemove? } — key uniquely identifies the row; file is a browser File (name/size read from it); name/size describe entries with no File object (e.g. files already on the server); url renders the name as a download link; onRemove overrides the onRemove prop for just this row. React only."
|
|
1540
|
+
},
|
|
1541
|
+
"hint": {
|
|
1542
|
+
"type": "string",
|
|
1543
|
+
"default": "Selected files",
|
|
1544
|
+
"description": "Heading/hint text shown above the file list."
|
|
1545
|
+
},
|
|
1546
|
+
"onRemove": {
|
|
1547
|
+
"type": "function",
|
|
1548
|
+
"description": "Called with the removed entry when its Delete button is clicked. Applies to every row unless that row provides its own onRemove, which takes priority. Omit both to hide every Delete button. React only."
|
|
1549
|
+
},
|
|
1550
|
+
"disabled": {
|
|
1551
|
+
"type": "boolean",
|
|
1552
|
+
"default": false,
|
|
1553
|
+
"description": "Hides every row's Delete button."
|
|
1554
|
+
},
|
|
1555
|
+
"className": {
|
|
1556
|
+
"type": "string",
|
|
1557
|
+
"description": "Additional classes for the outer wrapper."
|
|
1558
|
+
}
|
|
1559
|
+
}
|
|
1560
|
+
},
|
|
1561
|
+
"footer": {
|
|
1562
|
+
"component": "footer",
|
|
1563
|
+
"version": 1,
|
|
1564
|
+
"required": [],
|
|
1565
|
+
"props": {
|
|
1566
|
+
"variant": {
|
|
1567
|
+
"type": "select",
|
|
1568
|
+
"options": [
|
|
1569
|
+
"big",
|
|
1570
|
+
"medium",
|
|
1571
|
+
"slim"
|
|
1572
|
+
],
|
|
1573
|
+
"default": "medium",
|
|
1574
|
+
"description": "Footer layout variant. 'big' includes collapsible nav columns and an optional sign-up form. 'medium' shows flat primary links. 'slim' puts contact info in the primary bar."
|
|
1575
|
+
},
|
|
1576
|
+
"returnToTop": {
|
|
1577
|
+
"type": "boolean",
|
|
1578
|
+
"default": true,
|
|
1579
|
+
"description": "Show the 'Return to top' link. Set false to hide."
|
|
1580
|
+
},
|
|
1581
|
+
"returnToTopLabel": {
|
|
1582
|
+
"type": "string",
|
|
1583
|
+
"default": "Return to top",
|
|
1584
|
+
"description": "Label for the return-to-top link."
|
|
1585
|
+
},
|
|
1586
|
+
"returnToTopHref": {
|
|
1587
|
+
"type": "string",
|
|
1588
|
+
"default": "#",
|
|
1589
|
+
"description": "Anchor href for the return-to-top link."
|
|
1590
|
+
},
|
|
1591
|
+
"navColumns": {
|
|
1592
|
+
"type": "object",
|
|
1593
|
+
"description": "(big variant) Array of nav column objects: [{ heading, links: [{ text, href, ariaLabel? }] }]"
|
|
1594
|
+
},
|
|
1595
|
+
"navLinks": {
|
|
1596
|
+
"type": "object",
|
|
1597
|
+
"description": "(medium/slim variants) Array of primary nav links: [{ text, href, ariaLabel? }]"
|
|
1598
|
+
},
|
|
1599
|
+
"navAriaLabel": {
|
|
1600
|
+
"type": "string",
|
|
1601
|
+
"default": "Footer navigation",
|
|
1602
|
+
"description": "Accessible aria-label for the footer nav element."
|
|
1603
|
+
},
|
|
1604
|
+
"signUp": {
|
|
1605
|
+
"type": "object",
|
|
1606
|
+
"description": "(big variant, optional) Email sign-up config: { heading?, emailLabel?, emailId?, buttonText?, action? }"
|
|
1607
|
+
},
|
|
1608
|
+
"branding": {
|
|
1609
|
+
"type": "object",
|
|
1610
|
+
"description": "Branding config (same shape as Header branding): { title?, symbol?, logo?, alt? }. Use 'symbol' + 'title' to show a decorative image beside agency name text. Use 'logo' for a full standalone logo image (title used as alt text). Add 'symbolInverse'/'logoInverse' to supply dark-shell artwork the theme swaps to."
|
|
1611
|
+
},
|
|
1612
|
+
"brandingUrl": {
|
|
1613
|
+
"type": "string",
|
|
1614
|
+
"default": "/",
|
|
1615
|
+
"description": "URL for the branding link (wraps the logo/symbol image and title)."
|
|
1616
|
+
},
|
|
1617
|
+
"socialLinks": {
|
|
1618
|
+
"type": "object",
|
|
1619
|
+
"description": "Array of social icon links: [{ icon (img src), href, alt }]"
|
|
1620
|
+
},
|
|
1621
|
+
"contactHeading": {
|
|
1622
|
+
"type": "string",
|
|
1623
|
+
"description": "Heading label above the contact info block."
|
|
1624
|
+
},
|
|
1625
|
+
"contactPhone": {
|
|
1626
|
+
"type": "object",
|
|
1627
|
+
"description": "Phone contact. Object: { href, text } — or a plain string (auto-prefixed with tel:)."
|
|
1628
|
+
},
|
|
1629
|
+
"contactEmail": {
|
|
1630
|
+
"type": "object",
|
|
1631
|
+
"description": "Email contact. Object: { href, text } — or a plain string (auto-prefixed with mailto:)."
|
|
1632
|
+
},
|
|
1633
|
+
"contactLinks": {
|
|
1634
|
+
"type": "object",
|
|
1635
|
+
"description": "Additional contact links: [{ href, text }]"
|
|
1636
|
+
},
|
|
1637
|
+
"className": {
|
|
1638
|
+
"type": "string",
|
|
1639
|
+
"default": "",
|
|
1640
|
+
"description": "Additional CSS classes applied to the root footer element."
|
|
1641
|
+
}
|
|
1642
|
+
}
|
|
1643
|
+
},
|
|
1644
|
+
"form-group": {
|
|
1645
|
+
"component": "form-group",
|
|
1646
|
+
"version": 1,
|
|
1647
|
+
"required": [],
|
|
1648
|
+
"props": {
|
|
1649
|
+
"children": {
|
|
1650
|
+
"type": "string",
|
|
1651
|
+
"default": null,
|
|
1652
|
+
"description": "Inner HTML content of the form group."
|
|
1653
|
+
},
|
|
1654
|
+
"error": {
|
|
1655
|
+
"type": "boolean",
|
|
1656
|
+
"default": false,
|
|
1657
|
+
"description": "Applies the error modifier class to the form group wrapper."
|
|
1658
|
+
},
|
|
1659
|
+
"className": {
|
|
1660
|
+
"type": "string",
|
|
1661
|
+
"default": "",
|
|
1662
|
+
"description": "Additional CSS classes to apply to the form group wrapper."
|
|
1663
|
+
}
|
|
1664
|
+
}
|
|
1665
|
+
},
|
|
1666
|
+
"header": {
|
|
1667
|
+
"component": "header",
|
|
1668
|
+
"version": 1,
|
|
1669
|
+
"required": [],
|
|
1670
|
+
"props": {
|
|
1671
|
+
"id": {
|
|
1672
|
+
"type": "string",
|
|
1673
|
+
"default": "header",
|
|
1674
|
+
"description": "Unique identifier for the header component"
|
|
1675
|
+
},
|
|
1676
|
+
"branding": {
|
|
1677
|
+
"type": "object",
|
|
1678
|
+
"description": "Branding config. Flat: { title?, symbol?, logo?, alt? }. Responsive: { responsive: { base: {...}, lg: {...} } }. Theme-responsive: add symbolInverse/logoInverse to supply dark-shell artwork the theme swaps to."
|
|
1679
|
+
},
|
|
1680
|
+
"projectUrl": {
|
|
1681
|
+
"type": "string",
|
|
1682
|
+
"default": "/",
|
|
1683
|
+
"description": "URL for the branding link"
|
|
1684
|
+
},
|
|
1685
|
+
"navSections": {
|
|
1686
|
+
"type": "object",
|
|
1687
|
+
"description": "Array of menu section objects with 'title', and mutually exclusive 'links' or 'href' properties"
|
|
1688
|
+
},
|
|
1689
|
+
"secondaryLinks": {
|
|
1690
|
+
"type": "object",
|
|
1691
|
+
"description": "Array of secondary link objects with 'href' and 'text' properties"
|
|
1692
|
+
},
|
|
1693
|
+
"searchProps": {
|
|
1694
|
+
"type": "object",
|
|
1695
|
+
"description": "(OPTIONAL) Configuration object for the search component",
|
|
1696
|
+
"component": "search"
|
|
1697
|
+
},
|
|
1698
|
+
"extended": {
|
|
1699
|
+
"type": "boolean",
|
|
1700
|
+
"default": false,
|
|
1701
|
+
"description": "Whether to use the extended header style"
|
|
1702
|
+
},
|
|
1703
|
+
"megamenu": {
|
|
1704
|
+
"type": "boolean",
|
|
1705
|
+
"default": false,
|
|
1706
|
+
"description": "Whether to use the megamenu style for navigation sections"
|
|
1707
|
+
},
|
|
1708
|
+
"useMenuIcon": {
|
|
1709
|
+
"type": "boolean",
|
|
1710
|
+
"default": false,
|
|
1711
|
+
"description": "Whether to use a menu icon instead of the word 'Menu'"
|
|
1712
|
+
},
|
|
1713
|
+
"stickyNav": {
|
|
1714
|
+
"type": "boolean",
|
|
1715
|
+
"default": false,
|
|
1716
|
+
"description": "Whether the navigation should become sticky when scrolling"
|
|
1717
|
+
},
|
|
1718
|
+
"className": {
|
|
1719
|
+
"type": "string",
|
|
1720
|
+
"description": "Additional classes"
|
|
1721
|
+
}
|
|
1722
|
+
}
|
|
1723
|
+
},
|
|
1724
|
+
"hero": {
|
|
1725
|
+
"component": "hero",
|
|
1726
|
+
"version": 1,
|
|
1727
|
+
"required": [],
|
|
1728
|
+
"props": {
|
|
1729
|
+
"title": {
|
|
1730
|
+
"type": "string",
|
|
1731
|
+
"description": "The main heading text"
|
|
1732
|
+
},
|
|
1733
|
+
"callout": {
|
|
1734
|
+
"type": "string",
|
|
1735
|
+
"description": "Optional alternate heading span displayed above the main title"
|
|
1736
|
+
},
|
|
1737
|
+
"paragraph": {
|
|
1738
|
+
"type": "string",
|
|
1739
|
+
"description": "Optional body paragraph text"
|
|
1740
|
+
},
|
|
1741
|
+
"button": {
|
|
1742
|
+
"type": "object",
|
|
1743
|
+
"description": "Optional call-to-action button. Mutually exclusive with search.",
|
|
1744
|
+
"properties": {
|
|
1745
|
+
"href": {
|
|
1746
|
+
"type": "string",
|
|
1747
|
+
"description": "Button link URL"
|
|
1748
|
+
},
|
|
1749
|
+
"text": {
|
|
1750
|
+
"type": "string",
|
|
1751
|
+
"description": "Button label text"
|
|
1752
|
+
},
|
|
1753
|
+
"onClick": {
|
|
1754
|
+
"type": "function",
|
|
1755
|
+
"description": "Optional click handler for the button"
|
|
1756
|
+
}
|
|
1757
|
+
}
|
|
1758
|
+
},
|
|
1759
|
+
"searchProps": {
|
|
1760
|
+
"type": "object",
|
|
1761
|
+
"description": "Optional search form. When provided, renders a Search component instead of the button.",
|
|
1762
|
+
"component": "search"
|
|
1763
|
+
},
|
|
1764
|
+
"backgroundImage": {
|
|
1765
|
+
"type": "string",
|
|
1766
|
+
"description": "URL of the background image applied via inline style"
|
|
1767
|
+
},
|
|
1768
|
+
"overlay": {
|
|
1769
|
+
"type": "boolean",
|
|
1770
|
+
"default": true,
|
|
1771
|
+
"description": "When true, adds a semi-transparent dark overlay over the background image to improve text legibility"
|
|
1772
|
+
},
|
|
1773
|
+
"ariaLabel": {
|
|
1774
|
+
"type": "string",
|
|
1775
|
+
"description": "Accessible label for the section element (defaults to 'Introduction')"
|
|
1776
|
+
},
|
|
1777
|
+
"className": {
|
|
1778
|
+
"type": "string",
|
|
1779
|
+
"description": "Additional CSS classes"
|
|
1780
|
+
}
|
|
1781
|
+
}
|
|
1782
|
+
},
|
|
1783
|
+
"hint": {
|
|
1784
|
+
"component": "hint",
|
|
1785
|
+
"version": 1,
|
|
1786
|
+
"required": [],
|
|
1787
|
+
"props": {
|
|
1788
|
+
"id": {
|
|
1789
|
+
"type": "string",
|
|
1790
|
+
"description": "Element id, referenced by the associated field's aria-describedby"
|
|
1791
|
+
},
|
|
1792
|
+
"children": {
|
|
1793
|
+
"type": "string",
|
|
1794
|
+
"description": "Inner HTML or text"
|
|
1795
|
+
},
|
|
1796
|
+
"className": {
|
|
1797
|
+
"type": "string",
|
|
1798
|
+
"description": "Additional classes"
|
|
1799
|
+
}
|
|
1800
|
+
}
|
|
1801
|
+
},
|
|
1802
|
+
"icon": {
|
|
1803
|
+
"component": "icon",
|
|
1804
|
+
"version": 1,
|
|
1805
|
+
"required": [],
|
|
1806
|
+
"props": {
|
|
1807
|
+
"name": {
|
|
1808
|
+
"type": "string",
|
|
1809
|
+
"default": "accessibility_new",
|
|
1810
|
+
"description": "The name of the icon to be displayed, which corresponds to the icon's identifier in the sprite sheet or icon library being used."
|
|
1811
|
+
},
|
|
1812
|
+
"size": {
|
|
1813
|
+
"type": "select",
|
|
1814
|
+
"options": [
|
|
1815
|
+
null,
|
|
1816
|
+
1,
|
|
1817
|
+
2,
|
|
1818
|
+
3,
|
|
1819
|
+
4,
|
|
1820
|
+
5,
|
|
1821
|
+
6,
|
|
1822
|
+
7,
|
|
1823
|
+
8,
|
|
1824
|
+
9
|
|
1825
|
+
],
|
|
1826
|
+
"default": null,
|
|
1827
|
+
"description": "The size of the icon, which can be specified as a predefined value corresponding to specific dimensions or as a custom value to allow for more flexible sizing."
|
|
1828
|
+
},
|
|
1829
|
+
"color": {
|
|
1830
|
+
"type": "string",
|
|
1831
|
+
"default": null,
|
|
1832
|
+
"description": "The color of the icon, which can be specified using a color name, hex code, RGB value, or any other valid CSS color format to customize the appearance of the icon."
|
|
1833
|
+
},
|
|
1834
|
+
"staticUrlPrefix": {
|
|
1835
|
+
"type": "string",
|
|
1836
|
+
"default": "/img/sprite.svg#",
|
|
1837
|
+
"description": "The URL prefix for the static assets, which is used to construct the full URL for the icon sprite sheet or icon library being used."
|
|
1838
|
+
},
|
|
1839
|
+
"className": {
|
|
1840
|
+
"type": "string",
|
|
1841
|
+
"default": "",
|
|
1842
|
+
"description": "Additional CSS classes to apply to the icon component."
|
|
1843
|
+
},
|
|
1844
|
+
"alt": {
|
|
1845
|
+
"type": "string",
|
|
1846
|
+
"default": "",
|
|
1847
|
+
"description": "Alternative text for the icon, used for accessibility purposes to provide a textual description of the icon's meaning or function."
|
|
1848
|
+
},
|
|
1849
|
+
"style": {
|
|
1850
|
+
"type": "string",
|
|
1851
|
+
"default": "",
|
|
1852
|
+
"description": "Inline styles to apply to the icon component."
|
|
1853
|
+
}
|
|
1854
|
+
}
|
|
1855
|
+
},
|
|
1856
|
+
"icon-list": {
|
|
1857
|
+
"component": "icon-list",
|
|
1858
|
+
"version": 1,
|
|
1859
|
+
"required": [],
|
|
1860
|
+
"props": {
|
|
1861
|
+
"items": {
|
|
1862
|
+
"type": "array",
|
|
1863
|
+
"description": "Array of icon list items.",
|
|
1864
|
+
"items": {
|
|
1865
|
+
"type": "object",
|
|
1866
|
+
"description": "Icon list item.",
|
|
1867
|
+
"properties": {
|
|
1868
|
+
"iconName": {
|
|
1869
|
+
"type": "string",
|
|
1870
|
+
"description": "Name of the icon to display, from the USWDS sprite (passed as the icon's name prop)."
|
|
1871
|
+
},
|
|
1872
|
+
"iconColor": {
|
|
1873
|
+
"type": "string",
|
|
1874
|
+
"description": "Color of the icon (passed as the icon's color prop)."
|
|
1875
|
+
},
|
|
1876
|
+
"iconSize": {
|
|
1877
|
+
"type": "number",
|
|
1878
|
+
"description": "Size of the icon (passed as the icon's size prop)."
|
|
1879
|
+
},
|
|
1880
|
+
"iconClassName": {
|
|
1881
|
+
"type": "string",
|
|
1882
|
+
"description": "Additional classes for the icon."
|
|
1883
|
+
},
|
|
1884
|
+
"title": {
|
|
1885
|
+
"type": "string",
|
|
1886
|
+
"description": "Optional heading text for the item."
|
|
1887
|
+
},
|
|
1888
|
+
"content": {
|
|
1889
|
+
"type": [
|
|
1890
|
+
"string",
|
|
1891
|
+
"slot"
|
|
1892
|
+
],
|
|
1893
|
+
"description": "Item text or rich content."
|
|
1894
|
+
},
|
|
1895
|
+
"itemClassName": {
|
|
1896
|
+
"type": "string",
|
|
1897
|
+
"description": "Additional classes for the list item element."
|
|
1898
|
+
},
|
|
1899
|
+
"contentClassName": {
|
|
1900
|
+
"type": "string",
|
|
1901
|
+
"description": "Additional classes for the item's content container."
|
|
1902
|
+
}
|
|
1903
|
+
}
|
|
1904
|
+
}
|
|
1905
|
+
},
|
|
1906
|
+
"primary": {
|
|
1907
|
+
"type": "boolean",
|
|
1908
|
+
"default": false,
|
|
1909
|
+
"description": "Adds the usa-icon-list--primary modifier."
|
|
1910
|
+
},
|
|
1911
|
+
"size": {
|
|
1912
|
+
"type": "select",
|
|
1913
|
+
"options": [
|
|
1914
|
+
null,
|
|
1915
|
+
"lg"
|
|
1916
|
+
],
|
|
1917
|
+
"default": null,
|
|
1918
|
+
"description": "Optional list size modifier. Use lg for usa-icon-list--size-lg."
|
|
1919
|
+
},
|
|
1920
|
+
"className": {
|
|
1921
|
+
"type": "string",
|
|
1922
|
+
"description": "Additional classes"
|
|
1923
|
+
}
|
|
1924
|
+
}
|
|
1925
|
+
},
|
|
1926
|
+
"identifier": {
|
|
1927
|
+
"component": "identifier",
|
|
1928
|
+
"version": 1,
|
|
1929
|
+
"required": [],
|
|
1930
|
+
"props": {
|
|
1931
|
+
"domain": {
|
|
1932
|
+
"type": "string",
|
|
1933
|
+
"description": "Agency domain displayed in the identifier."
|
|
1934
|
+
},
|
|
1935
|
+
"language": {
|
|
1936
|
+
"type": "select",
|
|
1937
|
+
"options": [
|
|
1938
|
+
"en",
|
|
1939
|
+
"es"
|
|
1940
|
+
],
|
|
1941
|
+
"description": "Language for labels and helper text."
|
|
1942
|
+
},
|
|
1943
|
+
"parentAgencies": {
|
|
1944
|
+
"type": "array",
|
|
1945
|
+
"description": "Array of parent agency links used in the disclaimer.",
|
|
1946
|
+
"items": {
|
|
1947
|
+
"type": "object",
|
|
1948
|
+
"description": "Parent agency.",
|
|
1949
|
+
"properties": {
|
|
1950
|
+
"name": {
|
|
1951
|
+
"type": "string",
|
|
1952
|
+
"description": "Agency name."
|
|
1953
|
+
},
|
|
1954
|
+
"href": {
|
|
1955
|
+
"type": "string",
|
|
1956
|
+
"description": "Link to the agency's site."
|
|
1957
|
+
}
|
|
1958
|
+
}
|
|
1959
|
+
}
|
|
1960
|
+
},
|
|
1961
|
+
"logoProps": {
|
|
1962
|
+
"type": "array",
|
|
1963
|
+
"description": "Array of avatar-style logos.",
|
|
1964
|
+
"items": {
|
|
1965
|
+
"type": "object",
|
|
1966
|
+
"description": "Logo item. Mirrors the avatar component's props, restricted to the image variant.",
|
|
1967
|
+
"component": "avatar",
|
|
1968
|
+
"omit": [
|
|
1969
|
+
"variant",
|
|
1970
|
+
"value",
|
|
1971
|
+
"tooltip",
|
|
1972
|
+
"className",
|
|
1973
|
+
"contentClassName"
|
|
1974
|
+
],
|
|
1975
|
+
"properties": {
|
|
1976
|
+
"shape": {
|
|
1977
|
+
"type": "select",
|
|
1978
|
+
"options": [
|
|
1979
|
+
null,
|
|
1980
|
+
"circle",
|
|
1981
|
+
"rounded-sm",
|
|
1982
|
+
"rounded-md",
|
|
1983
|
+
"rounded-lg",
|
|
1984
|
+
"rounded-xl"
|
|
1985
|
+
],
|
|
1986
|
+
"description": "Shape utility for the logo image, overriding logoShape for this item."
|
|
1987
|
+
}
|
|
1988
|
+
}
|
|
1989
|
+
}
|
|
1990
|
+
},
|
|
1991
|
+
"requiredLinks": {
|
|
1992
|
+
"type": "array",
|
|
1993
|
+
"description": "Array of required footer links.",
|
|
1994
|
+
"items": {
|
|
1995
|
+
"type": [
|
|
1996
|
+
"string",
|
|
1997
|
+
"object"
|
|
1998
|
+
],
|
|
1999
|
+
"description": "A link label string (uses the default href for that label), or a { href, label } object.",
|
|
2000
|
+
"properties": {
|
|
2001
|
+
"href": {
|
|
2002
|
+
"type": "string",
|
|
2003
|
+
"description": "Link URL."
|
|
2004
|
+
},
|
|
2005
|
+
"label": {
|
|
2006
|
+
"type": "string",
|
|
2007
|
+
"description": "Link text."
|
|
2008
|
+
}
|
|
2009
|
+
}
|
|
2010
|
+
}
|
|
2011
|
+
},
|
|
2012
|
+
"taxpayerDisclaimer": {
|
|
2013
|
+
"type": "boolean",
|
|
2014
|
+
"description": "Appends the taxpayer disclaimer sentence to the identity disclaimer."
|
|
2015
|
+
},
|
|
2016
|
+
"overlapAvatars": {
|
|
2017
|
+
"type": "boolean",
|
|
2018
|
+
"description": "Apply overlap styling to avatar logos."
|
|
2019
|
+
},
|
|
2020
|
+
"logoShape": {
|
|
2021
|
+
"type": "select",
|
|
2022
|
+
"options": [
|
|
2023
|
+
null,
|
|
2024
|
+
"circle",
|
|
2025
|
+
"rounded-sm",
|
|
2026
|
+
"rounded-md",
|
|
2027
|
+
"rounded-lg",
|
|
2028
|
+
"rounded-xl"
|
|
2029
|
+
],
|
|
2030
|
+
"description": "Default shape applied to all logos. Per-logo shape field takes precedence."
|
|
2031
|
+
},
|
|
2032
|
+
"className": {
|
|
2033
|
+
"type": "string",
|
|
2034
|
+
"description": "Additional classes"
|
|
2035
|
+
}
|
|
2036
|
+
}
|
|
2037
|
+
},
|
|
2038
|
+
"image": {
|
|
2039
|
+
"component": "image",
|
|
2040
|
+
"version": 1,
|
|
2041
|
+
"required": [
|
|
2042
|
+
"src"
|
|
2043
|
+
],
|
|
2044
|
+
"props": {
|
|
2045
|
+
"src": {
|
|
2046
|
+
"type": "string",
|
|
2047
|
+
"description": "Image source URL"
|
|
2048
|
+
},
|
|
2049
|
+
"alt": {
|
|
2050
|
+
"type": "string",
|
|
2051
|
+
"description": "Alt text for accessibility"
|
|
2052
|
+
},
|
|
2053
|
+
"href": {
|
|
2054
|
+
"type": "string",
|
|
2055
|
+
"description": "(OPTIONAL) If provided, the image will be wrapped in a link pointing to this URL"
|
|
2056
|
+
},
|
|
2057
|
+
"rounded": {
|
|
2058
|
+
"type": "boolean",
|
|
2059
|
+
"default": false,
|
|
2060
|
+
"description": "Whether to apply rounded corners"
|
|
2061
|
+
},
|
|
2062
|
+
"circular": {
|
|
2063
|
+
"type": "boolean",
|
|
2064
|
+
"default": false,
|
|
2065
|
+
"description": "Whether to make the image circular"
|
|
2066
|
+
},
|
|
2067
|
+
"caption": {
|
|
2068
|
+
"type": "string",
|
|
2069
|
+
"description": "Caption text for the image"
|
|
2070
|
+
},
|
|
2071
|
+
"hideCaption": {
|
|
2072
|
+
"type": "boolean",
|
|
2073
|
+
"default": false,
|
|
2074
|
+
"description": "Whether to visually hide the caption while keeping it accessible to screen readers"
|
|
2075
|
+
},
|
|
2076
|
+
"objectFit": {
|
|
2077
|
+
"type": "select",
|
|
2078
|
+
"description": "How the image should be resized to fit its container",
|
|
2079
|
+
"options": [
|
|
2080
|
+
"cover",
|
|
2081
|
+
"contain",
|
|
2082
|
+
"fill",
|
|
2083
|
+
"none",
|
|
2084
|
+
"scale-down"
|
|
2085
|
+
]
|
|
2086
|
+
},
|
|
2087
|
+
"maxWidth": {
|
|
2088
|
+
"type": "string",
|
|
2089
|
+
"description": "Maximum width of the image container (CSS value like '300px' or '50%')"
|
|
2090
|
+
},
|
|
2091
|
+
"maxHeight": {
|
|
2092
|
+
"type": "string",
|
|
2093
|
+
"description": "Maximum height of the image container (CSS value like '200px' or '50%')"
|
|
2094
|
+
},
|
|
2095
|
+
"className": {
|
|
2096
|
+
"type": "string",
|
|
2097
|
+
"description": "Additional CSS classes"
|
|
2098
|
+
}
|
|
2099
|
+
}
|
|
2100
|
+
},
|
|
2101
|
+
"in-page-nav": {
|
|
2102
|
+
"component": "in-page-nav",
|
|
2103
|
+
"version": 1,
|
|
2104
|
+
"required": [],
|
|
2105
|
+
"props": {
|
|
2106
|
+
"id": {
|
|
2107
|
+
"type": "string",
|
|
2108
|
+
"default": "in-page-nav",
|
|
2109
|
+
"description": "id for the aside element. The observed content container id is derived from this (<id>-content) unless mainContentSelector is set."
|
|
2110
|
+
},
|
|
2111
|
+
"headingElements": {
|
|
2112
|
+
"type": "string",
|
|
2113
|
+
"default": "h2 h3",
|
|
2114
|
+
"description": "Space-separated heading levels to include in the link list. Sets data-heading-elements."
|
|
2115
|
+
},
|
|
2116
|
+
"mainContentSelector": {
|
|
2117
|
+
"type": "string",
|
|
2118
|
+
"description": "CSS selector for the element the component pulls headings from. Defaults to this instance's own generated content container (#<id>-content). Sets data-main-content-selector."
|
|
2119
|
+
},
|
|
2120
|
+
"titleHeadingLevel": {
|
|
2121
|
+
"type": "string",
|
|
2122
|
+
"default": "h4",
|
|
2123
|
+
"description": "Heading level of the nav's own title. Sets data-title-heading-level."
|
|
2124
|
+
},
|
|
2125
|
+
"titleText": {
|
|
2126
|
+
"type": "string",
|
|
2127
|
+
"default": "On this page",
|
|
2128
|
+
"description": "Text of the nav's title heading. Sets data-title-text."
|
|
2129
|
+
},
|
|
2130
|
+
"scrollOffset": {
|
|
2131
|
+
"type": "number",
|
|
2132
|
+
"default": 0,
|
|
2133
|
+
"description": "Pixels to offset scroll from the top of the parent element. Sets data-scroll-offset."
|
|
2134
|
+
},
|
|
2135
|
+
"rootMargin": {
|
|
2136
|
+
"type": "string",
|
|
2137
|
+
"default": "0px 0px 0px 0px",
|
|
2138
|
+
"description": "Observable margin around the root used to calculate the active section. Sets data-root-margin."
|
|
2139
|
+
},
|
|
2140
|
+
"threshold": {
|
|
2141
|
+
"type": "number",
|
|
2142
|
+
"default": 1,
|
|
2143
|
+
"description": "Percentage (0-1) of a section that must be visible before it's marked current. Sets data-threshold."
|
|
2144
|
+
},
|
|
2145
|
+
"minimumHeadingCount": {
|
|
2146
|
+
"type": "number",
|
|
2147
|
+
"default": 2,
|
|
2148
|
+
"description": "Minimum number of matching headings required for the component to initialize. Sets data-minimum-heading-count."
|
|
2149
|
+
},
|
|
2150
|
+
"content": {
|
|
2151
|
+
"type": "string",
|
|
2152
|
+
"description": "HTML content (with headings) to render inside the observed content container. Ignored if children are provided (React only)."
|
|
2153
|
+
},
|
|
2154
|
+
"className": {
|
|
2155
|
+
"type": "string",
|
|
2156
|
+
"default": "",
|
|
2157
|
+
"description": "Additional classes for the usa-in-page-nav aside."
|
|
2158
|
+
},
|
|
2159
|
+
"contentClassName": {
|
|
2160
|
+
"type": "string",
|
|
2161
|
+
"default": "",
|
|
2162
|
+
"description": "Additional classes for the observed content container."
|
|
2163
|
+
}
|
|
2164
|
+
}
|
|
2165
|
+
},
|
|
2166
|
+
"indicator": {
|
|
2167
|
+
"component": "indicator",
|
|
2168
|
+
"version": 1,
|
|
2169
|
+
"required": [],
|
|
2170
|
+
"props": {
|
|
2171
|
+
"items": {
|
|
2172
|
+
"type": "object",
|
|
2173
|
+
"description": "Array of indicator badge objects. Each item supports: className (classes beyond usx-indicator-item), label (text content), and style (inline styles)."
|
|
2174
|
+
},
|
|
2175
|
+
"children": {
|
|
2176
|
+
"type": "string",
|
|
2177
|
+
"description": "The element being decorated by the indicator badges."
|
|
2178
|
+
},
|
|
2179
|
+
"className": {
|
|
2180
|
+
"type": "string",
|
|
2181
|
+
"description": "Additional CSS classes to apply to the indicator wrapper."
|
|
2182
|
+
}
|
|
2183
|
+
}
|
|
2184
|
+
},
|
|
2185
|
+
"input": {
|
|
2186
|
+
"component": "input",
|
|
2187
|
+
"version": 1,
|
|
2188
|
+
"required": [],
|
|
2189
|
+
"props": {
|
|
2190
|
+
"label": {
|
|
2191
|
+
"type": "string",
|
|
2192
|
+
"default": null,
|
|
2193
|
+
"description": "The label for the input field. If provided, it will render a label element associated with the control."
|
|
2194
|
+
},
|
|
2195
|
+
"id": {
|
|
2196
|
+
"type": "string",
|
|
2197
|
+
"default": null,
|
|
2198
|
+
"description": "A unique identifier for the input field, which can be used to associate the label with the input element and for accessibility purposes."
|
|
2199
|
+
},
|
|
2200
|
+
"name": {
|
|
2201
|
+
"type": "string",
|
|
2202
|
+
"default": null,
|
|
2203
|
+
"description": "name attribute for the input. Defaults to id."
|
|
2204
|
+
},
|
|
2205
|
+
"placeholder": {
|
|
2206
|
+
"type": "string",
|
|
2207
|
+
"default": "Type here",
|
|
2208
|
+
"description": "Text displayed inside the input field when it is empty, providing a hint to the user about the expected input."
|
|
2209
|
+
},
|
|
2210
|
+
"error": {
|
|
2211
|
+
"type": [
|
|
2212
|
+
"string",
|
|
2213
|
+
"boolean"
|
|
2214
|
+
],
|
|
2215
|
+
"default": null,
|
|
2216
|
+
"description": "An error message (string) to display when invalid, or `true` to mark the control as errored without a message."
|
|
2217
|
+
},
|
|
2218
|
+
"success": {
|
|
2219
|
+
"type": [
|
|
2220
|
+
"string",
|
|
2221
|
+
"boolean"
|
|
2222
|
+
],
|
|
2223
|
+
"default": null,
|
|
2224
|
+
"description": "A success message (string) to display when valid, or `true` to mark the control as successful without a message."
|
|
2225
|
+
},
|
|
2226
|
+
"disabled": {
|
|
2227
|
+
"type": "boolean",
|
|
2228
|
+
"default": false,
|
|
2229
|
+
"description": "A boolean that determines whether the input field is disabled, preventing user interaction and indicating that the field is not currently available for input."
|
|
2230
|
+
},
|
|
2231
|
+
"hint": {
|
|
2232
|
+
"type": "string",
|
|
2233
|
+
"default": null,
|
|
2234
|
+
"description": "Hint text to provide additional guidance. Rendered as an element and referenced by `aria-describedby`."
|
|
2235
|
+
},
|
|
2236
|
+
"screenReaderOnlyLabel": {
|
|
2237
|
+
"type": "boolean",
|
|
2238
|
+
"default": false,
|
|
2239
|
+
"description": "A boolean that indicates whether the label for the input field should be visually hidden but still accessible to screen readers, providing an accessible experience for users who rely on assistive technologies."
|
|
2240
|
+
},
|
|
2241
|
+
"required": {
|
|
2242
|
+
"type": "boolean",
|
|
2243
|
+
"default": false,
|
|
2244
|
+
"description": "A boolean that indicates whether the input field is required, meaning that the user must provide a value before submitting the form."
|
|
2245
|
+
},
|
|
2246
|
+
"formGroup": {
|
|
2247
|
+
"type": "boolean",
|
|
2248
|
+
"default": true,
|
|
2249
|
+
"description": "Whether to wrap the label/hint/error/control in a `.usa-form-group`. Set to `false` when composing inside another form group."
|
|
2250
|
+
},
|
|
2251
|
+
"className": {
|
|
2252
|
+
"type": "string",
|
|
2253
|
+
"default": "",
|
|
2254
|
+
"description": "Additional CSS classes to apply to the input field."
|
|
2255
|
+
}
|
|
2256
|
+
}
|
|
2257
|
+
},
|
|
2258
|
+
"label": {
|
|
2259
|
+
"component": "label",
|
|
2260
|
+
"version": 1,
|
|
2261
|
+
"required": [],
|
|
2262
|
+
"props": {
|
|
2263
|
+
"htmlFor": {
|
|
2264
|
+
"type": "string",
|
|
2265
|
+
"description": "ID of the form element this label is associated with"
|
|
2266
|
+
},
|
|
2267
|
+
"required": {
|
|
2268
|
+
"type": "boolean",
|
|
2269
|
+
"description": "Whether to show the required field indicator"
|
|
2270
|
+
},
|
|
2271
|
+
"error": {
|
|
2272
|
+
"type": "boolean",
|
|
2273
|
+
"description": "Whether the associated field has an error (applies the `usa-label--error` modifier class)"
|
|
2274
|
+
},
|
|
2275
|
+
"screenReaderOnly": {
|
|
2276
|
+
"type": "boolean",
|
|
2277
|
+
"description": "Whether to visually hide the label but keep it accessible to screen readers"
|
|
2278
|
+
},
|
|
2279
|
+
"classOverride": {
|
|
2280
|
+
"type": "boolean",
|
|
2281
|
+
"description": "Whether to override default classes"
|
|
2282
|
+
},
|
|
2283
|
+
"label": {
|
|
2284
|
+
"type": "string",
|
|
2285
|
+
"description": "Label text content"
|
|
2286
|
+
},
|
|
2287
|
+
"children": {
|
|
2288
|
+
"type": "string",
|
|
2289
|
+
"description": "Inner HTML or text"
|
|
2290
|
+
},
|
|
2291
|
+
"className": {
|
|
2292
|
+
"type": "string",
|
|
2293
|
+
"description": "Additional classes"
|
|
2294
|
+
}
|
|
2295
|
+
}
|
|
2296
|
+
},
|
|
2297
|
+
"language-selector": {
|
|
2298
|
+
"component": "language-selector",
|
|
2299
|
+
"version": 1,
|
|
2300
|
+
"required": [],
|
|
2301
|
+
"props": {
|
|
2302
|
+
"languages": {
|
|
2303
|
+
"type": "array",
|
|
2304
|
+
"description": "Array of language options",
|
|
2305
|
+
"items": {
|
|
2306
|
+
"type": "object",
|
|
2307
|
+
"description": "Language option.",
|
|
2308
|
+
"properties": {
|
|
2309
|
+
"code": {
|
|
2310
|
+
"type": "string",
|
|
2311
|
+
"description": "ISO language code, used for the lang/xml:lang attribute"
|
|
2312
|
+
},
|
|
2313
|
+
"label": {
|
|
2314
|
+
"type": "string",
|
|
2315
|
+
"description": "Native-language name of the language (e.g. Español)"
|
|
2316
|
+
},
|
|
2317
|
+
"description": {
|
|
2318
|
+
"type": "string",
|
|
2319
|
+
"description": "English gloss shown in parens (e.g. Spanish); omit for English itself"
|
|
2320
|
+
},
|
|
2321
|
+
"href": {
|
|
2322
|
+
"type": "string",
|
|
2323
|
+
"description": "URL for this language's version of the page"
|
|
2324
|
+
},
|
|
2325
|
+
"current": {
|
|
2326
|
+
"type": "boolean",
|
|
2327
|
+
"description": "Whether this is the page's current language"
|
|
2328
|
+
},
|
|
2329
|
+
"plain": {
|
|
2330
|
+
"type": "boolean",
|
|
2331
|
+
"description": "Render as a plain link with no lang span (e.g. \"Selected content in additional languages\")"
|
|
2332
|
+
}
|
|
2333
|
+
}
|
|
2334
|
+
}
|
|
2335
|
+
},
|
|
2336
|
+
"variant": {
|
|
2337
|
+
"type": "select",
|
|
2338
|
+
"options": [
|
|
2339
|
+
"two",
|
|
2340
|
+
"menu"
|
|
2341
|
+
],
|
|
2342
|
+
"description": "Two-language button vs. three-or-more-language dropdown menu. Auto-inferred from languages.length when omitted."
|
|
2343
|
+
},
|
|
2344
|
+
"unstyled": {
|
|
2345
|
+
"type": "boolean",
|
|
2346
|
+
"default": false,
|
|
2347
|
+
"description": "Render the menu variant's trigger as an unstyled button (usa-button--unstyled)"
|
|
2348
|
+
},
|
|
2349
|
+
"small": {
|
|
2350
|
+
"type": "boolean",
|
|
2351
|
+
"default": false,
|
|
2352
|
+
"description": "Compact sizing for the menu variant (usa-language--small), e.g. inside a header"
|
|
2353
|
+
},
|
|
2354
|
+
"label": {
|
|
2355
|
+
"type": "string",
|
|
2356
|
+
"default": "Languages",
|
|
2357
|
+
"description": "Menu variant trigger button text"
|
|
2358
|
+
},
|
|
2359
|
+
"id": {
|
|
2360
|
+
"type": "string",
|
|
2361
|
+
"default": "language-options",
|
|
2362
|
+
"description": "id of the submenu, referenced by the trigger's aria-controls"
|
|
2363
|
+
},
|
|
2364
|
+
"navAriaLabel": {
|
|
2365
|
+
"type": "string",
|
|
2366
|
+
"default": "Language selection",
|
|
2367
|
+
"description": "aria-label for the wrapping <nav> landmark"
|
|
2368
|
+
},
|
|
2369
|
+
"className": {
|
|
2370
|
+
"type": "string",
|
|
2371
|
+
"description": "Additional classes to apply"
|
|
2372
|
+
}
|
|
2373
|
+
}
|
|
2374
|
+
},
|
|
2375
|
+
"layout": {
|
|
2376
|
+
"component": "layout",
|
|
2377
|
+
"version": 1,
|
|
2378
|
+
"required": [],
|
|
2379
|
+
"props": {
|
|
2380
|
+
"variant": {
|
|
2381
|
+
"type": "select",
|
|
2382
|
+
"options": [
|
|
2383
|
+
"single-column",
|
|
2384
|
+
"grid"
|
|
2385
|
+
],
|
|
2386
|
+
"default": "single-column",
|
|
2387
|
+
"description": "Layout variant: single-column centers content, grid supports sidebars"
|
|
2388
|
+
},
|
|
2389
|
+
"children": {
|
|
2390
|
+
"type": "string",
|
|
2391
|
+
"description": "Inner HTML or text content (for single-column)"
|
|
2392
|
+
},
|
|
2393
|
+
"content": {
|
|
2394
|
+
"type": "string",
|
|
2395
|
+
"description": "Main content for grid layout"
|
|
2396
|
+
},
|
|
2397
|
+
"leftSidebar": {
|
|
2398
|
+
"type": "string",
|
|
2399
|
+
"description": "Left sidebar content (grid variant only)"
|
|
2400
|
+
},
|
|
2401
|
+
"rightSidebar": {
|
|
2402
|
+
"type": "string",
|
|
2403
|
+
"description": "Right sidebar content (grid variant only)"
|
|
2404
|
+
},
|
|
2405
|
+
"className": {
|
|
2406
|
+
"type": "string",
|
|
2407
|
+
"description": "Additional CSS classes"
|
|
2408
|
+
}
|
|
2409
|
+
}
|
|
2410
|
+
},
|
|
2411
|
+
"legend": {
|
|
2412
|
+
"component": "legend",
|
|
2413
|
+
"version": 1,
|
|
2414
|
+
"required": [],
|
|
2415
|
+
"props": {
|
|
2416
|
+
"text": {
|
|
2417
|
+
"type": "string",
|
|
2418
|
+
"description": "Text for the legend"
|
|
2419
|
+
},
|
|
2420
|
+
"required": {
|
|
2421
|
+
"type": "boolean",
|
|
2422
|
+
"description": "Whether to indicate the field is required (adds an asterisk)"
|
|
2423
|
+
},
|
|
2424
|
+
"large": {
|
|
2425
|
+
"type": "boolean",
|
|
2426
|
+
"description": "Whether to use the larger legend style (adds class `usa-legend--large`)"
|
|
2427
|
+
},
|
|
2428
|
+
"children": {
|
|
2429
|
+
"type": "string",
|
|
2430
|
+
"description": "Inner HTML or text"
|
|
2431
|
+
},
|
|
2432
|
+
"className": {
|
|
2433
|
+
"type": "string",
|
|
2434
|
+
"description": "Additional classes"
|
|
2435
|
+
}
|
|
2436
|
+
}
|
|
2437
|
+
},
|
|
2438
|
+
"link": {
|
|
2439
|
+
"component": "link",
|
|
2440
|
+
"version": 1,
|
|
2441
|
+
"required": [
|
|
2442
|
+
"href",
|
|
2443
|
+
"children"
|
|
2444
|
+
],
|
|
2445
|
+
"props": {
|
|
2446
|
+
"href": {
|
|
2447
|
+
"type": "string",
|
|
2448
|
+
"description": "Link destination URL."
|
|
2449
|
+
},
|
|
2450
|
+
"children": {
|
|
2451
|
+
"type": "string",
|
|
2452
|
+
"description": "Inner link text or HTML."
|
|
2453
|
+
},
|
|
2454
|
+
"visited": {
|
|
2455
|
+
"type": "boolean",
|
|
2456
|
+
"description": "Apply visited styling class."
|
|
2457
|
+
},
|
|
2458
|
+
"external": {
|
|
2459
|
+
"type": "boolean",
|
|
2460
|
+
"description": "Apply external-link styling and default rel=noreferrer."
|
|
2461
|
+
},
|
|
2462
|
+
"alt": {
|
|
2463
|
+
"type": "boolean",
|
|
2464
|
+
"description": "Use alternate link style for dark backgrounds."
|
|
2465
|
+
},
|
|
2466
|
+
"newTab": {
|
|
2467
|
+
"type": "boolean",
|
|
2468
|
+
"description": "Open link in a new tab (target=_blank)."
|
|
2469
|
+
},
|
|
2470
|
+
"className": {
|
|
2471
|
+
"type": "string",
|
|
2472
|
+
"description": "Additional classes."
|
|
2473
|
+
}
|
|
2474
|
+
}
|
|
2475
|
+
},
|
|
2476
|
+
"list": {
|
|
2477
|
+
"component": "list",
|
|
2478
|
+
"version": 1,
|
|
2479
|
+
"required": [],
|
|
2480
|
+
"props": {
|
|
2481
|
+
"items": {
|
|
2482
|
+
"type": "object",
|
|
2483
|
+
"description": "Array of list items. A string renders a simple item. Objects can include content and children for nested lists of any depth; optional ordered/unstyled/className customize nested lists."
|
|
2484
|
+
},
|
|
2485
|
+
"ordered": {
|
|
2486
|
+
"type": "boolean",
|
|
2487
|
+
"default": false,
|
|
2488
|
+
"description": "Render an ordered list using an ol element."
|
|
2489
|
+
},
|
|
2490
|
+
"unstyled": {
|
|
2491
|
+
"type": "boolean",
|
|
2492
|
+
"default": false,
|
|
2493
|
+
"description": "Remove default list styling with usa-list--unstyled."
|
|
2494
|
+
},
|
|
2495
|
+
"className": {
|
|
2496
|
+
"type": "string",
|
|
2497
|
+
"description": "Additional classes"
|
|
2498
|
+
}
|
|
2499
|
+
}
|
|
2500
|
+
},
|
|
2501
|
+
"memorable-date": {
|
|
2502
|
+
"component": "memorable-date",
|
|
2503
|
+
"version": 1,
|
|
2504
|
+
"required": [],
|
|
2505
|
+
"props": {
|
|
2506
|
+
"id": {
|
|
2507
|
+
"type": "string",
|
|
2508
|
+
"default": "memorable-date",
|
|
2509
|
+
"description": "Base id for the component. Month/day/year field ids and hint ids are derived from this."
|
|
2510
|
+
},
|
|
2511
|
+
"legend": {
|
|
2512
|
+
"type": "string",
|
|
2513
|
+
"default": "Date of Birth",
|
|
2514
|
+
"description": "Legend text for the fieldset."
|
|
2515
|
+
},
|
|
2516
|
+
"groupHint": {
|
|
2517
|
+
"type": "string",
|
|
2518
|
+
"default": "Select a month. Enter 1 or 2 digits for the day and 4 digits for the year.",
|
|
2519
|
+
"description": "Visible hint shown once for the whole group. Hidden from screen readers (aria-hidden) since each field has its own hint."
|
|
2520
|
+
},
|
|
2521
|
+
"monthLabel": {
|
|
2522
|
+
"type": "string",
|
|
2523
|
+
"default": "Month",
|
|
2524
|
+
"description": "Label text for the month select."
|
|
2525
|
+
},
|
|
2526
|
+
"dayLabel": {
|
|
2527
|
+
"type": "string",
|
|
2528
|
+
"default": "Day",
|
|
2529
|
+
"description": "Label text for the day input."
|
|
2530
|
+
},
|
|
2531
|
+
"yearLabel": {
|
|
2532
|
+
"type": "string",
|
|
2533
|
+
"default": "Year",
|
|
2534
|
+
"description": "Label text for the year input."
|
|
2535
|
+
},
|
|
2536
|
+
"monthHint": {
|
|
2537
|
+
"type": "string",
|
|
2538
|
+
"default": "Select a month from the dropdown.",
|
|
2539
|
+
"description": "Screen-reader-only hint for the month field."
|
|
2540
|
+
},
|
|
2541
|
+
"dayHint": {
|
|
2542
|
+
"type": "string",
|
|
2543
|
+
"default": "Enter 1 or 2 digits for the day.",
|
|
2544
|
+
"description": "Screen-reader-only hint for the day field."
|
|
2545
|
+
},
|
|
2546
|
+
"yearHint": {
|
|
2547
|
+
"type": "string",
|
|
2548
|
+
"default": "Enter 4 digits for the year.",
|
|
2549
|
+
"description": "Screen-reader-only hint for the year field."
|
|
2550
|
+
},
|
|
2551
|
+
"monthName": {
|
|
2552
|
+
"type": "string",
|
|
2553
|
+
"description": "name attribute for the month select. Defaults to <id>-month."
|
|
2554
|
+
},
|
|
2555
|
+
"dayName": {
|
|
2556
|
+
"type": "string",
|
|
2557
|
+
"description": "name attribute for the day input. Defaults to <id>-day."
|
|
2558
|
+
},
|
|
2559
|
+
"yearName": {
|
|
2560
|
+
"type": "string",
|
|
2561
|
+
"description": "name attribute for the year input. Defaults to <id>-year."
|
|
2562
|
+
},
|
|
2563
|
+
"defaultMonth": {
|
|
2564
|
+
"type": "string",
|
|
2565
|
+
"description": "Initial selected month value (\"1\"-\"12\")."
|
|
2566
|
+
},
|
|
2567
|
+
"defaultDay": {
|
|
2568
|
+
"type": "string",
|
|
2569
|
+
"description": "Initial day value."
|
|
2570
|
+
},
|
|
2571
|
+
"defaultYear": {
|
|
2572
|
+
"type": "string",
|
|
2573
|
+
"description": "Initial year value."
|
|
2574
|
+
},
|
|
2575
|
+
"disabled": {
|
|
2576
|
+
"type": "boolean",
|
|
2577
|
+
"default": false,
|
|
2578
|
+
"description": "Disables all three fields."
|
|
2579
|
+
},
|
|
2580
|
+
"ariaDisabled": {
|
|
2581
|
+
"type": "boolean",
|
|
2582
|
+
"default": false,
|
|
2583
|
+
"description": "Marks all three fields aria-disabled without preventing interaction, matching USWDS's aria-disabled variant."
|
|
2584
|
+
},
|
|
2585
|
+
"required": {
|
|
2586
|
+
"type": "boolean",
|
|
2587
|
+
"default": false,
|
|
2588
|
+
"description": "Marks the fieldset and all three fields as required."
|
|
2589
|
+
},
|
|
2590
|
+
"error": {
|
|
2591
|
+
"type": "string",
|
|
2592
|
+
"description": "Error message shown once below the fields, referenced by all three fields' aria-describedby."
|
|
2593
|
+
},
|
|
2594
|
+
"className": {
|
|
2595
|
+
"type": "string",
|
|
2596
|
+
"default": "",
|
|
2597
|
+
"description": "Additional classes for the usa-fieldset wrapper."
|
|
2598
|
+
}
|
|
2599
|
+
}
|
|
2600
|
+
},
|
|
2601
|
+
"misc-banner": {
|
|
2602
|
+
"component": "misc-banner",
|
|
2603
|
+
"version": 1,
|
|
2604
|
+
"required": [],
|
|
2605
|
+
"props": {
|
|
2606
|
+
"children": {
|
|
2607
|
+
"type": "string",
|
|
2608
|
+
"description": "Advanced override for custom inner markup"
|
|
2609
|
+
},
|
|
2610
|
+
"className": {
|
|
2611
|
+
"type": "string",
|
|
2612
|
+
"description": "Additional classes for the root banner"
|
|
2613
|
+
},
|
|
2614
|
+
"tone": {
|
|
2615
|
+
"type": "string",
|
|
2616
|
+
"description": "Banner tone and style: beta, dev, or test"
|
|
2617
|
+
},
|
|
2618
|
+
"badgeText": {
|
|
2619
|
+
"type": "string",
|
|
2620
|
+
"description": "Badge label text"
|
|
2621
|
+
},
|
|
2622
|
+
"message": {
|
|
2623
|
+
"type": "string",
|
|
2624
|
+
"description": "Main banner message"
|
|
2625
|
+
},
|
|
2626
|
+
"casualLinkText": {
|
|
2627
|
+
"type": "string",
|
|
2628
|
+
"description": "Learn more link text"
|
|
2629
|
+
},
|
|
2630
|
+
"casualLinkHref": {
|
|
2631
|
+
"type": "string",
|
|
2632
|
+
"description": "Learn more link destination"
|
|
2633
|
+
},
|
|
2634
|
+
"showLearnMore": {
|
|
2635
|
+
"type": "boolean",
|
|
2636
|
+
"description": "Show learn more link",
|
|
2637
|
+
"default": false
|
|
2638
|
+
},
|
|
2639
|
+
"importantLinkText": {
|
|
2640
|
+
"type": "string",
|
|
2641
|
+
"description": "Secondary return link text"
|
|
2642
|
+
},
|
|
2643
|
+
"importantLinkHref": {
|
|
2644
|
+
"type": "string",
|
|
2645
|
+
"description": "Secondary return link destination"
|
|
2646
|
+
},
|
|
2647
|
+
"importantLinkIcon": {
|
|
2648
|
+
"type": "string",
|
|
2649
|
+
"description": "Icon name used before return text"
|
|
2650
|
+
},
|
|
2651
|
+
"showReturnLink": {
|
|
2652
|
+
"type": "boolean",
|
|
2653
|
+
"description": "Show return link section",
|
|
2654
|
+
"default": false
|
|
2655
|
+
}
|
|
2656
|
+
}
|
|
2657
|
+
},
|
|
2658
|
+
"modal": {
|
|
2659
|
+
"component": "modal",
|
|
2660
|
+
"version": 1,
|
|
2661
|
+
"required": [],
|
|
2662
|
+
"props": {
|
|
2663
|
+
"id": {
|
|
2664
|
+
"type": "string",
|
|
2665
|
+
"default": "example-modal",
|
|
2666
|
+
"description": "Unique ID for the modal, used to link the trigger button and the modal panel via aria-controls and href."
|
|
2667
|
+
},
|
|
2668
|
+
"heading": {
|
|
2669
|
+
"type": "string",
|
|
2670
|
+
"default": "Are you sure you want to continue?",
|
|
2671
|
+
"description": "The heading text displayed at the top of the modal."
|
|
2672
|
+
},
|
|
2673
|
+
"description": {
|
|
2674
|
+
"type": "string",
|
|
2675
|
+
"default": "You have unsaved changes that will be lost.",
|
|
2676
|
+
"description": "The body text displayed inside the modal. Overridden by children if provided."
|
|
2677
|
+
},
|
|
2678
|
+
"actionProps": {
|
|
2679
|
+
"type": "array",
|
|
2680
|
+
"default": [],
|
|
2681
|
+
"description": "Array of buttons rendered as the modal footer actions.",
|
|
2682
|
+
"items": {
|
|
2683
|
+
"type": "object",
|
|
2684
|
+
"description": "Button item.",
|
|
2685
|
+
"component": "button"
|
|
2686
|
+
}
|
|
2687
|
+
},
|
|
2688
|
+
"size": {
|
|
2689
|
+
"type": "select",
|
|
2690
|
+
"options": [
|
|
2691
|
+
"default",
|
|
2692
|
+
"lg",
|
|
2693
|
+
"lg-collapsed"
|
|
2694
|
+
],
|
|
2695
|
+
"default": "default",
|
|
2696
|
+
"description": "The size variant of the modal. 'lg' renders a large modal, 'lg-collapsed' renders a large modal that collapses at smaller breakpoints."
|
|
2697
|
+
},
|
|
2698
|
+
"forceAction": {
|
|
2699
|
+
"type": "boolean",
|
|
2700
|
+
"default": false,
|
|
2701
|
+
"description": "When true, prevents closing the modal via the overlay or Escape key, and hides the close button. Used for required-action flows."
|
|
2702
|
+
},
|
|
2703
|
+
"children": {
|
|
2704
|
+
"type": "string",
|
|
2705
|
+
"default": null,
|
|
2706
|
+
"description": "Inner HTML to render as the modal body, replacing the description text."
|
|
2707
|
+
},
|
|
2708
|
+
"className": {
|
|
2709
|
+
"type": "string",
|
|
2710
|
+
"default": "",
|
|
2711
|
+
"description": "Additional CSS classes to apply to the modal element."
|
|
2712
|
+
}
|
|
2713
|
+
}
|
|
2714
|
+
},
|
|
2715
|
+
"page": {
|
|
2716
|
+
"component": "page",
|
|
2717
|
+
"version": 1,
|
|
2718
|
+
"required": [
|
|
2719
|
+
"title"
|
|
2720
|
+
],
|
|
2721
|
+
"props": {
|
|
2722
|
+
"id": {
|
|
2723
|
+
"type": "string",
|
|
2724
|
+
"description": "Optional id attribute applied to the root main element."
|
|
2725
|
+
},
|
|
2726
|
+
"title": {
|
|
2727
|
+
"type": "string",
|
|
2728
|
+
"description": "Required page title rendered as an h1."
|
|
2729
|
+
},
|
|
2730
|
+
"eyebrow": {
|
|
2731
|
+
"type": "string",
|
|
2732
|
+
"description": "Optional eyebrow text rendered above the page title inside the h1."
|
|
2733
|
+
},
|
|
2734
|
+
"content": {
|
|
2735
|
+
"type": "string",
|
|
2736
|
+
"description": "Body content rendered below the title. Supports HTML in Django stories."
|
|
2737
|
+
},
|
|
2738
|
+
"children": {
|
|
2739
|
+
"type": "string",
|
|
2740
|
+
"description": "Body content for React usage."
|
|
2741
|
+
},
|
|
2742
|
+
"className": {
|
|
2743
|
+
"type": "string",
|
|
2744
|
+
"description": "Additional classes"
|
|
2745
|
+
}
|
|
2746
|
+
}
|
|
2747
|
+
},
|
|
2748
|
+
"pagination": {
|
|
2749
|
+
"component": "pagination",
|
|
2750
|
+
"version": 1,
|
|
2751
|
+
"required": [],
|
|
2752
|
+
"props": {
|
|
2753
|
+
"currentPage": {
|
|
2754
|
+
"type": "number",
|
|
2755
|
+
"default": 1,
|
|
2756
|
+
"description": "Current 1-based page number"
|
|
2757
|
+
},
|
|
2758
|
+
"totalPages": {
|
|
2759
|
+
"type": "number",
|
|
2760
|
+
"description": "Total page count — omit for unbounded mode"
|
|
2761
|
+
},
|
|
2762
|
+
"pages": {
|
|
2763
|
+
"type": "array",
|
|
2764
|
+
"default": [],
|
|
2765
|
+
"description": "Pre-computed list of page items: [{type: 'page', page: N} | {type: 'ellipsis'}]. Compute server-side with Django's Paginator.",
|
|
2766
|
+
"items": {
|
|
2767
|
+
"type": "object",
|
|
2768
|
+
"description": "Page item — { type: 'page', page } or { type: 'ellipsis' }.",
|
|
2769
|
+
"properties": {
|
|
2770
|
+
"type": {
|
|
2771
|
+
"type": "select",
|
|
2772
|
+
"options": [
|
|
2773
|
+
"page",
|
|
2774
|
+
"ellipsis"
|
|
2775
|
+
],
|
|
2776
|
+
"description": "Item kind."
|
|
2777
|
+
},
|
|
2778
|
+
"page": {
|
|
2779
|
+
"type": "number",
|
|
2780
|
+
"description": "Page number (present when type is \"page\")."
|
|
2781
|
+
}
|
|
2782
|
+
}
|
|
2783
|
+
}
|
|
2784
|
+
},
|
|
2785
|
+
"unbounded": {
|
|
2786
|
+
"type": "boolean",
|
|
2787
|
+
"default": false,
|
|
2788
|
+
"description": "True when total pages is unknown — hides the disabled state on Next"
|
|
2789
|
+
},
|
|
2790
|
+
"arrowsOnly": {
|
|
2791
|
+
"type": "boolean",
|
|
2792
|
+
"default": false,
|
|
2793
|
+
"description": "Show only the prev/next arrows, no page number buttons"
|
|
2794
|
+
},
|
|
2795
|
+
"prevLabel": {
|
|
2796
|
+
"type": "string",
|
|
2797
|
+
"default": "Previous",
|
|
2798
|
+
"description": "Label for the previous arrow link"
|
|
2799
|
+
},
|
|
2800
|
+
"nextLabel": {
|
|
2801
|
+
"type": "string",
|
|
2802
|
+
"default": "Next",
|
|
2803
|
+
"description": "Label for the next arrow link"
|
|
2804
|
+
},
|
|
2805
|
+
"hideLinkText": {
|
|
2806
|
+
"type": "boolean",
|
|
2807
|
+
"default": true,
|
|
2808
|
+
"description": "Visually hide prev/next labels (still readable by screen readers)"
|
|
2809
|
+
},
|
|
2810
|
+
"ariaLabel": {
|
|
2811
|
+
"type": "string",
|
|
2812
|
+
"default": "Pagination",
|
|
2813
|
+
"description": "aria-label for the nav element"
|
|
2814
|
+
},
|
|
2815
|
+
"pageUrlPrefix": {
|
|
2816
|
+
"type": "string",
|
|
2817
|
+
"default": "?page=",
|
|
2818
|
+
"description": "URL prefix that the page number is appended to, e.g. '?page='"
|
|
2819
|
+
},
|
|
2820
|
+
"showSummary": {
|
|
2821
|
+
"type": "boolean",
|
|
2822
|
+
"description": "Show the 'Showing X–Y of Z items' summary"
|
|
2823
|
+
},
|
|
2824
|
+
"firstItem": {
|
|
2825
|
+
"type": "number",
|
|
2826
|
+
"default": 1,
|
|
2827
|
+
"description": "First item number on the current page (for summary)"
|
|
2828
|
+
},
|
|
2829
|
+
"lastItem": {
|
|
2830
|
+
"type": "number",
|
|
2831
|
+
"default": 10,
|
|
2832
|
+
"description": "Last item number on the current page (for summary)"
|
|
2833
|
+
},
|
|
2834
|
+
"totalItems": {
|
|
2835
|
+
"type": "number",
|
|
2836
|
+
"description": "Total number of items (for summary)"
|
|
2837
|
+
},
|
|
2838
|
+
"itemLabel": {
|
|
2839
|
+
"type": "string",
|
|
2840
|
+
"default": "items",
|
|
2841
|
+
"description": "Noun for items in the summary (e.g. 'results', 'records')"
|
|
2842
|
+
},
|
|
2843
|
+
"showStepOptions": {
|
|
2844
|
+
"type": "boolean",
|
|
2845
|
+
"description": "Show the items-per-page selector"
|
|
2846
|
+
},
|
|
2847
|
+
"pageSize": {
|
|
2848
|
+
"type": "number",
|
|
2849
|
+
"default": 10,
|
|
2850
|
+
"description": "Currently selected page size"
|
|
2851
|
+
},
|
|
2852
|
+
"pageSizeOptions": {
|
|
2853
|
+
"type": "array",
|
|
2854
|
+
"default": [
|
|
2855
|
+
10,
|
|
2856
|
+
25,
|
|
2857
|
+
50,
|
|
2858
|
+
100
|
|
2859
|
+
],
|
|
2860
|
+
"description": "Available page size choices",
|
|
2861
|
+
"items": {
|
|
2862
|
+
"type": "number",
|
|
2863
|
+
"description": "Selectable page size."
|
|
2864
|
+
}
|
|
2865
|
+
},
|
|
2866
|
+
"stepOptionsLabel": {
|
|
2867
|
+
"type": "string",
|
|
2868
|
+
"default": "Items per page",
|
|
2869
|
+
"description": "Label for the items-per-page selector"
|
|
2870
|
+
},
|
|
2871
|
+
"stepOptionsId": {
|
|
2872
|
+
"type": "string",
|
|
2873
|
+
"default": "pagination-step-options",
|
|
2874
|
+
"description": "HTML id for the step options select element"
|
|
2875
|
+
},
|
|
2876
|
+
"className": {
|
|
2877
|
+
"type": "string",
|
|
2878
|
+
"default": "",
|
|
2879
|
+
"description": "Additional CSS classes on the outer wrapper"
|
|
2880
|
+
}
|
|
2881
|
+
}
|
|
2882
|
+
},
|
|
2883
|
+
"process-list": {
|
|
2884
|
+
"component": "process-list",
|
|
2885
|
+
"version": 1,
|
|
2886
|
+
"required": [],
|
|
2887
|
+
"props": {
|
|
2888
|
+
"items": {
|
|
2889
|
+
"type": "object",
|
|
2890
|
+
"description": "Array of process list item objects. Each item supports: heading (required), headingTag (default h4), headingClassName, body, bodyClassName, and className (applied to the <li>)."
|
|
2891
|
+
},
|
|
2892
|
+
"className": {
|
|
2893
|
+
"type": "string",
|
|
2894
|
+
"description": "Additional CSS classes to apply to the <ol> element."
|
|
2895
|
+
}
|
|
2896
|
+
}
|
|
2897
|
+
},
|
|
2898
|
+
"prose": {
|
|
2899
|
+
"component": "prose",
|
|
2900
|
+
"version": 1,
|
|
2901
|
+
"required": [],
|
|
2902
|
+
"props": {
|
|
2903
|
+
"containerElement": {
|
|
2904
|
+
"type": "select",
|
|
2905
|
+
"options": [
|
|
2906
|
+
"div",
|
|
2907
|
+
"article",
|
|
2908
|
+
"section",
|
|
2909
|
+
"main"
|
|
2910
|
+
],
|
|
2911
|
+
"default": "div",
|
|
2912
|
+
"description": "The HTML element to use as the container for the prose content"
|
|
2913
|
+
},
|
|
2914
|
+
"content": {
|
|
2915
|
+
"type": "string",
|
|
2916
|
+
"default": "",
|
|
2917
|
+
"description": "The HTML content to be rendered inside the prose component"
|
|
2918
|
+
},
|
|
2919
|
+
"className": {
|
|
2920
|
+
"type": "string",
|
|
2921
|
+
"default": "",
|
|
2922
|
+
"description": "Additional CSS classes to apply to the prose component"
|
|
2923
|
+
}
|
|
2924
|
+
}
|
|
2925
|
+
},
|
|
2926
|
+
"radio-buttons": {
|
|
2927
|
+
"component": "radio-buttons",
|
|
2928
|
+
"version": 1,
|
|
2929
|
+
"required": [
|
|
2930
|
+
"options"
|
|
2931
|
+
],
|
|
2932
|
+
"props": {
|
|
2933
|
+
"id": {
|
|
2934
|
+
"type": "string",
|
|
2935
|
+
"description": "Base ID for the radio group. Each radio's ID will be this base plus the option's id or index."
|
|
2936
|
+
},
|
|
2937
|
+
"tile": {
|
|
2938
|
+
"type": "boolean",
|
|
2939
|
+
"description": "Render each radio as a tile when true",
|
|
2940
|
+
"default": false
|
|
2941
|
+
},
|
|
2942
|
+
"small": {
|
|
2943
|
+
"type": "boolean",
|
|
2944
|
+
"description": "Render compact/small radios when true",
|
|
2945
|
+
"default": false
|
|
2946
|
+
},
|
|
2947
|
+
"legend": {
|
|
2948
|
+
"type": "string",
|
|
2949
|
+
"description": "Legend text for the fieldset"
|
|
2950
|
+
},
|
|
2951
|
+
"required": {
|
|
2952
|
+
"type": "boolean",
|
|
2953
|
+
"description": "Whether the fieldset is required",
|
|
2954
|
+
"default": false
|
|
2955
|
+
},
|
|
2956
|
+
"hint": {
|
|
2957
|
+
"type": "string",
|
|
2958
|
+
"description": "Group-level hint text, rendered after the legend"
|
|
2959
|
+
},
|
|
2960
|
+
"error": {
|
|
2961
|
+
"type": "string",
|
|
2962
|
+
"description": "Group-level error message, rendered after the hint"
|
|
2963
|
+
},
|
|
2964
|
+
"name": {
|
|
2965
|
+
"type": "string",
|
|
2966
|
+
"description": "Name attribute for the radio inputs"
|
|
2967
|
+
},
|
|
2968
|
+
"defaultValue": {
|
|
2969
|
+
"type": "string",
|
|
2970
|
+
"description": "Value of the option to be selected by default"
|
|
2971
|
+
},
|
|
2972
|
+
"options": {
|
|
2973
|
+
"type": "array",
|
|
2974
|
+
"description": "Array of option objects: {id, value, label, description, checked, disabled}"
|
|
2975
|
+
},
|
|
2976
|
+
"className": {
|
|
2977
|
+
"type": "string",
|
|
2978
|
+
"description": "Additional classes to apply to the wrapper"
|
|
2979
|
+
}
|
|
2980
|
+
}
|
|
2981
|
+
},
|
|
2982
|
+
"range-slider": {
|
|
2983
|
+
"component": "range-slider",
|
|
2984
|
+
"version": 1,
|
|
2985
|
+
"required": [],
|
|
2986
|
+
"props": {
|
|
2987
|
+
"id": {
|
|
2988
|
+
"type": "string",
|
|
2989
|
+
"default": "range-slider",
|
|
2990
|
+
"description": "id for the input. Label/hint/error ids are derived from this."
|
|
2991
|
+
},
|
|
2992
|
+
"name": {
|
|
2993
|
+
"type": "string",
|
|
2994
|
+
"description": "name attribute for the input. Defaults to id."
|
|
2995
|
+
},
|
|
2996
|
+
"label": {
|
|
2997
|
+
"type": "string",
|
|
2998
|
+
"description": "Label text for the field."
|
|
2999
|
+
},
|
|
3000
|
+
"hint": {
|
|
3001
|
+
"type": "string",
|
|
3002
|
+
"description": "Hint text displayed below the label."
|
|
3003
|
+
},
|
|
3004
|
+
"error": {
|
|
3005
|
+
"type": "string",
|
|
3006
|
+
"description": "Error message. Renders aria-describedby and error styling."
|
|
3007
|
+
},
|
|
3008
|
+
"disabled": {
|
|
3009
|
+
"type": "boolean",
|
|
3010
|
+
"default": false,
|
|
3011
|
+
"description": "Disables the input."
|
|
3012
|
+
},
|
|
3013
|
+
"required": {
|
|
3014
|
+
"type": "boolean",
|
|
3015
|
+
"default": false,
|
|
3016
|
+
"description": "Marks the field as required."
|
|
3017
|
+
},
|
|
3018
|
+
"min": {
|
|
3019
|
+
"type": "number",
|
|
3020
|
+
"default": 0,
|
|
3021
|
+
"description": "Minimum value."
|
|
3022
|
+
},
|
|
3023
|
+
"max": {
|
|
3024
|
+
"type": "number",
|
|
3025
|
+
"default": 100,
|
|
3026
|
+
"description": "Maximum value."
|
|
3027
|
+
},
|
|
3028
|
+
"step": {
|
|
3029
|
+
"type": "number",
|
|
3030
|
+
"default": 1,
|
|
3031
|
+
"description": "Step increment."
|
|
3032
|
+
},
|
|
3033
|
+
"value": {
|
|
3034
|
+
"type": "number",
|
|
3035
|
+
"description": "Current value (controlled). React only."
|
|
3036
|
+
},
|
|
3037
|
+
"defaultValue": {
|
|
3038
|
+
"type": "number",
|
|
3039
|
+
"description": "Initial value for uncontrolled usage. Also used as the static value shown in the Django/HTML templates."
|
|
3040
|
+
},
|
|
3041
|
+
"textUnit": {
|
|
3042
|
+
"type": "string",
|
|
3043
|
+
"description": "Optional unit appended to the screen-reader value callout, e.g. \"percent\"."
|
|
3044
|
+
},
|
|
3045
|
+
"textPreposition": {
|
|
3046
|
+
"type": "string",
|
|
3047
|
+
"default": "of",
|
|
3048
|
+
"description": "Preposition used in the screen-reader value callout (\"of\", \"de\", etc.)."
|
|
3049
|
+
},
|
|
3050
|
+
"formGroup": {
|
|
3051
|
+
"type": "boolean",
|
|
3052
|
+
"default": true,
|
|
3053
|
+
"description": "Whether to wrap the label/hint/error/control in a `.usa-form-group`. Set to `false` when composing inside another form group."
|
|
3054
|
+
},
|
|
3055
|
+
"className": {
|
|
3056
|
+
"type": "string",
|
|
3057
|
+
"default": "",
|
|
3058
|
+
"description": "Additional classes for the usa-range input."
|
|
3059
|
+
}
|
|
3060
|
+
}
|
|
3061
|
+
},
|
|
3062
|
+
"required": {
|
|
3063
|
+
"component": "required",
|
|
3064
|
+
"version": 1,
|
|
3065
|
+
"required": [],
|
|
3066
|
+
"props": {
|
|
3067
|
+
"title": {
|
|
3068
|
+
"type": "string",
|
|
3069
|
+
"default": "required",
|
|
3070
|
+
"description": "Title attribute for the required indicator (default: 'required')"
|
|
3071
|
+
},
|
|
3072
|
+
"children": {
|
|
3073
|
+
"type": "string",
|
|
3074
|
+
"description": "Inner HTML or text"
|
|
3075
|
+
},
|
|
3076
|
+
"className": {
|
|
3077
|
+
"type": "string",
|
|
3078
|
+
"description": "Additional classes"
|
|
3079
|
+
}
|
|
3080
|
+
}
|
|
3081
|
+
},
|
|
3082
|
+
"search": {
|
|
3083
|
+
"component": "search",
|
|
3084
|
+
"version": 1,
|
|
3085
|
+
"required": [],
|
|
3086
|
+
"props": {
|
|
3087
|
+
"id": {
|
|
3088
|
+
"type": "string",
|
|
3089
|
+
"description": "Unique identifier for the search input, used for accessibility and form submission"
|
|
3090
|
+
},
|
|
3091
|
+
"ariaLabel": {
|
|
3092
|
+
"type": "string",
|
|
3093
|
+
"description": "ARIA label for the search input, used for accessibility"
|
|
3094
|
+
},
|
|
3095
|
+
"searchKey": {
|
|
3096
|
+
"type": "string",
|
|
3097
|
+
"default": "q",
|
|
3098
|
+
"description": "Name of the query parameter to use for the search input value on form submission, defaults to 'q'"
|
|
3099
|
+
},
|
|
3100
|
+
"label": {
|
|
3101
|
+
"type": "string",
|
|
3102
|
+
"default": "Search",
|
|
3103
|
+
"description": "Label for the search input, used for accessibility"
|
|
3104
|
+
},
|
|
3105
|
+
"icon": {
|
|
3106
|
+
"type": "string",
|
|
3107
|
+
"default": "search",
|
|
3108
|
+
"description": "Name of the icon to display in the search button"
|
|
3109
|
+
},
|
|
3110
|
+
"iconOnly": {
|
|
3111
|
+
"type": "boolean",
|
|
3112
|
+
"default": false,
|
|
3113
|
+
"description": "Forces the icon to display even on large screens"
|
|
3114
|
+
},
|
|
3115
|
+
"buttonVariant": {
|
|
3116
|
+
"type": "string",
|
|
3117
|
+
"default": "primary",
|
|
3118
|
+
"description": "Variant for the search button (e.g., 'primary', 'secondary', 'outline', etc.)"
|
|
3119
|
+
},
|
|
3120
|
+
"big": {
|
|
3121
|
+
"type": "boolean",
|
|
3122
|
+
"default": false,
|
|
3123
|
+
"description": "Whether to use the big search style with larger input and button"
|
|
3124
|
+
},
|
|
3125
|
+
"action": {
|
|
3126
|
+
"type": "string",
|
|
3127
|
+
"default": "/search",
|
|
3128
|
+
"description": "URL to submit the search query to"
|
|
3129
|
+
},
|
|
3130
|
+
"placeholder": {
|
|
3131
|
+
"type": "string",
|
|
3132
|
+
"default": "",
|
|
3133
|
+
"description": "Placeholder text for the search input"
|
|
3134
|
+
},
|
|
3135
|
+
"defaultValue": {
|
|
3136
|
+
"type": "string",
|
|
3137
|
+
"description": "Default value for the search input"
|
|
3138
|
+
},
|
|
3139
|
+
"onSubmit": {
|
|
3140
|
+
"type": "string",
|
|
3141
|
+
"default": "",
|
|
3142
|
+
"description": "JavaScript function to call on search submit, receives the search query as an argument"
|
|
3143
|
+
},
|
|
3144
|
+
"className": {
|
|
3145
|
+
"type": "string",
|
|
3146
|
+
"default": "",
|
|
3147
|
+
"description": "Additional classes"
|
|
3148
|
+
}
|
|
3149
|
+
}
|
|
3150
|
+
},
|
|
3151
|
+
"section": {
|
|
3152
|
+
"component": "section",
|
|
3153
|
+
"version": 1,
|
|
3154
|
+
"required": [],
|
|
3155
|
+
"props": {
|
|
3156
|
+
"title": {
|
|
3157
|
+
"type": "string",
|
|
3158
|
+
"description": "Optional section heading rendered as an h2."
|
|
3159
|
+
},
|
|
3160
|
+
"content": {
|
|
3161
|
+
"type": "string",
|
|
3162
|
+
"description": "Section body content. Supports HTML in Django stories."
|
|
3163
|
+
},
|
|
3164
|
+
"children": {
|
|
3165
|
+
"type": "string",
|
|
3166
|
+
"description": "Section body content for React usage."
|
|
3167
|
+
},
|
|
3168
|
+
"className": {
|
|
3169
|
+
"type": "string",
|
|
3170
|
+
"description": "Additional classes"
|
|
3171
|
+
}
|
|
3172
|
+
}
|
|
3173
|
+
},
|
|
3174
|
+
"select": {
|
|
3175
|
+
"component": "select",
|
|
3176
|
+
"version": 1,
|
|
3177
|
+
"required": [
|
|
3178
|
+
"options"
|
|
3179
|
+
],
|
|
3180
|
+
"props": {
|
|
3181
|
+
"id": {
|
|
3182
|
+
"type": "string",
|
|
3183
|
+
"description": "Unique identifier for the select input, used for accessibility and form submission"
|
|
3184
|
+
},
|
|
3185
|
+
"name": {
|
|
3186
|
+
"type": "string",
|
|
3187
|
+
"description": "Name of the select input, used for form submission"
|
|
3188
|
+
},
|
|
3189
|
+
"label": {
|
|
3190
|
+
"type": "string",
|
|
3191
|
+
"description": "Label for the select input"
|
|
3192
|
+
},
|
|
3193
|
+
"options": {
|
|
3194
|
+
"type": "array",
|
|
3195
|
+
"description": "Array of option objects with 'value' and 'label' properties"
|
|
3196
|
+
},
|
|
3197
|
+
"defaultValue": {
|
|
3198
|
+
"type": "string",
|
|
3199
|
+
"default": null,
|
|
3200
|
+
"description": "Default selected value for the select input"
|
|
3201
|
+
},
|
|
3202
|
+
"placeholder": {
|
|
3203
|
+
"type": "string",
|
|
3204
|
+
"default": "Select an option",
|
|
3205
|
+
"description": "Placeholder text for the first option"
|
|
3206
|
+
},
|
|
3207
|
+
"onChange": {
|
|
3208
|
+
"type": "string",
|
|
3209
|
+
"default": null,
|
|
3210
|
+
"description": "JavaScript function to call when the selected option changes"
|
|
3211
|
+
},
|
|
3212
|
+
"onBlur": {
|
|
3213
|
+
"type": "string",
|
|
3214
|
+
"default": null,
|
|
3215
|
+
"description": "JavaScript function to call when the select input loses focus"
|
|
3216
|
+
},
|
|
3217
|
+
"error": {
|
|
3218
|
+
"type": "string",
|
|
3219
|
+
"default": null,
|
|
3220
|
+
"description": "An error message that is displayed when the input value is invalid"
|
|
3221
|
+
},
|
|
3222
|
+
"success": {
|
|
3223
|
+
"type": "string",
|
|
3224
|
+
"default": null,
|
|
3225
|
+
"description": "A success message that is displayed when the input value is valid"
|
|
3226
|
+
},
|
|
3227
|
+
"hint": {
|
|
3228
|
+
"type": "string",
|
|
3229
|
+
"default": null,
|
|
3230
|
+
"description": "Hint text to provide additional guidance"
|
|
3231
|
+
},
|
|
3232
|
+
"required": {
|
|
3233
|
+
"type": "boolean",
|
|
3234
|
+
"default": false,
|
|
3235
|
+
"description": "Whether the select input is required, meaning that the user must select an option before submitting the form"
|
|
3236
|
+
},
|
|
3237
|
+
"disabled": {
|
|
3238
|
+
"type": "boolean",
|
|
3239
|
+
"default": false,
|
|
3240
|
+
"description": "Whether the select input is disabled"
|
|
3241
|
+
},
|
|
3242
|
+
"formGroup": {
|
|
3243
|
+
"type": "boolean",
|
|
3244
|
+
"default": true,
|
|
3245
|
+
"description": "Whether to wrap the label/hint/error/control in a `.usa-form-group`. Set to `false` when composing inside another form group."
|
|
3246
|
+
},
|
|
3247
|
+
"className": {
|
|
3248
|
+
"type": "string",
|
|
3249
|
+
"description": "Additional classes"
|
|
3250
|
+
}
|
|
3251
|
+
}
|
|
3252
|
+
},
|
|
3253
|
+
"sidenav": {
|
|
3254
|
+
"component": "sidenav",
|
|
3255
|
+
"version": 1,
|
|
3256
|
+
"required": [
|
|
3257
|
+
"items"
|
|
3258
|
+
],
|
|
3259
|
+
"props": {
|
|
3260
|
+
"items": {
|
|
3261
|
+
"type": "array",
|
|
3262
|
+
"description": "Array of navigation items: [{ text, href, current?, children?: [{ text, href, current?, children? }] }]",
|
|
3263
|
+
"items": {
|
|
3264
|
+
"type": "object",
|
|
3265
|
+
"description": "Navigation item.",
|
|
3266
|
+
"properties": {
|
|
3267
|
+
"text": {
|
|
3268
|
+
"type": "string",
|
|
3269
|
+
"description": "Link text."
|
|
3270
|
+
},
|
|
3271
|
+
"href": {
|
|
3272
|
+
"type": "string",
|
|
3273
|
+
"description": "Link URL."
|
|
3274
|
+
},
|
|
3275
|
+
"current": {
|
|
3276
|
+
"type": "boolean",
|
|
3277
|
+
"description": "Marks the active item."
|
|
3278
|
+
},
|
|
3279
|
+
"children": {
|
|
3280
|
+
"type": "array",
|
|
3281
|
+
"description": "Nested sub-items (same shape)."
|
|
3282
|
+
}
|
|
3283
|
+
}
|
|
3284
|
+
}
|
|
3285
|
+
},
|
|
3286
|
+
"ariaLabel": {
|
|
3287
|
+
"type": "string",
|
|
3288
|
+
"default": "Side navigation",
|
|
3289
|
+
"description": "Accessible aria-label for the nav element."
|
|
3290
|
+
},
|
|
3291
|
+
"className": {
|
|
3292
|
+
"type": "string",
|
|
3293
|
+
"description": "Additional CSS classes. Use responsive utilities like 'display-none tablet:display-block' to hide/show at breakpoints."
|
|
3294
|
+
}
|
|
3295
|
+
}
|
|
3296
|
+
},
|
|
3297
|
+
"site-alert": {
|
|
3298
|
+
"component": "site-alert",
|
|
3299
|
+
"version": 1,
|
|
3300
|
+
"required": [],
|
|
3301
|
+
"props": {
|
|
3302
|
+
"className": {
|
|
3303
|
+
"type": "string",
|
|
3304
|
+
"description": "Additional classes"
|
|
3305
|
+
},
|
|
3306
|
+
"variant": {
|
|
3307
|
+
"type": "select",
|
|
3308
|
+
"options": [
|
|
3309
|
+
"info",
|
|
3310
|
+
"emergency",
|
|
3311
|
+
"maintenance",
|
|
3312
|
+
"maintenance-warning"
|
|
3313
|
+
],
|
|
3314
|
+
"description": "Site alert variant"
|
|
3315
|
+
},
|
|
3316
|
+
"slim": {
|
|
3317
|
+
"type": "boolean",
|
|
3318
|
+
"description": "Slim alert variant"
|
|
3319
|
+
},
|
|
3320
|
+
"noIcon": {
|
|
3321
|
+
"type": "boolean",
|
|
3322
|
+
"description": "Hide the alert icon"
|
|
3323
|
+
},
|
|
3324
|
+
"onDismiss": {
|
|
3325
|
+
"type": "function",
|
|
3326
|
+
"description": "Optional callback fired when the dismiss button is clicked. When provided, a dismiss button is rendered inside the alert body."
|
|
3327
|
+
},
|
|
3328
|
+
"role": {
|
|
3329
|
+
"type": "select",
|
|
3330
|
+
"options": [
|
|
3331
|
+
"",
|
|
3332
|
+
"alert",
|
|
3333
|
+
"status"
|
|
3334
|
+
],
|
|
3335
|
+
"description": "Optional ARIA role for the site alert section"
|
|
3336
|
+
},
|
|
3337
|
+
"alertHeading": {
|
|
3338
|
+
"type": "string",
|
|
3339
|
+
"description": "Alert heading text"
|
|
3340
|
+
},
|
|
3341
|
+
"alertText": {
|
|
3342
|
+
"type": "string",
|
|
3343
|
+
"description": "Alert text content"
|
|
3344
|
+
},
|
|
3345
|
+
"alertContent": {
|
|
3346
|
+
"type": "slot",
|
|
3347
|
+
"description": "Alert rich content (React node / HTML string)"
|
|
3348
|
+
},
|
|
3349
|
+
"ariaLabel": {
|
|
3350
|
+
"type": "string",
|
|
3351
|
+
"description": "Aria label for section"
|
|
3352
|
+
},
|
|
3353
|
+
"ariaLabelledby": {
|
|
3354
|
+
"type": "string",
|
|
3355
|
+
"description": "Aria-labelledby target for section (preferred over ariaLabel)"
|
|
3356
|
+
}
|
|
3357
|
+
}
|
|
3358
|
+
},
|
|
3359
|
+
"skipnav": {
|
|
3360
|
+
"component": "skipnav",
|
|
3361
|
+
"version": 1,
|
|
3362
|
+
"required": [],
|
|
3363
|
+
"props": {
|
|
3364
|
+
"target": {
|
|
3365
|
+
"type": "string",
|
|
3366
|
+
"default": "#main-content",
|
|
3367
|
+
"description": "Preferred: the ID (with or without '#') of the element to skip to. The component will normalize and add the leading '#'."
|
|
3368
|
+
},
|
|
3369
|
+
"href": {
|
|
3370
|
+
"type": "string",
|
|
3371
|
+
"description": "Full href for the skip link (overrides `target`/`skipTo`). Useful if you need to link to a different page or a non-anchor URL."
|
|
3372
|
+
},
|
|
3373
|
+
"content": {
|
|
3374
|
+
"type": "string",
|
|
3375
|
+
"default": "Skip to main content",
|
|
3376
|
+
"description": "Text content for the skipnav link"
|
|
3377
|
+
},
|
|
3378
|
+
"children": {
|
|
3379
|
+
"type": "slot",
|
|
3380
|
+
"description": "Custom content for the skipnav link. If provided, this will override the `content` prop."
|
|
3381
|
+
},
|
|
3382
|
+
"className": {
|
|
3383
|
+
"type": "string",
|
|
3384
|
+
"description": "Additional classes to add to the skipnav link"
|
|
3385
|
+
}
|
|
3386
|
+
}
|
|
3387
|
+
},
|
|
3388
|
+
"spinner": {
|
|
3389
|
+
"component": "spinner",
|
|
3390
|
+
"version": 1,
|
|
3391
|
+
"required": [],
|
|
3392
|
+
"props": {
|
|
3393
|
+
"size": {
|
|
3394
|
+
"type": "select",
|
|
3395
|
+
"options": [
|
|
3396
|
+
null,
|
|
3397
|
+
1,
|
|
3398
|
+
2,
|
|
3399
|
+
3,
|
|
3400
|
+
4,
|
|
3401
|
+
5,
|
|
3402
|
+
6,
|
|
3403
|
+
7,
|
|
3404
|
+
8,
|
|
3405
|
+
9
|
|
3406
|
+
],
|
|
3407
|
+
"default": 3,
|
|
3408
|
+
"description": "Controls the diameter of the spinner. Matches USWDS icon size scale (1–9)."
|
|
3409
|
+
},
|
|
3410
|
+
"color": {
|
|
3411
|
+
"type": "string",
|
|
3412
|
+
"default": null,
|
|
3413
|
+
"description": "USWDS color token applied as text-{color}, e.g. 'primary', 'white', 'accent-cool'."
|
|
3414
|
+
},
|
|
3415
|
+
"label": {
|
|
3416
|
+
"type": "string",
|
|
3417
|
+
"default": "Loading...",
|
|
3418
|
+
"description": "Screen-reader-only label text."
|
|
3419
|
+
},
|
|
3420
|
+
"omitLabel": {
|
|
3421
|
+
"type": "boolean",
|
|
3422
|
+
"default": false,
|
|
3423
|
+
"description": "Set to true to omit the sr-only label, e.g. when wrapped in a Tooltip."
|
|
3424
|
+
},
|
|
3425
|
+
"className": {
|
|
3426
|
+
"type": "string",
|
|
3427
|
+
"default": "",
|
|
3428
|
+
"description": "Additional CSS classes on the wrapper element."
|
|
3429
|
+
}
|
|
3430
|
+
}
|
|
3431
|
+
},
|
|
3432
|
+
"status": {
|
|
3433
|
+
"component": "status",
|
|
3434
|
+
"version": 1,
|
|
3435
|
+
"required": [],
|
|
3436
|
+
"props": {
|
|
3437
|
+
"color": {
|
|
3438
|
+
"type": "select",
|
|
3439
|
+
"options": [
|
|
3440
|
+
"",
|
|
3441
|
+
"primary",
|
|
3442
|
+
"accent-cool",
|
|
3443
|
+
"accent-warm",
|
|
3444
|
+
"secondary",
|
|
3445
|
+
"success",
|
|
3446
|
+
"warning",
|
|
3447
|
+
"error"
|
|
3448
|
+
],
|
|
3449
|
+
"description": "Color of the status dot via USWDS text-* utilities. Uses currentColor, so any text color class applies."
|
|
3450
|
+
},
|
|
3451
|
+
"size": {
|
|
3452
|
+
"type": "select",
|
|
3453
|
+
"options": [
|
|
3454
|
+
"",
|
|
3455
|
+
"xs",
|
|
3456
|
+
"sm",
|
|
3457
|
+
"md",
|
|
3458
|
+
"lg",
|
|
3459
|
+
"xl"
|
|
3460
|
+
],
|
|
3461
|
+
"description": "Size of the status dot. Defaults to md (.5rem)."
|
|
3462
|
+
},
|
|
3463
|
+
"animation": {
|
|
3464
|
+
"type": "select",
|
|
3465
|
+
"options": [
|
|
3466
|
+
"",
|
|
3467
|
+
"ping",
|
|
3468
|
+
"pulse",
|
|
3469
|
+
"bounce"
|
|
3470
|
+
],
|
|
3471
|
+
"description": "Optional animation to apply to the status dot."
|
|
3472
|
+
},
|
|
3473
|
+
"className": {
|
|
3474
|
+
"type": "string",
|
|
3475
|
+
"description": "Additional CSS classes."
|
|
3476
|
+
}
|
|
3477
|
+
}
|
|
3478
|
+
},
|
|
3479
|
+
"step-indicator": {
|
|
3480
|
+
"component": "step-indicator",
|
|
3481
|
+
"version": 1,
|
|
3482
|
+
"required": [
|
|
3483
|
+
"steps"
|
|
3484
|
+
],
|
|
3485
|
+
"props": {
|
|
3486
|
+
"steps": {
|
|
3487
|
+
"type": "array",
|
|
3488
|
+
"description": "Array of step objects with a label property",
|
|
3489
|
+
"items": {
|
|
3490
|
+
"type": "object",
|
|
3491
|
+
"description": "Step.",
|
|
3492
|
+
"properties": {
|
|
3493
|
+
"label": {
|
|
3494
|
+
"type": "string",
|
|
3495
|
+
"description": "Step label text."
|
|
3496
|
+
}
|
|
3497
|
+
}
|
|
3498
|
+
}
|
|
3499
|
+
},
|
|
3500
|
+
"currentStep": {
|
|
3501
|
+
"type": "string",
|
|
3502
|
+
"description": "1-based index of the active step"
|
|
3503
|
+
},
|
|
3504
|
+
"variant": {
|
|
3505
|
+
"type": "select",
|
|
3506
|
+
"options": [
|
|
3507
|
+
"",
|
|
3508
|
+
"no-labels",
|
|
3509
|
+
"center",
|
|
3510
|
+
"counters",
|
|
3511
|
+
"counters-sm"
|
|
3512
|
+
],
|
|
3513
|
+
"description": "Visual variant modifier"
|
|
3514
|
+
},
|
|
3515
|
+
"headingTag": {
|
|
3516
|
+
"type": "select",
|
|
3517
|
+
"options": [
|
|
3518
|
+
"h2",
|
|
3519
|
+
"h3",
|
|
3520
|
+
"h4",
|
|
3521
|
+
"h5",
|
|
3522
|
+
"h6"
|
|
3523
|
+
],
|
|
3524
|
+
"description": "Heading element for the step counter header"
|
|
3525
|
+
},
|
|
3526
|
+
"className": {
|
|
3527
|
+
"type": "string",
|
|
3528
|
+
"description": "Additional CSS classes"
|
|
3529
|
+
}
|
|
3530
|
+
}
|
|
3531
|
+
},
|
|
3532
|
+
"summary-box": {
|
|
3533
|
+
"component": "summary-box",
|
|
3534
|
+
"version": 1,
|
|
3535
|
+
"required": [
|
|
3536
|
+
"heading"
|
|
3537
|
+
],
|
|
3538
|
+
"props": {
|
|
3539
|
+
"id": {
|
|
3540
|
+
"type": "string",
|
|
3541
|
+
"description": "Heading id used by aria-labelledby"
|
|
3542
|
+
},
|
|
3543
|
+
"heading": {
|
|
3544
|
+
"type": "string",
|
|
3545
|
+
"description": "Required summary heading"
|
|
3546
|
+
},
|
|
3547
|
+
"content": {
|
|
3548
|
+
"type": "string",
|
|
3549
|
+
"description": "HTML/text summary content"
|
|
3550
|
+
},
|
|
3551
|
+
"children": {
|
|
3552
|
+
"type": "string",
|
|
3553
|
+
"description": "Inner HTML or text (takes priority over content)"
|
|
3554
|
+
},
|
|
3555
|
+
"className": {
|
|
3556
|
+
"type": "string",
|
|
3557
|
+
"description": "Additional classes"
|
|
3558
|
+
}
|
|
3559
|
+
}
|
|
3560
|
+
},
|
|
3561
|
+
"swap": {
|
|
3562
|
+
"component": "swap",
|
|
3563
|
+
"version": 1,
|
|
3564
|
+
"required": [],
|
|
3565
|
+
"props": {
|
|
3566
|
+
"children": {
|
|
3567
|
+
"type": "string",
|
|
3568
|
+
"description": "Advanced override for full inner HTML"
|
|
3569
|
+
},
|
|
3570
|
+
"onContent": {
|
|
3571
|
+
"type": "string",
|
|
3572
|
+
"description": "Markup or text shown when swap is on"
|
|
3573
|
+
},
|
|
3574
|
+
"offContent": {
|
|
3575
|
+
"type": "string",
|
|
3576
|
+
"description": "Markup or text shown when swap is off"
|
|
3577
|
+
},
|
|
3578
|
+
"includeInput": {
|
|
3579
|
+
"type": "boolean",
|
|
3580
|
+
"description": "Render default checkbox input control"
|
|
3581
|
+
},
|
|
3582
|
+
"inputId": {
|
|
3583
|
+
"type": "string",
|
|
3584
|
+
"description": "ID applied to the generated checkbox"
|
|
3585
|
+
},
|
|
3586
|
+
"inputClassName": {
|
|
3587
|
+
"type": "string",
|
|
3588
|
+
"description": "Classes applied to the generated checkbox"
|
|
3589
|
+
},
|
|
3590
|
+
"inputChecked": {
|
|
3591
|
+
"type": "boolean",
|
|
3592
|
+
"description": "Whether generated checkbox is initially checked"
|
|
3593
|
+
},
|
|
3594
|
+
"inputProps": {
|
|
3595
|
+
"type": "object",
|
|
3596
|
+
"description": "Additional attributes applied to the generated checkbox"
|
|
3597
|
+
},
|
|
3598
|
+
"onClassName": {
|
|
3599
|
+
"type": "string",
|
|
3600
|
+
"description": "Additional classes on on-state wrapper"
|
|
3601
|
+
},
|
|
3602
|
+
"offClassName": {
|
|
3603
|
+
"type": "string",
|
|
3604
|
+
"description": "Additional classes on off-state wrapper"
|
|
3605
|
+
},
|
|
3606
|
+
"className": {
|
|
3607
|
+
"type": "string",
|
|
3608
|
+
"description": "Additional CSS classes"
|
|
3609
|
+
},
|
|
3610
|
+
"variant": {
|
|
3611
|
+
"type": "string",
|
|
3612
|
+
"description": "Animation variant: 'default', 'active', 'rotate', or 'flip'"
|
|
3613
|
+
}
|
|
3614
|
+
}
|
|
3615
|
+
},
|
|
3616
|
+
"switch": {
|
|
3617
|
+
"component": "switch",
|
|
3618
|
+
"version": 1,
|
|
3619
|
+
"required": [],
|
|
3620
|
+
"props": {
|
|
3621
|
+
"id": {
|
|
3622
|
+
"type": "string",
|
|
3623
|
+
"description": "Element id"
|
|
3624
|
+
},
|
|
3625
|
+
"name": {
|
|
3626
|
+
"type": "string",
|
|
3627
|
+
"description": "Form input name"
|
|
3628
|
+
},
|
|
3629
|
+
"checked": {
|
|
3630
|
+
"type": "boolean",
|
|
3631
|
+
"description": "Controlled checked state",
|
|
3632
|
+
"default": false
|
|
3633
|
+
},
|
|
3634
|
+
"defaultChecked": {
|
|
3635
|
+
"type": "boolean",
|
|
3636
|
+
"description": "Initial checked state for uncontrolled usage",
|
|
3637
|
+
"default": false
|
|
3638
|
+
},
|
|
3639
|
+
"disabled": {
|
|
3640
|
+
"type": "boolean",
|
|
3641
|
+
"description": "Disable the control",
|
|
3642
|
+
"default": false
|
|
3643
|
+
},
|
|
3644
|
+
"size": {
|
|
3645
|
+
"type": "string",
|
|
3646
|
+
"description": "Size variant: xs, sm, md, lg, xl"
|
|
3647
|
+
},
|
|
3648
|
+
"variant": {
|
|
3649
|
+
"type": "string",
|
|
3650
|
+
"description": "Color variant (primary, success, warning, etc.)"
|
|
3651
|
+
},
|
|
3652
|
+
"label": {
|
|
3653
|
+
"type": "string",
|
|
3654
|
+
"description": "Optional label text to display next to the switch"
|
|
3655
|
+
},
|
|
3656
|
+
"indeterminate": {
|
|
3657
|
+
"type": "boolean",
|
|
3658
|
+
"description": "Set the switch to an indeterminate state (visual only)",
|
|
3659
|
+
"default": false
|
|
3660
|
+
},
|
|
3661
|
+
"ariaChecked": {
|
|
3662
|
+
"type": "string",
|
|
3663
|
+
"description": "ARIA attribute to indicate the checked state (true, false, mixed)"
|
|
3664
|
+
},
|
|
3665
|
+
"className": {
|
|
3666
|
+
"type": "string",
|
|
3667
|
+
"description": "Additional CSS classes"
|
|
3668
|
+
}
|
|
3669
|
+
}
|
|
3670
|
+
},
|
|
3671
|
+
"table": {
|
|
3672
|
+
"component": "table",
|
|
3673
|
+
"version": 1,
|
|
3674
|
+
"required": [
|
|
3675
|
+
"columns",
|
|
3676
|
+
"data"
|
|
3677
|
+
],
|
|
3678
|
+
"props": {
|
|
3679
|
+
"id": {
|
|
3680
|
+
"type": "string",
|
|
3681
|
+
"description": "ID for the <table> element. Required for accessibility when using sticky headers or scrollable tables."
|
|
3682
|
+
},
|
|
3683
|
+
"columns": {
|
|
3684
|
+
"type": "array",
|
|
3685
|
+
"description": "Column definitions. Each item: { key, header, render, align, sortable, width, pin, primary, hidden, aggregate, footer, className, headerClassName }.",
|
|
3686
|
+
"items": {
|
|
3687
|
+
"type": "object",
|
|
3688
|
+
"description": "Column definition.",
|
|
3689
|
+
"properties": {
|
|
3690
|
+
"key": {
|
|
3691
|
+
"type": "string",
|
|
3692
|
+
"description": "Row data property to read."
|
|
3693
|
+
},
|
|
3694
|
+
"header": {
|
|
3695
|
+
"type": "string",
|
|
3696
|
+
"description": "Column header text."
|
|
3697
|
+
},
|
|
3698
|
+
"render": {
|
|
3699
|
+
"type": "function",
|
|
3700
|
+
"description": "Custom cell renderer: (value, row) => node."
|
|
3701
|
+
},
|
|
3702
|
+
"align": {
|
|
3703
|
+
"type": "select",
|
|
3704
|
+
"options": [
|
|
3705
|
+
"left",
|
|
3706
|
+
"center",
|
|
3707
|
+
"right"
|
|
3708
|
+
],
|
|
3709
|
+
"description": "Cell text alignment."
|
|
3710
|
+
},
|
|
3711
|
+
"sortable": {
|
|
3712
|
+
"type": "boolean",
|
|
3713
|
+
"description": "Allow sorting by this column."
|
|
3714
|
+
},
|
|
3715
|
+
"width": {
|
|
3716
|
+
"type": "string",
|
|
3717
|
+
"description": "CSS width for the column."
|
|
3718
|
+
},
|
|
3719
|
+
"pin": {
|
|
3720
|
+
"type": "select",
|
|
3721
|
+
"options": [
|
|
3722
|
+
"left",
|
|
3723
|
+
"right"
|
|
3724
|
+
],
|
|
3725
|
+
"description": "Pin the column on horizontal scroll."
|
|
3726
|
+
},
|
|
3727
|
+
"primary": {
|
|
3728
|
+
"type": "boolean",
|
|
3729
|
+
"description": "Marks the primary column shown in stacked/responsive mode."
|
|
3730
|
+
},
|
|
3731
|
+
"hidden": {
|
|
3732
|
+
"type": "boolean",
|
|
3733
|
+
"description": "Hide the column."
|
|
3734
|
+
},
|
|
3735
|
+
"aggregate": {
|
|
3736
|
+
"type": "function",
|
|
3737
|
+
"description": "Footer aggregate function: (data) => value."
|
|
3738
|
+
},
|
|
3739
|
+
"footer": {
|
|
3740
|
+
"type": "string",
|
|
3741
|
+
"description": "Static footer cell content."
|
|
3742
|
+
},
|
|
3743
|
+
"className": {
|
|
3744
|
+
"type": "string",
|
|
3745
|
+
"description": "Additional cell classes."
|
|
3746
|
+
},
|
|
3747
|
+
"headerClassName": {
|
|
3748
|
+
"type": "string",
|
|
3749
|
+
"description": "Additional header cell classes."
|
|
3750
|
+
}
|
|
3751
|
+
}
|
|
3752
|
+
}
|
|
3753
|
+
},
|
|
3754
|
+
"data": {
|
|
3755
|
+
"type": "array",
|
|
3756
|
+
"description": "Array of row data objects."
|
|
3757
|
+
},
|
|
3758
|
+
"primaryKey": {
|
|
3759
|
+
"type": "string",
|
|
3760
|
+
"default": "id",
|
|
3761
|
+
"description": "Property name used as the unique row identifier."
|
|
3762
|
+
},
|
|
3763
|
+
"caption": {
|
|
3764
|
+
"type": "string",
|
|
3765
|
+
"description": "Table caption rendered as <caption>."
|
|
3766
|
+
},
|
|
3767
|
+
"striped": {
|
|
3768
|
+
"type": "boolean",
|
|
3769
|
+
"default": false,
|
|
3770
|
+
"description": "Apply alternating row shading (usa-table--striped)."
|
|
3771
|
+
},
|
|
3772
|
+
"borderless": {
|
|
3773
|
+
"type": "boolean",
|
|
3774
|
+
"default": false,
|
|
3775
|
+
"description": "Remove cell borders (usa-table--borderless)."
|
|
3776
|
+
},
|
|
3777
|
+
"compact": {
|
|
3778
|
+
"type": "boolean",
|
|
3779
|
+
"default": false,
|
|
3780
|
+
"description": "Reduce cell padding (usa-table--compact)."
|
|
3781
|
+
},
|
|
3782
|
+
"scrollable": {
|
|
3783
|
+
"type": "boolean",
|
|
3784
|
+
"default": false,
|
|
3785
|
+
"description": "Wrap the table in a horizontally-scrollable container."
|
|
3786
|
+
},
|
|
3787
|
+
"height": {
|
|
3788
|
+
"type": "string",
|
|
3789
|
+
"description": "CSS max-height for vertical scrolling (e.g. '400px')."
|
|
3790
|
+
},
|
|
3791
|
+
"responsive": {
|
|
3792
|
+
"type": "select",
|
|
3793
|
+
"options": [
|
|
3794
|
+
"false",
|
|
3795
|
+
"stack",
|
|
3796
|
+
"stack-header"
|
|
3797
|
+
],
|
|
3798
|
+
"default": "false",
|
|
3799
|
+
"description": "Responsive mode: 'stack' or 'stack-header' for mobile stacking behaviour."
|
|
3800
|
+
},
|
|
3801
|
+
"stickyHeader": {
|
|
3802
|
+
"type": "boolean",
|
|
3803
|
+
"default": false,
|
|
3804
|
+
"description": "Keep the header row visible while scrolling (usa-table--sticky-header)."
|
|
3805
|
+
},
|
|
3806
|
+
"stickyFirstColumn": {
|
|
3807
|
+
"type": "boolean",
|
|
3808
|
+
"default": false,
|
|
3809
|
+
"description": "Sticky-pin the first column on horizontal scroll."
|
|
3810
|
+
},
|
|
3811
|
+
"sortable": {
|
|
3812
|
+
"type": "boolean",
|
|
3813
|
+
"default": false,
|
|
3814
|
+
"description": "Enable sorting on all columns (individual columns can opt out via column.sortable: false)."
|
|
3815
|
+
},
|
|
3816
|
+
"sort": {
|
|
3817
|
+
"type": "object",
|
|
3818
|
+
"description": "Controlled sort state: { key: string, direction: 'asc' | 'desc' | null }."
|
|
3819
|
+
},
|
|
3820
|
+
"onSort": {
|
|
3821
|
+
"type": "function",
|
|
3822
|
+
"description": "Callback fired when a column header is clicked: ({ key, direction }) => void."
|
|
3823
|
+
},
|
|
3824
|
+
"selectionMode": {
|
|
3825
|
+
"type": "select",
|
|
3826
|
+
"options": [
|
|
3827
|
+
"null",
|
|
3828
|
+
"checkbox",
|
|
3829
|
+
"radio"
|
|
3830
|
+
],
|
|
3831
|
+
"default": "null",
|
|
3832
|
+
"description": "Row selection mode. 'checkbox' enables multi-select; 'radio' enables single-select."
|
|
3833
|
+
},
|
|
3834
|
+
"selectionPosition": {
|
|
3835
|
+
"type": "select",
|
|
3836
|
+
"options": [
|
|
3837
|
+
"left",
|
|
3838
|
+
"right"
|
|
3839
|
+
],
|
|
3840
|
+
"default": "left",
|
|
3841
|
+
"description": "Position of the selection column."
|
|
3842
|
+
},
|
|
3843
|
+
"select": {
|
|
3844
|
+
"type": "array",
|
|
3845
|
+
"description": "Controlled array of selected primary key values."
|
|
3846
|
+
},
|
|
3847
|
+
"onSelect": {
|
|
3848
|
+
"type": "function",
|
|
3849
|
+
"description": "Callback fired when selection changes: (selectedKeys[]) => void."
|
|
3850
|
+
},
|
|
3851
|
+
"allowSelectAll": {
|
|
3852
|
+
"type": "boolean",
|
|
3853
|
+
"default": true,
|
|
3854
|
+
"description": "Show 'select all' checkbox in header (checkbox mode only)."
|
|
3855
|
+
},
|
|
3856
|
+
"disabled": {
|
|
3857
|
+
"type": "array",
|
|
3858
|
+
"description": "Array of primary key values for rows that should be non-interactive."
|
|
3859
|
+
},
|
|
3860
|
+
"onClickRow": {
|
|
3861
|
+
"type": "function",
|
|
3862
|
+
"description": "Callback fired when a row is clicked: (rowData, event) => void."
|
|
3863
|
+
},
|
|
3864
|
+
"groupBy": {
|
|
3865
|
+
"type": "object",
|
|
3866
|
+
"description": "Group rows by a property. String shorthand or object: { property, expand, onExpand, defaultExpanded }."
|
|
3867
|
+
},
|
|
3868
|
+
"rowDetails": {
|
|
3869
|
+
"type": "object",
|
|
3870
|
+
"description": "Enable expandable row detail panels. Function: (row) => ReactNode. Object: { render, expand, onExpand, expandLabel }."
|
|
3871
|
+
},
|
|
3872
|
+
"showFooter": {
|
|
3873
|
+
"type": "boolean",
|
|
3874
|
+
"default": false,
|
|
3875
|
+
"description": "Render a <tfoot> row using column.footer or column.aggregate values."
|
|
3876
|
+
},
|
|
3877
|
+
"paginate": {
|
|
3878
|
+
"type": "object",
|
|
3879
|
+
"description": "Enable pagination. true for client-side; object { pageSize, totalCount, onPageChange } for server-side."
|
|
3880
|
+
},
|
|
3881
|
+
"onMore": {
|
|
3882
|
+
"type": "function",
|
|
3883
|
+
"description": "Infinite scroll callback, called when the last row becomes visible."
|
|
3884
|
+
},
|
|
3885
|
+
"loading": {
|
|
3886
|
+
"type": "boolean",
|
|
3887
|
+
"default": false,
|
|
3888
|
+
"description": "Show a loading state overlay. Does not affect interactivity."
|
|
3889
|
+
},
|
|
3890
|
+
"placeholder": {
|
|
3891
|
+
"type": "string",
|
|
3892
|
+
"description": "Content shown when the data array is empty."
|
|
3893
|
+
},
|
|
3894
|
+
"className": {
|
|
3895
|
+
"type": "string",
|
|
3896
|
+
"default": "",
|
|
3897
|
+
"description": "Additional CSS classes applied to the <table> element."
|
|
3898
|
+
},
|
|
3899
|
+
"header_rows": {
|
|
3900
|
+
"type": "array",
|
|
3901
|
+
"default": null,
|
|
3902
|
+
"description": "Django only. Pre-computed header row structure from table_helper.build_header_rows(columns). Required for rendering; compute in the view and pass as context."
|
|
3903
|
+
},
|
|
3904
|
+
"leaf_columns": {
|
|
3905
|
+
"type": "array",
|
|
3906
|
+
"default": null,
|
|
3907
|
+
"description": "Django only. Flat list of leaf (non-parent) columns from table_helper.get_leaf_cols(columns). Required for body and footer rendering."
|
|
3908
|
+
},
|
|
3909
|
+
"total_cols": {
|
|
3910
|
+
"type": "number",
|
|
3911
|
+
"default": null,
|
|
3912
|
+
"description": "Django only. Total column count including aux columns (selection, detail). From table_helper.total_col_count()."
|
|
3913
|
+
},
|
|
3914
|
+
"total_depth": {
|
|
3915
|
+
"type": "number",
|
|
3916
|
+
"default": 1,
|
|
3917
|
+
"description": "Django only. Number of header levels; len(header_rows). Required for rowspan calculations."
|
|
3918
|
+
},
|
|
3919
|
+
"groups": {
|
|
3920
|
+
"type": "array",
|
|
3921
|
+
"default": null,
|
|
3922
|
+
"description": "Django only. Pre-grouped data from table_helper.group_data(data, field). Required when groupBy is set."
|
|
3923
|
+
},
|
|
3924
|
+
"defaultExpanded": {
|
|
3925
|
+
"type": "boolean",
|
|
3926
|
+
"default": true,
|
|
3927
|
+
"description": "Django only. Whether grouped rows start expanded. Defaults to true. Pass false to render all groups collapsed."
|
|
3928
|
+
},
|
|
3929
|
+
"footerValues": {
|
|
3930
|
+
"type": "object",
|
|
3931
|
+
"default": null,
|
|
3932
|
+
"description": "Django only. Pre-computed footer values dict from table_helper.compute_footer(columns, data). Required when showFooter is True."
|
|
3933
|
+
},
|
|
3934
|
+
"expandedRows": {
|
|
3935
|
+
"type": "array",
|
|
3936
|
+
"default": [],
|
|
3937
|
+
"description": "Django only. List of primary-key values whose detail rows are open on initial render. Mirrors the React rowDetails.expand controlled prop."
|
|
3938
|
+
},
|
|
3939
|
+
"rowDetailTemplate": {
|
|
3940
|
+
"type": "string",
|
|
3941
|
+
"default": null,
|
|
3942
|
+
"description": "Django only. Path to a Django partial template rendered as row-detail content (replaces React rowDetails.render)."
|
|
3943
|
+
},
|
|
3944
|
+
"rowDetailField": {
|
|
3945
|
+
"type": "string",
|
|
3946
|
+
"default": null,
|
|
3947
|
+
"description": "Django only. Key in each row dict whose value is used as inline row-detail content (simpler alternative to rowDetailTemplate)."
|
|
3948
|
+
},
|
|
3949
|
+
"rowUrlField": {
|
|
3950
|
+
"type": "string",
|
|
3951
|
+
"default": null,
|
|
3952
|
+
"description": "Django only. Key in each row dict holding the navigation URL for clickable rows (replaces React onClickRow). The block-link CSS pattern is used; no JS required."
|
|
3953
|
+
},
|
|
3954
|
+
"paginateUrlPrefix": {
|
|
3955
|
+
"type": "string",
|
|
3956
|
+
"default": "?page=",
|
|
3957
|
+
"description": "Django only. URL prefix for pagination page links, forwarded to the pagination sub-template."
|
|
3958
|
+
},
|
|
3959
|
+
"pagination": {
|
|
3960
|
+
"type": "object",
|
|
3961
|
+
"default": null,
|
|
3962
|
+
"description": "Django only. Pagination state dict from table_helper.paginate_table(): {current_page, total_pages, total, page_size}. Required when paginate is True."
|
|
3963
|
+
}
|
|
3964
|
+
}
|
|
3965
|
+
},
|
|
3966
|
+
"tag": {
|
|
3967
|
+
"component": "tag",
|
|
3968
|
+
"version": 1,
|
|
3969
|
+
"required": [],
|
|
3970
|
+
"props": {
|
|
3971
|
+
"id": {
|
|
3972
|
+
"type": "string",
|
|
3973
|
+
"description": "Unique identifier for the tag"
|
|
3974
|
+
},
|
|
3975
|
+
"big": {
|
|
3976
|
+
"type": "boolean",
|
|
3977
|
+
"default": false,
|
|
3978
|
+
"description": "Whether to use the big tag style"
|
|
3979
|
+
},
|
|
3980
|
+
"value": {
|
|
3981
|
+
"type": "string",
|
|
3982
|
+
"default": "",
|
|
3983
|
+
"description": "Value of the tag, used as the inner text or HTML in lieu of children"
|
|
3984
|
+
},
|
|
3985
|
+
"color": {
|
|
3986
|
+
"type": "string",
|
|
3987
|
+
"default": null,
|
|
3988
|
+
"description": "Color variant for the tag (e.g., null, 'primary', 'accent-cool', 'blue', 'base', etc.)"
|
|
3989
|
+
},
|
|
3990
|
+
"outline": {
|
|
3991
|
+
"type": "boolean",
|
|
3992
|
+
"default": false,
|
|
3993
|
+
"description": "Whether to use the outline style (transparent background with border)"
|
|
3994
|
+
},
|
|
3995
|
+
"icon": {
|
|
3996
|
+
"type": "string",
|
|
3997
|
+
"default": null,
|
|
3998
|
+
"description": "Name of the icon to display before the tag text, from the USWDS sprite (e.g., 'check', 'close', 'warning', etc.)"
|
|
3999
|
+
},
|
|
4000
|
+
"dismissible": {
|
|
4001
|
+
"type": "boolean",
|
|
4002
|
+
"default": false,
|
|
4003
|
+
"description": "Whether to render a dismiss button inside the tag."
|
|
4004
|
+
},
|
|
4005
|
+
"onDismiss": {
|
|
4006
|
+
"type": "string",
|
|
4007
|
+
"default": null,
|
|
4008
|
+
"description": "Optional inline JavaScript to run when the dismiss button is clicked. If omitted, the tag removes itself from the DOM."
|
|
4009
|
+
},
|
|
4010
|
+
"className": {
|
|
4011
|
+
"type": "string",
|
|
4012
|
+
"description": "Additional classes to add to the tag"
|
|
4013
|
+
},
|
|
4014
|
+
"children": {
|
|
4015
|
+
"type": "string",
|
|
4016
|
+
"description": "Inner HTML or text for the tag"
|
|
4017
|
+
}
|
|
4018
|
+
}
|
|
4019
|
+
},
|
|
4020
|
+
"tag-group": {
|
|
4021
|
+
"component": "tag-group",
|
|
4022
|
+
"version": 1,
|
|
4023
|
+
"required": [],
|
|
4024
|
+
"props": {
|
|
4025
|
+
"tagProps": {
|
|
4026
|
+
"type": "array",
|
|
4027
|
+
"description": "Array of tags rendered by the group.",
|
|
4028
|
+
"items": {
|
|
4029
|
+
"type": "object",
|
|
4030
|
+
"description": "Tag item.",
|
|
4031
|
+
"component": "tag"
|
|
4032
|
+
}
|
|
4033
|
+
},
|
|
4034
|
+
"children": {
|
|
4035
|
+
"type": "string",
|
|
4036
|
+
"description": "Inner HTML or text"
|
|
4037
|
+
},
|
|
4038
|
+
"className": {
|
|
4039
|
+
"type": "string",
|
|
4040
|
+
"description": "Additional classes"
|
|
4041
|
+
}
|
|
4042
|
+
}
|
|
4043
|
+
},
|
|
4044
|
+
"task-list": {
|
|
4045
|
+
"component": "task-list",
|
|
4046
|
+
"version": 1,
|
|
4047
|
+
"required": [
|
|
4048
|
+
"tasks"
|
|
4049
|
+
],
|
|
4050
|
+
"props": {
|
|
4051
|
+
"tasks": {
|
|
4052
|
+
"type": "array",
|
|
4053
|
+
"description": "Array of task objects.",
|
|
4054
|
+
"items": {
|
|
4055
|
+
"type": "object",
|
|
4056
|
+
"description": "Task item.",
|
|
4057
|
+
"properties": {
|
|
4058
|
+
"name": {
|
|
4059
|
+
"type": "string",
|
|
4060
|
+
"description": "Task name/label."
|
|
4061
|
+
},
|
|
4062
|
+
"href": {
|
|
4063
|
+
"type": "string",
|
|
4064
|
+
"description": "Link URL for the task."
|
|
4065
|
+
},
|
|
4066
|
+
"hint": {
|
|
4067
|
+
"type": "string",
|
|
4068
|
+
"description": "Optional helper text shown below the task name."
|
|
4069
|
+
},
|
|
4070
|
+
"tagProps": {
|
|
4071
|
+
"type": "object",
|
|
4072
|
+
"description": "Optional status tag displayed alongside the task.",
|
|
4073
|
+
"component": "tag"
|
|
4074
|
+
}
|
|
4075
|
+
}
|
|
4076
|
+
}
|
|
4077
|
+
},
|
|
4078
|
+
"className": {
|
|
4079
|
+
"type": "string",
|
|
4080
|
+
"description": "Additional classes applied to the root ul element."
|
|
4081
|
+
}
|
|
4082
|
+
}
|
|
4083
|
+
},
|
|
4084
|
+
"text-area": {
|
|
4085
|
+
"component": "text-area",
|
|
4086
|
+
"version": 1,
|
|
4087
|
+
"required": [],
|
|
4088
|
+
"props": {
|
|
4089
|
+
"label": {
|
|
4090
|
+
"type": "string",
|
|
4091
|
+
"default": null,
|
|
4092
|
+
"description": "The label for the textarea. If provided, renders a label element associated with the control."
|
|
4093
|
+
},
|
|
4094
|
+
"id": {
|
|
4095
|
+
"type": "string",
|
|
4096
|
+
"default": null,
|
|
4097
|
+
"description": "A unique identifier for the textarea, used to associate the label and for accessibility."
|
|
4098
|
+
},
|
|
4099
|
+
"name": {
|
|
4100
|
+
"type": "string",
|
|
4101
|
+
"default": null,
|
|
4102
|
+
"description": "name attribute for the textarea. Defaults to id."
|
|
4103
|
+
},
|
|
4104
|
+
"placeholder": {
|
|
4105
|
+
"type": "string",
|
|
4106
|
+
"default": "",
|
|
4107
|
+
"description": "Placeholder text displayed inside the textarea when empty."
|
|
4108
|
+
},
|
|
4109
|
+
"defaultValue": {
|
|
4110
|
+
"type": "string",
|
|
4111
|
+
"default": "",
|
|
4112
|
+
"description": "Initial value of the textarea."
|
|
4113
|
+
},
|
|
4114
|
+
"error": {
|
|
4115
|
+
"type": [
|
|
4116
|
+
"string",
|
|
4117
|
+
"boolean"
|
|
4118
|
+
],
|
|
4119
|
+
"default": null,
|
|
4120
|
+
"description": "An error message (string) to display when invalid, or `true` to mark the control as errored without a message."
|
|
4121
|
+
},
|
|
4122
|
+
"success": {
|
|
4123
|
+
"type": [
|
|
4124
|
+
"string",
|
|
4125
|
+
"boolean"
|
|
4126
|
+
],
|
|
4127
|
+
"default": null,
|
|
4128
|
+
"description": "A success message (string) to display when valid, or `true` to mark the control as successful without a message."
|
|
4129
|
+
},
|
|
4130
|
+
"disabled": {
|
|
4131
|
+
"type": "boolean",
|
|
4132
|
+
"default": false,
|
|
4133
|
+
"description": "Disables the textarea, preventing user interaction."
|
|
4134
|
+
},
|
|
4135
|
+
"hint": {
|
|
4136
|
+
"type": "string",
|
|
4137
|
+
"default": null,
|
|
4138
|
+
"description": "Hint text for additional guidance. Rendered as a span and referenced by `aria-describedby`."
|
|
4139
|
+
},
|
|
4140
|
+
"required": {
|
|
4141
|
+
"type": "boolean",
|
|
4142
|
+
"default": false,
|
|
4143
|
+
"description": "Marks the textarea as required."
|
|
4144
|
+
},
|
|
4145
|
+
"screenReaderOnlyLabel": {
|
|
4146
|
+
"type": "boolean",
|
|
4147
|
+
"default": false,
|
|
4148
|
+
"description": "Visually hides the label while keeping it accessible to screen readers."
|
|
4149
|
+
},
|
|
4150
|
+
"formGroup": {
|
|
4151
|
+
"type": "boolean",
|
|
4152
|
+
"default": true,
|
|
4153
|
+
"description": "Whether to wrap the label/hint/error/control in a `.usa-form-group`. Set to `false` when composing inside another form group."
|
|
4154
|
+
},
|
|
4155
|
+
"className": {
|
|
4156
|
+
"type": "string",
|
|
4157
|
+
"default": "",
|
|
4158
|
+
"description": "Additional CSS classes to apply to the textarea."
|
|
4159
|
+
}
|
|
4160
|
+
}
|
|
4161
|
+
},
|
|
4162
|
+
"theme-picker": {
|
|
4163
|
+
"component": "theme-picker",
|
|
4164
|
+
"version": 1,
|
|
4165
|
+
"required": [
|
|
4166
|
+
"themes"
|
|
4167
|
+
],
|
|
4168
|
+
"props": {
|
|
4169
|
+
"id": {
|
|
4170
|
+
"type": "string",
|
|
4171
|
+
"description": "Element id for the select"
|
|
4172
|
+
},
|
|
4173
|
+
"name": {
|
|
4174
|
+
"type": "string",
|
|
4175
|
+
"description": "Form field name"
|
|
4176
|
+
},
|
|
4177
|
+
"label": {
|
|
4178
|
+
"type": "string",
|
|
4179
|
+
"default": "Theme",
|
|
4180
|
+
"description": "Label displayed above the select"
|
|
4181
|
+
},
|
|
4182
|
+
"themes": {
|
|
4183
|
+
"type": "array",
|
|
4184
|
+
"description": "Array of { value, label } theme options."
|
|
4185
|
+
},
|
|
4186
|
+
"defaultValue": {
|
|
4187
|
+
"type": "string",
|
|
4188
|
+
"description": "Initial selected value for uncontrolled usage"
|
|
4189
|
+
},
|
|
4190
|
+
"onChange": {
|
|
4191
|
+
"type": "string",
|
|
4192
|
+
"description": "JavaScript function to call when the selected theme changes — applying the theme (CSS variables, stylesheets, persistence, etc.) is the caller's responsibility"
|
|
4193
|
+
},
|
|
4194
|
+
"className": {
|
|
4195
|
+
"type": "string",
|
|
4196
|
+
"description": "Additional CSS classes"
|
|
4197
|
+
}
|
|
4198
|
+
}
|
|
4199
|
+
},
|
|
4200
|
+
"time-picker": {
|
|
4201
|
+
"component": "time-picker",
|
|
4202
|
+
"version": 1,
|
|
4203
|
+
"required": [],
|
|
4204
|
+
"props": {
|
|
4205
|
+
"id": {
|
|
4206
|
+
"type": "string",
|
|
4207
|
+
"default": "appointment-time",
|
|
4208
|
+
"description": "id for the input. Label and hint ids are derived from this."
|
|
4209
|
+
},
|
|
4210
|
+
"name": {
|
|
4211
|
+
"type": "string",
|
|
4212
|
+
"description": "name attribute for the input. Defaults to id."
|
|
4213
|
+
},
|
|
4214
|
+
"label": {
|
|
4215
|
+
"type": "string",
|
|
4216
|
+
"description": "Label text for the field."
|
|
4217
|
+
},
|
|
4218
|
+
"hint": {
|
|
4219
|
+
"type": "string",
|
|
4220
|
+
"default": "Select a time from the dropdown. Type into the input to filter options.",
|
|
4221
|
+
"description": "Hint text displayed below the label."
|
|
4222
|
+
},
|
|
4223
|
+
"error": {
|
|
4224
|
+
"type": "string",
|
|
4225
|
+
"description": "Error message. Renders aria-describedby and error styling."
|
|
4226
|
+
},
|
|
4227
|
+
"disabled": {
|
|
4228
|
+
"type": "boolean",
|
|
4229
|
+
"default": false,
|
|
4230
|
+
"description": "Disables the time picker."
|
|
4231
|
+
},
|
|
4232
|
+
"ariaDisabled": {
|
|
4233
|
+
"type": "boolean",
|
|
4234
|
+
"default": false,
|
|
4235
|
+
"description": "Marks the time picker aria-disabled without preventing interaction."
|
|
4236
|
+
},
|
|
4237
|
+
"required": {
|
|
4238
|
+
"type": "boolean",
|
|
4239
|
+
"default": false,
|
|
4240
|
+
"description": "Marks the field as required."
|
|
4241
|
+
},
|
|
4242
|
+
"defaultValue": {
|
|
4243
|
+
"type": "string",
|
|
4244
|
+
"description": "Initial value shown in the time picker (e.g. \"1:00pm\"). Sets the value attribute on the input."
|
|
4245
|
+
},
|
|
4246
|
+
"minTime": {
|
|
4247
|
+
"type": "string",
|
|
4248
|
+
"description": "Earliest time option in hh:mm 24-hour format. Sets data-min-time on the wrapper. USWDS default: 00:00."
|
|
4249
|
+
},
|
|
4250
|
+
"maxTime": {
|
|
4251
|
+
"type": "string",
|
|
4252
|
+
"description": "Latest time option in hh:mm 24-hour format. Sets data-max-time on the wrapper. USWDS default: 23:59."
|
|
4253
|
+
},
|
|
4254
|
+
"step": {
|
|
4255
|
+
"type": "string",
|
|
4256
|
+
"description": "Number of minutes between options (minimum 1). Sets data-step on the wrapper. USWDS default: 30."
|
|
4257
|
+
},
|
|
4258
|
+
"formGroup": {
|
|
4259
|
+
"type": "boolean",
|
|
4260
|
+
"default": true,
|
|
4261
|
+
"description": "Whether to wrap the label/hint/error/control in a `.usa-form-group`. Set to `false` when composing inside another form group."
|
|
4262
|
+
},
|
|
4263
|
+
"className": {
|
|
4264
|
+
"type": "string",
|
|
4265
|
+
"default": "",
|
|
4266
|
+
"description": "Additional classes for the usa-time-picker wrapper."
|
|
4267
|
+
}
|
|
4268
|
+
}
|
|
4269
|
+
},
|
|
4270
|
+
"toggle": {
|
|
4271
|
+
"component": "toggle",
|
|
4272
|
+
"version": 1,
|
|
4273
|
+
"required": [
|
|
4274
|
+
"options"
|
|
4275
|
+
],
|
|
4276
|
+
"props": {
|
|
4277
|
+
"id": {
|
|
4278
|
+
"type": "string",
|
|
4279
|
+
"description": "ID for the control (used as prefix for option IDs)"
|
|
4280
|
+
},
|
|
4281
|
+
"options": {
|
|
4282
|
+
"type": "array",
|
|
4283
|
+
"description": "Array of option objects: {value,label,icon?,disabled?}",
|
|
4284
|
+
"items": {
|
|
4285
|
+
"type": "object",
|
|
4286
|
+
"description": "Toggle option.",
|
|
4287
|
+
"properties": {
|
|
4288
|
+
"value": {
|
|
4289
|
+
"type": "string",
|
|
4290
|
+
"description": "Option value."
|
|
4291
|
+
},
|
|
4292
|
+
"label": {
|
|
4293
|
+
"type": "string",
|
|
4294
|
+
"description": "Option display label."
|
|
4295
|
+
},
|
|
4296
|
+
"icon": {
|
|
4297
|
+
"type": "string",
|
|
4298
|
+
"description": "Optional icon name."
|
|
4299
|
+
},
|
|
4300
|
+
"disabled": {
|
|
4301
|
+
"type": "boolean",
|
|
4302
|
+
"description": "Disable this option."
|
|
4303
|
+
}
|
|
4304
|
+
}
|
|
4305
|
+
}
|
|
4306
|
+
},
|
|
4307
|
+
"value": {
|
|
4308
|
+
"type": "string",
|
|
4309
|
+
"description": "Controlled selected value"
|
|
4310
|
+
},
|
|
4311
|
+
"defaultValue": {
|
|
4312
|
+
"type": "string",
|
|
4313
|
+
"description": "Uncontrolled initial value"
|
|
4314
|
+
},
|
|
4315
|
+
"name": {
|
|
4316
|
+
"type": "string",
|
|
4317
|
+
"description": "Name attribute for radio inputs"
|
|
4318
|
+
},
|
|
4319
|
+
"variant": {
|
|
4320
|
+
"type": "select",
|
|
4321
|
+
"options": [
|
|
4322
|
+
"text",
|
|
4323
|
+
"icon"
|
|
4324
|
+
],
|
|
4325
|
+
"description": "Visual variant"
|
|
4326
|
+
},
|
|
4327
|
+
"disabled": {
|
|
4328
|
+
"type": "boolean",
|
|
4329
|
+
"description": "Disable the whole control",
|
|
4330
|
+
"default": false
|
|
4331
|
+
},
|
|
4332
|
+
"className": {
|
|
4333
|
+
"type": "string",
|
|
4334
|
+
"description": "Additional classes"
|
|
4335
|
+
}
|
|
4336
|
+
}
|
|
4337
|
+
},
|
|
4338
|
+
"tooltip": {
|
|
4339
|
+
"component": "tooltip",
|
|
4340
|
+
"version": 1,
|
|
4341
|
+
"required": [],
|
|
4342
|
+
"props": {
|
|
4343
|
+
"label": {
|
|
4344
|
+
"type": "string",
|
|
4345
|
+
"default": "Tooltip text",
|
|
4346
|
+
"description": "The text content displayed inside the tooltip body."
|
|
4347
|
+
},
|
|
4348
|
+
"position": {
|
|
4349
|
+
"type": "select",
|
|
4350
|
+
"options": [
|
|
4351
|
+
"top",
|
|
4352
|
+
"bottom",
|
|
4353
|
+
"left",
|
|
4354
|
+
"right"
|
|
4355
|
+
],
|
|
4356
|
+
"default": "top",
|
|
4357
|
+
"description": "The direction the tooltip appears relative to its trigger."
|
|
4358
|
+
},
|
|
4359
|
+
"children": {
|
|
4360
|
+
"type": "string",
|
|
4361
|
+
"default": null,
|
|
4362
|
+
"description": "The trigger element that activates the tooltip on hover or focus."
|
|
4363
|
+
},
|
|
4364
|
+
"className": {
|
|
4365
|
+
"type": "string",
|
|
4366
|
+
"default": "",
|
|
4367
|
+
"description": "Additional CSS classes to apply to the tooltip wrapper."
|
|
4368
|
+
}
|
|
4369
|
+
}
|
|
4370
|
+
},
|
|
4371
|
+
"villain": {
|
|
4372
|
+
"component": "villain",
|
|
4373
|
+
"version": 1,
|
|
4374
|
+
"required": [
|
|
4375
|
+
"title"
|
|
4376
|
+
],
|
|
4377
|
+
"props": {
|
|
4378
|
+
"title": {
|
|
4379
|
+
"type": "string",
|
|
4380
|
+
"description": "The main heading text"
|
|
4381
|
+
},
|
|
4382
|
+
"callout": {
|
|
4383
|
+
"type": "string",
|
|
4384
|
+
"description": "Optional alternate heading span displayed above the main title"
|
|
4385
|
+
},
|
|
4386
|
+
"paragraph": {
|
|
4387
|
+
"type": "string",
|
|
4388
|
+
"description": "Optional body paragraph text"
|
|
4389
|
+
},
|
|
4390
|
+
"button": {
|
|
4391
|
+
"type": "object",
|
|
4392
|
+
"description": "Optional call-to-action button",
|
|
4393
|
+
"properties": {
|
|
4394
|
+
"href": {
|
|
4395
|
+
"type": "string",
|
|
4396
|
+
"description": "Button link URL"
|
|
4397
|
+
},
|
|
4398
|
+
"text": {
|
|
4399
|
+
"type": "string",
|
|
4400
|
+
"description": "Button label text"
|
|
4401
|
+
}
|
|
4402
|
+
}
|
|
4403
|
+
},
|
|
4404
|
+
"ariaLabel": {
|
|
4405
|
+
"type": "string",
|
|
4406
|
+
"description": "Accessible label for the section element (defaults to 'Introduction')"
|
|
4407
|
+
},
|
|
4408
|
+
"className": {
|
|
4409
|
+
"type": "string",
|
|
4410
|
+
"description": "Additional CSS classes"
|
|
4411
|
+
}
|
|
4412
|
+
}
|
|
4413
|
+
}
|
|
4414
|
+
}
|
|
4415
|
+
}
|