playbook_ui 14.21.2 → 14.22.0.pre.alpha.PLAY2132phonenumberinputvalidationtooaggressive8863

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 (231) 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/Components/CustomCell.tsx +11 -9
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +20 -4
  5. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +32 -11
  6. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +25 -5
  7. data/app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx +36 -16
  8. data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx +18 -5
  9. data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts +37 -17
  10. data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts +32 -7
  11. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +3 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +91 -40
  13. data/app/pb_kits/playbook/pb_advanced_table/Utilities/CellRendererUtils.tsx +4 -1
  14. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ColumnStylingHelper.ts +15 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/Utilities/TableContainerStyles.ts +3 -2
  16. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +68 -6
  17. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +42 -18
  18. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +105 -2
  19. data/app/pb_kits/playbook/pb_advanced_table/advanced_table_action_bar.js +36 -0
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb +1 -1
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb +1 -1
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb +1 -1
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx +51 -0
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md +7 -0
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx +77 -0
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.md +1 -0
  27. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.html.erb +63 -0
  28. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.md +1 -0
  29. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.html.erb +38 -0
  30. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.md +7 -0
  31. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.jsx +65 -0
  32. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.md +5 -0
  33. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.md +3 -0
  34. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb +1 -1
  35. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows.jsx +1 -1
  36. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_react.md +5 -3
  37. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.jsx +64 -0
  38. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.md +7 -0
  39. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions.jsx +2 -2
  40. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions_rails.html.erb +3 -2
  41. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb +1 -1
  42. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.jsx +69 -0
  43. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md +1 -0
  44. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +8 -0
  45. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +6 -0
  46. data/app/pb_kits/playbook/pb_advanced_table/flat_advanced_table.js +60 -84
  47. data/app/pb_kits/playbook/pb_advanced_table/index.js +125 -213
  48. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +16 -1
  49. data/app/pb_kits/playbook/pb_advanced_table/table_action_bar.html.erb +1 -1
  50. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +1 -1
  51. data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +5 -0
  52. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +3 -3
  53. data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +33 -0
  54. data/app/pb_kits/playbook/pb_badge/_badge.scss +5 -6
  55. data/app/pb_kits/playbook/pb_bar_graph/barGraphTheme.ts +106 -0
  56. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx +33 -15
  57. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx +33 -15
  58. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.jsx +52 -22
  59. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.md +3 -0
  60. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_horizontal.jsx +12 -16
  61. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +31 -15
  62. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +39 -16
  63. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +86 -38
  64. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +32 -15
  65. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +72 -22
  66. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +1 -1
  67. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_spline.jsx +31 -15
  68. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +37 -16
  69. data/app/pb_kits/playbook/pb_bar_graph/docs/_description.md +1 -3
  70. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -3
  71. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +0 -2
  72. data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +36 -1
  73. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +71 -26
  74. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +29 -16
  75. data/app/pb_kits/playbook/pb_circle_chart/docs/{_circle_chart_colors.md → _circle_chart_colors_rails.md} +1 -1
  76. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors_react.md +2 -0
  77. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +28 -16
  78. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.md +4 -2
  79. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +23 -15
  80. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx +81 -51
  81. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +103 -75
  82. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.md +3 -6
  83. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +19 -13
  84. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +30 -17
  85. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx +34 -20
  86. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx +29 -20
  87. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx +28 -20
  88. data/app/pb_kits/playbook/pb_circle_chart/docs/_description.md +1 -0
  89. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +0 -1
  90. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +0 -1
  91. data/app/pb_kits/playbook/pb_contact/contact.test.js +2 -2
  92. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +1 -39
  93. data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +1 -39
  94. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb +3 -3
  95. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx +7 -4
  96. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +6 -3
  97. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +6 -3
  98. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb +3 -3
  99. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.html.erb +3 -3
  100. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx +7 -4
  101. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +3 -3
  102. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +7 -4
  103. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.jsx +19 -10
  104. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.jsx +19 -10
  105. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.html.erb +10 -10
  106. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.html.erb +10 -10
  107. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.html.erb +10 -10
  108. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.jsx +20 -11
  109. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.html.erb +3 -3
  110. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.jsx +8 -8
  111. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.html.erb +10 -10
  112. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.jsx +23 -14
  113. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb +3 -3
  114. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx +6 -3
  115. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx +6 -3
  116. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.html.erb +3 -3
  117. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb +3 -3
  118. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx +6 -3
  119. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb +3 -3
  120. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +3 -3
  121. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb +4 -4
  122. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.jsx +4 -4
  123. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +4 -4
  124. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +4 -4
  125. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options.html.erb +52 -0
  126. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options.jsx +99 -0
  127. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options_rails.md +1 -0
  128. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options_react.md +1 -0
  129. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +3 -3
  130. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.html.erb +3 -3
  131. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +3 -3
  132. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +3 -3
  133. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.html.erb +28 -0
  134. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.jsx +47 -0
  135. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_rails.md +1 -0
  136. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_react.md +1 -0
  137. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +3 -3
  138. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.html.erb +3 -3
  139. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +3 -3
  140. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +3 -3
  141. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +6 -3
  142. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx +3 -3
  143. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb +3 -3
  144. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +4 -0
  145. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +3 -1
  146. data/app/pb_kits/playbook/pb_filter/Filter/FilterSection.tsx +49 -0
  147. data/app/pb_kits/playbook/pb_filter/Filter/FilterSidebar.tsx +69 -0
  148. data/app/pb_kits/playbook/pb_filter/Filter/index.tsx +13 -0
  149. data/app/pb_kits/playbook/pb_filter/_filter.scss +4 -0
  150. data/app/pb_kits/playbook/pb_filter/docs/_filter_sidebar.jsx +224 -0
  151. data/app/pb_kits/playbook/pb_filter/docs/example.yml +1 -0
  152. data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
  153. data/app/pb_kits/playbook/pb_filter/filter.test.js +2 -2
  154. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +27 -17
  155. data/app/pb_kits/playbook/pb_table/_table.tsx +4 -4
  156. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.html.erb +8 -8
  157. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx +8 -8
  158. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_rails.md +1 -1
  159. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md +1 -1
  160. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb +12 -12
  161. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx +12 -12
  162. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md +2 -2
  163. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md +3 -3
  164. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.html.erb +12 -12
  165. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.jsx +12 -12
  166. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_rails.md +2 -2
  167. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_react.md +3 -3
  168. data/app/pb_kits/playbook/pb_table/index.ts +4 -4
  169. data/app/pb_kits/playbook/pb_table/styles/_table-card.scss +11 -0
  170. data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss +4 -0
  171. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +34 -22
  172. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb +14 -0
  173. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.jsx +25 -0
  174. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md +1 -0
  175. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_react.md +1 -0
  176. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +2 -0
  177. data/app/pb_kits/playbook/pb_tooltip/docs/index.js +1 -0
  178. data/app/pb_kits/playbook/pb_tooltip/index.js +59 -36
  179. data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +9 -2
  180. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb +18 -0
  181. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input_rails.md +1 -0
  182. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
  183. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +3 -0
  184. data/dist/chunks/_circle_chart-C56zcOHC.js +1 -0
  185. data/dist/chunks/_typeahead-Do6525vz.js +22 -0
  186. data/dist/chunks/_weekday_stacked-CrFm3XuJ.js +45 -0
  187. data/dist/chunks/lazysizes-B7xYodB-.js +1 -0
  188. data/dist/chunks/lib-DYpq0k8j.js +29 -0
  189. data/dist/chunks/{pb_form_validation-DyvJ8iPe.js → pb_form_validation-BUOKwfvW.js} +1 -1
  190. data/dist/chunks/vendor.js +1 -1
  191. data/dist/menu.yml +0 -9
  192. data/dist/playbook-doc.js +3 -3
  193. data/dist/playbook-rails-react-bindings.js +1 -1
  194. data/dist/playbook-rails.js +1 -1
  195. data/dist/playbook.css +1 -1
  196. data/lib/playbook/version.rb +2 -2
  197. metadata +48 -38
  198. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx +0 -72
  199. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +0 -6
  200. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx +0 -64
  201. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md +0 -1
  202. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +0 -38
  203. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +0 -1
  204. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.scss +0 -14
  205. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +0 -119
  206. data/app/pb_kits/playbook/pb_treemap_chart/docs/_description.md +0 -5
  207. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb +0 -37
  208. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.jsx +0 -48
  209. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.md +0 -2
  210. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.html.erb +0 -37
  211. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.jsx +0 -47
  212. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.md +0 -3
  213. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.html.erb +0 -79
  214. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.jsx +0 -90
  215. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.md +0 -1
  216. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.html.erb +0 -54
  217. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.jsx +0 -65
  218. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.md +0 -3
  219. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.html.erb +0 -37
  220. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx +0 -48
  221. data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.md +0 -3
  222. data/app/pb_kits/playbook/pb_treemap_chart/docs/example.yml +0 -15
  223. data/app/pb_kits/playbook/pb_treemap_chart/docs/index.js +0 -5
  224. data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js +0 -63
  225. data/app/pb_kits/playbook/pb_treemap_chart/treemap_chart.html.erb +0 -1
  226. data/app/pb_kits/playbook/pb_treemap_chart/treemap_chart.rb +0 -48
  227. data/dist/chunks/_typeahead-BlPRej0F.js +0 -22
  228. data/dist/chunks/_weekday_stacked-CzxoxxCR.js +0 -45
  229. data/dist/chunks/lazysizes-DHz07jlL.js +0 -1
  230. data/dist/chunks/lib-D4vXIZF5.js +0 -29
  231. /data/app/pb_kits/playbook/pb_typeahead/docs/{_typeahead_preserve_input.md → _typeahead_preserve_input_react.md} +0 -0
@@ -1,36 +1,37 @@
1
1
  import React, { useState } from 'react'
2
-
3
- import CircleChart from '../_circle_chart'
2
+ import circleChartTheme from '../circleChartTheme'
3
+ import Highcharts from "highcharts"
4
+ import HighchartsReact from "highcharts-react-official"
4
5
  import Button from '../../pb_button/_button'
5
6
 
6
7
  const CircleChartLiveData = (props) => {
7
8
  const [data, setData] = useState([
8
9
  {
9
10
  name: 'Waiting for Calls',
10
- value: 41,
11
+ y: 41,
11
12
  },
12
13
  {
13
14
  name: 'On Call',
14
- value: 49,
15
+ y: 49,
15
16
  },
16
17
  {
17
18
  name: 'After Call',
18
- value: 10,
19
+ y: 10,
19
20
  },
20
21
  ])
21
22
 
22
23
  const data2 = [
23
24
  {
24
25
  name: 'Waiting for Calls',
25
- value: 48,
26
+ y: 48,
26
27
  },
27
28
  {
28
29
  name: 'On Call',
29
- value: 12,
30
+ y: 12,
30
31
  },
31
32
  {
32
33
  name: 'After Call',
33
- value: 140,
34
+ y: 140,
34
35
  },
35
36
  ]
36
37
 
@@ -38,6 +39,12 @@ const CircleChartLiveData = (props) => {
38
39
  setData(data2)
39
40
  }
40
41
 
42
+ const chartOptions = {
43
+ series: [{ data: data }],
44
+ }
45
+
46
+ const options = Highcharts.merge({}, circleChartTheme, chartOptions)
47
+
41
48
  return (
42
49
  <div>
43
50
  <Button
@@ -45,13 +52,12 @@ const CircleChartLiveData = (props) => {
45
52
  text="Update Value"
46
53
  {...props}
47
54
  />
48
- <CircleChart
49
- chartData={data}
50
- id="circle-chart-live-data"
51
- {...props}
55
+ <HighchartsReact
56
+ highcharts={Highcharts}
57
+ options={options}
52
58
  />
53
59
  </div>
54
60
  )
55
61
  }
56
62
 
57
- export default CircleChartLiveData
63
+ export default CircleChartLiveData
@@ -1,32 +1,45 @@
1
1
  import React from 'react'
2
-
3
- import CircleChart from '../_circle_chart'
2
+ import circleChartTheme from '../circleChartTheme'
3
+ import Highcharts from "highcharts"
4
+ import HighchartsReact from "highcharts-react-official"
4
5
 
5
6
  const dataRounded = [
6
7
  {
7
8
  name: 'Waiting for Calls',
8
- value: 41,
9
+ y: 41,
9
10
  },
10
11
  {
11
12
  name: 'On Call',
12
- value: 49,
13
+ y: 49,
13
14
  },
14
15
  {
15
16
  name: 'After Call',
16
- value: 10,
17
+ y: 10,
17
18
  },
18
19
  ]
19
20
 
20
- const CircleChartRounded = (props) => (
21
- <div>
22
- <CircleChart
23
- chartData={dataRounded}
24
- id="default-test-rounded"
25
- innerSize="lg"
26
- rounded
27
- {...props}
28
- />
29
- </div>
30
- )
21
+ const CircleChartRounded = () => {
22
+ const chartOptions = {
23
+ series: [{ data: dataRounded }],
24
+ plotOptions: {
25
+ pie: {
26
+ borderColor: null,
27
+ borderWidth: 20,
28
+ innerSize: '100%',
29
+ },
30
+ },
31
+ }
32
+
33
+ const options = Highcharts.merge({}, circleChartTheme, chartOptions)
34
+
35
+ return (
36
+ <div>
37
+ <HighchartsReact
38
+ highcharts={Highcharts}
39
+ options={options}
40
+ />
41
+ </div>
42
+ )
43
+ }
31
44
 
32
- export default CircleChartRounded
45
+ export default CircleChartRounded
@@ -1,47 +1,61 @@
1
1
  import React from 'react'
2
-
3
- import CircleChart from '../_circle_chart'
2
+ import circleChartTheme from '../circleChartTheme'
3
+ import Highcharts from "highcharts"
4
+ import HighchartsReact from "highcharts-react-official"
4
5
 
5
6
  const dataWithLabels = [
6
7
  {
7
8
  name: 'Facebook',
8
- value: 2498,
9
+ y: 2498,
9
10
  },
10
11
  {
11
12
  name: 'YouTube',
12
- value: 2000,
13
+ y: 2000,
13
14
  },
14
15
  {
15
16
  name: 'WhatsApp',
16
- value: 2000,
17
+ y: 2000,
17
18
  },
18
19
  {
19
20
  name: 'Facebook Messenger',
20
- value: 1300,
21
+ y: 1300,
21
22
  },
22
23
  {
23
24
  name: 'WeChat',
24
- value: 1165,
25
+ y: 1165,
25
26
  },
26
27
  {
27
28
  name: 'Instagram',
28
- value: 1000,
29
+ y: 1000,
29
30
  },
30
31
  {
31
32
  name: 'Tik Tok',
32
- value: 800,
33
+ y: 800,
33
34
  },
34
35
  ]
35
36
 
36
- const CircleChartWithLabels = (props) => (
37
- <div>
38
- <CircleChart
39
- chartData={dataWithLabels}
40
- dataLabels
41
- id="with-labels-example"
42
- {...props}
43
- />
44
- </div>
45
- )
37
+ const CircleChartWithLabels = () => {
38
+ const chartOptions = {
39
+ series: [{ data: dataWithLabels }],
40
+ plotOptions: {
41
+ pie: {
42
+ dataLabels: {
43
+ enabled: true,
44
+ }
45
+ }
46
+ }
47
+ }
48
+
49
+ const options = Highcharts.merge({}, circleChartTheme, chartOptions)
50
+
51
+ return (
52
+ <div>
53
+ <HighchartsReact
54
+ highcharts={Highcharts}
55
+ options={options}
56
+ />
57
+ </div>
58
+ )
59
+ }
46
60
 
47
- export default CircleChartWithLabels
61
+ export default CircleChartWithLabels
@@ -1,32 +1,41 @@
1
1
  import React from 'react'
2
-
3
- import CircleChart from '../_circle_chart'
2
+ import circleChartTheme from '../circleChartTheme'
3
+ import Highcharts from "highcharts"
4
+ import HighchartsReact from "highcharts-react-official"
4
5
 
5
6
  const dataWithLegend = [{
6
7
  name: 'Bugs',
7
- value: 8,
8
-
8
+ y: 8,
9
9
  },
10
10
  {
11
11
  name: 'Chores',
12
- value: 1,
13
-
12
+ y: 1,
14
13
  },
15
14
  {
16
15
  name: 'Stories',
17
- value: 12,
18
- },
19
- ]
16
+ y: 12,
17
+ }]
18
+
19
+ const CircleChartWithLegendKit = () => {
20
+ const chartOptions = {
21
+ series: [{ data: dataWithLegend }],
22
+ plotOptions: {
23
+ pie: {
24
+ showInLegend: true
25
+ }
26
+ }
27
+ }
28
+
29
+ const options = Highcharts.merge({}, circleChartTheme, chartOptions)
20
30
 
21
- const CircleChartWithLegendKit = (props) => (
22
- <div>
23
- <CircleChart
24
- chartData={dataWithLegend}
25
- id="with-legend-example"
26
- legend
27
- {...props}
28
- />
29
- </div>
30
- )
31
+ return (
32
+ <div>
33
+ <HighchartsReact
34
+ highcharts={Highcharts}
35
+ options={options}
36
+ />
37
+ </div>
38
+ )
39
+ }
31
40
 
32
- export default CircleChartWithLegendKit
41
+ export default CircleChartWithLegendKit
@@ -1,47 +1,55 @@
1
1
  import React from 'react'
2
-
3
- import CircleChart from '../_circle_chart'
2
+ import circleChartTheme from '../circleChartTheme'
3
+ import Highcharts from "highcharts"
4
+ import HighchartsReact from "highcharts-react-official"
4
5
 
5
6
  const dataWithTitle = [
6
7
  {
7
8
  name: 'Facebook',
8
- value: 2498,
9
+ y: 2498,
9
10
  },
10
11
  {
11
12
  name: 'YouTube',
12
- value: 2000,
13
+ y: 2000,
13
14
  },
14
15
  {
15
16
  name: 'WhatsApp',
16
- value: 2000,
17
+ y: 2000,
17
18
  },
18
19
  {
19
20
  name: 'Facebook Messenger',
20
- value: 1300,
21
+ y: 1300,
21
22
  },
22
23
  {
23
24
  name: 'WeChat',
24
- value: 1165,
25
+ y: 1165,
25
26
  },
26
27
  {
27
28
  name: 'Instagram',
28
- value: 1000,
29
+ y: 1000,
29
30
  },
30
31
  {
31
32
  name: 'Tik Tok',
32
- value: 800,
33
+ y: 800,
33
34
  },
34
35
  ]
35
36
 
36
- const CircleChartWithLegendKit = (props) => (
37
- <div>
38
- <CircleChart
39
- chartData={dataWithTitle}
40
- id="with-title-example"
41
- title="Active Users on Social Media"
42
- {...props}
43
- />
44
- </div>
45
- )
37
+ const CircleChartWithTitle = () => {
38
+ const chartOptions = {
39
+ title: { text: "Active Users on Social Media" },
40
+ series: [{ data: dataWithTitle }],
41
+ }
42
+
43
+ const options = Highcharts.merge({}, circleChartTheme, chartOptions)
44
+
45
+ return (
46
+ <div>
47
+ <HighchartsReact
48
+ highcharts={Highcharts}
49
+ options={options}
50
+ />
51
+ </div>
52
+ )
53
+ }
46
54
 
47
- export default CircleChartWithLegendKit
55
+ export default CircleChartWithTitle
@@ -0,0 +1 @@
1
+ **Important Note for the React Kit**: In order to leverage this kit, you must install `highcharts` and `highcharts-react-official` into your project as shown below. To then apply Playbook styles to your Highchart, import circleChartTheme.ts from playbook-ui and merge it with your Highchart options. Then, pass the merged value to the options prop. Playbook’s styling will be applied automatically. See the examples in the documentation below.
@@ -14,7 +14,6 @@ examples:
14
14
 
15
15
  react:
16
16
  - circle_chart_default: Default Style
17
- - circle_chart_pb_styles: Playbook Styles
18
17
  - circle_chart_live_data: Live Data
19
18
  - circle_chart_rounded: Rounded Corners
20
19
  - circle_chart_block: Accepts Any Block
@@ -9,4 +9,3 @@ export { default as CircleChartLegendPosition } from './_circle_chart_legend_pos
9
9
  export { default as CircleChartWithTitle } from './_circle_chart_with_title.jsx'
10
10
  export { default as CircleChartInnerSizes } from './_circle_chart_inner_sizes.jsx'
11
11
  export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"
12
- export { default as CircleChartPbStyles } from "./_circle_chart_pb_styles.jsx"
@@ -77,12 +77,12 @@ test('returns correct icon', () => {
77
77
 
78
78
  expect(screen.getByTestId('test-cell').querySelector('.pb_custom_icon')).toBeInTheDocument()
79
79
  expect(screen.getByTestId('test-home').querySelector('.pb_custom_icon')).toBeInTheDocument()
80
- expect(screen.getByTestId('test-work').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-office')
80
+ expect(screen.getByTestId('test-work').querySelector('.pb_custom_icon')).toBeInTheDocument()
81
81
  expect(screen.getByTestId('test-work-cell').querySelector('.pb_custom_icon')).toBeInTheDocument()
82
82
  expect(screen.getByTestId('test-email').querySelector('.pb_custom_icon')).toBeInTheDocument()
83
83
  expect(screen.getByTestId('test-wrong-phone').querySelector('.pb_custom_icon')).toBeInTheDocument()
84
84
  expect(screen.getByTestId('test-wrong-type').querySelector('.pb_custom_icon')).toBeInTheDocument()
85
- expect(screen.getByTestId('test-extension').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-plus')
85
+ expect(screen.getByTestId('test-extension').querySelector('.pb_custom_icon')).toBeInTheDocument()
86
86
  expect(screen.getByTestId('test-empty').querySelector('.pb_custom_icon')).toBeInTheDocument()
87
87
  })
88
88
 
@@ -3,8 +3,6 @@ import typography from '../tokens/exports/_typography.module.scss'
3
3
 
4
4
  import { ThemeProps } from './themeTypes'
5
5
 
6
- import { PlotTreemapOptions } from "highcharts";
7
-
8
6
  const highchartsDarkTheme: ThemeProps = {
9
7
  lang: {
10
8
  thousandsSep: ',',
@@ -166,43 +164,7 @@ const highchartsDarkTheme: ThemeProps = {
166
164
  marker: {
167
165
  lineColor: colors.border_dark,
168
166
  },
169
- },
170
-
171
- //TREEMAP CHART STYLES
172
- treemap: {
173
- layoutAlgorithm: "squarified",
174
- allowTraversingTree: false,
175
- animationLimit: 1000,
176
- colors: [
177
- colors.data_1,
178
- colors.data_2,
179
- colors.data_3,
180
- colors.data_4,
181
- colors.data_5,
182
- colors.data_6,
183
- colors.data_7,
184
- colors.data_8,
185
- ],
186
- dataLabels: {
187
- enabled: true,
188
- style: {
189
- fontFamily: typography.font_family_base,
190
- fontWeight: typography.bold,
191
- fontSize: typography.heading_4,
192
- },
193
- },
194
- levels: [
195
- {
196
- level: 1,
197
- dataLabels: {
198
- enabled: false,
199
- },
200
- },
201
- ],
202
- traverseUpButton: {
203
- position: { y: -50 },
204
- },
205
- } as PlotTreemapOptions,
167
+ }
206
168
  },
207
169
  credits: {
208
170
  enabled: false
@@ -3,8 +3,6 @@ import typography from '../tokens/exports/_typography.module.scss'
3
3
 
4
4
  import { ThemeProps } from './themeTypes'
5
5
 
6
- import { PlotTreemapOptions } from "highcharts";
7
-
8
6
  const highchartsTheme: ThemeProps = {
9
7
  lang: {
10
8
  thousandsSep: ',',
@@ -165,43 +163,7 @@ const highchartsTheme: ThemeProps = {
165
163
  marker: {
166
164
  lineColor: '#333',
167
165
  },
168
- },
169
-
170
- //TREEMAP CHART STYLES
171
- treemap: {
172
- layoutAlgorithm: "squarified",
173
- allowTraversingTree: false,
174
- animationLimit: 1000,
175
- colors: [
176
- colors.data_1,
177
- colors.data_2,
178
- colors.data_3,
179
- colors.data_4,
180
- colors.data_5,
181
- colors.data_6,
182
- colors.data_7,
183
- colors.data_8,
184
- ],
185
- dataLabels: {
186
- enabled: true,
187
- style: {
188
- fontFamily: typography.font_family_base,
189
- fontWeight: typography.bold,
190
- fontSize: typography.heading_4,
191
- },
192
- },
193
- levels: [
194
- {
195
- level: 1,
196
- dataLabels: {
197
- enabled: false,
198
- },
199
- },
200
- ],
201
- traverseUpButton: {
202
- position: { y: -50 },
203
- },
204
- } as PlotTreemapOptions,
166
+ }
205
167
  },
206
168
  credits: {
207
169
  enabled: false
@@ -1,8 +1,8 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'United States', id: 'us' },
4
- { label: 'Canada', value: 'Canada', id: 'ca' },
5
- { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
3
+ { label: 'United States', value: 'unitedStates', id: 'us' },
4
+ { label: 'Canada', value: 'canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'pakistan', id: 'pk' },
6
6
  ]
7
7
 
8
8
  %>
@@ -5,17 +5,20 @@ const DropdownBlankSelection = (props) => {
5
5
  const options = [
6
6
  {
7
7
  label: "United States",
8
- value: "United States",
8
+ value: "unitedStates",
9
+ id: "us"
9
10
  },
10
11
  {
11
12
  label: "Canada",
12
- value: "Canada",
13
+ value: "canada",
14
+ id: "ca"
13
15
  },
14
16
  {
15
17
  label: "Pakistan",
16
- value: "Pakistan",
18
+ value: "pakistan",
19
+ id: "pk"
17
20
  }
18
- ];
21
+ ];
19
22
 
20
23
  return (
21
24
  <>
@@ -6,15 +6,18 @@ import Dropdown from '../../pb_dropdown/_dropdown'
6
6
  const options = [
7
7
  {
8
8
  label: "United States",
9
- value: "United States",
9
+ value: "unitedStates",
10
+ id: "us"
10
11
  },
11
12
  {
12
13
  label: "Canada",
13
- value: "Canada",
14
+ value: "canada",
15
+ id: "ca"
14
16
  },
15
17
  {
16
18
  label: "Pakistan",
17
- value: "Pakistan",
19
+ value: "pakistan",
20
+ id: "pk"
18
21
  }
19
22
  ]
20
23
 
@@ -6,15 +6,18 @@ const DropdownDefault = (props) => {
6
6
  const options = [
7
7
  {
8
8
  label: "United States",
9
- value: "United States",
9
+ value: "unitedStates",
10
+ id: "us"
10
11
  },
11
12
  {
12
13
  label: "Canada",
13
- value: "Canada",
14
+ value: "canada",
15
+ id: "ca"
14
16
  },
15
17
  {
16
18
  label: "Pakistan",
17
- value: "Pakistan",
19
+ value: "pakistan",
20
+ id: "pk"
18
21
  }
19
22
  ];
20
23
 
@@ -1,8 +1,8 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'United States', id: 'us' },
4
- { label: 'Canada', value: 'Canada', id: 'ca' },
5
- { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
3
+ { label: 'United States', value: 'unitedStates', id: 'us' },
4
+ { label: 'Canada', value: 'canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'pakistan', id: 'pk' },
6
6
  ]
7
7
 
8
8
  %>
@@ -1,8 +1,8 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'United States', id: 'us' },
4
- { label: 'Canada', value: 'Canada', id: 'ca' },
5
- { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
3
+ { label: 'United States', value: 'unitedStates', id: 'us' },
4
+ { label: 'Canada', value: 'canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'pakistan', id: 'pk' },
6
6
  ]
7
7
 
8
8
  %>
@@ -5,17 +5,20 @@ const DropdownDefaultValue = (props) => {
5
5
  const options = [
6
6
  {
7
7
  label: "United States",
8
- value: "United States",
8
+ value: "unitedStates",
9
+ id: "us"
9
10
  },
10
11
  {
11
12
  label: "Canada",
12
- value: "Canada",
13
+ value: "canada",
14
+ id: "ca"
13
15
  },
14
16
  {
15
17
  label: "Pakistan",
16
- value: "Pakistan",
18
+ value: "pakistan",
19
+ id: "pk"
17
20
  }
18
- ];
21
+ ];
19
22
 
20
23
  return (
21
24
  <>
@@ -1,8 +1,8 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'United States', id: 'us' },
4
- { label: 'Canada', value: 'Canada', id: 'ca' },
5
- { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
3
+ { label: 'United States', value: 'unitedStates', id: 'us' },
4
+ { label: 'Canada', value: 'canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'pakistan', id: 'pk' },
6
6
  ]
7
7
  %>
8
8
 
@@ -10,17 +10,20 @@ const DropdownError = (props) => {
10
10
  const options = [
11
11
  {
12
12
  label: "United States",
13
- value: "United States",
13
+ value: "unitedStates",
14
+ id: "us"
14
15
  },
15
16
  {
16
17
  label: "Canada",
17
- value: "Canada",
18
+ value: "canada",
19
+ id: "ca"
18
20
  },
19
21
  {
20
22
  label: "Pakistan",
21
- value: "Pakistan",
23
+ value: "pakistan",
24
+ id: "pk"
22
25
  }
23
- ]
26
+ ];
24
27
 
25
28
  return (
26
29
  <>