@czi-sds/mcp 0.5.3 → 0.6.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.
Files changed (37) hide show
  1. package/data/component-list.json +1 -0
  2. package/data/component-props/ComplexFilter.json +8 -0
  3. package/data/component-props/Dialog.json +2 -2
  4. package/data/component-props/Dropdown.json +1 -1
  5. package/data/component-props/Hero.json +82 -0
  6. package/data/component-props/InputCheckbox.json +5 -0
  7. package/data/component-props/InputDropdown.json +5 -1
  8. package/data/component-props/InputRadio.json +6 -1
  9. package/data/component-props/InputSearch.json +5 -0
  10. package/data/component-props/InputText.json +5 -0
  11. package/data/component-props/NavigationHeader.json +4 -0
  12. package/data/tailwind.json +448 -366
  13. package/data/zeroheight-exports/Accordion.md +0 -4
  14. package/data/zeroheight-exports/Banner.md +0 -2
  15. package/data/zeroheight-exports/Buttons.md +0 -26
  16. package/data/zeroheight-exports/Callout.md +0 -12
  17. package/data/zeroheight-exports/Control-Inputs.md +0 -18
  18. package/data/zeroheight-exports/Dialog.md +0 -12
  19. package/data/zeroheight-exports/Downloads.md +0 -4
  20. package/data/zeroheight-exports/Dropdown-Input.md +0 -8
  21. package/data/zeroheight-exports/Dropdown-Menus.md +147 -362
  22. package/data/zeroheight-exports/Field-Inputs.md +0 -20
  23. package/data/zeroheight-exports/Filters.md +0 -6
  24. package/data/zeroheight-exports/Getting-Started.md +0 -6
  25. package/data/zeroheight-exports/Lists.md +0 -4
  26. package/data/zeroheight-exports/Loading-Indicator.md +0 -4
  27. package/data/zeroheight-exports/Navigation.md +0 -6
  28. package/data/zeroheight-exports/Notification.md +0 -10
  29. package/data/zeroheight-exports/Panel.md +0 -8
  30. package/data/zeroheight-exports/Search-Input.md +0 -6
  31. package/data/zeroheight-exports/Search.md +0 -18
  32. package/data/zeroheight-exports/Table.md +0 -20
  33. package/data/zeroheight-exports/Tabs.md +0 -10
  34. package/data/zeroheight-exports/Tags.md +0 -2
  35. package/data/zeroheight-exports/Text-Link.md +0 -16
  36. package/data/zeroheight-exports/Tooltips.md +0 -16
  37. package/package.json +2 -2
@@ -11,8 +11,6 @@ Accordions are elements that can be used by designers to hide or reveal content.
11
11
 
12
12
  Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
13
13
 
14
-
15
-
16
14
  **Accordion**
17
15
 
18
16
  ---
@@ -102,8 +100,6 @@ These rules establish how much margin should exist between and around elements.
102
100
 
103
101
  Storybook
104
102
 
105
-
106
-
107
103
  ---
108
104
 
109
105
  Accordions are expandable/collapsable elements that hide and reveal content to help control the amount of information presented to the user at one time.
@@ -24,8 +24,6 @@ If additional context or information is needed beyond the space available on the
24
24
 
25
25
  When the information being communicated on the Banner is intended to remain persistent on the screen and is not manually dismissible by the user, use a persistent Banner. To allow the user to manually dismiss the Banner, use a dismissible Banner.
26
26
 
27
-
28
-
29
27
  **Default (Persistent)**
30
28
 
31
29
  ---
@@ -155,8 +155,6 @@ Click on each state below to enter inspect view and get details on its code attr
155
155
 
156
156
  These rules establish how much margin should exist between and around elements.
157
157
 
158
-
159
-
160
158
  **Copy Button spacing**
161
159
 
162
160
  ---
@@ -243,8 +241,6 @@ Click on each state below to enter inspect view and get details on its code attr
243
241
 
244
242
  These rules establish how much margin should exist between and around elements.
245
243
 
246
-
247
-
248
244
  **Icon Button spacing**
249
245
 
250
246
  ---
@@ -362,10 +358,6 @@ Click on each state below to enter inspect view and get details on its code attr
362
358
 
363
359
  ---
364
360
 
365
-
366
-
367
-
368
-
369
361
  ### Secondary Rounded Button
370
362
 
371
363
  Use for a secondary action, or deemphasized Button. Often paired with primary Button.
@@ -412,8 +404,6 @@ Click on each state below to enter inspect view and get details on its code attr
412
404
 
413
405
  ---
414
406
 
415
-
416
-
417
407
  ### Error Rounded Button
418
408
 
419
409
  Use the error Button when the outcome of the user clicking the button will result in something being removed or deleted.
@@ -680,8 +670,6 @@ Click on each state below to enter inspect view and get details on its code attr
680
670
 
681
671
  ---
682
672
 
683
-
684
-
685
673
  ### Secondary Minimal Button
686
674
 
687
675
  Use for a deemphasized action or when paired with a Primary Minimal Button.
@@ -973,8 +961,6 @@ Click on each state below to enter inspect view and get details on its code attr
973
961
 
974
962
  ---
975
963
 
976
-
977
-
978
964
  ### Secondary Rounded Dropdown Button
979
965
 
980
966
  Use for Header-level Actions with multiple result options (generally in same context as Icon Buttons).
@@ -1014,8 +1000,6 @@ These rules establish how much margin should exist between and around elements.
1014
1000
 
1015
1001
  ---
1016
1002
 
1017
-
1018
-
1019
1003
  ## Square Dropdown Button
1020
1004
 
1021
1005
  | | In Figma | | | Meets Accessibility | | | In CZ GEN EPI Codebase |
@@ -1204,8 +1188,6 @@ Click on each state below to enter inspect view and get details on its code attr
1204
1188
 
1205
1189
  ---
1206
1190
 
1207
-
1208
-
1209
1191
  ### Secondary Rounded Button
1210
1192
 
1211
1193
  Use for a secondary action, or deemphasized Button. Often paired with primary Button.
@@ -1518,8 +1500,6 @@ Click on each state below to enter inspect view and get details on its code attr
1518
1500
 
1519
1501
  ---
1520
1502
 
1521
-
1522
-
1523
1503
  ### Secondary Minimal Button
1524
1504
 
1525
1505
  Use for a deemphasized action or when paired with a Primary Minimal Button
@@ -1547,8 +1527,6 @@ Click on each state below to enter inspect view and get details on its code attr
1547
1527
 
1548
1528
  ---
1549
1529
 
1550
-
1551
-
1552
1530
  ---
1553
1531
 
1554
1532
  ### Minimal Button Spacing
@@ -1603,8 +1581,6 @@ Click on each state below to enter inspect view and get details on its code attr
1603
1581
 
1604
1582
  ---
1605
1583
 
1606
-
1607
-
1608
1584
  ### Small Primary Icon Button
1609
1585
 
1610
1586
  Use in instances where a standard sized Button won't fit or doesn't seem necessary such as in charts, tables, navigation bars, etc.
@@ -1815,8 +1791,6 @@ Click on each state below to enter inspect view and get details on its code attr
1815
1791
 
1816
1792
  ---
1817
1793
 
1818
-
1819
-
1820
1794
  ### Secondary Rounded Dropdown Button
1821
1795
 
1822
1796
  Use for Header-level Actions with multiple result options (generally in same context as Icon Buttons).
@@ -26,8 +26,6 @@ An additional block of text can be added in addition to the Callout's title if m
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
  **Default**
32
30
 
33
31
  ---
@@ -68,8 +66,6 @@ Additional content, whether more text or relevant components, can be included in
68
66
 
69
67
  Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
70
68
 
71
-
72
-
73
69
  **Default (collapsed) + Child Node (content module)**
74
70
 
75
71
  ---
@@ -145,8 +141,6 @@ Each intent is demonstrated below using the Persistent Callout for reference. Re
145
141
 
146
142
  Storybook
147
143
 
148
-
149
-
150
144
  ---
151
145
 
152
146
  Callouts are used within the flow of the page to highlight information to the user whether in response to an action they have completed or to bring their attention to important details.
@@ -175,8 +169,6 @@ An additional block of text can be added in addition to the Callout's title if m
175
169
 
176
170
  Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
177
171
 
178
-
179
-
180
172
  **Default**
181
173
 
182
174
  ---
@@ -187,8 +179,6 @@ Click on each state below to enter inspect view and get details on its code attr
187
179
 
188
180
  ---
189
181
 
190
-
191
-
192
182
  ### Dismissible Callout
193
183
 
194
184
  Use when communicating information that is manually dismissible by the user and does not need to remain persistent on the screen. It can be set to automatically dismiss after a designated period of time using the `autoDismiss` prop; when set to `true`, the automatic dismissal will occur after 8 milliseconds by default, but can be set to a custom length of time by entering a millisecond value into the prop.
@@ -219,8 +209,6 @@ Additional content, whether more text or relevant components, can be included in
219
209
 
220
210
  Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
221
211
 
222
-
223
-
224
212
  **Default (collapsed) + Child Node (content module)**
225
213
 
226
214
  ---
@@ -77,16 +77,12 @@ Each Checkbox must be coupled with a label to communicate the result of a select
77
77
 
78
78
  ---
79
79
 
80
-
81
-
82
80
  ---
83
81
 
84
82
  ### Checkbox Spacing
85
83
 
86
84
  These rules establish how much margin should exist between and around elements.
87
85
 
88
-
89
-
90
86
  **Checkbox spacing**
91
87
 
92
88
  ---
@@ -153,8 +149,6 @@ These rules establish how much margin should exist between and around elements.
153
149
 
154
150
  ---
155
151
 
156
-
157
-
158
152
  ## Code
159
153
 
160
154
  ## Control Input Components
@@ -233,8 +227,6 @@ Click on each state below to enter inspect view and get details on its code attr
233
227
 
234
228
  ---
235
229
 
236
-
237
-
238
230
  **InputCheckbox**
239
231
 
240
232
  ---
@@ -249,8 +241,6 @@ Click on each state below to enter inspect view and get details on its code attr
249
241
 
250
242
  ---
251
243
 
252
-
253
-
254
244
  **InputCheckbox**
255
245
 
256
246
  ---
@@ -286,8 +276,6 @@ Use `intent: warning` to communicate when a user needs to be alerted that their
286
276
 
287
277
  ---
288
278
 
289
-
290
-
291
279
  ### Checkbox Lockups
292
280
 
293
281
  Each Checkbox must be coupled with a label to communicate the result of a selection. If additional details about the selection need to be communicated, an optional caption can be included.
@@ -355,8 +343,6 @@ Click on each state below to enter inspect view and get details on its code attr
355
343
 
356
344
  ---
357
345
 
358
-
359
-
360
346
  ### Radio Intent States
361
347
 
362
348
  Use `intent: default` to communicate that user has yet to enter a response.
@@ -574,8 +560,6 @@ Click on each state below to enter inspect view and get details on its code attr
574
560
 
575
561
  ---
576
562
 
577
-
578
-
579
563
  ### Checkbox Intent States
580
564
 
581
565
  Use `intent: default` to communicate that user has yet to enter a response.
@@ -689,8 +673,6 @@ Use `intent: warning` to communicate when a user needs to be alerted that their
689
673
 
690
674
  ---
691
675
 
692
-
693
-
694
676
  ### Radio Lockups
695
677
 
696
678
  Each Radio must be coupled with a label to communicate the result of a selection. If additional details about the selection need to be communicated, an optional caption can be included.
@@ -110,8 +110,6 @@ Persistent Dialogs are generally used in multi-step workflows where dismissing t
110
110
 
111
111
  Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
112
112
 
113
-
114
-
115
113
  **Default (1 button)**
116
114
 
117
115
  ---
@@ -200,8 +198,6 @@ Nested Dialogs should only be used in specific scenarios, most notably when a us
200
198
 
201
199
  Avoid using nested dialogs when possible because it introduces layers of complexity to pages and may make it more difficult for users to anticipate the results of their actions. It may also impede usability by making it more difficult for users to quickly exit a flow. Instead, explore utilizing a multi-step Dialog workflow (see below).
202
200
 
203
-
204
-
205
201
  **Nested Dialogs (CZ GE)**
206
202
 
207
203
  ---
@@ -278,8 +274,6 @@ Persistent Dialogs are generally used in multi-step workflows where dismissing t
278
274
 
279
275
  Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
280
276
 
281
-
282
-
283
277
  **Default (1 button)**
284
278
 
285
279
  ---
@@ -342,8 +336,6 @@ Click on each state below to enter inspect view and get details on its code attr
342
336
 
343
337
  In instances where the length of content contained in the Dialog results in the Dialog filling the entire height of the screen, there must be a minimum of `spaceXxl` margin above and below the Dialog window. The Dialog content scrolls when it exceeds the max-height of the dialog window; title, overline, subtitle, and any action Buttons are anchored to the top and bottom during scrolling.
344
338
 
345
-
346
-
347
339
  **Dialog Spacing (CZ ID)**
348
340
 
349
341
  ---
@@ -370,8 +362,6 @@ Nested Dialogs should only be used in specific scenarios, most notably when a us
370
362
 
371
363
  Avoid using nested dialogs when possible because it introduces layers of complexity to pages and may make it more difficult for users to anticipate the results of their actions. It may also impede usability by making it more difficult for users to quickly exit a flow. Instead, explore utilizing a multi-step Dialog workflow (see below).
372
364
 
373
-
374
-
375
365
  **Nested Dialogs (SDS + CZ ID)**
376
366
 
377
367
  ---
@@ -401,8 +391,6 @@ The Dialog should not be dismissible and the `canOutsideClickClose` prop should
401
391
 
402
392
  Storybook
403
393
 
404
-
405
-
406
394
  ---
407
395
 
408
396
  A Dialog is a window element that appears on top of content to provide information or prompt the user for an action. When a Dialog is active, it disables all functionality of the page below and remains on the screen until it is either dismissed or an action has been taken.
@@ -118,8 +118,6 @@ Once the user confirms their selection, the system will begin generating their d
118
118
 
119
119
  The example flow below shows the asynchronous download of multiple data files.
120
120
 
121
-
122
-
123
121
  **CZ ID_Multiple Files, Asynchronous Download flow**
124
122
 
125
123
  ---
@@ -142,8 +140,6 @@ The example flow below shows the asynchronous download of multiple data files.
142
140
 
143
141
  ---
144
142
 
145
-
146
-
147
143
  ---
148
144
 
149
145
  There are instances where users may want to download data that are uploaded to the product they are using. There are three download types that commonly occur, see recommended flows and best practices below.
@@ -42,10 +42,6 @@ These rules establish how much margin should exist between and around elements.
42
42
 
43
43
  ---
44
44
 
45
-
46
-
47
-
48
-
49
45
  ## Code
50
46
 
51
47
  ## Dropdown Input Component
@@ -61,8 +57,6 @@ These rules establish how much margin should exist between and around elements.
61
57
 
62
58
  Storybook
63
59
 
64
-
65
-
66
60
  ---
67
61
 
68
62
  Dropdown Inputs are elements that trigger Dropdown Menus to open, enabling users to make selections and communicate choices in the UI.
@@ -929,8 +923,6 @@ These rules establish how much margin should exist between and around elements.
929
923
 
930
924
  ---
931
925
 
932
-
933
-
934
926
  ## Code
935
927
 
936
928
  > **Note:** The code examples below must install dependencies before displaying and may take extra time to load