playbook_ui 14.13.0.pre.rc.10 → 14.14.0.pre.alpha.PBNTR888selectvaliditymessage6348

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (168) 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 +66 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +9 -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.jsx +1 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +3 -1
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +3 -1
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb +33 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx +55 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +3 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +3 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +3 -0
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +3 -1
  17. data/app/pb_kits/playbook/pb_bar_graph/BarGraphStyles.scss +58 -0
  18. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +64 -0
  19. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +1 -0
  20. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -0
  21. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
  22. data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx +17 -8
  23. data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js +16 -0
  24. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx +69 -0
  25. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md +1 -0
  26. data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +2 -1
  27. data/app/pb_kits/playbook/pb_checkbox/docs/index.js +1 -0
  28. data/app/pb_kits/playbook/pb_currency/_currency.tsx +46 -31
  29. data/app/pb_kits/playbook/pb_currency/currency.html.erb +15 -8
  30. data/app/pb_kits/playbook/pb_currency/currency.rb +17 -2
  31. data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.html.erb +22 -0
  32. data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx +34 -0
  33. data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_rails.md +1 -0
  34. data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_react.md +1 -0
  35. data/app/pb_kits/playbook/pb_currency/docs/example.yml +2 -0
  36. data/app/pb_kits/playbook/pb_currency/docs/index.js +2 -1
  37. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +3 -1
  38. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.html.erb +99 -0
  39. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md +1 -0
  40. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb +61 -0
  41. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md +4 -0
  42. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx +90 -0
  43. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md +5 -0
  44. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +4 -5
  45. data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
  46. data/app/pb_kits/playbook/pb_draggable/draggable_container.html.erb +2 -2
  47. data/app/pb_kits/playbook/pb_draggable/draggable_container.rb +5 -0
  48. data/app/pb_kits/playbook/pb_draggable/draggable_item.html.erb +1 -1
  49. data/app/pb_kits/playbook/pb_draggable/draggable_item.rb +4 -0
  50. data/app/pb_kits/playbook/pb_draggable/index.js +151 -15
  51. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx +7 -4
  52. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx +6 -3
  53. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -0
  54. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +2 -1
  55. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +11 -7
  56. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb +11 -0
  57. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.jsx +22 -0
  58. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md +1 -0
  59. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md +1 -0
  60. data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml +2 -0
  61. data/app/pb_kits/playbook/pb_home_address_street/docs/index.js +1 -0
  62. data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb +13 -2
  63. data/app/pb_kits/playbook/pb_icon/icon.html.erb +2 -6
  64. data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx +71 -0
  65. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb +1 -2
  66. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.jsx +17 -0
  67. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.html.erb +27 -0
  68. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.jsx +61 -0
  69. data/app/pb_kits/playbook/pb_icon_button/docs/example.yml +5 -3
  70. data/app/pb_kits/playbook/pb_icon_button/docs/index.js +2 -0
  71. data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb +1 -1
  72. data/app/pb_kits/playbook/pb_icon_button/icon_button.rb +3 -0
  73. data/app/pb_kits/playbook/pb_icon_button/icon_button.test.jsx +39 -0
  74. data/app/pb_kits/playbook/pb_layout/body.html.erb +1 -5
  75. data/app/pb_kits/playbook/pb_layout/footer.html.erb +1 -5
  76. data/app/pb_kits/playbook/pb_layout/header.html.erb +1 -5
  77. data/app/pb_kits/playbook/pb_layout/item.html.erb +1 -5
  78. data/app/pb_kits/playbook/pb_layout/layout.html.erb +1 -5
  79. data/app/pb_kits/playbook/pb_layout/sidebar.html.erb +1 -5
  80. data/app/pb_kits/playbook/pb_legend/legend.html.erb +1 -6
  81. data/app/pb_kits/playbook/pb_message/message.html.erb +1 -6
  82. data/app/pb_kits/playbook/pb_message/message_mention.html.erb +1 -6
  83. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb +1 -6
  84. data/app/pb_kits/playbook/pb_nav/item.html.erb +7 -19
  85. data/app/pb_kits/playbook/pb_nav/nav.html.erb +3 -8
  86. data/app/pb_kits/playbook/pb_online_status/online_status.html.erb +1 -6
  87. data/app/pb_kits/playbook/pb_overlay/_overlay.tsx +4 -0
  88. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx +37 -0
  89. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional_react.md +1 -0
  90. data/app/pb_kits/playbook/pb_overlay/docs/example.yml +1 -0
  91. data/app/pb_kits/playbook/pb_overlay/docs/index.js +1 -0
  92. data/app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_token.tsx +48 -10
  93. data/app/pb_kits/playbook/pb_popover/popover.html.erb +1 -6
  94. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.scss +6 -1
  95. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.tsx +7 -5
  96. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.html.erb +1 -0
  97. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx +7 -0
  98. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.md +1 -0
  99. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.html.erb +1 -0
  100. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.jsx +18 -0
  101. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_rails.md +1 -0
  102. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_react.md +1 -0
  103. data/app/pb_kits/playbook/pb_progress_pills/docs/example.yml +2 -0
  104. data/app/pb_kits/playbook/pb_progress_pills/docs/index.js +1 -0
  105. data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb +2 -7
  106. data/app/pb_kits/playbook/pb_progress_pills/progress_pills.rb +6 -0
  107. data/app/pb_kits/playbook/pb_progress_pills/progress_pills.test.js +26 -1
  108. data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb +1 -5
  109. data/app/pb_kits/playbook/pb_progress_step/progress_step.html.erb +1 -5
  110. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb +3 -7
  111. data/app/pb_kits/playbook/pb_radio/radio.html.erb +6 -11
  112. data/app/pb_kits/playbook/pb_select/index.js +38 -0
  113. data/app/pb_kits/playbook/pb_select/select.rb +8 -0
  114. data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.html.erb +47 -0
  115. data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.jsx +88 -0
  116. data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.md +1 -0
  117. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx +1 -1
  118. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.html.erb +51 -0
  119. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click_rails.md +2 -0
  120. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb +96 -0
  121. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx +101 -0
  122. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.md +1 -0
  123. data/app/pb_kits/playbook/pb_table/docs/example.yml +5 -0
  124. data/app/pb_kits/playbook/pb_table/docs/index.js +3 -1
  125. data/app/pb_kits/playbook/pb_table/index.ts +41 -9
  126. data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss +4 -0
  127. data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx +29 -2
  128. data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +31 -3
  129. data/app/pb_kits/playbook/pb_table/table_body.html.erb +13 -7
  130. data/app/pb_kits/playbook/pb_table/table_body.rb +2 -0
  131. data/app/pb_kits/playbook/pb_table/table_row.html.erb +14 -7
  132. data/app/pb_kits/playbook/pb_table/table_row.rb +14 -1
  133. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb +15 -1
  134. data/app/pb_kits/playbook/pb_text_input/index.js +60 -82
  135. data/app/pb_kits/playbook/pb_text_input/text_input.rb +5 -2
  136. data/app/pb_kits/playbook/pb_tooltip/index.js +1 -1
  137. data/dist/chunks/{_typeahead-CkemExmL.js → _typeahead-PqkcDf1H.js} +4 -4
  138. data/dist/chunks/_weekday_stacked-BrSrpj7J.js +45 -0
  139. data/dist/chunks/{lib-DjpLC8uO.js → lib-D3us1bGD.js} +2 -2
  140. data/dist/chunks/{pb_form_validation-S56UaHZl.js → pb_form_validation-BpihMSOQ.js} +1 -1
  141. data/dist/chunks/vendor.js +1 -1
  142. data/dist/menu.yml +1 -8
  143. data/dist/playbook-doc.js +1 -1
  144. data/dist/playbook-rails-react-bindings.js +1 -1
  145. data/dist/playbook-rails.js +1 -1
  146. data/dist/playbook.css +1 -1
  147. data/lib/playbook/forms/builder/time_zone_select_field.rb +19 -0
  148. data/lib/playbook/forms/builder.rb +1 -0
  149. data/lib/playbook/version.rb +2 -2
  150. metadata +54 -23
  151. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss +0 -66
  152. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx +0 -98
  153. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb +0 -28
  154. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.rb +0 -42
  155. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.html.erb +0 -19
  156. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.jsx +0 -26
  157. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.html.erb +0 -10
  158. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.jsx +0 -17
  159. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click.jsx +0 -19
  160. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_onclick.html.erb +0 -16
  161. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.html.erb +0 -35
  162. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.jsx +0 -42
  163. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb +0 -13
  164. data/app/pb_kits/playbook/pb_avatar_action_button/docs/example.yml +0 -15
  165. data/app/pb_kits/playbook/pb_avatar_action_button/docs/index.js +0 -4
  166. data/app/pb_kits/playbook/pb_avatar_action_button/pb_avatar_action_button.test.js +0 -31
  167. data/dist/chunks/_weekday_stacked-CtSzPEH0.js +0 -45
  168. /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
@@ -0,0 +1,19 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module Forms
5
+ class Builder
6
+ def time_zone_select_field(name, choices = {}, options = {}, html_options = {}, props: {})
7
+ props[:label] = @template.label(@object_name, name) if props[:label] == true
8
+ options[:skip_default_ids] = false unless options.key?(:skip_default_ids)
9
+ options[:prompt] = props[:blank_selection] || ""
10
+ html_options[:required] = "required" if props[:required]
11
+ input = @template.time_zone_select(@object_name, name, choices, options, html_options)
12
+
13
+ @template.pb_rails("select", props: props) do
14
+ input
15
+ end
16
+ end
17
+ end
18
+ end
19
+ end
@@ -15,6 +15,7 @@ module Playbook
15
15
  require_relative "builder/phone_number_field"
16
16
  require_relative "builder/dropdown_field"
17
17
  require_relative "builder/star_rating_field"
18
+ require_relative "builder/time_zone_select_field"
18
19
 
19
20
  prepend(FormFieldBuilder.new(:email_field, kit_name: "text_input"))
20
21
  prepend(FormFieldBuilder.new(:number_field, kit_name: "text_input"))
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "14.12.0"
5
- VERSION = "14.13.0.pre.rc.10"
4
+ PREVIOUS_VERSION = "14.14.0"
5
+ VERSION = "14.14.0.pre.alpha.PBNTR888selectvaliditymessage6348"
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.rc.10
4
+ version: 14.14.0.pre.alpha.PBNTR888selectvaliditymessage6348
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-06 00:00:00.000000000 Z
12
+ date: 2025-02-27 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -288,6 +288,7 @@ files:
288
288
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.html.erb
289
289
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.jsx
290
290
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.md
291
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_custom_cell.jsx
291
292
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.html.erb
292
293
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.jsx
293
294
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.md
@@ -333,6 +334,10 @@ files:
333
334
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx
334
335
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md
335
336
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md
337
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb
338
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx
339
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md
340
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md
336
341
  - app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js
337
342
  - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data.json
338
343
  - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_no_subrows.json
@@ -382,22 +387,6 @@ files:
382
387
  - app/pb_kits/playbook/pb_avatar/docs/_footer.md
383
388
  - app/pb_kits/playbook/pb_avatar/docs/example.yml
384
389
  - app/pb_kits/playbook/pb_avatar/docs/index.js
385
- - app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss
386
- - app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx
387
- - app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb
388
- - app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.rb
389
- - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.html.erb
390
- - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.jsx
391
- - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.html.erb
392
- - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.jsx
393
- - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click.jsx
394
- - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_onclick.html.erb
395
- - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.html.erb
396
- - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.jsx
397
- - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb
398
- - app/pb_kits/playbook/pb_avatar_action_button/docs/example.yml
399
- - app/pb_kits/playbook/pb_avatar_action_button/docs/index.js
400
- - app/pb_kits/playbook/pb_avatar_action_button/pb_avatar_action_button.test.js
401
390
  - app/pb_kits/playbook/pb_background/_background.scss
402
391
  - app/pb_kits/playbook/pb_background/_background.tsx
403
392
  - app/pb_kits/playbook/pb_background/background.html.erb
@@ -448,6 +437,7 @@ files:
448
437
  - app/pb_kits/playbook/pb_badge/docs/_description.md
449
438
  - app/pb_kits/playbook/pb_badge/docs/example.yml
450
439
  - app/pb_kits/playbook/pb_badge/docs/index.js
440
+ - app/pb_kits/playbook/pb_bar_graph/BarGraphStyles.scss
451
441
  - app/pb_kits/playbook/pb_bar_graph/_bar_graph.scss
452
442
  - app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx
453
443
  - app/pb_kits/playbook/pb_bar_graph/barGraph.test.js
@@ -476,6 +466,8 @@ files:
476
466
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md
477
467
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb
478
468
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx
469
+ - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx
470
+ - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md
479
471
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb
480
472
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx
481
473
  - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md
@@ -680,6 +672,8 @@ files:
680
672
  - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_swift.md
681
673
  - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_options.html.erb
682
674
  - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_props_swift.md
675
+ - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx
676
+ - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md
683
677
  - app/pb_kits/playbook/pb_checkbox/docs/_description.md
684
678
  - app/pb_kits/playbook/pb_checkbox/docs/example.yml
685
679
  - app/pb_kits/playbook/pb_checkbox/docs/index.js
@@ -831,6 +825,10 @@ files:
831
825
  - app/pb_kits/playbook/pb_currency/docs/_currency_negative.jsx
832
826
  - app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.html.erb
833
827
  - app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.jsx
828
+ - app/pb_kits/playbook/pb_currency/docs/_currency_null_display.html.erb
829
+ - app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx
830
+ - app/pb_kits/playbook/pb_currency/docs/_currency_null_display_rails.md
831
+ - app/pb_kits/playbook/pb_currency/docs/_currency_null_display_react.md
834
832
  - app/pb_kits/playbook/pb_currency/docs/_currency_props_swift.md
835
833
  - app/pb_kits/playbook/pb_currency/docs/_currency_size.html.erb
836
834
  - app/pb_kits/playbook/pb_currency/docs/_currency_size.jsx
@@ -1169,6 +1167,8 @@ files:
1169
1167
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md
1170
1168
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
1171
1169
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.md
1170
+ - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.html.erb
1171
+ - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md
1172
1172
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx
1173
1173
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.md
1174
1174
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.html.erb
@@ -1181,6 +1181,10 @@ files:
1181
1181
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.md
1182
1182
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.html.erb
1183
1183
  - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.md
1184
+ - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb
1185
+ - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md
1186
+ - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx
1187
+ - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.md
1184
1188
  - app/pb_kits/playbook/pb_draggable/docs/example.yml
1185
1189
  - app/pb_kits/playbook/pb_draggable/docs/index.js
1186
1190
  - app/pb_kits/playbook/pb_draggable/draggable.html.erb
@@ -1560,6 +1564,10 @@ files:
1560
1564
  - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx
1561
1565
  - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.md
1562
1566
  - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis_swift.md
1567
+ - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb
1568
+ - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.jsx
1569
+ - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md
1570
+ - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md
1563
1571
  - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.html.erb
1564
1572
  - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.jsx
1565
1573
  - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.md
@@ -1618,10 +1626,16 @@ files:
1618
1626
  - app/pb_kits/playbook/pb_icon/icon.rb
1619
1627
  - app/pb_kits/playbook/pb_icon/icon.test.js
1620
1628
  - app/pb_kits/playbook/pb_icon_button/_icon_button.scss
1629
+ - app/pb_kits/playbook/pb_icon_button/_icon_button.tsx
1621
1630
  - app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb
1631
+ - app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.jsx
1632
+ - app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.html.erb
1633
+ - app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.jsx
1622
1634
  - app/pb_kits/playbook/pb_icon_button/docs/example.yml
1635
+ - app/pb_kits/playbook/pb_icon_button/docs/index.js
1623
1636
  - app/pb_kits/playbook/pb_icon_button/icon_button.html.erb
1624
1637
  - app/pb_kits/playbook/pb_icon_button/icon_button.rb
1638
+ - app/pb_kits/playbook/pb_icon_button/icon_button.test.jsx
1625
1639
  - app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
1626
1640
  - app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx
1627
1641
  - app/pb_kits/playbook/pb_icon_circle/docs/_description.md
@@ -2111,6 +2125,8 @@ files:
2111
2125
  - app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.html.erb
2112
2126
  - app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.jsx
2113
2127
  - app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.md
2128
+ - app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx
2129
+ - app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional_react.md
2114
2130
  - app/pb_kits/playbook/pb_overlay/docs/example.yml
2115
2131
  - app/pb_kits/playbook/pb_overlay/docs/index.js
2116
2132
  - app/pb_kits/playbook/pb_overlay/overlay.html.erb
@@ -2265,6 +2281,11 @@ files:
2265
2281
  - app/pb_kits/playbook/pb_progress_pills/docs/_description.md
2266
2282
  - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.html.erb
2267
2283
  - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.jsx
2284
+ - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_default.md
2285
+ - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.html.erb
2286
+ - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width.jsx
2287
+ - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_rails.md
2288
+ - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_full_width_react.md
2268
2289
  - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_status.html.erb
2269
2290
  - app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_status.jsx
2270
2291
  - app/pb_kits/playbook/pb_progress_pills/docs/example.yml
@@ -2466,6 +2487,7 @@ files:
2466
2487
  - app/pb_kits/playbook/pb_select/docs/_select_value_text_same.jsx
2467
2488
  - app/pb_kits/playbook/pb_select/docs/example.yml
2468
2489
  - app/pb_kits/playbook/pb_select/docs/index.js
2490
+ - app/pb_kits/playbook/pb_select/index.js
2469
2491
  - app/pb_kits/playbook/pb_select/select.html.erb
2470
2492
  - app/pb_kits/playbook/pb_select/select.rb
2471
2493
  - app/pb_kits/playbook/pb_select/select.test.js
@@ -2733,12 +2755,17 @@ files:
2733
2755
  - app/pb_kits/playbook/pb_table/docs/_table_vertical_border.jsx
2734
2756
  - app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb
2735
2757
  - app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx
2758
+ - app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.html.erb
2759
+ - app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.jsx
2760
+ - app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.md
2736
2761
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.html.erb
2737
2762
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx
2738
2763
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_rails.md
2739
2764
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_react.md
2765
+ - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.html.erb
2740
2766
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx
2741
- - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.md
2767
+ - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click_rails.md
2768
+ - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click_react.md
2742
2769
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx
2743
2770
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.md
2744
2771
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content_rails.html.erb
@@ -2751,6 +2778,9 @@ files:
2751
2778
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md
2752
2779
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.html.erb
2753
2780
  - app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md
2781
+ - app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb
2782
+ - app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx
2783
+ - app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.md
2754
2784
  - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.jsx
2755
2785
  - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents.md
2756
2786
  - app/pb_kits/playbook/pb_table/docs/_table_with_subcomponents_as_divs.html.erb
@@ -3322,11 +3352,11 @@ files:
3322
3352
  - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
3323
3353
  - app/pb_kits/playbook/utilities/text.ts
3324
3354
  - app/pb_kits/playbook/utilities/validEmojiChecker.ts
3325
- - dist/chunks/_typeahead-CkemExmL.js
3326
- - dist/chunks/_weekday_stacked-CtSzPEH0.js
3355
+ - dist/chunks/_typeahead-PqkcDf1H.js
3356
+ - dist/chunks/_weekday_stacked-BrSrpj7J.js
3327
3357
  - dist/chunks/lazysizes-B7xYodB-.js
3328
- - dist/chunks/lib-DjpLC8uO.js
3329
- - dist/chunks/pb_form_validation-S56UaHZl.js
3358
+ - dist/chunks/lib-D3us1bGD.js
3359
+ - dist/chunks/pb_form_validation-BpihMSOQ.js
3330
3360
  - dist/chunks/vendor.js
3331
3361
  - dist/menu.yml
3332
3362
  - dist/playbook-doc.js
@@ -3362,6 +3392,7 @@ files:
3362
3392
  - lib/playbook/forms/builder/phone_number_field.rb
3363
3393
  - lib/playbook/forms/builder/select_field.rb
3364
3394
  - lib/playbook/forms/builder/star_rating_field.rb
3395
+ - lib/playbook/forms/builder/time_zone_select_field.rb
3365
3396
  - lib/playbook/forms/builder/typeahead_field.rb
3366
3397
  - lib/playbook/height.rb
3367
3398
  - lib/playbook/hover.rb
@@ -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>