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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +2 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +6 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +4 -10
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +0 -7
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +7 -5
- data/app/pb_kits/playbook/pb_popover/docs/example.yml +1 -2
- data/app/pb_kits/playbook/pb_popover/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_table/docs/index.js +0 -1
- data/dist/menu.yml +3 -102
- data/dist/pb_doc_helper.rb +9 -6
- data/dist/playbook-doc.js +10 -10
- metadata +7 -27
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx +0 -52
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx +0 -59
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md +0 -18
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +0 -60
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md +0 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md +0 -5
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +0 -63
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md +0 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +0 -57
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md +0 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +0 -61
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.md +0 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +0 -55
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.md +0 -1
- data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.html.erb +0 -30
- data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.jsx +0 -57
- data/app/pb_kits/playbook/pb_table/docs/_table_striped.html.erb +0 -48
- data/app/pb_kits/playbook/pb_table/docs/_table_striped.jsx +0 -58
- 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:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: e311ae0df20be6996bc9516e35eb4425a9367aebe9dd10301afea0d753ddf196
|
4
|
+
data.tar.gz: 45afae3112336aec3a900fbaac726813191acead8ec763a347283ce2df6a0f79
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 17ecab35cae86ef6fcbbf498c4591e7e3570d35740b1a8f079d3bfba53d16e60fa0a9e69c4eaf84bd8bec8d016fd4cebee22b494d400097117c167fd4be662e8
|
7
|
+
data.tar.gz: 435abfe6b89e8b61013952409c76b0fd41bc90663ffb118292ca3943d326a3c9bd33bcab28cb95f2372ab5b484eafcef5e64f01a91374cba743aa30e0c4105d5
|
@@ -1,12 +1,7 @@
|
|
1
|
-
The AdvancedTable kit
|
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
|
-
|
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
|
4
|
-
-
|
5
|
-
|
6
|
-
|
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'
|
data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb
CHANGED
@@ -3,10 +3,12 @@
|
|
3
3
|
<%= pb_rails("button", props: {html_type: "submit", text: "Save Phone Number"}) %>
|
4
4
|
</form>
|
5
5
|
|
6
|
-
|
7
|
-
|
8
|
-
document.
|
9
|
-
|
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
|
-
|
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"
|
data/dist/pb_doc_helper.rb
CHANGED
@@ -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
|
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
|
-
|
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
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
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
|
|