@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/Icons.md CHANGED
@@ -13,6 +13,22 @@ The second prop, `sdsSize`, dictates the size of the icon to be displayed. There
13
13
  | **Extra Large** | **Large** | **Small** | **Extra Small** |
14
14
  | --------------- | --------- | --------- | --------------- |
15
15
 
16
+ **Lock_Xl**
17
+
18
+ ---
19
+
20
+ **Lock_L**
21
+
22
+ ---
23
+
24
+ **Lock_S**
25
+
26
+ ---
27
+
28
+ **Lock_Xs**
29
+
30
+ ---
31
+
16
32
  | Used only for Icon Buttons. | Buttons, Callouts, Notifications, Tags, etc. | Dropdown Inputs, Search Inputs, Segmented Control, etc. | Checkbox Inputs, Filter Tags, Multi-select Menu Items, etc. |
17
33
  | --------------------------- | -------------------------------------------- | ------------------------------------------------------- | ----------------------------------------------------------- |
18
34
 
@@ -34,398 +50,2018 @@ The table below provides a visual of each icon, its name to be passed in the `sd
34
50
  | **Bacteria** | **Bar Charts** | | |
35
51
  | ------------ | -------------- | --- | --- |
36
52
 
37
- | **Book** | **Checks** | | **Chevrons** |
38
- | -------- | ---------- | --- | ------------ |
53
+ **Bacteria**
39
54
 
40
- | **Chevrons** | | | |
41
- | ------------ | --- | --- | --- |
55
+ ---
42
56
 
43
- | **Chevrons** | | | **Circles** |
44
- | ------------ | --- | --- | ----------- |
57
+ **BarChartHorizontal3**
45
58
 
46
- | **Code** | **Compass** | **Copy** | **Cube** |
47
- | -------- | ----------- | -------- | -------- |
59
+ ---
48
60
 
49
- | **DNA** | **Document** | **Dots** | **Download** |
50
- | ------- | ------------ | -------- | ------------ |
61
+ **BarChartVertical3**
51
62
 
52
- | **Edit** | **Envelope** | **Exclamation Marks** | |
53
- | -------- | ------------ | --------------------- | --- |
63
+ ---
54
64
 
55
- | **Eyes** | | **Filter** | **Flags** |
56
- | -------- | --- | ---------- | --------- |
65
+ **BarChartVertical4**
57
66
 
58
- | **Flags** | | | **Flasks** |
59
- | --------- | --- | --- | ---------- |
67
+ ---
60
68
 
61
- | **Flasks** | | **Gear** | **Github** |
62
- | ---------- | --- | -------- | ---------- |
69
+ | **Book** | **Checks** | | **Chevrons** |
70
+ | -------- | ---------- | --- | ------------ |
63
71
 
64
- | **Globes** | | **Grids** | |
65
- | ---------- | --- | --------- | --- |
72
+ **Book**
66
73
 
67
- | **Grids** | | **House** | **Info** |
68
- | --------- | --- | --------- | -------- |
74
+ ---
69
75
 
70
- | **Info** | **Life Ring** | **Lightbulb** | **Lines** |
71
- | -------- | ------------- | ------------- | --------- |
76
+ **Check**
72
77
 
73
- | **Lines** | **Link** | **List** | **Loading** |
74
- | --------- | -------- | -------- | ----------- |
78
+ ---
75
79
 
76
- | **Locks** | | **Minus** | **Open** |
77
- | --------- | --- | --------- | -------- |
80
+ **CheckCircle**
78
81
 
79
- | **Pause** | **People** | | **Percentage** |
80
- | --------- | ---------- | --- | -------------- |
82
+ ---
81
83
 
82
- | **Pins** | | **Play** | **Pluses** |
83
- | -------- | --- | -------- | ---------- |
84
+ **ChevronDown**
84
85
 
85
- | **Pluses** | **Projects** | | **Puzzle Piece** |
86
- | ---------- | ------------ | --- | ---------------- |
86
+ ---
87
87
 
88
- | **Question Marks** | | **Quote** | **Read** |
89
- | ------------------ | --- | --------- | -------- |
88
+ | **Chevrons** | | | |
89
+ | ------------ | --- | --- | --- |
90
90
 
91
- | **Refresh** | **Report** | **Rocket** | **Rotate** |
92
- | ----------- | ---------- | ---------- | ---------- |
91
+ **ChevronDown2**
93
92
 
94
- | **Rotate** | **Save** | **Scale** | **Scatter Plot** |
95
- | ---------- | -------- | --------- | ---------------- |
93
+ ---
96
94
 
97
- | **Search** | | **Send** | **Share** |
98
- | ---------- | --- | -------- | --------- |
95
+ **ChevronLeft**
99
96
 
100
- | **Sliders** | **Speech Bubbles** | **Squares** | **Stars** |
101
- | ----------- | ------------------ | ----------- | --------- |
97
+ ---
102
98
 
103
- | **Stars** | **Table** | **Thumbs** | |
104
- | --------- | --------- | ---------- | --- |
99
+ **ChevronLeft2**
105
100
 
106
- | **Trash Can** | **Trees** | | |
107
- | ------------- | --------- | --- | --- |
101
+ ---
108
102
 
109
- | **Trees** | | | **Triangles** |
110
- | --------- | --- | --- | ------------- |
103
+ **ChevronRight**
111
104
 
112
- | **Triangles** | | | **Update** |
113
- | ------------- | --- | --- | ---------- |
105
+ ---
114
106
 
115
- | **Upload** | **Viruses** | | **Widget** |
116
- | ---------- | ----------- | --- | ---------- |
107
+ | **Chevrons** | | | **Circles** |
108
+ | ------------ | --- | --- | ----------- |
117
109
 
118
- | **X Marks** | | | |
119
- | ----------- | --- | --- | --- |
110
+ **ChevronRight2**
120
111
 
121
112
  ---
122
113
 
123
- Icons are generally used in conjunction with text to further clarify the outcome of a user's action. Occasionally they are used as buttons themselves without accompanying text.
114
+ **ChevronUp**
124
115
 
125
- ### Icon Component and Sizes
116
+ ---
126
117
 
127
- Any icons used in the UI should be added using the Icon component; it contains two props, `sdsIcon` and `sdsSize`.
118
+ **ChevronUp2**
128
119
 
129
- The first prop, `sdsIcon`, is the name of the icon to be displayed. It is built as an enum and thus only accepts strings that contain icon names found in the design system.
120
+ ---
130
121
 
131
- The second prop, `sdsSize`, dictates the size of the icon to be displayed. There are four icon sizes available and each icon has a pre-established set of sizes available to it. The icon name passed into the `sdsIcon` prop will limit which sizes are available to be passed into the `sdsSize` prop.
122
+ **CirclesOverlap2**
132
123
 
133
- | **Extra Large** | **Large** | **Small** | **Extra Small** |
134
- | --------------- | --------- | --------- | --------------- |
124
+ ---
135
125
 
136
- | Used only for Icon Buttons. | Buttons and Tags | Dropdown Input and Search Inputs | Checkbox Inputs, Tags, Menu Items |
137
- | --------------------------- | ---------------- | -------------------------------- | --------------------------------- |
126
+ | **Code** | **Compass** | **Copy** | **Cube** |
127
+ | -------- | ----------- | -------- | -------- |
138
128
 
139
- ### Custom Icons
129
+ **Code**
140
130
 
141
- In rare circumstances, an icon will need added to the UI without using the Icon component (most often in cases where the icon being used is not part of the icon set within the design system). In these cases, an svg of the icon should always be used and its size should be set using one of the sizing variables below. The dimensions established with these variables align to the dimensions used by the `sdsSize` prop on the Icon component.
131
+ ---
142
132
 
143
- | **Visual** | | **Variable** | | **Value** | | **Equivalent sdsSize Value** |
144
- | ---------- | --- | ------------ | --- | ---------------------------- | --- | ---------------------------- |
145
- | | | `iconSizeXl` | | `height: 32px` `width: 32px` | | `extraLarge` |
146
- | | | `iconSizeL` | | `height: 22px` `width: 22px` | | `large` |
147
- | | | `iconSizeS` | | `height: 14px` `width: 14px` | | `small` |
148
- | | | `iconSizeXs` | | `height: 10px` `width: 10px` | | `extraSmall` |
133
+ **Compass**
149
134
 
150
- ### Icons
135
+ ---
151
136
 
152
- The table below provides a visual of each icon, its name to be passed in the `sdsIcon` prop, as well as the sizes available to be passed in the `sdsSize` prop.
137
+ **Copy**
153
138
 
154
- | **Bacteria** | **Bar Charts** | | |
155
- | ------------ | -------------- | --- | --- |
139
+ ---
156
140
 
157
- | **Book** | **Checks** | | **Chevrons** |
158
- | -------- | ---------- | --- | ------------ |
141
+ **Cube**
159
142
 
160
- | **Chevrons** | | | |
161
- | ------------ | --- | --- | --- |
143
+ ---
162
144
 
163
- | **Chevrons** | **Circles** | **Code** | **Copy** |
164
- | ------------ | ----------- | -------- | -------- |
145
+ | **DNA** | **Document** | **Dots** | **Download** |
146
+ | ------- | ------------ | -------- | ------------ |
165
147
 
166
- | **Copy** | **Cube** | **DNA** | **Document** |
167
- | -------- | -------- | ------- | ------------ |
148
+ **DNA**
168
149
 
169
- | **Dots** | **Download** | **Edit** | **Exclamation Marks** |
170
- | -------- | ------------ | -------- | --------------------- |
150
+ ---
171
151
 
172
- | **Exclamation Marks** | **Eyes** | | **Filter** |
173
- | --------------------- | -------- | --- | ---------- |
152
+ **Document**
174
153
 
175
- | **Flags** | | | |
176
- | --------- | --- | --- | --- |
154
+ ---
177
155
 
178
- | **Flasks** | | | **Gear** |
179
- | ---------- | --- | --- | -------- |
156
+ **DotsHorizontal3**
180
157
 
181
- | **Globes** | | **Grids** | |
182
- | ---------- | --- | --------- | --- |
158
+ ---
183
159
 
184
- | **Grids** | **House** | **Info** | |
185
- | --------- | --------- | -------- | --- |
160
+ **Download**
186
161
 
187
- | **Life Ring** | **Lightbulb** | **Lines** | |
188
- | ------------- | ------------- | --------- | --- |
162
+ ---
189
163
 
190
- | **Link** | **List** | **Loading** | **Locks** |
191
- | -------- | -------- | ----------- | --------- |
164
+ | **Edit** | **Envelope** | **Exclamation Marks** | |
165
+ | -------- | ------------ | --------------------- | --- |
192
166
 
193
- | **Locks** | **Minus** | **Open** | **People** |
194
- | --------- | --------- | -------- | ---------- |
167
+ **Edit**
195
168
 
196
- | **Person** | **Percentage** | **Pins** | |
197
- | ---------- | -------------- | -------- | --- |
169
+ ---
198
170
 
199
- | **Play** | **Pluses** | | **Projects** |
200
- | -------- | ---------- | --- | ------------ |
171
+ **Envelope**
201
172
 
202
- | **Projects** | **Puzzle Piece** | **Question Mark** | **Quote** |
203
- | ------------ | ---------------- | ----------------- | --------- |
173
+ ---
204
174
 
205
- | **Refresh** | **Save** | **Search** | |
206
- | ----------- | -------- | ---------- | --- |
175
+ **ExclamationmarkCircle**
207
176
 
208
- | **Share** | **Sliders** | **Speech Bubbles** | **Squares** |
209
- | --------- | ----------- | ------------------ | ----------- |
177
+ ---
210
178
 
211
- | **Stars** | | **Table** | **Trash Can** |
212
- | --------- | --- | --------- | ------------- |
179
+ **ExclamationmarkSpeechBubble**
213
180
 
214
- | **Trees** | | | |
215
- | --------- | --- | --- | --- |
181
+ ---
216
182
 
217
- | **Trees** | | **Triangles** | |
218
- | --------- | --- | ------------- | --- |
183
+ | **Eyes** | | **Filter** | **Flags** |
184
+ | -------- | --- | ---------- | --------- |
219
185
 
220
- | **Triangles** | | **Upload** | **Viruses** |
221
- | ------------- | --- | ---------- | ----------- |
186
+ **EyeClosed**
222
187
 
223
- | **Viruses** | **Xmarks** | | |
224
- | ----------- | ---------- | --- | --- |
188
+ ---
189
+
190
+ **EyeOpen**
225
191
 
226
192
  ---
227
193
 
228
- Icons are generally used in conjunction with text to further clarify the outcome of a user's action. Occasionally they are used as buttons themselves without accompanying text.
194
+ **Filter**
229
195
 
230
- ### Icon Component and Sizes
196
+ ---
231
197
 
232
- Any icons used in the UI should be added using the Icon component; it contains two props, `sdsIcon` and `sdsSize`.
198
+ **FlagCheck**
233
199
 
234
- The first prop, `sdsIcon`, is the name of the icon to be displayed. It is built as an enum and thus only accepts strings that contain icon names found in the design system.
200
+ ---
235
201
 
236
- The second prop, `sdsSize`, dictates the size of the icon to be displayed. There are four icon sizes available and each icon has a pre-established set of sizes available to it. The icon name passed into the `sdsIcon` prop will limit which sizes are available to be passed into the `sdsSize` prop.
202
+ | **Flags** | | | **Flasks** |
203
+ | --------- | --- | --- | ---------- |
237
204
 
238
- | **Extra Large** | **Large** | **Small** | **Extra Small** |
239
- | --------------- | --------- | --------- | --------------- |
205
+ **FlagOutline**
240
206
 
241
- | Used only for Icon Buttons. | Buttons, Callouts, Notifications, Tags, etc. | Dropdown Inputs, Search Inputs, Segmented Control, etc. | Checkbox Inputs, Filter Tags, Multi-select Menu Items, etc. |
242
- | --------------------------- | -------------------------------------------- | ------------------------------------------------------- | ----------------------------------------------------------- |
207
+ ---
243
208
 
244
- ### Custom Icons
209
+ **FlagQuestionmark**
245
210
 
246
- In rare circumstances, an icon will need added to the UI without using the Icon component (most often in cases where the icon being used is not part of the icon set within the design system). In these cases, an svg of the icon should always be used and its size should be set using one of the sizing variables below. The dimensions established with these variables align to the dimensions used by the `sdsSize` prop on the Icon component.
211
+ ---
247
212
 
248
- | **Visual** | | **Variable** | | **Value** | | **Equivalent sdsSize Value** |
249
- | ---------- | --- | ------------ | --- | ---------------------------- | --- | ---------------------------- |
250
- | | | `iconSizeXl` | | `height: 32px` `width: 32px` | | `extraLarge` |
251
- | | | `iconSizeL` | | `height: 22px` `width: 22px` | | `large` |
252
- | | | `iconSizeS` | | `height: 14px` `width: 14px` | | `small` |
253
- | | | `iconSizeXs` | | `height: 10px` `width: 10px` | | `extraSmall` |
213
+ **FlagXmark**
254
214
 
255
- ### Icons
215
+ ---
256
216
 
257
- The table below provides a visual of each icon, its name to be passed in the `sdsIcon` prop, as well as the sizes available to be passed in the `sdsSize` prop.
217
+ **Flask**
258
218
 
259
- | **Bacteria** | **Bar Charts** | | |
260
- | ------------ | -------------- | --- | --- |
219
+ ---
261
220
 
262
- | **Book** | **Checks** | | **Chevrons** |
263
- | -------- | ---------- | --- | ------------ |
221
+ | **Flasks** | | **Gear** | **Github** |
222
+ | ---------- | --- | -------- | ---------- |
264
223
 
265
- | **Chevrons** | | | **Circles** |
266
- | ------------ | --- | --- | ----------- |
224
+ **FlaskPrivate**
267
225
 
268
- | **Compass** | **Copy** | **DNA** | **Document** |
269
- | ----------- | -------- | ------- | ------------ |
226
+ ---
270
227
 
271
- | **Dots** | **Download** | **Edit** | **Exclamation Marks** |
272
- | -------- | ------------ | -------- | --------------------- |
228
+ **FlaskPublic**
273
229
 
274
- | **Exclamation Marks** | **Eyes** | | **Filter** |
275
- | --------------------- | -------- | --- | ---------- |
230
+ ---
276
231
 
277
- | **Flags** | | | |
278
- | --------- | --- | --- | --- |
232
+ **Gear**
279
233
 
280
- | **Flasks** | | | **Gear** |
281
- | ---------- | --- | --- | -------- |
234
+ ---
235
+
236
+ **Github**
237
+
238
+ ---
282
239
 
283
240
  | **Globes** | | **Grids** | |
284
241
  | ---------- | --- | --------- | --- |
285
242
 
286
- | **Grids** | **House** | **Info** | |
287
- | --------- | --------- | -------- | --- |
243
+ **Globe**
288
244
 
289
- | **Life Ring** | **Lightbulb** | **Lines** | |
290
- | ------------- | ------------- | --------- | --- |
245
+ ---
291
246
 
292
- | **Link** | **List** | **Loading** | **Locks** |
293
- | -------- | -------- | ----------- | --------- |
247
+ **GlobeBasic**
294
248
 
295
- | **Locks** | **Minus** | **Open** | **People** |
296
- | --------- | --------- | -------- | ---------- |
249
+ ---
297
250
 
298
- | **People** | **Percentage** | **Pins** | |
299
- | ---------- | -------------- | -------- | --- |
251
+ **Grid**
300
252
 
301
- | **Play** | **Pluses** | | **Projects** |
302
- | -------- | ---------- | --- | ------------ |
253
+ ---
303
254
 
304
- | **Projects** | **Puzzle Piece** | **Question Mark** | **Refresh** |
305
- | ------------ | ---------------- | ----------------- | ----------- |
255
+ **GridDots3**
306
256
 
307
- | **Save** | **Search** | | **Share** |
308
- | -------- | ---------- | --- | --------- |
257
+ ---
309
258
 
310
- | **Sliders** | **Speech Bubbles** | **Squares** | **Stars** |
311
- | ----------- | ------------------ | ----------- | --------- |
259
+ | **Grids** | | **House** | **Info** |
260
+ | --------- | --- | --------- | -------- |
312
261
 
313
- | **Stars** | **Table** | **Trash Can** | **Trees** |
314
- | --------- | --------- | ------------- | --------- |
262
+ **GridPrivate**
315
263
 
316
- | **Trees** | | | |
264
+ ---
265
+
266
+ **GridPublic**
267
+
268
+ ---
269
+
270
+ **House**
271
+
272
+ ---
273
+
274
+ **InfoCircle**
275
+
276
+ ---
277
+
278
+ | **Info** | **Life Ring** | **Lightbulb** | **Lines** |
279
+ | -------- | ------------- | ------------- | --------- |
280
+
281
+ **InfoSpeechBubble**
282
+
283
+ ---
284
+
285
+ **LifeRing**
286
+
287
+ ---
288
+
289
+ **Lightbulb**
290
+
291
+ ---
292
+
293
+ **LinesDashed3Solid1**
294
+
295
+ ---
296
+
297
+ | **Lines** | **Link** | **List** | **Loading** |
298
+ | --------- | -------- | -------- | ----------- |
299
+
300
+ **LinesHorizontal3**
301
+
302
+ ---
303
+
304
+ **Link**
305
+
306
+ ---
307
+
308
+ **List**
309
+
310
+ ---
311
+
312
+ **Loading**
313
+
314
+ ---
315
+
316
+ | **Locks** | | **Minus** | **Open** |
317
+ | --------- | --- | --------- | -------- |
318
+
319
+ **Lock**
320
+
321
+ ---
322
+
323
+ **LockCircle**
324
+
325
+ ---
326
+
327
+ **Minus**
328
+
329
+ ---
330
+
331
+ **Open**
332
+
333
+ ---
334
+
335
+ | **Pause** | **People** | | **Percentage** |
336
+ | --------- | ---------- | --- | -------------- |
337
+
338
+ **Pause**
339
+
340
+ ---
341
+
342
+ **People**
343
+
344
+ ---
345
+
346
+ **Person**
347
+
348
+ ---
349
+
350
+ **Percentage**
351
+
352
+ ---
353
+
354
+ | **Pins** | | **Play** | **Pluses** |
355
+ | -------- | --- | -------- | ---------- |
356
+
357
+ **Pin**
358
+
359
+ ---
360
+
361
+ **PinLocation**
362
+
363
+ ---
364
+
365
+ **Play**
366
+
367
+ ---
368
+
369
+ **Plus**
370
+
371
+ ---
372
+
373
+ | **Pluses** | **Projects** | | **Puzzle Piece** |
374
+ | ---------- | ------------ | --- | ---------------- |
375
+
376
+ **PlusCircle**
377
+
378
+ ---
379
+
380
+ **ProjectPrivate**
381
+
382
+ ---
383
+
384
+ **ProjectPublic**
385
+
386
+ ---
387
+
388
+ **PuzzlePiece**
389
+
390
+ ---
391
+
392
+ | **Question Marks** | | **Quote** | **Read** |
393
+ | ------------------ | --- | --------- | -------- |
394
+
395
+ **Questionmark**
396
+
397
+ ---
398
+
399
+ **QuestionMarkCircle**
400
+
401
+ ---
402
+
403
+ **Quote**
404
+
405
+ ---
406
+
407
+ **Read**
408
+
409
+ ---
410
+
411
+ | **Refresh** | **Report** | **Rocket** | **Rotate** |
412
+ | ----------- | ---------- | ---------- | ---------- |
413
+
414
+ **Refresh**
415
+
416
+ ---
417
+
418
+ **Report**
419
+
420
+ ---
421
+
422
+ **Rocket**
423
+
424
+ ---
425
+
426
+ **RotateLeft**
427
+
428
+ ---
429
+
430
+ | **Rotate** | **Save** | **Scale** | **Scatter Plot** |
431
+ | ---------- | -------- | --------- | ---------------- |
432
+
433
+ **RotateRight**
434
+
435
+ ---
436
+
437
+ **Save**
438
+
439
+ ---
440
+
441
+ **Scale**
442
+
443
+ ---
444
+
445
+ **ScatterPlot**
446
+
447
+ ---
448
+
449
+ | **Search** | | **Send** | **Share** |
450
+ | ---------- | --- | -------- | --------- |
451
+
452
+ **Search**
453
+
454
+ ---
455
+
456
+ **SearchLinesHorizontal3**
457
+
458
+ ---
459
+
460
+ **Send**
461
+
462
+ ---
463
+
464
+ **Share**
465
+
466
+ ---
467
+
468
+ | **Sliders** | **Speech Bubbles** | **Squares** | **Stars** |
469
+ | ----------- | ------------------ | ----------- | --------- |
470
+
471
+ **SlidersHorizontal**
472
+
473
+ ---
474
+
475
+ **SpeechBubbles**
476
+
477
+ ---
478
+
479
+ **SquareOnDashedSquare**
480
+
481
+ ---
482
+
483
+ **Star**
484
+
485
+ ---
486
+
487
+ | **Stars** | **Table** | **Thumbs** | |
488
+ | --------- | --------- | ---------- | --- |
489
+
490
+ **Starburst**
491
+
492
+ ---
493
+
494
+ **Table**
495
+
496
+ ---
497
+
498
+ **ThumbsDown**
499
+
500
+ ---
501
+
502
+ **ThumbsUp**
503
+
504
+ ---
505
+
506
+ | **Trash Can** | **Trees** | | |
507
+ | ------------- | --------- | --- | --- |
508
+
509
+ **TrashCan**
510
+
511
+ ---
512
+
513
+ **TreeDendogram**
514
+
515
+ ---
516
+
517
+ **TreeHorizontal**
518
+
519
+ ---
520
+
521
+ **TreeHorizontalPrivate**
522
+
523
+ ---
524
+
525
+ | **Trees** | | | **Triangles** |
526
+ | --------- | --- | --- | ------------- |
527
+
528
+ **TreeHorizontalPublic**
529
+
530
+ ---
531
+
532
+ **TreeHorizontalTopRightFilled**
533
+
534
+ ---
535
+
536
+ **TreeVertical**
537
+
538
+ ---
539
+
540
+ **TriangleDown**
541
+
542
+ ---
543
+
544
+ | **Triangles** | | | **Update** |
545
+ | ------------- | --- | --- | ---------- |
546
+
547
+ **TriangleLeft**
548
+
549
+ ---
550
+
551
+ **TriangleRight**
552
+
553
+ ---
554
+
555
+ **TriangleUp**
556
+
557
+ ---
558
+
559
+ **Update**
560
+
561
+ ---
562
+
563
+ | **Upload** | **Viruses** | | **Widget** |
564
+ | ---------- | ----------- | --- | ---------- |
565
+
566
+ **Upload**
567
+
568
+ ---
569
+
570
+ **Virus**
571
+
572
+ ---
573
+
574
+ **VirusCoV2**
575
+
576
+ ---
577
+
578
+ **Widget**
579
+
580
+ ---
581
+
582
+ | **X Marks** | | | |
583
+ | ----------- | --- | --- | --- |
584
+
585
+ **Xmark**
586
+
587
+ ---
588
+
589
+ **XmarkCircle**
590
+
591
+ ---
592
+
593
+ ---
594
+
595
+ Icons are generally used in conjunction with text to further clarify the outcome of a user's action. Occasionally they are used as buttons themselves without accompanying text.
596
+
597
+ ### Icon Component and Sizes
598
+
599
+ Any icons used in the UI should be added using the Icon component; it contains two props, `sdsIcon` and `sdsSize`.
600
+
601
+ The first prop, `sdsIcon`, is the name of the icon to be displayed. It is built as an enum and thus only accepts strings that contain icon names found in the design system.
602
+
603
+ The second prop, `sdsSize`, dictates the size of the icon to be displayed. There are four icon sizes available and each icon has a pre-established set of sizes available to it. The icon name passed into the `sdsIcon` prop will limit which sizes are available to be passed into the `sdsSize` prop.
604
+
605
+ | **Extra Large** | **Large** | **Small** | **Extra Small** |
606
+ | --------------- | --------- | --------- | --------------- |
607
+
608
+ **Lock_Xl**
609
+
610
+ ---
611
+
612
+ **Lock_L**
613
+
614
+ ---
615
+
616
+ **Lock_S**
617
+
618
+ ---
619
+
620
+ **Lock_Xs**
621
+
622
+ ---
623
+
624
+ | Used only for Icon Buttons. | Buttons and Tags | Dropdown Input and Search Inputs | Checkbox Inputs, Tags, Menu Items |
625
+ | --------------------------- | ---------------- | -------------------------------- | --------------------------------- |
626
+
627
+ ### Custom Icons
628
+
629
+ In rare circumstances, an icon will need added to the UI without using the Icon component (most often in cases where the icon being used is not part of the icon set within the design system). In these cases, an svg of the icon should always be used and its size should be set using one of the sizing variables below. The dimensions established with these variables align to the dimensions used by the `sdsSize` prop on the Icon component.
630
+
631
+ | **Visual** | | **Variable** | | **Value** | | **Equivalent sdsSize Value** |
632
+ | ---------- | --- | ------------ | --- | ---------------------------- | --- | ---------------------------- |
633
+ | | | `iconSizeXl` | | `height: 32px` `width: 32px` | | `extraLarge` |
634
+ | | | `iconSizeL` | | `height: 22px` `width: 22px` | | `large` |
635
+ | | | `iconSizeS` | | `height: 14px` `width: 14px` | | `small` |
636
+ | | | `iconSizeXs` | | `height: 10px` `width: 10px` | | `extraSmall` |
637
+
638
+ ### Icons
639
+
640
+ The table below provides a visual of each icon, its name to be passed in the `sdsIcon` prop, as well as the sizes available to be passed in the `sdsSize` prop.
641
+
642
+ | **Bacteria** | **Bar Charts** | | |
643
+ | ------------ | -------------- | --- | --- |
644
+
645
+ **Bacteria**
646
+
647
+ ---
648
+
649
+ **BarChartHorizontal3**
650
+
651
+ ---
652
+
653
+ **BarChartVertical3**
654
+
655
+ ---
656
+
657
+ **BarChartVertical4**
658
+
659
+ ---
660
+
661
+ | **Book** | **Checks** | | **Chevrons** |
662
+ | -------- | ---------- | --- | ------------ |
663
+
664
+ **Book**
665
+
666
+ ---
667
+
668
+ **Check**
669
+
670
+ ---
671
+
672
+ **CheckCircle**
673
+
674
+ ---
675
+
676
+ **ChevronDown**
677
+
678
+ ---
679
+
680
+ | **Chevrons** | | | |
681
+ | ------------ | --- | --- | --- |
682
+
683
+ **ChevronLeft**
684
+
685
+ ---
686
+
687
+ **ChevronLeft2**
688
+
689
+ ---
690
+
691
+ **ChevronRight**
692
+
693
+ ---
694
+
695
+ **ChevronRight2**
696
+
697
+ ---
698
+
699
+ | **Chevrons** | **Circles** | **Code** | **Copy** |
700
+ | ------------ | ----------- | -------- | -------- |
701
+
702
+ **ChevronUp**
703
+
704
+ ---
705
+
706
+ **CirclesOverlap2**
707
+
708
+ ---
709
+
710
+ **Code**
711
+
712
+ ---
713
+
714
+ **Compass**
715
+
716
+ ---
717
+
718
+ | **Copy** | **Cube** | **DNA** | **Document** |
719
+ | -------- | -------- | ------- | ------------ |
720
+
721
+ **Copy**
722
+
723
+ ---
724
+
725
+ **Cube**
726
+
727
+ ---
728
+
729
+ **DNA**
730
+
731
+ ---
732
+
733
+ **Document**
734
+
735
+ ---
736
+
737
+ | **Dots** | **Download** | **Edit** | **Exclamation Marks** |
738
+ | -------- | ------------ | -------- | --------------------- |
739
+
740
+ **DotsHorizontal3**
741
+
742
+ ---
743
+
744
+ **Download**
745
+
746
+ ---
747
+
748
+ **Edit**
749
+
750
+ ---
751
+
752
+ **ExclamationmarkCircle**
753
+
754
+ ---
755
+
756
+ | **Exclamation Marks** | **Eyes** | | **Filter** |
757
+ | --------------------- | -------- | --- | ---------- |
758
+
759
+ **ExclamationmarkSpeechBubble**
760
+
761
+ ---
762
+
763
+ **EyeClosed**
764
+
765
+ ---
766
+
767
+ **EyeOpen**
768
+
769
+ ---
770
+
771
+ **Filter**
772
+
773
+ ---
774
+
775
+ | **Flags** | | | |
776
+ | --------- | --- | --- | --- |
777
+
778
+ **FlagCheck**
779
+
780
+ ---
781
+
782
+ **FlagOutline**
783
+
784
+ ---
785
+
786
+ **FlagQuestionmark**
787
+
788
+ ---
789
+
790
+ **FlagXmark**
791
+
792
+ ---
793
+
794
+ | **Flasks** | | | **Gear** |
795
+ | ---------- | --- | --- | -------- |
796
+
797
+ **Flask**
798
+
799
+ ---
800
+
801
+ **FlaskPrivate**
802
+
803
+ ---
804
+
805
+ **FlaskPublic**
806
+
807
+ ---
808
+
809
+ **Gear**
810
+
811
+ ---
812
+
813
+ | **Globes** | | **Grids** | |
814
+ | ---------- | --- | --------- | --- |
815
+
816
+ **Globe**
817
+
818
+ ---
819
+
820
+ **GlobeBasic**
821
+
822
+ ---
823
+
824
+ **Grid**
825
+
826
+ ---
827
+
828
+ **GridPrivate**
829
+
830
+ ---
831
+
832
+ | **Grids** | **House** | **Info** | |
833
+ | --------- | --------- | -------- | --- |
834
+
835
+ **GridPublic**
836
+
837
+ ---
838
+
839
+ **House**
840
+
841
+ ---
842
+
843
+ **InfoCircle**
844
+
845
+ ---
846
+
847
+ **InfoSpeechBubble**
848
+
849
+ ---
850
+
851
+ | **Life Ring** | **Lightbulb** | **Lines** | |
852
+ | ------------- | ------------- | --------- | --- |
853
+
854
+ **LifeRing**
855
+
856
+ ---
857
+
858
+ **Lightbulb**
859
+
860
+ ---
861
+
862
+ **LinesDashed3Solid1**
863
+
864
+ ---
865
+
866
+ **LinesHorizontal3**
867
+
868
+ ---
869
+
870
+ | **Link** | **List** | **Loading** | **Locks** |
871
+ | -------- | -------- | ----------- | --------- |
872
+
873
+ **Link**
874
+
875
+ ---
876
+
877
+ **List**
878
+
879
+ ---
880
+
881
+ **Loading**
882
+
883
+ ---
884
+
885
+ **Lock**
886
+
887
+ ---
888
+
889
+ | **Locks** | **Minus** | **Open** | **People** |
890
+ | --------- | --------- | -------- | ---------- |
891
+
892
+ **LockCircle**
893
+
894
+ ---
895
+
896
+ **Minus**
897
+
898
+ ---
899
+
900
+ **Open**
901
+
902
+ ---
903
+
904
+ **People**
905
+
906
+ ---
907
+
908
+ | **Person** | **Percentage** | **Pins** | |
909
+ | ---------- | -------------- | -------- | --- |
910
+
911
+ **Person**
912
+
913
+ ---
914
+
915
+ **Percentage**
916
+
917
+ ---
918
+
919
+ **Pin**
920
+
921
+ ---
922
+
923
+ **PinLocation**
924
+
925
+ ---
926
+
927
+ | **Play** | **Pluses** | | **Projects** |
928
+ | -------- | ---------- | --- | ------------ |
929
+
930
+ **Play**
931
+
932
+ ---
933
+
934
+ **Plus**
935
+
936
+ ---
937
+
938
+ **PlusCircle**
939
+
940
+ ---
941
+
942
+ **ProjectPrivate**
943
+
944
+ ---
945
+
946
+ | **Projects** | **Puzzle Piece** | **Question Mark** | **Quote** |
947
+ | ------------ | ---------------- | ----------------- | --------- |
948
+
949
+ **ProjectPublic**
950
+
951
+ ---
952
+
953
+ **PuzzlePiece**
954
+
955
+ ---
956
+
957
+ **Questionmark**
958
+
959
+ ---
960
+
961
+ **Quote**
962
+
963
+ ---
964
+
965
+ | **Refresh** | **Save** | **Search** | |
966
+ | ----------- | -------- | ---------- | --- |
967
+
968
+ **Refresh**
969
+
970
+ ---
971
+
972
+ **Save**
973
+
974
+ ---
975
+
976
+ **Search**
977
+
978
+ ---
979
+
980
+ **SearchLinesHorizontal3**
981
+
982
+ ---
983
+
984
+ | **Share** | **Sliders** | **Speech Bubbles** | **Squares** |
985
+ | --------- | ----------- | ------------------ | ----------- |
986
+
987
+ **Share**
988
+
989
+ ---
990
+
991
+ **SlidersHorizontal**
992
+
993
+ ---
994
+
995
+ **SpeechBubbles**
996
+
997
+ ---
998
+
999
+ **SquareOnDashedSquare**
1000
+
1001
+ ---
1002
+
1003
+ | **Stars** | | **Table** | **Trash Can** |
1004
+ | --------- | --- | --------- | ------------- |
1005
+
1006
+ **Star**
1007
+
1008
+ ---
1009
+
1010
+ **Starburst**
1011
+
1012
+ ---
1013
+
1014
+ **Table**
1015
+
1016
+ ---
1017
+
1018
+ **TrashCan**
1019
+
1020
+ ---
1021
+
1022
+ | **Trees** | | | |
1023
+ | --------- | --- | --- | --- |
1024
+
1025
+ **TreeDendogram**
1026
+
1027
+ ---
1028
+
1029
+ **TreeHorizontal**
1030
+
1031
+ ---
1032
+
1033
+ **TreeHorizontalTopRightFilled**
1034
+
1035
+ ---
1036
+
1037
+ **TreeHorizontalPrivate**
1038
+
1039
+ ---
1040
+
1041
+ | **Trees** | | **Triangles** | |
1042
+ | --------- | --- | ------------- | --- |
1043
+
1044
+ **TreeHorizontalPublic**
1045
+
1046
+ ---
1047
+
1048
+ **TreeVertical**
1049
+
1050
+ ---
1051
+
1052
+ **TriangleDown**
1053
+
1054
+ ---
1055
+
1056
+ **TriangleLeft**
1057
+
1058
+ ---
1059
+
1060
+ | **Triangles** | | **Upload** | **Viruses** |
1061
+ | ------------- | --- | ---------- | ----------- |
1062
+
1063
+ **TriangleRight**
1064
+
1065
+ ---
1066
+
1067
+ **TriangleUp**
1068
+
1069
+ ---
1070
+
1071
+ **Upload**
1072
+
1073
+ ---
1074
+
1075
+ **Virus**
1076
+
1077
+ ---
1078
+
1079
+ | **Viruses** | **Xmarks** | | |
1080
+ | ----------- | ---------- | --- | --- |
1081
+
1082
+ **VirusCoV2**
1083
+
1084
+ ---
1085
+
1086
+ **Xmark**
1087
+
1088
+ ---
1089
+
1090
+ **XmarkCircle**
1091
+
1092
+ ---
1093
+
1094
+ ---
1095
+
1096
+ Icons are generally used in conjunction with text to further clarify the outcome of a user's action. Occasionally they are used as buttons themselves without accompanying text.
1097
+
1098
+ ### Icon Component and Sizes
1099
+
1100
+ Any icons used in the UI should be added using the Icon component; it contains two props, `sdsIcon` and `sdsSize`.
1101
+
1102
+ The first prop, `sdsIcon`, is the name of the icon to be displayed. It is built as an enum and thus only accepts strings that contain icon names found in the design system.
1103
+
1104
+ The second prop, `sdsSize`, dictates the size of the icon to be displayed. There are four icon sizes available and each icon has a pre-established set of sizes available to it. The icon name passed into the `sdsIcon` prop will limit which sizes are available to be passed into the `sdsSize` prop.
1105
+
1106
+ | **Extra Large** | **Large** | **Small** | **Extra Small** |
1107
+ | --------------- | --------- | --------- | --------------- |
1108
+
1109
+ **Lock_Xl**
1110
+
1111
+ ---
1112
+
1113
+ **Lock_L**
1114
+
1115
+ ---
1116
+
1117
+ **Lock_S**
1118
+
1119
+ ---
1120
+
1121
+ **Lock_Xs**
1122
+
1123
+ ---
1124
+
1125
+ | Used only for Icon Buttons. | Buttons, Callouts, Notifications, Tags, etc. | Dropdown Inputs, Search Inputs, Segmented Control, etc. | Checkbox Inputs, Filter Tags, Multi-select Menu Items, etc. |
1126
+ | --------------------------- | -------------------------------------------- | ------------------------------------------------------- | ----------------------------------------------------------- |
1127
+
1128
+ ### Custom Icons
1129
+
1130
+ In rare circumstances, an icon will need added to the UI without using the Icon component (most often in cases where the icon being used is not part of the icon set within the design system). In these cases, an svg of the icon should always be used and its size should be set using one of the sizing variables below. The dimensions established with these variables align to the dimensions used by the `sdsSize` prop on the Icon component.
1131
+
1132
+ | **Visual** | | **Variable** | | **Value** | | **Equivalent sdsSize Value** |
1133
+ | ---------- | --- | ------------ | --- | ---------------------------- | --- | ---------------------------- |
1134
+ | | | `iconSizeXl` | | `height: 32px` `width: 32px` | | `extraLarge` |
1135
+ | | | `iconSizeL` | | `height: 22px` `width: 22px` | | `large` |
1136
+ | | | `iconSizeS` | | `height: 14px` `width: 14px` | | `small` |
1137
+ | | | `iconSizeXs` | | `height: 10px` `width: 10px` | | `extraSmall` |
1138
+
1139
+ ### Icons
1140
+
1141
+ The table below provides a visual of each icon, its name to be passed in the `sdsIcon` prop, as well as the sizes available to be passed in the `sdsSize` prop.
1142
+
1143
+ | **Bacteria** | **Bar Charts** | | |
1144
+ | ------------ | -------------- | --- | --- |
1145
+
1146
+ **Bacteria**
1147
+
1148
+ ---
1149
+
1150
+ **BarChartHorizontal3**
1151
+
1152
+ ---
1153
+
1154
+ **BarChartVertical3**
1155
+
1156
+ ---
1157
+
1158
+ **BarChartVertical4**
1159
+
1160
+ ---
1161
+
1162
+ | **Book** | **Checks** | | **Chevrons** |
1163
+ | -------- | ---------- | --- | ------------ |
1164
+
1165
+ **Book**
1166
+
1167
+ ---
1168
+
1169
+ **Check**
1170
+
1171
+ ---
1172
+
1173
+ **CheckCircle**
1174
+
1175
+ ---
1176
+
1177
+ **ChevronDown**
1178
+
1179
+ ---
1180
+
1181
+ | **Chevrons** | | | **Circles** |
1182
+ | ------------ | --- | --- | ----------- |
1183
+
1184
+ **ChevronLeft**
1185
+
1186
+ ---
1187
+
1188
+ **ChevronRight**
1189
+
1190
+ ---
1191
+
1192
+ **ChevronUp**
1193
+
1194
+ ---
1195
+
1196
+ **CirclesOverlap2**
1197
+
1198
+ ---
1199
+
1200
+ | **Compass** | **Copy** | **DNA** | **Document** |
1201
+ | ----------- | -------- | ------- | ------------ |
1202
+
1203
+ **Compass**
1204
+
1205
+ ---
1206
+
1207
+ **Copy**
1208
+
1209
+ ---
1210
+
1211
+ **DNA**
1212
+
1213
+ ---
1214
+
1215
+ **Document**
1216
+
1217
+ ---
1218
+
1219
+ | **Dots** | **Download** | **Edit** | **Exclamation Marks** |
1220
+ | -------- | ------------ | -------- | --------------------- |
1221
+
1222
+ **DotsHorizontal3**
1223
+
1224
+ ---
1225
+
1226
+ **Download**
1227
+
1228
+ ---
1229
+
1230
+ **Edit**
1231
+
1232
+ ---
1233
+
1234
+ **ExclamationmarkCircle**
1235
+
1236
+ ---
1237
+
1238
+ | **Exclamation Marks** | **Eyes** | | **Filter** |
1239
+ | --------------------- | -------- | --- | ---------- |
1240
+
1241
+ **ExclamationmarkSpeechBubble**
1242
+
1243
+ ---
1244
+
1245
+ **EyeClosed**
1246
+
1247
+ ---
1248
+
1249
+ **EyeOpen**
1250
+
1251
+ ---
1252
+
1253
+ **Filter**
1254
+
1255
+ ---
1256
+
1257
+ | **Flags** | | | |
1258
+ | --------- | --- | --- | --- |
1259
+
1260
+ **FlagCheck**
1261
+
1262
+ ---
1263
+
1264
+ **FlagOutline**
1265
+
1266
+ ---
1267
+
1268
+ **FlagQuestionmark**
1269
+
1270
+ ---
1271
+
1272
+ **FlagXmark**
1273
+
1274
+ ---
1275
+
1276
+ | **Flasks** | | | **Gear** |
1277
+ | ---------- | --- | --- | -------- |
1278
+
1279
+ **Flask**
1280
+
1281
+ ---
1282
+
1283
+ **FlaskPrivate**
1284
+
1285
+ ---
1286
+
1287
+ **FlaskPublic**
1288
+
1289
+ ---
1290
+
1291
+ **Gear**
1292
+
1293
+ ---
1294
+
1295
+ | **Globes** | | **Grids** | |
1296
+ | ---------- | --- | --------- | --- |
1297
+
1298
+ **Globe**
1299
+
1300
+ ---
1301
+
1302
+ **GlobeBasic**
1303
+
1304
+ ---
1305
+
1306
+ **Grid**
1307
+
1308
+ ---
1309
+
1310
+ **GridPrivate**
1311
+
1312
+ ---
1313
+
1314
+ | **Grids** | **House** | **Info** | |
1315
+ | --------- | --------- | -------- | --- |
1316
+
1317
+ **GridPublic**
1318
+
1319
+ ---
1320
+
1321
+ **House**
1322
+
1323
+ ---
1324
+
1325
+ **InfoCircle**
1326
+
1327
+ ---
1328
+
1329
+ **InfoSpeechBubble**
1330
+
1331
+ ---
1332
+
1333
+ | **Life Ring** | **Lightbulb** | **Lines** | |
1334
+ | ------------- | ------------- | --------- | --- |
1335
+
1336
+ **LifeRing**
1337
+
1338
+ ---
1339
+
1340
+ **Lightbulb**
1341
+
1342
+ ---
1343
+
1344
+ **LinesDashed3Solid1**
1345
+
1346
+ ---
1347
+
1348
+ **LinesHorizontal3**
1349
+
1350
+ ---
1351
+
1352
+ | **Link** | **List** | **Loading** | **Locks** |
1353
+ | -------- | -------- | ----------- | --------- |
1354
+
1355
+ **Link**
1356
+
1357
+ ---
1358
+
1359
+ **List**
1360
+
1361
+ ---
1362
+
1363
+ **Loading**
1364
+
1365
+ ---
1366
+
1367
+ **Lock**
1368
+
1369
+ ---
1370
+
1371
+ | **Locks** | **Minus** | **Open** | **People** |
1372
+ | --------- | --------- | -------- | ---------- |
1373
+
1374
+ **LockCircle**
1375
+
1376
+ ---
1377
+
1378
+ **Minus**
1379
+
1380
+ ---
1381
+
1382
+ **Open**
1383
+
1384
+ ---
1385
+
1386
+ **People**
1387
+
1388
+ ---
1389
+
1390
+ | **People** | **Percentage** | **Pins** | |
1391
+ | ---------- | -------------- | -------- | --- |
1392
+
1393
+ **Person**
1394
+
1395
+ ---
1396
+
1397
+ **Percentage**
1398
+
1399
+ ---
1400
+
1401
+ **Pin**
1402
+
1403
+ ---
1404
+
1405
+ **PinLocation**
1406
+
1407
+ ---
1408
+
1409
+ | **Play** | **Pluses** | | **Projects** |
1410
+ | -------- | ---------- | --- | ------------ |
1411
+
1412
+ **Play**
1413
+
1414
+ ---
1415
+
1416
+ **Plus**
1417
+
1418
+ ---
1419
+
1420
+ **PlusCircle**
1421
+
1422
+ ---
1423
+
1424
+ **ProjectPrivate**
1425
+
1426
+ ---
1427
+
1428
+ | **Projects** | **Puzzle Piece** | **Question Mark** | **Refresh** |
1429
+ | ------------ | ---------------- | ----------------- | ----------- |
1430
+
1431
+ **ProjectPublic**
1432
+
1433
+ ---
1434
+
1435
+ **PuzzlePiece**
1436
+
1437
+ ---
1438
+
1439
+ **Questionmark**
1440
+
1441
+ ---
1442
+
1443
+ **Refresh**
1444
+
1445
+ ---
1446
+
1447
+ | **Save** | **Search** | | **Share** |
1448
+ | -------- | ---------- | --- | --------- |
1449
+
1450
+ **Save**
1451
+
1452
+ ---
1453
+
1454
+ **Search**
1455
+
1456
+ ---
1457
+
1458
+ **SearchLinesHorizontal3**
1459
+
1460
+ ---
1461
+
1462
+ **Share**
1463
+
1464
+ ---
1465
+
1466
+ | **Sliders** | **Speech Bubbles** | **Squares** | **Stars** |
1467
+ | ----------- | ------------------ | ----------- | --------- |
1468
+
1469
+ **SlidersHorizontal**
1470
+
1471
+ ---
1472
+
1473
+ **SpeechBubbles**
1474
+
1475
+ ---
1476
+
1477
+ **SquareOnDashedSquare**
1478
+
1479
+ ---
1480
+
1481
+ **Star**
1482
+
1483
+ ---
1484
+
1485
+ | **Stars** | **Table** | **Trash Can** | **Trees** |
1486
+ | --------- | --------- | ------------- | --------- |
1487
+
1488
+ **Starburst**
1489
+
1490
+ ---
1491
+
1492
+ **Table**
1493
+
1494
+ ---
1495
+
1496
+ **TrashCan**
1497
+
1498
+ ---
1499
+
1500
+ **TreeDendogram**
1501
+
1502
+ ---
1503
+
1504
+ | **Trees** | | | |
317
1505
  | --------- | --- | --- | --- |
318
1506
 
319
- | **Trees** | **Triangles** | | |
320
- | --------- | ------------- | --- | --- |
1507
+ **TreeHorizontal**
1508
+
1509
+ ---
1510
+
1511
+ **TreeHorizontalTopRightFilled**
1512
+
1513
+ ---
1514
+
1515
+ **TreeHorizontalPrivate**
1516
+
1517
+ ---
1518
+
1519
+ **TreeHorizontalPublic**
1520
+
1521
+ ---
1522
+
1523
+ | **Trees** | **Triangles** | | |
1524
+ | --------- | ------------- | --- | --- |
1525
+
1526
+ **TreeVertical**
1527
+
1528
+ ---
1529
+
1530
+ **TriangleDown**
1531
+
1532
+ ---
1533
+
1534
+ **TriangleLeft**
1535
+
1536
+ ---
1537
+
1538
+ **TriangleRight**
1539
+
1540
+ ---
1541
+
1542
+ | **Triangles** | **Upload** | **Virus** | **Xmarks** |
1543
+ | ------------- | ---------- | --------- | ---------- |
1544
+
1545
+ **TriangleUp**
1546
+
1547
+ ---
1548
+
1549
+ **Upload**
1550
+
1551
+ ---
1552
+
1553
+ **Virus**
1554
+
1555
+ ---
1556
+
1557
+ **Xmark**
1558
+
1559
+ ---
1560
+
1561
+ | **Xmarks** | | | |
1562
+ | ---------- | --- | --- | --- |
1563
+
1564
+ **XmarkCircle**
1565
+
1566
+ ---
1567
+
1568
+ ---
1569
+
1570
+ Icons are generally used in conjunction with text to further clarify the outcome of a user's action. Occasionally they are used as buttons themselves without accompanying text.
1571
+
1572
+ ### Icon Component and Sizes
1573
+
1574
+ Any icons used in the UI should be added using the Icon component; it contains two props, `sdsIcon` and `sdsSize`.
1575
+
1576
+ The first prop, `sdsIcon`, is the name of the icon to be displayed. It is built as an enum and thus only accepts strings that contain icon names found in the design system.
1577
+
1578
+ The second prop, `sdsSize`, dictates the size of the icon to be displayed. There are four icon sizes available and each icon has a pre-established set of sizes available to it. The icon name passed into the `sdsIcon` prop will limit which sizes are available to be passed into the `sdsSize` prop.
1579
+
1580
+ | **Extra Large** | **Large** | **Small** | **Extra Small** |
1581
+ | --------------- | --------- | --------- | --------------- |
1582
+
1583
+ **Lock_Xl**
1584
+
1585
+ ---
1586
+
1587
+ **Lock_L**
1588
+
1589
+ ---
1590
+
1591
+ **Lock_S**
1592
+
1593
+ ---
1594
+
1595
+ **Lock_Xs**
1596
+
1597
+ ---
1598
+
1599
+ | Used only for Icon Buttons. | Buttons, Callouts, Notifications, Tags, etc. | Dropdown Inputs, Search Inputs, Segmented Control, etc. | Checkbox Inputs, Filter Tags, Multi-select Menu Items, etc. |
1600
+ | --------------------------- | -------------------------------------------- | ------------------------------------------------------- | ----------------------------------------------------------- |
1601
+
1602
+ ### Custom Icons
1603
+
1604
+ In rare circumstances, an icon will need added to the UI without using the Icon component (most often in cases where the icon being used is not part of the icon set within the design system). In these cases, an svg of the icon should always be used and its size should be set using one of the sizing variables below. The dimensions established with these variables align to the dimensions used by the `sdsSize` prop on the Icon component.
1605
+
1606
+ | **Visual** | | **Variable** | | **Value** | | **Equivalent sdsSize Value** |
1607
+ | ---------- | --- | ------------ | --- | ---------------------------- | --- | ---------------------------- |
1608
+ | | | `iconSizeXl` | | `height: 32px` `width: 32px` | | `extraLarge` |
1609
+ | | | `iconSizeL` | | `height: 22px` `width: 22px` | | `large` |
1610
+ | | | `iconSizeS` | | `height: 14px` `width: 14px` | | `small` |
1611
+ | | | `iconSizeXs` | | `height: 10px` `width: 10px` | | `extraSmall` |
1612
+
1613
+ ### Icons
1614
+
1615
+ The table below provides a visual of each icon, its name to be passed in the `sdsIcon` prop, as well as the sizes available to be passed in the `sdsSize` prop.
1616
+
1617
+ | **Bacteria** | **Bar Charts** | | |
1618
+ | ------------ | -------------- | --- | --- |
1619
+
1620
+ **Bacteria**
1621
+
1622
+ ---
1623
+
1624
+ **BarChartHorizontal3**
1625
+
1626
+ ---
1627
+
1628
+ **BarChartVertical3**
1629
+
1630
+ ---
1631
+
1632
+ **BarChartVertical4**
1633
+
1634
+ ---
1635
+
1636
+ | **Book** | **Checks** | | **Chevrons** |
1637
+ | -------- | ---------- | --- | ------------ |
1638
+
1639
+ **Book**
1640
+
1641
+ ---
1642
+
1643
+ **Check**
1644
+
1645
+ ---
1646
+
1647
+ **CheckCircle**
1648
+
1649
+ ---
1650
+
1651
+ **ChevronDown**
1652
+
1653
+ ---
1654
+
1655
+ | **Chevrons** | | | |
1656
+ | ------------ | --- | --- | --- |
1657
+
1658
+ **ChevronLeft**
1659
+
1660
+ ---
1661
+
1662
+ **ChevronLeft2**
1663
+
1664
+ ---
1665
+
1666
+ **ChevronRight**
1667
+
1668
+ ---
1669
+
1670
+ **ChevronRight2**
1671
+
1672
+ ---
1673
+
1674
+ | **Chevrons** | **Circles** | **Code** | **Compass** |
1675
+ | ------------ | ----------- | -------- | ----------- |
1676
+
1677
+ **ChevronUp**
1678
+
1679
+ ---
1680
+
1681
+ **CirclesOverlap2**
1682
+
1683
+ ---
1684
+
1685
+ **Code**
1686
+
1687
+ ---
1688
+
1689
+ **Compass**
1690
+
1691
+ ---
1692
+
1693
+ | **Copy** | **Cube** | **DNA** | **Document** |
1694
+ | -------- | -------- | ------- | ------------ |
1695
+
1696
+ **Copy**
1697
+
1698
+ ---
1699
+
1700
+ **Cube**
321
1701
 
322
- | **Triangles** | **Upload** | **Virus** | **Xmarks** |
323
- | ------------- | ---------- | --------- | ---------- |
1702
+ ---
324
1703
 
325
- | **Xmarks** | | | |
326
- | ---------- | --- | --- | --- |
1704
+ **DNA**
327
1705
 
328
1706
  ---
329
1707
 
330
- Icons are generally used in conjunction with text to further clarify the outcome of a user's action. Occasionally they are used as buttons themselves without accompanying text.
1708
+ **Document**
331
1709
 
332
- ### Icon Component and Sizes
1710
+ ---
333
1711
 
334
- Any icons used in the UI should be added using the Icon component; it contains two props, `sdsIcon` and `sdsSize`.
1712
+ | **Dots** | **Download** | **Edit** | **Exclamation Marks** |
1713
+ | -------- | ------------ | -------- | --------------------- |
335
1714
 
336
- The first prop, `sdsIcon`, is the name of the icon to be displayed. It is built as an enum and thus only accepts strings that contain icon names found in the design system.
1715
+ **DotsHorizontal3**
337
1716
 
338
- The second prop, `sdsSize`, dictates the size of the icon to be displayed. There are four icon sizes available and each icon has a pre-established set of sizes available to it. The icon name passed into the `sdsIcon` prop will limit which sizes are available to be passed into the `sdsSize` prop.
1717
+ ---
339
1718
 
340
- | **Extra Large** | **Large** | **Small** | **Extra Small** |
341
- | --------------- | --------- | --------- | --------------- |
1719
+ **Download**
342
1720
 
343
- | Used only for Icon Buttons. | Buttons, Callouts, Notifications, Tags, etc. | Dropdown Inputs, Search Inputs, Segmented Control, etc. | Checkbox Inputs, Filter Tags, Multi-select Menu Items, etc. |
344
- | --------------------------- | -------------------------------------------- | ------------------------------------------------------- | ----------------------------------------------------------- |
1721
+ ---
345
1722
 
346
- ### Custom Icons
1723
+ **Edit**
347
1724
 
348
- In rare circumstances, an icon will need added to the UI without using the Icon component (most often in cases where the icon being used is not part of the icon set within the design system). In these cases, an svg of the icon should always be used and its size should be set using one of the sizing variables below. The dimensions established with these variables align to the dimensions used by the `sdsSize` prop on the Icon component.
1725
+ ---
349
1726
 
350
- | **Visual** | | **Variable** | | **Value** | | **Equivalent sdsSize Value** |
351
- | ---------- | --- | ------------ | --- | ---------------------------- | --- | ---------------------------- |
352
- | | | `iconSizeXl` | | `height: 32px` `width: 32px` | | `extraLarge` |
353
- | | | `iconSizeL` | | `height: 22px` `width: 22px` | | `large` |
354
- | | | `iconSizeS` | | `height: 14px` `width: 14px` | | `small` |
355
- | | | `iconSizeXs` | | `height: 10px` `width: 10px` | | `extraSmall` |
1727
+ **ExclamationmarkCircle**
356
1728
 
357
- ### Icons
1729
+ ---
358
1730
 
359
- The table below provides a visual of each icon, its name to be passed in the `sdsIcon` prop, as well as the sizes available to be passed in the `sdsSize` prop.
1731
+ | **Exclamation Marks** | **Eyes** | | **Filter** |
1732
+ | --------------------- | -------- | --- | ---------- |
360
1733
 
361
- | **Bacteria** | **Bar Charts** | | |
362
- | ------------ | -------------- | --- | --- |
1734
+ **ExclamationmarkSpeechBubble**
363
1735
 
364
- | **Book** | **Checks** | | **Chevrons** |
365
- | -------- | ---------- | --- | ------------ |
1736
+ ---
366
1737
 
367
- | **Chevrons** | | | |
368
- | ------------ | --- | --- | --- |
1738
+ **EyeClosed**
369
1739
 
370
- | **Chevrons** | **Circles** | **Code** | **Compass** |
371
- | ------------ | ----------- | -------- | ----------- |
1740
+ ---
372
1741
 
373
- | **Copy** | **Cube** | **DNA** | **Document** |
374
- | -------- | -------- | ------- | ------------ |
1742
+ **EyeOpen**
375
1743
 
376
- | **Dots** | **Download** | **Edit** | **Exclamation Marks** |
377
- | -------- | ------------ | -------- | --------------------- |
1744
+ ---
378
1745
 
379
- | **Exclamation Marks** | **Eyes** | | **Filter** |
380
- | --------------------- | -------- | --- | ---------- |
1746
+ **Filter**
1747
+
1748
+ ---
381
1749
 
382
1750
  | **Flags** | | | |
383
1751
  | --------- | --- | --- | --- |
384
1752
 
1753
+ **FlagCheck**
1754
+
1755
+ ---
1756
+
1757
+ **FlagOutline**
1758
+
1759
+ ---
1760
+
1761
+ **FlagQuestionmark**
1762
+
1763
+ ---
1764
+
1765
+ **FlagXmark**
1766
+
1767
+ ---
1768
+
385
1769
  | **Flasks** | | | **Gear** |
386
1770
  | ---------- | --- | --- | -------- |
387
1771
 
1772
+ **Flask**
1773
+
1774
+ ---
1775
+
1776
+ **FlaskPrivate**
1777
+
1778
+ ---
1779
+
1780
+ **FlaskPublic**
1781
+
1782
+ ---
1783
+
1784
+ **Gear**
1785
+
1786
+ ---
1787
+
388
1788
  | **Globes** | | **Grids** | |
389
1789
  | ---------- | --- | --------- | --- |
390
1790
 
1791
+ **Globe**
1792
+
1793
+ ---
1794
+
1795
+ **GlobeBasic**
1796
+
1797
+ ---
1798
+
1799
+ **Grid**
1800
+
1801
+ ---
1802
+
1803
+ **GridPrivate**
1804
+
1805
+ ---
1806
+
391
1807
  | **Grids** | **House** | **Info** | |
392
1808
  | --------- | --------- | -------- | --- |
393
1809
 
1810
+ **GridPublic**
1811
+
1812
+ ---
1813
+
1814
+ **House**
1815
+
1816
+ ---
1817
+
1818
+ **InfoCircle**
1819
+
1820
+ ---
1821
+
1822
+ **InfoSpeechBubble**
1823
+
1824
+ ---
1825
+
394
1826
  | **Life Ring** | **Lightbulb** | **Lines** | |
395
1827
  | ------------- | ------------- | --------- | --- |
396
1828
 
1829
+ **LifeRing**
1830
+
1831
+ ---
1832
+
1833
+ **Lightbulb**
1834
+
1835
+ ---
1836
+
1837
+ **LinesDashed3Solid1**
1838
+
1839
+ ---
1840
+
1841
+ **LinesHorizontal3**
1842
+
1843
+ ---
1844
+
397
1845
  | **Link** | **List** | **Loading** | **Locks** |
398
1846
  | -------- | -------- | ----------- | --------- |
399
1847
 
1848
+ **Link**
1849
+
1850
+ ---
1851
+
1852
+ **List**
1853
+
1854
+ ---
1855
+
1856
+ **Loading**
1857
+
1858
+ ---
1859
+
1860
+ **Lock**
1861
+
1862
+ ---
1863
+
400
1864
  | **Locks** | **Minus** | **Open** | **People** |
401
1865
  | --------- | --------- | -------- | ---------- |
402
1866
 
1867
+ **LockCircle**
1868
+
1869
+ ---
1870
+
1871
+ **Minus**
1872
+
1873
+ ---
1874
+
1875
+ **Open**
1876
+
1877
+ ---
1878
+
1879
+ **People**
1880
+
1881
+ ---
1882
+
403
1883
  | **Person** | **Percentage** | **Pins** | |
404
1884
  | ---------- | -------------- | -------- | --- |
405
1885
 
1886
+ **Person**
1887
+
1888
+ ---
1889
+
1890
+ **Percentage**
1891
+
1892
+ ---
1893
+
1894
+ **Pin**
1895
+
1896
+ ---
1897
+
1898
+ **PinLocation**
1899
+
1900
+ ---
1901
+
406
1902
  | **Play** | **Pluses** | | **Puzzle Piece** |
407
1903
  | -------- | ---------- | --- | ---------------- |
408
1904
 
1905
+ **Play**
1906
+
1907
+ ---
1908
+
1909
+ **Plus**
1910
+
1911
+ ---
1912
+
1913
+ **PlusCircle**
1914
+
1915
+ ---
1916
+
1917
+ **ProjectPrivate**
1918
+
1919
+ ---
1920
+
409
1921
  | **Projects** | **Puzzle Piece** | **Question Mark** | **Quote** |
410
1922
  | ------------ | ---------------- | ----------------- | --------- |
411
1923
 
1924
+ **ProjectPublic**
1925
+
1926
+ ---
1927
+
1928
+ **PuzzlePiece**
1929
+
1930
+ ---
1931
+
1932
+ **Questionmark**
1933
+
1934
+ ---
1935
+
1936
+ **Quote**
1937
+
1938
+ ---
1939
+
412
1940
  | **Refresh** | **Save** | **Search** | |
413
1941
  | ----------- | -------- | ---------- | --- |
414
1942
 
1943
+ **Refresh**
1944
+
1945
+ ---
1946
+
1947
+ **Save**
1948
+
1949
+ ---
1950
+
1951
+ **Search**
1952
+
1953
+ ---
1954
+
1955
+ **SearchLinesHorizontal3**
1956
+
1957
+ ---
1958
+
415
1959
  | **Share** | **Sliders** | **Speech Bubbles** | **Squares** |
416
1960
  | --------- | ----------- | ------------------ | ----------- |
417
1961
 
1962
+ **Share**
1963
+
1964
+ ---
1965
+
1966
+ **SlidersHorizontal**
1967
+
1968
+ ---
1969
+
1970
+ **SpeechBubbles**
1971
+
1972
+ ---
1973
+
1974
+ **SquareOnDashedSquare**
1975
+
1976
+ ---
1977
+
418
1978
  | **Stars** | | **Tables** | **Trash Can** |
419
1979
  | --------- | --- | ---------- | ------------- |
420
1980
 
1981
+ **Star**
1982
+
1983
+ ---
1984
+
1985
+ **Starburst**
1986
+
1987
+ ---
1988
+
1989
+ **Table**
1990
+
1991
+ ---
1992
+
1993
+ **TrashCan**
1994
+
1995
+ ---
1996
+
421
1997
  | **Trees** | | | |
422
1998
  | --------- | --- | --- | --- |
423
1999
 
2000
+ **TreeDendogram**
2001
+
2002
+ ---
2003
+
2004
+ **TreeHorizontal**
2005
+
2006
+ ---
2007
+
2008
+ **TreeHorizontalTopRightFilled**
2009
+
2010
+ ---
2011
+
2012
+ **TreeHorizontalPrivate**
2013
+
2014
+ ---
2015
+
424
2016
  | **Trees** | | **Triangles** | |
425
2017
  | --------- | --- | ------------- | --- |
426
2018
 
2019
+ **TreeHorizontalPublic**
2020
+
2021
+ ---
2022
+
2023
+ **TreeVertical**
2024
+
2025
+ ---
2026
+
2027
+ **TriangleDown**
2028
+
2029
+ ---
2030
+
2031
+ **TriangleLeft**
2032
+
2033
+ ---
2034
+
427
2035
  | **Triangles** | | **Upload** | **Viruses** |
428
2036
  | ------------- | --- | ---------- | ----------- |
429
2037
 
2038
+ **TriangleRight**
2039
+
2040
+ ---
2041
+
2042
+ **TriangleUp**
2043
+
2044
+ ---
2045
+
2046
+ **Upload**
2047
+
2048
+ ---
2049
+
2050
+ **Virus**
2051
+
2052
+ ---
2053
+
430
2054
  | **Viruses** | **Xmarks** | | |
431
2055
  | ----------- | ---------- | --- | --- |
2056
+
2057
+ **VirusCoV2**
2058
+
2059
+ ---
2060
+
2061
+ **Xmark**
2062
+
2063
+ ---
2064
+
2065
+ **XmarkCircle**
2066
+
2067
+ ---