playbook_ui_docs 13.17.0.pre.alpha.nodealphaupgrade2157 → 13.17.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (34) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +2 -7
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +6 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +4 -10
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +0 -7
  6. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +7 -5
  7. data/app/pb_kits/playbook/pb_popover/docs/example.yml +1 -2
  8. data/app/pb_kits/playbook/pb_popover/docs/index.js +0 -1
  9. data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -2
  10. data/app/pb_kits/playbook/pb_table/docs/index.js +0 -1
  11. data/dist/menu.yml +3 -102
  12. data/dist/pb_doc_helper.rb +9 -6
  13. data/dist/playbook-doc.js +10 -10
  14. metadata +7 -27
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx +0 -52
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md +0 -1
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx +0 -59
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md +0 -18
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +0 -60
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md +0 -3
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md +0 -5
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +0 -63
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md +0 -3
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +0 -57
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md +0 -3
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +0 -61
  27. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.md +0 -3
  28. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +0 -55
  29. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.md +0 -1
  30. data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.html.erb +0 -30
  31. data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.jsx +0 -57
  32. data/app/pb_kits/playbook/pb_table/docs/_table_striped.html.erb +0 -48
  33. data/app/pb_kits/playbook/pb_table/docs/_table_striped.jsx +0 -58
  34. data/app/pb_kits/playbook/pb_table/docs/_table_striped.md +0 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: e99d154ce104a55d28c67532b2faafeeae5bcec8477ed2789148cf0c7c512318
4
- data.tar.gz: d5a50110484a244a77226675eb0fc05a0f0a218f55b690fb95230206edea325f
3
+ metadata.gz: e311ae0df20be6996bc9516e35eb4425a9367aebe9dd10301afea0d753ddf196
4
+ data.tar.gz: 45afae3112336aec3a900fbaac726813191acead8ec763a347283ce2df6a0f79
5
5
  SHA512:
6
- metadata.gz: 360ad2dbe74a507b58efc027f27c88a4ecde6f5236db91ad35913dee011df060e99c26b85538537f7ce2190702b468ff50d4fe0e6e1426f557e506b3d665cee6
7
- data.tar.gz: 60919c258b0c94b2d51f6a3516423ab10c8d93ba230dadfa1c38d2c58bf0aea98620f5bfd183025bb05127dc633f20a81dfc27e85262b6fbbc4b6d0fb92bb82b
6
+ metadata.gz: 17ecab35cae86ef6fcbbf498c4591e7e3570d35740b1a8f079d3bfba53d16e60fa0a9e69c4eaf84bd8bec8d016fd4cebee22b494d400097117c167fd4be662e8
7
+ data.tar.gz: 435abfe6b89e8b61013952409c76b0fd41bc90663ffb118292ca3943d326a3c9bd33bcab28cb95f2372ab5b484eafcef5e64f01a91374cba743aa30e0c4105d5
@@ -1,12 +1,7 @@
1
- The AdvancedTable kit accepts tree data and automatically renders expansion controls for nested subrows, to any depth, based on the data it is given. In it's simplest form, __the kit has two required props__:
1
+ The AdvancedTable kit takes the table data and automatically renders expandable subrows for nested items to any depth needed. In it's simplest form, the kit has two required props:
2
2
 
3
- ### tableData
3
+ `tableData` is the data that the kit needs to consume to render the table. This data will take the structure of an array of objects where each object will be rendered as a row with the key/value pairs being the column values. If an object within that data has children, the kit will automatically create subRows with icon buttons on the parent rows to toggle the subRows open or closed. The toggleExpansionAll button in the first column header can also be used to toggle expansion for the top level parent rows. For a visual of the data structure needed for `tableData`, see [here](https://github.com/powerhome/playbook/blob/PBNTR-177-New-Advanced-Table-Kit/playbook/app/pb_kits/playbook/pb_advanced_table/README.md).
4
4
 
5
- `tableData` accepts an array of objects as the table data. Each object is a table row, and each key:value pair within an object is a column value within that row. Nested children within a data object are automatically rendered as subrows under their parent row. Each parent row is prepended with expansion controls for toggling its nested child rows. The `toggleExpansionAll` button in the first column header can also be used to toggle expansion of all parent rows within the table.
6
-
7
- For a visual of the data structure needed for `tableData`, see [here](https://github.com/powerhome/playbook/tree/master/playbook/app/pb_kits/playbook/pb_advanced_table#readme).
8
-
9
- ### columnDefinitions
10
5
 
11
6
  `columnDefinitions` maps to the columns prop on the Tanstack table. Column definitions are the single most important part of building a table as they are responsible for building the underlying data model that is used for all sorting, expansion, etc. `ColumnDefinitions` in the AdvancedTable kit is a array of objects as seen in the code snippet below. Each object within the array has two REQUIRED items:
12
7
 
@@ -35,15 +35,20 @@ const AdvancedTableSort = (props) => {
35
35
  },
36
36
  ];
37
37
 
38
+ //Render the subRow header rows
39
+ const subRowHeaders = ["Quarter", "Month", "Day"]
40
+
41
+
38
42
  return (
39
43
  <div>
40
44
  <AdvancedTable
41
45
  columnDefinitions={columnDefinitions}
46
+ enableToggleExpansion="all"
42
47
  tableData={MOCK_DATA}
43
48
  {...props}
44
49
  >
45
50
  <AdvancedTable.Header enableSorting />
46
- <AdvancedTable.Body />
51
+ <AdvancedTable.Body subRowHeaders={subRowHeaders} />
47
52
  </AdvancedTable>
48
53
  </div>
49
54
  );
@@ -1,12 +1,6 @@
1
1
  examples:
2
2
  react:
3
- - advanced_table_default: Default (Required Props)
4
- - advanced_table_loading: Loading State
5
- - advanced_table_sort: enable Sorting
6
- - advanced_table_sort_control: Sort Control
7
- - advanced_table_expanded_control: Expanded Control
8
- - advanced_table_subrow_headers: SubRow Headers
9
- - advanced_table_collapsible_trail: Collapsible Trail
10
- - advanced_table_table_options: Table Options
11
- - advanced_table_table_props: Table Props
12
-
3
+ - advanced_table_default: Default
4
+ # - advanced_table_sort: enableSorting
5
+
6
+
@@ -1,9 +1,2 @@
1
1
  export { default as AdvancedTableDefault } from './_advanced_table_default.jsx'
2
2
  export { default as AdvancedTableSort } from './_advanced_table_sort.jsx'
3
- export { default as AdvancedTableSortControl } from './_advanced_table_sort_control.jsx'
4
- export { default as AdvancedTableLoading } from './_advanced_table_loading.jsx'
5
- export { default as AdvancedTableExpandedControl } from './_advanced_table_expanded_control.jsx'
6
- export { default as AdvancedTableSubrowHeaders } from './_advanced_table_subrow_headers.jsx'
7
- export { default as AdvancedTableCollapsibleTrail } from './_advanced_table_collapsible_trail.jsx'
8
- export { default as AdvancedTableTableOptions } from './_advanced_table_table_options.jsx'
9
- export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'
@@ -3,10 +3,12 @@
3
3
  <%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
4
4
  </form>
5
5
 
6
- <%= javascript_tag do %>
7
- document.addEventListener('DOMContentLoaded', function () {
8
- document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
9
- if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
6
+ <% content_for(:pb_js) do %>
7
+ <%= javascript_tag do %>
8
+ document.addEventListener('DOMContentLoaded', function () {
9
+ document.querySelector('#example-form-validation').addEventListener('submit', function (e) {
10
+ if (e.target.querySelectorAll('[error]:not([error=""])').length > 0) e.preventDefault();
11
+ })
10
12
  })
11
- })
13
+ <% end %>
12
14
  <% end %>
@@ -5,7 +5,6 @@ examples:
5
5
  - popover_close: Close Options
6
6
  - popover_z_index: Set Z-Index
7
7
  - popover_scroll_height: Scroll and Height Settings
8
- - popover_actionable_content: With Actionable Content
9
8
 
10
9
  react:
11
10
  - popover_default: Default
@@ -13,4 +12,4 @@ examples:
13
12
  - popover_close: Close Options
14
13
  - popover_z_index: Set Z-Index
15
14
  - popover_scroll_height: Scroll and Height Settings
16
- - popover_actionable_content: With Actionable Content
15
+
@@ -3,4 +3,3 @@ export { default as PopoverList } from './_popover_list.jsx'
3
3
  export { default as PopoverClose } from './_popover_close.jsx'
4
4
  export { default as PopoverZIndex } from './_popover_z_index.jsx'
5
5
  export { default as PopoverScrollHeight } from './_popover_scroll_height.jsx'
6
- export { default as PopoverActionableContent } from './_popover_actionable_content.jsx'
@@ -23,7 +23,6 @@ examples:
23
23
  - table_icon_buttons: Table with Icon Buttons
24
24
  - table_with_background_kit: Table With Background Kit
25
25
  - table_vertical_border: Vertical Borders
26
- - table_striped: Striped Table
27
26
 
28
27
  react:
29
28
  - table_sm: Small
@@ -48,4 +47,3 @@ examples:
48
47
  - table_icon_buttons: Table with Icon Buttons
49
48
  - table_with_background_kit: Table With Background Kit
50
49
  - table_vertical_border: Vertical Borders
51
- - table_striped: Striped Table
@@ -20,4 +20,3 @@ export { default as TableAlignmentShiftRow } from './_table_alignment_shift_row.
20
20
  export { default as TableAlignmentShiftData } from './_table_alignment_shift_data.jsx'
21
21
  export { default as TableWithBackgroundKit } from './_table_with_background_kit.jsx'
22
22
  export { default as TableVerticalBorder } from './_table_vertical_border.jsx'
23
- export { default as TableStriped } from './_table_striped.jsx'
data/dist/menu.yml CHANGED
@@ -13,447 +13,348 @@ kits:
13
13
  - name: "dialog"
14
14
  platforms: *web
15
15
  description:
16
- status: "stable"
17
16
  - name: "fixed_confirmation_toast"
18
17
  platforms: *web
19
18
  description: Fixed Confirmation Toast is used as an alert. Success is used when a user successfully completes an action. Error is used when there is an error and the user cannot proceed. Neutral is used to display information to a user to complete a task.
20
- status: "stable"
21
19
  - name: "popover"
22
20
  platforms: *web
23
21
  description: A popover is a way to toggle content on top of other content. It can be used for small texts, small forms, or even dropdowns. By default, popover will toggle open/closed by simply clicking the trigger element.
24
- status: "stable"
25
22
  - name: "tooltip"
26
23
  platforms: *web
27
24
  description:
28
- status: "stable"
29
25
  - name: buttons
30
26
  description: Buttons are used primarily for actions, such as “Save” and “Cancel”. Link Buttons are used for less important or less commonly used actions, such as “view shipping settings”.
31
27
  components:
32
28
  - name: "button"
33
29
  platforms: *web
34
30
  description:
35
- status: "stable"
36
31
  - name: "button_toolbar"
37
32
  platforms: *web
38
33
  description: This kit should primarily hold the most commonly used buttons.
39
- status: "stable"
40
34
  - name: "circle_icon_button"
41
35
  platforms: *web
42
36
  description: When using Icon Circle Button, the icon must be clear a clear indication of what the button does because there is no text.
43
- status: "stable"
44
37
  - name: data_visualization
45
38
  description:
46
39
  components:
47
40
  - name: "map"
48
41
  platforms: *react_only
49
42
  description: This kit provides a wrapping class to place around the MapLibre library.
50
- status: "stable"
51
43
  - name: "table"
52
44
  platforms: *web
53
45
  description: Tables display a collection of structured data and typically have the ability to sort, filter, and paginate data.
54
- status: "stable"
55
46
  - name: "advanced_table"
56
47
  platforms: *react_only
57
- description: The Advanced Table can be used to display complex, nested data in a way that allows for expansion and/or sorting.
58
- status: "beta"
48
+ description: The Advanced Table can be used to display complex, nested data in a way that allows for expansion and/or sorting.
59
49
  - name: "list"
60
50
  platforms: *web
61
51
  description: Lists display a vertical set of related content.
62
- status: "stable"
63
52
  - name: "filter"
64
53
  platforms: *web
65
54
  description: This kit can be implemented in a variety of ways. To see examples of how to implement this kit in production visit the /dev_docs/search page in production.
66
- status: "stable"
67
55
  - name: "distribution_bar"
68
56
  platforms: *web
69
57
  description: Can be used in the same way a pie chart can be used. By default, Distribution Bar comparatively represents data without numbers.
70
- status: "stable"
71
58
  - name: "legend"
72
59
  platforms: *web
73
60
  description: A key used to compare the variables and their value in any given graph.
74
- status: "stable"
75
61
  - name: "gauge"
76
62
  platforms: *web
77
63
  description:
78
- status: "stable"
79
64
  - name: "bar_graph"
80
65
  platforms: *web
81
66
  description: Bar graphs are used to compare data. Bar graphs are not typically used to show percentages.
82
- status: "stable"
83
67
  - name: "circle_chart"
84
68
  platforms: *web
85
69
  description:
86
- status: "stable"
87
70
  - name: "line_graph"
88
71
  platforms: *web
89
72
  description: Line graphs are used to show changes in data over time.
90
- status: "stable"
91
73
  - name: "treemap_chart"
92
74
  platforms: *web
93
75
  description: Treemap charts are used to compare the relative size of groups of data. They can also use a nested data structure, allowing a user to drill down into a group to see its constituent data points.
94
- status: "stable"
95
76
  - name: date_and_time_text_patterns
96
77
  description: ""
97
78
  components:
98
79
  - name: "date"
99
80
  platforms: *web
100
81
  description: Use to display the date. Year will not display if it is the current year.
101
- status: "stable"
102
82
  - name: "date_range_inline"
103
83
  platforms: *web
104
84
  description: Use to display a date range. Year will not show if it is the current year.
105
- status: "stable"
106
85
  - name: "date_range_stacked"
107
86
  platforms: *web
108
- description:
109
- status: "stable"
87
+ description:
110
88
  - name: "date_stacked"
111
89
  platforms: *web
112
90
  description: Use to display the date, stacking month and day. Year will not show if it is the current year.
113
- status: "stable"
114
91
  - name: "date_time"
115
92
  platforms: *web
116
93
  description: Date Time is a composite kit that leverages the Date and Time kits. The Date Time kit is affected by time zones and defaults to "America/New_York".
117
94
  - name: "date_time_stacked"
118
95
  platforms: *web
119
96
  description:
120
- status: "stable"
121
97
  - name: "date_year_stacked"
122
98
  platforms: *web
123
99
  description: This kit is a simple option for displaying dates in a month, day and the year format.
124
- status: "stable"
125
100
  - name: "time"
126
101
  platforms: *web
127
102
  description: This kit consist of large display and table display format. It includes and icon, and a time zone.
128
- status: "stable"
129
103
  - name: "time_range_inline"
130
104
  platforms: *web
131
105
  description:
132
- status: "stable"
133
106
  - name: "time_stacked"
134
107
  platforms: *web
135
108
  description:
136
- status: "stable"
137
109
  - name: "timestamp"
138
110
  platforms: *all
139
111
  description: This low profile kit displays time. Elapsed, current, future, or otherwise.
140
- status: "stable"
141
112
  - name: "weekday_stacked"
142
113
  platforms: *web
143
114
  description:
144
- status: "stable"
145
115
  - name: form_and_dashboard_text_patterns
146
116
  description: ""
147
117
  components:
148
118
  - name: "contact"
149
119
  platforms: *web
150
120
  description: Use to display customer's or user's contact information.
151
- status: "stable"
152
121
  - name: "currency"
153
122
  platforms: *web
154
123
  description: Use to display monetary amounts, typically on dashboards or other layouts to show an overview or summary. User understanding increase when paired with labels.
155
- status: "stable"
156
124
  - name: "home_address_street"
157
125
  platforms: *web
158
126
  description: This kit can be used to display the address for a homeowner/project. It contains street address, APT format, City, state and zip. A Project hashtag can be used as a prop to link back to a project.
159
- status: "stable"
160
127
  - name: "label_pill"
161
128
  platforms: *web
162
129
  description: This kit combines the caption and pill kit with all its variants.
163
- status: "stable"
164
130
  - name: "label_value"
165
131
  platforms: *web
166
132
  description: This kit can be very versatile when used to display text data.
167
- status: "stable"
168
133
  - name: "person"
169
134
  platforms: *web
170
135
  description: This kit is broken down into a first name last name format with normal and bold weighted text.
171
- status: "stable"
172
136
  - name: "person_contact"
173
137
  platforms: *web
174
138
  description: This kit can be used to display a person contact information.
175
- status: "stable"
176
139
  - name: "source"
177
140
  platforms: *web
178
141
  description: General use is to describe the discovery of businesses, customers, etc. This kit can also be used for other purposes as well.
179
- status: "stable"
180
142
  - name: "dashboard_value"
181
143
  platforms: *web
182
144
  description: Use in dashboards to give the viewer a quick overview of important metrics. If want to show currency, use Currency Kit.
183
- status: "stable"
184
145
  - name: "stat_change"
185
146
  platforms: *web
186
147
  description: Displays the increase, decrease, or neutral change in data.
187
- status: "stable"
188
148
  - name: "stat_value"
189
149
  platforms: *web
190
150
  description: This kit was cerated for the main use as a dashboard display for numbers. A large label is an optional part if it needs more clarity.
191
- status: "stable"
192
151
  - name: "title_count"
193
152
  platforms: *web
194
153
  description: This kits consists of title kit and body text. It is used to display a title and a count (numbers). It has a base size and a large formation for dashboard use.
195
- status: "stable"
196
154
  - name: "title_detail"
197
155
  platforms: *web
198
156
  description: This kit can be used in many versatile ways. It consist of a title 4 and light body text kit.
199
- status: "stable"
200
157
  - name: form_elements
201
158
  description:
202
159
  components:
203
160
  - name: "file_upload"
204
161
  platforms: *web
205
162
  description:
206
- status: "stable"
207
163
  - name: "toggle"
208
164
  platforms: *web
209
165
  description: Physical switch that allows users to turn things on or off. Used for applying system states, presenting binary options and activating a state.
210
- status: "stable"
211
166
  - name: "form_pill"
212
167
  platforms: *web
213
168
  description:
214
- status: "stable"
215
169
  - name: "form"
216
170
  platforms: *rails_only
217
171
  description: The form kit provides consumers with a convenient, consistently styled <form> wrapper.
218
- status: "stable"
219
172
  - name: "form_group"
220
173
  platforms: *web
221
174
  description:
222
- status: "stable"
223
175
  - name: form_input
224
176
  description: ""
225
177
  components:
226
178
  - name: "passphrase"
227
179
  platforms: *web
228
180
  description:
229
- status: "stable"
230
181
  - name: "phone_number_input"
231
182
  platforms: *web
232
183
  description:
233
- status: "stable"
234
184
  - name: "text_input"
235
185
  platforms: *web
236
186
  description: Area where user can enter small amount of text. Commonly used in forms.
237
- status: "stable"
238
187
  - name: "rich_text_editor"
239
188
  platforms: *web
240
- description:
241
- status: "stable"
189
+ description:
242
190
  - name: "textarea"
243
191
  platforms: *web
244
192
  description: Area where user can enter larger amounts of text. Commonly used in forms.
245
- status: "stable"
246
193
  - name: "typeahead"
247
194
  platforms: *web
248
195
  description: Typeahead is auto suggestion or completion based on what the user is starting to type, gets refined as the user types more.
249
- status: "stable"
250
196
  - name: form_selection
251
197
  description:
252
198
  components:
253
199
  - name: "date_picker"
254
200
  platforms: *web
255
201
  description: Playbook's date picker is built using flatpickr, a vanilla js library. Common date picker use cases and features have been adapted into simple prop based configuration detailed in the docs below.
256
- status: "stable"
257
202
  - name: "multi_level_select"
258
203
  platforms: *web
259
204
  description: The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user.
260
- status: "stable"
261
205
  - name: "select"
262
206
  platforms: *web
263
207
  description: Select displays multiple options for a user to pick from in a dropdown menu. User selects one option.
264
- status: "stable"
265
208
  - name: "selectable_card"
266
209
  platforms: *web
267
210
  description: Cards for information/content that can be selected. There is design for unselected and selected states. Typically used as a form element.
268
- status: "stable"
269
211
  - name: "selectable_card_icon"
270
212
  platforms: *web
271
213
  description:
272
- status: "stable"
273
214
  - name: "selectable_icon"
274
215
  platforms: *web
275
216
  description:
276
- status: "stable"
277
217
  - name: "radio"
278
218
  platforms: *all
279
219
  description: Radio is a control that allows the user to only choose one predefined option.
280
- status: "stable"
281
220
  - name: "checkbox"
282
221
  platforms: *web
283
222
  description: Checkbox is used for a list of selections that are meant to have one or more options checked.
284
- status: "stable"
285
223
  - name: "selectable_list"
286
224
  platforms: *web
287
225
  description:
288
- status: "stable"
289
226
  - name: icons_and_images
290
227
  description: ""
291
228
  components:
292
229
  - name: "icon"
293
230
  platforms: *web
294
231
  description: An icon is a graphic symbol that represents an object (ie a file) or a function. They can be used to give the user feedback.
295
- status: "stable"
296
232
  - name: "icon_circle"
297
233
  platforms: *web
298
234
  description: Similar to Icon, Icon Circle is a graphical symbol within a circle used to visually indicate an object or function.
299
- status: "stable"
300
235
  - name: "icon_stat_value"
301
236
  platforms: *web
302
237
  description:
303
- status: "stable"
304
238
  - name: "icon_value"
305
239
  platforms: *web
306
240
  description: Icon Value leverages our icon kit, to display a value of some sort in the interface. Typically, this includes a numerical value.
307
- status: "stable"
308
241
  - name: "user_badge"
309
242
  platforms: *web
310
243
  description: This kit was created to display employee icons related to a Nitro user. Currently there is the PVI logo and the Million Dollar Rep Icon.
311
- status: "stable"
312
244
  - name: "image"
313
245
  platforms: *web
314
246
  description: A responsive image component.
315
- status: "stable"
316
247
  - name: "lightbox"
317
248
  platforms: *react_only
318
249
  description: The Lightbox kit is a popup window overlay that will appear on top of your webpage and cover the entirety of the screen.
319
- status: "stable"
320
250
  - name: "star_rating"
321
251
  platforms: *web
322
252
  description: A component to view other people’s opinions and experiences. Use when you want to show evaluation or a quick quantitative rating. Most effective when paired with reviews.
323
- status: "stable"
324
253
  - name: layout_and_structure
325
254
  description:
326
255
  components:
327
256
  - name: "flex"
328
257
  platforms: *web
329
258
  description: This kit is used to build most of the complex interfaces. The Flex Kit is used the same way flex box is used.
330
- status: "stable"
331
259
  - name: "layout"
332
260
  platforms: *web
333
261
  description: Layouts used for positioning content inside of pages, cards, or containers.
334
- status: "stable"
335
262
  - name: "card"
336
263
  platforms: *all
337
264
  description:
338
- status: "stable"
339
265
  - name: "section_separator"
340
266
  platforms: *web
341
267
  description: Section separator is a divider line that compartmentalizes content, typically used on cards or white backgrounds.
342
- status: "stable"
343
268
  - name: "background"
344
269
  platforms: *web
345
270
  description: The background kit is used for adding a background to a page or to any container.
346
- status: "stable"
347
271
  - name: "collapsible"
348
272
  platforms: *web
349
273
  description:
350
- status: "stable"
351
274
  - name: message_text_patterns
352
275
  description:
353
276
  components:
354
277
  - name: "highlight"
355
278
  platforms: *web
356
279
  description: Highlight is used to pick out or emphasize content.
357
- status: "stable"
358
280
  - name: "message"
359
281
  platforms: *web
360
282
  description: This multi kit consist of a an avatar, a status, a caption, a body text, and a time stamp. All which can be optional.
361
- status: "stable"
362
283
  - name: navigation
363
284
  description:
364
285
  components:
365
286
  - name: "bread_crumbs"
366
287
  platforms: *web
367
288
  description: BreadCrumbs can be used for keeping a user aware of their route location.
368
- status: "stable"
369
289
  - name: "nav"
370
290
  platforms: *web
371
291
  description: The nav is a grouped set of links that take the user to another page, or tab through parts of a page. It comes in horizontal or vertical with several different variants.
372
- status: "stable"
373
292
  - name: "pagination"
374
293
  platforms: *rails_only
375
294
  description:
376
- status: "stable"
377
295
  - name: state_and_progress_indicators
378
296
  description:
379
297
  components:
380
298
  - name: "loading_inline"
381
299
  platforms: *web
382
300
  description: The loading kit is used to indicate to users that a page is still loading, or an action is still being processed.
383
- status: "stable"
384
301
  - name: "progress_pills"
385
302
  platforms: *web
386
303
  description: Progress pills indicate a specific point in time of a series of sequential steps. They are used to track progress of something over time.
387
- status: "stable"
388
304
  - name: "progress_simple"
389
305
  platforms: *web
390
306
  description: Displays the current progress of an operation flow. User understanding increases when paired with labels or numbers.
391
307
  - name: "progress_step"
392
308
  platforms: *web
393
309
  description: "Progress step kit is used to show the progress of a process. There are three types of steps in this kit: completed, active, and inactive."
394
- status: "stable"
395
310
  - name: "walkthrough"
396
311
  platforms: *web
397
312
  description:
398
- status: "stable"
399
313
  - name: "timeline"
400
314
  platforms: *web
401
315
  description: The timeline kit can use two different line styles in the same timeline - solid and dotted line styles.
402
- status: "stable"
403
316
  - name: tags
404
317
  description:
405
318
  components:
406
319
  - name: "badge"
407
320
  platforms: *web
408
321
  description: Badges can be used for notification, tags, and status. They are used for count and numbers.
409
- status: "stable"
410
322
  - name: "pill"
411
323
  platforms: *all
412
324
  description: A pill uses both a keyword and a specific color to categorize an item.
413
- status: "stable"
414
325
  - name: "hashtag"
415
326
  platforms: *web
416
327
  description: Hashtag is used to display home, project and other forms of IDs. They can be used as a link.
417
- status: "stable"
418
328
  - name: typography
419
329
  description: ""
420
330
  components:
421
331
  - name: "body"
422
332
  platforms: *web
423
333
  description: Default text style for paragraphs. Follow hiearchy when using "light" or "lighter" variants to deemphasize text — default style should be followed by "light" followed by "lighter".
424
- status: "stable"
425
334
  - name: "caption"
426
335
  platforms: *web
427
336
  description: Use to provide supplementary context. Default size is best when providing supplementary context to a small section (i.e. label for a text input, label for a paragraph). Use large caption when supplementary text covers more content.
428
- status: "stable"
429
337
  - name: "detail"
430
338
  platforms: *web
431
339
  description: Used for tables or designs with large amounts of data or text.
432
- status: "stable"
433
340
  - name: "title"
434
341
  platforms: *web
435
342
  description: Typically used as headers. Follow semantic hierarchy — Title 1s should be followed by Title 2s followed by Title 3s and so on, without skipping any levels.
436
- status: "stable"
437
343
  - name: user
438
344
  description:
439
345
  components:
440
346
  - name: "avatar"
441
347
  platforms: *all
442
348
  description: Avatar displays a user's picture. This helps aid easy recognition of the user. This kit is normally not used by itself, but rather used within other kits. The only time Avatar should be used instead of the User kit is when you are not going to display the user's name.
443
- status: "stable"
444
349
  - name: "avatar_action_button"
445
350
  platforms: *web
446
351
  description:
447
- status: "stable"
448
352
  - name: "multiple_users"
449
353
  platforms: *web
450
354
  description: The multiple users kit is used to show that more than one user is associated to an action or item.
451
- status: "stable"
452
355
  - name: "multiple_users_stacked"
453
356
  platforms: *web
454
357
  description: Multiple users stacked is used in tight spaces, where we need to indicate that multiple users are associated to a specific action or item.
455
- status: "stable"
456
358
  - name: "user"
457
359
  platforms: *web
458
360
  description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
459
- status: "stable"
@@ -33,7 +33,7 @@ module PlaybookWebsite
33
33
  kits.each do |kit|
34
34
  if kit.is_a?(Hash)
35
35
  nav_hash_array(kit).each do |sub_kit|
36
- display_kits << render_pb_doc_kit(sub_kit[:name], type, limit_examples, false, dark_mode) if sub_kit[:status] != "beta" && pb_doc_has_kit_type?(sub_kit[:name], type)
36
+ display_kits << render_pb_doc_kit(sub_kit, type, limit_examples, false, dark_mode) if pb_doc_has_kit_type?(sub_kit, type)
37
37
  end
38
38
  elsif pb_doc_has_kit_type?(kit, type)
39
39
  display_kits << render_pb_doc_kit(kit, type, limit_examples, false, dark_mode)
@@ -45,7 +45,8 @@ module PlaybookWebsite
45
45
 
46
46
  # rubocop:disable Naming/AccessorMethodName
47
47
  def get_kits(_type = "rails")
48
- aggregate_kits_with_status || []
48
+ aggregate_kits || []
49
+ # Filter kits that have at least one component compatible with the type
49
50
  end
50
51
 
51
52
  def get_kits_pb_website
@@ -56,10 +57,12 @@ module PlaybookWebsite
56
57
 
57
58
  # rubocop:disable Style/OptionalBooleanParameter
58
59
  def render_pb_doc_kit(kit, type, limit_examples, code = true, dark_mode = false)
59
- title = pb_doc_render_clickable_title(kit, type)
60
- ui = raw("<div class='pb--docItem-ui'>
61
- #{pb_kit(kit: kit, type: type, show_code: code, limit_examples: limit_examples, dark_mode: dark_mode)}</div>")
62
- title + ui
60
+ if kit != "advanced_table"
61
+ title = pb_doc_render_clickable_title(kit, type)
62
+ ui = raw("<div class='pb--docItem-ui'>
63
+ #{pb_kit(kit: kit, type: type, show_code: code, limit_examples: limit_examples, dark_mode: dark_mode)}</div>")
64
+ title + ui
65
+ end
63
66
  end
64
67
  # rubocop:enable Style/OptionalBooleanParameter
65
68