@czi-sds/mcp 0.5.3 → 0.5.4

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.
Files changed (27) hide show
  1. package/data/component-list.json +1 -0
  2. package/data/component-props/NavigationHeader.json +4 -0
  3. package/data/zeroheight-exports/Accordion.md +0 -4
  4. package/data/zeroheight-exports/Banner.md +0 -2
  5. package/data/zeroheight-exports/Buttons.md +0 -26
  6. package/data/zeroheight-exports/Callout.md +0 -12
  7. package/data/zeroheight-exports/Control-Inputs.md +0 -18
  8. package/data/zeroheight-exports/Dialog.md +0 -12
  9. package/data/zeroheight-exports/Downloads.md +0 -4
  10. package/data/zeroheight-exports/Dropdown-Input.md +0 -8
  11. package/data/zeroheight-exports/Dropdown-Menus.md +147 -362
  12. package/data/zeroheight-exports/Field-Inputs.md +0 -20
  13. package/data/zeroheight-exports/Filters.md +0 -6
  14. package/data/zeroheight-exports/Getting-Started.md +0 -6
  15. package/data/zeroheight-exports/Lists.md +0 -4
  16. package/data/zeroheight-exports/Loading-Indicator.md +0 -4
  17. package/data/zeroheight-exports/Navigation.md +0 -6
  18. package/data/zeroheight-exports/Notification.md +0 -10
  19. package/data/zeroheight-exports/Panel.md +0 -8
  20. package/data/zeroheight-exports/Search-Input.md +0 -6
  21. package/data/zeroheight-exports/Search.md +0 -18
  22. package/data/zeroheight-exports/Table.md +0 -20
  23. package/data/zeroheight-exports/Tabs.md +0 -10
  24. package/data/zeroheight-exports/Tags.md +0 -2
  25. package/data/zeroheight-exports/Text-Link.md +0 -16
  26. package/data/zeroheight-exports/Tooltips.md +0 -16
  27. package/package.json +2 -2
package/data/zeroheight-exports/Dropdown-Menus.md CHANGED
@@ -4,21 +4,21 @@ Dropdown Menus are coupled with Dropdown Inputs and in some cases Icon Buttons w
4
4
 
5
5
  ## Overview
6
6
 
7
- >**Warning:** The Dropdown Menu and its affiliated components have undergone a major overhaul in their construction and how they have been coded, rendering the documentation below out of date.
7
+ > **Warning:** The Dropdown Menu and its affiliated components have undergone a major overhaul in their construction and how they have been coded, rendering the documentation below out of date.
8
8
  >
9
- >While the SDS works on updating the documentation to reflect these changes, see `src/core/Dropdown/index.stories.tsx` within the `sci-components` codebase for example usage of the new Dropdown Menu structure.
9
+ > While the SDS works on updating the documentation to reflect these changes, see `src/core/Dropdown/index.stories.tsx` within the `sci-components` codebase for example usage of the new Dropdown Menu structure.
10
10
 
11
11
  ## Dropdown Menu Variants
12
12
 
13
- | In their basic form, Dropdown Menus are composed of a Menu Container that is filled with Menu Items offering the user options to adjust or select that are contextually relevant to the Dropdown Input they are coupled with. Menu Items can be optionally paired with additional details or with counters that indicate the number of items within that Menu Item's category. Additionally, Dropdown Menus can be configured to include a Search Input, have their Menu Items separated out into different sections or groupings, or a combination of these features. | | **Jump to section:** Dropdown Menu Common Configurations Menu Item |
14
- | --- | --- | --- |
13
+ | In their basic form, Dropdown Menus are composed of a Menu Container that is filled with Menu Items offering the user options to adjust or select that are contextually relevant to the Dropdown Input they are coupled with. Menu Items can be optionally paired with additional details or with counters that indicate the number of items within that Menu Item's category. Additionally, Dropdown Menus can be configured to include a Search Input, have their Menu Items separated out into different sections or groupings, or a combination of these features. | | **Jump to section:** Dropdown Menu Common Configurations Menu Item |
14
+ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ------------------------------------------------------------------ |
15
15
 
16
16
  ---
17
17
 
18
18
  ## Dropdown Menu
19
19
 
20
- | | In Figma | | | Meets Accessibility | | | In napari hub + .org Codebases |
21
- | --- | --- | --- | --- | --- | --- | --- | --- |
20
+ | | In Figma | | | Meets Accessibility | | | In napari hub + .org Codebases |
21
+ | --- | -------- | --- | --- | ------------------- | --- | --- | ------------------------------ |
22
22
 
23
23
  Dropdown Menus can be configured to have their Menu Items all in one large list or separated out into different sections or groupings; these Menu Item formats are established by the `[array]` passed into the `options` prop. Additionally, Dropdown Menus can be configured to include a Search Input. See the Data Format section below for details about configuring the `[array]`.
24
24
 
@@ -26,8 +26,6 @@ Dropdown Menus are used in combination with Dropdown Inputs on napari hub as par
26
26
 
27
27
  Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
28
28
 
29
-  
30
-
31
29
 
32
30
 
33
31
  **Default**
@@ -36,8 +34,6 @@ Click on each state below to enter inspect view and get details on its code attr
36
34
 
37
35
  ---
38
36
 
39
-  
40
-
41
37
 
42
38
 
43
39
  **Default + Search**
@@ -46,8 +42,6 @@ Click on each state below to enter inspect view and get details on its code attr
46
42
 
47
43
  ---
48
44
 
49
-
50
-
51
45
  **Default + Sections**
52
46
 
53
47
  ---
@@ -59,55 +53,55 @@ Use the following configuration for the `[array]` passed into the `options` prop
59
53
  ```js
60
54
  data = [
61
55
  {
62
- // section with a Header and Menu Item Details
63
- dataRows: [
64
- {
56
+ // section with a Header and Menu Item Details
57
+ dataRows: [
58
+ {
65
59
  name: "Menu Item",
66
- details: "Details",
67
- },
68
- {
69
- name: "Menu Item",
70
- details: "Details",
71
- },
72
- {
73
- name: "Menu Item",
74
- details: "Details",
75
- },
60
+ details: "Details",
61
+ },
62
+ {
63
+ name: "Menu Item",
64
+ details: "Details",
65
+ },
66
+ {
67
+ name: "Menu Item",
68
+ details: "Details",
69
+ },
76
70
  ],
77
71
  label: "Section One",
78
72
  },
79
73
  {
80
74
  // section with Menu Item Counts
81
- dataRows: [
82
- {
83
- name: "Menu Item",
75
+ dataRows: [
76
+ {
77
+ name: "Menu Item",
84
78
  count: 20,
85
- },
86
- {
87
- name: "Menu Item",
79
+ },
80
+ {
81
+ name: "Menu Item",
88
82
  count: 40,
89
- },
90
- {
91
- name: "Menu Item",
92
- count: 60,
93
- },
83
+ },
84
+ {
85
+ name: "Menu Item",
86
+ count: 60,
87
+ },
94
88
  ],
95
89
  },
96
90
  {
97
91
  // section with disabled Menu Items
98
- dataRows: [
99
- {
100
- name: "Menu Item",
92
+ dataRows: [
93
+ {
94
+ name: "Menu Item",
101
95
  disabled: true,
102
- },
103
- {
104
- name: "Menu Item",
96
+ },
97
+ {
98
+ name: "Menu Item",
105
99
  disabled: true,
106
- },
107
- {
108
- name: "Menu Item",
109
- disabled: true,
110
- },
100
+ },
101
+ {
102
+ name: "Menu Item",
103
+ disabled: true,
104
+ },
111
105
  ],
112
106
  },
113
107
  ];
@@ -119,8 +113,6 @@ data = [
119
113
 
120
114
  These rules establish how much margin should exist between and around elements.
121
115
 
122
-
123
-
124
116
  **Dropdown Menu spacing**
125
117
 
126
118
  ---
@@ -134,43 +126,31 @@ Dropdown Menus can be thought of as being comprised of different combinations of
134
126
  Below are a number of common Dropdown Menu configurations, but by no means is this an exhaustive list:
135
127
 
136
128
  | **Search + Count** | **Search + Sections** | **Search + Details** |
137
- | --- | --- | --- |
138
-
139
-
129
+ | ------------------ | --------------------- | -------------------- |
140
130
 
141
131
  **Search + Count**
142
132
 
143
133
  ---
144
134
 
145
-
146
-
147
135
  **Search + Sections**
148
136
 
149
137
  ---
150
138
 
151
-
152
-
153
139
  **Search + Details**
154
140
 
155
141
  ---
156
142
 
157
143
  | **Sections + Details** | **Search + Sections + Details** | **Search + Sections + Count** |
158
- | --- | --- | --- |
159
-
160
-
144
+ | ---------------------- | ------------------------------- | ----------------------------- |
161
145
 
162
146
  **Sections + Details**
163
147
 
164
148
  ---
165
149
 
166
-
167
-
168
150
  **Search + Sections + Details**
169
151
 
170
152
  ---
171
153
 
172
-
173
-
174
154
  **Search + Sections + Count**
175
155
 
176
156
  ---
@@ -179,126 +159,90 @@ Below are a number of common Dropdown Menu configurations, but by no means is th
179
159
 
180
160
  ## Menu Item
181
161
 
182
- | | In Figma | | | Meets Accessibility | | | In napari hub + .org Codebases |
183
- | --- | --- | --- | --- | --- | --- | --- | --- |
162
+ | | In Figma | | | Meets Accessibility | | | In napari hub + .org Codebases |
163
+ | --- | -------- | --- | --- | ------------------- | --- | --- | ------------------------------ |
184
164
 
185
165
  Menu Items can be optionally paired with additional clarifying details, with counters that indicate the number of items within that Menu Item's category, or be disabled entirely. These details are established within the `[array]` passed into the `options` prop on the Dropdown Menu component.
186
166
 
187
167
  Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
188
168
 
189
169
  | **Default** | **Hover** | **Selected** | **Selected + Hover** | **Disabled** | **Selected + Disabled** |
190
- | --- | --- | --- | --- | --- | --- |
191
-
192
-
170
+ | ----------- | --------- | ------------ | -------------------- | ------------ | ----------------------- |
193
171
 
194
172
  **MenuItem**
195
173
 
196
174
  ---
197
175
 
198
-
199
-
200
176
  **MenuItem**
201
177
 
202
178
  ---
203
179
 
204
-
205
-
206
180
  **MenuItem**
207
181
 
208
182
  ---
209
183
 
210
-
211
-
212
184
  **MenuItem**
213
185
 
214
186
  ---
215
187
 
216
-
217
-
218
188
  **MenuItem**
219
189
 
220
190
  ---
221
191
 
222
-
223
-
224
192
  **MenuItem**
225
193
 
226
194
  ---
227
195
 
228
196
  | **Default + Count** | **Hover** | **Selected** | **Selected + Hover** | **Disabled** | **Selected + Disabled** |
229
- | --- | --- | --- | --- | --- | --- |
230
-
231
-
197
+ | ------------------- | --------- | ------------ | -------------------- | ------------ | ----------------------- |
232
198
 
233
199
  **MenuItem**
234
200
 
235
201
  ---
236
202
 
237
-
238
-
239
203
  **MenuItem**
240
204
 
241
205
  ---
242
206
 
243
-
244
-
245
207
  **MenuItem**
246
208
 
247
209
  ---
248
210
 
249
-
250
-
251
211
  **MenuItem**
252
212
 
253
213
  ---
254
214
 
255
-
256
-
257
215
  **MenuItem**
258
216
 
259
217
  ---
260
218
 
261
-
262
-
263
219
  **MenuItem**
264
220
 
265
221
  ---
266
222
 
267
- | **Default + Details** | **Hover** | **Selected** | **Selected + Hover** | **Disabled** | **Selected + Disabled**  |
268
- | --- | --- | --- | --- | --- | --- |
269
-
270
-
223
+ | **Default + Details** | **Hover** | **Selected** | **Selected + Hover** | **Disabled** | **Selected + Disabled**  |
224
+ | --------------------- | --------- | ------------ | -------------------- | ------------ | ------------------------ |
271
225
 
272
226
  **MenuItem**
273
227
 
274
228
  ---
275
229
 
276
-
277
-
278
230
  **MenuItem**
279
231
 
280
232
  ---
281
233
 
282
-
283
-
284
234
  **MenuItem**
285
235
 
286
236
  ---
287
237
 
288
-
289
-
290
238
  **MenuItem**
291
239
 
292
240
  ---
293
241
 
294
-
295
-
296
242
  **MenuItem**
297
243
 
298
244
  ---
299
245
 
300
-
301
-
302
246
  **MenuItem**
303
247
 
304
248
  ---
@@ -307,22 +251,22 @@ Click on each state below to enter inspect view and get details on its code attr
307
251
 
308
252
  ## Dropdown Menu Component
309
253
 
310
- | Below you will find interactive Storybook iframes for the Dropdown Menu. Tabs within each iframe provide a different set of tools: The Controls tab allows you to see and adjust all available props. The Actions tab shows you data displayed by event handler arguments. | | **Jump to component:** DropdownMenu |
311
- | --- | --- | --- |
254
+ | Below you will find interactive Storybook iframes for the Dropdown Menu. Tabs within each iframe provide a different set of tools: The Controls tab allows you to see and adjust all available props. The Actions tab shows you data displayed by event handler arguments. | | **Jump to component:** DropdownMenu |
255
+ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ----------------------------------- |
312
256
 
313
257
  ---
314
258
 
315
- >**Warning:** The Dropdown Menu and its affiliated components have undergone a major overhaul in their construction and how they have been coded, rendering the documentation below out of date.
259
+ > **Warning:** The Dropdown Menu and its affiliated components have undergone a major overhaul in their construction and how they have been coded, rendering the documentation below out of date.
316
260
  >
317
- >While the SDS works on updating the documentation to reflect these changes, see `src/core/Dropdown/index.stories.tsx` within the `sci-components` codebase for example usage of the new Dropdown Menu structure.
261
+ > While the SDS works on updating the documentation to reflect these changes, see `src/core/Dropdown/index.stories.tsx` within the `sci-components` codebase for example usage of the new Dropdown Menu structure.
318
262
 
319
- >This component appears as it is in the default SDS codebase. Once imported into the napari hub or napari.org codebases, use a theme file to enable the napari visual appearance customization.
263
+ > This component appears as it is in the default SDS codebase. Once imported into the napari hub or napari.org codebases, use a theme file to enable the napari visual appearance customization.
320
264
 
321
265
  ### DropdownMenu
322
266
 
323
267
  Storybook
324
268
 
325
-  
269
+
326
270
 
327
271
  ---
328
272
 
@@ -330,21 +274,21 @@ Dropdown Menus are coupled with Dropdown Inputs, Dropdown Buttons, and in some c
330
274
 
331
275
  ## Overview
332
276
 
333
- >**NOTE:** The Dropdown Menu and its affiliated components have undergone a major overhaul in their construction and how they have been coded, rendering the documentation below out of date.
277
+ > **NOTE:** The Dropdown Menu and its affiliated components have undergone a major overhaul in their construction and how they have been coded, rendering the documentation below out of date.
334
278
  >
335
- >While the SDS works on updating the documentation to reflect these changes, see `src/core/Dropdown/index.stories.tsx` within the `sci-components` codebase for example usage of the new Dropdown Menu structure.
279
+ > While the SDS works on updating the documentation to reflect these changes, see `src/core/Dropdown/index.stories.tsx` within the `sci-components` codebase for example usage of the new Dropdown Menu structure.
336
280
 
337
281
  ## Dropdown Menu Variants
338
282
 
339
- | In their basic form, Dropdown Menus are composed of a Menu Container that is filled with Menu Items offering the user options to adjust or select that are contextually relevant to the Button or Dropdown Input they are coupled with. Menu Items can be optionally paired with additional details or with counters that indicate the number of items within that Menu Item's category. Dropdown Menus can also be multi-select, allowing the user to choose multiple options from the group of Menu Items. Additionally, Dropdown Menus can be configured to include a Search Input, have their Menu Items separated out into different sections or groupings, have a built-in title, or any combination of these features. | | **Jump to section:** Dropdown Menu Common Configurations Menu Item |
340
- | --- | --- | --- |
283
+ | In their basic form, Dropdown Menus are composed of a Menu Container that is filled with Menu Items offering the user options to adjust or select that are contextually relevant to the Button or Dropdown Input they are coupled with. Menu Items can be optionally paired with additional details or with counters that indicate the number of items within that Menu Item's category. Dropdown Menus can also be multi-select, allowing the user to choose multiple options from the group of Menu Items. Additionally, Dropdown Menus can be configured to include a Search Input, have their Menu Items separated out into different sections or groupings, have a built-in title, or any combination of these features. | | **Jump to section:** Dropdown Menu Common Configurations Menu Item |
284
+ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ------------------------------------------------------------------ |
341
285
 
342
286
  ---
343
287
 
344
288
  ## Dropdown Menu
345
289
 
346
- | | In Figma | | | Meets Accessibility | | | In CZ GEN EPI Codebase |
347
- | --- | --- | --- | --- | --- | --- | --- | --- |
290
+ | | In Figma | | | Meets Accessibility | | | In CZ GEN EPI Codebase |
291
+ | --- | -------- | --- | --- | ------------------- | --- | --- | ---------------------- |
348
292
 
349
293
  ### Single-select Dropdown Menu
350
294
 
@@ -352,8 +296,6 @@ Use the Single-select Dropdown Menu when users are only able to select one item
352
296
 
353
297
  Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
354
298
 
355
-  
356
-
357
299
 
358
300
 
359
301
  **Default**
@@ -362,24 +304,18 @@ Click on each state below to enter inspect view and get details on its code attr
362
304
 
363
305
  ---
364
306
 
365
-
366
-
367
307
  **Default + Title**
368
308
 
369
309
  ---
370
310
 
371
311
  ---
372
312
 
373
-
374
-
375
313
  **Default + Search**
376
314
 
377
315
  ---
378
316
 
379
317
  ---
380
318
 
381
-
382
-
383
319
  **Default + Sections**
384
320
 
385
321
  ---
@@ -390,8 +326,6 @@ Use the Multi-select Dropdown Menu when users are able to select one or more ite
390
326
 
391
327
  Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
392
328
 
393
-  
394
-
395
329
 
396
330
 
397
331
  **Default**
@@ -400,24 +334,18 @@ Click on each state below to enter inspect view and get details on its code attr
400
334
 
401
335
  ---
402
336
 
403
-
404
-
405
337
  **Default + Title**
406
338
 
407
339
  ---
408
340
 
409
341
  ---
410
342
 
411
-
412
-
413
343
  **Default + Search**
414
344
 
415
345
  ---
416
346
 
417
347
  ---
418
348
 
419
-
420
-
421
349
  **Default + Sections**
422
350
 
423
351
  ---
@@ -429,38 +357,38 @@ Use the following configuration for the `[array]` passed into the `options` prop
429
357
  ```js
430
358
  data = [
431
359
  {
432
- // section with a Header and Menu Item Details
433
- dataRows: [
434
- {
360
+ // section with a Header and Menu Item Details
361
+ dataRows: [
362
+ {
363
+ name: "Menu Item",
364
+ details: "Details",
365
+ },
366
+ {
367
+ name: "Menu Item",
368
+ details: "Details",
369
+ },
370
+ {
435
371
  name: "Menu Item",
436
- details: "Details",
437
- },
438
- {
439
- name: "Menu Item",
440
- details: "Details",
441
- },
442
- {
443
- name: "Menu Item",
444
- details: "Details",
445
- },
372
+ details: "Details",
373
+ },
446
374
  ],
447
375
  label: "Section One",
448
376
  },
449
377
  {
450
378
  // section with Menu Item Counts
451
- dataRows: [
452
- {
453
- name: "Menu Item",
379
+ dataRows: [
380
+ {
381
+ name: "Menu Item",
454
382
  count: 20,
455
- },
456
- {
457
- name: "Menu Item",
383
+ },
384
+ {
385
+ name: "Menu Item",
458
386
  count: 40,
459
- },
460
- {
461
- name: "Menu Item",
462
- count: 60,
463
- },
387
+ },
388
+ {
389
+ name: "Menu Item",
390
+ count: 60,
391
+ },
464
392
  ],
465
393
  },
466
394
  ];
@@ -472,8 +400,6 @@ data = [
472
400
 
473
401
  These rules establish how much margin should exist between and around elements.
474
402
 
475
-
476
-
477
403
  **Dropdown Menu Spacing**
478
404
 
479
405
  ---
@@ -487,43 +413,31 @@ Dropdown Menus can be thought of as being comprised of different combinations of
487
413
  Below are a number of common Dropdown Menu configurations, but by no means is this an exhaustive list:
488
414
 
489
415
  | **Title + Count** | **Search + Sections + Details** | **Title + Details** |
490
- | --- | --- | --- |
491
-
492
-
416
+ | ----------------- | ------------------------------- | ------------------- |
493
417
 
494
418
  **Title + Count**
495
419
 
496
420
  ---
497
421
 
498
-
499
-
500
422
  **Search + Sections + Details**
501
423
 
502
424
  ---
503
425
 
504
-
505
-
506
426
  **Title + Details**
507
427
 
508
428
  ---
509
429
 
510
430
  | **Search + Details** | **Title + Search + Count** | **Title + Sections + Details** |
511
- | --- | --- | --- |
512
-
513
-
431
+ | -------------------- | -------------------------- | ------------------------------ |
514
432
 
515
433
  **Search + Details**
516
434
 
517
435
  ---
518
436
 
519
-
520
-
521
437
  **Search + Title + Count**
522
438
 
523
439
  ---
524
440
 
525
-
526
-
527
441
  **Title + Sections + Details**
528
442
 
529
443
  ---
@@ -532,8 +446,8 @@ Below are a number of common Dropdown Menu configurations, but by no means is th
532
446
 
533
447
  ## Menu Item
534
448
 
535
- | | In Figma | | | Meets Accessibility | | | In CZ GEN EPI Codebase |
536
- | --- | --- | --- | --- | --- | --- | --- | --- |
449
+ | | In Figma | | | Meets Accessibility | | | In CZ GEN EPI Codebase |
450
+ | --- | -------- | --- | --- | ------------------- | --- | --- | ---------------------- |
537
451
 
538
452
  ### Single-select Menu Item
539
453
 
@@ -542,87 +456,63 @@ Menu Items can be optionally paired with additional clarifying details, with cou
542
456
  Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
543
457
 
544
458
  | **Default** | **Hover** | **Selected** | **Disabled** |
545
- | --- | --- | --- | --- |
546
-
547
-
459
+ | ----------- | --------- | ------------ | ------------ |
548
460
 
549
461
  **MenuItem**
550
462
 
551
463
  ---
552
464
 
553
-
554
-
555
465
  **MenuItem**
556
466
 
557
467
  ---
558
468
 
559
-
560
-
561
469
  **MenuItem**
562
470
 
563
471
  ---
564
472
 
565
-
566
-
567
473
  **MenuItem**
568
474
 
569
475
  ---
570
476
 
571
477
  | **Default + Count** | **Hover** | **Selected** | **Disabled** |
572
- | --- | --- | --- | --- |
573
-
574
-
478
+ | ------------------- | --------- | ------------ | ------------ |
575
479
 
576
480
  **MenuItem**
577
481
 
578
482
  ---
579
483
 
580
-
581
-
582
484
  **MenuItem**
583
485
 
584
486
  ---
585
487
 
586
-
587
-
588
488
  **MenuItem**
589
489
 
590
490
  ---
591
491
 
592
-
593
-
594
492
  **MenuItem**
595
493
 
596
494
  ---
597
495
 
598
496
  | **Default + Details** | **Hover** | **Selected** | **Disabled** |
599
- | --- | --- | --- | --- |
600
-
601
-
497
+ | --------------------- | --------- | ------------ | ------------ |
602
498
 
603
499
  **MenuItem**
604
500
 
605
501
  ---
606
502
 
607
-
608
-
609
503
  **MenuItem**
610
504
 
611
505
  ---
612
506
 
613
-
614
-
615
507
  **MenuItem**
616
508
 
617
509
  ---
618
510
 
619
-
620
-
621
511
  **MenuItem**
622
512
 
623
513
  ---
624
514
 
625
-  
515
+
626
516
 
627
517
  ### Multi-select Menu Item
628
518
 
@@ -631,82 +521,58 @@ Menu Items can be optionally paired with additional clarifying details, with cou
631
521
  Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
632
522
 
633
523
  | **Default** | **Hover** | **Selected** | **Disabled** |
634
- | --- | --- | --- | --- |
635
-
636
-
524
+ | ----------- | --------- | ------------ | ------------ |
637
525
 
638
526
  **MenuItem**
639
527
 
640
528
  ---
641
529
 
642
-
643
-
644
530
  **MenuItem**
645
531
 
646
532
  ---
647
533
 
648
-
649
-
650
534
  **MenuItem**
651
535
 
652
536
  ---
653
537
 
654
-
655
-
656
538
  **MenuItem**
657
539
 
658
540
  ---
659
541
 
660
542
  | **Default + Count** | **Hover** | **Selected** | **Disabled** |
661
- | --- | --- | --- | --- |
662
-
663
-
543
+ | ------------------- | --------- | ------------ | ------------ |
664
544
 
665
545
  **MenuItem**
666
546
 
667
547
  ---
668
548
 
669
-
670
-
671
549
  **MenuItem**
672
550
 
673
551
  ---
674
552
 
675
-
676
-
677
553
  **MenuItem**
678
554
 
679
555
  ---
680
556
 
681
-
682
-
683
557
  **MenuItem**
684
558
 
685
559
  ---
686
560
 
687
561
  | **Default + Details** | **Hover** | **Selected** | **Disabled** |
688
- | --- | --- | --- | --- |
689
-
690
-
562
+ | --------------------- | --------- | ------------ | ------------ |
691
563
 
692
564
  **MenuItem**
693
565
 
694
566
  ---
695
567
 
696
-
697
-
698
568
  **MenuItem**
699
569
 
700
570
  ---
701
571
 
702
-
703
-
704
572
  **MenuItem**
705
573
 
706
574
  ---
707
575
 
708
-
709
-
710
576
  **MenuItem**
711
577
 
712
578
  ---
@@ -715,16 +581,16 @@ Click on each state below to enter inspect view and get details on its code attr
715
581
 
716
582
  ## Dropdown Menu Component
717
583
 
718
- | Below you will find interactive Storybook iframes for the Dropdown Menu. Tabs within each iframe provide a different set of tools: The Controls tab allows you to see and adjust all available props. The Actions tab shows you data displayed by event handler arguments. | | **Jump to component:** DropdownMenu |
719
- | --- | --- | --- |
584
+ | Below you will find interactive Storybook iframes for the Dropdown Menu. Tabs within each iframe provide a different set of tools: The Controls tab allows you to see and adjust all available props. The Actions tab shows you data displayed by event handler arguments. | | **Jump to component:** DropdownMenu |
585
+ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ----------------------------------- |
720
586
 
721
587
  ---
722
588
 
723
- >**NOTE:** The Dropdown Menu and its affiliated components have undergone a major overhaul in their construction and how they have been coded, rendering the documentation below out of date.
589
+ > **NOTE:** The Dropdown Menu and its affiliated components have undergone a major overhaul in their construction and how they have been coded, rendering the documentation below out of date.
724
590
  >
725
- >While the SDS works on updating the documentation to reflect these changes, see `src/core/Dropdown/index.stories.tsx` within the `sci-components` codebase for example usage of the new Dropdown Menu structure.
591
+ > While the SDS works on updating the documentation to reflect these changes, see `src/core/Dropdown/index.stories.tsx` within the `sci-components` codebase for example usage of the new Dropdown Menu structure.
726
592
 
727
- >This component appears as it is in the default SDS codebase. Once imported into the CZ GEN EPI codebase, use a theme file to enable the CZ GEN EPI visual appearance customization.
593
+ > This component appears as it is in the default SDS codebase. Once imported into the CZ GEN EPI codebase, use a theme file to enable the CZ GEN EPI visual appearance customization.
728
594
 
729
595
  ### DropdownMenu
730
596
 
@@ -736,21 +602,21 @@ Dropdown Menus are coupled with Dropdown Inputs, Dropdown Buttons, and in some c
736
602
 
737
603
  ## Overview
738
604
 
739
- >**Warning:** The Dropdown Menu and its affiliated components have undergone a major overhaul in their construction and how they have been coded, rendering the documentation below out of date.
605
+ > **Warning:** The Dropdown Menu and its affiliated components have undergone a major overhaul in their construction and how they have been coded, rendering the documentation below out of date.
740
606
  >
741
- >While the SDS works on updating the documentation to reflect these changes, see `src/core/Dropdown/index.stories.tsx` within the `sci-components` codebase for example usage of the new Dropdown Menu structure.
607
+ > While the SDS works on updating the documentation to reflect these changes, see `src/core/Dropdown/index.stories.tsx` within the `sci-components` codebase for example usage of the new Dropdown Menu structure.
742
608
 
743
609
  ## Dropdown Menu Variants
744
610
 
745
- | In their basic form, Dropdown Menus are composed of a Menu Container that is filled with Menu Items offering the user options to adjust or select that are contextually relevant to the Button or Dropdown Input they are coupled with. Menu Items can be optionally paired with additional details or with counters that indicate the number of items within that Menu Item's category. Dropdown Menus can also be multi-select, allowing the user to choose multiple options from the group of Menu Items. Additionally, Dropdown Menus can be configured to include a Search Input, have their Menu Items separated out into different sections or groupings, have a built-in title, or any combination of these features. | | **Jump to section:** Dropdown Menu Common Configurations Menu Item |
746
- | --- | --- | --- |
611
+ | In their basic form, Dropdown Menus are composed of a Menu Container that is filled with Menu Items offering the user options to adjust or select that are contextually relevant to the Button or Dropdown Input they are coupled with. Menu Items can be optionally paired with additional details or with counters that indicate the number of items within that Menu Item's category. Dropdown Menus can also be multi-select, allowing the user to choose multiple options from the group of Menu Items. Additionally, Dropdown Menus can be configured to include a Search Input, have their Menu Items separated out into different sections or groupings, have a built-in title, or any combination of these features. | | **Jump to section:** Dropdown Menu Common Configurations Menu Item |
612
+ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ------------------------------------------------------------------ |
747
613
 
748
614
  ---
749
615
 
750
616
  ## Dropdown Menu
751
617
 
752
- | | In Figma | | | Meets Accessibility | | | In CZ ID Codebase |
753
- | --- | --- | --- | --- | --- | --- | --- | --- |
618
+ | | In Figma | | | Meets Accessibility | | | In CZ ID Codebase |
619
+ | --- | -------- | --- | --- | ------------------- | --- | --- | ----------------- |
754
620
 
755
621
  ### Single-select Dropdown Menu
756
622
 
@@ -758,8 +624,6 @@ Use the Single-select Dropdown Menu when users are only able to select one item
758
624
 
759
625
  Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
760
626
 
761
-  
762
-
763
627
 
764
628
 
765
629
  **Default**
@@ -768,29 +632,23 @@ Click on each state below to enter inspect view and get details on its code attr
768
632
 
769
633
  ---
770
634
 
771
-
772
-
773
635
  **Default + Title**
774
636
 
775
637
  ---
776
638
 
777
639
  ---
778
640
 
779
-
780
-
781
641
  **Default + Search**
782
642
 
783
643
  ---
784
644
 
785
645
  ---
786
646
 
787
-
788
-
789
647
  **Default + Sections**
790
648
 
791
649
  ---
792
650
 
793
-  
651
+
794
652
 
795
653
  ### Multi-select Dropdown Menu
796
654
 
@@ -798,8 +656,6 @@ Use the Multi-select Dropdown Menu when users are able to select one or more ite
798
656
 
799
657
  Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
800
658
 
801
-  
802
-
803
659
 
804
660
 
805
661
  **Default**
@@ -808,32 +664,24 @@ Click on each state below to enter inspect view and get details on its code attr
808
664
 
809
665
  ---
810
666
 
811
-
812
-
813
667
  **Default + Title**
814
668
 
815
669
  ---
816
670
 
817
671
  ---
818
672
 
819
-
820
-
821
673
  **Default + Search**
822
674
 
823
675
  ---
824
676
 
825
677
  ---
826
678
 
827
-
828
-
829
679
  **Default + Sections**
830
680
 
831
681
  ---
832
682
 
833
683
  ---
834
684
 
835
-
836
-
837
685
  **Default + Buttons**
838
686
 
839
687
  ---
@@ -847,38 +695,38 @@ Use the following configuration for the `[array]` passed into the `options` prop
847
695
  ```js
848
696
  data = [
849
697
  {
850
- // section with a Header and Menu Item Details
851
- dataRows: [
852
- {
698
+ // section with a Header and Menu Item Details
699
+ dataRows: [
700
+ {
701
+ name: "Menu Item",
702
+ details: "Details",
703
+ },
704
+ {
853
705
  name: "Menu Item",
854
- details: "Details",
855
- },
856
- {
857
- name: "Menu Item",
858
- details: "Details",
859
- },
860
- {
861
- name: "Menu Item",
862
- details: "Details",
863
- },
706
+ details: "Details",
707
+ },
708
+ {
709
+ name: "Menu Item",
710
+ details: "Details",
711
+ },
864
712
  ],
865
713
  label: "Section One",
866
714
  },
867
715
  {
868
716
  // section with Menu Item Counts
869
- dataRows: [
870
- {
871
- name: "Menu Item",
717
+ dataRows: [
718
+ {
719
+ name: "Menu Item",
872
720
  count: 20,
873
- },
874
- {
875
- name: "Menu Item",
721
+ },
722
+ {
723
+ name: "Menu Item",
876
724
  count: 40,
877
- },
878
- {
879
- name: "Menu Item",
880
- count: 60,
881
- },
725
+ },
726
+ {
727
+ name: "Menu Item",
728
+ count: 60,
729
+ },
882
730
  ],
883
731
  },
884
732
  ];
@@ -890,8 +738,6 @@ data = [
890
738
 
891
739
  These rules establish how much margin should exist between and around elements.
892
740
 
893
-
894
-
895
741
  **Dropdown Menu Spacing**
896
742
 
897
743
  ---
@@ -905,43 +751,31 @@ Dropdown Menus can be thought of as being comprised of different combinations of
905
751
  Below are a number of common Dropdown Menu configurations, but by no means is this an exhaustive list:
906
752
 
907
753
  | **Title + Count** | **Search + Sections + Details** | **Title + Details** |
908
- | --- | --- | --- |
909
-
910
-
754
+ | ----------------- | ------------------------------- | ------------------- |
911
755
 
912
756
  **Title + Count**
913
757
 
914
758
  ---
915
759
 
916
-
917
-
918
760
  **Search + Sections + Details**
919
761
 
920
762
  ---
921
763
 
922
-
923
-
924
764
  **Title + Details**
925
765
 
926
766
  ---
927
767
 
928
768
  | **Search + Details** | **Title + Search + Count** | **Title + Sections + Details** |
929
- | --- | --- | --- |
930
-
931
-
769
+ | -------------------- | -------------------------- | ------------------------------ |
932
770
 
933
771
  **Search + Details**
934
772
 
935
773
  ---
936
774
 
937
-
938
-
939
775
  **Search + Title + Count**
940
776
 
941
777
  ---
942
778
 
943
-
944
-
945
779
  **Title + Sections + Details**
946
780
 
947
781
  ---
@@ -950,8 +784,8 @@ Below are a number of common Dropdown Menu configurations, but by no means is th
950
784
 
951
785
  ## Menu Item
952
786
 
953
- | | In Figma | | | Meets Accessibility | | | In CZ ID Codebase |
954
- | --- | --- | --- | --- | --- | --- | --- | --- |
787
+ | | In Figma | | | Meets Accessibility | | | In CZ ID Codebase |
788
+ | --- | -------- | --- | --- | ------------------- | --- | --- | ----------------- |
955
789
 
956
790
  ### Single-select Menu Item
957
791
 
@@ -960,87 +794,63 @@ Menu Items can be optionally paired with additional clarifying details, with cou
960
794
  Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
961
795
 
962
796
  | **Default** | **Hover** | **Selected** | **Disabled** |
963
- | --- | --- | --- | --- |
964
-
965
-
797
+ | ----------- | --------- | ------------ | ------------ |
966
798
 
967
799
  **MenuItem**
968
800
 
969
801
  ---
970
802
 
971
-
972
-
973
803
  **MenuItem**
974
804
 
975
805
  ---
976
806
 
977
-
978
-
979
807
  **MenuItem**
980
808
 
981
809
  ---
982
810
 
983
-
984
-
985
811
  **MenuItem**
986
812
 
987
813
  ---
988
814
 
989
815
  | **Default + Count** | **Hover** | **Selected** | **Disabled** |
990
- | --- | --- | --- | --- |
991
-
992
-
816
+ | ------------------- | --------- | ------------ | ------------ |
993
817
 
994
818
  **MenuItem**
995
819
 
996
820
  ---
997
821
 
998
-
999
-
1000
822
  **MenuItem**
1001
823
 
1002
824
  ---
1003
825
 
1004
-
1005
-
1006
826
  **MenuItem**
1007
827
 
1008
828
  ---
1009
829
 
1010
-
1011
-
1012
830
  **MenuItem**
1013
831
 
1014
832
  ---
1015
833
 
1016
834
  | **Default + Details** | **Hover** | **Selected** | **Disabled** |
1017
- | --- | --- | --- | --- |
1018
-
1019
-
835
+ | --------------------- | --------- | ------------ | ------------ |
1020
836
 
1021
837
  **MenuItem**
1022
838
 
1023
839
  ---
1024
840
 
1025
-
1026
-
1027
841
  **MenuItem**
1028
842
 
1029
843
  ---
1030
844
 
1031
-
1032
-
1033
845
  **MenuItem**
1034
846
 
1035
847
  ---
1036
848
 
1037
-
1038
-
1039
849
  **MenuItem**
1040
850
 
1041
851
  ---
1042
852
 
1043
-  
853
+
1044
854
 
1045
855
  ### Multi-select Menu Item
1046
856
 
@@ -1049,82 +859,58 @@ Menu Items can be optionally paired with additional clarifying details, with cou
1049
859
  Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
1050
860
 
1051
861
  | **Default** | **Hover** | **Selected** | **Disabled** |
1052
- | --- | --- | --- | --- |
1053
-
1054
-
862
+ | ----------- | --------- | ------------ | ------------ |
1055
863
 
1056
864
  **MenuItem**
1057
865
 
1058
866
  ---
1059
867
 
1060
-
1061
-
1062
868
  **MenuItem**
1063
869
 
1064
870
  ---
1065
871
 
1066
-
1067
-
1068
872
  **MenuItem**
1069
873
 
1070
874
  ---
1071
875
 
1072
-
1073
-
1074
876
  **MenuItem**
1075
877
 
1076
878
  ---
1077
879
 
1078
880
  | **Default + Count** | **Hover** | **Selected** | **Disabled** |
1079
- | --- | --- | --- | --- |
1080
-
1081
-
881
+ | ------------------- | --------- | ------------ | ------------ |
1082
882
 
1083
883
  **MenuItem**
1084
884
 
1085
885
  ---
1086
886
 
1087
-
1088
-
1089
887
  **MenuItem**
1090
888
 
1091
889
  ---
1092
890
 
1093
-
1094
-
1095
891
  **MenuItem**
1096
892
 
1097
893
  ---
1098
894
 
1099
-
1100
-
1101
895
  **MenuItem**
1102
896
 
1103
897
  ---
1104
898
 
1105
899
  | **Default + Details** | **Hover** | **Selected** | **Disabled** |
1106
- | --- | --- | --- | --- |
1107
-
1108
-
900
+ | --------------------- | --------- | ------------ | ------------ |
1109
901
 
1110
902
  **MenuItem**
1111
903
 
1112
904
  ---
1113
905
 
1114
-
1115
-
1116
906
  **MenuItem**
1117
907
 
1118
908
  ---
1119
909
 
1120
-
1121
-
1122
910
  **MenuItem**
1123
911
 
1124
912
  ---
1125
913
 
1126
-
1127
-
1128
914
  **MenuItem**
1129
915
 
1130
916
  ---
@@ -1133,18 +919,17 @@ Click on each state below to enter inspect view and get details on its code attr
1133
919
 
1134
920
  ## Dropdown Menu Component
1135
921
 
1136
- | Below you will find interactive Storybook iframes for the Dropdown Menu. Tabs within each iframe provide a different set of tools: The Controls tab allows you to see and adjust all available props. The Actions tab shows you data displayed by event handler arguments. | | **Jump to component:** DropdownMenu |
1137
- | --- | --- | --- |
922
+ | Below you will find interactive Storybook iframes for the Dropdown Menu. Tabs within each iframe provide a different set of tools: The Controls tab allows you to see and adjust all available props. The Actions tab shows you data displayed by event handler arguments. | | **Jump to component:** DropdownMenu |
923
+ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ----------------------------------- |
1138
924
 
1139
925
  ---
1140
926
 
1141
- >**NOTE:** The Dropdown Menu and its affiliated components have undergone a major overhaul in their construction and how they have been coded, rendering the documentation below out of date.
927
+ > **NOTE:** The Dropdown Menu and its affiliated components have undergone a major overhaul in their construction and how they have been coded, rendering the documentation below out of date.
1142
928
  >
1143
- >While the SDS works on updating the documentation to reflect these changes, see `src/core/Dropdown/index.stories.tsx` within the `sci-components` codebase for example usage of the new Dropdown Menu structure.
929
+ > While the SDS works on updating the documentation to reflect these changes, see `src/core/Dropdown/index.stories.tsx` within the `sci-components` codebase for example usage of the new Dropdown Menu structure.
1144
930
 
1145
931
  ### DropdownMenu
1146
932
 
1147
933
  Storybook
1148
934
 
1149
-  
1150
935