@czi-sds/mcp 0.5.2 → 0.5.3

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 (40) hide show
  1. package/data/tailwind.json +25 -25
  2. package/data/zeroheight-cache.json +5065 -1
  3. package/data/zeroheight-exports/Accordion.md +81 -20
  4. package/data/zeroheight-exports/Banner.md +104 -10
  5. package/data/zeroheight-exports/Buttons.md +1029 -1454
  6. package/data/zeroheight-exports/Callout.md +174 -9
  7. package/data/zeroheight-exports/Colors.md +1164 -41
  8. package/data/zeroheight-exports/Content-Card.md +148 -0
  9. package/data/zeroheight-exports/Control-Inputs.md +778 -63
  10. package/data/zeroheight-exports/Corners.md +8 -15
  11. package/data/zeroheight-exports/Dialog.md +200 -12
  12. package/data/zeroheight-exports/Downloads.md +120 -0
  13. package/data/zeroheight-exports/Dropdown-Input.md +616 -12
  14. package/data/zeroheight-exports/Dropdown-Menus.md +1150 -0
  15. package/data/zeroheight-exports/Field-Inputs.md +450 -9
  16. package/data/zeroheight-exports/Filters.md +238 -9
  17. package/data/zeroheight-exports/Getting-Started.md +7 -3
  18. package/data/zeroheight-exports/Hero.md +152 -0
  19. package/data/zeroheight-exports/Icons.md +1854 -218
  20. package/data/zeroheight-exports/Intent.md +40 -0
  21. package/data/zeroheight-exports/Link.md +52 -6
  22. package/data/zeroheight-exports/Lists.md +364 -6
  23. package/data/zeroheight-exports/Loading-Indicator.md +8 -0
  24. package/data/zeroheight-exports/Navigation.md +328 -6
  25. package/data/zeroheight-exports/Notification.md +172 -12
  26. package/data/zeroheight-exports/Panel.md +72 -12
  27. package/data/zeroheight-exports/README.md +17 -19
  28. package/data/zeroheight-exports/Responsive-Design.md +52 -0
  29. package/data/zeroheight-exports/Search-Input.md +44 -0
  30. package/data/zeroheight-exports/Search.md +248 -0
  31. package/data/zeroheight-exports/Segmented-Control.md +34 -9
  32. package/data/zeroheight-exports/Table.md +468 -47
  33. package/data/zeroheight-exports/Tabs.md +542 -9
  34. package/data/zeroheight-exports/Tags.md +504 -12
  35. package/data/zeroheight-exports/Text-Link.md +100 -0
  36. package/data/zeroheight-exports/Theming.md +36 -6
  37. package/data/zeroheight-exports/Tooltips.md +466 -15
  38. package/data/zeroheight-exports/Typography.md +64 -32
  39. package/package.json +3 -3
  40. package/data/zeroheight-exports/Dropdown-Menu.md +0 -3883
package/data/zeroheight-exports/Accordion.md CHANGED
@@ -13,6 +13,14 @@ Click on each state below to enter inspect view and get details on its code attr
13
13
 
14
14
 
15
15
 
16
+ **Accordion**
17
+
18
+ ---
19
+
20
+ ---
21
+
22
+ **Accordion**
23
+
16
24
  ---
17
25
 
18
26
  ---
@@ -21,6 +29,10 @@ Click on each state below to enter inspect view and get details on its code attr
21
29
 
22
30
  These rules establish how much margin should exist between and around elements.
23
31
 
32
+ **Accordion spacing**
33
+
34
+ ---
35
+
24
36
  ## Code
25
37
 
26
38
  ## Accordion Component
@@ -51,16 +63,32 @@ Once expanded, the content revealed within the Accordion can be whatever the des
51
63
 
52
64
  Click on each state below to enter inspect view and get details on its code attributes and any global styles it uses.
53
65
 
66
+ **Accordion**
67
+
68
+ ---
69
+
70
+ ---
71
+
72
+ **Accordion**
73
+
54
74
  ---
55
75
 
56
76
  ---
57
77
 
78
+ **Accordion**
79
+
80
+ ---
81
+
58
82
  ---
59
83
 
60
84
  ### Accordion Spacing
61
85
 
62
86
  These rules establish how much margin should exist between and around elements.
63
87
 
88
+ **Accordion spacing**
89
+
90
+ ---
91
+
64
92
  ## Code
65
93
 
66
94
  ## Accordion Component
@@ -93,6 +121,14 @@ Accordions are elements that can be used to hide or reveal content. Use the head
93
121
 
94
122
  The Accordion indicator arrow may appear to the left or the right of the header. Accordions may show a subtitle below the header text. Accordions may show bottom divider lines to help visually separate them from one another.
95
123
 
124
+ **Preview_Guidelines_Accordion_toggleLeft**
125
+
126
+ ---
127
+
128
+ **Preview_Guidelines_Accordion_toggleRight**
129
+
130
+ ---
131
+
96
132
  ---
97
133
 
98
134
  ### Live Instance
@@ -110,6 +146,22 @@ Left-aligned toggles works well when the Accordion's container is wide, because
110
146
  | Default | Default + Divider | Default + Subtitle | Expanded |
111
147
  | ------- | ----------------- | ------------------ | -------- |
112
148
 
149
+ **toggleLeft_collapsed_no subtitle_no underline**
150
+
151
+ ---
152
+
153
+ **toggleLeft_collapsed_no subtitle_underlined**
154
+
155
+ ---
156
+
157
+ **toggleLeft_collapsed_subtitle_no underline**
158
+
159
+ ---
160
+
161
+ **toggleLeft_expanded_no subtitle_no underline**
162
+
163
+ ---
164
+
113
165
  ---
114
166
 
115
167
  ### Accordion – Right Toggle
@@ -119,12 +171,32 @@ Use when there's a preference for the Accordion toggle to appear to the right of
119
171
  | Default | Default + Divider | Default + Subtitle | Expanded |
120
172
  | ------- | ----------------- | ------------------ | -------- |
121
173
 
174
+ **toggleRight_collapsed_no subtitle_no underline_n**
175
+
176
+ ---
177
+
178
+ **toggleRight_collapsed_no subtitle_underlined_n**
179
+
180
+ ---
181
+
182
+ **toggleRight_collapsed_subtitle_no underline**
183
+
184
+ ---
185
+
186
+ **toggleRight_expanded_no subtitle_no underline**
187
+
188
+ ---
189
+
122
190
  ---
123
191
 
124
192
  ### Accordion Spacing
125
193
 
126
194
  These rules establish how much margin should exist between and around elements.
127
195
 
196
+ **Accordion spacing**
197
+
198
+ ---
199
+
128
200
  ## Code
129
201
 
130
202
  > **Note:** The code examples below must install dependencies before displaying and may take extra time to load
@@ -223,9 +295,7 @@ function App() {
223
295
  return (
224
296
  <div className="app">
225
297
  <Accordion id="accordion-1" useDivider={false} togglePosition="right">
226
- <AccordionHeader id={`accordion-1-header`}>
227
- Accordion Header
228
- </AccordionHeader>
298
+ <AccordionHeader>Accordion Header</AccordionHeader>
229
299
  <AccordionDetails>
230
300
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
231
301
  malesuada lacus ex, sit amet blandit leo lobortis eget.
@@ -285,15 +355,14 @@ root.render(
285
355
  <head>
286
356
  <meta charset="UTF-8" />
287
357
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
288
- <title>Accordion</title>
289
358
  <link rel="preconnect" href="https://fonts.googleapis.com" />
290
359
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
291
360
  <link
292
- href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
361
+ href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
293
362
  rel="stylesheet"
294
363
  />
295
364
  <link
296
- href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
365
+ href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
297
366
  rel="stylesheet"
298
367
  />
299
368
  </head>
@@ -378,10 +447,7 @@ function App() {
378
447
  return (
379
448
  <div className="app">
380
449
  <Accordion id="accordion-1" useDivider={true} togglePosition="right">
381
- <AccordionHeader
382
- id={`accordion-1-header`}
383
- subtitle="Explore the functionalities of our amazing product"
384
- >
450
+ <AccordionHeader subtitle="Explore the functionalities of our amazing product">
385
451
  Product Features
386
452
  </AccordionHeader>
387
453
  <AccordionDetails>
@@ -479,15 +545,14 @@ root.render(
479
545
  <head>
480
546
  <meta charset="UTF-8" />
481
547
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
482
- <title>Accordion</title>
483
548
  <link rel="preconnect" href="https://fonts.googleapis.com" />
484
549
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
485
550
  <link
486
- href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
551
+ href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
487
552
  rel="stylesheet"
488
553
  />
489
554
  <link
490
- href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
555
+ href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
491
556
  rel="stylesheet"
492
557
  />
493
558
  </head>
@@ -572,10 +637,7 @@ function App() {
572
637
  return (
573
638
  <div className="app">
574
639
  <Accordion id="accordion-1" useDivider={true} togglePosition="right">
575
- <AccordionHeader
576
- id={`accordion-1-header`}
577
- subtitle="Explore the functionalities of our amazing product"
578
- >
640
+ <AccordionHeader subtitle="Explore the functionalities of our amazing product">
579
641
  Product Features
580
642
  </AccordionHeader>
581
643
  <AccordionDetails>
@@ -678,15 +740,14 @@ root.render(
678
740
  <head>
679
741
  <meta charset="UTF-8" />
680
742
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
681
- <title>Accordion</title>
682
743
  <link rel="preconnect" href="https://fonts.googleapis.com" />
683
744
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
684
745
  <link
685
- href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
746
+ href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
686
747
  rel="stylesheet"
687
748
  />
688
749
  <link
689
- href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
750
+ href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
690
751
  rel="stylesheet"
691
752
  />
692
753
  </head>
package/data/zeroheight-exports/Banner.md CHANGED
@@ -26,8 +26,20 @@ When the information being communicated on the Banner is intended to remain pers
26
26
 
27
27
 
28
28
 
29
+ **Default (Persistent)**
30
+
31
+ ---
32
+
29
33
  ---
30
34
 
35
+ **Default (Dismissible)**
36
+
37
+ ---
38
+
39
+ ---
40
+
41
+ **Hover (Dismissible)**
42
+
31
43
  ---
32
44
 
33
45
  ### Secondary Banner
@@ -38,8 +50,20 @@ If additional context or information is needed beyond the space available on the
38
50
 
39
51
  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.
40
52
 
53
+ **Default (Persistent)**
54
+
55
+ ---
56
+
41
57
  ---
42
58
 
59
+ **Default (Dismissible)**
60
+
61
+ ---
62
+
63
+ ---
64
+
65
+ **Hover (Dismissible)**
66
+
43
67
  ---
44
68
 
45
69
  ---
@@ -48,6 +72,10 @@ When the information being communicated on the Banner is intended to remain pers
48
72
 
49
73
  These rules establish how much margin should exist between and around elements.
50
74
 
75
+ **Banner spacing**
76
+
77
+ ---
78
+
51
79
  ## Code
52
80
 
53
81
  ## Banner Component
@@ -82,6 +110,14 @@ Both Banner variants can optionally be set to be manually dismissible by the use
82
110
 
83
111
  Banners span the full width of the page.
84
112
 
113
+ **Preview_Guidelines_Banner_Primary**
114
+
115
+ ---
116
+
117
+ **Preview_Guidelines_Banner_Secondary**
118
+
119
+ ---
120
+
85
121
  ---
86
122
 
87
123
  ### Live Instance
@@ -103,6 +139,18 @@ When the information being communicated on the Banner is intended to remain pers
103
139
  | Default (Persistent) | Default (Dismissible) | Hover (Dismissible) |
104
140
  | -------------------- | --------------------- | ------------------- |
105
141
 
142
+ **Banner_Primary_Persistent_Default**
143
+
144
+ ---
145
+
146
+ **Banner_Primary_Dismissible_Default**
147
+
148
+ ---
149
+
150
+ **Banner_Primary_Dismissible_Hover**
151
+
152
+ ---
153
+
106
154
  ---
107
155
 
108
156
  ### Banner – Secondary
@@ -116,12 +164,28 @@ When the information being communicated on the Banner is intended to remain pers
116
164
  | Default (Persistent) | Default (Dismissible) | Hover (Dismissible) |
117
165
  | -------------------- | --------------------- | ------------------- |
118
166
 
167
+ **Banner_Secondary_Persistent_Default**
168
+
169
+ ---
170
+
171
+ **Banner_Secondary_Dismissible_Default**
172
+
173
+ ---
174
+
175
+ **Banner_Secondary_Dismissible_Hover**
176
+
177
+ ---
178
+
119
179
  ---
120
180
 
121
181
  ### Banner Spacing
122
182
 
123
183
  These rules establish how much margin should exist between and around elements.
124
184
 
185
+ **Banner spacing**
186
+
187
+ ---
188
+
125
189
  ---
126
190
 
127
191
  ### Intent Variations
@@ -135,11 +199,43 @@ Each intent is demonstrated below using the Dismissible variant for reference. R
135
199
  | Info | Negative | Notice | Positive |
136
200
  | ---- | -------- | ------ | -------- |
137
201
 
202
+ **Banner_Primary_Intent_Info**
203
+
204
+ ---
205
+
206
+ **Banner_Primary_Intent_Negative**
207
+
208
+ ---
209
+
210
+ **Banner_Primary_Intent_Notice**
211
+
212
+ ---
213
+
214
+ **Banner_Primary_Intent_Positive**
215
+
216
+ ---
217
+
138
218
  #### Secondary
139
219
 
140
220
  | Info | Negative | Notice | Positive |
141
221
  | ---- | -------- | ------ | -------- |
142
222
 
223
+ **Banner_Secondary_Intent_Info**
224
+
225
+ ---
226
+
227
+ **Banner_Secondary_Intent_Negative**
228
+
229
+ ---
230
+
231
+ **Banner_Secondary_Intent_Notice**
232
+
233
+ ---
234
+
235
+ **Banner_Secondary_Intent_Positive**
236
+
237
+ ---
238
+
143
239
  ## Code
144
240
 
145
241
  > **Note:** The code examples below must install dependencies before displaying and may take extra time to load
@@ -155,11 +251,12 @@ The component's source code in the SDS codebase can be found here.
155
251
  Any custom SDS props and MUI props required for implementation are found on the table below. See the MUI documentation for additional optional props.
156
252
 
157
253
  | Name | Type | Default | Description |
158
- | -------------- | -------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
254
+ | -------------- | -------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ---------------------------------------- |
159
255
  | `dismissed` | `bool` | `false` | If `true`, the banner has been dismissed by the user. |
160
256
  | `dismissible` | `bool` | `true` | If `true`, the banner can be dismissed by the user. |
161
257
  | `sdsType` | `"primary"` ` | "secondary"` | `primary` | The `primary` variant has a `400` background color and white text color. The `secondary` variant has a `100` background color and `primary` text color. |
162
258
  | `icon` | `ReactNode` | `-` | The icon to be displayed within the banner. If not provided, a`InfoCircle` icon will be displayed. |
259
+ | `intent` | `"info" | "notice" | "negative" | "positive"` | `info` | The intent color of the Banner component |
163
260
  | `sdsIconProps` | `Partial<IconProps>` | `-` | Additional props to be passed to the icon component. |
164
261
  | `onClose` | `fn` | `-` | Callback fired when the component requests to be closed. When provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked. **Signature:**`function(event: React.SyntheticEvent) => void` `event`. The event source of the callback. |
165
262
 
@@ -270,15 +367,14 @@ root.render(
270
367
  <head>
271
368
  <meta charset="UTF-8" />
272
369
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
273
- <title>Banner</title>
274
370
  <link rel="preconnect" href="https://fonts.googleapis.com" />
275
371
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
276
372
  <link
277
- href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
373
+ href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
278
374
  rel="stylesheet"
279
375
  />
280
376
  <link
281
- href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
377
+ href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
282
378
  rel="stylesheet"
283
379
  />
284
380
  </head>
@@ -413,15 +509,14 @@ root.render(
413
509
  <head>
414
510
  <meta charset="UTF-8" />
415
511
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
416
- <title>Banner</title>
417
512
  <link rel="preconnect" href="https://fonts.googleapis.com" />
418
513
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
419
514
  <link
420
- href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
515
+ href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
421
516
  rel="stylesheet"
422
517
  />
423
518
  <link
424
- href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
519
+ href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
425
520
  rel="stylesheet"
426
521
  />
427
522
  </head>
@@ -560,15 +655,14 @@ root.render(
560
655
  <head>
561
656
  <meta charset="UTF-8" />
562
657
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
563
- <title>Banner</title>
564
658
  <link rel="preconnect" href="https://fonts.googleapis.com" />
565
659
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
566
660
  <link
567
- href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
661
+ href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
568
662
  rel="stylesheet"
569
663
  />
570
664
  <link
571
- href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
665
+ href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
572
666
  rel="stylesheet"
573
667
  />
574
668
  </head>