playbook_ui_docs 14.14.0.pre.rc.5 → 14.15.0.pre.alpha.PBNTR477draggabledropzone6743

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 (436) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx +1 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.jsx +1 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_custom_cell.jsx +77 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.jsx +1 -1
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx +8 -1
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +1 -1
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx +1 -1
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx +50 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx +102 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md +4 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx +1 -1
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +2 -2
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_no_subrows.jsx +1 -1
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.jsx +1 -1
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx +1 -1
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.jsx +1 -1
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.jsx +1 -1
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions.jsx +3 -1
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header.jsx +1 -1
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows.jsx +1 -1
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +1 -1
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +1 -1
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +1 -1
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +1 -1
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb +1 -1
  27. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -1
  28. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_rails.md +3 -1
  29. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_react.md +1 -1
  30. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb +33 -0
  31. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx +1 -1
  32. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +3 -0
  33. data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_infinite_scroll.json +152002 -0
  34. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +4 -1
  35. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +3 -1
  36. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +1 -1
  37. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +1 -1
  38. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +1 -1
  39. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.jsx +1 -1
  40. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.jsx +1 -1
  41. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_status.jsx +1 -1
  42. data/app/pb_kits/playbook/pb_background/docs/_background_category.jsx +2 -2
  43. data/app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx +1 -1
  44. data/app/pb_kits/playbook/pb_background/docs/_background_image.jsx +6 -2
  45. data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx +1 -1
  46. data/app/pb_kits/playbook/pb_background/docs/_background_size.jsx +1 -1
  47. data/app/pb_kits/playbook/pb_background/docs/_background_status.jsx +2 -2
  48. data/app/pb_kits/playbook/pb_background/docs/_background_status_subtle.jsx +2 -2
  49. data/app/pb_kits/playbook/pb_background/docs/_background_white.jsx +1 -1
  50. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +1 -1
  51. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +1 -1
  52. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +3 -1
  53. data/app/pb_kits/playbook/pb_body/docs/_body_articles.jsx +1 -1
  54. data/app/pb_kits/playbook/pb_body/docs/_body_block.jsx +1 -1
  55. data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx +1 -1
  56. data/app/pb_kits/playbook/pb_body/docs/_body_styled.jsx +1 -1
  57. data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx +2 -1
  58. data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.jsx +1 -1
  59. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx +2 -1
  60. data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx +1 -1
  61. data/app/pb_kits/playbook/pb_button/docs/_button_form.jsx +1 -1
  62. data/app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx +1 -1
  63. data/app/pb_kits/playbook/pb_button/docs/_button_hover.jsx +1 -1
  64. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx +1 -1
  65. data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx +1 -1
  66. data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx +1 -1
  67. data/app/pb_kits/playbook/pb_button/docs/_button_reaction.jsx +1 -1
  68. data/app/pb_kits/playbook/pb_button/docs/_button_size.jsx +1 -1
  69. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx +3 -1
  70. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx +2 -1
  71. data/app/pb_kits/playbook/pb_caption/docs/_caption_block.jsx +1 -1
  72. data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.jsx +1 -1
  73. data/app/pb_kits/playbook/pb_caption/docs/_caption_light.jsx +1 -1
  74. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +1 -1
  75. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.jsx +1 -1
  76. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.jsx +2 -1
  77. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx +72 -0
  78. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md +1 -0
  79. data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +2 -1
  80. data/app/pb_kits/playbook/pb_checkbox/docs/index.js +1 -0
  81. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +1 -1
  82. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_click.jsx +1 -1
  83. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx +1 -1
  84. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx +7 -1
  85. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx +7 -1
  86. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +1 -1
  87. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +1 -1
  88. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_no_icon.jsx +1 -1
  89. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx +1 -1
  90. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx +4 -1
  91. data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx +1 -1
  92. data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx +1 -1
  93. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx +3 -1
  94. data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx +5 -1
  95. data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.html.erb +22 -0
  96. data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx +34 -0
  97. data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_rails.md +1 -0
  98. data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_react.md +1 -0
  99. data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.jsx +3 -1
  100. data/app/pb_kits/playbook/pb_currency/docs/example.yml +2 -0
  101. data/app/pb_kits/playbook/pb_currency/docs/index.js +2 -1
  102. data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx +2 -1
  103. data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +4 -1
  104. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +4 -1
  105. data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx +2 -1
  106. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.md +3 -1
  107. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.html.erb +39 -0
  108. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx +3 -1
  109. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.html.erb +39 -0
  110. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx +3 -1
  111. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
  112. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.jsx +1 -1
  113. data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx +1 -1
  114. data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.jsx +1 -1
  115. data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.jsx +1 -1
  116. data/app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx +1 -1
  117. data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx +1 -1
  118. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx +7 -8
  119. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +3 -1
  120. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx +8 -9
  121. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx +8 -9
  122. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx +2 -1
  123. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx +2 -1
  124. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.jsx +3 -1
  125. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx +2 -1
  126. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx +3 -1
  127. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx +3 -1
  128. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +4 -1
  129. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx +5 -1
  130. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx +182 -0
  131. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md +5 -0
  132. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx +94 -0
  133. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx +11 -12
  134. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx +9 -10
  135. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx +4 -1
  136. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx +3 -1
  137. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx +6 -1
  138. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +2 -0
  139. data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -0
  140. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.html.erb +8 -0
  141. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.jsx +4 -1
  142. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.html.erb +33 -0
  143. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx +7 -4
  144. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.html.erb +0 -0
  145. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx +21 -37
  146. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb +20 -1
  147. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx +4 -1
  148. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.html.erb +24 -0
  149. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx +12 -7
  150. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.html.erb +21 -0
  151. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx +5 -1
  152. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.md +1 -0
  153. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.html.erb +49 -0
  154. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx +4 -1
  155. data/app/pb_kits/playbook/pb_drawer/docs/example.yml +6 -0
  156. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx +1 -1
  157. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +3 -1
  158. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +1 -1
  159. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx +1 -1
  160. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +1 -1
  161. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx +1 -1
  162. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx +1 -1
  163. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx +1 -1
  164. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +5 -1
  165. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +7 -1
  166. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +7 -1
  167. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +7 -1
  168. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +1 -1
  169. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +7 -1
  170. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +5 -1
  171. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +8 -1
  172. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +1 -1
  173. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.jsx +38 -0
  174. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.jsx +17 -0
  175. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.jsx +21 -0
  176. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.jsx +35 -0
  177. data/app/pb_kits/playbook/pb_empty_state/docs/default_image/computer_fly_no_branding.svg +21 -0
  178. data/app/pb_kits/playbook/pb_empty_state/docs/default_image/utils.tsx +118 -0
  179. data/app/pb_kits/playbook/pb_empty_state/docs/example.yml +8 -0
  180. data/app/pb_kits/playbook/pb_empty_state/docs/index.js +4 -0
  181. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx +4 -5
  182. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx +3 -1
  183. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_message.jsx +3 -5
  184. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx +3 -5
  185. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx +5 -6
  186. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +6 -1
  187. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.jsx +5 -1
  188. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.jsx +5 -1
  189. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx +6 -1
  190. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.jsx +5 -1
  191. data/app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx +5 -1
  192. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx +6 -1
  193. data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx +5 -1
  194. data/app/pb_kits/playbook/pb_flex/docs/_flex_align.jsx +3 -1
  195. data/app/pb_kits/playbook/pb_flex/docs/_flex_default.jsx +3 -1
  196. data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx +2 -1
  197. data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx +3 -1
  198. data/app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.jsx +3 -1
  199. data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx +3 -1
  200. data/app/pb_kits/playbook/pb_flex/docs/_flex_justify.jsx +3 -1
  201. data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.jsx +3 -1
  202. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.jsx +3 -1
  203. data/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.jsx +4 -1
  204. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +2 -1
  205. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +4 -3
  206. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.jsx +3 -1
  207. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +5 -1
  208. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.html.erb +40 -0
  209. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.jsx +50 -0
  210. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.md +3 -0
  211. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -0
  212. data/app/pb_kits/playbook/pb_form_pill/docs/index.js +1 -0
  213. data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +1 -1
  214. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx +1 -1
  215. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +9 -10
  216. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx +1 -1
  217. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.jsx +1 -1
  218. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx +1 -1
  219. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx +1 -1
  220. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx +3 -1
  221. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx +1 -1
  222. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx +4 -1
  223. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx +1 -1
  224. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx +1 -1
  225. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.jsx +1 -1
  226. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx +1 -1
  227. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +1 -1
  228. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.jsx +17 -0
  229. data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.jsx +63 -0
  230. data/app/pb_kits/playbook/pb_icon_button/docs/example.yml +4 -0
  231. data/app/pb_kits/playbook/pb_icon_button/docs/index.js +2 -0
  232. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx +1 -1
  233. data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx +1 -1
  234. data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_default.jsx +1 -1
  235. data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_sizes.jsx +1 -1
  236. data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_vertical.jsx +1 -1
  237. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_default.jsx +1 -1
  238. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.jsx +1 -1
  239. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.jsx +3 -1
  240. data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.jsx +1 -1
  241. data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx +1 -1
  242. data/app/pb_kits/playbook/pb_legend/docs/_legend_prefix.jsx +1 -1
  243. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx +2 -1
  244. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx +6 -1
  245. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx +4 -1
  246. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx +2 -1
  247. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx +2 -1
  248. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.jsx +1 -1
  249. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_nonclickable.jsx +1 -1
  250. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.jsx +2 -1
  251. data/app/pb_kits/playbook/pb_link/docs/_link_color.jsx +1 -1
  252. data/app/pb_kits/playbook/pb_link/docs/_link_disabled.jsx +1 -1
  253. data/app/pb_kits/playbook/pb_link/docs/_link_icon.jsx +1 -1
  254. data/app/pb_kits/playbook/pb_link/docs/_link_tag.jsx +1 -1
  255. data/app/pb_kits/playbook/pb_link/docs/_link_target.jsx +1 -1
  256. data/app/pb_kits/playbook/pb_link/docs/_link_underline.jsx +1 -1
  257. data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx +2 -1
  258. data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx +5 -1
  259. data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx +2 -1
  260. data/app/pb_kits/playbook/pb_message/docs/_message_timestamp.jsx +1 -1
  261. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.html.erb +72 -0
  262. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.jsx +91 -0
  263. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx +91 -0
  264. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md +1 -0
  265. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +3 -1
  266. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +2 -0
  267. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default.jsx +1 -1
  268. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse.jsx +1 -1
  269. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx +2 -1
  270. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +2 -1
  271. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx +4 -1
  272. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.jsx +2 -1
  273. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_no_icon.jsx +2 -1
  274. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_with_all_options.jsx +2 -1
  275. data/app/pb_kits/playbook/pb_nav/docs/_nav_with_font_control.jsx +2 -1
  276. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.jsx +4 -4
  277. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.html.erb +11 -0
  278. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.jsx +36 -0
  279. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_rails.md +1 -0
  280. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar_react.md +1 -0
  281. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx +4 -6
  282. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.jsx +4 -1
  283. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.html.erb +11 -0
  284. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx +35 -0
  285. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.md +1 -0
  286. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional_react.md +1 -0
  287. data/app/pb_kits/playbook/pb_overlay/docs/example.yml +4 -0
  288. data/app/pb_kits/playbook/pb_overlay/docs/index.js +2 -0
  289. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +2 -1
  290. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.jsx +3 -1
  291. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx +4 -1
  292. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.jsx +2 -1
  293. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx +6 -1
  294. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.jsx +5 -1
  295. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx +3 -1
  296. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx +3 -1
  297. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb +1 -1
  298. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx +1 -1
  299. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.jsx +3 -1
  300. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.html.erb +5 -0
  301. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.md +1 -0
  302. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.jsx +1 -1
  303. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.jsx +1 -1
  304. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx +1 -1
  305. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +4 -1
  306. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +3 -1
  307. data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.jsx +6 -7
  308. data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx +4 -5
  309. data/app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx +5 -6
  310. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx +7 -8
  311. data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.jsx +5 -6
  312. data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx +4 -5
  313. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_align.jsx +1 -1
  314. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_default.jsx +1 -1
  315. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx +3 -1
  316. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_muted.jsx +1 -1
  317. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_value.jsx +1 -1
  318. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.jsx +1 -1
  319. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_width.jsx +1 -1
  320. data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx +3 -1
  321. data/app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx +1 -1
  322. data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx +60 -0
  323. data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.md +1 -0
  324. data/app/pb_kits/playbook/pb_radio/docs/example.yml +2 -1
  325. data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
  326. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx +1 -1
  327. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx +3 -1
  328. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx +1 -1
  329. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx +1 -1
  330. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx +1 -1
  331. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx +1 -1
  332. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx +1 -1
  333. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx +3 -5
  334. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx +1 -1
  335. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx +1 -1
  336. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx +2 -1
  337. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx +1 -1
  338. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.jsx +1 -1
  339. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx +3 -1
  340. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.jsx +4 -1
  341. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed.jsx +1 -1
  342. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.jsx +1 -1
  343. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx +1 -1
  344. data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +2 -1
  345. data/app/pb_kits/playbook/pb_select/docs/_select_inline.jsx +2 -1
  346. data/app/pb_kits/playbook/pb_select/docs/_select_inline_compact.jsx +2 -1
  347. data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx +2 -1
  348. data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.jsx +58 -0
  349. data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.md +1 -0
  350. data/app/pb_kits/playbook/pb_select/docs/example.yml +1 -0
  351. data/app/pb_kits/playbook/pb_select/docs/index.js +1 -0
  352. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_error.jsx +4 -1
  353. data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx +1 -1
  354. data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.jsx +1 -1
  355. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.jsx +2 -1
  356. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.jsx +2 -1
  357. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.jsx +1 -2
  358. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx +8 -1
  359. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx +2 -1
  360. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.jsx +1 -2
  361. data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx +5 -1
  362. data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx +1 -1
  363. data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit.jsx +1 -1
  364. data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.jsx +1 -1
  365. data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.jsx +2 -1
  366. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx +4 -1
  367. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +4 -1
  368. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx +7 -1
  369. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx +4 -1
  370. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx +5 -1
  371. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx +5 -1
  372. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +1 -1
  373. data/app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_default.jsx +1 -1
  374. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx +3 -1
  375. data/app/pb_kits/playbook/pb_title/docs/_title_default.html.erb +1 -2
  376. data/app/pb_kits/playbook/pb_title/docs/_title_default.jsx +1 -1
  377. data/app/pb_kits/playbook/pb_title/docs/_title_display_size.html.erb +7 -0
  378. data/app/pb_kits/playbook/pb_title/docs/_title_display_size.jsx +54 -0
  379. data/app/pb_kits/playbook/pb_title/docs/_title_display_size.md +1 -0
  380. data/app/pb_kits/playbook/pb_title/docs/example.yml +2 -0
  381. data/app/pb_kits/playbook/pb_title/docs/index.js +1 -0
  382. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom.jsx +1 -1
  383. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx +3 -1
  384. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx +1 -1
  385. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.jsx +1 -1
  386. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx +3 -1
  387. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx +3 -1
  388. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx +4 -1
  389. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.html.erb +39 -0
  390. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay_rails.md +3 -0
  391. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx +3 -1
  392. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon_rails.html.erb +22 -0
  393. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.html.erb +26 -0
  394. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx +4 -1
  395. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx +3 -1
  396. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx +5 -1
  397. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.html.erb +22 -0
  398. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.jsx +69 -0
  399. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.md +3 -0
  400. data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +5 -1
  401. data/app/pb_kits/playbook/pb_tooltip/docs/index.js +1 -0
  402. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_async_createable.jsx +1 -1
  403. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.jsx +1 -1
  404. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx +1 -3
  405. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.html.erb +45 -0
  406. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.md +5 -0
  407. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.html.erb +33 -0
  408. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options_pure_rails.md +3 -0
  409. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx +66 -0
  410. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.md +1 -0
  411. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx +1 -1
  412. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +6 -8
  413. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx +1 -1
  414. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx +3 -5
  415. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx +4 -6
  416. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +4 -6
  417. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.jsx +1 -1
  418. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +3 -0
  419. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  420. data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.jsx +6 -1
  421. data/app/pb_kits/playbook/pb_user/docs/_user_default.jsx +1 -1
  422. data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.jsx +1 -1
  423. data/app/pb_kits/playbook/pb_user/docs/_user_size.jsx +1 -1
  424. data/app/pb_kits/playbook/pb_user/docs/_user_subtitle.jsx +1 -1
  425. data/app/pb_kits/playbook/pb_user/docs/_user_text_only.jsx +1 -1
  426. data/app/pb_kits/playbook/pb_user/docs/_user_vertical_size.jsx +1 -1
  427. data/app/pb_kits/playbook/pb_user/docs/_user_with_territory.jsx +1 -1
  428. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_continuous.jsx +2 -1
  429. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx +2 -1
  430. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_multi_beacon.jsx +2 -1
  431. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_beacon.jsx +2 -1
  432. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_overlay.jsx +2 -1
  433. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_styled.jsx +2 -1
  434. data/dist/playbook-doc.js +1 -1
  435. metadata +75 -3
  436. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb +0 -10
@@ -1,5 +1,6 @@
1
1
  import React from 'react'
2
- import { LineGraph, Title } from 'playbook-ui'
2
+ import LineGraph from '../../pb_line_graph/_line_graph'
3
+ import Title from '../../pb_title/_title'
3
4
 
4
5
  const data = [{
5
6
  name: 'Installation',
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Link } from 'playbook-ui'
2
+ import Link from '../../pb_link/_link'
3
3
 
4
4
  const LinkColor = (props) => (
5
5
  <div>
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Link } from 'playbook-ui'
2
+ import Link from '../../pb_link/_link'
3
3
 
4
4
  const LinkDisabled = (props) => (
5
5
  <div>
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Link } from 'playbook-ui'
2
+ import Link from '../../pb_link/_link'
3
3
 
4
4
  const LinkIcon = (props) => (
5
5
  <div>
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Link } from 'playbook-ui'
2
+ import Link from '../../pb_link/_link'
3
3
 
4
4
  const LinkTag = (props) => (
5
5
  <div>
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Link } from 'playbook-ui'
2
+ import Link from '../../pb_link/_link'
3
3
 
4
4
  const LinkTarget = (props) => (
5
5
  <div>
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Link } from 'playbook-ui'
2
+ import Link from '../../pb_link/_link'
3
3
 
4
4
  const LinkUnderline = (props) => (
5
5
  <div>
@@ -1,5 +1,6 @@
1
1
  import React, { useRef, useEffect, useState } from 'react'
2
- import { Map, mapTheme } from 'playbook-ui'
2
+ import Map from '../../pb_map/_map'
3
+ import mapTheme from '../../pb_map/pbMapTheme'
3
4
  import maplibregl from 'maplibre-gl'
4
5
 
5
6
  const MapDefault = (props) => {
@@ -1,5 +1,9 @@
1
1
  import React, { useRef, useEffect, useState } from 'react'
2
- import { Map, mapTheme, MapCustomButton } from 'playbook-ui'
2
+
3
+ import Map from '../../pb_map/_map'
4
+ import mapTheme from '../../pb_map/pbMapTheme'
5
+ import MapCustomButton from '../../pb_map/_map_custom_button'
6
+
3
7
  import maplibregl from 'maplibre-gl'
4
8
 
5
9
  const MapWithCustomButton = (props) => {
@@ -1,5 +1,6 @@
1
1
  import React, { useRef, useEffect, useState } from 'react'
2
- import { Map, mapTheme } from 'playbook-ui'
2
+ import Map from '../../pb_map/_map'
3
+ import mapTheme from '../../pb_map/pbMapTheme'
3
4
  import maplibregl from 'maplibre-gl'
4
5
  import MapboxDraw from "@mapbox/mapbox-gl-draw";
5
6
 
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { Message } from 'playbook-ui'
2
+ import Message from '../../pb_message/_message'
3
3
 
4
4
  const MessageTimestamp = (props) => {
5
5
  return (
@@ -0,0 +1,72 @@
1
+ <% treeData = [{
2
+ label: "Power Home Remodeling",
3
+ value: "Power Home Remodeling",
4
+ id: "100",
5
+ expanded: true,
6
+ children: [
7
+ {
8
+ label: "People",
9
+ value: "People",
10
+ id: "101",
11
+ expanded: true,
12
+ children: [
13
+ {
14
+ label: "Talent Acquisition",
15
+ value: "Talent Acquisition",
16
+ id: "102",
17
+ },
18
+ {
19
+ label: "Business Affairs",
20
+ value: "Business Affairs",
21
+ id: "103",
22
+ children: [
23
+ {
24
+ label: "Initiatives",
25
+ value: "Initiatives",
26
+ id: "104",
27
+ },
28
+ {
29
+ label: "Learning & Development",
30
+ value: "Learning & Development",
31
+ id: "105",
32
+ },
33
+ ],
34
+ },
35
+ {
36
+ label: "People Experience",
37
+ value: "People Experience",
38
+ id: "106",
39
+ },
40
+ ],
41
+ },
42
+ {
43
+ label: "Contact Center",
44
+ value: "Contact Center",
45
+ id: "107",
46
+ children: [
47
+ {
48
+ label: "Appointment Management",
49
+ value: "Appointment Management",
50
+ id: "108",
51
+ },
52
+ {
53
+ label: "Customer Service",
54
+ value: "Customer Service",
55
+ id: "109",
56
+ },
57
+ {
58
+ label: "Energy",
59
+ value: "Energy",
60
+ id: "110",
61
+ },
62
+ ],
63
+ },
64
+ ],
65
+ }] %>
66
+
67
+ <%= pb_rails("multi_level_select", props: {
68
+ disabled: true,
69
+ id: "multi-level-select-default-rails",
70
+ name: "my_array",
71
+ tree_data: treeData
72
+ }) %>
@@ -0,0 +1,91 @@
1
+ import React from "react";
2
+ import MultiLevelSelect from "../_multi_level_select";
3
+
4
+ const treeData = [
5
+ {
6
+ label: "Power Home Remodeling",
7
+ value: "Power Home Remodeling",
8
+ id: "powerhome1",
9
+ expanded: true,
10
+ children: [
11
+ {
12
+ label: "People",
13
+ value: "People",
14
+ id: "people1",
15
+ expanded: true,
16
+ children: [
17
+ {
18
+ label: "Talent Acquisition",
19
+ value: "Talent Acquisition",
20
+ id: "talent1",
21
+ },
22
+ {
23
+ label: "Business Affairs",
24
+ value: "Business Affairs",
25
+ id: "business1",
26
+ children: [
27
+ {
28
+ label: "Initiatives",
29
+ value: "Initiatives",
30
+ id: "initiative1",
31
+ },
32
+ {
33
+ label: "Learning & Development",
34
+ value: "Learning & Development",
35
+ id: "development1",
36
+ },
37
+ ],
38
+ },
39
+ {
40
+ label: "People Experience",
41
+ value: "People Experience",
42
+ id: "experience1",
43
+ },
44
+ ],
45
+ },
46
+ {
47
+ label: "Contact Center",
48
+ value: "Contact Center",
49
+ id: "contact1",
50
+ children: [
51
+ {
52
+ label: "Appointment Management",
53
+ value: "Appointment Management",
54
+ id: "appointment1",
55
+ },
56
+ {
57
+ label: "Customer Service",
58
+ value: "Customer Service",
59
+ id: "customer1",
60
+ },
61
+ {
62
+ label: "Energy",
63
+ value: "Energy",
64
+ id: "energy1",
65
+ },
66
+ ],
67
+ },
68
+ ],
69
+ },
70
+ ];
71
+
72
+ const MultiLevelSelectDisabled = (props) => {
73
+ return (
74
+ <>
75
+ <MultiLevelSelect
76
+ disabled
77
+ id='multiselect-default'
78
+ onSelect={(selectedNodes) =>
79
+ console.log(
80
+ "Selected Items",
81
+ selectedNodes
82
+ )
83
+ }
84
+ treeData={treeData}
85
+ {...props}
86
+ />
87
+ </>
88
+ )
89
+ };
90
+
91
+ export default MultiLevelSelectDisabled
@@ -0,0 +1,91 @@
1
+ import React from "react"
2
+ import MultiLevelSelect from "../_multi_level_select"
3
+ import { useForm } from "react-hook-form"
4
+
5
+ const treeData = [
6
+ {
7
+ label: "Power Home Remodeling",
8
+ value: "Power Home Remodeling",
9
+ id: "powerhome1",
10
+ expanded: true,
11
+ children: [
12
+ {
13
+ label: "People",
14
+ value: "People",
15
+ id: "people1",
16
+ expanded: true,
17
+ children: [
18
+ {
19
+ label: "Talent Acquisition",
20
+ value: "Talent Acquisition",
21
+ id: "talent1",
22
+ },
23
+ {
24
+ label: "Business Affairs",
25
+ value: "Business Affairs",
26
+ id: "business1",
27
+ children: [
28
+ {
29
+ label: "Initiatives",
30
+ value: "Initiatives",
31
+ id: "initiative1",
32
+ },
33
+ {
34
+ label: "Learning & Development",
35
+ value: "Learning & Development",
36
+ id: "development1",
37
+ },
38
+ ],
39
+ },
40
+ {
41
+ label: "People Experience",
42
+ value: "People Experience",
43
+ id: "experience1",
44
+ },
45
+ ],
46
+ },
47
+ {
48
+ label: "Contact Center",
49
+ value: "Contact Center",
50
+ id: "contact1",
51
+ children: [
52
+ {
53
+ label: "Appointment Management",
54
+ value: "Appointment Management",
55
+ id: "appointment1",
56
+ },
57
+ {
58
+ label: "Customer Service",
59
+ value: "Customer Service",
60
+ id: "customer1",
61
+ },
62
+ {
63
+ label: "Energy",
64
+ value: "Energy",
65
+ id: "energy1",
66
+ },
67
+ ],
68
+ },
69
+ ],
70
+ },
71
+ ]
72
+
73
+ const MultiLevelSelectReactHook = (props) => {
74
+ const { register, watch } = useForm()
75
+ const selectedItems = watch("departments")
76
+ selectedItems && console.log("Selected Items", selectedItems)
77
+
78
+ return (
79
+ <div>
80
+ <MultiLevelSelect
81
+ id="multiselect-default"
82
+ marginBottom="md"
83
+ treeData={treeData}
84
+ {...register("departments")}
85
+ {...props}
86
+ />
87
+ </div>
88
+ )
89
+ }
90
+
91
+ export default MultiLevelSelectReactHook
@@ -0,0 +1 @@
1
+ You can pass `react-hook-form` props to the MultiLevelSelect kit. Check your console to see the full data selected from this example.
@@ -8,9 +8,11 @@ examples:
8
8
  - multi_level_select_with_form: With Form
9
9
  - multi_level_select_color: With Pills (Custom Color)
10
10
  - multi_level_select_reset: Reset Selection
11
+ - multi_level_select_disabled: Disabled
11
12
 
12
13
  react:
13
14
  - multi_level_select_default: Default
15
+ - multi_level_select_react_hook: React Hook
14
16
  - multi_level_select_single: Single Select
15
17
  - multi_level_select_single_children_only: Single Select w/ Hidden Radios
16
18
  - multi_level_select_return_all_selected: Return All Selected
@@ -18,4 +20,4 @@ examples:
18
20
  - multi_level_select_color: With Pills (Custom Color)
19
21
  - multi_level_select_with_children: Checkboxes With Children
20
22
  - multi_level_select_with_children_with_radios: Single Select With Children
21
-
23
+ - multi_level_select_disabled: Disabled
@@ -6,3 +6,5 @@ export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_sele
6
6
  export { default as MultiLevelSelectColor } from './_multi_level_select_color.jsx'
7
7
  export { default as MultiLevelSelectWithChildren } from './_multi_level_select_with_children.jsx'
8
8
  export { default as MultiLevelSelectWithChildrenWithRadios } from './_multi_level_select_with_children_with_radios.jsx'
9
+ export { default as MultiLevelSelectDisabled } from './_multi_level_select_disabled.jsx'
10
+ export { default as MultiLevelSelectReactHook } from './_multi_level_select_react_hook.jsx'
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { MultipleUsers } from 'playbook-ui'
2
+ import MultipleUsers from '../../pb_multiple_users/_multiple_users'
3
3
 
4
4
  const MultipleUsersDefault = (props) => {
5
5
  return (
@@ -1,5 +1,5 @@
1
1
  import React from 'react'
2
- import { MultipleUsers } from 'playbook-ui'
2
+ import MultipleUsers from '../../pb_multiple_users/_multiple_users'
3
3
 
4
4
  const MultipleUsersReverse = (props) => {
5
5
  return (
@@ -1,5 +1,6 @@
1
1
  import React from 'react'
2
- import { Body, MultipleUsers } from 'playbook-ui'
2
+ import Body from '../../pb_body/_body'
3
+ import MultipleUsers from '../../pb_multiple_users/_multiple_users'
3
4
 
4
5
  const MultipleUsersSize = (props) => {
5
6
  return (
@@ -1,5 +1,6 @@
1
1
  import React from "react";
2
- import { Nav, NavItem } from 'playbook-ui'
2
+ import Nav from '../../pb_nav/_nav'
3
+ import NavItem from '../../pb_nav/_item'
3
4
 
4
5
  const CollapsibleNav = (props) => {
5
6
  return (
@@ -1,5 +1,8 @@
1
1
  import React from "react"
2
- import { Nav, NavItem, useCollapsible } from "playbook-ui"
2
+
3
+ import Nav from '../../pb_nav/_nav'
4
+ import NavItem from '../../pb_nav/_item'
5
+ import useCollapsible from '../../pb_collapsible/useCollapsible'
3
6
 
4
7
  const CollapsibleNavCustom = (props) => {
5
8
  const navItems = ["Overview", "Albums", "Similar Artists"]
@@ -1,5 +1,6 @@
1
1
  import React from "react";
2
- import { Nav, NavItem } from 'playbook-ui'
2
+ import Nav from '../../pb_nav/_nav'
3
+ import NavItem from '../../pb_nav/_item'
3
4
 
4
5
  const CollapsibleNavItemSpacing = (props) => {
5
6
  return (
@@ -1,5 +1,6 @@
1
1
  import React from "react";
2
- import { Nav, NavItem } from 'playbook-ui'
2
+ import Nav from '../../pb_nav/_nav'
3
+ import NavItem from '../../pb_nav/_item'
3
4
 
4
5
  const CollapsibleNavNoIcon = (props) => {
5
6
  return (
@@ -1,5 +1,6 @@
1
1
  import React from "react"
2
- import { Nav, NavItem } from "playbook-ui"
2
+ import Nav from '../../pb_nav/_nav'
3
+ import NavItem from '../../pb_nav/_item'
3
4
 
4
5
  const CollapsibleNavWithAllOptions = (props) => {
5
6
  const navItems = ["Overview", "Albums", "Similar Artists"]
@@ -1,5 +1,6 @@
1
1
  import React from "react";
2
- import { Nav, NavItem } from 'playbook-ui'
2
+ import Nav from '../../pb_nav/_nav'
3
+ import NavItem from '../../pb_nav/_item'
3
4
 
4
5
  const NavWithFontControl = (props) => {
5
6
  return (
@@ -1,8 +1,8 @@
1
1
  import React from 'react'
2
- import {
3
- Overlay,
4
- Table,
5
- } from 'playbook-ui'
2
+
3
+ import Overlay from '../../pb_overlay/_overlay'
4
+ import Table from '../../pb_table/_table'
5
+
6
6
 
7
7
  const TableExample = () => {
8
8
  return (
@@ -0,0 +1,11 @@
1
+ <%= pb_rails("overlay", props: { layout: { "x": "xl" }, color: "card_light", scroll_bar_none: true }) do %>
2
+ <%= pb_rails("flex", props: { column_gap: "lg", orientation: "row", overflow_x: "auto" }) do %>
3
+ <% 15.times do %>
4
+ <%= pb_rails("flex/flex_item") do %>
5
+ <%= pb_rails("card") do %>
6
+ Card content
7
+ <% end %>
8
+ <% end %>
9
+ <% end %>
10
+ <% end %>
11
+ <% end %>
@@ -0,0 +1,36 @@
1
+ import React from 'react'
2
+
3
+ import Overlay from '../../pb_overlay/_overlay'
4
+ import Card from '../../pb_card/_card'
5
+ import Flex from '../../pb_flex/_flex'
6
+ import FlexItem from '../../pb_flex/_flex_item'
7
+
8
+ const InlineCardsExample = () => {
9
+ return (
10
+ <Flex
11
+ columnGap="lg"
12
+ orientation="row"
13
+ overflowX="auto"
14
+ >
15
+ {Array.from({ length: 15 }, (_, index) => (
16
+ <FlexItem key={index}>
17
+ <Card>{"Card Content"}</Card>
18
+ </FlexItem>
19
+ ))}
20
+ </Flex>
21
+ )
22
+ }
23
+
24
+ const OverlayHideScrollBar = () => (
25
+ <>
26
+ <Overlay
27
+ color="card_light"
28
+ layout={{"x": "xl"}}
29
+ scrollBarNone
30
+ >
31
+ <InlineCardsExample />
32
+ </Overlay>
33
+ </>
34
+ )
35
+
36
+ export default OverlayHideScrollBar
@@ -0,0 +1 @@
1
+ Pass the `scroll_bar_none` prop to hide the scrollbar from view. This is particularly helpful for small containers where the scrollbar may occupy too much space.
@@ -0,0 +1 @@
1
+ Pass the `scrollBarNone` prop to hide the scrollbar from view. This is particularly helpful for small containers where the scrollbar may occupy too much space.
@@ -1,10 +1,8 @@
1
1
  import React from 'react'
2
- import {
3
- Overlay,
4
- Card,
5
- Flex,
6
- FlexItem,
7
- } from 'playbook-ui'
2
+ import Overlay from '../../pb_overlay/_overlay'
3
+ import Card from '../../pb_card/_card'
4
+ import Flex from '../../pb_flex/_flex'
5
+ import FlexItem from '../../pb_flex/_flex_item'
8
6
 
9
7
  const InlineCardsExample = () => {
10
8
  return (
@@ -1,6 +1,9 @@
1
1
  /* eslint-disable react/no-multi-comp */
2
2
  import React, { useState } from "react";
3
- import { Overlay, Table, Button } from "playbook-ui";
3
+
4
+ import Overlay from '../../pb_overlay/_overlay'
5
+ import Button from '../../pb_button/_button'
6
+ import Table from '../../pb_table/_table'
4
7
 
5
8
  const TableExample = () => {
6
9
  return (
@@ -0,0 +1,11 @@
1
+ <%= pb_rails("overlay", props: { layout: { "x": "xl" }, color: "card_light", dynamic: true }) do %>
2
+ <%= pb_rails("flex", props: { column_gap: "lg", orientation: "row", overflow_x: "auto" }) do %>
3
+ <% 15.times do %>
4
+ <%= pb_rails("flex/flex_item") do %>
5
+ <%= pb_rails("card") do %>
6
+ Card content
7
+ <% end %>
8
+ <% end %>
9
+ <% end %>
10
+ <% end %>
11
+ <% end %>
@@ -0,0 +1,35 @@
1
+ import React, { forwardRef } from 'react'
2
+ import Overlay from '../../pb_overlay/_overlay'
3
+ import Card from '../../pb_card/_card'
4
+ import Flex from '../../pb_flex/_flex'
5
+ import FlexItem from '../../pb_flex/_flex_item'
6
+
7
+ const InlineCardsExample = forwardRef(function InlineCardsExample(ref) {
8
+ return (
9
+ <Flex
10
+ columnGap="lg"
11
+ orientation="row"
12
+ ref={ref}
13
+ >
14
+ {Array.from({ length: 15 }, (_, index) => (
15
+ <FlexItem key={index}>
16
+ <Card>{"Card Content"}</Card>
17
+ </FlexItem>
18
+ ))}
19
+ </Flex>
20
+ )
21
+ })
22
+
23
+ const OverlayVerticalDynamicMultiDirectional = () => (
24
+ <>
25
+ <Overlay
26
+ color="card_light"
27
+ dynamic
28
+ layout={{"x": "xl"}}
29
+ >
30
+ <InlineCardsExample />
31
+ </Overlay>
32
+ </>
33
+ )
34
+
35
+ export default OverlayVerticalDynamicMultiDirectional
@@ -0,0 +1 @@
1
+ Pass the `dynamic` prop to make the overlay render while the scrollbar isn't at either end on the scrollbar.
@@ -0,0 +1 @@
1
+ Pass the `dynamic` prop to make the overlay render while the scrollbar isn't at either end on the scrollbar. You must also add a `ref` to the child that's being passed through the Overlay.
@@ -2,9 +2,13 @@ examples:
2
2
  react:
3
3
  - overlay_default: Default
4
4
  - overlay_multi_directional: Multi-directional
5
+ - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
5
6
  - overlay_toggle: Toggle
7
+ - overlay_hide_scroll_bar: Hide Scroll Bar
6
8
 
7
9
  rails:
8
10
  - overlay_default: Default
9
11
  - overlay_multi_directional: Multi-directional
12
+ - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
10
13
  - overlay_toggle: Toggle
14
+ - overlay_hide_scroll_bar: Hide Scroll Bar
@@ -1,3 +1,5 @@
1
1
  export { default as OverlayDefault } from './_overlay_default.jsx'
2
2
  export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'
3
3
  export { default as OverlayToggle } from './_overlay_toggle.jsx'
4
+ export { default as OverlayVerticalDynamicMultiDirectional } from './_overlay_vertical_dynamic_multi_directional.jsx'
5
+ export { default as OverlayHideScrollBar } from './_overlay_hide_scroll_bar.jsx'
@@ -1,5 +1,6 @@
1
1
  import React, { useState } from "react";
2
- import { Table, Pagination } from 'playbook-ui'
2
+ import Table from '../../pb_table/_table'
3
+ import Pagination from '../../pb_pagination/_pagination'
3
4
 
4
5
 
5
6
  import { data } from "./data";