playbook_ui 7.3.0.pre.alpha1 → 7.3.0.pre.alpha2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (352) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +2 -1
  3. data/app/controllers/playbook/application_controller.rb +2 -0
  4. data/app/controllers/playbook/guides_controller.rb +11 -0
  5. data/app/controllers/playbook/pages_controller.rb +99 -0
  6. data/app/controllers/playbook/samples_controller.rb +40 -0
  7. data/app/pb_kits/playbook/_playbook.scss +1 -1
  8. data/app/pb_kits/playbook/data/menu.yml +4 -4
  9. data/app/pb_kits/playbook/index.js +1 -4
  10. data/app/pb_kits/playbook/packs/application.js +55 -0
  11. data/app/pb_kits/playbook/packs/examples.js +182 -0
  12. data/app/pb_kits/playbook/packs/main.scss +12 -0
  13. data/app/pb_kits/playbook/packs/samples.js +21 -0
  14. data/app/pb_kits/playbook/packs/site_styles/_samples.scss +72 -0
  15. data/app/pb_kits/playbook/packs/site_styles/_scaffold.scss +43 -0
  16. data/app/pb_kits/playbook/packs/site_styles/_site-style.scss +146 -0
  17. data/app/pb_kits/playbook/packs/site_styles/docs/_all.scss +10 -0
  18. data/app/pb_kits/playbook/packs/site_styles/docs/_bg_light_doc_example.scss +7 -0
  19. data/app/pb_kits/playbook/packs/site_styles/docs/_code_snippet.scss +531 -0
  20. data/app/pb_kits/playbook/packs/site_styles/docs/_color_utilities.scss +92 -0
  21. data/app/pb_kits/playbook/packs/site_styles/docs/_flex_examples.scss +15 -0
  22. data/app/pb_kits/playbook/packs/site_styles/docs/_kit_doc.scss +148 -0
  23. data/app/pb_kits/playbook/packs/site_styles/docs/_kits_examples.scss +15 -0
  24. data/app/pb_kits/playbook/packs/site_styles/docs/_markdown.scss +88 -0
  25. data/app/pb_kits/playbook/packs/site_styles/docs/_spacing_tokens.scss +72 -0
  26. data/app/pb_kits/playbook/pb_avatar/_avatar.jsx +1 -5
  27. data/app/pb_kits/playbook/pb_badge/_badge.jsx +2 -4
  28. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.html.erb +12 -1
  29. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx +1 -1
  30. data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +1 -1
  31. data/app/pb_kits/playbook/pb_body/body.rb +1 -1
  32. data/app/pb_kits/playbook/pb_button/_button.jsx +1 -5
  33. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +0 -1
  34. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.jsx +3 -7
  35. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss +90 -82
  36. data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.rb +2 -4
  37. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.html.erb +7 -17
  38. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx +9 -32
  39. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.html.erb +7 -18
  40. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx +9 -37
  41. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.html.erb +11 -0
  42. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.jsx +29 -0
  43. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.html.erb +11 -0
  44. data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.jsx +34 -0
  45. data/app/pb_kits/playbook/pb_button_toolbar/docs/example.yml +7 -3
  46. data/app/pb_kits/playbook/pb_button_toolbar/docs/index.js +2 -0
  47. data/app/pb_kits/playbook/pb_caption/_caption.html.erb +5 -7
  48. data/app/pb_kits/playbook/pb_caption/_caption.jsx +2 -2
  49. data/app/pb_kits/playbook/pb_caption/docs/example.yml +0 -2
  50. data/app/pb_kits/playbook/pb_caption/docs/index.js +0 -1
  51. data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx +2 -5
  52. data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +1 -3
  53. data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +0 -1
  54. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx +1 -5
  55. data/app/pb_kits/playbook/pb_collapsible/_collapsible.html.erb +9 -0
  56. data/app/pb_kits/playbook/pb_collapsible/_collapsible.jsx +142 -0
  57. data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +17 -0
  58. data/app/pb_kits/playbook/pb_collapsible/child_kits/_collapsible_content.html.erb +7 -0
  59. data/app/pb_kits/playbook/pb_collapsible/child_kits/_collapsible_main.html.erb +16 -0
  60. data/app/pb_kits/playbook/pb_collapsible/collapsible.rb +15 -0
  61. data/app/pb_kits/playbook/pb_collapsible/collapsible_content.rb +21 -0
  62. data/app/pb_kits/playbook/pb_collapsible/collapsible_main.rb +24 -0
  63. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_dark.html.erb +10 -0
  64. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_dark.jsx +17 -0
  65. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.html.erb +10 -0
  66. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +17 -0
  67. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +9 -0
  68. data/app/pb_kits/playbook/pb_collapsible/docs/index.js +2 -0
  69. data/app/pb_kits/playbook/pb_collapsible/index.js +82 -0
  70. data/app/pb_kits/playbook/pb_contact/_contact.jsx +1 -5
  71. data/app/pb_kits/playbook/pb_currency/_currency.jsx +1 -5
  72. data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx +1 -5
  73. data/app/pb_kits/playbook/pb_date/_date.html.erb +8 -64
  74. data/app/pb_kits/playbook/pb_date/_date.jsx +66 -115
  75. data/app/pb_kits/playbook/pb_date/_date.scss +0 -30
  76. data/app/pb_kits/playbook/pb_date/date.rb +9 -21
  77. data/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb +6 -21
  78. data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +12 -43
  79. data/app/pb_kits/playbook/pb_date/docs/example.yml +0 -4
  80. data/app/pb_kits/playbook/pb_date/docs/index.js +0 -2
  81. data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb +2 -1
  82. data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +5 -3
  83. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +2 -3
  84. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +31 -37
  85. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.html.erb +4 -0
  86. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.jsx +13 -0
  87. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.md +1 -0
  88. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.html.erb +4 -0
  89. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.jsx +13 -0
  90. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +2 -1
  91. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +2 -1
  92. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb +0 -4
  93. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx +0 -4
  94. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.html.erb +9 -9
  95. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.jsx +8 -8
  96. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.md +1 -3
  97. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +0 -1
  98. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +0 -1
  99. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +4 -1
  100. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +2 -1
  101. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.html.erb +14 -8
  102. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx +39 -122
  103. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss +2 -33
  104. data/app/pb_kits/playbook/pb_date_range_inline/date_range_inline.rb +9 -44
  105. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.html.erb +1 -14
  106. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx +1 -45
  107. data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx +1 -5
  108. data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx +2 -2
  109. data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.jsx +1 -5
  110. data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.html.erb +8 -1
  111. data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb +0 -7
  112. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.html.erb +2 -3
  113. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx +17 -31
  114. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +0 -10
  115. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.html.erb +1 -2
  116. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.jsx +2 -1
  117. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb +1 -1
  118. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx +1 -1
  119. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.html.erb +1 -1
  120. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.jsx +1 -1
  121. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +0 -2
  122. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js +0 -1
  123. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb +1 -7
  124. data/app/pb_kits/playbook/pb_flex/_flex.jsx +2 -2
  125. data/app/pb_kits/playbook/pb_flex/_flex_item.jsx +1 -1
  126. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +2 -10
  127. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
  128. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +3 -3
  129. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb +3 -3
  130. data/app/pb_kits/playbook/pb_form/form_builder/checkbox_field.rb +2 -7
  131. data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +0 -1
  132. data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx +2 -3
  133. data/app/pb_kits/playbook/pb_gauge/_gauge.jsx +1 -1
  134. data/app/pb_kits/playbook/pb_highlight/_highlight.jsx +1 -1
  135. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx +2 -2
  136. data/app/pb_kits/playbook/pb_icon/_icon.jsx +2 -2
  137. data/app/pb_kits/playbook/pb_icon_value/_icon_value.jsx +1 -5
  138. data/app/pb_kits/playbook/pb_image/_image.jsx +1 -5
  139. data/app/pb_kits/playbook/pb_label_pill/_label_pill.jsx +1 -5
  140. data/app/pb_kits/playbook/pb_layout/_layout.jsx +4 -4
  141. data/app/pb_kits/playbook/pb_line_graph/_line_graph.html.erb +13 -1
  142. data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx +1 -1
  143. data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +1 -1
  144. data/app/pb_kits/playbook/pb_list/_list.jsx +2 -3
  145. data/app/pb_kits/playbook/pb_list/_list_item.jsx +2 -3
  146. data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +1 -5
  147. data/app/pb_kits/playbook/pb_message/_message.jsx +1 -5
  148. data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx +2 -5
  149. data/app/pb_kits/playbook/pb_nav/_item.html.erb +0 -3
  150. data/app/pb_kits/playbook/pb_nav/_item.jsx +1 -14
  151. data/app/pb_kits/playbook/pb_nav/_nav.jsx +2 -5
  152. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +3 -22
  153. data/app/pb_kits/playbook/pb_nav/docs/example.yml +0 -5
  154. data/app/pb_kits/playbook/pb_nav/docs/index.js +0 -2
  155. data/app/pb_kits/playbook/pb_nav/item.rb +0 -1
  156. data/app/pb_kits/playbook/pb_nav/nav.rb +1 -6
  157. data/app/pb_kits/playbook/pb_person/_person.jsx +1 -5
  158. data/app/pb_kits/playbook/pb_person_contact/_person_contact.jsx +7 -12
  159. data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.jsx +0 -1
  160. data/app/pb_kits/playbook/pb_pill/_pill.scss +0 -1
  161. data/app/pb_kits/playbook/pb_popover/_popover.jsx +1 -5
  162. data/app/pb_kits/playbook/pb_popover/_popover.scss +4 -6
  163. data/app/pb_kits/playbook/pb_popover/index.js +1 -3
  164. data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.jsx +4 -4
  165. data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx +1 -4
  166. data/app/pb_kits/playbook/pb_progress_step/_progress_step.scss +33 -168
  167. data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.html.erb +1 -3
  168. data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx +8 -10
  169. data/app/pb_kits/playbook/pb_progress_step/docs/_description.md +1 -1
  170. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.html.erb +16 -14
  171. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx +3 -6
  172. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.html.erb +1 -17
  173. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.jsx +1 -17
  174. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.jsx +3 -10
  175. data/app/pb_kits/playbook/pb_progress_step/progress_step.rb +1 -11
  176. data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb +1 -1
  177. data/app/pb_kits/playbook/pb_radio/_radio.html.erb +1 -1
  178. data/app/pb_kits/playbook/pb_radio/docs/example.yml +0 -1
  179. data/app/pb_kits/playbook/pb_radio/radio.rb +4 -2
  180. data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx +3 -1
  181. data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +47 -26
  182. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.jsx +2 -6
  183. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx +1 -2
  184. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_background.jsx +1 -2
  185. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.jsx +3 -9
  186. data/app/pb_kits/playbook/pb_section_separator/section_separator.rb +1 -1
  187. data/app/pb_kits/playbook/pb_select/_select.scss +1 -1
  188. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.html.erb +4 -4
  189. data/app/pb_kits/playbook/pb_selectable_card/docs/example.yml +2 -3
  190. data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb +9 -16
  191. data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.html.erb +2 -3
  192. data/app/pb_kits/playbook/pb_selectable_card_icon/docs/example.yml +3 -4
  193. data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb +0 -3
  194. data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.html.erb +3 -3
  195. data/app/pb_kits/playbook/pb_selectable_icon/docs/example.yml +2 -3
  196. data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb +0 -10
  197. data/app/pb_kits/playbook/pb_stat_change/_stat_change.jsx +2 -2
  198. data/app/pb_kits/playbook/pb_stat_value/_stat_value.jsx +3 -3
  199. data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.jsx +1 -6
  200. data/app/pb_kits/playbook/pb_table/_table.jsx +2 -2
  201. data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -12
  202. data/app/pb_kits/playbook/pb_table/docs/index.js +0 -6
  203. data/app/pb_kits/playbook/pb_text_input/_text_input.jsx +1 -1
  204. data/app/pb_kits/playbook/pb_textarea/_textarea.jsx +1 -1
  205. data/app/pb_kits/playbook/pb_time/_time.html.erb +20 -17
  206. data/app/pb_kits/playbook/pb_time/_time.jsx +29 -42
  207. data/app/pb_kits/playbook/pb_time/_time.scss +24 -4
  208. data/app/pb_kits/playbook/pb_time/docs/_time_align.jsx +1 -4
  209. data/app/pb_kits/playbook/pb_time/docs/_time_default.html.erb +11 -11
  210. data/app/pb_kits/playbook/pb_time/docs/_time_default.jsx +1 -13
  211. data/app/pb_kits/playbook/pb_time/docs/_time_sizes.jsx +1 -4
  212. data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.jsx +1 -3
  213. data/app/pb_kits/playbook/pb_time/docs/_time_timezone.html.erb +1 -2
  214. data/app/pb_kits/playbook/pb_time/docs/_time_timezone.jsx +2 -7
  215. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx +1 -1
  216. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss +5 -5
  217. data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx +3 -3
  218. data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx +1 -1
  219. data/app/pb_kits/playbook/pb_title/_title.jsx +1 -5
  220. data/app/pb_kits/playbook/pb_title_count/_title_count.jsx +1 -5
  221. data/app/pb_kits/playbook/pb_title_detail/_title_detail.jsx +5 -5
  222. data/app/pb_kits/playbook/pb_toggle/_toggle.jsx +3 -3
  223. data/app/pb_kits/playbook/pb_toggle/_toggle.scss +43 -41
  224. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_size.html.erb +11 -0
  225. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_size.jsx +44 -0
  226. data/app/pb_kits/playbook/pb_toggle/docs/example.yml +2 -1
  227. data/app/pb_kits/playbook/pb_toggle/docs/index.js +1 -0
  228. data/app/pb_kits/playbook/pb_toggle/toggle.rb +2 -5
  229. data/app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb +20 -24
  230. data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +1 -19
  231. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +1 -8
  232. data/app/pb_kits/playbook/pb_typeahead/components/Option.jsx +13 -21
  233. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb +3 -4
  234. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context_dark.html.erb +1 -1
  235. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx +3 -0
  236. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_summary.jsx +45 -0
  237. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +3 -0
  238. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_summary.jsx +27 -0
  239. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +0 -3
  240. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +1 -24
  241. data/app/pb_kits/playbook/pb_user_badge/_user_badge.jsx +2 -5
  242. data/app/pb_kits/playbook/props.rb +1 -1
  243. data/app/pb_kits/playbook/props/base.rb +4 -6
  244. data/app/pb_kits/playbook/tokens/_colors.scss +23 -22
  245. data/app/pb_kits/playbook/tokens/_typography.scss +4 -4
  246. data/app/pb_kits/playbook/vendor.js +3 -8
  247. data/app/views/layouts/playbook/_mobile_hamburger.html.erb +2 -0
  248. data/app/views/layouts/playbook/_nav.html.erb +37 -0
  249. data/app/views/layouts/playbook/_sidebar.html.erb +51 -0
  250. data/app/views/layouts/playbook/application.html.erb +26 -0
  251. data/app/views/layouts/playbook/fullscreen.html.slim +10 -0
  252. data/app/views/layouts/playbook/grid.html.slim +10 -0
  253. data/app/views/layouts/playbook/samples.html.erb +19 -0
  254. data/app/views/playbook/guides/create_kit.html.slim +16 -0
  255. data/app/views/playbook/guides/create_kit/_file_naming.html.md +2 -0
  256. data/app/views/playbook/guides/create_kit/_generator.html.md +6 -0
  257. data/app/views/playbook/guides/create_kit/_kit_examples.html.md +2 -0
  258. data/app/views/playbook/guides/create_kit/_kit_rails.html.md +2 -0
  259. data/app/views/playbook/guides/create_kit/_kit_react.html.md +2 -0
  260. data/app/views/playbook/guides/create_kit/_layout.html.md +2 -0
  261. data/app/views/playbook/guides/create_kit/_view_objects.html.md +2 -0
  262. data/app/views/playbook/guides/create_kit/_writing_sass.md +10 -0
  263. data/app/views/playbook/guides/use_nitro.html.slim +6 -0
  264. data/app/views/playbook/guides/use_nitro/_local.html.md +2 -0
  265. data/app/views/playbook/guides/use_nitro/_nitro_components.html.md +2 -0
  266. data/app/views/playbook/guides/use_nitro/_versions.html.md +2 -0
  267. data/app/views/playbook/pages/fullscreen.html.slim +10 -0
  268. data/app/views/playbook/pages/grid.html.slim +2 -0
  269. data/app/views/playbook/pages/home.html.slim +4 -0
  270. data/app/views/playbook/pages/kit_category_show.html.erb +14 -0
  271. data/app/views/playbook/pages/kit_show.html.erb +33 -0
  272. data/app/views/playbook/pages/kits.html.erb +12 -0
  273. data/app/views/playbook/pages/principals/_getting_started.html.md +30 -0
  274. data/app/views/playbook/pages/principles.html.slim +3 -0
  275. data/app/views/playbook/pages/tokens.html.slim +15 -0
  276. data/app/views/playbook/pages/tokens/_pb_doc_spacing.html.slim +61 -0
  277. data/app/views/playbook/pages/utilities.html.slim +116 -0
  278. data/app/views/playbook/pages/utilities/_pb_doc_color.html.slim +15 -0
  279. data/app/views/playbook/samples/collection_detail/index.html.erb +169 -0
  280. data/app/views/playbook/samples/collection_detail/index.jsx +372 -0
  281. data/app/views/playbook/samples/dashboards/index.html.erb +81 -0
  282. data/app/views/playbook/samples/dashboards/index.jsx +130 -0
  283. data/app/views/playbook/samples/filter_table/index.html.erb +348 -0
  284. data/app/views/playbook/samples/filter_table/index.jsx +433 -0
  285. data/app/views/playbook/samples/registration/index.html.erb +316 -0
  286. data/app/views/playbook/samples/registration/index.jsx +476 -0
  287. data/app/views/playbook/samples/sample_show.html.erb +36 -0
  288. data/lib/generators/kit/USAGE +5 -0
  289. data/lib/generators/kit/kit_generator.rb +95 -0
  290. data/lib/generators/kit/templates/kit_example_rails.erb.tt +1 -0
  291. data/lib/generators/kit/templates/kit_example_react.erb.tt +10 -0
  292. data/lib/generators/kit/templates/kit_example_yml.erb.tt +9 -0
  293. data/lib/generators/kit/templates/kit_html.erb.tt +7 -0
  294. data/lib/generators/kit/templates/kit_js.erb.tt +1 -0
  295. data/lib/generators/kit/templates/kit_jsx.erb.tt +68 -0
  296. data/lib/generators/kit/templates/kit_ruby.erb.tt +11 -0
  297. data/lib/generators/kit/templates/kit_ruby_spec.erb.tt +11 -0
  298. data/lib/generators/kit/templates/kit_scss.erb +3 -0
  299. data/lib/playbook/engine.rb +0 -1
  300. data/lib/playbook/version.rb +1 -1
  301. data/lib/tasks/pb_release.rake +77 -0
  302. data/lib/tasks/playbook_tasks.rake +26 -0
  303. metadata +104 -53
  304. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_dark.scss +0 -57
  305. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_mixins.scss +0 -27
  306. data/app/pb_kits/playbook/pb_caption/docs/_caption_block.html.erb +0 -11
  307. data/app/pb_kits/playbook/pb_caption/docs/_caption_block.jsx +0 -28
  308. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_options.html.erb +0 -10
  309. data/app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb +0 -24
  310. data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx +0 -35
  311. data/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb +0 -27
  312. data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx +0 -43
  313. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md +0 -1
  314. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx +0 -34
  315. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md +0 -3
  316. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.html.erb +0 -21
  317. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx +0 -38
  318. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js +0 -18
  319. data/app/pb_kits/playbook/pb_nav/docs/_borderless_nav.html.erb +0 -6
  320. data/app/pb_kits/playbook/pb_nav/docs/_borderless_nav.jsx +0 -29
  321. data/app/pb_kits/playbook/pb_nav/docs/_with_img_nav.html.erb +0 -7
  322. data/app/pb_kits/playbook/pb_nav/docs/_with_img_nav.jsx +0 -42
  323. data/app/pb_kits/playbook/pb_nav/docs/_with_img_nav.md +0 -1
  324. data/app/pb_kits/playbook/pb_radio/docs/_radio_options.html.erb +0 -9
  325. data/app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss +0 -32
  326. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_options.html.erb +0 -16
  327. data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_options.html.erb +0 -16
  328. data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_options.html.erb +0 -15
  329. data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.html.erb +0 -34
  330. data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx +0 -68
  331. data/app/pb_kits/playbook/pb_table/docs/_table_action_middle.md +0 -2
  332. data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.html.erb +0 -61
  333. data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.jsx +0 -89
  334. data/app/pb_kits/playbook/pb_table/docs/_table_icon_buttons.md +0 -1
  335. data/app/pb_kits/playbook/pb_table/docs/_table_one_action.html.erb +0 -34
  336. data/app/pb_kits/playbook/pb_table/docs/_table_one_action.jsx +0 -68
  337. data/app/pb_kits/playbook/pb_table/docs/_table_one_action.md +0 -2
  338. data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.html.erb +0 -43
  339. data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.jsx +0 -80
  340. data/app/pb_kits/playbook/pb_table/docs/_table_two_actions.md +0 -1
  341. data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.html.erb +0 -34
  342. data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.jsx +0 -63
  343. data/app/pb_kits/playbook/pb_table/docs/_table_two_plus_actions.md +0 -1
  344. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_options.html.erb +0 -10
  345. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb +0 -25
  346. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md +0 -8
  347. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb +0 -30
  348. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.md +0 -11
  349. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.html.erb +0 -25
  350. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.md +0 -1
  351. data/app/pb_kits/playbook/react_rails_kits.js +0 -6
  352. data/app/pb_kits/playbook/tokens/index.scss +0 -11
data/app/views/playbook/samples/registration/index.jsx ADDED
@@ -0,0 +1,476 @@
1
+ import React from 'react'
2
+ import { BarGraph, Body, Button, Caption, Card, Checkbox, Flex, Layout, LineGraph, SectionSeparator, Table, Title } from '../../../../pb_kits/playbook'
3
+ import FlexItem from '../../../../pb_kits/playbook/pb_flex/_flex_item.jsx'
4
+
5
+ const data = [{
6
+ name: '2020 | SF',
7
+ data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
8
+ }, {
9
+ name: '2020 | TOR',
10
+ data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
11
+ }, {
12
+ name: '2019 | AMS',
13
+ data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
14
+ }, {
15
+ name: '2018 | SF',
16
+ data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
17
+ }, {
18
+ name: '2017 | LA',
19
+ data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
20
+ }]
21
+
22
+ const totalRegistered = [{
23
+ name: 'Registrations',
24
+ data: [1475, 524, 1344, 780, 200, 900],
25
+ }]
26
+ const newAttendees = [{
27
+ name: 'Registrations',
28
+ data: [1475, 524, 1344, 780, 200, 900],
29
+ }]
30
+ const repeatingAttendees = [{
31
+ name: 'Registrations',
32
+ data: [1475, 524, 1344, 780, 200, 900],
33
+ }]
34
+ const graphicDesigners = [{
35
+ name: 'Registrations',
36
+ data: [1475, 524, 1344, 780, 200, 900],
37
+ }]
38
+ const uxUi = [{
39
+ name: 'Registrations',
40
+ data: [1475, 524, 1344, 780, 200, 900],
41
+ }]
42
+ const productDesigners = [{
43
+ name: 'Registrations',
44
+ data: [1475, 524, 1344, 780, 200, 900],
45
+ }]
46
+
47
+ const Registration = () => (
48
+ <div>
49
+ <Layout
50
+ collapse="xs"
51
+ position="left"
52
+ size="lg"
53
+ >
54
+ <Layout.Side>
55
+ <Flex
56
+ orientation="column"
57
+ padding="md"
58
+ vertical="center"
59
+ >
60
+ <FlexItem>
61
+ <Title
62
+ size={3}
63
+ tag="h3"
64
+ text="Design Expo"
65
+ />
66
+ </FlexItem>
67
+ <FlexItem>
68
+ <Body
69
+ color="light"
70
+ text="Annual Conference*"
71
+ />
72
+ </FlexItem>
73
+ </Flex>
74
+ <SectionSeparator />
75
+ <Flex
76
+ orientation="column"
77
+ padding="md"
78
+ >
79
+ <FlexItem>
80
+ <Title
81
+ paddingBottom="sm"
82
+ size={4}
83
+ tag="h4"
84
+ text="Regions"
85
+ />
86
+ </FlexItem>
87
+ <Flex
88
+ inline
89
+ orientation="column"
90
+ >
91
+ <Checkbox
92
+ checked
93
+ name="NorthAmerica"
94
+ paddingBottom="sm"
95
+ paddingLeft="sm"
96
+ text="North America"
97
+ value="NorthAmerica"
98
+ />
99
+ <Checkbox
100
+ checked
101
+ name="Europe"
102
+ paddingBottom="sm"
103
+ paddingLeft="sm"
104
+ text="Europe"
105
+ value="Europe"
106
+ />
107
+ </Flex>
108
+ <Title
109
+ paddingY="sm"
110
+ size={4}
111
+ tag="h4"
112
+ text="Total Registered"
113
+ />
114
+ <Table
115
+ paddingBottom="xs"
116
+ size="sm"
117
+ >
118
+ <thead>
119
+ <tr>
120
+ <th>{'Conference'}</th>
121
+ <th>{'Total #'}</th>
122
+ </tr>
123
+ </thead>
124
+ <tbody>
125
+ <tr>
126
+ <td>{'2020 | SF'}</td>
127
+ <td>{'2,391'}</td>
128
+ </tr>
129
+ <tr>
130
+ <td>{'2020 | TOR'}</td>
131
+ <td>{'3,829'}</td>
132
+ </tr>
133
+ <tr>
134
+ <td>{'2019 | AMS'}</td>
135
+ <td>{'2,047'}</td>
136
+ </tr>
137
+ <tr>
138
+ <td>{'2018 | SF'}</td>
139
+ <td>{'1,824'}</td>
140
+ </tr>
141
+ <tr>
142
+ <td>{'2017 | LA'}</td>
143
+ <td>{'719'}</td>
144
+ </tr>
145
+ <tr>
146
+ <td>{'2017 | LDN'}</td>
147
+ <td>{'491'}</td>
148
+ </tr>
149
+ </tbody>
150
+ </Table>
151
+ <Caption
152
+ size="xs"
153
+ text="*This dashboard includes the last six conferences"
154
+ />
155
+ </Flex>
156
+ </Layout.Side>
157
+
158
+ <Layout.Body
159
+ padding="xl"
160
+ >
161
+ <Title
162
+ paddingBottom="lg"
163
+ size={3}
164
+ tag="h3"
165
+ text="Registration Dashboard"
166
+ />
167
+ <Flex
168
+ className="bg_light"
169
+ wrap
170
+ >
171
+ <FlexItem
172
+ fixedSize="60%"
173
+ paddingRight="lg"
174
+ >
175
+ <Card>
176
+
177
+ <Flex
178
+ paddingBottom="md"
179
+ spacing="around"
180
+ vertical="bottom"
181
+ >
182
+ {/****** first number ******/}
183
+ <FlexItem>
184
+ <Flex
185
+ orientation="column"
186
+ vertical="center"
187
+ >
188
+ <FlexItem>
189
+ <Caption
190
+ size="xs"
191
+ text="2020 | SF"
192
+ />
193
+ </FlexItem>
194
+ <FlexItem>
195
+ <Caption
196
+ text="Total Registered"
197
+ />
198
+ </FlexItem>
199
+ <FlexItem>
200
+ <Title
201
+ size={2}
202
+ tag="h2"
203
+ text="2,391"
204
+ />
205
+ </FlexItem>
206
+ </Flex>
207
+ </FlexItem>
208
+
209
+ <SectionSeparator orientation="vertical" />
210
+
211
+ {/****** second number ******/}
212
+
213
+ <FlexItem>
214
+ <Flex
215
+ orientation="column"
216
+ paddingTop="sm"
217
+ vertical="center"
218
+ >
219
+ <FlexItem>
220
+ <Caption
221
+ text="Graphic"
222
+ />
223
+ </FlexItem>
224
+ <FlexItem>
225
+ <Title
226
+ size={3}
227
+ tag="h3"
228
+ text="353"
229
+ />
230
+ </FlexItem>
231
+ </Flex>
232
+ </FlexItem>
233
+
234
+ {/****** third number ******/}
235
+
236
+ <FlexItem>
237
+ <Flex
238
+ orientation="column"
239
+ vertical="center"
240
+ >
241
+ <FlexItem>
242
+ <Caption
243
+ text="UX/UI"
244
+ />
245
+ </FlexItem>
246
+ <FlexItem>
247
+ <Title
248
+ size={3}
249
+ tag="h3"
250
+ text="254"
251
+ />
252
+ </FlexItem>
253
+ </Flex>
254
+ </FlexItem>
255
+
256
+ {/****** fourth number ******/}
257
+
258
+ <FlexItem>
259
+ <Flex
260
+ orientation="column"
261
+ vertical="center"
262
+ >
263
+ <FlexItem>
264
+ <Caption
265
+ text="Product"
266
+ />
267
+ </FlexItem>
268
+ <FlexItem>
269
+ <Title
270
+ size={3}
271
+ tag="h3"
272
+ text="194"
273
+ />
274
+ </FlexItem>
275
+ </Flex>
276
+ </FlexItem>
277
+ </Flex>
278
+
279
+ <SectionSeparator />
280
+
281
+ <Flex
282
+ paddingTop="sm"
283
+ spacing="around"
284
+ vertical="bottom"
285
+ >
286
+ {/****** first number ******/}
287
+ <FlexItem>
288
+ <Flex
289
+ orientation="column"
290
+ vertical="center"
291
+ >
292
+ <FlexItem>
293
+ <Caption
294
+ size="xs"
295
+ text="2020 | TOR"
296
+ />
297
+ </FlexItem>
298
+ <FlexItem>
299
+ <Caption
300
+ text="Total Registered"
301
+ />
302
+ </FlexItem>
303
+ <FlexItem>
304
+ <Title
305
+ size={2}
306
+ tag="h2"
307
+ text="3,829"
308
+ />
309
+ </FlexItem>
310
+ </Flex>
311
+ </FlexItem>
312
+
313
+ <SectionSeparator orientation="vertical" />
314
+
315
+ {/****** second number ******/}
316
+
317
+ <FlexItem>
318
+ <Flex
319
+ orientation="column"
320
+ vertical="center"
321
+ >
322
+ <FlexItem>
323
+ <Caption
324
+ text="Graphic"
325
+ />
326
+ </FlexItem>
327
+ <FlexItem>
328
+ <Title
329
+ size={3}
330
+ tag="h3"
331
+ text="937"
332
+ />
333
+ </FlexItem>
334
+ </Flex>
335
+ </FlexItem>
336
+
337
+ {/****** third number ******/}
338
+
339
+ <FlexItem>
340
+ <Flex
341
+ orientation="column"
342
+ vertical="center"
343
+ >
344
+ <FlexItem>
345
+ <Caption
346
+ text="UX/UI"
347
+ />
348
+ </FlexItem>
349
+ <FlexItem>
350
+ <Title
351
+ size={3}
352
+ tag="h3"
353
+ text="721"
354
+ />
355
+ </FlexItem>
356
+ </Flex>
357
+ </FlexItem>
358
+
359
+ {/****** fourth number ******/}
360
+
361
+ <FlexItem>
362
+ <Flex
363
+ orientation="column"
364
+ vertical="center"
365
+ >
366
+ <FlexItem>
367
+ <Caption
368
+ text="Product"
369
+ />
370
+ </FlexItem>
371
+ <FlexItem>
372
+ <Title
373
+ size={3}
374
+ tag="h3"
375
+ text="628"
376
+ />
377
+ </FlexItem>
378
+ </Flex>
379
+ </FlexItem>
380
+ </Flex>
381
+ </Card>
382
+
383
+ <Flex
384
+ orientation="column"
385
+ paddingBottom="md"
386
+ vertical="right"
387
+ >
388
+ <FlexItem>
389
+ <Button
390
+ onClick={() => alert('button clicked!')}
391
+ text="View full breakdown"
392
+ variant="link"
393
+ />
394
+ </FlexItem>
395
+ </Flex>
396
+
397
+ <Card>
398
+ <LineGraph
399
+ axisTitle="Total Registration"
400
+ chartData={data}
401
+ height="80%"
402
+ id="line-registration"
403
+ legend
404
+ title="Running Total"
405
+ xAxisCategories={['7 wks away', '6 wks away', '5 wks away', '4 wks away', '3 wks away', '2 wks away', '1 wk away', 'Start of Event']}
406
+ yAxisMin={0}
407
+ />
408
+ </Card>
409
+ </FlexItem>
410
+ <FlexItem fixedSize="40%">
411
+ <Card>
412
+ <BarGraph
413
+ axisTitle="Total Registered"
414
+ chartData={totalRegistered}
415
+ height="30%"
416
+ id="total-attendees"
417
+ xAxisCategories={['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF']}
418
+ yAxisMin={0}
419
+ />
420
+ <BarGraph
421
+ axisTitle="New Attendees"
422
+ chartData={newAttendees}
423
+ height="30%"
424
+ id="new-attendees"
425
+ xAxisCategories={['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF']}
426
+ yAxisMin={0}
427
+ />
428
+ <BarGraph
429
+ axisTitle="New Attendees"
430
+ chartData={newAttendees}
431
+ height="30%"
432
+ id="new-attendees"
433
+ xAxisCategories={['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF']}
434
+ yAxisMin={0}
435
+ />
436
+ <BarGraph
437
+ axisTitle="Repeating Attendees"
438
+ chartData={repeatingAttendees}
439
+ height="30%"
440
+ id="repeating-attendees"
441
+ xAxisCategories={['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF']}
442
+ yAxisMin={0}
443
+ />
444
+ <BarGraph
445
+ axisTitle="Graphic Designers"
446
+ chartData={graphicDesigners}
447
+ height="30%"
448
+ id="graphic-designers"
449
+ xAxisCategories={['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF']}
450
+ yAxisMin={0}
451
+ />
452
+ <BarGraph
453
+ axisTitle="UX/UI"
454
+ chartData={uxUi}
455
+ height="30%"
456
+ id="ux-ui"
457
+ xAxisCategories={['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF']}
458
+ yAxisMin={0}
459
+ />
460
+ <BarGraph
461
+ axisTitle="Product Designers"
462
+ chartData={productDesigners}
463
+ height="30%"
464
+ id="product-designers"
465
+ xAxisCategories={['\'17 LDN', '\'17 LA', '\'18 SF', '\'19 AMS', '\'20 TOR', '\'20 SF']}
466
+ yAxisMin={0}
467
+ />
468
+ </Card>
469
+ </FlexItem>
470
+ </Flex>
471
+ </Layout.Body>
472
+ </Layout>
473
+ </div>
474
+ )
475
+
476
+ export default Registration