@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
@@ -6,16 +6,16 @@ Search is a flexible way for users to find data of interest or filter down their
6
6
 
7
7
  ## Search Flow Types
8
8
 
9
- | There are three general flow patterns recommended when considering adding search or filter functionality to products. Each of these follows the same four basic steps: 1. User types in a keyword 2. Search is initiated 3. Results are displayed 4. User takes action on the results Although the general steps followed are universal, the implementation choices made on how each step is accomplished, most notably how the results are displayed, are what differentiate each flow type. | | **Jump to flow type:** On-page Results flow Results Page flow |
10
- | --- | --- | --- |
9
+ | There are three general flow patterns recommended when considering adding search or filter functionality to products. Each of these follows the same four basic steps: 1. User types in a keyword 2. Search is initiated 3. Results are displayed 4. User takes action on the results Although the general steps followed are universal, the implementation choices made on how each step is accomplished, most notably how the results are displayed, are what differentiate each flow type. | | **Jump to flow type:** On-page Results flow Results Page flow |
10
+ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ------------------------------------------------------------- |
11
11
 
12
12
  ### Flow Types
13
13
 
14
- | **On-page Results** | | **Results Page** |
15
- | --- | --- | --- |
14
+ | **On-page Results** | | **Results Page** |
15
+ | ------------------- | --- | ---------------- |
16
16
 
17
- | The content on the page automatically updates to reflect the search result. | | The results of the search are displayed on a separate "search results" page. |
18
- | --- | --- | --- |
17
+ | The content on the page automatically updates to reflect the search result. | | The results of the search are displayed on a separate "search results" page. |
18
+ | --------------------------------------------------------------------------- | --- | ---------------------------------------------------------------------------- |
19
19
 
20
20
  ---
21
21
 
@@ -23,23 +23,21 @@ Search is a flexible way for users to find data of interest or filter down their
23
23
 
24
24
  Search results are displayed on the current page by filtering down the visible content within the searchable area(s) to show matches only. This search is the most common pattern; it is used both at the component and the page levels.
25
25
 
26
-  
26
+
27
27
 
28
28
  ---
29
29
 
30
30
  #### 1. User types keyword into Search Input
31
31
 
32
- It is recommended to position your Search Input at the top level of the content the user will be searching.
32
+ It is recommended to position your Search Input at the top level of the content the user will be searching.
33
33
 
34
- For example, if the search will display results for a list of plugins (1), position the Search Input at the top of the list (2).
34
+ For example, if the search will display results for a list of plugins (1), position the Search Input at the top of the list (2).
35
35
 
36
36
  #### **2. Search Initiated by User**
37
37
 
38
- Search is initiated when the user clicks a button, hits “enter”, or completes some other user action.
39
-
40
- This method is recommended when search results must be fetched from the backend, or when the user needs to set up other specifications before initiating the search.
38
+ Search is initiated when the user clicks a button, hits “enter”, or completes some other user action.
41
39
 
42
-  
40
+ This method is recommended when search results must be fetched from the backend, or when the user needs to set up other specifications before initiating the search.
43
41
 
44
42
 
45
43
 
@@ -53,10 +51,10 @@ If there are no results, it is recommended that a “No Results” blank state i
53
51
 
54
52
  Depending on the product and the user’s workflow, users may take a number of next actions on the results, possibly including:
55
53
 
56
- * Refine search results (1); re-starts this flow.
57
- * Sort search results (2).
58
- * Filter search results (3).
59
- * Interact with results, such as selecting a single result (4).
54
+ - Refine search results (1); re-starts this flow.
55
+ - Sort search results (2).
56
+ - Filter search results (3).
57
+ - Interact with results, such as selecting a single result (4).
60
58
 
61
59
  ---
62
60
 
@@ -64,7 +62,7 @@ Depending on the product and the user’s workflow, users may take a number of n
64
62
 
65
63
  Below are links to example use cases where we recommend using an On-page Results flow:
66
64
 
67
- * Search within a Dropdown Menu
65
+ - Search within a Dropdown Menu
68
66
 
69
67
  ### Technical Considerations
70
68
 
@@ -72,8 +70,8 @@ It is recommended to discuss any search approach under consideration with the en
72
70
 
73
71
  That being said, for the On-page Results flow, keep in mind:
74
72
 
75
- * This approach is impacted by whether the search is done on the frontend or the backend. If search is slow and has to be done on the backend, consider using the Results Page flow type instead.
76
- * Paginated vs infinite scrolling results may have an impact on the search flow options available.
73
+ - This approach is impacted by whether the search is done on the frontend or the backend. If search is slow and has to be done on the backend, consider using the Results Page flow type instead.
74
+ - Paginated vs infinite scrolling results may have an impact on the search flow options available.
77
75
 
78
76
  ---
79
77
 
@@ -81,7 +79,7 @@ That being said, for the On-page Results flow, keep in mind:
81
79
 
82
80
  Search results are displayed on a different page than where the search was originally initiated. Depending on the use case, this may be a unique “Results” page, or an existing page where the data is usually located. The Results Page flow is often combined with the On-page Results flow. Learn more about Combining Search Types.
83
81
 
84
-  
82
+
85
83
 
86
84
  ---
87
85
 
@@ -91,7 +89,7 @@ It is recommended to position Search Inputs at the top level of the content the
91
89
 
92
90
  For example, if the search will display results from across the whole site (1), position the Search Input in a top-level navigation or outside of the page content hierarchy (2).
93
91
 
94
-  
92
+
95
93
 
96
94
  #### 2. **Search Initiated by User**
97
95
 
@@ -99,7 +97,7 @@ Search is initiated when the user clicks a button (1), hits “enter” (2), or
99
97
 
100
98
  Because results will be displayed on a new page, Live Search is not recommended.
101
99
 
102
-  
100
+
103
101
 
104
102
  #### 3. Results Displayed on the Results page
105
103
 
@@ -109,17 +107,17 @@ The results page format depends on the product's use case and content. In the ex
109
107
 
110
108
  If there are no results, it is recommended to display a bank state on the results page.
111
109
 
112
-  
110
+
113
111
 
114
112
  #### 4. User Takes Action on Results
115
113
 
116
114
  Depending on the product and the user’s workflow, they may take a number of next actions on the results, possibly including:
117
115
 
118
- * Refine search results (1). It is recommended to use the On-Page Results flow type; see Combining Flow Types.
119
- * Interact with results, like drilling down into a single result (2) .
120
- * Filter or Sort Results.
116
+ - Refine search results (1). It is recommended to use the On-Page Results flow type; see Combining Flow Types.
117
+ - Interact with results, like drilling down into a single result (2) .
118
+ - Filter or Sort Results.
119
+
121
120
 
122
-  
123
121
 
124
122
  ---
125
123
 
@@ -127,7 +125,7 @@ Depending on the product and the user’s workflow, they may take a number of ne
127
125
 
128
126
  It is recommended to discuss any search approach under consideration with the engineering team to better understand the technical parameters the product can support.
129
127
 
130
- That being said, for the Results Page flow type, keep in mind that this approach has the best performance when the search is performed on the backend. 
128
+ That being said, for the Results Page flow type, keep in mind that this approach has the best performance when the search is performed on the backend.
131
129
 
132
130
  ## Example Use Cases
133
131
 
@@ -143,8 +141,8 @@ The following behaviors are recommended for displaying search results within a D
143
141
 
144
142
  ## Other Considerations
145
143
 
146
- | Search is a complex component, and is highly subjective to each product's use case. While it's impossible to support and document every use case, here is a collection of patterns that may be useful to consider when implementing it. The patterns detailed below have not been developed by the SDS team and are simply examples pulled from products that utilize the SDS components. | | **Jump to pattern:** Combining Search Types Supporting User Behavior |
147
- | --- | --- | --- |
144
+ | Search is a complex component, and is highly subjective to each product's use case. While it's impossible to support and document every use case, here is a collection of patterns that may be useful to consider when implementing it. The patterns detailed below have not been developed by the SDS team and are simply examples pulled from products that utilize the SDS components. | | **Jump to pattern:** Combining Search Types Supporting User Behavior |
145
+ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | -------------------------------------------------------------------- |
148
146
 
149
147
  ---
150
148
 
@@ -187,7 +185,7 @@ Search results are displayed on the current page by filtering down the visible c
187
185
 
188
186
  It is recommended to position the Search Input at the top level of the content the user will be searching within.
189
187
 
190
- For example, if the search will display results for a single Table (1), position the Search Input at the top of the table (2). 
188
+ For example, if the search will display results for a single Table (1), position the Search Input at the top of the table (2).
191
189
 
192
190
  #### **2A. Search Initiated Automatically (Live Search)**
193
191
 
@@ -195,15 +193,11 @@ Otherwise known as "Live Search," as the user types, the app automatically initi
195
193
 
196
194
  This method is recommended in most cases of the On-page Results flow if implementation will allow it. This may not be a feasible solution if the product's search results are paginated.
197
195
 
198
-
199
-
200
196
  #### **2B. Search Initiated by User**
201
197
 
202
198
  Search is initiated when the user clicks a button, hits “enter”, or completes some other user action.
203
199
 
204
- This method is recommended when search results must be fetched from the backend, or when the user needs to set up other specifications before initiating the search. 
205
-
206
-
200
+ This method is recommended when search results must be fetched from the backend, or when the user needs to set up other specifications before initiating the search.
207
201
 
208
202
  #### **3. Results Displayed in Searched Content Area**
209
203
 
@@ -211,16 +205,16 @@ Results are displayed by filtering the content in the searchable area (1) so tha
211
205
 
212
206
  If there are no results, it is recommended that a “No Results” blank state is displayed in the content area instead.
213
207
 
214
-  
208
+
215
209
 
216
210
  **4. User Takes Action on Results**
217
211
 
218
212
  Depending on the product and the user’s workflow, users may take a number of next actions on the results, possibly including:
219
213
 
220
- * Refine search results (1); re-starts this flow.
221
- * Filter search results (2).
222
- * Sort search results (3).
223
- * Interact with results, like drilling down into a single result, performing actions upon results, etc. (4).
214
+ - Refine search results (1); re-starts this flow.
215
+ - Filter search results (2).
216
+ - Sort search results (3).
217
+ - Interact with results, like drilling down into a single result, performing actions upon results, etc. (4).
224
218
 
225
219
  ---
226
220
 
@@ -228,7 +222,7 @@ Depending on the product and the user’s workflow, users may take a number of n
228
222
 
229
223
  Below are links to example use cases where we recommend using an On-page Results flow:
230
224
 
231
- * Search within a Dropdown Menu
225
+ - Search within a Dropdown Menu
232
226
 
233
227
  ### Technical Considerations
234
228
 
@@ -262,18 +256,18 @@ Search is a flexible way for users to find data of interest or filter down their
262
256
 
263
257
  ## Search Flow Types
264
258
 
265
- | There are two general flow patterns recommended when considering adding search or filter functionality to products. Both of these follow the same four basic steps: 1. User types in a keyword 2. Search is initiated 3. Results are displayed 4. User takes action on the results Although the general steps followed are universal, the implementation choices made on how each step is accomplished, most notably how the results are displayed, are what differentiate each flow type. | | **Jump to type:** On-page Results flow Results Dropdown flow |
266
- | --- | --- | --- |
259
+ | There are two general flow patterns recommended when considering adding search or filter functionality to products. Both of these follow the same four basic steps: 1. User types in a keyword 2. Search is initiated 3. Results are displayed 4. User takes action on the results Although the general steps followed are universal, the implementation choices made on how each step is accomplished, most notably how the results are displayed, are what differentiate each flow type. | | **Jump to type:** On-page Results flow Results Dropdown flow |
260
+ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --- | ------------------------------------------------------------ |
267
261
 
268
262
  ---
269
263
 
270
264
  ### Flow Types
271
265
 
272
- | **On-page Results** | | **Results Dropdown** |
273
- | --- | --- | --- |
266
+ | **On-page Results** | | **Results Dropdown** |
267
+ | ------------------- | --- | -------------------- |
274
268
 
275
- | The content on the page automatically updates to reflect the search result. | | The results of the search are Menu Items in a Dropdown Menu for the user to select from. |
276
- | --- | --- | --- |
269
+ | The content on the page automatically updates to reflect the search result. | | The results of the search are Menu Items in a Dropdown Menu for the user to select from. |
270
+ | --------------------------------------------------------------------------- | --- | ---------------------------------------------------------------------------------------- |
277
271
 
278
272
  ---
279
273
 
@@ -295,8 +289,6 @@ Search is initiated when the user clicks a button, hits “enter”, or complete
295
289
 
296
290
  This method is recommended when search results must be fetched from the backend, or when the user needs to set up other specifications before initiating the search.
297
291
 
298
-
299
-
300
292
  #### **3. Results Displayed in Searched Content Area**
301
293
 
302
294
  Results are displayed by filtering the content in the searchable area (1) so that only search results are visible.
@@ -307,10 +299,10 @@ If there are no results, it is recommended that a “No Results” blank state i
307
299
 
308
300
  Depending on the product and the user’s workflow, users may take a number of next actions on the results, possibly including:
309
301
 
310
- * Refine search results (1); re-starts this flow.
311
- * Filter search results (2).
312
- * Sort search results (3).
313
- * Interact with results, like drilling down into a single result, performing actions upon results, etc. (4).
302
+ - Refine search results (1); re-starts this flow.
303
+ - Filter search results (2).
304
+ - Sort search results (3).
305
+ - Interact with results, like drilling down into a single result, performing actions upon results, etc. (4).
314
306
 
315
307
  ---
316
308
 
@@ -318,7 +310,7 @@ Depending on the product and the user’s workflow, users may take a number of n
318
310
 
319
311
  Below are links to example use cases where we recommend using an On-page Results flow:
320
312
 
321
- * Search within a Dropdown Menu
313
+ - Search within a Dropdown Menu
322
314
 
323
315
  ### Technical Considerations
324
316
 
@@ -346,8 +338,6 @@ As the user types, the app automatically initiates the search with each keystrok
346
338
 
347
339
  It is not recommended for user action to initiate search for this flow type.
348
340
 
349
-
350
-
351
341
  #### **3. Results Displayed in Dropdown**
352
342
 
353
343
  Instead of updating the searched content area, results are displayed in a Dropdown Menu below the Search Input (1).
@@ -358,9 +348,9 @@ If there are no results, it is recommended to display a bank state in the Dropdo
358
348
 
359
349
  Depending on the product and the user’s workflow, they may take a number of next actions on the results, possibly including:
360
350
 
361
- * Refine search results (1); re-starts this flow.
362
- * Interact with results, such as drilling down into a single result (2) .
363
- * Initiate a different type of search flow. For example, the user clicks “enter” to filter page by search keyword (3). See Combining Search Types section to learn more.
351
+ - Refine search results (1); re-starts this flow.
352
+ - Interact with results, such as drilling down into a single result (2) .
353
+ - Initiate a different type of search flow. For example, the user clicks “enter” to filter page by search keyword (3). See Combining Search Types section to learn more.
364
354
 
365
355
  ## Example Use Cases
366
356
 
@@ -374,12 +364,12 @@ When searching the Menu Items within a Dropdown Menu, it is recommended to use t
374
364
 
375
365
  The following behaviors are recommended for displaying search results within a Dropdown Menu.
376
366
 
377
-  
367
+
378
368
 
379
369
  ## Other Considerations
380
370
 
381
- | Search is a complex component, and is highly subjective to each product's use case. While it's impossible to support and document every use case, here is a collection of patterns that may be useful to consider when implementing it. The patterns detailed below have not been developed by the SDS team and are simply examples pulled from products that utilize the SDS components. **Please consider the information in this section as inspiration only.** | | **Jump to pattern:** Combining Search Types Supporting User Behavior |
382
- | --- | --- | --- |
371
+ | Search is a complex component, and is highly subjective to each product's use case. While it's impossible to support and document every use case, here is a collection of patterns that may be useful to consider when implementing it. The patterns detailed below have not been developed by the SDS team and are simply examples pulled from products that utilize the SDS components. **Please consider the information in this section as inspiration only.** | | **Jump to pattern:** Combining Search Types Supporting User Behavior |
372
+ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --- | -------------------------------------------------------------------- |
383
373
 
384
374
  ---
385
375
 
@@ -405,16 +395,16 @@ Search is a flexible way for users to find data of interest or filter down their
405
395
 
406
396
  ## Search Flow Types
407
397
 
408
- | There are three general flow patterns recommended when considering adding search or filter functionality to products. Each of these follows the same four basic steps: 1. User types in a keyword 2. Search is initiated 3. Results are displayed 4. User takes action on the results Although the general steps followed are universal, the implementation choices made on how each step is accomplished, most notably how the results are displayed, are what differentiate each flow type. | | **Jump to flow type:** On-page Results flow Results Dropdown flow Results Page flow |
409
- | --- | --- | --- |
398
+ | There are three general flow patterns recommended when considering adding search or filter functionality to products. Each of these follows the same four basic steps: 1. User types in a keyword 2. Search is initiated 3. Results are displayed 4. User takes action on the results Although the general steps followed are universal, the implementation choices made on how each step is accomplished, most notably how the results are displayed, are what differentiate each flow type. | | **Jump to flow type:** On-page Results flow Results Dropdown flow Results Page flow |
399
+ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ----------------------------------------------------------------------------------- |
410
400
 
411
401
  ### Flow Types
412
402
 
413
403
  | **On-page Results** | **Results Dropdown** | **Results Page** |
414
- | --- | --- | --- |
404
+ | ------------------- | -------------------- | ---------------- |
415
405
 
416
406
  | The content on the page automatically updates to reflect the search result. | The results of the search are Menu Items in a Dropdown Menu for the user to select from. | The results of the search are displayed on a separate "search results" page. |
417
- | --- | --- | --- |
407
+ | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
418
408
 
419
409
  ---
420
410
 
@@ -430,9 +420,9 @@ The example flow below uses CZ GEN EPI to show the on-page refresh of content th
430
420
 
431
421
  #### 1. User types keyword into Search Input
432
422
 
433
- It is recommended to position the Search Input at the top level of the content the user will be searching within.
423
+ It is recommended to position the Search Input at the top level of the content the user will be searching within.
434
424
 
435
- For example, if the search will display results for a single Table (1), position the Search Input at the top of the table (2).
425
+ For example, if the search will display results for a single Table (1), position the Search Input at the top of the table (2).
436
426
 
437
427
  #### 2A. Search Initiated Automatically (Live Search)
438
428
 
@@ -440,30 +430,26 @@ Otherwise known as "Live Search," as the user types, the app automatically initi
440
430
 
441
431
  This method is recommended in most cases of the On-page Results flow if implementation will allow it. This may not be a feasible solution if the product's search results are paginated.
442
432
 
443
-
444
-
445
433
  #### **2B. Search Initiated by User**
446
434
 
447
- Search is initiated when the user clicks a button, hits “enter”, or completes some other user action.
435
+ Search is initiated when the user clicks a button, hits “enter”, or completes some other user action.
448
436
 
449
437
  This method is recommended when search results must be fetched from the backend, or when the user needs to set up other specifications before initiating the search.
450
438
 
451
-
452
-
453
439
  #### **3.** Results Displayed in Searched Content Area
454
440
 
455
- Results are displayed by filtering the content in the searchable area (1) so that only search results are visible.
441
+ Results are displayed by filtering the content in the searchable area (1) so that only search results are visible.
456
442
 
457
- If there are no results, it is recommended that a “No Results” blank state is displayed in the content area instead.
443
+ If there are no results, it is recommended that a “No Results” blank state is displayed in the content area instead.
458
444
 
459
445
  #### 4. User Takes Action on Results
460
446
 
461
447
  Depending on the product and the user’s workflow, users may take a number of next actions on the results, possibly including:
462
448
 
463
- * Refine search results (1); re-starts this flow.
464
- * Filter search results (2).
465
- * Sort search results (3).
466
- * Interact with results, like drilling down into a single result, performing actions upon results, etc. (4).
449
+ - Refine search results (1); re-starts this flow.
450
+ - Filter search results (2).
451
+ - Sort search results (3).
452
+ - Interact with results, like drilling down into a single result, performing actions upon results, etc. (4).
467
453
 
468
454
  ---
469
455
 
@@ -471,7 +457,7 @@ Depending on the product and the user’s workflow, users may take a number of n
471
457
 
472
458
  Below are links to example use cases where we recommend using an On-page Results flow:
473
459
 
474
- * Search within a Dropdown Menu
460
+ - Search within a Dropdown Menu
475
461
 
476
462
  ### Technical Considerations
477
463
 
@@ -479,14 +465,14 @@ It is recommended to discuss any search approach under consideration with the en
479
465
 
480
466
  That being said, for the On-page Results flow, keep in mind:
481
467
 
482
- * This approach is impacted by whether the search is done on the frontend or the backend. If search is slow and has to be done on the backend, consider using User-initiated Search (Step 2B) or the Results Page flow type instead.
483
- * Paginated vs infinite scrolling results may have an impact on the search flow options available.
468
+ - This approach is impacted by whether the search is done on the frontend or the backend. If search is slow and has to be done on the backend, consider using User-initiated Search (Step 2B) or the Results Page flow type instead.
469
+ - Paginated vs infinite scrolling results may have an impact on the search flow options available.
484
470
 
485
471
  ---
486
472
 
487
473
  ## Results Dropdown
488
474
 
489
- Search results are displayed inside a Dropdown Menu that appears below the Search Input. The user will remain on the same page until they select a result from the Dropdown Menu.
475
+ Search results are displayed inside a Dropdown Menu that appears below the Search Input. The user will remain on the same page until they select a result from the Dropdown Menu.
490
476
 
491
477
  ### Example from CZ ID
492
478
 
@@ -498,7 +484,7 @@ The example flow below uses CZ ID to show the contents of a Dropdown Menu filter
498
484
 
499
485
  It is recommended to position the Search Input at the top level of the content the search will apply to.
500
486
 
501
- For example, if the search will display results from across multiple tabs (1), position the Search Input in the header (2).
487
+ For example, if the search will display results from across multiple tabs (1), position the Search Input in the header (2).
502
488
 
503
489
  #### 2. Search Initiated (Live Update)
504
490
 
@@ -506,11 +492,9 @@ As the user types, the app automatically initiates the search with each keystrok
506
492
 
507
493
  It is not recommended for user action to initiate search for this flow type.
508
494
 
509
-
510
-
511
495
  #### 3. Results Displayed in Dropdown
512
496
 
513
- Instead of updating the searched content area, results are displayed in a Dropdown Menu below the Search Input (1).
497
+ Instead of updating the searched content area, results are displayed in a Dropdown Menu below the Search Input (1).
514
498
 
515
499
  If there are no results, it is recommended to display a bank state in the Dropdown Menu instead.
516
500
 
@@ -518,9 +502,9 @@ If there are no results, it is recommended to display a bank state in the Dropdo
518
502
 
519
503
  Depending on the product and the user’s workflow, they may take a number of next actions on the results, possibly including:
520
504
 
521
- * Refine search results (1); re-starts this flow.
522
- * Interact with results, such as drilling down into a single result (2) .
523
- * Initiate a different type of search flow. For example, the user clicks “enter” to filter page by search keyword (3). See Combining Search Types section to learn more.
505
+ - Refine search results (1); re-starts this flow.
506
+ - Interact with results, such as drilling down into a single result (2) .
507
+ - Initiate a different type of search flow. For example, the user clicks “enter” to filter page by search keyword (3). See Combining Search Types section to learn more.
524
508
 
525
509
  ---
526
510
 
@@ -536,21 +520,21 @@ The example flow below uses napari.org to show the usage of a Results Page to di
536
520
 
537
521
  #### 1. User Types Keyword into Search Component
538
522
 
539
- It is recommended to position Search Inputs at the top level of the content the search will apply to.
523
+ It is recommended to position Search Inputs at the top level of the content the search will apply to.
540
524
 
541
525
  For example, if the search will display results from across the whole site (1), position the Search Input in a top-level navigation or outside of the page content hierarchy (2).
542
526
 
543
527
  #### 2. **Search Initiated by User**
544
528
 
545
- Search is initiated when the user clicks a button (1), hits “enter” (2), or some other user action.
529
+ Search is initiated when the user clicks a button (1), hits “enter” (2), or some other user action.
546
530
 
547
531
  Because results will be displayed on a new page, Live Search is not recommended.
548
532
 
549
533
  #### 3. Results Displayed on the Results page
550
534
 
551
- After the user initiates the search, they are automatically directed to a results page.
535
+ After the user initiates the search, they are automatically directed to a results page.
552
536
 
553
- The results page format depends on the product's use case and content. In the example shown, the results page is a unique page that lists search results for pages across the entire website.
537
+ The results page format depends on the product's use case and content. In the example shown, the results page is a unique page that lists search results for pages across the entire website.
554
538
 
555
539
  If there are no results, it is recommended to display a bank state on the results page.
556
540
 
@@ -558,9 +542,9 @@ If there are no results, it is recommended to display a bank state on the result
558
542
 
559
543
  Depending on the product and the user’s workflow, they may take a number of next actions on the results, possibly including:
560
544
 
561
- * Refine search results (1). It is recommended to use the On-Page Results flow type; see Combining Flow Types.
562
- * Interact with results, like drilling down into a single result (2) .
563
- * Filter or Sort Results.
545
+ - Refine search results (1). It is recommended to use the On-Page Results flow type; see Combining Flow Types.
546
+ - Interact with results, like drilling down into a single result (2) .
547
+ - Filter or Sort Results.
564
548
 
565
549
  ---
566
550
 
@@ -568,7 +552,7 @@ Depending on the product and the user’s workflow, they may take a number of ne
568
552
 
569
553
  It is recommended to discuss any search approach under consideration with the engineering team to better understand the technical parameters the product can support.
570
554
 
571
- That being said, for the Results Page flow type, keep in mind that this approach has the best performance when the search is performed on the backend.
555
+ That being said, for the Results Page flow type, keep in mind that this approach has the best performance when the search is performed on the backend.
572
556
 
573
557
  ## Example Use Cases
574
558
 
@@ -584,8 +568,8 @@ The following behaviors are recommended for displaying search results within a D
584
568
 
585
569
  ## Other Considerations
586
570
 
587
- | Search is a complex component, and is highly subjective to each product's use case. While it's impossible to support and document every use case, here is a collection of patterns that may be useful to consider when implementing it. The patterns detailed below have not been developed by the SDS team and are simply examples pulled from products that utilize the SDS components. **Please consider the information in this section as inspiration only.** | | **Jump to pattern:** Combining Search Types Supporting User Behavior |
588
- | --- | --- | --- |
571
+ | Search is a complex component, and is highly subjective to each product's use case. While it's impossible to support and document every use case, here is a collection of patterns that may be useful to consider when implementing it. The patterns detailed below have not been developed by the SDS team and are simply examples pulled from products that utilize the SDS components. **Please consider the information in this section as inspiration only.** | | **Jump to pattern:** Combining Search Types Supporting User Behavior |
572
+ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --- | -------------------------------------------------------------------- |
589
573
 
590
574
  ---
591
575
 
@@ -595,7 +579,7 @@ Depending on the use case, there may be a need to combine multiple flow types. H
595
579
 
596
580
  ### Results Page + On-page Results Flow
597
581
 
598
- In most use cases for the Results Page flow, it can be beneficial to provide users with a way to modify their search results by implementing the On-page Results flow within a Results Page design.
582
+ In most use cases for the Results Page flow, it can be beneficial to provide users with a way to modify their search results by implementing the On-page Results flow within a Results Page design.
599
583
 
600
584
  ### Results Dropdown + On-page Results Flow
601
585
 
@@ -606,4 +590,3 @@ CZ ID combines the Results Dropdown and the On-page Results flows. This allows u
606
590
  ## Patterns to Support User Behavior
607
591
 
608
592
  Below are some example behavior patterns worth considering to help support users in their searching. Evaluate if implementing these will help users’ workflows and if the product can support any technical requirements of implementation.
609
-