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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header_rails.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +0 -6
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb +1 -1
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_rails.md +1 -2
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_date/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_date/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.jsx +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_react.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +2 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +1 -1
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_rails.md +1 -3
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md +1 -3
- data/app/pb_kits/playbook/pb_pagination/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_pagination/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb +0 -1
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_continuous.jsx +69 -0
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx +71 -0
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_multi_beacon.jsx +110 -0
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_beacon.jsx +76 -0
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_overlay.jsx +76 -0
- data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_styled.jsx +76 -0
- data/app/pb_kits/playbook/pb_walkthrough/docs/example.yml +10 -0
- data/app/pb_kits/playbook/pb_walkthrough/docs/index.js +6 -0
- data/dist/playbook-doc.js +2 -2
- metadata +10 -29
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.html.erb +0 -43
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx +0 -64
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.jsx +0 -60
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.md +0 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row.jsx +0 -57
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row.md +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column.jsx +0 -55
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column.md +0 -6
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column_for_multi_column.jsx +0 -80
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column_for_multi_column.md +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.jsx +0 -107
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.md +0 -1
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_input_options.html.erb +0 -24
- data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_input_options.md +0 -3
- data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.html.erb +0 -4
- data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.jsx +0 -17
- data/app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.md +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options.jsx +0 -90
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md +0 -4
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.html.erb +0 -22
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.jsx +0 -43
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.md +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_show_checked_children.html.erb +0 -75
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_show_checked_children.jsx +0 -94
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_show_checked_children.md +0 -3
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control.jsx +0 -112
- 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.
|
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-
|
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 } }) %>
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx
DELETED
@@ -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.
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row.jsx
DELETED
@@ -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;
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column_for_multi_column.md
DELETED
@@ -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.
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.jsx
DELETED
@@ -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;
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.md
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
The optional `header` key/value pair within `columnDefinitions` can also be used with multi headers as seen here.
|
data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_input_options.html.erb
DELETED
@@ -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,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
|