playbook_ui_docs 14.24.0.pre.alpha.testingwithoutlazyload9529 → 14.24.0.pre.rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header_rails.html.erb +1 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.html.erb +1 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -7
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +0 -6
  6. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb +1 -1
  7. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_rails.md +1 -2
  8. data/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml +0 -1
  9. data/app/pb_kits/playbook/pb_date/docs/example.yml +0 -2
  10. data/app/pb_kits/playbook/pb_date/docs/index.js +0 -1
  11. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.jsx +0 -1
  12. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_react.md +1 -1
  13. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +2 -3
  14. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -2
  15. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +0 -2
  16. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js +0 -1
  17. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -1
  18. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_rails.md +1 -3
  19. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md +1 -3
  20. data/app/pb_kits/playbook/pb_pagination/docs/example.yml +0 -1
  21. data/app/pb_kits/playbook/pb_pagination/docs/index.js +0 -1
  22. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb +0 -1
  23. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_continuous.jsx +69 -0
  24. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx +71 -0
  25. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_multi_beacon.jsx +110 -0
  26. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_beacon.jsx +76 -0
  27. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_overlay.jsx +76 -0
  28. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_styled.jsx +76 -0
  29. data/app/pb_kits/playbook/pb_walkthrough/docs/example.yml +10 -0
  30. data/app/pb_kits/playbook/pb_walkthrough/docs/index.js +6 -0
  31. data/dist/playbook-doc.js +2 -2
  32. metadata +10 -29
  33. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.html.erb +0 -43
  34. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx +0 -64
  35. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.jsx +0 -60
  36. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.md +0 -3
  37. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row.jsx +0 -57
  38. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row.md +0 -1
  39. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column.jsx +0 -55
  40. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column.md +0 -6
  41. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column_for_multi_column.jsx +0 -80
  42. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column_for_multi_column.md +0 -1
  43. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.jsx +0 -107
  44. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.md +0 -1
  45. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_input_options.html.erb +0 -24
  46. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_input_options.md +0 -3
  47. data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.html.erb +0 -4
  48. data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.jsx +0 -17
  49. data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.md +0 -1
  50. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options.jsx +0 -90
  51. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md +0 -4
  52. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.html.erb +0 -22
  53. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.jsx +0 -43
  54. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.md +0 -1
  55. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_show_checked_children.html.erb +0 -75
  56. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_show_checked_children.jsx +0 -94
  57. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_show_checked_children.md +0 -3
  58. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control.jsx +0 -112
  59. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control_react.md +0 -3
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui_docs
3
3
  version: !ruby/object:Gem::Version
4
- version: 14.24.0.pre.alpha.testingwithoutlazyload9529
4
+ version: 14.24.0.pre.rc.0
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: 2025-08-12 00:00:00.000000000 Z
12
+ date: 2025-07-17 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: playbook_ui
@@ -54,8 +54,6 @@ files:
54
54
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.html.erb
55
55
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.jsx
56
56
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.md
57
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.html.erb
58
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx
59
57
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx
60
58
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md
61
59
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx
@@ -98,10 +96,6 @@ files:
98
96
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading_react.md
99
97
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_no_subrows.html.erb
100
98
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_no_subrows.jsx
101
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.jsx
102
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.md
103
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row.jsx
104
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row.md
105
99
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.jsx
106
100
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.md
107
101
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx
@@ -137,10 +131,6 @@ files:
137
131
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md
138
132
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx
139
133
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md
140
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column.jsx
141
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column.md
142
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column_for_multi_column.jsx
143
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column_for_multi_column.md
144
134
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx
145
135
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md
146
136
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx
@@ -163,8 +153,6 @@ files:
163
153
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md
164
154
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.jsx
165
155
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md
166
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.jsx
167
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.md
168
156
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.html.erb
169
157
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.md
170
158
  - app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js
@@ -462,8 +450,6 @@ files:
462
450
  - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_click.jsx
463
451
  - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.html.erb
464
452
  - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.jsx
465
- - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_input_options.html.erb
466
- - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_input_options.md
467
453
  - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.html.erb
468
454
  - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx
469
455
  - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.md
@@ -583,9 +569,6 @@ files:
583
569
  - app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb
584
570
  - app/pb_kits/playbook/pb_date/docs/_date_variants.jsx
585
571
  - app/pb_kits/playbook/pb_date/docs/_date_variants_swift.md
586
- - app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.html.erb
587
- - app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.jsx
588
- - app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.md
589
572
  - app/pb_kits/playbook/pb_date/docs/_description.md
590
573
  - app/pb_kits/playbook/pb_date/docs/example.yml
591
574
  - app/pb_kits/playbook/pb_date/docs/index.js
@@ -897,8 +880,6 @@ files:
897
880
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb
898
881
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.jsx
899
882
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md
900
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options.jsx
901
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md
902
883
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx
903
884
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md
904
885
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb
@@ -1015,9 +996,6 @@ files:
1015
996
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
1016
997
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.md
1017
998
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_swift.md
1018
- - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.html.erb
1019
- - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.jsx
1020
- - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.md
1021
999
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb
1022
1000
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.jsx
1023
1001
  - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions_swift.md
@@ -1465,9 +1443,6 @@ files:
1465
1443
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md
1466
1444
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.jsx
1467
1445
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.md
1468
- - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_show_checked_children.html.erb
1469
- - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_show_checked_children.jsx
1470
- - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_show_checked_children.md
1471
1446
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb
1472
1447
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx
1473
1448
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.md
@@ -1615,8 +1590,6 @@ files:
1615
1590
  - app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx
1616
1591
  - app/pb_kits/playbook/pb_pagination/docs/_pagination_default_rails.md
1617
1592
  - app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md
1618
- - app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control.jsx
1619
- - app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control_react.md
1620
1593
  - app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx
1621
1594
  - app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md
1622
1595
  - app/pb_kits/playbook/pb_pagination/docs/data.js
@@ -2447,6 +2420,14 @@ files:
2447
2420
  - app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size.jsx
2448
2421
  - app/pb_kits/playbook/pb_user_badge/docs/example.yml
2449
2422
  - app/pb_kits/playbook/pb_user_badge/docs/index.js
2423
+ - app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_continuous.jsx
2424
+ - app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx
2425
+ - app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_multi_beacon.jsx
2426
+ - app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_beacon.jsx
2427
+ - app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_overlay.jsx
2428
+ - app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_styled.jsx
2429
+ - app/pb_kits/playbook/pb_walkthrough/docs/example.yml
2430
+ - app/pb_kits/playbook/pb_walkthrough/docs/index.js
2450
2431
  - app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.html.erb
2451
2432
  - app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.jsx
2452
2433
  - app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_default.html.erb
@@ -1,43 +0,0 @@
1
- <% column_definitions = [
2
- {
3
- accessor: "year",
4
- label: "Year",
5
- cellAccessors: ["quarter", "month", "day"],
6
- },
7
- {
8
- label: "Enrollment Data",
9
- columns: [
10
- {
11
- accessor: "newEnrollments",
12
- label: "New Enrollments",
13
- },
14
- {
15
- accessor: "scheduledMeetings",
16
- label: "Scheduled Meetings",
17
- },
18
- ],
19
- },
20
- {
21
- label: "Performance Data",
22
- columns: [
23
- {
24
- accessor: "attendanceRate",
25
- label: "Attendance Rate",
26
- },
27
- {
28
- accessor: "completedClasses",
29
- label: "Completed Classes",
30
- },
31
- {
32
- accessor: "classCompletionRate",
33
- label: "Class Completion Rate",
34
- },
35
- {
36
- accessor: "graduatedStudents",
37
- label: "Graduated Students",
38
- },
39
- ],
40
- },
41
- ] %>
42
-
43
- <%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true } }) %>
@@ -1,64 +0,0 @@
1
- import React from "react"
2
- import AdvancedTable from '../../pb_advanced_table/_advanced_table'
3
- import MOCK_DATA from "./advanced_table_mock_data.json"
4
-
5
- const AdvancedTableColumnHeadersVerticalBorder = (props) => {
6
- const columnDefinitions = [
7
- {
8
- accessor: "year",
9
- label: "Year",
10
- cellAccessors: ["quarter", "month", "day"],
11
- },
12
- {
13
- label: "Enrollment Data",
14
- columns: [
15
- {
16
- accessor: "newEnrollments",
17
- label: "New Enrollments",
18
- },
19
- {
20
- accessor: "scheduledMeetings",
21
- label: "Scheduled Meetings",
22
- },
23
- ],
24
- },
25
- {
26
- label: "Performance Data",
27
- columns: [
28
- {
29
- accessor: "attendanceRate",
30
- label: "Attendance Rate",
31
- },
32
- {
33
- accessor: "completedClasses",
34
- label: "Completed Classes",
35
- },
36
- {
37
- accessor: "classCompletionRate",
38
- label: "Class Completion Rate",
39
- },
40
- {
41
- accessor: "graduatedStudents",
42
- label: "Graduated Students",
43
- },
44
- ],
45
- },
46
- ];
47
-
48
- const tableProps = {
49
- verticalBorder: true
50
- }
51
-
52
- return (
53
- <>
54
- <AdvancedTable
55
- columnDefinitions={columnDefinitions}
56
- tableData={MOCK_DATA}
57
- tableProps={tableProps}
58
- {...props}
59
- />
60
- </>
61
- )
62
- }
63
-
64
- export default AdvancedTableColumnHeadersVerticalBorder
@@ -1,60 +0,0 @@
1
- import React from "react"
2
- import AdvancedTable from '../_advanced_table'
3
- import Background from '../../pb_background/_background'
4
- import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
5
-
6
- const AdvancedTablePaddingControl = (props) => {
7
- const columnDefinitions = [
8
- {
9
- accessor: "year",
10
- label: "Year",
11
- cellAccessors: ["quarter", "month", "day"],
12
- },
13
- {
14
- accessor: "newEnrollments",
15
- label: "New Enrollments",
16
- columnStyling:{cellPadding: "none"},
17
- customRenderer: (row, value) => (
18
- <Background
19
- backgroundColor={row.original.newEnrollments > 20 ? "success_secondary" : "warning_secondary"}
20
- padding="xs"
21
- >
22
- {value}
23
- </Background>
24
- ),
25
-
26
- },
27
- {
28
- accessor: "scheduledMeetings",
29
- label: "Scheduled Meetings",
30
- },
31
- {
32
- accessor: "attendanceRate",
33
- label: "Attendance Rate",
34
- },
35
- {
36
- accessor: "completedClasses",
37
- label: "Completed Classes",
38
- },
39
- {
40
- accessor: "classCompletionRate",
41
- label: "Class Completion Rate",
42
- },
43
- {
44
- accessor: "graduatedStudents",
45
- label: "Graduated Students",
46
- },
47
- ]
48
-
49
- return (
50
- <div>
51
- <AdvancedTable
52
- columnDefinitions={columnDefinitions}
53
- tableData={MOCK_DATA}
54
- {...props}
55
- />
56
- </div>
57
- )
58
- }
59
-
60
- export default AdvancedTablePaddingControl
@@ -1,3 +0,0 @@
1
- `columnStyling` can also be used to control padding on all cells in a given column via the use of the `cellPadding` key/value pair. `cellPadding` lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.
2
-
3
- This control can be used in conjunction with the `customRenderer` item within each columnDefinition to achieve custom background colors for individual cells as seen here.
@@ -1,57 +0,0 @@
1
- import React from "react"
2
- import AdvancedTable from '../_advanced_table'
3
- import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
4
-
5
- const AdvancedTablePaddingControlPerRow = (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 rowStyling = [
39
- {
40
- rowId: "1",
41
- cellPadding:"md"
42
- },
43
- ];
44
-
45
- return (
46
- <div>
47
- <AdvancedTable
48
- columnDefinitions={columnDefinitions}
49
- rowStyling={rowStyling}
50
- tableData={MOCK_DATA}
51
- {...props}
52
- />
53
- </div>
54
- )
55
- }
56
-
57
- export default AdvancedTablePaddingControlPerRow
@@ -1 +0,0 @@
1
- `rowStyling` can also be used to control padding on all cells in a given row via the use of the `cellPadding` key/value pair as shown here. `cellPadding` lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.
@@ -1,55 +0,0 @@
1
- import React from "react"
2
- import AdvancedTable from '../../pb_advanced_table/_advanced_table'
3
- import MOCK_DATA from "./advanced_table_mock_data.json"
4
-
5
- const AdvancedTableSortPerColumn = (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
- enableSort: true,
16
- },
17
- {
18
- accessor: "scheduledMeetings",
19
- label: "Scheduled Meetings",
20
- },
21
- {
22
- accessor: "attendanceRate",
23
- label: "Attendance Rate",
24
- enableSort: true,
25
- },
26
- {
27
- accessor: "completedClasses",
28
- label: "Completed Classes",
29
- },
30
- {
31
- accessor: "classCompletionRate",
32
- label: "Class Completion Rate",
33
- },
34
- {
35
- accessor: "graduatedStudents",
36
- label: "Graduated Students",
37
- },
38
- ]
39
-
40
- return (
41
- <div>
42
- <AdvancedTable
43
- columnDefinitions={columnDefinitions}
44
- enableSortingRemoval
45
- tableData={MOCK_DATA}
46
- {...props}
47
- >
48
- <AdvancedTable.Header />
49
- <AdvancedTable.Body />
50
- </AdvancedTable>
51
- </div>
52
- )
53
- }
54
-
55
- export default AdvancedTableSortPerColumn;
@@ -1,6 +0,0 @@
1
- Sorting can now be enabled on any of the columns. To do this, add `enableSort:true` to the columnDefinition of the column you want sorting enabled on. Once enabled, clicking on the header will toggle sort between ascending and descending.
2
-
3
- The optional `enableSortingRemoval` prop can also be used in conjunction with sorting functionality. This prop is set to 'false' by default but if set to 'true' sorting order will circle like: 'none' -> 'desc' -> 'asc' -> 'none' -> ...
4
- It is recommended that `enableSortingRemoval` be set to 'true' when sort is enabled on mutiple columns so that sorting direction is always clear via the sort icon.
5
-
6
- __NOTE:__ For sort on the first column, continue to use the separate `enableSorting` prop on AdvancedTable.Header as [shown here](https://playbook.powerapp.cloud/kits/advanced_table/sorting/react#enable-sorting).
@@ -1,80 +0,0 @@
1
- import React from "react"
2
- import AdvancedTable from '../../pb_advanced_table/_advanced_table'
3
- import MOCK_DATA from "./advanced_table_mock_data.json"
4
-
5
- const AdvancedTableSortPerColumnForMultiColumn = (props) => {
6
- const columnDefinitions = [
7
- {
8
- accessor: "year",
9
- label: "Year",
10
- cellAccessors: ["quarter", "month", "day"],
11
- },
12
- {
13
- label: "Enrollment Data",
14
- columns: [
15
- {
16
- label: "Enrollment Stats",
17
- columns: [
18
- {
19
- accessor: "newEnrollments",
20
- label: "New Enrollments",
21
- enableSort: true,
22
- },
23
- {
24
- accessor: "scheduledMeetings",
25
- label: "Scheduled Meetings",
26
- },
27
- ],
28
- },
29
- ],
30
- },
31
- {
32
- label: "Performance Data",
33
- columns: [
34
- {
35
- label: "Completion Metrics",
36
- columns: [
37
- {
38
- accessor: "completedClasses",
39
- label: "Completed Classes",
40
- enableSort: true,
41
- },
42
- {
43
- accessor: "classCompletionRate",
44
- label: "Class Completion Rate",
45
- },
46
- ],
47
- },
48
- {
49
- label: "Attendance",
50
- columns: [
51
- {
52
- accessor: "attendanceRate",
53
- label: "Attendance Rate",
54
- },
55
- {
56
- accessor: "scheduledMeetings",
57
- label: "Scheduled Meetings",
58
- },
59
- ],
60
- },
61
- ],
62
- },
63
- ];
64
-
65
- return (
66
- <div>
67
- <AdvancedTable
68
- columnDefinitions={columnDefinitions}
69
- enableSortingRemoval
70
- tableData={MOCK_DATA}
71
- {...props}
72
- >
73
- <AdvancedTable.Header enableSorting />
74
- <AdvancedTable.Body />
75
- </AdvancedTable>
76
- </div>
77
- )
78
- }
79
-
80
- export default AdvancedTableSortPerColumnForMultiColumn;
@@ -1 +0,0 @@
1
- Sorting on columns can also be applied to columns when using the multi-header variant, however in this case sorting can only be set on leaf columns NOT on parent columns.
@@ -1,107 +0,0 @@
1
- import React from "react"
2
- import AdvancedTable from '../../pb_advanced_table/_advanced_table'
3
- import Icon from "../../pb_icon/_icon"
4
- import Flex from "../../pb_flex/_flex"
5
- import Caption from "../../pb_caption/_caption"
6
- import Tooltip from "../../pb_tooltip/_tooltip"
7
- import MOCK_DATA from "./advanced_table_mock_data.json"
8
-
9
- const AdvancedTableWithCustomHeaderMultiHeader = (props) => {
10
-
11
- const columnDefinitions = [
12
- {
13
- accessor: "year",
14
- label: "Year",
15
- id: "year",
16
- cellAccessors: ["quarter", "month", "day"],
17
- },
18
- {
19
- label: "Enrollment Data",
20
- id: "enrollmentData",
21
- header: () => (
22
- <Flex alignItems="center"
23
- justifyContent="center"
24
- >
25
- <Caption marginRight="xs">Enrollments Data</Caption>
26
- <Tooltip placement="top"
27
- text="Whoa. I'm a Tooltip"
28
- zIndex={10}
29
- >
30
- <Icon cursor="pointer"
31
- icon="info"
32
- size="xs"
33
- />
34
- </Tooltip>
35
- </Flex>
36
- ),
37
- columns: [
38
- {
39
- label: "Enrollment Stats",
40
- id: "enrollmentStats",
41
- columns: [
42
- {
43
- accessor: "newEnrollments",
44
- id: "newEnrollments",
45
- label: "New Enrollments",
46
- },
47
- {
48
- accessor: "scheduledMeetings",
49
- id: "scheduledMeetings",
50
- label: "Scheduled Meetings",
51
- },
52
- ],
53
- },
54
- ],
55
- },
56
- {
57
- label: "Performance Data",
58
- id: "performanceData",
59
- columns: [
60
- {
61
- label: "Completion Metrics",
62
- id: "completionMetrics",
63
- columns: [
64
- {
65
- accessor: "completedClasses",
66
- label: "Completed Classes",
67
- id: "completedClasses",
68
- },
69
- {
70
- accessor: "classCompletionRate",
71
- label: "Class Completion Rate",
72
- id: "classCompletionRate",
73
- },
74
- ],
75
- },
76
- {
77
- label: "Attendance",
78
- id: "attendance",
79
- columns: [
80
- {
81
- accessor: "attendanceRate",
82
- label: "Attendance Rate",
83
- id: "attendanceRate",
84
- },
85
- {
86
- accessor: "scheduledMeetings",
87
- label: "Scheduled Meetings",
88
- id: "scheduledMeetings",
89
- },
90
- ],
91
- },
92
- ],
93
- },
94
- ];
95
-
96
- return (
97
- <div>
98
- <AdvancedTable
99
- columnDefinitions={columnDefinitions}
100
- tableData={MOCK_DATA}
101
- {...props}
102
- />
103
- </div>
104
- )
105
- }
106
-
107
- export default AdvancedTableWithCustomHeaderMultiHeader;
@@ -1 +0,0 @@
1
- The optional `header` key/value pair within `columnDefinitions` can also be used with multi headers as seen here.
@@ -1,24 +0,0 @@
1
- <%= pb_rails("circle_icon_button", props: {
2
- icon: "plus",
3
- input_options: {
4
- data: { "test-id": "add-button", remote: true },
5
- }
6
- }) %>
7
- <br/>
8
- <%= pb_rails("circle_icon_button", props: {
9
- icon: "pen",
10
- variant: "secondary",
11
- input_options: {
12
- data: { "test-id": "edit-button" },
13
- classname: "custom-secondary-button-class"
14
- }
15
- }) %>
16
- <br/>
17
- <%= pb_rails("circle_icon_button", props: {
18
- icon: "user",
19
- variant: "link",
20
- input_options: {
21
- data: { "test-id": "user-button" },
22
- id: "user-button-id"
23
- }
24
- }) %>
@@ -1,3 +0,0 @@
1
- Use the `input_options` prop to pass additional attributes directly to the internal Playbook Button component. While the wrapper div has access to the standard `data` prop from KitBase, `input_options` allows you to attach attributes specifically to the internal button element.
2
-
3
- This is particularly useful when you need data attributes or other HTML attributes to apply to the button itself.
@@ -1,4 +0,0 @@
1
- <%= pb_rails("date", props: {
2
- date: Date.today,
3
- show_current_year: true
4
- }) %>
@@ -1,17 +0,0 @@
1
- import React from 'react'
2
-
3
- import FormattedDate from '../../pb_date/_date'
4
-
5
- const DateWithShowCurrentYear = (props) => {
6
- return (
7
- <>
8
- <FormattedDate
9
- showCurrentYear
10
- value={new Date()}
11
- {...props}
12
- />
13
- </>
14
- )
15
- }
16
-
17
- export default DateWithShowCurrentYear