@czi-sds/mcp 0.3.0 → 0.4.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 (145) hide show
  1. package/data/component-props/Accordion.json +14 -15
  2. package/data/component-props/Alert.json +2 -44
  3. package/data/component-props/Autocomplete.json +14 -32
  4. package/data/component-props/Banner.json +11 -12
  5. package/data/component-props/Button.json +17 -82
  6. package/data/component-props/ButtonDropdown.json +26 -0
  7. package/data/component-props/ButtonIcon.json +4 -60
  8. package/data/component-props/ButtonToggle.json +2 -66
  9. package/data/component-props/Callout.json +11 -65
  10. package/data/component-props/CellBasic.json +28 -56
  11. package/data/component-props/CellComponent.json +4 -32
  12. package/data/component-props/CellHeader.json +13 -49
  13. package/data/component-props/ComplexFilter.json +24 -4
  14. package/data/component-props/ContentCard.json +66 -2
  15. package/data/component-props/Dialog.json +26 -0
  16. package/data/component-props/Dropdown.json +29 -67
  17. package/data/component-props/DropdownMenu.json +16 -56
  18. package/data/component-props/HeatmapChart.json +6 -87
  19. package/data/component-props/Icon.json +3 -8
  20. package/data/component-props/InputCheckbox.json +5 -53
  21. package/data/component-props/InputDropdown.json +11 -33
  22. package/data/component-props/InputRadio.json +5 -53
  23. package/data/component-props/InputSearch.json +6 -70
  24. package/data/component-props/InputSlider.json +21 -35
  25. package/data/component-props/InputText.json +7 -63
  26. package/data/component-props/InputToggle.json +5 -54
  27. package/data/component-props/Link.json +18 -0
  28. package/data/component-props/LoadingIndicator.json +1 -2
  29. package/data/component-props/MenuItem.json +11 -41
  30. package/data/component-props/MenuSelect.json +4 -67
  31. package/data/component-props/NavigationFooter.json +0 -8
  32. package/data/component-props/NavigationHeader.json +14 -65
  33. package/data/component-props/NavigationJumpTo.json +0 -40
  34. package/data/component-props/Notification.json +14 -58
  35. package/data/component-props/Pagination.json +8 -33
  36. package/data/component-props/Panel.json +4 -54
  37. package/data/component-props/SegmentedControl.json +0 -55
  38. package/data/component-props/TableRow.json +10 -38
  39. package/data/component-props/Tabs.json +18 -0
  40. package/data/component-props/Tag.json +10 -56
  41. package/data/component-props/TagFilter.json +0 -47
  42. package/data/component-props/Tooltip.json +12 -61
  43. package/data/component-props/TooltipCondensed.json +18 -0
  44. package/data/component-props/TooltipTable.json +0 -4
  45. package/data/zeroheight-exports/Accordion.md +167 -125
  46. package/data/zeroheight-exports/Banner.md +71 -48
  47. package/data/zeroheight-exports/Borders.md +72 -73
  48. package/data/zeroheight-exports/Buttons.md +375 -330
  49. package/data/zeroheight-exports/Callout.md +138 -116
  50. package/data/zeroheight-exports/Colors.md +254 -255
  51. package/data/zeroheight-exports/Content-Card.md +36 -37
  52. package/data/zeroheight-exports/Contributing-to-SDS.md +34 -35
  53. package/data/zeroheight-exports/Control-Inputs.md +289 -234
  54. package/data/zeroheight-exports/Corners.md +63 -64
  55. package/data/zeroheight-exports/Cover-page.md +0 -1
  56. package/data/zeroheight-exports/Dialog.md +237 -179
  57. package/data/zeroheight-exports/Downloads.md +10 -11
  58. package/data/zeroheight-exports/Drop-Shadows.md +40 -41
  59. package/data/zeroheight-exports/Dropdown-Input.md +158 -127
  60. package/data/zeroheight-exports/Dropdown-Menu.md +814 -718
  61. package/data/zeroheight-exports/Element-Status-Tracker.md +191 -192
  62. package/data/zeroheight-exports/Field-Inputs.md +149 -130
  63. package/data/zeroheight-exports/Filters.md +114 -94
  64. package/data/zeroheight-exports/Getting-Started.md +112 -249
  65. package/data/zeroheight-exports/Hero.md +43 -37
  66. package/data/zeroheight-exports/Icons.md +205 -206
  67. package/data/zeroheight-exports/Intent.md +6 -7
  68. package/data/zeroheight-exports/Introduction-to-Bases.md +8 -9
  69. package/data/zeroheight-exports/Introduction-to-Cells.md +11 -12
  70. package/data/zeroheight-exports/Introduction-to-DNA.md +8 -9
  71. package/data/zeroheight-exports/Introduction-to-Genes.md +8 -9
  72. package/data/zeroheight-exports/Introduction.md +52 -53
  73. package/data/zeroheight-exports/Link.md +50 -37
  74. package/data/zeroheight-exports/Lists.md +78 -63
  75. package/data/zeroheight-exports/Loading-Indicator.md +7 -8
  76. package/data/zeroheight-exports/Navigation.md +163 -142
  77. package/data/zeroheight-exports/Notification.md +132 -102
  78. package/data/zeroheight-exports/Panel.md +231 -115
  79. package/data/zeroheight-exports/Responsive-Design.md +35 -32
  80. package/data/zeroheight-exports/Search-Input.md +9 -10
  81. package/data/zeroheight-exports/Search.md +87 -104
  82. package/data/zeroheight-exports/Segmented-Control.md +68 -45
  83. package/data/zeroheight-exports/Spacing.md +210 -211
  84. package/data/zeroheight-exports/Table.md +414 -302
  85. package/data/zeroheight-exports/Tabs.md +126 -98
  86. package/data/zeroheight-exports/Tags.md +148 -118
  87. package/data/zeroheight-exports/Text-Link.md +32 -33
  88. package/data/zeroheight-exports/Theming.md +48 -29
  89. package/data/zeroheight-exports/Tooltips.md +253 -237
  90. package/data/zeroheight-exports/Typography.md +463 -464
  91. package/dist/stdio.js +44 -132
  92. package/package.json +3 -4
  93. package/data/component-props/Chip.json +0 -73
  94. package/data/component-props/List.json +0 -43
  95. package/data/component-props/Menu.json +0 -48
  96. package/data/component-props/Table.json +0 -26
  97. package/data/component-props-storybook/Accordion-storybook.json +0 -45
  98. package/data/component-props-storybook/Alert-storybook.json +0 -30
  99. package/data/component-props-storybook/Autocomplete-storybook.json +0 -67
  100. package/data/component-props-storybook/Banner-storybook.json +0 -78
  101. package/data/component-props-storybook/Button-storybook.json +0 -115
  102. package/data/component-props-storybook/ButtonDropdown-storybook.json +0 -73
  103. package/data/component-props-storybook/ButtonIcon-storybook.json +0 -60
  104. package/data/component-props-storybook/ButtonToggle-storybook.json +0 -68
  105. package/data/component-props-storybook/Callout-storybook.json +0 -90
  106. package/data/component-props-storybook/CellBasic-storybook.json +0 -138
  107. package/data/component-props-storybook/CellComponent-storybook.json +0 -48
  108. package/data/component-props-storybook/CellHeader-storybook.json +0 -71
  109. package/data/component-props-storybook/Chip-storybook.json +0 -26
  110. package/data/component-props-storybook/ComplexFilter-storybook.json +0 -60
  111. package/data/component-props-storybook/ContentCard-storybook.json +0 -175
  112. package/data/component-props-storybook/Dialog-storybook.json +0 -56
  113. package/data/component-props-storybook/Dropdown-storybook.json +0 -93
  114. package/data/component-props-storybook/DropdownMenu-storybook.json +0 -73
  115. package/data/component-props-storybook/HeatmapChart-storybook.json +0 -55
  116. package/data/component-props-storybook/Icon-storybook.json +0 -75
  117. package/data/component-props-storybook/InputCheckbox-storybook.json +0 -57
  118. package/data/component-props-storybook/InputDropdown-storybook.json +0 -80
  119. package/data/component-props-storybook/InputRadio-storybook.json +0 -56
  120. package/data/component-props-storybook/InputSearch-storybook.json +0 -55
  121. package/data/component-props-storybook/InputSlider-storybook.json +0 -55
  122. package/data/component-props-storybook/InputText-storybook.json +0 -59
  123. package/data/component-props-storybook/InputToggle-storybook.json +0 -42
  124. package/data/component-props-storybook/Link-storybook.json +0 -50
  125. package/data/component-props-storybook/List-storybook.json +0 -26
  126. package/data/component-props-storybook/LoadingIndicator-storybook.json +0 -34
  127. package/data/component-props-storybook/Menu-storybook.json +0 -26
  128. package/data/component-props-storybook/MenuItem-storybook.json +0 -74
  129. package/data/component-props-storybook/MenuSelect-storybook.json +0 -38
  130. package/data/component-props-storybook/NavigationFooter-storybook.json +0 -67
  131. package/data/component-props-storybook/NavigationHeader-storybook.json +0 -115
  132. package/data/component-props-storybook/NavigationJumpTo-storybook.json +0 -41
  133. package/data/component-props-storybook/Notification-storybook.json +0 -89
  134. package/data/component-props-storybook/Pagination-storybook.json +0 -50
  135. package/data/component-props-storybook/Panel-storybook.json +0 -52
  136. package/data/component-props-storybook/SegmentedControl-storybook.json +0 -30
  137. package/data/component-props-storybook/Table-storybook.json +0 -26
  138. package/data/component-props-storybook/TableHeader-storybook.json +0 -26
  139. package/data/component-props-storybook/TableRow-storybook.json +0 -62
  140. package/data/component-props-storybook/Tabs-storybook.json +0 -45
  141. package/data/component-props-storybook/Tag-storybook.json +0 -78
  142. package/data/component-props-storybook/TagFilter-storybook.json +0 -30
  143. package/data/component-props-storybook/Tooltip-storybook.json +0 -85
  144. package/data/component-props-storybook/TooltipCondensed-storybook.json +0 -38
  145. package/data/component-props-storybook/TooltipTable-storybook.json +0 -47
package/data/zeroheight-exports/Icons.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Icons
2
2
 
3
- 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.
3
+ 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.
4
4
 
5
5
  ### Icon Component and Sizes
6
6
 
@@ -11,112 +11,112 @@ The first prop, `sdsIcon`, is the name of the icon to be displayed. It is built
11
11
  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.
12
12
 
13
13
  | **Extra Large** | **Large** | **Small** | **Extra Small** |
14
- | --- | --- | --- | --- |
14
+ | --------------- | --------- | --------- | --------------- |
15
15
 
16
16
  | 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
- | --- | --- | --- | --- |
17
+ | --------------------------- | -------------------------------------------- | ------------------------------------------------------- | ----------------------------------------------------------- |
18
18
 
19
19
  ### Custom Icons
20
20
 
21
21
  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.
22
22
 
23
- | **Visual** | | **SDS Variable** | | **Value** | | **Equivalent Value in sdsSize Prop** |
24
- | --- | --- | --- | --- | --- | --- | --- |
25
- | | | `iconSizeXl` | | `height: 32px` `width: 32px` | | `extraLarge` |
26
- | | | `iconSizeL` | | `height: 24px` `width: 24px` | | `large` |
27
- | | | `iconSizeS` | | `height: 16px` `width: 16px` | | `small` |
28
- | | | `iconSizeXs` | | `height: 12px` `width: 12px` | | `extraSmall` |
23
+ | **Visual** | | **SDS Variable** | | **Value** | | **Equivalent Value in sdsSize Prop** |
24
+ | ---------- | --- | ---------------- | --- | ---------------------------- | --- | ------------------------------------ |
25
+ | | | `iconSizeXl` | | `height: 32px` `width: 32px` | | `extraLarge` |
26
+ | | | `iconSizeL` | | `height: 24px` `width: 24px` | | `large` |
27
+ | | | `iconSizeS` | | `height: 16px` `width: 16px` | | `small` |
28
+ | | | `iconSizeXs` | | `height: 12px` `width: 12px` | | `extraSmall` |
29
29
 
30
30
  ### Icons
31
31
 
32
32
  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.
33
33
 
34
- | **Bacteria** | **Bar Charts** | | |
35
- | --- | --- | --- | --- |
34
+ | **Bacteria** | **Bar Charts** | | |
35
+ | ------------ | -------------- | --- | --- |
36
36
 
37
- | **Book** | **Checks** | | **Chevrons** |
38
- | --- | --- | --- | --- |
37
+ | **Book** | **Checks** | | **Chevrons** |
38
+ | -------- | ---------- | --- | ------------ |
39
39
 
40
- | **Chevrons** | | | |
41
- | --- | --- | --- | --- |
40
+ | **Chevrons** | | | |
41
+ | ------------ | --- | --- | --- |
42
42
 
43
- | **Chevrons** | | | **Circles** |
44
- | --- | --- | --- | --- |
43
+ | **Chevrons** | | | **Circles** |
44
+ | ------------ | --- | --- | ----------- |
45
45
 
46
46
  | **Code** | **Compass** | **Copy** | **Cube** |
47
- | --- | --- | --- | --- |
47
+ | -------- | ----------- | -------- | -------- |
48
48
 
49
49
  | **DNA** | **Document** | **Dots** | **Download** |
50
- | --- | --- | --- | --- |
50
+ | ------- | ------------ | -------- | ------------ |
51
51
 
52
- | **Edit** | **Envelope** | **Exclamation Marks** | |
53
- | --- | --- | --- | --- |
52
+ | **Edit** | **Envelope** | **Exclamation Marks** | |
53
+ | -------- | ------------ | --------------------- | --- |
54
54
 
55
- | **Eyes** | | **Filter** | **Flags** |
56
- | --- | --- | --- | --- |
55
+ | **Eyes** | | **Filter** | **Flags** |
56
+ | -------- | --- | ---------- | --------- |
57
57
 
58
- | **Flags** | | | **Flasks** |
59
- | --- | --- | --- | --- |
58
+ | **Flags** | | | **Flasks** |
59
+ | --------- | --- | --- | ---------- |
60
60
 
61
- | **Flasks** | | **Gear** | **Github** |
62
- | --- | --- | --- | --- |
61
+ | **Flasks** | | **Gear** | **Github** |
62
+ | ---------- | --- | -------- | ---------- |
63
63
 
64
- | **Globes** | | **Grids** | |
65
- | --- | --- | --- | --- |
64
+ | **Globes** | | **Grids** | |
65
+ | ---------- | --- | --------- | --- |
66
66
 
67
- | **Grids** | | **House** | **Info** |
68
- | --- | --- | --- | --- |
67
+ | **Grids** | | **House** | **Info** |
68
+ | --------- | --- | --------- | -------- |
69
69
 
70
70
  | **Info** | **Life Ring** | **Lightbulb** | **Lines** |
71
- | --- | --- | --- | --- |
71
+ | -------- | ------------- | ------------- | --------- |
72
72
 
73
73
  | **Lines** | **Link** | **List** | **Loading** |
74
- | --- | --- | --- | --- |
74
+ | --------- | -------- | -------- | ----------- |
75
75
 
76
- | **Locks** | | **Minus** | **Open** |
77
- | --- | --- | --- | --- |
76
+ | **Locks** | | **Minus** | **Open** |
77
+ | --------- | --- | --------- | -------- |
78
78
 
79
- | **Pause** | **People** | | **Percentage** |
80
- | --- | --- | --- | --- |
79
+ | **Pause** | **People** | | **Percentage** |
80
+ | --------- | ---------- | --- | -------------- |
81
81
 
82
- | **Pins** | | **Play** | **Pluses** |
83
- | --- | --- | --- | --- |
82
+ | **Pins** | | **Play** | **Pluses** |
83
+ | -------- | --- | -------- | ---------- |
84
84
 
85
- | **Pluses** | **Projects** | | **Puzzle Piece** |
86
- | --- | --- | --- | --- |
85
+ | **Pluses** | **Projects** | | **Puzzle Piece** |
86
+ | ---------- | ------------ | --- | ---------------- |
87
87
 
88
- | **Question Marks** | | **Quote** | **Read** |
89
- | --- | --- | --- | --- |
88
+ | **Question Marks** | | **Quote** | **Read** |
89
+ | ------------------ | --- | --------- | -------- |
90
90
 
91
91
  | **Refresh** | **Report** | **Rocket** | **Rotate** |
92
- | --- | --- | --- | --- |
92
+ | ----------- | ---------- | ---------- | ---------- |
93
93
 
94
94
  | **Rotate** | **Save** | **Scale** | **Scatter Plot** |
95
- | --- | --- | --- | --- |
95
+ | ---------- | -------- | --------- | ---------------- |
96
96
 
97
- | **Search** | | **Send** | **Share** |
98
- | --- | --- | --- | --- |
97
+ | **Search** | | **Send** | **Share** |
98
+ | ---------- | --- | -------- | --------- |
99
99
 
100
100
  | **Sliders** | **Speech Bubbles** | **Squares** | **Stars** |
101
- | --- | --- | --- | --- |
101
+ | ----------- | ------------------ | ----------- | --------- |
102
102
 
103
- | **Stars** | **Table** | **Thumbs** | |
104
- | --- | --- | --- | --- |
103
+ | **Stars** | **Table** | **Thumbs** | |
104
+ | --------- | --------- | ---------- | --- |
105
105
 
106
- | **Trash Can** | **Trees** | | |
107
- | --- | --- | --- | --- |
106
+ | **Trash Can** | **Trees** | | |
107
+ | ------------- | --------- | --- | --- |
108
108
 
109
- | **Trees** | | | **Triangles** |
110
- | --- | --- | --- | --- |
109
+ | **Trees** | | | **Triangles** |
110
+ | --------- | --- | --- | ------------- |
111
111
 
112
- | **Triangles** | | | **Update** |
113
- | --- | --- | --- | --- |
112
+ | **Triangles** | | | **Update** |
113
+ | ------------- | --- | --- | ---------- |
114
114
 
115
- | **Upload** | **Viruses** | | **Widget** |
116
- | --- | --- | --- | --- |
115
+ | **Upload** | **Viruses** | | **Widget** |
116
+ | ---------- | ----------- | --- | ---------- |
117
117
 
118
- | **X Marks** | | | |
119
- | --- | --- | --- | --- |
118
+ | **X Marks** | | | |
119
+ | ----------- | --- | --- | --- |
120
120
 
121
121
  ---
122
122
 
@@ -131,97 +131,97 @@ The first prop, `sdsIcon`, is the name of the icon to be displayed. It is built
131
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.
132
132
 
133
133
  | **Extra Large** | **Large** | **Small** | **Extra Small** |
134
- | --- | --- | --- | --- |
134
+ | --------------- | --------- | --------- | --------------- |
135
135
 
136
136
  | Used only for Icon Buttons. | Buttons and Tags | Dropdown Input and Search Inputs | Checkbox Inputs, Tags, Menu Items |
137
- | --- | --- | --- | --- |
137
+ | --------------------------- | ---------------- | -------------------------------- | --------------------------------- |
138
138
 
139
139
  ### Custom Icons
140
140
 
141
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.
142
142
 
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` |
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` |
149
149
 
150
150
  ### Icons
151
151
 
152
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.
153
153
 
154
- | **Bacteria** | **Bar Charts** | | |
155
- | --- | --- | --- | --- |
154
+ | **Bacteria** | **Bar Charts** | | |
155
+ | ------------ | -------------- | --- | --- |
156
156
 
157
- | **Book** | **Checks** | | **Chevrons** |
158
- | --- | --- | --- | --- |
157
+ | **Book** | **Checks** | | **Chevrons** |
158
+ | -------- | ---------- | --- | ------------ |
159
159
 
160
- | **Chevrons** | | | |
161
- | --- | --- | --- | --- |
160
+ | **Chevrons** | | | |
161
+ | ------------ | --- | --- | --- |
162
162
 
163
- | **Chevrons** | **Circles** | **Code** | **Copy** |
164
- | --- | --- | --- | --- |
163
+ | **Chevrons** | **Circles** | **Code** | **Copy** |
164
+ | ------------ | ----------- | -------- | -------- |
165
165
 
166
166
  | **Copy** | **Cube** | **DNA** | **Document** |
167
- | --- | --- | --- | --- |
167
+ | -------- | -------- | ------- | ------------ |
168
168
 
169
169
  | **Dots** | **Download** | **Edit** | **Exclamation Marks** |
170
- | --- | --- | --- | --- |
170
+ | -------- | ------------ | -------- | --------------------- |
171
171
 
172
- | **Exclamation Marks** | **Eyes** | | **Filter** |
173
- | --- | --- | --- | --- |
172
+ | **Exclamation Marks** | **Eyes** | | **Filter** |
173
+ | --------------------- | -------- | --- | ---------- |
174
174
 
175
- | **Flags** | | | |
176
- | --- | --- | --- | --- |
175
+ | **Flags** | | | |
176
+ | --------- | --- | --- | --- |
177
177
 
178
- | **Flasks** | | | **Gear** |
179
- | --- | --- | --- | --- |
178
+ | **Flasks** | | | **Gear** |
179
+ | ---------- | --- | --- | -------- |
180
180
 
181
- | **Globes** | | **Grids** | |
182
- | --- | --- | --- | --- |
181
+ | **Globes** | | **Grids** | |
182
+ | ---------- | --- | --------- | --- |
183
183
 
184
- | **Grids** | **House** | **Info** | |
185
- | --- | --- | --- | --- |
184
+ | **Grids** | **House** | **Info** | |
185
+ | --------- | --------- | -------- | --- |
186
186
 
187
- | **Life Ring** | **Lightbulb** | **Lines** | |
188
- | --- | --- | --- | --- |
187
+ | **Life Ring** | **Lightbulb** | **Lines** | |
188
+ | ------------- | ------------- | --------- | --- |
189
189
 
190
190
  | **Link** | **List** | **Loading** | **Locks** |
191
- | --- | --- | --- | --- |
191
+ | -------- | -------- | ----------- | --------- |
192
192
 
193
193
  | **Locks** | **Minus** | **Open** | **People** |
194
- | --- | --- | --- | --- |
194
+ | --------- | --------- | -------- | ---------- |
195
195
 
196
- | **Person** | **Percentage** | **Pins** | |
197
- | --- | --- | --- | --- |
196
+ | **Person** | **Percentage** | **Pins** | |
197
+ | ---------- | -------------- | -------- | --- |
198
198
 
199
- | **Play** | **Pluses** | | **Projects** |
200
- | --- | --- | --- | --- |
199
+ | **Play** | **Pluses** | | **Projects** |
200
+ | -------- | ---------- | --- | ------------ |
201
201
 
202
202
  | **Projects** | **Puzzle Piece** | **Question Mark** | **Quote** |
203
- | --- | --- | --- | --- |
203
+ | ------------ | ---------------- | ----------------- | --------- |
204
204
 
205
- | **Refresh** | **Save** | **Search** | |
206
- | --- | --- | --- | --- |
205
+ | **Refresh** | **Save** | **Search** | |
206
+ | ----------- | -------- | ---------- | --- |
207
207
 
208
208
  | **Share** | **Sliders** | **Speech Bubbles** | **Squares** |
209
- | --- | --- | --- | --- |
209
+ | --------- | ----------- | ------------------ | ----------- |
210
210
 
211
- | **Stars** | | **Table** | **Trash Can** |
212
- | --- | --- | --- | --- |
211
+ | **Stars** | | **Table** | **Trash Can** |
212
+ | --------- | --- | --------- | ------------- |
213
213
 
214
- | **Trees** | | | |
215
- | --- | --- | --- | --- |
214
+ | **Trees** | | | |
215
+ | --------- | --- | --- | --- |
216
216
 
217
- | **Trees** | | **Triangles** | |
218
- | --- | --- | --- | --- |
217
+ | **Trees** | | **Triangles** | |
218
+ | --------- | --- | ------------- | --- |
219
219
 
220
- | **Triangles** | | **Upload** | **Viruses** |
221
- | --- | --- | --- | --- |
220
+ | **Triangles** | | **Upload** | **Viruses** |
221
+ | ------------- | --- | ---------- | ----------- |
222
222
 
223
- | **Viruses** | **Xmarks** | | |
224
- | --- | --- | --- | --- |
223
+ | **Viruses** | **Xmarks** | | |
224
+ | ----------- | ---------- | --- | --- |
225
225
 
226
226
  ---
227
227
 
@@ -236,94 +236,94 @@ The first prop, `sdsIcon`, is the name of the icon to be displayed. It is built
236
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.
237
237
 
238
238
  | **Extra Large** | **Large** | **Small** | **Extra Small** |
239
- | --- | --- | --- | --- |
239
+ | --------------- | --------- | --------- | --------------- |
240
240
 
241
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
- | --- | --- | --- | --- |
242
+ | --------------------------- | -------------------------------------------- | ------------------------------------------------------- | ----------------------------------------------------------- |
243
243
 
244
244
  ### Custom Icons
245
245
 
246
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.
247
247
 
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` |
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` |
254
254
 
255
255
  ### Icons
256
256
 
257
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.
258
258
 
259
- | **Bacteria** | **Bar Charts** | | |
260
- | --- | --- | --- | --- |
259
+ | **Bacteria** | **Bar Charts** | | |
260
+ | ------------ | -------------- | --- | --- |
261
261
 
262
- | **Book** | **Checks** | | **Chevrons** |
263
- | --- | --- | --- | --- |
262
+ | **Book** | **Checks** | | **Chevrons** |
263
+ | -------- | ---------- | --- | ------------ |
264
264
 
265
- | **Chevrons** | | | **Circles** |
266
- | --- | --- | --- | --- |
265
+ | **Chevrons** | | | **Circles** |
266
+ | ------------ | --- | --- | ----------- |
267
267
 
268
268
  | **Compass** | **Copy** | **DNA** | **Document** |
269
- | --- | --- | --- | --- |
269
+ | ----------- | -------- | ------- | ------------ |
270
270
 
271
271
  | **Dots** | **Download** | **Edit** | **Exclamation Marks** |
272
- | --- | --- | --- | --- |
272
+ | -------- | ------------ | -------- | --------------------- |
273
273
 
274
- | **Exclamation Marks** | **Eyes** | | **Filter** |
275
- | --- | --- | --- | --- |
274
+ | **Exclamation Marks** | **Eyes** | | **Filter** |
275
+ | --------------------- | -------- | --- | ---------- |
276
276
 
277
- | **Flags** | | | |
278
- | --- | --- | --- | --- |
277
+ | **Flags** | | | |
278
+ | --------- | --- | --- | --- |
279
279
 
280
- | **Flasks** | | | **Gear** |
281
- | --- | --- | --- | --- |
280
+ | **Flasks** | | | **Gear** |
281
+ | ---------- | --- | --- | -------- |
282
282
 
283
- | **Globes** | | **Grids** | |
284
- | --- | --- | --- | --- |
283
+ | **Globes** | | **Grids** | |
284
+ | ---------- | --- | --------- | --- |
285
285
 
286
- | **Grids** | **House** | **Info** | |
287
- | --- | --- | --- | --- |
286
+ | **Grids** | **House** | **Info** | |
287
+ | --------- | --------- | -------- | --- |
288
288
 
289
- | **Life Ring** | **Lightbulb** | **Lines** | |
290
- | --- | --- | --- | --- |
289
+ | **Life Ring** | **Lightbulb** | **Lines** | |
290
+ | ------------- | ------------- | --------- | --- |
291
291
 
292
292
  | **Link** | **List** | **Loading** | **Locks** |
293
- | --- | --- | --- | --- |
293
+ | -------- | -------- | ----------- | --------- |
294
294
 
295
295
  | **Locks** | **Minus** | **Open** | **People** |
296
- | --- | --- | --- | --- |
296
+ | --------- | --------- | -------- | ---------- |
297
297
 
298
- | **People** | **Percentage** | **Pins** | |
299
- | --- | --- | --- | --- |
298
+ | **People** | **Percentage** | **Pins** | |
299
+ | ---------- | -------------- | -------- | --- |
300
300
 
301
- | **Play** | **Pluses** | | **Projects** |
302
- | --- | --- | --- | --- |
301
+ | **Play** | **Pluses** | | **Projects** |
302
+ | -------- | ---------- | --- | ------------ |
303
303
 
304
304
  | **Projects** | **Puzzle Piece** | **Question Mark** | **Refresh** |
305
- | --- | --- | --- | --- |
305
+ | ------------ | ---------------- | ----------------- | ----------- |
306
306
 
307
- | **Save** | **Search** | | **Share** |
308
- | --- | --- | --- | --- |
307
+ | **Save** | **Search** | | **Share** |
308
+ | -------- | ---------- | --- | --------- |
309
309
 
310
310
  | **Sliders** | **Speech Bubbles** | **Squares** | **Stars** |
311
- | --- | --- | --- | --- |
311
+ | ----------- | ------------------ | ----------- | --------- |
312
312
 
313
313
  | **Stars** | **Table** | **Trash Can** | **Trees** |
314
- | --- | --- | --- | --- |
314
+ | --------- | --------- | ------------- | --------- |
315
315
 
316
- | **Trees** | | | |
317
- | --- | --- | --- | --- |
316
+ | **Trees** | | | |
317
+ | --------- | --- | --- | --- |
318
318
 
319
- | **Trees** | **Triangles** | | |
320
- | --- | --- | --- | --- |
319
+ | **Trees** | **Triangles** | | |
320
+ | --------- | ------------- | --- | --- |
321
321
 
322
322
  | **Triangles** | **Upload** | **Virus** | **Xmarks** |
323
- | --- | --- | --- | --- |
323
+ | ------------- | ---------- | --------- | ---------- |
324
324
 
325
- | **Xmarks** | | | |
326
- | --- | --- | --- | --- |
325
+ | **Xmarks** | | | |
326
+ | ---------- | --- | --- | --- |
327
327
 
328
328
  ---
329
329
 
@@ -338,95 +338,94 @@ The first prop, `sdsIcon`, is the name of the icon to be displayed. It is built
338
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.
339
339
 
340
340
  | **Extra Large** | **Large** | **Small** | **Extra Small** |
341
- | --- | --- | --- | --- |
341
+ | --------------- | --------- | --------- | --------------- |
342
342
 
343
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
- | --- | --- | --- | --- |
344
+ | --------------------------- | -------------------------------------------- | ------------------------------------------------------- | ----------------------------------------------------------- |
345
345
 
346
346
  ### Custom Icons
347
347
 
348
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.
349
349
 
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` |
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` |
356
356
 
357
357
  ### Icons
358
358
 
359
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.
360
360
 
361
- | **Bacteria** | **Bar Charts** | | |
362
- | --- | --- | --- | --- |
361
+ | **Bacteria** | **Bar Charts** | | |
362
+ | ------------ | -------------- | --- | --- |
363
363
 
364
- | **Book** | **Checks** | | **Chevrons** |
365
- | --- | --- | --- | --- |
364
+ | **Book** | **Checks** | | **Chevrons** |
365
+ | -------- | ---------- | --- | ------------ |
366
366
 
367
- | **Chevrons** | | | |
368
- | --- | --- | --- | --- |
367
+ | **Chevrons** | | | |
368
+ | ------------ | --- | --- | --- |
369
369
 
370
370
  | **Chevrons** | **Circles** | **Code** | **Compass** |
371
- | --- | --- | --- | --- |
371
+ | ------------ | ----------- | -------- | ----------- |
372
372
 
373
373
  | **Copy** | **Cube** | **DNA** | **Document** |
374
- | --- | --- | --- | --- |
374
+ | -------- | -------- | ------- | ------------ |
375
375
 
376
376
  | **Dots** | **Download** | **Edit** | **Exclamation Marks** |
377
- | --- | --- | --- | --- |
377
+ | -------- | ------------ | -------- | --------------------- |
378
378
 
379
- | **Exclamation Marks** | **Eyes** | | **Filter** |
380
- | --- | --- | --- | --- |
379
+ | **Exclamation Marks** | **Eyes** | | **Filter** |
380
+ | --------------------- | -------- | --- | ---------- |
381
381
 
382
- | **Flags** | | | |
383
- | --- | --- | --- | --- |
382
+ | **Flags** | | | |
383
+ | --------- | --- | --- | --- |
384
384
 
385
- | **Flasks** | | | **Gear** |
386
- | --- | --- | --- | --- |
385
+ | **Flasks** | | | **Gear** |
386
+ | ---------- | --- | --- | -------- |
387
387
 
388
- | **Globes** | | **Grids** | |
389
- | --- | --- | --- | --- |
388
+ | **Globes** | | **Grids** | |
389
+ | ---------- | --- | --------- | --- |
390
390
 
391
- | **Grids** | **House** | **Info** | |
392
- | --- | --- | --- | --- |
391
+ | **Grids** | **House** | **Info** | |
392
+ | --------- | --------- | -------- | --- |
393
393
 
394
- | **Life Ring** | **Lightbulb** | **Lines** | |
395
- | --- | --- | --- | --- |
394
+ | **Life Ring** | **Lightbulb** | **Lines** | |
395
+ | ------------- | ------------- | --------- | --- |
396
396
 
397
397
  | **Link** | **List** | **Loading** | **Locks** |
398
- | --- | --- | --- | --- |
398
+ | -------- | -------- | ----------- | --------- |
399
399
 
400
400
  | **Locks** | **Minus** | **Open** | **People** |
401
- | --- | --- | --- | --- |
401
+ | --------- | --------- | -------- | ---------- |
402
402
 
403
- | **Person** | **Percentage** | **Pins** | |
404
- | --- | --- | --- | --- |
403
+ | **Person** | **Percentage** | **Pins** | |
404
+ | ---------- | -------------- | -------- | --- |
405
405
 
406
- | **Play** | **Pluses** | | **Puzzle Piece** |
407
- | --- | --- | --- | --- |
406
+ | **Play** | **Pluses** | | **Puzzle Piece** |
407
+ | -------- | ---------- | --- | ---------------- |
408
408
 
409
409
  | **Projects** | **Puzzle Piece** | **Question Mark** | **Quote** |
410
- | --- | --- | --- | --- |
410
+ | ------------ | ---------------- | ----------------- | --------- |
411
411
 
412
- | **Refresh** | **Save** | **Search** | |
413
- | --- | --- | --- | --- |
412
+ | **Refresh** | **Save** | **Search** | |
413
+ | ----------- | -------- | ---------- | --- |
414
414
 
415
415
  | **Share** | **Sliders** | **Speech Bubbles** | **Squares** |
416
- | --- | --- | --- | --- |
417
-
418
- | **Stars** | | **Tables** | **Trash Can** |
419
- | --- | --- | --- | --- |
416
+ | --------- | ----------- | ------------------ | ----------- |
420
417
 
421
- | **Trees** | | | |
422
- | --- | --- | --- | --- |
418
+ | **Stars** | | **Tables** | **Trash Can** |
419
+ | --------- | --- | ---------- | ------------- |
423
420
 
424
- | **Trees** | | **Triangles** | |
425
- | --- | --- | --- | --- |
421
+ | **Trees** | | | |
422
+ | --------- | --- | --- | --- |
426
423
 
427
- | **Triangles** | | **Upload** | **Viruses** |
428
- | --- | --- | --- | --- |
424
+ | **Trees** | | **Triangles** | |
425
+ | --------- | --- | ------------- | --- |
429
426
 
430
- | **Viruses** | **Xmarks** | | |
431
- | --- | --- | --- | --- |
427
+ | **Triangles** | | **Upload** | **Viruses** |
428
+ | ------------- | --- | ---------- | ----------- |
432
429
 
430
+ | **Viruses** | **Xmarks** | | |
431
+ | ----------- | ---------- | --- | --- |