playbook_ui 14.17.0.pre.alpha.PLAY20547327 → 14.17.0.pre.alpha.alphaforaudiences7167
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/Components/RegularTableView.tsx +3 -23
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +3 -67
- data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts +2 -1
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +19 -29
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +128 -67
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +0 -9
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +2 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +2 -6
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +2 -6
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -5
- data/app/pb_kits/playbook/pb_background/_background.scss +0 -26
- data/app/pb_kits/playbook/pb_background/_background.tsx +3 -5
- data/app/pb_kits/playbook/pb_background/background.test.js +0 -5
- data/app/pb_kits/playbook/pb_background/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_background/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx +45 -19
- data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_copy_button/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_draggable/_draggable.scss +20 -43
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx +105 -102
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md +3 -3
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx +48 -50
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md +1 -1
- data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table.jsx → _draggable_with_table_react.jsx} +1 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +1 -3
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +6 -9
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +1 -4
- data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx +0 -68
- data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +3 -4
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
- data/app/pb_kits/playbook/pb_form_group/_form_group.scss +3 -23
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +5 -15
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +6 -39
- data/app/pb_kits/playbook/pb_layout/_layout.scss +1 -70
- data/app/pb_kits/playbook/pb_layout/_layout.tsx +2 -29
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx +118 -322
- data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md +1 -1
- data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx +43 -74
- data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx +4 -21
- data/app/pb_kits/playbook/pb_overlay/_overlay.scss +22 -49
- data/app/pb_kits/playbook/pb_overlay/_overlay.tsx +4 -15
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md +7 -1
- data/app/pb_kits/playbook/pb_overlay/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_overlay/docs/index.js +0 -3
- data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx +1 -39
- data/app/pb_kits/playbook/pb_table/_table.tsx +2 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md +1 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md +1 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md +1 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md +1 -3
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +1 -1
- data/app/pb_kits/playbook/pb_table/styles/_headers.scss +7 -19
- data/app/pb_kits/playbook/pb_table/table.rb +1 -13
- data/app/pb_kits/playbook/pb_table/table_header.rb +1 -13
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +5 -13
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_text_input/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_text_input/inputMask.ts +1 -8
- data/dist/chunks/_typeahead-7W5Ha5Td.js +22 -0
- data/dist/chunks/_weekday_stacked-DSKatW3m.js +45 -0
- data/dist/chunks/lib-BGzBzFZX.js +29 -0
- data/dist/chunks/{pb_form_validation-Bx1OK6xs.js → pb_form_validation-BvNy9Bd6.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +18 -49
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx +0 -66
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md +0 -10
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx +0 -58
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md +0 -6
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx +0 -64
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md +0 -8
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx +0 -55
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md +0 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb +0 -33
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md +0 -3
- data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +0 -97
- data/app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx +0 -35
- data/app/pb_kits/playbook/pb_background/docs/_background_overlay.md +0 -1
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx +0 -54
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md +0 -3
- data/app/pb_kits/playbook/pb_copy_button/usePBCopy.ts +0 -45
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx +0 -110
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md +0 -5
- data/app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx +0 -79
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx +0 -63
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md +0 -3
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx +0 -39
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md +0 -1
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx +0 -40
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md +0 -5
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb +0 -34
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md +0 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb +0 -36
- data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_rails.md +0 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx +0 -94
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md +0 -1
- data/dist/chunks/_typeahead-aRwivA3u.js +0 -22
- data/dist/chunks/_weekday_stacked-Bm5175-u.js +0 -45
- data/dist/chunks/lib-Cj4H6j1c.js +0 -29
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default_react.md → _draggable_default.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_default.html.erb → _draggable_default_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers_react.md → _draggable_multiple_containers.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_multiple_containers.html.erb → _draggable_multiple_containers_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards_react.md → _draggable_with_cards.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_cards.html.erb → _draggable_with_cards_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list_react.md → _draggable_with_list.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_list.html.erb → _draggable_with_list_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list_react.md → _draggable_with_selectable_list.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_selectable_list.html.erb → _draggable_with_selectable_list_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_with_table_rails.md → _draggable_with_table.md} +0 -0
data/lib/playbook/version.rb
CHANGED
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: 14.17.0.pre.alpha.
|
4
|
+
version: 14.17.0.pre.alpha.alphaforaudiences7167
|
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-04-
|
12
|
+
date: 2025-04-11 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -307,8 +307,6 @@ files:
|
|
307
307
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell_rails.md
|
308
308
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx
|
309
309
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
|
310
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx
|
311
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md
|
312
310
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
|
313
311
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md
|
314
312
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx
|
@@ -346,14 +344,6 @@ files:
|
|
346
344
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md
|
347
345
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx
|
348
346
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md
|
349
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx
|
350
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md
|
351
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx
|
352
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md
|
353
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx
|
354
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md
|
355
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb
|
356
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md
|
357
347
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx
|
358
348
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md
|
359
349
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx
|
@@ -378,7 +368,6 @@ files:
|
|
378
368
|
- app/pb_kits/playbook/pb_advanced_table/scss_partials/_chrome_styles.scss
|
379
369
|
- app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss
|
380
370
|
- app/pb_kits/playbook/pb_advanced_table/scss_partials/_pseudo_states.scss
|
381
|
-
- app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss
|
382
371
|
- app/pb_kits/playbook/pb_advanced_table/table_body.html.erb
|
383
372
|
- app/pb_kits/playbook/pb_advanced_table/table_body.rb
|
384
373
|
- app/pb_kits/playbook/pb_advanced_table/table_header.html.erb
|
@@ -432,8 +421,6 @@ files:
|
|
432
421
|
- app/pb_kits/playbook/pb_background/docs/_background_image.md
|
433
422
|
- app/pb_kits/playbook/pb_background/docs/_background_light.html.erb
|
434
423
|
- app/pb_kits/playbook/pb_background/docs/_background_light.jsx
|
435
|
-
- app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx
|
436
|
-
- app/pb_kits/playbook/pb_background/docs/_background_overlay.md
|
437
424
|
- app/pb_kits/playbook/pb_background/docs/_background_size.html.erb
|
438
425
|
- app/pb_kits/playbook/pb_background/docs/_background_size.jsx
|
439
426
|
- app/pb_kits/playbook/pb_background/docs/_background_size.md
|
@@ -835,12 +822,9 @@ files:
|
|
835
822
|
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb
|
836
823
|
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx
|
837
824
|
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.md
|
838
|
-
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx
|
839
|
-
- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md
|
840
825
|
- app/pb_kits/playbook/pb_copy_button/docs/example.yml
|
841
826
|
- app/pb_kits/playbook/pb_copy_button/docs/index.js
|
842
827
|
- app/pb_kits/playbook/pb_copy_button/index.js
|
843
|
-
- app/pb_kits/playbook/pb_copy_button/usePBCopy.ts
|
844
828
|
- app/pb_kits/playbook/pb_currency/_currency.scss
|
845
829
|
- app/pb_kits/playbook/pb_currency/_currency.tsx
|
846
830
|
- app/pb_kits/playbook/pb_currency/currency.html.erb
|
@@ -1200,35 +1184,33 @@ files:
|
|
1200
1184
|
- app/pb_kits/playbook/pb_draggable/_draggable.tsx
|
1201
1185
|
- app/pb_kits/playbook/pb_draggable/context/index.tsx
|
1202
1186
|
- app/pb_kits/playbook/pb_draggable/context/types.ts
|
1203
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_default.html.erb
|
1204
1187
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx
|
1188
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md
|
1189
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.html.erb
|
1205
1190
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md
|
1206
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_default_react.md
|
1207
1191
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx
|
1208
1192
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md
|
1209
1193
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx
|
1210
1194
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md
|
1211
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx
|
1212
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md
|
1213
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.html.erb
|
1214
1195
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
|
1196
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.md
|
1197
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.html.erb
|
1215
1198
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md
|
1216
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_react.md
|
1217
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.html.erb
|
1218
1199
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx
|
1200
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.md
|
1201
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb
|
1219
1202
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md
|
1220
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_react.md
|
1221
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.html.erb
|
1222
1203
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx
|
1204
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md
|
1205
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb
|
1223
1206
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.md
|
1224
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_react.md
|
1225
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.html.erb
|
1226
1207
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
|
1208
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.md
|
1209
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.html.erb
|
1227
1210
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.md
|
1228
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_react.md
|
1229
1211
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb
|
1230
|
-
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.
|
1231
|
-
- app/pb_kits/playbook/pb_draggable/docs/
|
1212
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md
|
1213
|
+
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx
|
1232
1214
|
- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md
|
1233
1215
|
- app/pb_kits/playbook/pb_draggable/docs/example.yml
|
1234
1216
|
- app/pb_kits/playbook/pb_draggable/docs/index.js
|
@@ -1851,7 +1833,6 @@ files:
|
|
1851
1833
|
- app/pb_kits/playbook/pb_layout/sidebar.html.erb
|
1852
1834
|
- app/pb_kits/playbook/pb_layout/sidebar.rb
|
1853
1835
|
- app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx
|
1854
|
-
- app/pb_kits/playbook/pb_layout/subcomponents/_participant.tsx
|
1855
1836
|
- app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx
|
1856
1837
|
- app/pb_kits/playbook/pb_legend/_legend.scss
|
1857
1838
|
- app/pb_kits/playbook/pb_legend/_legend.tsx
|
@@ -2210,19 +2191,13 @@ files:
|
|
2210
2191
|
- app/pb_kits/playbook/pb_online_status/online_status.test.js
|
2211
2192
|
- app/pb_kits/playbook/pb_overlay/_overlay.scss
|
2212
2193
|
- app/pb_kits/playbook/pb_overlay/_overlay.tsx
|
2213
|
-
- app/pb_kits/playbook/pb_overlay/docs/_overlay_color.jsx
|
2214
|
-
- app/pb_kits/playbook/pb_overlay/docs/_overlay_color.md
|
2215
2194
|
- app/pb_kits/playbook/pb_overlay/docs/_overlay_default.html.erb
|
2216
2195
|
- app/pb_kits/playbook/pb_overlay/docs/_overlay_default.jsx
|
2217
2196
|
- app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md
|
2218
|
-
- app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx
|
2219
|
-
- app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md
|
2220
2197
|
- app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.html.erb
|
2221
2198
|
- app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.jsx
|
2222
2199
|
- app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_rails.md
|
2223
2200
|
- app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_react.md
|
2224
|
-
- app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx
|
2225
|
-
- app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md
|
2226
2201
|
- app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.html.erb
|
2227
2202
|
- app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
|
2228
2203
|
- app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.md
|
@@ -2892,13 +2867,9 @@ files:
|
|
2892
2867
|
- app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md
|
2893
2868
|
- app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb
|
2894
2869
|
- app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md
|
2895
|
-
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb
|
2896
2870
|
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.jsx
|
2897
|
-
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md
|
2898
2871
|
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_react.md
|
2899
|
-
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb
|
2900
2872
|
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.jsx
|
2901
|
-
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_rails.md
|
2902
2873
|
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md
|
2903
2874
|
- app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb
|
2904
2875
|
- app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx
|
@@ -2987,8 +2958,6 @@ files:
|
|
2987
2958
|
- app/pb_kits/playbook/pb_text_input/docs/_text_input_no_label.jsx
|
2988
2959
|
- app/pb_kits/playbook/pb_text_input/docs/_text_input_options.html.erb
|
2989
2960
|
- app/pb_kits/playbook/pb_text_input/docs/_text_input_props_swift.md
|
2990
|
-
- app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.jsx
|
2991
|
-
- app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md
|
2992
2961
|
- app/pb_kits/playbook/pb_text_input/docs/example.yml
|
2993
2962
|
- app/pb_kits/playbook/pb_text_input/docs/index.js
|
2994
2963
|
- app/pb_kits/playbook/pb_text_input/index.js
|
@@ -3498,11 +3467,11 @@ files:
|
|
3498
3467
|
- app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
|
3499
3468
|
- app/pb_kits/playbook/utilities/text.ts
|
3500
3469
|
- app/pb_kits/playbook/utilities/validEmojiChecker.ts
|
3501
|
-
- dist/chunks/_typeahead-
|
3502
|
-
- dist/chunks/_weekday_stacked-
|
3470
|
+
- dist/chunks/_typeahead-7W5Ha5Td.js
|
3471
|
+
- dist/chunks/_weekday_stacked-DSKatW3m.js
|
3503
3472
|
- dist/chunks/lazysizes-B7xYodB-.js
|
3504
|
-
- dist/chunks/lib-
|
3505
|
-
- dist/chunks/pb_form_validation-
|
3473
|
+
- dist/chunks/lib-BGzBzFZX.js
|
3474
|
+
- dist/chunks/pb_form_validation-BvNy9Bd6.js
|
3506
3475
|
- dist/chunks/vendor.js
|
3507
3476
|
- dist/menu.yml
|
3508
3477
|
- dist/playbook-doc.js
|
@@ -1,66 +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 AdvancedTableExpandByDepth = (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 expandByDepth = [
|
39
|
-
{
|
40
|
-
depth: 0,
|
41
|
-
label: "Year",
|
42
|
-
},
|
43
|
-
{
|
44
|
-
depth: 1,
|
45
|
-
label: "Quarter",
|
46
|
-
},
|
47
|
-
{
|
48
|
-
depth: 2,
|
49
|
-
label: "Month",
|
50
|
-
}
|
51
|
-
]
|
52
|
-
|
53
|
-
return (
|
54
|
-
<div>
|
55
|
-
<AdvancedTable
|
56
|
-
columnDefinitions={columnDefinitions}
|
57
|
-
expandByDepth={expandByDepth}
|
58
|
-
onExpandByDepthClick={(depth, rows) => {console.log(depth, rows)}}
|
59
|
-
tableData={MOCK_DATA}
|
60
|
-
{...props}
|
61
|
-
/>
|
62
|
-
</div>
|
63
|
-
)
|
64
|
-
}
|
65
|
-
|
66
|
-
export default AdvancedTableExpandByDepth
|
@@ -1,10 +0,0 @@
|
|
1
|
-
The `expandByDepth` prop enables users to expand or collapse table rows by specific levels of nesting. When provided, it renders a dropdown that appears when the toggle icon in the header is clicked.
|
2
|
-
|
3
|
-
`expandByDepth` accepts an array of objects, where each object defines the depth level to target and the label to display in the dropdown. When a user selects an option:
|
4
|
-
|
5
|
-
**Expanding a depth**: Expands all rows at the selected depth AND all parent levels above it (if parent levels were closed), ensuring nested content is visible.
|
6
|
-
|
7
|
-
**Collapsing a depth**: Only collapses rows at the selected depth, keeping parent rows expanded for context.
|
8
|
-
|
9
|
-
If you want to attach further logic to each option click, the **optional** `onExpandByDepthClick` prop can be used. This click event provides 2 arguments that can be hooked into: the depth level of the clicked item AND all flattened table rows. Any additional functionality provided through this onClick will be applied in addition to the default.
|
10
|
-
|
@@ -1,58 +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 AdvancedTableStickyColumns = (props) => {
|
6
|
-
const columnDefinitions = [
|
7
|
-
{
|
8
|
-
accessor: "year",
|
9
|
-
label: "Year",
|
10
|
-
id: "year",
|
11
|
-
cellAccessors: ["quarter", "month", "day"],
|
12
|
-
},
|
13
|
-
{
|
14
|
-
accessor: "newEnrollments",
|
15
|
-
label: "New Enrollments",
|
16
|
-
id: "newEnrollments",
|
17
|
-
},
|
18
|
-
{
|
19
|
-
accessor: "scheduledMeetings",
|
20
|
-
label: "Scheduled Meetings",
|
21
|
-
id: "scheduledMeetings",
|
22
|
-
},
|
23
|
-
{
|
24
|
-
accessor: "attendanceRate",
|
25
|
-
label: "Attendance Rate",
|
26
|
-
id: "attendanceRate",
|
27
|
-
},
|
28
|
-
{
|
29
|
-
accessor: "completedClasses",
|
30
|
-
label: "Completed Classes",
|
31
|
-
id: "completedClasses",
|
32
|
-
},
|
33
|
-
{
|
34
|
-
accessor: "classCompletionRate",
|
35
|
-
label: "Class Completion Rate",
|
36
|
-
id: "classCompletionRate",
|
37
|
-
},
|
38
|
-
{
|
39
|
-
accessor: "graduatedStudents",
|
40
|
-
label: "Graduated Students",
|
41
|
-
id: "graduatedStudents",
|
42
|
-
},
|
43
|
-
]
|
44
|
-
|
45
|
-
return (
|
46
|
-
<div>
|
47
|
-
<AdvancedTable
|
48
|
-
columnDefinitions={columnDefinitions}
|
49
|
-
responsive="none"
|
50
|
-
stickyLeftColumn={["year"]}
|
51
|
-
tableData={MOCK_DATA}
|
52
|
-
{...props}
|
53
|
-
/>
|
54
|
-
</div>
|
55
|
-
)
|
56
|
-
}
|
57
|
-
|
58
|
-
export default AdvancedTableStickyColumns
|
@@ -1,6 +0,0 @@
|
|
1
|
-
To render sticky columns for the Advanced Table, you can use the `stickyLeftColumn` prop. This prop expects an array of the column ids you want to be sticky.
|
2
|
-
|
3
|
-
To achieve this:
|
4
|
-
- Make sure to provide an id for each column via columnDefinitions as shown below. Id can be any string.
|
5
|
-
- One or multiple columns can be made sticky, it is recommended to set the ids within `stickyLeftColumn` in the order in which the columns are rendered.
|
6
|
-
- It is recommended to set `responsive` to none when using `stickyLeftColumn` since responsive just makes the first column sticky and the slightly different styling for `responsive` and `stickyLeftColumn` may override each other in unexpected ways.
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.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 AdvancedTableStickyColumnsAndHeader = (props) => {
|
6
|
-
const columnDefinitions = [
|
7
|
-
{
|
8
|
-
accessor: "year",
|
9
|
-
label: "Year",
|
10
|
-
id: "year",
|
11
|
-
cellAccessors: ["quarter", "month", "day"],
|
12
|
-
},
|
13
|
-
{
|
14
|
-
accessor: "newEnrollments",
|
15
|
-
label: "New Enrollments",
|
16
|
-
id: "newEnrollments",
|
17
|
-
},
|
18
|
-
{
|
19
|
-
accessor: "scheduledMeetings",
|
20
|
-
label: "Scheduled Meetings",
|
21
|
-
id: "scheduledMeetings",
|
22
|
-
},
|
23
|
-
{
|
24
|
-
accessor: "attendanceRate",
|
25
|
-
label: "Attendance Rate",
|
26
|
-
id: "attendanceRate",
|
27
|
-
},
|
28
|
-
{
|
29
|
-
accessor: "completedClasses",
|
30
|
-
label: "Completed Classes",
|
31
|
-
id: "completedClasses",
|
32
|
-
},
|
33
|
-
{
|
34
|
-
accessor: "classCompletionRate",
|
35
|
-
label: "Class Completion Rate",
|
36
|
-
id: "classCompletionRate",
|
37
|
-
},
|
38
|
-
{
|
39
|
-
accessor: "graduatedStudents",
|
40
|
-
label: "Graduated Students",
|
41
|
-
id: "graduatedStudents",
|
42
|
-
},
|
43
|
-
]
|
44
|
-
|
45
|
-
const tableProps = {
|
46
|
-
sticky: true
|
47
|
-
}
|
48
|
-
|
49
|
-
return (
|
50
|
-
<div>
|
51
|
-
<AdvancedTable
|
52
|
-
columnDefinitions={columnDefinitions}
|
53
|
-
maxHeight="xs"
|
54
|
-
responsive="none"
|
55
|
-
stickyLeftColumn={["year"]}
|
56
|
-
tableData={MOCK_DATA}
|
57
|
-
tableProps={tableProps}
|
58
|
-
{...props}
|
59
|
-
/>
|
60
|
-
</div>
|
61
|
-
)
|
62
|
-
}
|
63
|
-
|
64
|
-
export default AdvancedTableStickyColumnsAndHeader
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.md
DELETED
@@ -1,8 +0,0 @@
|
|
1
|
-
To achieve a sticky header AND sticky columns together, in addition to the `stickyLeftColumn` logic outlined above, you can:
|
2
|
-
|
3
|
-
- Set `sticky: true` via `tableProps`
|
4
|
-
- Give the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/visual_guidelines/max_height) global prop.
|
5
|
-
|
6
|
-
**NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the column stickiness.
|
7
|
-
|
8
|
-
Expand the table above to see this in action.
|
@@ -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 AdvancedTableStickyHeader = (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
|
-
sticky: true
|
40
|
-
}
|
41
|
-
|
42
|
-
return (
|
43
|
-
<div>
|
44
|
-
<AdvancedTable
|
45
|
-
columnDefinitions={columnDefinitions}
|
46
|
-
responsive="none"
|
47
|
-
tableData={MOCK_DATA}
|
48
|
-
tableProps={tableProps}
|
49
|
-
{...props}
|
50
|
-
/>
|
51
|
-
</div>
|
52
|
-
)
|
53
|
-
}
|
54
|
-
|
55
|
-
export default AdvancedTableStickyHeader
|
@@ -1,3 +0,0 @@
|
|
1
|
-
The `TableProps` prop can also be used to render a sticky header for the Advanced Table.
|
2
|
-
|
3
|
-
This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "Sticky Header for Responsive Table" doc example below.
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb
DELETED
@@ -1,33 +0,0 @@
|
|
1
|
-
<% column_definitions = [
|
2
|
-
{
|
3
|
-
accessor: "year",
|
4
|
-
label: "Year",
|
5
|
-
cellAccessors: ["quarter", "month", "day"],
|
6
|
-
},
|
7
|
-
{
|
8
|
-
accessor: "newEnrollments",
|
9
|
-
label: "New Enrollments",
|
10
|
-
},
|
11
|
-
{
|
12
|
-
accessor: "scheduledMeetings",
|
13
|
-
label: "Scheduled Meetings",
|
14
|
-
},
|
15
|
-
{
|
16
|
-
accessor: "attendanceRate",
|
17
|
-
label: "Attendance Rate",
|
18
|
-
},
|
19
|
-
{
|
20
|
-
accessor: "completedClasses",
|
21
|
-
label: "Completed Classes",
|
22
|
-
},
|
23
|
-
{
|
24
|
-
accessor: "classCompletionRate",
|
25
|
-
label: "Class Completion Rate",
|
26
|
-
},
|
27
|
-
{
|
28
|
-
accessor: "graduatedStudents",
|
29
|
-
label: "Graduated Students",
|
30
|
-
}
|
31
|
-
] %>
|
32
|
-
|
33
|
-
<%= pb_rails("advanced_table", props: { id: "sticky_header_table", table_data: @table_data, column_definitions: column_definitions, responsive: "none", table_props: { sticky: true }}) %>
|
@@ -1,3 +0,0 @@
|
|
1
|
-
The `table_props` prop can also be used to render a sticky header for the Advanced Table.
|
2
|
-
|
3
|
-
This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "[Sticky Header for Responsive Table](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header-for-responsive-table)" doc example below.
|
@@ -1,97 +0,0 @@
|
|
1
|
-
@mixin advanced-table-sticky-mixin(
|
2
|
-
$border-color,
|
3
|
-
$bg-main,
|
4
|
-
$bg-secondary,
|
5
|
-
$highlight: $info_subtle
|
6
|
-
) {
|
7
|
-
border-radius: 4px;
|
8
|
-
box-shadow: 1px 0 0 0px $border-color, -1px 0 0 0px $border-color;
|
9
|
-
display: block;
|
10
|
-
[class^="pb_table"].table-sm.table-card thead tr th:first-child,
|
11
|
-
[class^="pb_table"].table-sm:not(.no-hover).table-card
|
12
|
-
tbody
|
13
|
-
tr
|
14
|
-
td:first-child {
|
15
|
-
border-left-width: 0px !important;
|
16
|
-
}
|
17
|
-
[class^="pb_table"].table-sm.table-card thead tr th:last-child,
|
18
|
-
[class^="pb_table"].table-sm:not(.no-hover).table-card
|
19
|
-
tbody
|
20
|
-
tr
|
21
|
-
td:last-child {
|
22
|
-
border-right-width: 0px;
|
23
|
-
}
|
24
|
-
[class^="pb_table"].table-sm.table-card tbody tr:last-child td:first-child,
|
25
|
-
[class^="pb_table"].table-sm.table-card tbody tr:last-child td:last-child {
|
26
|
-
border-radius: 0 0 0 0;
|
27
|
-
}
|
28
|
-
.table-header-cells:first-child,
|
29
|
-
td:first-child,
|
30
|
-
.pb_table_td:first-child,
|
31
|
-
.checkbox-cell.checkbox-cell-header:first-child,
|
32
|
-
.table-header-cells.sticky-left,
|
33
|
-
[class*="pinned-left"] {
|
34
|
-
background-color: $bg-main;
|
35
|
-
box-shadow: $shadow_deep !important;
|
36
|
-
position: sticky !important;
|
37
|
-
left: 0;
|
38
|
-
z-index: 2;
|
39
|
-
}
|
40
|
-
|
41
|
-
.bg-silver {
|
42
|
-
td:first-child,
|
43
|
-
.sticky-left {
|
44
|
-
background-color: $bg-secondary;
|
45
|
-
}
|
46
|
-
}
|
47
|
-
.bg-row-selection {
|
48
|
-
td:first-child,
|
49
|
-
.sticky-left {
|
50
|
-
background-color: $highlight;
|
51
|
-
}
|
52
|
-
}
|
53
|
-
|
54
|
-
.bg-white {
|
55
|
-
td:first-child,
|
56
|
-
.sticky-left {
|
57
|
-
background-color: $bg-main;
|
58
|
-
}
|
59
|
-
}
|
60
|
-
|
61
|
-
.virtualized-table-row {
|
62
|
-
&.bg-silver td:first-child {
|
63
|
-
background-color: $bg-secondary;
|
64
|
-
}
|
65
|
-
&.bg-white td:first-child {
|
66
|
-
background-color: $bg-main;
|
67
|
-
}
|
68
|
-
&.bg-row-selection td:first-child {
|
69
|
-
background-color: $highlight;
|
70
|
-
}
|
71
|
-
}
|
72
|
-
|
73
|
-
.row-selection-actions-card {
|
74
|
-
border-right-width: 0px;
|
75
|
-
border-left-width: 0px;
|
76
|
-
position: sticky;
|
77
|
-
top: 0;
|
78
|
-
left: 0;
|
79
|
-
border-radius: unset;
|
80
|
-
}
|
81
|
-
|
82
|
-
.checkbox-cell {
|
83
|
-
display: table-cell !important;
|
84
|
-
}
|
85
|
-
|
86
|
-
.sticky-header {
|
87
|
-
thead {
|
88
|
-
th:first-child {
|
89
|
-
box-shadow: 1px 0 10px -2px $border-color !important;
|
90
|
-
}
|
91
|
-
}
|
92
|
-
|
93
|
-
.pb_advanced_table_header {
|
94
|
-
box-shadow: none !important;
|
95
|
-
}
|
96
|
-
}
|
97
|
-
}
|
@@ -1,35 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import Background from "../../pb_background/_background"
|
3
|
-
import Flex from "../../pb_flex/_flex"
|
4
|
-
import FlexItem from "../../pb_flex/_flex_item"
|
5
|
-
import Title from "../../pb_title/_title"
|
6
|
-
|
7
|
-
const BackgroundOverlay = (props) => {
|
8
|
-
return (
|
9
|
-
<Background
|
10
|
-
alt="colorful background"
|
11
|
-
backgroundColor="category_21"
|
12
|
-
className="background lazyload"
|
13
|
-
imageOverlay="opacity_2"
|
14
|
-
imageUrl="https://unsplash.it/500/400/?image=633"
|
15
|
-
{...props}
|
16
|
-
>
|
17
|
-
<Flex
|
18
|
-
orientation="column"
|
19
|
-
vertical="center"
|
20
|
-
{...props}
|
21
|
-
>
|
22
|
-
<FlexItem>
|
23
|
-
<Title
|
24
|
-
dark
|
25
|
-
padding="lg"
|
26
|
-
size={1}
|
27
|
-
text="Background Kit Image"
|
28
|
-
/>
|
29
|
-
</FlexItem>
|
30
|
-
</Flex>
|
31
|
-
</Background>
|
32
|
-
)
|
33
|
-
}
|
34
|
-
|
35
|
-
export default BackgroundOverlay
|
@@ -1 +0,0 @@
|
|
1
|
-
An overlay can be added to the background image by setting the `imageOverlay` prop and adding a `backgroundColor`. The `imageOverlay` prop can be set to any opacity ranging from `opacity_1` to `opacity_10`.
|