playbook_ui 4.17.0.pre.alpha1 → 5.0.1.pre.alpha1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (322) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +2 -8
  3. data/app/helpers/playbook/pb_sample_helper.rb +1 -1
  4. data/app/pb_kits/playbook/_playbook.scss +4 -0
  5. data/app/pb_kits/playbook/data/menu.yml +6 -2
  6. data/app/pb_kits/playbook/index.js +2 -4
  7. data/app/pb_kits/playbook/packs/examples.js +6 -0
  8. data/app/pb_kits/playbook/packs/samples.js +4 -0
  9. data/app/pb_kits/playbook/packs/site_styles/docs/_markdown.scss +1 -1
  10. data/app/pb_kits/playbook/pb_avatar/_avatar.jsx +24 -15
  11. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_status.jsx +45 -0
  12. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +6 -5
  13. data/app/pb_kits/playbook/pb_avatar/docs/index.js +1 -0
  14. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.html.erb +33 -0
  15. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.jsx +81 -0
  16. data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss +63 -0
  17. data/app/pb_kits/playbook/pb_avatar_action_button/avatar_action_button.rb +44 -0
  18. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.html.erb +15 -0
  19. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.jsx +19 -0
  20. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.html.erb +8 -0
  21. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.jsx +13 -0
  22. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click.jsx +15 -0
  23. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_onclick.html.erb +14 -0
  24. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.html.erb +27 -0
  25. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.jsx +29 -0
  26. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb +11 -0
  27. data/app/pb_kits/playbook/pb_avatar_action_button/docs/example.yml +16 -0
  28. data/app/pb_kits/playbook/pb_avatar_action_button/docs/index.js +4 -0
  29. data/app/pb_kits/playbook/pb_badge/_badge.jsx +20 -14
  30. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx +8 -2
  31. data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +3 -0
  32. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.html.erb +15 -0
  33. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx +24 -0
  34. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +6 -4
  35. data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +1 -0
  36. data/app/pb_kits/playbook/pb_body/_body.jsx +2 -1
  37. data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx +4 -0
  38. data/app/pb_kits/playbook/pb_button/_button.jsx +2 -1
  39. data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx +6 -0
  40. data/app/pb_kits/playbook/pb_caption/_caption.jsx +35 -16
  41. data/app/pb_kits/playbook/pb_card/_card.html.erb +1 -1
  42. data/app/pb_kits/playbook/pb_card/_card.jsx +35 -38
  43. data/app/pb_kits/playbook/pb_card/_card.scss +1 -82
  44. data/app/pb_kits/playbook/pb_card/_card_mixin.scss +72 -0
  45. data/app/pb_kits/playbook/pb_card/card.rb +9 -3
  46. data/app/pb_kits/playbook/pb_card/card_body.rb +1 -5
  47. data/app/pb_kits/playbook/pb_card/card_header.rb +0 -3
  48. data/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb +2 -1
  49. data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx +17 -18
  50. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx +4 -1
  51. data/app/pb_kits/playbook/pb_contact/_contact.html.erb +16 -3
  52. data/app/pb_kits/playbook/pb_contact/_contact.jsx +58 -34
  53. data/app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb +1 -1
  54. data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx +1 -0
  55. data/app/pb_kits/playbook/pb_currency/_currency.html.erb +1 -0
  56. data/app/pb_kits/playbook/pb_currency/_currency.jsx +37 -21
  57. data/app/pb_kits/playbook/pb_currency/docs/_currency_dark.html.erb +3 -3
  58. data/app/pb_kits/playbook/pb_currency/docs/_currency_dark.jsx +2 -3
  59. data/app/pb_kits/playbook/pb_currency/docs/_currency_large.jsx +2 -3
  60. data/app/pb_kits/playbook/pb_currency/docs/_currency_medium.jsx +2 -2
  61. data/app/pb_kits/playbook/pb_currency/docs/_currency_small.html.erb +1 -1
  62. data/app/pb_kits/playbook/pb_currency/docs/_currency_small.jsx +5 -2
  63. data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx +2 -2
  64. data/app/pb_kits/playbook/pb_date/_date.jsx +39 -15
  65. data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +3 -1
  66. data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx +43 -37
  67. data/app/pb_kits/playbook/pb_date_range_inline/docs/_date_range_inline_default.jsx +2 -2
  68. data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx +6 -16
  69. data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx +21 -18
  70. data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.jsx +30 -33
  71. data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.jsx +10 -15
  72. data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx +8 -8
  73. data/app/pb_kits/playbook/pb_file_upload/_file_upload.jsx +13 -23
  74. data/app/pb_kits/playbook/pb_filter/Filter/FilterBackground.jsx +16 -14
  75. data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +0 -1
  76. data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.jsx +1 -1
  77. data/app/pb_kits/playbook/pb_filter/templates/_default.html.erb +2 -2
  78. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx +13 -12
  79. data/app/pb_kits/playbook/pb_flex/_flex.jsx +35 -20
  80. data/app/pb_kits/playbook/pb_flex/_flex_item.jsx +6 -9
  81. data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx +14 -19
  82. data/app/pb_kits/playbook/pb_hashtag/_hashtag.jsx +26 -22
  83. data/app/pb_kits/playbook/pb_highlight/_highlight.jsx +13 -12
  84. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx +85 -80
  85. data/app/pb_kits/playbook/pb_icon/_icon.jsx +54 -33
  86. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.jsx +13 -9
  87. data/app/pb_kits/playbook/pb_icon_value/_icon_value.jsx +16 -20
  88. data/app/pb_kits/playbook/pb_image/_image.jsx +12 -10
  89. data/app/pb_kits/playbook/pb_installer/_installer.html.erb +16 -0
  90. data/app/pb_kits/playbook/pb_installer/_installer.jsx +54 -0
  91. data/app/pb_kits/playbook/pb_installer/_installer.scss +7 -0
  92. data/app/pb_kits/playbook/pb_installer/docs/_installer_default.html.erb +8 -0
  93. data/app/pb_kits/playbook/pb_installer/docs/_installer_default.jsx +16 -0
  94. data/app/pb_kits/playbook/pb_installer/docs/example.yml +9 -0
  95. data/app/pb_kits/playbook/pb_installer/docs/index.js +1 -0
  96. data/app/pb_kits/playbook/pb_installer/installer.rb +18 -0
  97. data/app/pb_kits/playbook/pb_label_pill/_label_pill.jsx +15 -25
  98. data/app/pb_kits/playbook/pb_label_value/_label_value.html.erb +1 -0
  99. data/app/pb_kits/playbook/pb_label_value/_label_value.jsx +30 -18
  100. data/app/pb_kits/playbook/pb_layout/_body.html.erb +1 -1
  101. data/app/pb_kits/playbook/pb_layout/_column.html.erb +7 -0
  102. data/app/pb_kits/playbook/pb_layout/_layout.jsx +71 -47
  103. data/app/pb_kits/playbook/pb_layout/_layout.scss +130 -57
  104. data/app/pb_kits/playbook/pb_layout/body.rb +4 -0
  105. data/app/pb_kits/playbook/pb_layout/docs/_layout_collection.html.erb +54 -0
  106. data/app/pb_kits/playbook/pb_layout/docs/_layout_collection.jsx +27 -0
  107. data/app/pb_kits/playbook/pb_layout/docs/_layout_kanban.html.erb +140 -0
  108. data/app/pb_kits/playbook/pb_layout/docs/_layout_kanban.jsx +1234 -0
  109. data/app/pb_kits/playbook/pb_layout/docs/_layout_kanban_responsive.html.erb +57 -0
  110. data/app/pb_kits/playbook/pb_layout/docs/_layout_kanban_responsive.jsx +46 -0
  111. data/app/pb_kits/playbook/pb_layout/docs/example.yml +5 -0
  112. data/app/pb_kits/playbook/pb_layout/docs/index.js +3 -0
  113. data/app/pb_kits/playbook/pb_layout/layout.rb +19 -3
  114. data/app/pb_kits/playbook/pb_legend/_legend.jsx +17 -15
  115. data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx +8 -2
  116. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_nonclickable.html.erb +16 -0
  117. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_nonclickable.jsx +23 -0
  118. data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +5 -3
  119. data/app/pb_kits/playbook/pb_line_graph/docs/index.js +1 -0
  120. data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +3 -0
  121. data/app/pb_kits/playbook/pb_list/_item.html.erb +3 -2
  122. data/app/pb_kits/playbook/pb_list/_list.html.erb +3 -3
  123. data/app/pb_kits/playbook/pb_list/_list.jsx +75 -27
  124. data/app/pb_kits/playbook/pb_list/_list_item.jsx +41 -18
  125. data/app/pb_kits/playbook/pb_list/docs/_description.md +7 -1
  126. data/app/pb_kits/playbook/pb_list/docs/_list_borderless.jsx +21 -0
  127. data/app/pb_kits/playbook/pb_list/docs/_list_dark.jsx +0 -5
  128. data/app/pb_kits/playbook/pb_list/docs/_list_dark_borderless.jsx +22 -0
  129. data/app/pb_kits/playbook/pb_list/docs/_list_dark_lg.jsx +22 -0
  130. data/app/pb_kits/playbook/pb_list/docs/_list_dark_ordered.jsx +22 -0
  131. data/app/pb_kits/playbook/pb_list/docs/_list_dark_xpadding.jsx +22 -0
  132. data/app/pb_kits/playbook/pb_list/docs/_list_layout_left.html.erb +8 -0
  133. data/app/pb_kits/playbook/pb_list/docs/_list_layout_left.jsx +75 -0
  134. data/app/pb_kits/playbook/pb_list/docs/_list_layout_right.html.erb +8 -0
  135. data/app/pb_kits/playbook/pb_list/docs/_list_layout_right.jsx +75 -0
  136. data/app/pb_kits/playbook/pb_list/docs/_list_lg.jsx +21 -0
  137. data/app/pb_kits/playbook/pb_list/docs/_list_ordered.jsx +21 -0
  138. data/app/pb_kits/playbook/pb_list/docs/_list_xpadding.jsx +21 -0
  139. data/app/pb_kits/playbook/pb_list/docs/example.yml +14 -1
  140. data/app/pb_kits/playbook/pb_list/docs/index.js +11 -0
  141. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.jsx +21 -19
  142. data/app/pb_kits/playbook/pb_logistic/_logistic.html.erb +1 -0
  143. data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +26 -11
  144. data/app/pb_kits/playbook/pb_message/_message.html.erb +1 -0
  145. data/app/pb_kits/playbook/pb_message/_message.jsx +33 -11
  146. data/app/pb_kits/playbook/pb_message/docs/_message_default.jsx +1 -2
  147. data/app/pb_kits/playbook/pb_message/message.rb +1 -1
  148. data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx +10 -10
  149. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.jsx +7 -19
  150. data/app/pb_kits/playbook/pb_nav/_nav.jsx +17 -14
  151. data/app/pb_kits/playbook/pb_online_status/_online_status.jsx +5 -13
  152. data/app/pb_kits/playbook/pb_person/_person.html.erb +9 -2
  153. data/app/pb_kits/playbook/pb_person/_person.jsx +36 -18
  154. data/app/pb_kits/playbook/pb_person/docs/_person_default.html.erb +5 -1
  155. data/app/pb_kits/playbook/pb_person_contact/_person_contact.html.erb +1 -0
  156. data/app/pb_kits/playbook/pb_person_contact/_person_contact.jsx +73 -21
  157. data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.jsx +32 -0
  158. data/app/pb_kits/playbook/pb_person_contact/docs/example.yml +2 -0
  159. data/app/pb_kits/playbook/pb_person_contact/docs/index.js +1 -0
  160. data/app/pb_kits/playbook/pb_pill/_pill.jsx +5 -10
  161. data/app/pb_kits/playbook/pb_popover/_popover.html.erb +4 -4
  162. data/app/pb_kits/playbook/pb_popover/_popover.jsx +87 -43
  163. data/app/pb_kits/playbook/pb_popover/_popover.scss +41 -2
  164. data/app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb +42 -0
  165. data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx +99 -0
  166. data/app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb +19 -7
  167. data/app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx +22 -6
  168. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb +11 -10
  169. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx +22 -18
  170. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.md +1 -0
  171. data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.html.erb +24 -0
  172. data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.jsx +56 -0
  173. data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.html.erb +14 -0
  174. data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx +50 -0
  175. data/app/pb_kits/playbook/pb_popover/docs/example.yml +12 -8
  176. data/app/pb_kits/playbook/pb_popover/docs/index.js +3 -3
  177. data/app/pb_kits/playbook/pb_popover/index.js +13 -9
  178. data/app/pb_kits/playbook/pb_popover/popover.rb +26 -2
  179. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.html.erb +1 -0
  180. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.jsx +41 -13
  181. data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.jsx +15 -12
  182. data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx +17 -10
  183. data/app/pb_kits/playbook/pb_radio/_radio.jsx +3 -1
  184. data/app/pb_kits/playbook/pb_section_separator/_section_separator.html.erb +1 -0
  185. data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx +30 -15
  186. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx +3 -1
  187. data/app/pb_kits/playbook/pb_select/_select.jsx +4 -2
  188. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx +12 -7
  189. data/app/pb_kits/playbook/pb_stat_change/_stat_change.jsx +14 -13
  190. data/app/pb_kits/playbook/pb_stat_value/_stat_value.jsx +2 -1
  191. data/app/pb_kits/playbook/pb_table/_table.jsx +29 -28
  192. data/app/pb_kits/playbook/pb_table/_table.scss +1 -1
  193. data/app/pb_kits/playbook/pb_table/_table_row.jsx +6 -7
  194. data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.html.erb +52 -8
  195. data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.jsx +52 -8
  196. data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.md +3 -1
  197. data/app/pb_kits/playbook/pb_text_input/_text_input.jsx +3 -5
  198. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +1 -1
  199. data/app/pb_kits/playbook/pb_textarea/_textarea.jsx +2 -1
  200. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx +38 -18
  201. data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx +12 -11
  202. data/app/pb_kits/playbook/pb_timeline/_item.html.erb +28 -0
  203. data/app/pb_kits/playbook/pb_timeline/_item.jsx +54 -0
  204. data/app/pb_kits/playbook/pb_timeline/_timeline.html.erb +6 -0
  205. data/app/pb_kits/playbook/pb_timeline/_timeline.jsx +43 -0
  206. data/app/pb_kits/playbook/pb_timeline/_timeline.scss +271 -0
  207. data/app/pb_kits/playbook/pb_timeline/docs/_description.md +3 -0
  208. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_default.html.erb +43 -0
  209. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_default.jsx +73 -0
  210. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.html.erb +43 -0
  211. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_vertical.jsx +73 -0
  212. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.html.erb +44 -0
  213. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_date.jsx +85 -0
  214. data/app/pb_kits/playbook/pb_timeline/docs/example.yml +13 -0
  215. data/app/pb_kits/playbook/pb_timeline/docs/index.js +3 -0
  216. data/app/pb_kits/playbook/pb_timeline/item.rb +25 -0
  217. data/app/pb_kits/playbook/pb_timeline/timeline.rb +27 -0
  218. data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx +7 -14
  219. data/app/pb_kits/playbook/pb_title/_title.html.erb +1 -0
  220. data/app/pb_kits/playbook/pb_title/_title.jsx +24 -18
  221. data/app/pb_kits/playbook/pb_title/docs/_title_light.html.erb +1 -1
  222. data/app/pb_kits/playbook/pb_title_count/_title_count.jsx +49 -28
  223. data/app/pb_kits/playbook/pb_title_count/docs/_title_count_align.jsx +31 -0
  224. data/app/pb_kits/playbook/pb_title_count/docs/_title_count_default.jsx +13 -2
  225. data/app/pb_kits/playbook/pb_title_count/docs/example.yml +4 -5
  226. data/app/pb_kits/playbook/pb_title_count/docs/index.js +1 -0
  227. data/app/pb_kits/playbook/pb_title_detail/_title_detail.jsx +7 -18
  228. data/app/pb_kits/playbook/pb_toggle/_toggle.jsx +9 -11
  229. data/app/pb_kits/playbook/pb_user/_user.jsx +37 -37
  230. data/app/pb_kits/playbook/pb_user_badge/_user_badge.jsx +7 -7
  231. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx +32 -30
  232. data/app/pb_kits/playbook/plugins/pb_chart.js +8 -2
  233. data/app/pb_kits/playbook/props.rb +55 -0
  234. data/app/pb_kits/playbook/tokens/_spacing.scss +1 -0
  235. data/app/pb_kits/playbook/utilities/_spacing.scss +42 -0
  236. data/app/pb_kits/playbook/utilities/spacing.js +33 -0
  237. data/app/views/layouts/playbook/application.html.slim +2 -3
  238. data/app/views/layouts/playbook/fullscreen.html.slim +2 -2
  239. data/app/views/layouts/playbook/grid.html.slim +2 -2
  240. data/app/views/layouts/playbook/samples.html.erb +2 -4
  241. data/app/views/playbook/samples/dashboards/index.html.erb +3 -1
  242. data/app/views/playbook/samples/filter_table/index.html.erb +348 -0
  243. data/app/views/playbook/samples/filter_table/index.jsx +433 -0
  244. data/app/views/playbook/samples/registration/index.html.erb +316 -0
  245. data/app/views/playbook/samples/registration/index.jsx +476 -0
  246. data/lib/playbook/version.rb +1 -1
  247. data/lib/tasks/pb_release.rake +0 -2
  248. metadata +81 -76
  249. data/app/pb_kits/playbook/packs/kits/pb_avatar.js +0 -1
  250. data/app/pb_kits/playbook/packs/kits/pb_badge.js +0 -1
  251. data/app/pb_kits/playbook/packs/kits/pb_bar_graph.js +0 -1
  252. data/app/pb_kits/playbook/packs/kits/pb_body.js +0 -1
  253. data/app/pb_kits/playbook/packs/kits/pb_button.js +0 -1
  254. data/app/pb_kits/playbook/packs/kits/pb_caption.js +0 -1
  255. data/app/pb_kits/playbook/packs/kits/pb_card.js +0 -1
  256. data/app/pb_kits/playbook/packs/kits/pb_checkbox.js +0 -1
  257. data/app/pb_kits/playbook/packs/kits/pb_circle_icon_button.js +0 -1
  258. data/app/pb_kits/playbook/packs/kits/pb_contact.js +0 -1
  259. data/app/pb_kits/playbook/packs/kits/pb_currency.js +0 -1
  260. data/app/pb_kits/playbook/packs/kits/pb_dashboard_value.js +0 -1
  261. data/app/pb_kits/playbook/packs/kits/pb_date.js +0 -2
  262. data/app/pb_kits/playbook/packs/kits/pb_date_range_inline.js +0 -1
  263. data/app/pb_kits/playbook/packs/kits/pb_date_range_stacked.js +0 -1
  264. data/app/pb_kits/playbook/packs/kits/pb_date_stacked.js +0 -1
  265. data/app/pb_kits/playbook/packs/kits/pb_date_year_stacked.js +0 -2
  266. data/app/pb_kits/playbook/packs/kits/pb_distribution_bar.js +0 -2
  267. data/app/pb_kits/playbook/packs/kits/pb_fixed_confirmation_toast.js +0 -2
  268. data/app/pb_kits/playbook/packs/kits/pb_flex.js +0 -1
  269. data/app/pb_kits/playbook/packs/kits/pb_form_pill.js +0 -1
  270. data/app/pb_kits/playbook/packs/kits/pb_hashtag.js +0 -2
  271. data/app/pb_kits/playbook/packs/kits/pb_highlight.js +0 -2
  272. data/app/pb_kits/playbook/packs/kits/pb_home_address_street.js +0 -2
  273. data/app/pb_kits/playbook/packs/kits/pb_icon.js +0 -2
  274. data/app/pb_kits/playbook/packs/kits/pb_icon_circle.js +0 -2
  275. data/app/pb_kits/playbook/packs/kits/pb_icon_value.js +0 -2
  276. data/app/pb_kits/playbook/packs/kits/pb_image.js +0 -1
  277. data/app/pb_kits/playbook/packs/kits/pb_label_pill.js +0 -2
  278. data/app/pb_kits/playbook/packs/kits/pb_label_value.js +0 -2
  279. data/app/pb_kits/playbook/packs/kits/pb_layout.js +0 -2
  280. data/app/pb_kits/playbook/packs/kits/pb_legend.js +0 -2
  281. data/app/pb_kits/playbook/packs/kits/pb_line_graph.js +0 -1
  282. data/app/pb_kits/playbook/packs/kits/pb_list.js +0 -2
  283. data/app/pb_kits/playbook/packs/kits/pb_loading_inline.js +0 -2
  284. data/app/pb_kits/playbook/packs/kits/pb_message.js +0 -2
  285. data/app/pb_kits/playbook/packs/kits/pb_multiple_users.js +0 -2
  286. data/app/pb_kits/playbook/packs/kits/pb_multiple_users_stacked.js +0 -2
  287. data/app/pb_kits/playbook/packs/kits/pb_nav.js +0 -1
  288. data/app/pb_kits/playbook/packs/kits/pb_online_status.js +0 -2
  289. data/app/pb_kits/playbook/packs/kits/pb_person.js +0 -2
  290. data/app/pb_kits/playbook/packs/kits/pb_person_contact.js +0 -2
  291. data/app/pb_kits/playbook/packs/kits/pb_pill.js +0 -2
  292. data/app/pb_kits/playbook/packs/kits/pb_popover.js +0 -1
  293. data/app/pb_kits/playbook/packs/kits/pb_progress_pills.js +0 -2
  294. data/app/pb_kits/playbook/packs/kits/pb_progress_simple.js +0 -2
  295. data/app/pb_kits/playbook/packs/kits/pb_progress_step.js +0 -2
  296. data/app/pb_kits/playbook/packs/kits/pb_radio.js +0 -2
  297. data/app/pb_kits/playbook/packs/kits/pb_section_separator.js +0 -2
  298. data/app/pb_kits/playbook/packs/kits/pb_select.js +0 -2
  299. data/app/pb_kits/playbook/packs/kits/pb_selectable_card.js +0 -2
  300. data/app/pb_kits/playbook/packs/kits/pb_source.js +0 -2
  301. data/app/pb_kits/playbook/packs/kits/pb_star_rating.js +0 -2
  302. data/app/pb_kits/playbook/packs/kits/pb_stat_change.js +0 -2
  303. data/app/pb_kits/playbook/packs/kits/pb_stat_value.js +0 -2
  304. data/app/pb_kits/playbook/packs/kits/pb_table.js +0 -1
  305. data/app/pb_kits/playbook/packs/kits/pb_text_input.js +0 -1
  306. data/app/pb_kits/playbook/packs/kits/pb_textarea.js +0 -2
  307. data/app/pb_kits/playbook/packs/kits/pb_time.js +0 -2
  308. data/app/pb_kits/playbook/packs/kits/pb_timestamp.js +0 -2
  309. data/app/pb_kits/playbook/packs/kits/pb_title.js +0 -1
  310. data/app/pb_kits/playbook/packs/kits/pb_title_count.js +0 -2
  311. data/app/pb_kits/playbook/packs/kits/pb_title_detail.js +0 -2
  312. data/app/pb_kits/playbook/packs/kits/pb_toggle.js +0 -2
  313. data/app/pb_kits/playbook/packs/kits/pb_user.js +0 -2
  314. data/app/pb_kits/playbook/packs/kits/pb_user_badge.js +0 -2
  315. data/app/pb_kits/playbook/pb_popover/docs/_popover_click_any.html.erb +0 -19
  316. data/app/pb_kits/playbook/pb_popover/docs/_popover_click_any.jsx +0 -40
  317. data/app/pb_kits/playbook/pb_popover/docs/_popover_click_inside.html.erb +0 -14
  318. data/app/pb_kits/playbook/pb_popover/docs/_popover_click_inside.jsx +0 -40
  319. data/app/pb_kits/playbook/pb_popover/docs/_popover_click_outside.html.erb +0 -14
  320. data/app/pb_kits/playbook/pb_popover/docs/_popover_click_outside.jsx +0 -40
  321. data/app/pb_kits/playbook/pb_popover/docs/_popover_with_button.jsx +0 -34
  322. data/app/pb_kits/playbook/pb_popover/docs/_popover_with_circle.html.erb +0 -5
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: ca51dc32d53a72d5c123069a7e04a6ef47932186205e12045d43c821176dfcc9
4
- data.tar.gz: bf975204f5af8b96cce1a49bdd3c0017e52b5abd355367fa1f821f1e42cba194
3
+ metadata.gz: ab4ad6868b6ed8d7bd5936f55937a33e021fcd692defb24f47bb7ff0165a1439
4
+ data.tar.gz: 15d6f890139e5daa816ecf23b52b2b02991e2acde40f24548dad74693c4bba5d
5
5
  SHA512:
6
- metadata.gz: a41e5ae5f1b4cd9837989b7c38afffa70fdd0a7c7fa3abc711f705adebe9ebc0848ec1b55012657c29f35cbf8e5f837e7124c3b2ed1d6333995e6a4eea5ffab0
7
- data.tar.gz: c340a6d38c692fe2978a282694cc1d157f142f705b1e433d487cf4fea209a159b3410571f9ddab7b99bbfb9b00061fd0e1220f3d3ac81b97f1f175aa82c404ff
6
+ metadata.gz: 21137e860a492ef2cd233be67b243c0e9cfbcb3fde138bb6fd0c00d60343ebd7a748c1c9e2dc6e726cd016dc122ff16c8f1b9a6adc278edd2c7518194063f9e1
7
+ data.tar.gz: c00d5ba405ac446ed183f6910508b3dfbaad7710b024f70dd9d1f3c75294bd9fe5a10f82a54447892f92586a5e7165acc67ab5fc2f40b2212eecc475f7075cc5
data/README.md CHANGED
@@ -9,16 +9,10 @@ Playbook is the first design system built for both Rails & React interfaces. Ins
9
9
 
10
10
  ## Getting started
11
11
 
12
- 1. `$ npm install playbook-ui`
13
- 1. Import styles `@import '~playbook-ui/dist/playbook.css';`
14
-
15
-
16
- ## Contribute
17
-
18
- 1. Run `yarn && bundle`
12
+ 1. Run `make install`
19
13
  1. Run `make start`
20
14
  1. Install overcommit hooks `bin/overcommit`
21
- 1. open [http://localhost:8080](http://localhost:8080)
15
+ 1. open [http://localhost:8089](http://localhost:8089)
22
16
 
23
17
  To clean up this project from your local machine, run `make stop`, which will drop all containers and networks associated with this project. To purge all resources, do `make clean`, which also removes images and volumes for a blank slate.
24
18
 
@@ -49,7 +49,7 @@ module Playbook
49
49
  if type == "rails"
50
50
  render template: "playbook/samples/#{sample}/index.html.erb"
51
51
  elsif type == "react"
52
- react_component(sample.titleize.to_s)
52
+ react_component(sample.titleize.delete(" ").to_s)
53
53
  end
54
54
  end
55
55
  end
@@ -4,6 +4,7 @@
4
4
  @import "pb_card/card";
5
5
  @import "pb_title/title";
6
6
  @import 'pb_avatar/avatar';
7
+ @import 'pb_avatar_action_button/avatar_action_button';
7
8
  @import 'pb_badge/badge';
8
9
  @import 'pb_bar_graph/bar_graph';
9
10
  @import 'pb_checkbox/checkbox';
@@ -32,6 +33,7 @@
32
33
  @import 'pb_icon_circle/icon_circle';
33
34
  @import 'pb_icon_value/icon_value';
34
35
  @import 'pb_image/image';
36
+ @import 'pb_installer/installer';
35
37
  @import 'pb_label_pill/label_pill';
36
38
  @import 'pb_label_value/label_value';
37
39
  @import 'pb_layout/layout';
@@ -66,6 +68,7 @@
66
68
  @import 'pb_text_input/text_input';
67
69
  @import 'pb_textarea/textarea';
68
70
  @import 'pb_time/time';
71
+ @import 'pb_timeline/timeline';
69
72
  @import 'pb_time_range_inline/time_range_inline';
70
73
  @import 'pb_timestamp/timestamp';
71
74
  @import 'pb_title_count/title_count';
@@ -77,3 +80,4 @@
77
80
  @import 'pb_user_badge/user_badge';
78
81
  @import 'pb_time_stacked/time_stacked';
79
82
  @import 'pb_weekday_stacked/weekday_stacked';
83
+ @import './utilities/spacing';
@@ -1,8 +1,11 @@
1
1
  samples:
2
2
  - dashboards
3
- - something
3
+ - registration
4
+ - filter_table
5
+
4
6
  kits:
5
7
  - avatar
8
+ - avatar_action_button
6
9
  - badge
7
10
  - buttons:
8
11
  - button
@@ -38,6 +41,7 @@ kits:
38
41
  - icon_circle
39
42
  - icon_value
40
43
  - image
44
+ - installer
41
45
  - layout
42
46
  - list
43
47
  - loading_inline
@@ -56,6 +60,7 @@ kits:
56
60
  - star_rating
57
61
  - stat_change
58
62
  - table
63
+ - timeline
59
64
  - tooltip
60
65
  - typography:
61
66
  - body
@@ -86,4 +91,3 @@ kits:
86
91
  - title_detail
87
92
  - weekday_stacked
88
93
  - user
89
- - user_badge
@@ -1,9 +1,6 @@
1
- import './_playbook.scss'
2
- import 'lazysizes/plugins/attrchange/ls.attrchange'
3
- import 'lazysizes'
4
-
5
1
  // React Component JSX Imports from the React Kits
6
2
  export Avatar from './pb_avatar/_avatar.jsx'
3
+ export AvatarActionButton from './pb_avatar_action_button/_avatar_action_button.jsx'
7
4
  export Badge from './pb_badge/_badge.jsx'
8
5
  export BarGraph from './pb_bar_graph/_bar_graph.jsx'
9
6
  export Body from './pb_body/_body.jsx'
@@ -73,6 +70,7 @@ export TableRow from './pb_table/_table_row.jsx'
73
70
  export Textarea from './pb_textarea/_textarea.jsx'
74
71
  export TextInput from './pb_text_input/_text_input.jsx'
75
72
  export Time from './pb_time/_time.jsx'
73
+ export Timeline from './pb_timeline/_timeline.jsx'
76
74
  export TimeStacked from './pb_time_stacked/_time_stacked.jsx'
77
75
  export Timestamp from './pb_timestamp/_timestamp.jsx'
78
76
  export TimeRangeInline from './pb_time_range_inline/_time_range_inline.jsx'
@@ -14,6 +14,7 @@ import WebpackerReact from 'webpacker-react'
14
14
 
15
15
  import '../pb_form/pb_form_validation'
16
16
  import * as Avatar from 'pb_avatar/docs'
17
+ import * as AvatarActionButton from 'pb_avatar_action_button/docs'
17
18
  import * as Badge from 'pb_badge/docs'
18
19
  import * as BarGraph from 'pb_bar_graph/docs'
19
20
  import * as Body from 'pb_body/docs'
@@ -44,6 +45,7 @@ import * as Icon from 'pb_icon/docs'
44
45
  import * as IconCircle from 'pb_icon_circle/docs'
45
46
  import * as IconValue from 'pb_icon_value/docs'
46
47
  import * as Image from 'pb_image/docs'
48
+ import * as Installer from 'pb_installer/docs'
47
49
  import * as LabelPill from 'pb_label_pill/docs'
48
50
  import * as LabelValue from 'pb_label_value/docs'
49
51
  import * as Layout from 'pb_layout/docs'
@@ -78,6 +80,7 @@ import * as Table from 'pb_table/docs'
78
80
  import * as Textarea from 'pb_textarea/docs'
79
81
  import * as TextInput from 'pb_text_input/docs'
80
82
  import * as Time from 'pb_time/docs'
83
+ import * as Timeline from 'pb_timeline/docs'
81
84
  import * as TimeStacked from 'pb_time_stacked/docs'
82
85
  import * as Timestamp from 'pb_timestamp/docs'
83
86
  import * as TimeRangeInline from 'pb_time_range_inline/docs'
@@ -91,6 +94,7 @@ import * as WeekdayStacked from 'pb_weekday_stacked/docs'
91
94
 
92
95
  WebpackerReact.setup({
93
96
  ...Avatar,
97
+ ...AvatarActionButton,
94
98
  ...Badge,
95
99
  ...BarGraph,
96
100
  ...Body,
@@ -121,6 +125,7 @@ WebpackerReact.setup({
121
125
  ...IconCircle,
122
126
  ...IconValue,
123
127
  ...Image,
128
+ ...Installer,
124
129
  ...LabelPill,
125
130
  ...LabelValue,
126
131
  ...Layout,
@@ -155,6 +160,7 @@ WebpackerReact.setup({
155
160
  ...Textarea,
156
161
  ...TextInput,
157
162
  ...Time,
163
+ ...Timeline,
158
164
  ...TimeStacked,
159
165
  ...Timestamp,
160
166
  ...TimeRangeInline,
@@ -12,4 +12,8 @@ import WebpackerReact from 'webpacker-react'
12
12
 
13
13
  import Dashboards from '../../../views/playbook/samples/dashboards/index.jsx'
14
14
 
15
+ import Registration from '../../../views/playbook/samples/registration/index.jsx'
16
+
15
17
  WebpackerReact.setup({ Dashboards })
18
+ WebpackerReact.setup({ FilterTable })
19
+ WebpackerReact.setup({ Registration })
@@ -37,7 +37,7 @@
37
37
  background: #122b3b;
38
38
  color: #faf6e4;
39
39
  padding: 0.1rem 0.3rem;
40
- margin: 1rem 5px;
40
+ margin: 0 5px;
41
41
  box-shadow: 0 2px 10px $shadow;
42
42
  border-radius: 0.25rem;
43
43
  overflow: hidden;
@@ -4,34 +4,43 @@ import React from 'react'
4
4
  import classnames from 'classnames'
5
5
  import { map } from 'lodash'
6
6
 
7
+ import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
8
+ import { spacing } from '../utilities/spacing.js'
9
+
7
10
  import { Image } from '../'
8
11
 
9
12
  type AvatarProps = {
13
+ aria?: object,
10
14
  className?: String,
11
- name: String,
15
+ data?: object,
16
+ id?: String,
12
17
  imageUrl: String,
13
- size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
14
- status: 'online' | 'away',
18
+ name: String,
19
+ size?: "md" | "lg" | "sm" | "xl" | "xs",
20
+ status: "away" | "offline" | "online",
15
21
  }
16
22
 
17
- const firstTwoInitials = (name) => (
23
+ const firstTwoInitials = (name) =>
18
24
  map(name.split(/\s/), (name) => name[0])
19
25
  .join('')
20
26
  .substring(0, 2)
21
- )
22
-
23
- const Avatar = ({
24
- className,
25
- name = null,
26
- imageUrl,
27
- size = 'md',
28
- status = null,
29
- }: AvatarProps) => {
30
- const classes = classnames(['pb_avatar_kit', `avatar_${size}`, className])
27
+
28
+ const Avatar = (props: AvatarProps) => {
29
+ const { aria = {}, className, data = {}, name = null, id = id, imageUrl, size = 'md', status = null } = props
30
+ const dataProps = buildDataProps(data)
31
+ const ariaProps = buildAriaProps(aria)
32
+ const classes = classnames(buildCss('pb_avatar_kit', size), className, spacing(props))
33
+
31
34
  const initials = name && firstTwoInitials(name)
35
+ dataProps['data-initials'] = initials
32
36
 
33
37
  return (
34
- <div className={classes}>
38
+ <div
39
+ {...ariaProps}
40
+ {...dataProps}
41
+ className={classes}
42
+ id={id}
43
+ >
35
44
  <div
36
45
  className="avatar_wrapper"
37
46
  data-initials={initials}
@@ -0,0 +1,45 @@
1
+ import React from 'react'
2
+ import { Avatar } from '../../'
3
+
4
+ const AvatarStatus = () => {
5
+ return (
6
+ <>
7
+ <Avatar
8
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
9
+ name="Terry Johnson"
10
+ size="sm"
11
+ />
12
+
13
+ <br />
14
+
15
+ <Avatar
16
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
17
+ name="Terry Johnson"
18
+ size="sm"
19
+ status="online"
20
+ />
21
+
22
+ <br />
23
+
24
+ <Avatar
25
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
26
+ name="Terry Johnson"
27
+ size="sm"
28
+ status="away"
29
+ />
30
+
31
+ <br />
32
+
33
+ <Avatar
34
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
35
+ name="Terry Johnson"
36
+ size="sm"
37
+ status="offline"
38
+ />
39
+
40
+ <br />
41
+ </>
42
+ )
43
+ }
44
+
45
+ export default AvatarStatus
@@ -1,8 +1,9 @@
1
1
  examples:
2
2
  rails:
3
- - avatar_default: Default
4
- - avatar_monogram: Monogram
5
- - avatar_status: Status
3
+ - avatar_default: Default
4
+ - avatar_monogram: Monogram
5
+ - avatar_status: Status
6
6
  react:
7
- - avatar_default: Default
8
- - avatar_monogram: Monogram
7
+ - avatar_default: Default
8
+ - avatar_monogram: Monogram
9
+ - avatar_status: Status
@@ -1,2 +1,3 @@
1
1
  export { default as AvatarDefault } from './_avatar_default.jsx'
2
2
  export { default as AvatarMonogram } from './_avatar_monogram.jsx'
3
+ export { default as AvatarStatus } from './_avatar_status.jsx'
@@ -0,0 +1,33 @@
1
+ <%= content_tag(:div,
2
+ aria: object.aria,
3
+ id: object.id,
4
+ data: object.data,
5
+ class: object.classname) do %>
6
+
7
+
8
+ <% if object.tooltip_text.present? %>
9
+ <%= pb_rails("tooltip", props: {
10
+ trigger_element_id: object.tooltip_id,
11
+ tooltip_id: "tooltip-2",
12
+ position: 'top',
13
+ dark: true,
14
+ }) do %>
15
+ <%= object.tooltip_text %>
16
+ <% end %>
17
+ <% end %>
18
+
19
+ <%= link_to object.link_url, id: object.tooltip_id do %>
20
+
21
+ <%= pb_rails("avatar", props: {
22
+ name: object.name,
23
+ size: object.size,
24
+ image_url: object.image_url,
25
+ class: "avatar_action"
26
+ }) %>
27
+ <div class="icon">
28
+ <%= pb_rails("icon", props: {
29
+ icon: object.action_icons
30
+ }) %>
31
+ </div>
32
+ <% end %>
33
+ <% end %>
@@ -0,0 +1,81 @@
1
+ /* @flow */
2
+
3
+ import React from 'react'
4
+ import classnames from 'classnames'
5
+ import { Avatar, Icon } from '../'
6
+
7
+ import {
8
+ buildAriaProps,
9
+ buildCss,
10
+ buildDataProps,
11
+ } from '../utilities/props'
12
+
13
+ type AvatarActionButtonProps = {
14
+ action?: String,
15
+ aria: Object,
16
+ className?: String,
17
+ data?: Object,
18
+ id?: String,
19
+ imageUrl?: String,
20
+ linkUrl?: String,
21
+ name?: String,
22
+ onClick?: String,
23
+ placement?: String,
24
+ size?: String,
25
+ }
26
+
27
+ const AvatarActionButton = ({
28
+ action = 'add',
29
+ aria = {},
30
+ className,
31
+ data = {},
32
+ id,
33
+ imageUrl,
34
+ linkUrl,
35
+ name,
36
+ onClick,
37
+ placement = 'bottom left',
38
+ size = 'md',
39
+ }: AvatarActionButtonProps) => {
40
+ const ariaProps = buildAriaProps(aria)
41
+ const dataProps = buildDataProps(data)
42
+
43
+ const css = buildCss({
44
+ 'pb_avatar_action_button_kit': true,
45
+ [action]: true,
46
+ [placement]: true,
47
+ [size]: true,
48
+ })
49
+
50
+ const icons = {
51
+ add: 'plus-circle',
52
+ remove: 'times-circle',
53
+ }
54
+
55
+ return (
56
+ <div
57
+ {...ariaProps}
58
+ {...dataProps}
59
+ className={classnames(css, className)}
60
+ id={id}
61
+ >
62
+ <a
63
+ href={linkUrl}
64
+ onClick={onClick}
65
+ >
66
+ <Avatar
67
+ imageUrl={imageUrl}
68
+ name={name}
69
+ size={size}
70
+ />
71
+ <div className="icon">
72
+ <Icon
73
+ icon={icons[action]}
74
+ />
75
+ </div>
76
+ </a>
77
+ </div>
78
+ )
79
+ }
80
+
81
+ export default AvatarActionButton
@@ -0,0 +1,63 @@
1
+ [class^=pb_avatar_action_button_kit] {
2
+
3
+ $icon_size: 0px;
4
+ $border_size: 0px;
5
+
6
+ $action-colors: (
7
+ "add": $primary,
8
+ "remove": $error,
9
+ );
10
+
11
+ @each $key, $value in $action-colors {
12
+ &[class*=_#{$key}] a {
13
+ color: $value;
14
+ }
15
+ }
16
+
17
+ @mixin icon-base {
18
+ width: $icon_size;
19
+ height: $icon_size;
20
+ position: absolute;
21
+ background-color: $white;
22
+ border-radius: $icon_size;
23
+ font-size: ($icon_size - $border_size * 2);
24
+ display: flex;
25
+ justify-content: center;
26
+ align-items: center;
27
+ z-index: 1;
28
+ }
29
+
30
+ @each $name, $size in $avatar-sizes {
31
+
32
+ &[class*=_#{$name}] {
33
+
34
+ $avatar_size: map-get($avatar-sizes, $name);
35
+ $icon_size: $avatar_size / 2;
36
+ $border_size: $icon_size / 10;
37
+
38
+ position: relative;
39
+ width: $avatar_size * 1.25;
40
+ height: $avatar_size * 1.1;
41
+ display: flex;
42
+
43
+ [class^=pb_tooltip_kit] {
44
+ justify-self: center;
45
+ }
46
+
47
+ &[class*=_bottom] .icon {
48
+ @include icon-base;
49
+ top: $icon_size * 1.27;
50
+ }
51
+ &[class*=_top] .icon {
52
+ @include icon-base;
53
+ bottom: $icon_size * 1.27;
54
+ }
55
+ &[class*=_right] .icon {
56
+ left: $icon_size * 1.5;
57
+ }
58
+ &[class*=_left] [class^=pb_avatar_kit] {
59
+ padding-left: $icon_size / 2;
60
+ }
61
+ }
62
+ }
63
+ }