playbook_ui 13.24.0 → 13.25.0.pre.alpha.PBNTR272Dropdownkitv42769

Sign up to get free protection for your applications and to get access to all the features.
Files changed (194) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +2 -0
  3. data/app/pb_kits/playbook/index.js +2 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +10 -14
  5. data/app/pb_kits/playbook/pb_advanced_table/table_body.html.erb +5 -9
  6. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +2 -6
  7. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +2 -6
  8. data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +1 -6
  9. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.html.erb +1 -6
  10. data/app/pb_kits/playbook/pb_background/_background.tsx +7 -5
  11. data/app/pb_kits/playbook/pb_background/background.html.erb +2 -11
  12. data/app/pb_kits/playbook/pb_badge/badge.html.erb +1 -6
  13. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +41 -6
  14. data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +4 -0
  15. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb +23 -0
  16. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +35 -0
  17. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb +26 -0
  18. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +36 -0
  19. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +3 -0
  20. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.html.erb +22 -0
  21. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +34 -0
  22. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.md +1 -0
  23. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +6 -0
  24. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +3 -0
  25. data/app/pb_kits/playbook/pb_body/_body.scss +3 -3
  26. data/app/pb_kits/playbook/pb_body/_body.tsx +1 -1
  27. data/app/pb_kits/playbook/pb_body/body.html.erb +1 -6
  28. data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb +1 -6
  29. data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb +2 -7
  30. data/app/pb_kits/playbook/pb_button/_button.scss +1 -1
  31. data/app/pb_kits/playbook/pb_button/button.html.erb +2 -3
  32. data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.html.erb +2 -7
  33. data/app/pb_kits/playbook/pb_caption/caption.html.erb +1 -6
  34. data/app/pb_kits/playbook/pb_card/card.html.erb +1 -7
  35. data/app/pb_kits/playbook/pb_card/card_body.html.erb +1 -6
  36. data/app/pb_kits/playbook/pb_card/card_header.html.erb +1 -6
  37. data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +1 -6
  38. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +1 -6
  39. data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb +1 -6
  40. data/app/pb_kits/playbook/pb_collapsible/collapsible_content.html.erb +1 -6
  41. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +1 -7
  42. data/app/pb_kits/playbook/pb_contact/contact.html.erb +1 -6
  43. data/app/pb_kits/playbook/pb_currency/currency.html.erb +1 -6
  44. data/app/pb_kits/playbook/pb_currency/docs/_currency_alignment_swift.md +43 -0
  45. data/app/pb_kits/playbook/pb_currency/docs/_currency_props_swift.md +12 -0
  46. data/app/pb_kits/playbook/pb_currency/docs/_currency_size_swift.md +31 -0
  47. data/app/pb_kits/playbook/pb_currency/docs/example.yml +5 -0
  48. data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.html.erb +1 -6
  49. data/app/pb_kits/playbook/pb_date/date.html.erb +1 -6
  50. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +2 -6
  51. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.html.erb +1 -5
  52. data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.html.erb +1 -5
  53. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default_swift.md +14 -0
  54. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_props_swift.md +9 -0
  55. data/app/pb_kits/playbook/pb_date_range_stacked/docs/example.yml +4 -0
  56. data/app/pb_kits/playbook/pb_date_stacked/date_stacked.html.erb +1 -5
  57. data/app/pb_kits/playbook/pb_date_time/date_time.html.erb +1 -6
  58. data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb +1 -7
  59. data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.html.erb +1 -5
  60. data/app/pb_kits/playbook/pb_detail/detail.html.erb +1 -6
  61. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +4 -2
  62. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +1 -6
  63. data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb +2 -7
  64. data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +1 -5
  65. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +2 -6
  66. data/app/pb_kits/playbook/pb_dialog/docs/example.yml +1 -1
  67. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +181 -0
  68. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +266 -0
  69. data/app/pb_kits/playbook/pb_dropdown/context/index.tsx +5 -0
  70. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +38 -0
  71. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +1 -0
  72. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +87 -0
  73. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.md +1 -0
  74. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +102 -0
  75. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md +1 -0
  76. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +104 -0
  77. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +5 -0
  78. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +63 -0
  79. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md +1 -0
  80. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +48 -0
  81. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md +1 -0
  82. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +77 -0
  83. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md +1 -0
  84. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +62 -0
  85. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +75 -0
  86. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +39 -0
  87. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +1 -0
  88. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +15 -0
  89. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +10 -0
  90. data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +207 -0
  91. data/app/pb_kits/playbook/pb_dropdown/hooks/useDropdown.tsx +17 -0
  92. data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx +61 -0
  93. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx +109 -0
  94. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +116 -0
  95. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +190 -0
  96. data/app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx +61 -0
  97. data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb +1 -6
  98. data/app/pb_kits/playbook/pb_filter/filter.html.erb +1 -5
  99. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb +1 -6
  100. data/app/pb_kits/playbook/pb_flex/flex.html.erb +1 -5
  101. data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +2 -6
  102. data/app/pb_kits/playbook/pb_form_group/form_group.html.erb +1 -6
  103. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +1 -1
  104. data/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb +1 -6
  105. data/app/pb_kits/playbook/pb_highlight/highlight.html.erb +1 -5
  106. data/app/pb_kits/playbook/pb_home_address_street/home_address_street.html.erb +1 -5
  107. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss +1 -1
  108. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx +1 -1
  109. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb +2 -7
  110. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb +1 -1
  111. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.test.js +3 -3
  112. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb +1 -6
  113. data/app/pb_kits/playbook/pb_icon_value/icon_value.html.erb +1 -6
  114. data/app/pb_kits/playbook/pb_label_pill/label_pill.html.erb +1 -6
  115. data/app/pb_kits/playbook/pb_label_value/label_value.html.erb +1 -6
  116. data/app/pb_kits/playbook/pb_layout/body.html.erb +1 -5
  117. data/app/pb_kits/playbook/pb_layout/footer.html.erb +1 -5
  118. data/app/pb_kits/playbook/pb_layout/header.html.erb +1 -5
  119. data/app/pb_kits/playbook/pb_layout/item.html.erb +1 -5
  120. data/app/pb_kits/playbook/pb_layout/layout.html.erb +1 -5
  121. data/app/pb_kits/playbook/pb_layout/sidebar.html.erb +1 -5
  122. data/app/pb_kits/playbook/pb_list/_list_item.tsx +2 -2
  123. data/app/pb_kits/playbook/pb_list/item.html.erb +2 -8
  124. data/app/pb_kits/playbook/pb_list/list.html.erb +2 -8
  125. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +1 -6
  126. data/app/pb_kits/playbook/pb_message/message.html.erb +1 -6
  127. data/app/pb_kits/playbook/pb_message/message_mention.html.erb +1 -6
  128. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb +1 -6
  129. data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb +1 -6
  130. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +1 -6
  131. data/app/pb_kits/playbook/pb_nav/item.html.erb +3 -14
  132. data/app/pb_kits/playbook/pb_nav/nav.html.erb +1 -6
  133. data/app/pb_kits/playbook/pb_online_status/online_status.html.erb +2 -6
  134. data/app/pb_kits/playbook/pb_pagination/pagination.html.erb +1 -6
  135. data/app/pb_kits/playbook/pb_passphrase/passphrase.html.erb +1 -1
  136. data/app/pb_kits/playbook/pb_person/person.html.erb +7 -12
  137. data/app/pb_kits/playbook/pb_person_contact/person_contact.html.erb +1 -6
  138. data/app/pb_kits/playbook/pb_pill/pill.html.erb +1 -6
  139. data/app/pb_kits/playbook/pb_popover/popover.html.erb +1 -6
  140. data/app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb +2 -6
  141. data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb +3 -6
  142. data/app/pb_kits/playbook/pb_progress_step/progress_step.html.erb +1 -5
  143. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb +1 -5
  144. data/app/pb_kits/playbook/pb_radio/radio.html.erb +2 -8
  145. data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +6 -2
  146. data/app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss +11 -1
  147. data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb +1 -6
  148. data/app/pb_kits/playbook/pb_select/select.html.erb +1 -5
  149. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb +1 -5
  150. data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb +1 -4
  151. data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb +1 -5
  152. data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb +1 -6
  153. data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb +1 -6
  154. data/app/pb_kits/playbook/pb_source/source.html.erb +1 -5
  155. data/app/pb_kits/playbook/pb_source/source.test.js +2 -2
  156. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +1 -5
  157. data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb +1 -5
  158. data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb +1 -5
  159. data/app/pb_kits/playbook/pb_table/table.html.erb +2 -12
  160. data/app/pb_kits/playbook/pb_table/table_body.html.erb +6 -16
  161. data/app/pb_kits/playbook/pb_table/table_cell.html.erb +6 -16
  162. data/app/pb_kits/playbook/pb_table/table_head.html.erb +6 -16
  163. data/app/pb_kits/playbook/pb_table/table_header.html.erb +4 -13
  164. data/app/pb_kits/playbook/pb_table/table_row.html.erb +6 -16
  165. data/app/pb_kits/playbook/pb_textarea/textarea.html.erb +1 -5
  166. data/app/pb_kits/playbook/pb_time/time.html.erb +1 -5
  167. data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb +1 -5
  168. data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb +1 -5
  169. data/app/pb_kits/playbook/pb_timeline/item.html.erb +3 -7
  170. data/app/pb_kits/playbook/pb_timeline/timeline.html.erb +1 -5
  171. data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb +1 -6
  172. data/app/pb_kits/playbook/pb_title/title.html.erb +1 -6
  173. data/app/pb_kits/playbook/pb_title_count/title_count.html.erb +1 -6
  174. data/app/pb_kits/playbook/pb_title_detail/title_detail.html.erb +1 -5
  175. data/app/pb_kits/playbook/pb_toggle/toggle.html.erb +1 -6
  176. data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb +1 -5
  177. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +27 -19
  178. data/app/pb_kits/playbook/pb_typeahead/components/MenuList.tsx +4 -2
  179. data/app/pb_kits/playbook/pb_typeahead/components/index.tsx +19 -0
  180. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx +51 -0
  181. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +1 -1
  182. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
  183. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  184. data/app/pb_kits/playbook/pb_user/user.html.erb +1 -6
  185. data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb +1 -6
  186. data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb +1 -6
  187. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  188. data/app/pb_kits/playbook/tokens/_colors.scss +1 -1
  189. data/dist/menu.yml +5 -1
  190. data/dist/playbook-rails.js +6 -6
  191. data/lib/playbook/kit_base.rb +21 -1
  192. data/lib/playbook/version.rb +2 -2
  193. metadata +51 -6
  194. /data/app/pb_kits/playbook/pb_dialog/docs/{_dialog_props_table.md → _dialog_props_swift.md} +0 -0
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 1111185a0ba8189b593aac01cc00c8e0e25665e52023c6dae98205d0a8292c97
4
- data.tar.gz: '08738c3ea661ac56922035b3e069885ea4b6233d7f7e6704d441e728a1c64aed'
3
+ metadata.gz: 71177d67df222d53293af018a05b5a4aa6e8c2320e2666e4a0fa306f9c7fa6b6
4
+ data.tar.gz: 4020bc3572296e4c84a58b117cd6b194d2875429baf2bcf606f5a9e2f3772b25
5
5
  SHA512:
6
- metadata.gz: 339c41e64df36a935e6bdd362dae6b6260faae9c524ea9f0aad8bd73ea26d9fd3c63fd69ce1234f97839794cd60c020120e583f814ea80b96654aa6771c3384c
7
- data.tar.gz: b86306732da6f9f96493f2c0b9bdef887aff78f0de2b2aeb7ba9d0a64aff1cd198021c55acf36fcd9bee75f68e3fbf457a95f43dfd1be203eb9943de53ae5065
6
+ metadata.gz: b628362eb09ed93b1084e3452766c4753edda243367d3217379e4ad4b83738567931f26af432583a7d38e34dcf8085c6ae05bb6415460a8cbf5b438a25ffd603
7
+ data.tar.gz: 1aed46186c6455ad3e8adb45e63fe1a55358237eec9c2fd72db3b12a4a9cdbc7031099be20d38e2e79a9bedf89b74cb97a96ed4cc67b05649e5d682064bfade0
@@ -1,5 +1,6 @@
1
1
 
2
2
 
3
+
3
4
  @import 'pb_advanced_table/advanced_table';
4
5
  @import 'pb_avatar/avatar';
5
6
  @import 'pb_avatar_action_button/avatar_action_button';
@@ -30,6 +31,7 @@
30
31
  @import 'pb_detail/detail';
31
32
  @import 'pb_dialog/dialog';
32
33
  @import 'pb_distribution_bar/distribution_bar';
34
+ @import 'pb_dropdown/dropdown';
33
35
  @import 'pb_file_upload/file_upload';
34
36
  @import 'pb_filter/filter';
35
37
  @import 'pb_fixed_confirmation_toast/fixed_confirmation_toast';
@@ -35,6 +35,7 @@ export { default as DateYearStacked } from './pb_date_year_stacked/_date_year_st
35
35
  export { default as Detail} from './pb_detail/_detail'
36
36
  export { default as Dialog } from './pb_dialog/_dialog'
37
37
  export { default as DistributionBar } from './pb_distribution_bar/_distribution_bar'
38
+ export { default as Dropdown} from './pb_dropdown/_dropdown'
38
39
  export { default as FileUpload } from './pb_file_upload/_file_upload'
39
40
  export { default as Filter } from './pb_filter/_filter'
40
41
  export { default as FixedConfirmationToast } from './pb_fixed_confirmation_toast/_fixed_confirmation_toast'
@@ -132,6 +133,7 @@ export { default as dialogHelper } from './pb_dialog/dialogHelper'
132
133
  //Theming
133
134
  export {default as mapTheme} from './pb_map/pbMapTheme'
134
135
  export {default as useCollapsible} from './pb_collapsible/useCollapsible'
136
+ export {default as useDropdown } from './pb_dropdown/hooks/useDropdown'
135
137
 
136
138
  // CSS Tokens
137
139
  export { default as borderRadius } from './tokens/exports/_border_radius.scss'
@@ -1,14 +1,10 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- class: object.classname,
4
- data: object.data,
5
- id: object.id) do %>
6
- <%= pb_rails("table", props: { size: "sm", tag:"div", data_table: true, number_spacing:"tabular", responsive:"none" }) do %>
7
- <% if content.present? %>
8
- <% content.presence %>
9
- <% else %>
10
- <%= pb_rails("advanced_table/table_header", props: {column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion }) %>
11
- <%= pb_rails("advanced_table/table_body", props: {table_data: object.table_data, column_definitions: object.column_definitions}) %>
12
- <% end %>
13
- <% end %>
14
- <% end %>
1
+ <%= pb_content_tag do %>
2
+ <%= pb_rails("table", props: { size: "sm", tag:"div", data_table: true, number_spacing:"tabular", responsive:"none" }) do %>
3
+ <% if content.present? %>
4
+ <% content.presence %>
5
+ <% else %>
6
+ <%= pb_rails("advanced_table/table_header", props: {column_definitions: object.column_definitions, enable_toggle_expansion: object.enable_toggle_expansion }) %>
7
+ <%= pb_rails("advanced_table/table_body", props: {table_data: object.table_data, column_definitions: object.column_definitions}) %>
8
+ <% end %>
9
+ <% end %>
10
+ <% end %>
@@ -1,9 +1,5 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- class: object.classname,
4
- data: object.data,
5
- id: object.id) do %>
6
- <% object.table_data.each do |row| %>
7
- <%= render_row_and_children(row, object.column_definitions) %>
8
- <% end %>
9
- <% end %>
1
+ <%= pb_content_tag do %>
2
+ <% object.table_data.each do |row| %>
3
+ <%= render_row_and_children(row, object.column_definitions) %>
4
+ <% end %>
5
+ <% end %>
@@ -1,8 +1,4 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- class: object.classname,
4
- data: object.data,
5
- id: object.id) do %>
1
+ <%= pb_content_tag do %>
6
2
  <%= pb_rails("table/table_row", props: {tag:"div"}) do %>
7
3
  <% object.column_definitions.each_with_index do |item, index| %>
8
4
  <%= pb_rails("table/table_header", props: { tag:"div", id:item[:accessor], classname:object.th_classname}) do %>
@@ -17,4 +13,4 @@
17
13
  <% end %>
18
14
  <% end %>
19
15
  <% end %>
20
- <% end %>
16
+ <% end %>
@@ -1,8 +1,4 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- class: object.classname,
4
- data: object.data,
5
- id: object.id) do %>
1
+ <%= pb_content_tag do %>
6
2
  <% object.column_definitions.each_with_index do |column, index| %>
7
3
  <%= pb_rails("table/table_cell", props: { tag:"div", classname:object.td_classname}) do %>
8
4
  <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end" }) do %>
@@ -34,4 +30,4 @@
34
30
  <% end %>
35
31
  <% end %>
36
32
  <% end %>
37
- <% end %>
33
+ <% end %>
@@ -1,9 +1,4 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data.merge(initials: object.initials),
4
- class: object.classname,
5
- aria: object.aria,
6
- **combined_html_options) do %>
1
+ <%= object.pb_content_tag(:div, data: object.data.merge(initials: object.initials)) do %>
7
2
  <%= content_tag(:div, data: { initials: object.initials }, class: "avatar_wrapper") do %>
8
3
  <%= pb_rails("image", props: { alt: object.alt_text, url: object.image_url, on_error: object.handle_img_error }) if object.image_url.present? %>
9
4
  <% end %>
@@ -1,9 +1,4 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- id: object.id,
4
- data: object.data,
5
- class: object.classname,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
  <% if object.tooltip_text.present? %>
8
3
  <%= pb_rails("tooltip", props: {
9
4
  trigger_element_id: object.tooltip_id,
@@ -65,7 +65,7 @@ const getResponsiveValue = <T extends string | undefined>(prop: ResponsiveProp<T
65
65
 
66
66
  const Background = (props: BackgroundProps): React.ReactElement => {
67
67
  const {
68
- alt = '',
68
+ alt = undefined,
69
69
  aria = {},
70
70
  backgroundColor = 'light',
71
71
  backgroundPosition = '',
@@ -130,11 +130,13 @@ const Background = (props: BackgroundProps): React.ReactElement => {
130
130
  );
131
131
 
132
132
  const backgroundStyle = {
133
- backgroundImage: resImageUrl ? `url(${resImageUrl})` : undefined,
134
- backgroundRepeat: resBackgroundRepeat || undefined,
135
- backgroundSize: resBackgroundSize || undefined,
136
- backgroundPosition: resBackgroundPosition || undefined,
137
133
  backgroundColor: customColor || undefined,
134
+ ...(resImageUrl !== '' ? {
135
+ backgroundImage: resImageUrl ? `url(${resImageUrl})` : undefined,
136
+ backgroundRepeat: resBackgroundRepeat || undefined,
137
+ backgroundPosition: resBackgroundPosition || undefined,
138
+ backgroundSize: resBackgroundSize || undefined,
139
+ } : {})
138
140
  };
139
141
 
140
142
  const Tag: React.ReactElement | any = `${tag}`;
@@ -1,23 +1,14 @@
1
1
  <% if object.image_url.present? %>
2
- <%= content_tag(object.tag,
3
- aria: object.aria,
4
- data: object.data,
5
- id: object.id,
6
- class: object.classname,
2
+ <%= pb_content_tag(object.tag,
7
3
  style: "background-image: url('#{object.image_url}');
8
4
  background-repeat: #{object.background_repeat};
9
5
  background-size: #{object.background_size};
10
6
  background-position: #{object.background_position};",
11
- **combined_html_options
12
7
  ) do %>
13
8
  <%= content.presence %>
14
9
  <% end %>
15
10
  <% else %>
16
- <%= content_tag(object.tag,
17
- aria: object.aria,
18
- data: object.data,
19
- id: object.id,
20
- class: object.classname,
11
+ <%= pb_content_tag(object.tag,
21
12
  style: object.custom_background_color
22
13
  ) do %>
23
14
  <%= content.presence %>
@@ -1,8 +1,3 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- id: object.id,
4
- data: object.data,
5
- class: object.classname,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag do %>
7
2
  <span><%= object.text %></span>
8
3
  <% end %>
@@ -13,12 +13,12 @@ import classnames from "classnames";
13
13
 
14
14
  type BarGraphProps = {
15
15
  align?: "left" | "right" | "center";
16
- axisTitle: string;
16
+ axisTitle: { name: string; }[] | string;
17
17
  dark?: boolean;
18
18
  xAxisCategories: [];
19
19
  yAxisMin: number;
20
20
  yAxisMax: number;
21
- chartData: { name: string; data: number[] }[];
21
+ chartData: { name: string; data: number[], yAxis: number }[];
22
22
  className?: string;
23
23
  customOptions?: Partial<Highcharts.Options>;
24
24
  id: string;
@@ -37,6 +37,8 @@ type BarGraphProps = {
37
37
  y?: number;
38
38
  aria?: { [key: string]: string };
39
39
  data?: { [key: string]: string };
40
+ stacking?: "normal" | "percent"
41
+ axisFormat?: { format: string; }[] | string;
40
42
  };
41
43
 
42
44
 
@@ -51,8 +53,10 @@ const BarGraph = ({
51
53
  colors,
52
54
  htmlOptions = {},
53
55
  customOptions = {},
56
+ axisFormat,
54
57
  id,
55
58
  pointStart,
59
+ stacking,
56
60
  subTitle,
57
61
  type = "column",
58
62
  title = "Title",
@@ -67,7 +71,7 @@ const BarGraph = ({
67
71
  x = 0,
68
72
  y = 0,
69
73
  ...props
70
- }: BarGraphProps): React.ReactElement => {
74
+ }: BarGraphProps): React.ReactElement => {
71
75
  const ariaProps = buildAriaProps(aria);
72
76
  const dataProps = buildDataProps(data)
73
77
  const htmlProps = buildHtmlProps(htmlOptions);
@@ -89,13 +93,23 @@ const BarGraph = ({
89
93
  subtitle: {
90
94
  text: subTitle,
91
95
  },
92
- yAxis: {
96
+ yAxis: [{
97
+ labels: {
98
+ format: typeof axisFormat === 'string' ? axisFormat : (axisFormat && axisFormat[0] ? axisFormat[0].format : "")
99
+
100
+ },
93
101
  min: yAxisMin,
94
102
  max: yAxisMax,
103
+ opposite: false,
95
104
  title: {
96
- text: axisTitle,
105
+ text: typeof axisTitle === 'string' ? axisTitle : axisTitle[0].name,
97
106
  },
98
- },
107
+ plotLines: typeof yAxisMin !== 'undefined' && yAxisMin !== null ? [] : [{
108
+ value: 0,
109
+ zIndex: 10,
110
+ color: "#E4E8F0"
111
+ }],
112
+ }],
99
113
  xAxis: {
100
114
  categories: xAxisCategories,
101
115
  },
@@ -113,7 +127,9 @@ const BarGraph = ({
113
127
  : highchartsTheme.colors,
114
128
  plotOptions: {
115
129
  series: {
130
+ stacking: stacking,
116
131
  pointStart: pointStart,
132
+ borderWidth: stacking ? 0 : "",
117
133
  events: {},
118
134
  dataLabels: {
119
135
  enabled: false,
@@ -124,6 +140,25 @@ const BarGraph = ({
124
140
  credits: false,
125
141
  };
126
142
 
143
+ if (Array.isArray(axisTitle) && axisTitle.length > 1 && axisTitle[1].name) {
144
+ staticOptions.yAxis.push({
145
+ labels: {
146
+ format: typeof axisFormat === 'string' ? axisFormat : axisFormat[1].format,
147
+ },
148
+ min: yAxisMin,
149
+ max: yAxisMax,
150
+ opposite: true,
151
+ title: {
152
+ text: axisTitle[1].name,
153
+ },
154
+ plotLines: typeof yAxisMin !== 'undefined' && yAxisMin !== null ? [] : [{
155
+ value: 0,
156
+ zIndex: 10,
157
+ color: "#E4E8F0"
158
+ }],
159
+ });
160
+ }
161
+
127
162
  if (!toggleLegendClick) {
128
163
  staticOptions.plotOptions.series.events = { legendItemClick: () => false };
129
164
  }
@@ -7,6 +7,7 @@ module Playbook
7
7
  values: %w[left right center],
8
8
  default: "center"
9
9
  prop :axis_title
10
+ prop :axis_format
10
11
  prop :chart_data, type: Playbook::Props::Array,
11
12
  default: []
12
13
  prop :custom_options, default: {}
@@ -14,6 +15,7 @@ module Playbook
14
15
  values: %w[vertical horizontal],
15
16
  default: "vertical"
16
17
  prop :point_start, type: Playbook::Props::Numeric
18
+ prop :stacking
17
19
  prop :subtitle
18
20
  prop :title
19
21
  prop :x_axis_categories, type: Playbook::Props::Array,
@@ -49,8 +51,10 @@ module Playbook
49
51
  dark: dark ? "dark" : "",
50
52
  type: chart_type,
51
53
  title: title,
54
+ stacking: stacking,
52
55
  subTitle: subtitle,
53
56
  axisTitle: axis_title,
57
+ axisFormat: axis_format,
54
58
  pointStart: point_start,
55
59
  xAxisCategories: x_axis_categories,
56
60
  yAxisMin: y_axis_min,
@@ -0,0 +1,23 @@
1
+ <% data = [{
2
+ name: 'Installation',
3
+ data: [-475, 400, -1000, 354, -856],
4
+ threshold: 0
5
+ }, {
6
+ name: 'Manufacturing',
7
+ data: [1475, 200, 1000, 654, -656],
8
+ threshold: 0
9
+ },
10
+ {
11
+ name: 'Sales & Distribution',
12
+ data: [1270, 100, -1200, 554, 756],
13
+ threshold: 0
14
+ }] %>
15
+
16
+ <%= pb_rails("bar_graph", props: {
17
+ axis_title: 'Number of Employees',
18
+ chart_data: data,
19
+ id: "bar-default",
20
+ x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
21
+ title: 'Bar Graph with Negative Numbers',
22
+ legend: true,
23
+ }) %>
@@ -0,0 +1,35 @@
1
+ import React from 'react'
2
+
3
+ import BarGraph from '../_bar_graph'
4
+
5
+ const chartData = [{
6
+ name: 'Installation',
7
+ data: [-475, 400, -1000, 354, -856],
8
+ threshold: 0
9
+ }, {
10
+ name: 'Manufacturing',
11
+ data: [1475, 200, 1000, 654, -656],
12
+ threshold: 0
13
+ },
14
+ {
15
+ name: 'Sales & Distribution',
16
+ data: [1270, 100, -1200, 554, 756],
17
+ threshold: 0
18
+ }]
19
+
20
+
21
+ const BarGraphStacked = (props) => (
22
+ <div>
23
+ <BarGraph
24
+ axisTitle="Number of Employees"
25
+ chartData={chartData}
26
+ id="bar-default"
27
+ legend
28
+ title="Bar Graph with Negative Numbers"
29
+ xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
30
+ {...props}
31
+ />
32
+ </div>
33
+ )
34
+
35
+ export default BarGraphStacked
@@ -0,0 +1,26 @@
1
+ <% data = [{
2
+ name: 'Number of Installations',
3
+ data: [1475,200,3000,654,656]
4
+ }, {
5
+ type: 'spline',
6
+ name: 'Percentage',
7
+ data: [48, 70, 25, 55, 72],
8
+ color: '#F9BB00',
9
+ yAxis: 1
10
+ }] %>
11
+
12
+ <% axis_titles = [{name: "Number of Installations"}, {name: "Percentage"}] %>
13
+
14
+ <% axis_formats = [{format: ""}, {format: "{value}%"}] %>
15
+
16
+ <%= pb_rails("bar_graph", props: {
17
+ axis_format: axis_formats,
18
+ axis_title: axis_titles,
19
+ chart_data: data,
20
+ id: "bar-spline",
21
+ y_axis_min: 0,
22
+ x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
23
+ subtitle: 'Source: thesolarfoundation.com',
24
+ title: 'Bar Graph with Secondary Y-axis',
25
+ legend: true,
26
+ }) %>
@@ -0,0 +1,36 @@
1
+ import React from 'react'
2
+
3
+ import BarGraph from '../_bar_graph'
4
+
5
+ const chartData = [{
6
+ name: 'Number of Installations',
7
+ data: [1475, 200, 3000, 654, 656],
8
+ }, {
9
+ type: 'spline',
10
+ name: 'Percentage',
11
+ data: [48, 70, 25, 55, 72],
12
+ color: '#F9BB00',
13
+ yAxis: 1
14
+ }]
15
+
16
+ const axisTitles = [ {name: "Number of Installations"}, {name: "Percentage"}]
17
+
18
+ const axisFormats = [{format: ""}, {format: "{value}%"}]
19
+
20
+ const BarGraphSecondaryYAxis= (props) => (
21
+ <div>
22
+ <BarGraph
23
+ axisFormat={axisFormats}
24
+ axisTitle={axisTitles}
25
+ chartData={chartData}
26
+ id="bar-spline"
27
+ legend
28
+ title="Bar Graph with Secondary Y-axis"
29
+ xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
30
+ yAxisMin={0}
31
+ {...props}
32
+ />
33
+ </div>
34
+ )
35
+
36
+ export default BarGraphSecondaryYAxis
@@ -0,0 +1,3 @@
1
+ Optionally add a second yAxis to support secondary datasets (e.x., a spline) by passing` yAxis: 1` to the second node of your `chartData` array.
2
+
3
+ To customize the format and/or title of your secondary yAxis, pass your desired values as arrays through the `axisFormat` and `axisTitle` props, respectively.
@@ -0,0 +1,22 @@
1
+ <% data = [{
2
+ name: 'Installation',
3
+ data: [1475, 200, 3000, 654, 656],
4
+ },
5
+ {
6
+ name: 'Manufacturing',
7
+ data: [1270, 800, 200, 454, 956],
8
+ }, {
9
+ name: 'Sales & Distribution',
10
+ data: [975, 1600, 1500, 924, 500],
11
+ }] %>
12
+
13
+ <%= pb_rails("bar_graph", props: {
14
+ axis_title: 'Number of Employees',
15
+ chart_data: data,
16
+ id: "bar-default",
17
+ y_axis_min: 0,
18
+ x_axis_categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
19
+ stacking: "normal",
20
+ title: 'Bar Graph with Stacked Columns',
21
+ legend: true,
22
+ }) %>
@@ -0,0 +1,34 @@
1
+ import React from 'react'
2
+
3
+ import BarGraph from '../_bar_graph'
4
+
5
+ const chartData = [{
6
+ name: 'Installation',
7
+ data: [1475, 200, 3000, 654, 656],
8
+ },
9
+ {
10
+ name: 'Manufacturing',
11
+ data: [1270, 800, 200, 454, 956],
12
+ }, {
13
+ name: 'Sales & Distribution',
14
+ data: [975, 1600, 1500, 924, 500],
15
+ }]
16
+
17
+
18
+ const BarGraphStacked = (props) => (
19
+ <div>
20
+ <BarGraph
21
+ axisTitle="Number Of Employees"
22
+ chartData={chartData}
23
+ id="bar-default"
24
+ legend
25
+ stacking="normal"
26
+ title="Bar Graph with Stacked Columns"
27
+ xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
28
+ yAxisMin={0}
29
+ {...props}
30
+ />
31
+ </div>
32
+ )
33
+
34
+ export default BarGraphStacked
@@ -0,0 +1 @@
1
+ The `stacking` prop can be used for a stacked bar graph. The prop allows for `normal` or `percent` as options.
@@ -9,6 +9,9 @@ examples:
9
9
  - bar_graph_spline: Spline
10
10
  - bar_graph_colors: Color Overrides
11
11
  - bar_graph_custom: Custom Overrides
12
+ - bar_graph_stacked: Stacked
13
+ - bar_graph_negative_numbers: Negative Numbers
14
+ - bar_graph_secondary_y_axis: Secondary Y-Axis
12
15
 
13
16
 
14
17
  react:
@@ -20,3 +23,6 @@ examples:
20
23
  - bar_graph_spline: Spline
21
24
  - bar_graph_colors: Color Overrides
22
25
  - bar_graph_custom: Custom Overrides
26
+ - bar_graph_stacked: Stacked
27
+ - bar_graph_negative_numbers: Negative Numbers
28
+ - bar_graph_secondary_y_axis: Secondary Y-Axis
@@ -6,3 +6,6 @@ export { default as BarGraphHeight } from './_bar_graph_height.jsx'
6
6
  export { default as BarGraphSpline } from './_bar_graph_spline.jsx'
7
7
  export { default as BarGraphColors } from './_bar_graph_colors.jsx'
8
8
  export { default as BarGraphCustom } from './_bar_graph_custom.jsx'
9
+ export { default as BarGraphStacked } from './_bar_graph_stacked.jsx'
10
+ export { default as BarGraphNegativeNumbers } from './_bar_graph_negative_numbers.jsx'
11
+ export { default as BarGraphSecondaryYAxis } from './_bar_graph_secondary_y_axis.jsx'
@@ -19,7 +19,7 @@
19
19
  }
20
20
  }
21
21
  b, strong {
22
- @include pb_title_4
22
+ font-weight: $bold;
23
23
  }
24
24
 
25
25
  a {
@@ -29,8 +29,8 @@
29
29
  }
30
30
  }
31
31
 
32
- em {
33
- font-weight: $bold;
32
+ em, i {
33
+ font-style: italic;
34
34
  }
35
35
 
36
36
  small {
@@ -15,7 +15,7 @@ type BodyProps = {
15
15
  data?: {[key: string]: string},
16
16
  highlightedText?: string[],
17
17
  highlighting?: boolean,
18
- htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
18
+ htmlOptions?: {[key: string]: string | number | boolean | (() => void) | ((arg?: Event) => void)},
19
19
  id?: string,
20
20
  status?: 'neutral' | 'negative' | 'positive',
21
21
  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
@@ -1,8 +1,3 @@
1
- <%= content_tag(object.tag,
2
- aria: object.aria,
3
- id: object.id,
4
- data: object.data,
5
- class: object.classname,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag(object.tag) do %>
7
2
  <%= object.content %>
8
3
  <% end %>
@@ -1,9 +1,4 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- aria: object.aria,
6
- **combined_html_options) do%>
1
+ <%= pb_content_tag do %>
7
2
  <%= content_tag(object.link ? 'a' : 'span', class: 'bread_crumb_item', href: object.link) do %>
8
3
  <%= content.presence %>
9
4
  <% end %>
@@ -1,8 +1,3 @@
1
- <%= content_tag(:nav,
2
- aria: object.aria,
3
- id: object.id,
4
- data: object.data,
5
- class: object.classname,
6
- **combined_html_options) do %>
7
- <%= content.presence %>
1
+ <%= pb_content_tag(:nav) do %>
2
+ <%= content.presence %>
8
3
  <% end %>
@@ -17,7 +17,7 @@ $pb_button_sizes: (
17
17
  @each $name, $size in $pb_button_sizes {
18
18
  &[class*=size_#{$name}] {
19
19
  font-size: $size;
20
- padding: calc(#{$size} / 2) calc(#{$size} * 2.42) !important;
20
+ padding: calc(#{$size} / 2) calc(#{$size} * 2.42);
21
21
  @if $name == "sm" {
22
22
  min-height: 0;
23
23
  }
@@ -1,6 +1,5 @@
1
- <%= content_tag(object.tag,
2
- object.tag == "button" ? object.options : object.link_options,
3
- **combined_html_options) do %>
1
+ <%= pb_content_tag(object.tag,
2
+ object.tag == "button" ? object.options : object.link_options) do %>
4
3
  <% if object.variant === "reaction" %>
5
4
  <% if icon && object.valid_emoji(object.icon) %>
6
5
  <%= pb_rails("flex", props:{ align: "center" }) do %>
@@ -1,8 +1,3 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- class: object.classname,
4
- data: object.data,
5
- id: object.id,
6
- **combined_html_options) do %>
7
- <%= content.presence || object.text %>
1
+ <%= pb_content_tag do %>
2
+ <%= content.presence || object.text %>
8
3
  <% end %>