playbook_ui 14.13.0.pre.alpha.play1884progresspill6064 → 14.13.0.pre.alpha.rails8compatible6228

Sign up to get free protection for your applications and to get access to all the features.
Files changed (107) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +0 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +3 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +6 -5
  5. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +8 -1
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_custom_cell.jsx +75 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +3 -1
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -1
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb +33 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +3 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
  14. data/app/pb_kits/playbook/pb_bar_graph/BarGraphStyles.scss +58 -0
  15. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +64 -0
  16. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +1 -0
  17. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -0
  18. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
  19. data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx +17 -8
  20. data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js +16 -0
  21. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx +69 -0
  22. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md +1 -0
  23. data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +2 -1
  24. data/app/pb_kits/playbook/pb_checkbox/docs/index.js +1 -0
  25. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +3 -1
  26. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb +2 -2
  27. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md +4 -1
  28. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx +90 -0
  29. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +5 -0
  30. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +2 -0
  31. data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
  32. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +7 -4
  33. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx +6 -3
  34. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb +1 -6
  35. data/app/pb_kits/playbook/pb_nav/item.html.erb +7 -19
  36. data/app/pb_kits/playbook/pb_nav/nav.html.erb +3 -8
  37. data/app/pb_kits/playbook/pb_online_status/online_status.html.erb +1 -6
  38. data/app/pb_kits/playbook/pb_overlay/_overlay.tsx +4 -0
  39. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx +37 -0
  40. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional_react.md +1 -0
  41. data/app/pb_kits/playbook/pb_overlay/docs/example.yml +1 -0
  42. data/app/pb_kits/playbook/pb_overlay/docs/index.js +1 -0
  43. data/app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_token.tsx +48 -10
  44. data/app/pb_kits/playbook/pb_popover/popover.html.erb +1 -6
  45. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss +4 -0
  46. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.tsx +7 -5
  47. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.html.erb +1 -0
  48. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.jsx +18 -0
  49. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_rails.md +1 -0
  50. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_react.md +1 -0
  51. data/app/pb_kits/playbook/pb_progress_pills/docs/example.yml +2 -0
  52. data/app/pb_kits/playbook/pb_progress_pills/docs/index.js +1 -0
  53. data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb +2 -7
  54. data/app/pb_kits/playbook/pb_progress_pills/progress_pills.rb +6 -0
  55. data/app/pb_kits/playbook/pb_progress_pills/progress_pills.test.js +26 -1
  56. data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb +1 -5
  57. data/app/pb_kits/playbook/pb_progress_step/progress_step.html.erb +1 -5
  58. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb +1 -5
  59. data/app/pb_kits/playbook/pb_radio/radio.html.erb +6 -11
  60. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx +1 -1
  61. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.html.erb +51 -0
  62. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click_rails.md +2 -0
  63. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb +96 -0
  64. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx +101 -0
  65. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.md +1 -0
  66. data/app/pb_kits/playbook/pb_table/docs/example.yml +4 -1
  67. data/app/pb_kits/playbook/pb_table/docs/index.js +2 -1
  68. data/app/pb_kits/playbook/pb_table/index.ts +41 -9
  69. data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +4 -0
  70. data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx +29 -2
  71. data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +31 -3
  72. data/app/pb_kits/playbook/pb_table/table_body.html.erb +13 -7
  73. data/app/pb_kits/playbook/pb_table/table_body.rb +2 -0
  74. data/app/pb_kits/playbook/pb_table/table_row.html.erb +14 -7
  75. data/app/pb_kits/playbook/pb_table/table_row.rb +14 -1
  76. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb +14 -0
  77. data/app/pb_kits/playbook/pb_text_input/index.js +9 -0
  78. data/app/pb_kits/playbook/pb_text_input/text_input.rb +5 -2
  79. data/dist/chunks/{_typeahead-btjo1UN5.js → _typeahead-PqkcDf1H.js} +4 -4
  80. data/dist/chunks/{_weekday_stacked-TIh9nTmZ.js → _weekday_stacked-C7J0S4f7.js} +3 -3
  81. data/dist/chunks/{lib-DjpLC8uO.js → lib-D3us1bGD.js} +2 -2
  82. data/dist/chunks/{pb_form_validation-S56UaHZl.js → pb_form_validation-BpihMSOQ.js} +1 -1
  83. data/dist/chunks/vendor.js +1 -1
  84. data/dist/menu.yml +0 -7
  85. data/dist/playbook-doc.js +1 -1
  86. data/dist/playbook-rails-react-bindings.js +1 -1
  87. data/dist/playbook-rails.js +1 -1
  88. data/dist/playbook.css +1 -1
  89. data/lib/playbook/version.rb +1 -1
  90. metadata +36 -25
  91. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss +0 -66
  92. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx +0 -98
  93. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb +0 -28
  94. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.rb +0 -42
  95. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.html.erb +0 -19
  96. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.jsx +0 -26
  97. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.html.erb +0 -10
  98. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.jsx +0 -17
  99. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click.jsx +0 -19
  100. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_onclick.html.erb +0 -16
  101. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.html.erb +0 -35
  102. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.jsx +0 -42
  103. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb +0 -13
  104. data/app/pb_kits/playbook/pb_avatar_action_button/docs/example.yml +0 -15
  105. data/app/pb_kits/playbook/pb_avatar_action_button/docs/index.js +0 -4
  106. data/app/pb_kits/playbook/pb_avatar_action_button/pb_avatar_action_button.test.js +0 -31
  107. /data/app/pb_kits/playbook/pb_table/docs/{_table_with_collapsible_with_custom_click.md → _table_with_collapsible_with_custom_click_react.md} +0 -0
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "14.13.0"
5
- VERSION = "14.13.0.pre.alpha.play1884progresspill6064"
5
+ VERSION = "14.13.0.pre.alpha.rails8compatible6228"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 14.13.0.pre.alpha.play1884progresspill6064
4
+ version: 14.13.0.pre.alpha.rails8compatible6228
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-02-11 00:00:00.000000000 Z
12
+ date: 2025-02-21 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -71,16 +71,22 @@ dependencies:
71
71
  name: view_component
72
72
  requirement: !ruby/object:Gem::Requirement
73
73
  requirements:
74
- - - '='
74
+ - - ">="
75
75
  - !ruby/object:Gem::Version
76
76
  version: 2.83.0
77
+ - - "<"
78
+ - !ruby/object:Gem::Version
79
+ version: '3.0'
77
80
  type: :runtime
78
81
  prerelease: false
79
82
  version_requirements: !ruby/object:Gem::Requirement
80
83
  requirements:
81
- - - '='
84
+ - - ">="
82
85
  - !ruby/object:Gem::Version
83
86
  version: 2.83.0
87
+ - - "<"
88
+ - !ruby/object:Gem::Version
89
+ version: '3.0'
84
90
  - !ruby/object:Gem::Dependency
85
91
  name: webpacker-react
86
92
  requirement: !ruby/object:Gem::Requirement
@@ -288,6 +294,7 @@ files:
288
294
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.html.erb
289
295
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.jsx
290
296
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.md
297
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_custom_cell.jsx
291
298
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.html.erb
292
299
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.jsx
293
300
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.md
@@ -333,7 +340,9 @@ files:
333
340
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx
334
341
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md
335
342
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md
343
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb
336
344
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx
345
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md
337
346
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md
338
347
  - app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js
339
348
  - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data.json
@@ -384,22 +393,6 @@ files:
384
393
  - app/pb_kits/playbook/pb_avatar/docs/_footer.md
385
394
  - app/pb_kits/playbook/pb_avatar/docs/example.yml
386
395
  - app/pb_kits/playbook/pb_avatar/docs/index.js
387
- - app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss
388
- - app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx
389
- - app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb
390
- - app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.rb
391
- - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.html.erb
392
- - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.jsx
393
- - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.html.erb
394
- - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.jsx
395
- - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click.jsx
396
- - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_onclick.html.erb
397
- - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.html.erb
398
- - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.jsx
399
- - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb
400
- - app/pb_kits/playbook/pb_avatar_action_button/docs/example.yml
401
- - app/pb_kits/playbook/pb_avatar_action_button/docs/index.js
402
- - app/pb_kits/playbook/pb_avatar_action_button/pb_avatar_action_button.test.js
403
396
  - app/pb_kits/playbook/pb_background/_background.scss
404
397
  - app/pb_kits/playbook/pb_background/_background.tsx
405
398
  - app/pb_kits/playbook/pb_background/background.html.erb
@@ -450,6 +443,7 @@ files:
450
443
  - app/pb_kits/playbook/pb_badge/docs/_description.md
451
444
  - app/pb_kits/playbook/pb_badge/docs/example.yml
452
445
  - app/pb_kits/playbook/pb_badge/docs/index.js
446
+ - app/pb_kits/playbook/pb_bar_graph/BarGraphStyles.scss
453
447
  - app/pb_kits/playbook/pb_bar_graph/_bar_graph.scss
454
448
  - app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx
455
449
  - app/pb_kits/playbook/pb_bar_graph/barGraph.test.js
@@ -478,6 +472,8 @@ files:
478
472
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md
479
473
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb
480
474
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx
475
+ - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx
476
+ - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md
481
477
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb
482
478
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx
483
479
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md
@@ -682,6 +678,8 @@ files:
682
678
  - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_swift.md
683
679
  - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_options.html.erb
684
680
  - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_props_swift.md
681
+ - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx
682
+ - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md
685
683
  - app/pb_kits/playbook/pb_checkbox/docs/_description.md
686
684
  - app/pb_kits/playbook/pb_checkbox/docs/example.yml
687
685
  - app/pb_kits/playbook/pb_checkbox/docs/index.js
@@ -1187,6 +1185,8 @@ files:
1187
1185
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.md
1188
1186
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb
1189
1187
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md
1188
+ - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx
1189
+ - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md
1190
1190
  - app/pb_kits/playbook/pb_draggable/docs/example.yml
1191
1191
  - app/pb_kits/playbook/pb_draggable/docs/index.js
1192
1192
  - app/pb_kits/playbook/pb_draggable/draggable.html.erb
@@ -2122,6 +2122,8 @@ files:
2122
2122
  - app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.html.erb
2123
2123
  - app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.jsx
2124
2124
  - app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.md
2125
+ - app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx
2126
+ - app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional_react.md
2125
2127
  - app/pb_kits/playbook/pb_overlay/docs/example.yml
2126
2128
  - app/pb_kits/playbook/pb_overlay/docs/index.js
2127
2129
  - app/pb_kits/playbook/pb_overlay/overlay.html.erb
@@ -2277,6 +2279,10 @@ files:
2277
2279
  - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.html.erb
2278
2280
  - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx
2279
2281
  - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.md
2282
+ - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.html.erb
2283
+ - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.jsx
2284
+ - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_rails.md
2285
+ - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_react.md
2280
2286
  - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_status.html.erb
2281
2287
  - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_status.jsx
2282
2288
  - app/pb_kits/playbook/pb_progress_pills/docs/example.yml
@@ -2752,8 +2758,10 @@ files:
2752
2758
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx
2753
2759
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_rails.md
2754
2760
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_react.md
2761
+ - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.html.erb
2755
2762
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx
2756
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md
2763
+ - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click_rails.md
2764
+ - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click_react.md
2757
2765
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx
2758
2766
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.md
2759
2767
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.html.erb
@@ -2766,6 +2774,9 @@ files:
2766
2774
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md
2767
2775
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb
2768
2776
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md
2777
+ - app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb
2778
+ - app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx
2779
+ - app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.md
2769
2780
  - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.jsx
2770
2781
  - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md
2771
2782
  - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb
@@ -3337,11 +3348,11 @@ files:
3337
3348
  - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
3338
3349
  - app/pb_kits/playbook/utilities/text.ts
3339
3350
  - app/pb_kits/playbook/utilities/validEmojiChecker.ts
3340
- - dist/chunks/_typeahead-btjo1UN5.js
3341
- - dist/chunks/_weekday_stacked-TIh9nTmZ.js
3351
+ - dist/chunks/_typeahead-PqkcDf1H.js
3352
+ - dist/chunks/_weekday_stacked-C7J0S4f7.js
3342
3353
  - dist/chunks/lazysizes-B7xYodB-.js
3343
- - dist/chunks/lib-DjpLC8uO.js
3344
- - dist/chunks/pb_form_validation-S56UaHZl.js
3354
+ - dist/chunks/lib-D3us1bGD.js
3355
+ - dist/chunks/pb_form_validation-BpihMSOQ.js
3345
3356
  - dist/chunks/vendor.js
3346
3357
  - dist/menu.yml
3347
3358
  - dist/playbook-doc.js
@@ -1,66 +0,0 @@
1
- [class^=pb_avatar_action_button_kit] {
2
-
3
- $icon_size: 0px;
4
- $border_size: 0px;
5
-
6
- $action-colors: (
7
- "add": $primary,
8
- "remove": $error,
9
- );
10
-
11
- @each $key, $value in $action-colors {
12
- &[class*=_#{$key}] a {
13
- color: $value;
14
- }
15
- }
16
-
17
- @mixin icon-base {
18
- &.dark{
19
- background-color: $bg_dark
20
- }
21
- width: $icon_size;
22
- height: $icon_size;
23
- position: absolute;
24
- background-color: $white;
25
- border-radius: $icon_size;
26
- font-size: ($icon_size - $border_size * 2);
27
- display: flex;
28
- justify-content: center;
29
- align-items: center;
30
- z-index: 1;
31
- }
32
-
33
- @each $name, $size in $avatar-sizes {
34
-
35
- &[class*=_#{$name}] {
36
-
37
- $avatar_size: map-get($avatar-sizes, $name);
38
- $icon_size: $avatar_size / 2;
39
- $border_size: $icon_size / 10;
40
-
41
- position: relative;
42
- width: $avatar_size * 1.25;
43
- height: $avatar_size * 1.1;
44
- display: flex;
45
-
46
- [class^=pb_tooltip_kit] {
47
- justify-self: center;
48
- }
49
-
50
- &[class*=_bottom] .icon {
51
- @include icon-base;
52
- top: $icon_size * 1.27;
53
- }
54
- &[class*=_top] .icon {
55
- @include icon-base;
56
- bottom: $icon_size * 1.27;
57
- }
58
- &[class*=_right] .icon {
59
- left: $icon_size * 1.5;
60
- }
61
- &[class*=_left] [class^=pb_avatar_kit] {
62
- padding-left: $icon_size / 2;
63
- }
64
- }
65
- }
66
- }
@@ -1,98 +0,0 @@
1
- import React from 'react'
2
- import classnames from 'classnames'
3
-
4
- import {
5
- buildAriaProps,
6
- buildCss,
7
- buildDataProps,
8
- buildHtmlProps } from '../utilities/props'
9
- import { globalProps } from '../utilities/globalProps'
10
-
11
- import Avatar from '../pb_avatar/_avatar'
12
- import Icon from '../pb_icon/_icon'
13
-
14
- type AvatarActionButtonProps = {
15
- action?: "add" | "remove",
16
- aria?: {[key: string]: string},
17
- linkAriaLabel?: string,
18
- className?: string,
19
- dark?: boolean,
20
- data?: {[key: string]: string},
21
- htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
22
- id?: string,
23
- imageAlt?: string,
24
- imageUrl?: string,
25
- linkUrl?: string,
26
- name?: string,
27
- onClick?: React.MouseEventHandler<HTMLSpanElement>,
28
- placement?: string,
29
- size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs",
30
- }
31
-
32
- const AvatarActionButton = (props: AvatarActionButtonProps): React.ReactElement => {
33
- const {
34
- action = 'add',
35
- aria = {},
36
- linkAriaLabel,
37
- className,
38
- dark = false,
39
- data = {},
40
- htmlOptions = {},
41
- id,
42
- imageAlt = '',
43
- imageUrl,
44
- linkUrl,
45
- name,
46
- onClick,
47
- placement = 'bottom left',
48
- size = 'md',
49
- } = props
50
-
51
- const ariaProps = buildAriaProps(aria)
52
- const dataProps = buildDataProps(data)
53
- const htmlProps = buildHtmlProps(htmlOptions)
54
-
55
- const classes = classnames(buildCss(
56
- 'pb_avatar_action_button_kit',
57
- action,
58
- placement,
59
- size),
60
- globalProps(props),
61
- className)
62
-
63
- const icons = {
64
- add: 'plus-circle',
65
- remove: 'times-circle',
66
- }
67
-
68
- return (
69
- <div
70
- {...ariaProps}
71
- {...dataProps}
72
- {...htmlProps}
73
- className={classes}
74
- id={id}
75
- >
76
- <a
77
- aria-label={linkAriaLabel}
78
- href={linkUrl}
79
- onClick={onClick}
80
- >
81
- <Avatar
82
- imageAlt={imageAlt}
83
- imageUrl={imageUrl}
84
- name={name}
85
- size={size}
86
- />
87
- <div className={`icon ${dark ? 'dark' : ''}`}>
88
- <Icon
89
- dark={dark}
90
- icon={icons[action]}
91
- />
92
- </div>
93
- </a>
94
- </div>
95
- )
96
- }
97
-
98
- export default AvatarActionButton
@@ -1,28 +0,0 @@
1
- <%= pb_content_tag do %>
2
- <% if object.tooltip_text.present? %>
3
- <%= pb_rails("tooltip", props: {
4
- trigger_element_id: object.tooltip_id,
5
- tooltip_id: "tooltip-2",
6
- position: 'top'
7
- }) do %>
8
- <%= object.tooltip_text %>
9
- <% end %>
10
- <% end %>
11
-
12
- <%= link_to object.link_url, id: object.tooltip_id, 'aria-label': object.link_aria_label do %>
13
- <%= pb_rails("avatar", props: {
14
- dark: object.dark,
15
- name: object.name,
16
- size: object.size,
17
- image_alt: object.image_alt,
18
- image_url: object.image_url,
19
- class: "avatar_action"
20
- }) %>
21
- <div class="icon <%= object.dark ? 'dark' : '' %> ">
22
- <%= pb_rails("icon", props: {
23
- dark: object.dark,
24
- icon: object.action_icons
25
- }) %>
26
- </div>
27
- <% end %>
28
- <% end %>
@@ -1,42 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Playbook
4
- module PbAvatarActionButton
5
- class AvatarActionButton < Playbook::KitBase
6
- prop :action, type: Playbook::Props::String,
7
- default: "add"
8
- prop :link_aria_label, type: Playbook::Props::String
9
- prop :image_alt, type: Playbook::Props::String
10
- prop :image_url, type: Playbook::Props::String
11
- prop :link_url, type: Playbook::Props::String, default: "#"
12
- prop :tooltip_text, type: Playbook::Props::String
13
- prop :tooltip_id, type: Playbook::Props::String
14
- prop :name, type: Playbook::Props::String,
15
- default: ""
16
- prop :size, type: Playbook::Props::Enum,
17
- values: %w[xs sm md lg xl],
18
- default: "md"
19
- prop :placement, type: Playbook::Props::Enum,
20
- values: %w[bottom_left bottom_right top_left top_right],
21
- default: "bottom_left"
22
-
23
- def classname
24
- generate_classname("pb_avatar_action_button_kit", action, size, placement)
25
- end
26
-
27
- def action_icons
28
- icon_hash = {
29
- add: "plus-circle",
30
- remove: "times-circle",
31
- }
32
- # if an 'action' prop is passed that isn't
33
- # in the icon_hash an empty string is returned
34
- # instead of a null value, which would break the page
35
-
36
- # double pipe ruby syntax below is essentially a reduced if-else statement
37
- # if icon_hash[action.to_sym] returns a falsey value, return "" instead
38
- icon_hash[action.to_sym] ||= ""
39
- end
40
- end
41
- end
42
- end
@@ -1,19 +0,0 @@
1
- <div class="pb--doc-demo-row">
2
-
3
- <%= pb_rails("avatar_action_button", props: {
4
- link_aria_label: "Add Sophia Carden",
5
- name: "Sophia Carden",
6
- image_alt: "Add Sophia Carden",
7
- image_url: "https://randomuser.me/api/portraits/women/8.jpg",
8
- action: "add",
9
- }) %>
10
-
11
- <%= pb_rails("avatar_action_button", props: {
12
- link_aria_label: "Remove Sophia Carden",
13
- name: "Sophia Carden",
14
- image_alt: "Remove Sophia Carden",
15
- image_url: "https://randomuser.me/api/portraits/women/8.jpg",
16
- action: "remove",
17
- }) %>
18
-
19
- </div>
@@ -1,26 +0,0 @@
1
- import React from 'react'
2
-
3
- import AvatarActionButton from '../_avatar_action_button'
4
-
5
- const AvatarActionButtonActions = (props) => (
6
- <div className="pb--doc-demo-row">
7
- <AvatarActionButton
8
- action="add"
9
- imageAlt="Add Sophia Carden"
10
- imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
11
- linkAriaLabel="Add Sophia Carden"
12
- name="Sophia Carden"
13
- {...props}
14
- />
15
- <AvatarActionButton
16
- action="remove"
17
- imageAlt="Remove Sophia Carden"
18
- imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
19
- linkAriaLabel="Remove Sophia Carden"
20
- name="Sophia Carden"
21
- {...props}
22
- />
23
- </div>
24
- )
25
-
26
- export default AvatarActionButtonActions
@@ -1,10 +0,0 @@
1
- <div class="pb--doc-demo-row">
2
-
3
- <%= pb_rails("avatar_action_button", props: {
4
- link_aria_label: "Sophia Carden",
5
- name: "Sophia Carden",
6
- image_alt: "Sophia Carden",
7
- image_url: "https://randomuser.me/api/portraits/women/8.jpg"
8
- }) %>
9
-
10
- </div>
@@ -1,17 +0,0 @@
1
- import React from 'react'
2
-
3
- import AvatarActionButton from '../_avatar_action_button'
4
-
5
- const AvatarActionButtonDefault = (props) => (
6
- <div className="pb--doc-demo-row">
7
- <AvatarActionButton
8
- imageAlt="Sophia Carden"
9
- imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
10
- linkAriaLabel="Sophia Carden"
11
- name="Sophia Carden"
12
- {...props}
13
- />
14
- </div>
15
- )
16
-
17
- export default AvatarActionButtonDefault
@@ -1,19 +0,0 @@
1
- import React from 'react'
2
-
3
- import AvatarActionButton from '../_avatar_action_button'
4
-
5
- const AvatarActionButtonOnClick = (props) => (
6
- <div className="pb--doc-demo-row">
7
- <AvatarActionButton
8
- imageAlt="Sophia Carden"
9
- imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
10
- linkAriaLabel="Alert Sophia Carden"
11
- linkUrl="https://www.google.com"
12
- name="Sophia Carden"
13
- onClick={() => alert('clicked!')}
14
- {...props}
15
- />
16
- </div>
17
- )
18
-
19
- export default AvatarActionButtonOnClick
@@ -1,16 +0,0 @@
1
- <div class="pb--doc-demo-row">
2
-
3
- <%= pb_rails("avatar_action_button", props: {
4
- link_aria_label: "Alert Sophia Carden",
5
- name: "Sophia Carden",
6
- id: "clickable",
7
- link_url: "http://www.google.com",
8
- image_alt: "Sophia Carden",
9
- image_url: "https://randomuser.me/api/portraits/women/8.jpg",
10
- }) %>
11
-
12
- <%= javascript_tag do %>
13
- document.querySelector('#clickable').addEventListener('click', () => alert('clickable clicked!'))
14
- <% end %>
15
-
16
- </div>
@@ -1,35 +0,0 @@
1
- <div class="pb--doc-demo-row">
2
-
3
- <%= pb_rails("avatar_action_button", props: {
4
- link_aria_label: "Sophia Carden",
5
- name: "Sophia Carden",
6
- image_alt: "Sophia Carden",
7
- image_url: "https://randomuser.me/api/portraits/women/8.jpg",
8
- placement: "bottom_left"
9
- }) %>
10
-
11
- <%= pb_rails("avatar_action_button", props: {
12
- link_aria_label: "Sophia Carden",
13
- name: "Sophia Carden",
14
- image_alt: "Sophia Carden",
15
- image_url: "https://randomuser.me/api/portraits/women/8.jpg",
16
- placement: "bottom_right"
17
- }) %>
18
-
19
- <%= pb_rails("avatar_action_button", props: {
20
- link_aria_label: "Sophia Carden",
21
- name: "Sophia Carden",
22
- image_alt: "Sophia Carden",
23
- image_url: "https://randomuser.me/api/portraits/women/8.jpg",
24
- placement: "top_left"
25
- }) %>
26
-
27
- <%= pb_rails("avatar_action_button", props: {
28
- link_aria_label: "Sophia Carden",
29
- name: "Sophia Carden",
30
- image_alt: "Sophia Carden",
31
- image_url: "https://randomuser.me/api/portraits/women/8.jpg",
32
- placement: "top_right"
33
- }) %>
34
-
35
- </div>
@@ -1,42 +0,0 @@
1
- import React from 'react'
2
-
3
- import AvatarActionButton from '../_avatar_action_button'
4
-
5
- const AvatarActionButtonPlacement = (props) => (
6
- <div className="pb--doc-demo-row">
7
- <AvatarActionButton
8
- imageAlt="Sophia Carden"
9
- imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
10
- linkAriaLabel="Sophia Carden"
11
- name="Sophia Carden"
12
- placement="bottom_left"
13
- {...props}
14
- />
15
- <AvatarActionButton
16
- imageAlt="Sophia Carden"
17
- imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
18
- linkAriaLabel="Sophia Carden"
19
- name="Sophia Carden"
20
- placement="bottom_right"
21
- {...props}
22
- />
23
- <AvatarActionButton
24
- imageAlt="Sophia Carden"
25
- imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
26
- linkAriaLabel="Sophia Carden"
27
- name="Sophia Carden"
28
- placement="top_left"
29
- {...props}
30
- />
31
- <AvatarActionButton
32
- imageAlt="Sophia Carden"
33
- imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
34
- linkAriaLabel="Sophia Carden"
35
- name="Sophia Carden"
36
- placement="top_right"
37
- {...props}
38
- />
39
- </div>
40
- )
41
-
42
- export default AvatarActionButtonPlacement
@@ -1,13 +0,0 @@
1
- <div class="pb--doc-demo-row">
2
-
3
- <%= pb_rails("avatar_action_button", props: {
4
- link_aria_label: "Sophia Carden",
5
- name: "Sophia Carden",
6
- link_url: "http://www.google.com",
7
- image_alt: "Sophia Carden",
8
- image_url: "https://randomuser.me/api/portraits/women/8.jpg",
9
- tooltip_text: "Tooltip Text",
10
- tooltip_id: "avatar_1",
11
- }) %>
12
-
13
- </div>
@@ -1,15 +0,0 @@
1
- examples:
2
-
3
- rails:
4
- - avatar_action_button_default: Default
5
- - avatar_action_button_placement: Placement
6
- - avatar_action_button_actions: Actions
7
- - avatar_action_button_onclick: On Click
8
- - avatar_action_button_tooltip: Tooltip
9
-
10
-
11
- react:
12
- - avatar_action_button_default: Default
13
- - avatar_action_button_placement: Placement
14
- - avatar_action_button_actions: Actions
15
- - avatar_action_button_on_click: On Click
@@ -1,4 +0,0 @@
1
- export { default as AvatarActionButtonDefault } from './_avatar_action_button_default.jsx'
2
- export { default as AvatarActionButtonPlacement } from './_avatar_action_button_placement.jsx'
3
- export { default as AvatarActionButtonActions } from './_avatar_action_button_actions.jsx'
4
- export { default as AvatarActionButtonOnClick } from './_avatar_action_button_on_click.jsx'