playbook_ui 13.16.0.pre.alpha.PBNTR178AdvancedTableDocs2072 → 13.16.0.pre.alpha.PBNTR184betaflaginmenuyml2085

Sign up to get free protection for your applications and to get access to all the features.
Files changed (23) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +1 -4
  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/dist/menu.yml +102 -3
  7. data/lib/playbook/version.rb +1 -1
  8. metadata +2 -17
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx +0 -52
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md +0 -1
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx +0 -59
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md +0 -18
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +0 -60
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md +0 -3
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md +0 -5
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +0 -63
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md +0 -3
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +0 -57
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md +0 -3
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +0 -61
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.md +0 -3
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +0 -55
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.md +0 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: a3f84c9ada938622a17b30501cba912f98fe09c68fb50d2f9880f1b55026d6c1
4
- data.tar.gz: ace64b8414d943043df0acaf4809bf139e226dc681dd059a36540e646327444d
3
+ metadata.gz: 1fd075f10326a40519c20d95bdda522fd5ffb01c0f8b43cc8daf0c65659df31e
4
+ data.tar.gz: 668009edc5596c3c139578bbbbb0b9df5aa385a91f00f2ceab250b4ea811f13e
5
5
  SHA512:
6
- metadata.gz: 2a49054e9f6ec1d8603aee090092392f5a4f3dde7b1f687bd3f1318b47dce1670f859a42b1e09aaff370333aef5e613df175f1a1ff000707f99c5705d373c14f
7
- data.tar.gz: f287762d5c8446c9594b02a24d5dd7a178f24802725318f906061fd8edf12907b085700e7b2c788e92c0b69446ffa91df23e7b79e231188419aea5efec78b9c3
6
+ metadata.gz: 2a42c6d61a727c8db17a7b65458dea7e4cd05575b138a95050b05fecf936a9cba041381ab7d19c33f8e4241ee6aa586b66cce9cc8e170f70d39b9616f64702f3
7
+ data.tar.gz: f4ec5842c6736935bf03372ce6efa4806038c16cc0621c55d8e363ba71da75e7d3c1c47838e03f941e3821c351650a7fa41a70d69439466f8993a9cdf1bda589
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md CHANGED
@@ -1,10 +1,7 @@
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
-
3
- ### tableData
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:
4
2
 
5
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).
6
4
 
7
- ### columnDefinitions
8
5
 
9
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:
10
7
 
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx CHANGED
@@ -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
  );
data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml CHANGED
@@ -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
+
data/app/pb_kits/playbook/pb_advanced_table/docs/index.js CHANGED
@@ -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/dist/menu.yml CHANGED
@@ -13,348 +13,447 @@ kits:
13
13
  - name: "dialog"
14
14
  platforms: *web
15
15
  description:
16
+ status: "stable"
16
17
  - name: "fixed_confirmation_toast"
17
18
  platforms: *web
18
19
  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"
19
21
  - name: "popover"
20
22
  platforms: *web
21
23
  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"
22
25
  - name: "tooltip"
23
26
  platforms: *web
24
27
  description:
28
+ status: "stable"
25
29
  - name: buttons
26
30
  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”.
27
31
  components:
28
32
  - name: "button"
29
33
  platforms: *web
30
34
  description:
35
+ status: "stable"
31
36
  - name: "button_toolbar"
32
37
  platforms: *web
33
38
  description: This kit should primarily hold the most commonly used buttons.
39
+ status: "stable"
34
40
  - name: "circle_icon_button"
35
41
  platforms: *web
36
42
  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"
37
44
  - name: data_visualization
38
45
  description:
39
46
  components:
40
47
  - name: "map"
41
48
  platforms: *react_only
42
49
  description: This kit provides a wrapping class to place around the MapLibre library.
50
+ status: "stable"
43
51
  - name: "table"
44
52
  platforms: *web
45
53
  description: Tables display a collection of structured data and typically have the ability to sort, filter, and paginate data.
54
+ status: "stable"
46
55
  - name: "advanced_table"
47
56
  platforms: *react_only
48
- description: The Advanced Table can be used to display complex, nested data in a way that allows for expansion and/or sorting.
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"
49
59
  - name: "list"
50
60
  platforms: *web
51
61
  description: Lists display a vertical set of related content.
62
+ status: "stable"
52
63
  - name: "filter"
53
64
  platforms: *web
54
65
  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"
55
67
  - name: "distribution_bar"
56
68
  platforms: *web
57
69
  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"
58
71
  - name: "legend"
59
72
  platforms: *web
60
73
  description: A key used to compare the variables and their value in any given graph.
74
+ status: "stable"
61
75
  - name: "gauge"
62
76
  platforms: *web
63
77
  description:
78
+ status: "stable"
64
79
  - name: "bar_graph"
65
80
  platforms: *web
66
81
  description: Bar graphs are used to compare data. Bar graphs are not typically used to show percentages.
82
+ status: "stable"
67
83
  - name: "circle_chart"
68
84
  platforms: *web
69
85
  description:
86
+ status: "stable"
70
87
  - name: "line_graph"
71
88
  platforms: *web
72
89
  description: Line graphs are used to show changes in data over time.
90
+ status: "stable"
73
91
  - name: "treemap_chart"
74
92
  platforms: *web
75
93
  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"
76
95
  - name: date_and_time_text_patterns
77
96
  description: ""
78
97
  components:
79
98
  - name: "date"
80
99
  platforms: *web
81
100
  description: Use to display the date. Year will not display if it is the current year.
101
+ status: "stable"
82
102
  - name: "date_range_inline"
83
103
  platforms: *web
84
104
  description: Use to display a date range. Year will not show if it is the current year.
105
+ status: "stable"
85
106
  - name: "date_range_stacked"
86
107
  platforms: *web
87
- description:
108
+ description:
109
+ status: "stable"
88
110
  - name: "date_stacked"
89
111
  platforms: *web
90
112
  description: Use to display the date, stacking month and day. Year will not show if it is the current year.
113
+ status: "stable"
91
114
  - name: "date_time"
92
115
  platforms: *web
93
116
  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".
94
117
  - name: "date_time_stacked"
95
118
  platforms: *web
96
119
  description:
120
+ status: "stable"
97
121
  - name: "date_year_stacked"
98
122
  platforms: *web
99
123
  description: This kit is a simple option for displaying dates in a month, day and the year format.
124
+ status: "stable"
100
125
  - name: "time"
101
126
  platforms: *web
102
127
  description: This kit consist of large display and table display format. It includes and icon, and a time zone.
128
+ status: "stable"
103
129
  - name: "time_range_inline"
104
130
  platforms: *web
105
131
  description:
132
+ status: "stable"
106
133
  - name: "time_stacked"
107
134
  platforms: *web
108
135
  description:
136
+ status: "stable"
109
137
  - name: "timestamp"
110
138
  platforms: *all
111
139
  description: This low profile kit displays time. Elapsed, current, future, or otherwise.
140
+ status: "stable"
112
141
  - name: "weekday_stacked"
113
142
  platforms: *web
114
143
  description:
144
+ status: "stable"
115
145
  - name: form_and_dashboard_text_patterns
116
146
  description: ""
117
147
  components:
118
148
  - name: "contact"
119
149
  platforms: *web
120
150
  description: Use to display customer's or user's contact information.
151
+ status: "stable"
121
152
  - name: "currency"
122
153
  platforms: *web
123
154
  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"
124
156
  - name: "home_address_street"
125
157
  platforms: *web
126
158
  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"
127
160
  - name: "label_pill"
128
161
  platforms: *web
129
162
  description: This kit combines the caption and pill kit with all its variants.
163
+ status: "stable"
130
164
  - name: "label_value"
131
165
  platforms: *web
132
166
  description: This kit can be very versatile when used to display text data.
167
+ status: "stable"
133
168
  - name: "person"
134
169
  platforms: *web
135
170
  description: This kit is broken down into a first name last name format with normal and bold weighted text.
171
+ status: "stable"
136
172
  - name: "person_contact"
137
173
  platforms: *web
138
174
  description: This kit can be used to display a person contact information.
175
+ status: "stable"
139
176
  - name: "source"
140
177
  platforms: *web
141
178
  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"
142
180
  - name: "dashboard_value"
143
181
  platforms: *web
144
182
  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"
145
184
  - name: "stat_change"
146
185
  platforms: *web
147
186
  description: Displays the increase, decrease, or neutral change in data.
187
+ status: "stable"
148
188
  - name: "stat_value"
149
189
  platforms: *web
150
190
  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"
151
192
  - name: "title_count"
152
193
  platforms: *web
153
194
  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"
154
196
  - name: "title_detail"
155
197
  platforms: *web
156
198
  description: This kit can be used in many versatile ways. It consist of a title 4 and light body text kit.
199
+ status: "stable"
157
200
  - name: form_elements
158
201
  description:
159
202
  components:
160
203
  - name: "file_upload"
161
204
  platforms: *web
162
205
  description:
206
+ status: "stable"
163
207
  - name: "toggle"
164
208
  platforms: *web
165
209
  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"
166
211
  - name: "form_pill"
167
212
  platforms: *web
168
213
  description:
214
+ status: "stable"
169
215
  - name: "form"
170
216
  platforms: *rails_only
171
217
  description: The form kit provides consumers with a convenient, consistently styled <form> wrapper.
218
+ status: "stable"
172
219
  - name: "form_group"
173
220
  platforms: *web
174
221
  description:
222
+ status: "stable"
175
223
  - name: form_input
176
224
  description: ""
177
225
  components:
178
226
  - name: "passphrase"
179
227
  platforms: *web
180
228
  description:
229
+ status: "stable"
181
230
  - name: "phone_number_input"
182
231
  platforms: *web
183
232
  description:
233
+ status: "stable"
184
234
  - name: "text_input"
185
235
  platforms: *web
186
236
  description: Area where user can enter small amount of text. Commonly used in forms.
237
+ status: "stable"
187
238
  - name: "rich_text_editor"
188
239
  platforms: *web
189
- description:
240
+ description:
241
+ status: "stable"
190
242
  - name: "textarea"
191
243
  platforms: *web
192
244
  description: Area where user can enter larger amounts of text. Commonly used in forms.
245
+ status: "stable"
193
246
  - name: "typeahead"
194
247
  platforms: *web
195
248
  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"
196
250
  - name: form_selection
197
251
  description:
198
252
  components:
199
253
  - name: "date_picker"
200
254
  platforms: *web
201
255
  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"
202
257
  - name: "multi_level_select"
203
258
  platforms: *web
204
259
  description: The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user.
260
+ status: "stable"
205
261
  - name: "select"
206
262
  platforms: *web
207
263
  description: Select displays multiple options for a user to pick from in a dropdown menu. User selects one option.
264
+ status: "stable"
208
265
  - name: "selectable_card"
209
266
  platforms: *web
210
267
  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"
211
269
  - name: "selectable_card_icon"
212
270
  platforms: *web
213
271
  description:
272
+ status: "stable"
214
273
  - name: "selectable_icon"
215
274
  platforms: *web
216
275
  description:
276
+ status: "stable"
217
277
  - name: "radio"
218
278
  platforms: *all
219
279
  description: Radio is a control that allows the user to only choose one predefined option.
280
+ status: "stable"
220
281
  - name: "checkbox"
221
282
  platforms: *web
222
283
  description: Checkbox is used for a list of selections that are meant to have one or more options checked.
284
+ status: "stable"
223
285
  - name: "selectable_list"
224
286
  platforms: *web
225
287
  description:
288
+ status: "stable"
226
289
  - name: icons_and_images
227
290
  description: ""
228
291
  components:
229
292
  - name: "icon"
230
293
  platforms: *web
231
294
  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"
232
296
  - name: "icon_circle"
233
297
  platforms: *web
234
298
  description: Similar to Icon, Icon Circle is a graphical symbol within a circle used to visually indicate an object or function.
299
+ status: "stable"
235
300
  - name: "icon_stat_value"
236
301
  platforms: *web
237
302
  description:
303
+ status: "stable"
238
304
  - name: "icon_value"
239
305
  platforms: *web
240
306
  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"
241
308
  - name: "user_badge"
242
309
  platforms: *web
243
310
  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"
244
312
  - name: "image"
245
313
  platforms: *web
246
314
  description: A responsive image component.
315
+ status: "stable"
247
316
  - name: "lightbox"
248
317
  platforms: *react_only
249
318
  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"
250
320
  - name: "star_rating"
251
321
  platforms: *web
252
322
  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"
253
324
  - name: layout_and_structure
254
325
  description:
255
326
  components:
256
327
  - name: "flex"
257
328
  platforms: *web
258
329
  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"
259
331
  - name: "layout"
260
332
  platforms: *web
261
333
  description: Layouts used for positioning content inside of pages, cards, or containers.
334
+ status: "stable"
262
335
  - name: "card"
263
336
  platforms: *all
264
337
  description:
338
+ status: "stable"
265
339
  - name: "section_separator"
266
340
  platforms: *web
267
341
  description: Section separator is a divider line that compartmentalizes content, typically used on cards or white backgrounds.
342
+ status: "stable"
268
343
  - name: "background"
269
344
  platforms: *web
270
345
  description: The background kit is used for adding a background to a page or to any container.
346
+ status: "stable"
271
347
  - name: "collapsible"
272
348
  platforms: *web
273
349
  description:
350
+ status: "stable"
274
351
  - name: message_text_patterns
275
352
  description:
276
353
  components:
277
354
  - name: "highlight"
278
355
  platforms: *web
279
356
  description: Highlight is used to pick out or emphasize content.
357
+ status: "stable"
280
358
  - name: "message"
281
359
  platforms: *web
282
360
  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"
283
362
  - name: navigation
284
363
  description:
285
364
  components:
286
365
  - name: "bread_crumbs"
287
366
  platforms: *web
288
367
  description: BreadCrumbs can be used for keeping a user aware of their route location.
368
+ status: "stable"
289
369
  - name: "nav"
290
370
  platforms: *web
291
371
  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"
292
373
  - name: "pagination"
293
374
  platforms: *rails_only
294
375
  description:
376
+ status: "stable"
295
377
  - name: state_and_progress_indicators
296
378
  description:
297
379
  components:
298
380
  - name: "loading_inline"
299
381
  platforms: *web
300
382
  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"
301
384
  - name: "progress_pills"
302
385
  platforms: *web
303
386
  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"
304
388
  - name: "progress_simple"
305
389
  platforms: *web
306
390
  description: Displays the current progress of an operation flow. User understanding increases when paired with labels or numbers.
307
391
  - name: "progress_step"
308
392
  platforms: *web
309
393
  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"
310
395
  - name: "walkthrough"
311
396
  platforms: *web
312
397
  description:
398
+ status: "stable"
313
399
  - name: "timeline"
314
400
  platforms: *web
315
401
  description: The timeline kit can use two different line styles in the same timeline - solid and dotted line styles.
402
+ status: "stable"
316
403
  - name: tags
317
404
  description:
318
405
  components:
319
406
  - name: "badge"
320
407
  platforms: *web
321
408
  description: Badges can be used for notification, tags, and status. They are used for count and numbers.
409
+ status: "stable"
322
410
  - name: "pill"
323
411
  platforms: *all
324
412
  description: A pill uses both a keyword and a specific color to categorize an item.
413
+ status: "stable"
325
414
  - name: "hashtag"
326
415
  platforms: *web
327
416
  description: Hashtag is used to display home, project and other forms of IDs. They can be used as a link.
417
+ status: "stable"
328
418
  - name: typography
329
419
  description: ""
330
420
  components:
331
421
  - name: "body"
332
422
  platforms: *web
333
423
  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"
334
425
  - name: "caption"
335
426
  platforms: *web
336
427
  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"
337
429
  - name: "detail"
338
430
  platforms: *web
339
431
  description: Used for tables or designs with large amounts of data or text.
432
+ status: "stable"
340
433
  - name: "title"
341
434
  platforms: *web
342
435
  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"
343
437
  - name: user
344
438
  description:
345
439
  components:
346
440
  - name: "avatar"
347
441
  platforms: *all
348
442
  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"
349
444
  - name: "avatar_action_button"
350
445
  platforms: *web
351
446
  description:
447
+ status: "stable"
352
448
  - name: "multiple_users"
353
449
  platforms: *web
354
450
  description: The multiple users kit is used to show that more than one user is associated to an action or item.
451
+ status: "stable"
355
452
  - name: "multiple_users_stacked"
356
453
  platforms: *web
357
454
  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"
358
456
  - name: "user"
359
457
  platforms: *web
360
458
  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/lib/playbook/version.rb CHANGED
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "13.16.0"
5
- VERSION = "13.16.0.pre.alpha.PBNTR178AdvancedTableDocs2072"
5
+ VERSION = "13.16.0.pre.alpha.PBNTR184betaflaginmenuyml2085"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 13.16.0.pre.alpha.PBNTR178AdvancedTableDocs2072
4
+ version: 13.16.0.pre.alpha.PBNTR184betaflaginmenuyml2085
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2024-02-02 00:00:00.000000000 Z
12
+ date: 2024-02-05 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -287,24 +287,9 @@ files:
287
287
  - app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss
288
288
  - app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx
289
289
  - app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx
290
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx
291
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md
292
290
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx
293
291
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
294
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
295
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md
296
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx
297
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md
298
292
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx
299
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md
300
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx
301
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md
302
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx
303
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md
304
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx
305
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.md
306
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx
307
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.md
308
293
  - app/pb_kits/playbook/pb_advanced_table/docs/_description.md
309
294
  - app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js
310
295
  - app/pb_kits/playbook/pb_advanced_table/docs/example.yml
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx DELETED
@@ -1,52 +0,0 @@
1
- import React from "react";
2
- import { AdvancedTable } from "../../";
3
- import { MOCK_DATA } from "./_mock_data";
4
-
5
- const AdvancedTableCollapsibleTrail = (props) => {
6
- const columnDefinitions = [
7
- {
8
- accessor: "year",
9
- label: "Year",
10
- cellAccessors: ["quarter", "month", "day"],
11
- },
12
- {
13
- accessor: "newEnrollments",
14
- label: "New Enrollments",
15
- },
16
- {
17
- accessor: "scheduledMeetings",
18
- label: "Scheduled Meetings",
19
- },
20
- {
21
- accessor: "attendanceRate",
22
- label: "Attendance Rate",
23
- },
24
- {
25
- accessor: "completedClasses",
26
- label: "Completed Classes",
27
- },
28
- {
29
- accessor: "classCompletionRate",
30
- label: "Class Completion Rate",
31
- },
32
- {
33
- accessor: "graduatedStudents",
34
- label: "Graduated Students",
35
- },
36
- ];
37
-
38
- return (
39
- <div>
40
- <AdvancedTable
41
- columnDefinitions={columnDefinitions}
42
- tableData={MOCK_DATA}
43
- {...props}
44
- >
45
- <AdvancedTable.Header />
46
- <AdvancedTable.Body collapsibleTrail={false} />
47
- </AdvancedTable>
48
- </div>
49
- );
50
- };
51
-
52
- export default AdvancedTableCollapsibleTrail;
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md DELETED
@@ -1 +0,0 @@
1
- `collapsibleTrail` is an optional prop that is set to 'true' by default. If set to 'false', it will remove the trail on the left of rows when subRows are toggled open.
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx DELETED
@@ -1,59 +0,0 @@
1
- import React, { useState } from "react";
2
- import { AdvancedTable } from "../../";
3
- import { MOCK_DATA } from "./_mock_data";
4
-
5
- const AdvancedTableExpandedControl = (props) => {
6
- const columnDefinitions = [
7
- {
8
- accessor: "year",
9
- label: "Year",
10
- cellAccessors: ["quarter", "month", "day"],
11
- },
12
- {
13
- accessor: "newEnrollments",
14
- label: "New Enrollments",
15
- },
16
- {
17
- accessor: "scheduledMeetings",
18
- label: "Scheduled Meetings",
19
- },
20
- {
21
- accessor: "attendanceRate",
22
- label: "Attendance Rate",
23
- },
24
- {
25
- accessor: "completedClasses",
26
- label: "Completed Classes",
27
- },
28
- {
29
- accessor: "classCompletionRate",
30
- label: "Class Completion Rate",
31
- },
32
- {
33
- accessor: "graduatedStudents",
34
- label: "Graduated Students",
35
- },
36
- ];
37
-
38
- //State for manually effecting what is expanded
39
- const [expanded, setExpanded] = useState({'0': true, '0.0': true, '0.0.1': true})
40
-
41
- //Passing expanded state to AdvancedTable as prop
42
- const expandedControl = {
43
- value: expanded,
44
- onChange: setExpanded,
45
- }
46
-
47
- return (
48
- <div>
49
- <AdvancedTable
50
- columnDefinitions={columnDefinitions}
51
- expandedControl={expandedControl}
52
- tableData={MOCK_DATA}
53
- {...props}
54
- />
55
- </div>
56
- );
57
- };
58
-
59
- export default AdvancedTableExpandedControl;
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md DELETED
@@ -1,18 +0,0 @@
1
- `expandedControl` is an optional prop that can be used to gain greater control over the expansion state of the Advanced Table. Tanstack handles expansion itself, however it does provide for a way to handle the state manually if needed. Usecases for this include needing to store the expansion state so it persists on page reload, set an initial expansion state, etc.
2
-
3
- In this example we are showing that if initial expansion state is set, it will render the table expanded according to that state.
4
-
5
- The expanded state must be an object with key/value pairs where the key is the row id and the value is a boolean, true or false. Tanstack by default assigns row ids based on index and depth of the row as can be seen in this example. For more information on row ids, see [here](https://tanstack.com/table/v8/docs/api/core/row#id).
6
-
7
- ### Single Row Expansion
8
-
9
- By default, the click event on the row level toggleExpansion icon simply toggles the immediate sub rows open or closed. If you want to attach further logic to that button, the optional `onRowToggleClick` prop can be used. This click event provides one argument that can be hooked into: the current `row` object. Any additional functionality provided through this onClick will be applied in addition to the default.
10
-
11
- ### Multi-Row Expansion
12
-
13
- Similar to the row level click event, the default of the click event on the toggleExpansion buttons that render in the first column header (and the subRow Header rows if prop enabled) toggles all top level rows open and closed. If you want to attach further logic to that button, the optional `onToggleExpansionClick` prop can be used. This click event provides one argument that can be hooked into: the current `row` object. Any additional functionality provided through this onClick will be applied in addition to the default.
14
-
15
- ### ToggleExpansionIcon
16
-
17
- `ToggleExpansionIcon` is another optional prop that can be used to customize the icon for the toggleExpansion button. This prop takes a string value with the default set to `arrows-from-line`. All strings must be valid FA icons.
18
-
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx DELETED
@@ -1,60 +0,0 @@
1
- import React, { useState } from "react";
2
- import { AdvancedTable } from "../../";
3
- import { Button } from "../../"
4
- import { MOCK_DATA } from "./_mock_data";
5
-
6
- const AdvancedTableLoading = (props) => {
7
-
8
- const [isloading, setIsLoading] = useState(true)
9
-
10
- const columnDefinitions = [
11
- {
12
- accessor: "year",
13
- label: "Year",
14
- cellAccessors: ["quarter", "month", "day"],
15
- },
16
- {
17
- accessor: "newEnrollments",
18
- label: "New Enrollments",
19
- },
20
- {
21
- accessor: "scheduledMeetings",
22
- label: "Scheduled Meetings",
23
- },
24
- {
25
- accessor: "attendanceRate",
26
- label: "Attendance Rate",
27
- },
28
- {
29
- accessor: "completedClasses",
30
- label: "Completed Classes",
31
- },
32
- {
33
- accessor: "classCompletionRate",
34
- label: "Class Completion Rate",
35
- },
36
- {
37
- accessor: "graduatedStudents",
38
- label: "Graduated Students",
39
- },
40
- ];
41
-
42
- return (
43
- <div>
44
- <Button marginBottom="md"
45
- onClick={()=> setIsLoading(!isloading)}
46
- text="Toggle Loading State"
47
- variant="secondary"
48
- {...props}
49
- />
50
- <AdvancedTable
51
- columnDefinitions={columnDefinitions}
52
- loading={isloading}
53
- tableData={MOCK_DATA}
54
- {...props}
55
- />
56
- </div>
57
- );
58
- };
59
-
60
- export default AdvancedTableLoading;
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.md DELETED
@@ -1,3 +0,0 @@
1
- the optional `loading` prop takes a boolean value that can be managed using state. If loading is true, the table will display the loading skeleton and once loading is false, the table will render with the data provided.
2
-
3
- By default, the inital row count of the loading skeleton is set to 10. If you want more control over this initial row count, the optional `initialLoadingRowCount` prop can be used to to pass in a number. __NOTE__: This is only for the first render of the table, subsequent loading skeleton row count logic is handled within the kit itself.
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md DELETED
@@ -1,5 +0,0 @@
1
- the `enableSorting` prop is a boolean prop set to false by default. If true, the table will add sort logic linked to the sort button in the header. Clicking the sort button will toggle sort between ascending and descending. Currently this sort functionality is only available on the first column.
2
-
3
- ### sortIcon
4
-
5
- An optional prop, `sortIcon` allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when sort direction is desc, and the second value will replace the default icon when sort direction is asc. `sortIcon` also allows you to pass it a single icon as a string, in which case the icon will not toggle with the sort state. Default for this prop is `["arrow-up-short-wide", "arrow-down-short-wide"]`. All strings must be valid FA icons.
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx DELETED
@@ -1,63 +0,0 @@
1
- import React, { useState } from "react";
2
- import { AdvancedTable } from "../..";
3
- import { MOCK_DATA } from "./_mock_data";
4
-
5
- const AdvancedTableSortControl = (props) => {
6
- const columnDefinitions = [
7
- {
8
- accessor: "year",
9
- label: "Year",
10
- cellAccessors: ["quarter", "month", "day"],
11
- },
12
- {
13
- accessor: "newEnrollments",
14
- label: "New Enrollments",
15
- },
16
- {
17
- accessor: "scheduledMeetings",
18
- label: "Scheduled Meetings",
19
- },
20
- {
21
- accessor: "attendanceRate",
22
- label: "Attendance Rate",
23
- },
24
- {
25
- accessor: "completedClasses",
26
- label: "Completed Classes",
27
- },
28
- {
29
- accessor: "classCompletionRate",
30
- label: "Class Completion Rate",
31
- },
32
- {
33
- accessor: "graduatedStudents",
34
- label: "Graduated Students",
35
- },
36
- ];
37
-
38
- //State for sort direction
39
- const [isSortDesc, setIsSortDesc] = useState({desc: false})
40
-
41
- // //Passing sort state to AdvancedTable as prop
42
- const sortControl = {
43
- value: isSortDesc,
44
- onChange: setIsSortDesc,
45
- }
46
-
47
-
48
- return (
49
- <div>
50
- <AdvancedTable
51
- columnDefinitions={columnDefinitions}
52
- sortControl={sortControl}
53
- tableData={MOCK_DATA}
54
- {...props}
55
- >
56
- <AdvancedTable.Header enableSorting />
57
- <AdvancedTable.Body />
58
- </AdvancedTable>
59
- </div>
60
- );
61
- };
62
-
63
- export default AdvancedTableSortControl;
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md DELETED
@@ -1,3 +0,0 @@
1
- `sortControl` is an optional prop that can be used to gain greater control over the sort state of the Advanced Table. Tanstack handles sort itself, however it does provide for a way to handle the state manually if needed. Usecases for this include needing to store the sort state so it persists on page reload, set an initial sort state, etc.
2
-
3
- The sort state must be an object with a single key/value pair, with the key being "desc" and the value being a boolean. The default for sort directino is `desc: true`.
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx DELETED
@@ -1,57 +0,0 @@
1
- import React from "react";
2
- import { AdvancedTable } from "../..";
3
- import { MOCK_DATA } from "./_mock_data";
4
-
5
- const AdvancedTableSubrowHeaders = (props) => {
6
- const columnDefinitions = [
7
- {
8
- accessor: "year",
9
- label: "Year",
10
- cellAccessors: ["quarter", "month", "day"],
11
- },
12
- {
13
- accessor: "newEnrollments",
14
- label: "New Enrollments",
15
- },
16
- {
17
- accessor: "scheduledMeetings",
18
- label: "Scheduled Meetings",
19
- },
20
- {
21
- accessor: "attendanceRate",
22
- label: "Attendance Rate",
23
- },
24
- {
25
- accessor: "completedClasses",
26
- label: "Completed Classes",
27
- },
28
- {
29
- accessor: "classCompletionRate",
30
- label: "Class Completion Rate",
31
- },
32
- {
33
- accessor: "graduatedStudents",
34
- label: "Graduated Students",
35
- },
36
- ];
37
-
38
- //Render the subRow header rows
39
- const subRowHeaders = ["Quarter", "Month", "Day"]
40
-
41
-
42
- return (
43
- <div>
44
- <AdvancedTable
45
- columnDefinitions={columnDefinitions}
46
- enableToggleExpansion="all"
47
- tableData={MOCK_DATA}
48
- {...props}
49
- >
50
- <AdvancedTable.Header />
51
- <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
52
- </AdvancedTable>
53
- </div>
54
- );
55
- };
56
-
57
- export default AdvancedTableSubrowHeaders;
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md DELETED
@@ -1,3 +0,0 @@
1
- `subRowHeaders` is an optional prop that if present will add header rows at each level of the nested data. The prop takes an array of strings, each string being the text for each header row. The array of strings must be in the order in which they need to be rendered in the UI according to depth.
2
-
3
- `enableToggleExpansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enableToggleExpansion` is a string that can be 'all' or 'header". If set to 'all', the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to 'header' button will only appear in header and NOT in subRow headers. This is set to 'headeer' by default.
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx DELETED
@@ -1,61 +0,0 @@
1
- import React from "react";
2
- import { AdvancedTable } from "../../";
3
- import { MOCK_DATA } from "./_mock_data";
4
-
5
- const AdvancedTableTableOptions = (props) => {
6
- const columnDefinitions = [
7
- {
8
- accessor: "year",
9
- label: "Year",
10
- cellAccessors: ["quarter", "month", "day"],
11
- },
12
- {
13
- accessor: "newEnrollments",
14
- label: "New Enrollments",
15
- },
16
- {
17
- accessor: "scheduledMeetings",
18
- label: "Scheduled Meetings",
19
- },
20
- {
21
- accessor: "attendanceRate",
22
- label: "Attendance Rate",
23
- },
24
- {
25
- accessor: "completedClasses",
26
- label: "Completed Classes",
27
- },
28
- {
29
- accessor: "classCompletionRate",
30
- label: "Class Completion Rate",
31
- },
32
- {
33
- accessor: "graduatedStudents",
34
- label: "Graduated Students",
35
- },
36
- ];
37
-
38
- const tableOptions = {
39
- initialState: {
40
- sorting: [
41
- {
42
- id: "year",
43
- desc: true,
44
- },
45
- ],
46
- },
47
- }
48
-
49
- return (
50
- <div>
51
- <AdvancedTable
52
- columnDefinitions={columnDefinitions}
53
- tableData={MOCK_DATA}
54
- tableOptions={tableOptions}
55
- {...props}
56
- />
57
- </div>
58
- );
59
- };
60
-
61
- export default AdvancedTableTableOptions;
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.md DELETED
@@ -1,3 +0,0 @@
1
- The Tanstack table consumes the useReactTable hook to create the table. This hook takes an object that can contain any of the functions that the Tanstack table provides. The advancedTable's optional `tableOptions` can be used to pass tanstack options to the kit.
2
-
3
- In the above example, we are using the initialState option provided by tanstack that takes sort as one of it's values. Setting it to true for the first column is reversing the sort order on first render of the table. For a complete list of possible options and hoe to use them, see [here](https://tanstack.com/table/v8/docs/api/core/table#usereacttable--createsolidtable--usevuetable--createsveltetable)
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx DELETED
@@ -1,55 +0,0 @@
1
- import React from "react";
2
- import { AdvancedTable } from "../../";
3
- import { MOCK_DATA } from "./_mock_data";
4
-
5
- const AdvancedTableTableProps = (props) => {
6
- const columnDefinitions = [
7
- {
8
- accessor: "year",
9
- label: "Year",
10
- cellAccessors: ["quarter", "month", "day"],
11
- },
12
- {
13
- accessor: "newEnrollments",
14
- label: "New Enrollments",
15
- },
16
- {
17
- accessor: "scheduledMeetings",
18
- label: "Scheduled Meetings",
19
- },
20
- {
21
- accessor: "attendanceRate",
22
- label: "Attendance Rate",
23
- },
24
- {
25
- accessor: "completedClasses",
26
- label: "Completed Classes",
27
- },
28
- {
29
- accessor: "classCompletionRate",
30
- label: "Class Completion Rate",
31
- },
32
- {
33
- accessor: "graduatedStudents",
34
- label: "Graduated Students",
35
- },
36
- ];
37
-
38
- const tableProps = {
39
- container: false,
40
- sticky: true
41
- }
42
-
43
- return (
44
- <div>
45
- <AdvancedTable
46
- columnDefinitions={columnDefinitions}
47
- tableData={MOCK_DATA}
48
- tableProps={tableProps}
49
- {...props}
50
- />
51
- </div>
52
- );
53
- };
54
-
55
- export default AdvancedTableTableProps;
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.md DELETED
@@ -1 +0,0 @@
1
- This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table/react) under the hood which comes with it's own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `tableProps` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table/react).