playbook_ui_docs 13.32.0.pre.alpha.PLAY14143297 → 13.32.0.pre.alpha.play1416movealiaslogic3239

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 (295) 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_default.jsx +1 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx +1 -1
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx +1 -1
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx +2 -2
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +1 -1
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx +1 -1
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx +1 -1
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx +1 -1
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx +1 -1
  12. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +1 -1
  13. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +1 -1
  14. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +1 -1
  15. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.jsx +1 -1
  16. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.jsx +1 -1
  17. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_status.jsx +1 -1
  18. data/app/pb_kits/playbook/pb_background/docs/_background_category.jsx +2 -2
  19. data/app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx +1 -1
  20. data/app/pb_kits/playbook/pb_background/docs/_background_image.jsx +2 -2
  21. data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx +1 -1
  22. data/app/pb_kits/playbook/pb_background/docs/_background_size.jsx +1 -1
  23. data/app/pb_kits/playbook/pb_background/docs/_background_status.jsx +2 -2
  24. data/app/pb_kits/playbook/pb_background/docs/_background_status_subtle.jsx +2 -2
  25. data/app/pb_kits/playbook/pb_background/docs/_background_white.jsx +1 -1
  26. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +0 -4
  27. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx +1 -1
  28. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +1 -1
  29. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx +1 -1
  30. data/app/pb_kits/playbook/pb_body/docs/_body_articles.jsx +1 -1
  31. data/app/pb_kits/playbook/pb_body/docs/_body_block.jsx +1 -1
  32. data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx +1 -1
  33. data/app/pb_kits/playbook/pb_body/docs/_body_styled.jsx +1 -1
  34. data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx +1 -1
  35. data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.jsx +1 -1
  36. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx +1 -1
  37. data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx +1 -1
  38. data/app/pb_kits/playbook/pb_button/docs/_button_form.jsx +1 -1
  39. data/app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx +1 -1
  40. data/app/pb_kits/playbook/pb_button/docs/_button_hover.jsx +1 -1
  41. data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx +1 -1
  42. data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx +1 -1
  43. data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx +1 -1
  44. data/app/pb_kits/playbook/pb_button/docs/_button_reaction.jsx +1 -1
  45. data/app/pb_kits/playbook/pb_button/docs/_button_size.jsx +1 -1
  46. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx +1 -1
  47. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx +1 -1
  48. data/app/pb_kits/playbook/pb_caption/docs/_caption_block.jsx +1 -1
  49. data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.jsx +1 -1
  50. data/app/pb_kits/playbook/pb_caption/docs/_caption_light.jsx +1 -1
  51. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +1 -1
  52. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.jsx +1 -1
  53. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.jsx +1 -1
  54. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +1 -1
  55. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_click.jsx +1 -1
  56. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx +1 -1
  57. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx +1 -1
  58. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx +1 -1
  59. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +1 -1
  60. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +1 -1
  61. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx +1 -1
  62. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx +1 -1
  63. data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx +1 -1
  64. data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx +1 -1
  65. data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.jsx +1 -1
  66. data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx +1 -1
  67. data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +2 -2
  68. data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx +1 -1
  69. data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx +1 -1
  70. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx +1 -1
  71. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx +1 -1
  72. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.jsx +1 -1
  73. data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx +1 -1
  74. data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.jsx +1 -1
  75. data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.jsx +1 -1
  76. data/app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx +1 -1
  77. data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx +1 -1
  78. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx +1 -1
  79. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +1 -1
  80. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx +1 -1
  81. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx +1 -1
  82. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx +1 -1
  83. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.jsx +3 -1
  84. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx +1 -1
  85. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx +2 -1
  86. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx +1 -1
  87. data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +29 -30
  88. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx +1 -1
  89. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx +1 -1
  90. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx +1 -1
  91. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx +1 -1
  92. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx +1 -1
  93. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +1 -1
  94. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +1 -1
  95. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx +1 -1
  96. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +1 -1
  97. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +1 -1
  98. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +1 -1
  99. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +1 -1
  100. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +1 -1
  101. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +1 -1
  102. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +1 -1
  103. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +1 -1
  104. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +1 -1
  105. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +0 -4
  106. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -3
  107. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx +3 -2
  108. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx +3 -2
  109. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_message.jsx +3 -2
  110. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx +3 -2
  111. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx +4 -3
  112. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +1 -1
  113. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.jsx +1 -1
  114. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.jsx +1 -1
  115. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx +1 -1
  116. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.jsx +1 -1
  117. data/app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx +1 -1
  118. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx +1 -1
  119. data/app/pb_kits/playbook/pb_flex/docs/_flex_align.jsx +1 -1
  120. data/app/pb_kits/playbook/pb_flex/docs/_flex_default.jsx +1 -1
  121. data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx +1 -1
  122. data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx +1 -1
  123. data/app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.jsx +1 -1
  124. data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx +1 -1
  125. data/app/pb_kits/playbook/pb_flex/docs/_flex_justify.jsx +1 -1
  126. data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.jsx +1 -1
  127. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.jsx +1 -1
  128. data/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.jsx +1 -1
  129. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.html.erb +1 -5
  130. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.jsx +0 -1
  131. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.html.erb +0 -2
  132. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx +0 -2
  133. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb +1 -4
  134. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx +2 -3
  135. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb +0 -2
  136. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx +0 -2
  137. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx +1 -1
  138. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx +1 -1
  139. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx +1 -1
  140. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.jsx +1 -1
  141. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx +1 -1
  142. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx +1 -1
  143. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_live_data.jsx +1 -1
  144. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx +1 -1
  145. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx +1 -1
  146. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx +1 -1
  147. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx +1 -1
  148. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.jsx +1 -1
  149. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx +1 -1
  150. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +1 -1
  151. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx +1 -1
  152. data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx +1 -1
  153. data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_default.jsx +1 -1
  154. data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_sizes.jsx +1 -1
  155. data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_vertical.jsx +1 -1
  156. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_default.jsx +1 -1
  157. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.jsx +1 -1
  158. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.jsx +1 -1
  159. data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.jsx +1 -1
  160. data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx +1 -1
  161. data/app/pb_kits/playbook/pb_legend/docs/_legend_prefix.jsx +1 -1
  162. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx +2 -1
  163. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx +2 -1
  164. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx +2 -1
  165. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx +2 -1
  166. data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx +2 -1
  167. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.jsx +1 -1
  168. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_nonclickable.jsx +1 -1
  169. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.jsx +1 -1
  170. data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx +1 -1
  171. data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx +1 -1
  172. data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx +1 -1
  173. data/app/pb_kits/playbook/pb_message/docs/_message_timestamp.jsx +1 -1
  174. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default.jsx +1 -1
  175. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse.jsx +1 -1
  176. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx +1 -1
  177. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +1 -1
  178. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx +1 -1
  179. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.jsx +1 -1
  180. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_with_all_options.jsx +1 -1
  181. data/app/pb_kits/playbook/pb_nav/docs/_nav_with_font_control.jsx +1 -1
  182. data/app/pb_kits/playbook/pb_nav/docs/example.yml +0 -1
  183. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.jsx +1 -1
  184. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx +1 -1
  185. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.jsx +1 -1
  186. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx +1 -1
  187. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.jsx +1 -1
  188. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx +1 -1
  189. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.jsx +1 -1
  190. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx +1 -1
  191. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx +1 -1
  192. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx +1 -1
  193. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.jsx +1 -1
  194. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.jsx +1 -1
  195. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx +1 -1
  196. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +1 -1
  197. data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.jsx +1 -1
  198. data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx +1 -1
  199. data/app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx +1 -1
  200. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx +1 -1
  201. data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.jsx +1 -1
  202. data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx +1 -1
  203. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_align.jsx +1 -1
  204. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_default.jsx +1 -1
  205. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx +1 -1
  206. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_muted.jsx +1 -1
  207. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_value.jsx +1 -1
  208. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.jsx +1 -1
  209. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_width.jsx +1 -1
  210. data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx +1 -1
  211. data/app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx +1 -1
  212. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx +1 -1
  213. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx +1 -1
  214. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx +1 -1
  215. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx +1 -1
  216. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx +1 -1
  217. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx +1 -1
  218. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx +4 -5
  219. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx +1 -1
  220. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx +1 -1
  221. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx +1 -1
  222. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx +1 -1
  223. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.jsx +1 -1
  224. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx +1 -1
  225. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed.jsx +1 -1
  226. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.jsx +1 -1
  227. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx +1 -1
  228. data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +1 -1
  229. data/app/pb_kits/playbook/pb_select/docs/_select_inline.jsx +1 -1
  230. data/app/pb_kits/playbook/pb_select/docs/_select_inline_compact.jsx +1 -1
  231. data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx +1 -1
  232. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_error.jsx +1 -1
  233. data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx +1 -1
  234. data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.jsx +1 -1
  235. data/app/pb_kits/playbook/pb_star_rating/docs/example.yml +1 -1
  236. data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx +1 -1
  237. data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit.jsx +1 -1
  238. data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.jsx +1 -1
  239. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +4 -4
  240. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +1 -1
  241. data/app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_default.jsx +1 -1
  242. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx +1 -1
  243. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom.jsx +3 -1
  244. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx +3 -1
  245. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx +3 -1
  246. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.jsx +3 -1
  247. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx +3 -1
  248. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx +3 -1
  249. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx +3 -1
  250. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx +3 -1
  251. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx +3 -1
  252. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx +3 -1
  253. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx +3 -1
  254. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_async_createable.jsx +3 -1
  255. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.jsx +3 -1
  256. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx +1 -3
  257. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb +57 -22
  258. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx +2 -0
  259. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx +2 -0
  260. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.jsx +2 -0
  261. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx +2 -0
  262. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +5 -4
  263. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx +3 -1
  264. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx +23 -20
  265. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx +31 -24
  266. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +23 -20
  267. data/app/pb_kits/playbook/pb_user/docs/_user_block_content_subtitle_react.jsx +1 -1
  268. data/app/pb_kits/playbook/pb_user/docs/_user_default.jsx +1 -1
  269. data/app/pb_kits/playbook/pb_user/docs/_user_size.jsx +1 -1
  270. data/app/pb_kits/playbook/pb_user/docs/_user_subtitle.jsx +1 -1
  271. data/app/pb_kits/playbook/pb_user/docs/_user_text_only.jsx +1 -1
  272. data/app/pb_kits/playbook/pb_user/docs/_user_vertical_size.jsx +1 -1
  273. data/app/pb_kits/playbook/pb_user/docs/_user_with_territory.jsx +1 -1
  274. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_continuous.jsx +1 -1
  275. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx +1 -1
  276. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_multi_beacon.jsx +1 -1
  277. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_beacon.jsx +1 -1
  278. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_overlay.jsx +1 -1
  279. data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_styled.jsx +1 -1
  280. data/dist/app/components/playbook/pb_docs/advanced_table_mock_data.json +278 -0
  281. data/dist/app/components/playbook/pb_docs/kit_api.html.erb +321 -0
  282. data/dist/app/components/playbook/pb_docs/kit_api.rb +150 -0
  283. data/dist/app/components/playbook/pb_docs/kit_example.html.erb +80 -0
  284. data/dist/app/components/playbook/pb_docs/kit_example.rb +94 -0
  285. data/dist/menu.yml +568 -0
  286. data/dist/pb_doc_helper.rb +102 -0
  287. data/dist/playbook-doc.js +106 -758
  288. metadata +9 -9
  289. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb +0 -10
  290. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx +0 -31
  291. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.html.erb +0 -10
  292. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx +0 -31
  293. data/app/pb_kits/playbook/pb_nav/docs/_tab_nav.html.erb +0 -48
  294. data/app/pb_kits/playbook/pb_nav/docs/_tab_nav.md +0 -3
  295. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_interactive.html.erb +0 -1
@@ -0,0 +1,321 @@
1
+ <% if !local_prop_data.present? %>
2
+ <div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
3
+ <%= pb_rails("title", props: { text: "Available Props", size: 3, margin_bottom: "sm", dark: dark }) %>
4
+ <%= pb_rails("card", props: { padding: "none", dark: dark }) do %>
5
+ <%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
6
+ <%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle", dark: dark }) do %>
7
+ <%= pb_rails("nav/item", props: { text: "Global Props", link: "#", active: true, dark: dark }) %>
8
+ <% end %>
9
+ <% end %>
10
+ <%= pb_rails("section_separator", props:{ dark: dark }) %>
11
+ <%= pb_rails("card/card_body", props: {}) do %>
12
+ <%= pb_rails("table", props: {container: false, disable_hover: true, dark: dark }) do %>
13
+ <thead>
14
+ <tr>
15
+ <th>Props</th>
16
+ <th>Type</th>
17
+ <th>Values</th>
18
+ </tr>
19
+ </thead>
20
+ <tbody>
21
+ <% global_prop_data.each do |key, value|%>
22
+ <tr>
23
+ <td>
24
+ <%= pb_rails("title", props: { text: key, tag: "h4", size: 4, dark: dark }) %>
25
+ </td>
26
+ <td>
27
+ <%= pb_rails("card", props: {
28
+ classname: "card",
29
+ padding: "xxs",
30
+ background: dark ? "dark" : "light",
31
+ border_none: true,
32
+ border_radius: "sm"
33
+ }) do %>
34
+ <%= pb_rails("body", props: {
35
+ classname: "kearning",
36
+ dark: dark
37
+ }) do %>
38
+ <% if key =~ /^padding|^margin/ %>
39
+ <%= "array" %>
40
+ <% else %>
41
+ <%= value[:type].to_s.downcase %>
42
+ <% end %>
43
+ <% end %>
44
+ <% end %>
45
+ </td>
46
+ <td>
47
+ <% if key =~ /^padding|^margin/ %>
48
+ <% padding_margin_values.each do |item| %>
49
+ <%= pb_rails("card", props: {
50
+ flex_direction: "row",
51
+ classname: "card",
52
+ padding: "xxs",
53
+ background: dark ? "dark" : "light",
54
+ border_none: true,
55
+ border_radius: "sm",
56
+ margin: "xxs"
57
+ }) do %>
58
+ <%= pb_rails("body", props: {
59
+ classname: "kearning",
60
+ dark: dark
61
+ }) do %>
62
+ <%= item %>
63
+ <% end %>
64
+ <% end %>
65
+ <% end %>
66
+ <% else %>
67
+ <% if value[:values].present? %>
68
+ <% value[:values].each do |item| %>
69
+ <% if item != nil %>
70
+ <%= pb_rails("card", props: {
71
+ flex_direction: "row",
72
+ classname: "card",
73
+ padding: "xxs",
74
+ background: dark ? "dark" : "light",
75
+ border_none: true,
76
+ border_radius: "sm",
77
+ margin: "xxs"
78
+ }) do %>
79
+ <%= pb_rails("body", props: {
80
+ classname: "kearning",
81
+ dark: dark
82
+ }) do %>
83
+ <%= item %>
84
+ <% end %>
85
+ <% end %>
86
+ <% end %>
87
+ <% end %>
88
+ <% end %>
89
+ <% end %>
90
+ </td>
91
+ </tr>
92
+ <% end %>
93
+ </tbody>
94
+ <% end %>
95
+ <% end %>
96
+ <% end %>
97
+ </div>
98
+ <% else %>
99
+ <div data-action="toggle" data-togglable="prop_example" class="pb--propsTable">
100
+ <%= pb_rails("title", props: { text: "Available Props", size: 3, margin_bottom: "sm", dark: dark }) %>
101
+ <%= pb_rails("card", props: { padding: "none", dark: dark }) do %>
102
+ <%= pb_rails("card/card_body", props: { padding: "sm" }) do %>
103
+ <%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle", dark: dark }) do %>
104
+ <% if local_prop_data.present? %>
105
+ <%= pb_rails("nav/item", props: { text: "Kit Props", link: "#", active: true, id: "local-button-active", classname: "local-active", dark: dark }) %>
106
+ <% end %>
107
+ <% if local_prop_data.present? %>
108
+ <%= pb_rails("nav/item", props: { text: "Kit Props", link: "#", id: "local-button", classname: "global-active", dark: dark }) %>
109
+ <% end %>
110
+ <%= pb_rails("nav/item", props: { text: "Global Props", link: "#", active: true, id: "global-button-active", classname: "global-active", dark: dark }) %>
111
+ <%= pb_rails("nav/item", props: { text: "Global Props", link: "#", id: "global-button", classname: "local-active", dark: dark }) %>
112
+ <% end %>
113
+ <% end %>
114
+ <%= pb_rails("section_separator", props: { dark: dark }) %>
115
+ <%= pb_rails("card/card_body", props: { dark: dark }) do %>
116
+ <%= pb_rails("table", props: {container: false, disable_hover: true, id: "global-prop-table", classname: "global-active", dark: dark}) do %>
117
+ <thead>
118
+ <tr>
119
+ <th>Props</th>
120
+ <th>Type</th>
121
+ <th>Values</th>
122
+ </tr>
123
+ </thead>
124
+ <tbody>
125
+ <% global_prop_data.each do |key, value|%>
126
+ <tr>
127
+ <td>
128
+ <%= pb_rails("title", props: { text: key, tag: "h4", size: 4, dark: dark }) %>
129
+ </td>
130
+ <td>
131
+ <%= pb_rails("card", props: {
132
+ classname: "card",
133
+ padding: "xxs",
134
+ background: dark ? "dark" : "light",
135
+ border_none: true,
136
+ border_radius: "sm"
137
+ }) do %>
138
+ <%= pb_rails("body", props: {
139
+ classname: "kearning",
140
+ dark: dark
141
+ }) do %>
142
+ <% if key =~ /^padding|^margin/ %>
143
+ <%= "array" %>
144
+ <% else %>
145
+ <%= value[:type].to_s.downcase %>
146
+ <% end %>
147
+ <% end %>
148
+ <% end %>
149
+ </td>
150
+ <td>
151
+ <% if key =~ /^padding|^margin/ %>
152
+ <% padding_margin_values.each do |item| %>
153
+ <%= pb_rails("card", props: {
154
+ flex_direction: "row",
155
+ classname: "card",
156
+ padding: "xxs",
157
+ background: dark ? "dark" : "light",
158
+ border_none: true,
159
+ border_radius: "sm",
160
+ margin: "xxs"
161
+ }) do %>
162
+ <%= pb_rails("body", props: {
163
+ classname: "kearning",
164
+ dark: dark
165
+ }) do %>
166
+ <%= item %>
167
+ <% end %>
168
+ <% end %>
169
+ <% end %>
170
+ <% else %>
171
+ <% if value[:values].present? %>
172
+ <% value[:values].each do |item| %>
173
+ <% if item != nil %>
174
+ <%= pb_rails("card", props: {
175
+ flex_direction: "row",
176
+ classname: "card",
177
+ padding: "xxs",
178
+ background: dark ? "dark" : "light",
179
+ border_none: true,
180
+ border_radius: "sm",
181
+ margin: "xxs"
182
+ }) do %>
183
+ <%= pb_rails("body", props: {
184
+ classname: "kearning",
185
+ dark: dark
186
+ }) do %>
187
+ <%= item %>
188
+ <% end %>
189
+ <% end %>
190
+ <% end %>
191
+ <% end %>
192
+ <% end %>
193
+ <% end %>
194
+ </td>
195
+ </tr>
196
+ <% end %>
197
+ </tbody>
198
+ <% end %>
199
+ <%= pb_rails("table", props: {container: false, disable_hover: true, id: "local-prop-table", classname: "local-active", dark: dark }) do %>
200
+ <thead>
201
+ <tr>
202
+ <th>Props</th>
203
+ <th>Type</th>
204
+ <th>Values</th>
205
+ <th>Default</th>
206
+ </tr>
207
+ </thead>
208
+ <tbody>
209
+ <% local_prop_data.each do |key, value|%>
210
+ <tr>
211
+ <td>
212
+ <%= pb_rails("title", props: { text: key, tag: "h4", size: 4, dark: dark }) %>
213
+ </td>
214
+ <td>
215
+ <%= pb_rails("card", props: {
216
+ classname: "card",
217
+ dark: dark,
218
+ padding: "xxs",
219
+ background: dark ? "dark" : "light",
220
+ border_none: true,
221
+ border_radius: "sm"
222
+ }) do %>
223
+ <%= pb_rails("body", props: {
224
+ classname: "kearning",
225
+ dark: dark
226
+ }) do %>
227
+ <%= value[:type].downcase %>
228
+ <% end %>
229
+ <% end %>
230
+ </td>
231
+ <td>
232
+ <% if value[:values].present? %>
233
+ <% value[:values].each do |item| %>
234
+ <% if item != nil %>
235
+ <%= pb_rails("card", props: {
236
+ flex_direction: "row",
237
+ classname: "card",
238
+ padding: "xxs",
239
+ background: dark ? "dark" : "light",
240
+ border_none: true,
241
+ border_radius: "sm",
242
+ margin: "xxs"
243
+ }) do %>
244
+ <%= pb_rails("body", props: {
245
+ classname: "kearning",
246
+ dark: dark,
247
+ }) do %>
248
+ <%= item %>
249
+ <% end %>
250
+ <% end %>
251
+ <% end %>
252
+ <% end %>
253
+ <% end %>
254
+ </td>
255
+ <td>
256
+ <% if value[:default].present? || value[:default].is_a?(TrueClass) || value[:default].is_a?(FalseClass) %>
257
+ <%= pb_rails("card", props: {
258
+ classname: "card",
259
+ padding: "xxs",
260
+ background: dark ? "dark" : "light",
261
+ border_none: true,
262
+ border_radius: "sm"
263
+ }) do %>
264
+ <%= pb_rails("body", props: {
265
+ classname: "kearning",
266
+ dark: dark,
267
+ }) do %>
268
+ <%= value[:default] %>
269
+ <% end %>
270
+ <% end %>
271
+ <% end %>
272
+ </td>
273
+ </tr>
274
+ <% end %>
275
+ </tbody>
276
+ <% end %>
277
+ <% end %>
278
+ <% end %>
279
+ </div>
280
+ <% end %>
281
+
282
+ <script>
283
+
284
+ const globalNavAndTable = document.querySelectorAll('.global-active');
285
+ const localNavAndTable = document.querySelectorAll('.local-active');
286
+
287
+ globalNavAndTable.forEach(element => {
288
+ element.style.display = 'none';
289
+ });
290
+
291
+ const globalButton = document.getElementById("global-button");
292
+ if (globalButton) {
293
+ globalButton.addEventListener("click", showGlobal);
294
+ }
295
+
296
+ const localButton = document.getElementById("local-button");
297
+ if (localButton) {
298
+ localButton.addEventListener("click", showLocal);
299
+ }
300
+
301
+ function showGlobal() {
302
+ localNavAndTable.forEach(element => {
303
+ element.style.display = 'none';
304
+ });
305
+
306
+ globalNavAndTable.forEach(element => {
307
+ element.style.display = 'table';
308
+ });
309
+ }
310
+
311
+ function showLocal() {
312
+ localNavAndTable.forEach(element => {
313
+ element.style.display = 'table';
314
+ });
315
+
316
+ globalNavAndTable.forEach(element => {
317
+ element.style.display = 'none';
318
+ });
319
+ }
320
+
321
+ </script>
@@ -0,0 +1,150 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbDocs
5
+ class KitApi < Playbook::KitBase
6
+ prop :kit, type: Playbook::Props::String, required: true
7
+ prop :dark, type: Playbook::Props::Boolean, default: false
8
+
9
+ def kit_local_props
10
+ local = []
11
+ kit_props.each do |key, value|
12
+ value.kit != Playbook::KitBase && local.push({ key: key, value: value })
13
+ end
14
+ local
15
+ end
16
+
17
+ def padding_margin_values
18
+ %w[none xxs xs sm md lg xl]
19
+ end
20
+
21
+ def local_prop_data
22
+ local_props = {}
23
+
24
+ kit_local_props.each do |key, _value|
25
+ name = key[:value].instance_variable_get(:@name)
26
+ type = key[:value].class.to_s.split("::").last
27
+ default = key[:value].instance_variable_get(:@default)
28
+ values = key[:value].instance_variable_get(:@values)
29
+ local_props[name.to_sym] = { "type": type, "default": default, "values": values }
30
+ end
31
+ local_props
32
+ end
33
+
34
+ def kit_global_props
35
+ global_props = {}
36
+ global_prop_names = []
37
+ global_prop_values = {}
38
+ global_props_with_values = {}
39
+ global_props_without_values = []
40
+ parent_child_object = {}
41
+ updated_global_props_with_values = {}
42
+
43
+ # extracts the modules from kit_base.rb, which is where we import all the global props that we inject into every rails kit
44
+ pb_module = Playbook::KitBase.included_modules.select { |mod| mod.to_s.include?("Playbook::") }
45
+
46
+ # loops through the kits and extracts each prop with its values and pushes that to the global_props hash
47
+ kit_props.each do |key, value|
48
+ value.kit == Playbook::KitBase && global_props[key.to_sym] = value
49
+ end
50
+
51
+ # loops through the global_props and extracts the name of each prop and pushes that to global_prop_names array
52
+ global_props.each do |name, _values|
53
+ global_prop_names.push(name)
54
+ end
55
+
56
+ # Loops through each module in pb_module and searches for methods that end in _values, as these methods hold the values for each prop
57
+ # we then save the values and type and push that to the values hash as a key value pair
58
+ pb_module.each do |mod|
59
+ mod.instance_methods.each do |method_name|
60
+ next unless method_name.to_s.end_with?("_values")
61
+
62
+ value = send(method_name)
63
+ type = value.class
64
+ global_prop_values[method_name.to_s.chomp("_values").to_sym] = { "type": type, "values": value }
65
+ end
66
+ end
67
+
68
+ # loops through the global_prop_names array
69
+ # then loops through the global_prop_values hash and extracts the values that have the same name found in global_prop_names
70
+ # this loop helps ensure only global props values are actually extracted, as there could be other methods that end in _values in the modules we are iterating over
71
+ # these verified global props with values are then pushed to the global_props_with_values hash
72
+ global_prop_names.each do |name, _prop|
73
+ global_prop_values.each do |key, value|
74
+ global_props_with_values[key] = value if key == name
75
+ end
76
+ end
77
+
78
+ # now we grab all the global_prop_names that do not have a matching key in global_prop_values.
79
+ # This gives us any global prop that did not have any predefined value. like classname and dark
80
+ global_props_without_values = global_prop_names - global_prop_values.keys
81
+
82
+ # Loops through each module in pb_module and searches for methods that end in _options, as these methods hold all the props in the module
83
+ # save the prop names prop values and and parent module name to parent_child_object hash
84
+ # this is a comprehensive list of all parent module and children props for edge cases like spacing.rb, that is not named after the props it represents
85
+ pb_module.each do |mod|
86
+ mod.instance_methods.each do |method_name|
87
+ next unless method_name.to_s.end_with?("_options")
88
+
89
+ props = send(method_name)
90
+ parent = mod.to_s.split("::").last
91
+ values = send("#{parent.underscore}_values")
92
+ parent_child_object[parent] = { "props": props, "values": values }
93
+ end
94
+ end
95
+
96
+ # loops through each object in parent_child_object and extracts its children (props and values)
97
+ # loops through each child and extracts the individual props
98
+ # Checks if the props match any of the props in global_props_without_values
99
+ # if it does, then we push that prop to global_props_with_values hash
100
+ # This extracts the props in the spacing.rb file and any file that is not named after the props it represents
101
+ parent_child_object.each do |_parent, children|
102
+ children.each do |_child, props|
103
+ props.each do |prop, _value|
104
+ type = children[:values].class
105
+ values = children[:values]
106
+ global_props_with_values[prop] = { "type": type, "values": values } if global_props_without_values.include?(prop)
107
+ end
108
+ end
109
+ end
110
+
111
+ # loop through the global_props hash and the global_props_with_values hash.
112
+ # extract the props from global_props that are not found in global_props_with_values into updated_global_props_with_values
113
+ # This is the last piece that grabs the global props that did not have values at all, like classname and dark, and adds it to our hash
114
+ global_props.each do |prop, value|
115
+ unless global_props_with_values.include?(prop)
116
+ type = value.class.to_s.split("::").last
117
+ updated_global_props_with_values[prop] = { "type": type }
118
+ end
119
+ end
120
+
121
+ # Merge updated_global_props_with_values into global_props_with_values
122
+ # global_props_with_values will now hold all the global props thier values and type
123
+ global_props_with_values.merge!(updated_global_props_with_values)
124
+
125
+ global_props_with_values
126
+ end
127
+
128
+ def global_prop_data
129
+ global_props = {}
130
+
131
+ kit_global_props.each do |key, value|
132
+ type = value[:type]
133
+ values = value[:values]
134
+ global_props[key] = { "type": type, "values": values }
135
+ end
136
+ global_props
137
+ end
138
+
139
+ def kit_props
140
+ kit_class.props
141
+ end
142
+
143
+ private
144
+
145
+ def kit_class
146
+ @kit_class ||= Playbook::KitResolver.resolve(kit.to_s)
147
+ end
148
+ end
149
+ end
150
+ end
@@ -0,0 +1,80 @@
1
+ <% example_html = ERB.new(example).result %>
2
+
3
+ <%= pb_rails("card", props: { classname: "pb--doc", padding: "none", dark: dark }) do %>
4
+ <% unless (type == "swift") %>
5
+ <div class="pb--kit-example">
6
+ <%= pb_rails("caption", props: { text: example_title, dark: dark }) %>
7
+ <br />
8
+ <%= example %>
9
+ <br>
10
+ </div>
11
+ <% else %>
12
+ <div class="pb--kit-example-markdown pt_none markdown kit_show_swift <%= dark ? "dark" : "" %>">
13
+ <%= pb_rails("caption", props: { text: example_title, dark: dark, margin_top: "md" }) %>
14
+ <%= render_markdown(description) %>
15
+ </div>
16
+ <% end %>
17
+ <% if show_code && type != "swift" %>
18
+ <div class="markdown pb--kit-example-markdown markdown <%= dark ? "dark" : "" %>">
19
+ <%= render_markdown(description) %>
20
+ </div>
21
+ <div id="code-wrapper">
22
+ <div class="pb--codeControls">
23
+ <ul>
24
+ <% hide_button = type == "rails" ? 'flex' : 'none' %>
25
+ <li>
26
+ <%= pb_rails("button", props: { id:"copy-html-#{example_key}", icon: "copy", text: "Copy HTML", classname: dark ? "dark" : "", variant: "link", size: "sm", display: hide_button }) %>
27
+ </li>
28
+ <li>
29
+ <%= pb_rails("button", props: { icon: "code", id:"toggle-open-opened", classname: dark ? "dark" : "", text: "Close Code", variant: "link", size: "sm", display: "none" }) %>
30
+ <%= pb_rails("button", props: { icon: "code", id:"toggle-open-closed", classname: dark ? "dark" : "", text: "Show Code", variant: "link", size: "sm" }) %>
31
+ </li>
32
+ </ul>
33
+ </div>
34
+ <div class="pb--codeCopy" data-action="toggle" data-togglable="code_example" style="display: none" >
35
+ <%= pb_rails("section_separator", props: { dark: dark })%>
36
+ <a href="#" id="copy-code-<%= example_key %>" class="pb--copy-code" onclick="copyOnClick(`<%= source %>`, `copy-code-<%= example_key %>`)">
37
+ <%= pb_rails("button", props: { id: "copy-button-#{example_key}", text: "Copy Code", size: "sm", icon: "copy", padding_x: "xs" }) %>
38
+ </a>
39
+ <pre class="highlight"><%= raw render_code(source, highlighter) %></pre>
40
+ </div>
41
+ <%= pb_rails("popover", props: {
42
+ trigger_element_id: "copy-button-#{example_key}",
43
+ tooltip_id: "tooltip-#{example_key}",
44
+ offset: true,
45
+ position: "bottom"
46
+ }) do %>
47
+ Code Copied
48
+ <% end %>
49
+ </div>
50
+ <% end %>
51
+ <% end %>
52
+
53
+ <script>
54
+ var htmlButton = document.getElementById('<%= "copy-html-#{example_key}" %>')
55
+ if (htmlButton) {
56
+ htmlButton.addEventListener('click', function() {
57
+ var tempElement = document.createElement('div')
58
+ tempElement.innerHTML = `<%= example_html %>`
59
+ var decodedString = tempElement.textContent || tempElement.innerText;
60
+ copyContent(decodedString)
61
+ })
62
+ }
63
+
64
+ var button = document.getElementById('<%= "copy-button-#{example_key}" %>')
65
+ if (button) {
66
+ button.addEventListener('click', function() {
67
+ var tempElement = document.createElement('div')
68
+ tempElement.innerHTML = `<%= source %>`
69
+ var decodedString = tempElement.textContent || tempElement.innerText;
70
+ copyContent(decodedString)
71
+ var fadeAwayDiv = document.getElementById("<%= "tooltip-#{example_key}" %>")
72
+ setTimeout(function() {
73
+ fadeAwayDiv.classList.remove('show')
74
+ }, 3000)
75
+ setTimeout(function() {
76
+ fadeAwayDiv.classList.add('hide')
77
+ }, 3001)
78
+ })
79
+ }
80
+ </script>
@@ -0,0 +1,94 @@
1
+ # frozen_string_literal: true
2
+
3
+ # rubocop:disable Style/CaseLikeIf
4
+ module Playbook
5
+ module PbDocs
6
+ class KitExample < Playbook::KitBase
7
+ prop :kit, type: Playbook::Props::String, required: true
8
+ prop :example_title, type: Playbook::Props::String, required: true
9
+ prop :example_key, type: Playbook::Props::String, required: true
10
+ prop :show_code, type: Playbook::Props::Boolean, default: true
11
+ prop :type, type: Playbook::Props::Enum, values: %w[rails react swift], default: "rails"
12
+ prop :dark, type: Playbook::Props::Boolean, default: false
13
+
14
+ include PlaybookWebsite::Markdown::Helper
15
+
16
+ def example
17
+ if type == "rails"
18
+ render inline: source
19
+ elsif type == "react"
20
+ react_component example_key.camelize, { dark: dark }
21
+ elsif type == "swift"
22
+ ## render the markdown file
23
+ render inline: source
24
+ end
25
+ end
26
+
27
+ def description
28
+ @description ||= read_kit_file("docs", "_#{example_key}.md")
29
+ end
30
+
31
+ def highlighter
32
+ type.eql?("rails") ? "erb" : "react"
33
+ end
34
+
35
+ def source
36
+ @source ||= begin
37
+ extension = if type == "rails"
38
+ "html.erb"
39
+ else
40
+ type == "swift" ? "swift" : "jsx"
41
+ end
42
+ stringified_code = read_kit_file("docs", "_#{example_key}.#{extension}")
43
+ sanitize_code(stringified_code)
44
+ end
45
+ end
46
+
47
+ def tsx_source
48
+ read_kit_file("", "_#{example_key}.tsx")
49
+ end
50
+
51
+ private
52
+
53
+ def sanitize_code(stringified_code)
54
+ stringified_code = stringified_code.gsub('"../.."', '"playbook-ui"')
55
+ .gsub('"../../"', '"playbook-ui"')
56
+ .gsub("'../../'", "'playbook-ui'")
57
+ .gsub("'../..'", "'playbook-ui'")
58
+ .gsub(%r{from "../.*}, "from 'playbook-ui'")
59
+ .gsub(%r{from '../.*}, "from 'playbook-ui'")
60
+ .gsub("'../../../../../../playbook-website/app/javascript/scripts/custom-icons'", "'your-directory/custom-icons.js'")
61
+ stringified_code = dark ? stringified_code.gsub("{...props}", "dark") : stringified_code.gsub(/\s*{...props}\s*\n/, "\n")
62
+ if stringified_code.include?("props: { ")
63
+ stringified_code = stringified_code.gsub("props: {", "props: {dark: true,") if type == "rails" && dark
64
+ elsif type == "rails" && dark
65
+ stringified_code = stringified_code.gsub("props: {", "props: {\n dark: true,")
66
+ end
67
+ stringified_code.gsub(" {...props}", "")
68
+ end
69
+
70
+ def read_kit_file(folder, file_name)
71
+ name_array = file_name.split(".")
72
+ path = ::Playbook.kit_path(kit, folder, file_name)
73
+ if name_array[1] != "md"
74
+ (path.exist? ? path.read : "")
75
+ else
76
+ if path.exist?
77
+ path.read
78
+ elsif type == "rails"
79
+ name_array[0] += "_rails"
80
+ file_name = name_array.join(".")
81
+ path = ::Playbook.kit_path(kit, folder, file_name)
82
+ elsif type == "react"
83
+ name_array[0] += "_react"
84
+ file_name = name_array.join(".")
85
+ path = ::Playbook.kit_path(kit, folder, file_name)
86
+ end
87
+ (path.exist? ? path.read : "")
88
+ end
89
+ end
90
+ end
91
+ end
92
+ end
93
+
94
+ # rubocop:enable Style/CaseLikeIf