playbook_ui 7.0.0.pre.alpha9 → 7.0.1.pre.alpha5

Sign up to get free protection for your applications and to get access to all the features.
Files changed (259) hide show
  1. checksums.yaml +4 -4
  2. data/app/controllers/playbook/application_controller.rb +4 -0
  3. data/app/controllers/playbook/guides_controller.rb +11 -0
  4. data/app/controllers/playbook/pages_controller.rb +90 -0
  5. data/app/controllers/playbook/samples_controller.rb +40 -0
  6. data/app/helpers/playbook/application_helper.rb +19 -0
  7. data/app/helpers/playbook/pb_doc_helper.rb +1 -0
  8. data/app/helpers/playbook/pb_kit_helper.rb +18 -3
  9. data/app/pb_kits/playbook/_playbook.scss +0 -1
  10. data/app/pb_kits/playbook/config/_kit_example.html.erb +3 -3
  11. data/app/pb_kits/playbook/config/_kit_ui.html.erb +2 -1
  12. data/app/pb_kits/playbook/config/_pb_kit_api.html.erb +10 -12
  13. data/app/pb_kits/playbook/index.js +0 -4
  14. data/app/pb_kits/playbook/packs/application.js +55 -0
  15. data/app/pb_kits/playbook/packs/examples.js +175 -0
  16. data/app/pb_kits/playbook/packs/main.scss +12 -0
  17. data/app/pb_kits/playbook/packs/samples.js +21 -0
  18. data/app/pb_kits/playbook/packs/site_styles/_samples.scss +72 -0
  19. data/app/pb_kits/playbook/packs/site_styles/_scaffold.scss +43 -0
  20. data/app/pb_kits/playbook/packs/site_styles/_site-style.scss +146 -0
  21. data/app/pb_kits/playbook/packs/site_styles/docs/_all.scss +10 -0
  22. data/app/pb_kits/playbook/packs/site_styles/docs/_bg_light_doc_example.scss +7 -0
  23. data/app/pb_kits/playbook/packs/site_styles/docs/_code_snippet.scss +531 -0
  24. data/app/pb_kits/playbook/packs/site_styles/docs/_color_utilities.scss +92 -0
  25. data/app/pb_kits/playbook/packs/site_styles/docs/_flex_examples.scss +15 -0
  26. data/app/pb_kits/playbook/packs/site_styles/docs/_kit_doc.scss +133 -0
  27. data/app/pb_kits/playbook/packs/site_styles/docs/_kits_examples.scss +15 -0
  28. data/app/pb_kits/playbook/packs/site_styles/docs/_markdown.scss +88 -0
  29. data/app/pb_kits/playbook/packs/site_styles/docs/_spacing_tokens.scss +72 -0
  30. data/app/pb_kits/playbook/pb_avatar/_avatar.jsx +8 -3
  31. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +6 -1
  32. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.jsx +6 -1
  33. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_status.jsx +5 -1
  34. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.jsx +3 -1
  35. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.jsx +2 -1
  36. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click.jsx +2 -1
  37. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.jsx +5 -1
  38. data/app/pb_kits/playbook/pb_avatar_action_button/docs/example.yml +1 -9
  39. data/app/pb_kits/playbook/pb_avatar_action_button/docs/index.js +0 -4
  40. data/app/pb_kits/playbook/pb_badge/docs/_badge_colors.jsx +19 -1
  41. data/app/pb_kits/playbook/pb_badge/docs/_badge_default.jsx +4 -1
  42. data/app/pb_kits/playbook/pb_badge/docs/_badge_rounded.jsx +4 -1
  43. data/app/pb_kits/playbook/pb_badge/docs/example.yml +1 -2
  44. data/app/pb_kits/playbook/pb_badge/docs/index.js +0 -1
  45. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.html.erb +12 -1
  46. data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +1 -1
  47. data/app/pb_kits/playbook/pb_body/_body.jsx +1 -1
  48. data/app/pb_kits/playbook/pb_body/_body.scss +1 -17
  49. data/app/pb_kits/playbook/pb_body/body.rb +1 -1
  50. data/app/pb_kits/playbook/pb_body/docs/_body_block.jsx +2 -2
  51. data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx +6 -1
  52. data/app/pb_kits/playbook/pb_body/docs/example.yml +2 -4
  53. data/app/pb_kits/playbook/pb_body/docs/index.js +0 -1
  54. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +17 -31
  55. data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.jsx +2 -1
  56. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx +2 -1
  57. data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx +5 -7
  58. data/app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx +2 -1
  59. data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx +4 -1
  60. data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx +4 -1
  61. data/app/pb_kits/playbook/pb_button/docs/_button_options.jsx +2 -1
  62. data/app/pb_kits/playbook/pb_button/docs/example.yml +0 -2
  63. data/app/pb_kits/playbook/pb_button/docs/index.js +0 -1
  64. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss +8 -16
  65. data/app/pb_kits/playbook/pb_caption/_caption.jsx +1 -3
  66. data/app/pb_kits/playbook/pb_caption/_caption.scss +0 -3
  67. data/app/pb_kits/playbook/pb_caption/caption.rb +1 -4
  68. data/app/pb_kits/playbook/pb_caption/docs/_caption_light.jsx +7 -2
  69. data/app/pb_kits/playbook/pb_caption/docs/example.yml +2 -6
  70. data/app/pb_kits/playbook/pb_caption/docs/index.js +0 -2
  71. data/app/pb_kits/playbook/pb_card/_card.scss +0 -3
  72. data/app/pb_kits/playbook/pb_card/_card_mixin.scss +0 -1
  73. data/app/pb_kits/playbook/pb_card/docs/_card_border_none.jsx +7 -4
  74. data/app/pb_kits/playbook/pb_card/docs/_card_content.jsx +3 -3
  75. data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx +39 -13
  76. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx +13 -4
  77. data/app/pb_kits/playbook/pb_card/docs/_card_light.jsx +2 -2
  78. data/app/pb_kits/playbook/pb_card/docs/_card_padding.jsx +37 -7
  79. data/app/pb_kits/playbook/pb_card/docs/_card_selected.jsx +8 -3
  80. data/app/pb_kits/playbook/pb_card/docs/_card_separator.jsx +13 -4
  81. data/app/pb_kits/playbook/pb_card/docs/_card_shadow.jsx +25 -5
  82. data/app/pb_kits/playbook/pb_card/docs/example.yml +0 -2
  83. data/app/pb_kits/playbook/pb_card/docs/index.js +0 -1
  84. data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss +6 -12
  85. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_checked.jsx +2 -1
  86. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom.jsx +5 -2
  87. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.jsx +2 -1
  88. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.jsx +2 -1
  89. data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +0 -4
  90. data/app/pb_kits/playbook/pb_checkbox/docs/index.js +0 -2
  91. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_click.jsx +2 -1
  92. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.jsx +5 -1
  93. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx +3 -1
  94. data/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml +0 -2
  95. data/app/pb_kits/playbook/pb_circle_icon_button/docs/index.js +0 -1
  96. data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx +6 -1
  97. data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx +5 -1
  98. data/app/pb_kits/playbook/pb_currency/docs/_currency_large.jsx +4 -1
  99. data/app/pb_kits/playbook/pb_currency/docs/_currency_medium.jsx +4 -1
  100. data/app/pb_kits/playbook/pb_currency/docs/_currency_small.jsx +4 -1
  101. data/app/pb_kits/playbook/pb_currency/docs/example.yml +1 -2
  102. data/app/pb_kits/playbook/pb_currency/docs/index.js +0 -1
  103. data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_align.jsx +4 -1
  104. data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.jsx +4 -1
  105. data/app/pb_kits/playbook/pb_date/_date.html.erb +8 -32
  106. data/app/pb_kits/playbook/pb_date/_date.jsx +67 -76
  107. data/app/pb_kits/playbook/pb_date/_date.scss +0 -25
  108. data/app/pb_kits/playbook/pb_date/date.rb +11 -20
  109. data/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb +9 -1
  110. data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +28 -0
  111. data/app/pb_kits/playbook/pb_date/docs/_description.md +0 -2
  112. data/app/pb_kits/playbook/pb_date/docs/example.yml +2 -6
  113. data/app/pb_kits/playbook/pb_date/docs/index.js +1 -3
  114. data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_dark.jsx +1 -1
  115. data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx +1 -1
  116. data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.html.erb +8 -1
  117. data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb +0 -7
  118. data/app/pb_kits/playbook/pb_file_upload/_file_upload.jsx +1 -1
  119. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +2 -5
  120. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.jsx +5 -1
  121. data/app/pb_kits/playbook/pb_hashtag/docs/example.yml +0 -2
  122. data/app/pb_kits/playbook/pb_hashtag/docs/index.js +0 -1
  123. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx +3 -1
  124. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_modified.jsx +2 -1
  125. data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml +1 -3
  126. data/app/pb_kits/playbook/pb_home_address_street/docs/index.js +0 -1
  127. data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.html.erb +1 -3
  128. data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.jsx +5 -7
  129. data/app/pb_kits/playbook/pb_line_graph/_line_graph.html.erb +13 -1
  130. data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +1 -1
  131. data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +28 -6
  132. data/app/pb_kits/playbook/pb_nav/_nav.jsx +2 -7
  133. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +42 -18
  134. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx +13 -4
  135. data/app/pb_kits/playbook/pb_online_status/docs/example.yml +1 -2
  136. data/app/pb_kits/playbook/pb_online_status/docs/index.js +0 -1
  137. data/app/pb_kits/playbook/pb_person_contact/_person_contact.jsx +6 -7
  138. data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.jsx +0 -1
  139. data/app/pb_kits/playbook/pb_radio/_radio.scss +4 -9
  140. data/app/pb_kits/playbook/pb_select/_select.scss +4 -8
  141. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +3 -6
  142. data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.jsx +5 -9
  143. data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.jsx +5 -9
  144. data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.scss +37 -35
  145. data/app/pb_kits/playbook/pb_table/styles/_hover.scss +12 -15
  146. data/app/pb_kits/playbook/pb_table/styles/_mobile.scss +4 -6
  147. data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss +4 -6
  148. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +4 -4
  149. data/app/pb_kits/playbook/pb_time/_time.jsx +5 -7
  150. data/app/pb_kits/playbook/pb_time/docs/_time_dark.jsx +2 -0
  151. data/app/pb_kits/playbook/pb_time/docs/_time_default.jsx +3 -1
  152. data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.jsx +3 -0
  153. data/app/pb_kits/playbook/pb_time/docs/example.yml +0 -1
  154. data/app/pb_kits/playbook/pb_time/docs/index.js +0 -1
  155. data/app/pb_kits/playbook/pb_title/_title.jsx +1 -1
  156. data/app/pb_kits/playbook/pb_title/_title.scss +5 -5
  157. data/app/pb_kits/playbook/pb_title/docs/example.yml +0 -2
  158. data/app/pb_kits/playbook/pb_title/docs/index.js +0 -1
  159. data/app/pb_kits/playbook/pb_title_detail/_title_detail.jsx +4 -4
  160. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +2 -4
  161. data/app/pb_kits/playbook/tokens/_colors.scss +24 -23
  162. data/app/pb_kits/playbook/tokens/_typography.scss +5 -5
  163. data/app/pb_kits/playbook/vendor.js +0 -5
  164. data/app/views/layouts/playbook/_mobile_hamburger.html.erb +2 -0
  165. data/app/views/layouts/playbook/_nav.html.erb +35 -0
  166. data/app/views/layouts/playbook/_sidebar.html.erb +51 -0
  167. data/app/views/layouts/playbook/application.html.erb +26 -0
  168. data/app/views/layouts/playbook/fullscreen.html.slim +10 -0
  169. data/app/views/layouts/playbook/grid.html.slim +10 -0
  170. data/app/views/layouts/playbook/samples.html.erb +19 -0
  171. data/app/views/playbook/guides/create_kit.html.slim +16 -0
  172. data/app/views/playbook/guides/create_kit/_file_naming.html.md +2 -0
  173. data/app/views/playbook/guides/create_kit/_generator.html.md +6 -0
  174. data/app/views/playbook/guides/create_kit/_kit_examples.html.md +2 -0
  175. data/app/views/playbook/guides/create_kit/_kit_rails.html.md +2 -0
  176. data/app/views/playbook/guides/create_kit/_kit_react.html.md +2 -0
  177. data/app/views/playbook/guides/create_kit/_layout.html.md +2 -0
  178. data/app/views/playbook/guides/create_kit/_view_objects.html.md +2 -0
  179. data/app/views/playbook/guides/create_kit/_writing_sass.md +10 -0
  180. data/app/views/playbook/guides/use_nitro.html.slim +6 -0
  181. data/app/views/playbook/guides/use_nitro/_local.html.md +2 -0
  182. data/app/views/playbook/guides/use_nitro/_nitro_components.html.md +2 -0
  183. data/app/views/playbook/guides/use_nitro/_versions.html.md +2 -0
  184. data/app/views/playbook/pages/fullscreen.html.slim +10 -0
  185. data/app/views/playbook/pages/grid.html.slim +2 -0
  186. data/app/views/playbook/pages/home.html.slim +4 -0
  187. data/app/views/playbook/pages/kit_category_show.html.erb +14 -0
  188. data/app/views/playbook/pages/kit_show.html.erb +33 -0
  189. data/app/views/playbook/pages/kits.html.erb +12 -0
  190. data/app/views/playbook/pages/principals/_getting_started.html.md +30 -0
  191. data/app/views/playbook/pages/principles.html.slim +3 -0
  192. data/app/views/playbook/pages/tokens.html.slim +15 -0
  193. data/app/views/playbook/pages/tokens/_pb_doc_spacing.html.slim +61 -0
  194. data/app/views/playbook/pages/utilities.html.slim +116 -0
  195. data/app/views/playbook/pages/utilities/_pb_doc_color.html.slim +15 -0
  196. data/app/views/playbook/samples/collection_detail/index.html.erb +169 -0
  197. data/app/views/playbook/samples/collection_detail/index.jsx +372 -0
  198. data/app/views/playbook/samples/dashboards/index.html.erb +81 -0
  199. data/app/views/playbook/samples/dashboards/index.jsx +130 -0
  200. data/app/views/playbook/samples/filter_table/index.html.erb +348 -0
  201. data/app/views/playbook/samples/filter_table/index.jsx +433 -0
  202. data/app/views/playbook/samples/registration/index.html.erb +316 -0
  203. data/app/views/playbook/samples/registration/index.jsx +476 -0
  204. data/app/views/playbook/samples/sample_show.html.erb +36 -0
  205. data/lib/playbook/engine.rb +0 -1
  206. data/lib/playbook/version.rb +1 -1
  207. data/lib/tasks/pb_release.rake +0 -3
  208. metadata +64 -55
  209. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions_dark.html.erb +0 -17
  210. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions_dark.jsx +0 -21
  211. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_dark.html.erb +0 -9
  212. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_dark.jsx +0 -14
  213. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click_dark.html.erb +0 -15
  214. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click_dark.jsx +0 -16
  215. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement_dark.html.erb +0 -31
  216. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement_dark.jsx +0 -33
  217. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip_dark.html.erb +0 -12
  218. data/app/pb_kits/playbook/pb_badge/docs/_badge_dark.html.erb +0 -124
  219. data/app/pb_kits/playbook/pb_badge/docs/_badge_dark.jsx +0 -160
  220. data/app/pb_kits/playbook/pb_body/docs/_body_dark.html.erb +0 -28
  221. data/app/pb_kits/playbook/pb_body/docs/_body_dark.jsx +0 -35
  222. data/app/pb_kits/playbook/pb_button/docs/_button_default_dark.html.erb +0 -22
  223. data/app/pb_kits/playbook/pb_button/docs/_button_default_dark.jsx +0 -28
  224. data/app/pb_kits/playbook/pb_caption/docs/_caption_dark.html.erb +0 -3
  225. data/app/pb_kits/playbook/pb_caption/docs/_caption_dark.jsx +0 -25
  226. data/app/pb_kits/playbook/pb_caption/docs/_caption_variants.html.erb +0 -1
  227. data/app/pb_kits/playbook/pb_caption/docs/_caption_variants.jsx +0 -16
  228. data/app/pb_kits/playbook/pb_caption/docs/_caption_variants.md +0 -3
  229. data/app/pb_kits/playbook/pb_card/docs/_card_dark.html.erb +0 -3
  230. data/app/pb_kits/playbook/pb_card/docs/_card_dark.jsx +0 -12
  231. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_dark.html.erb +0 -4
  232. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_dark.jsx +0 -17
  233. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_dark_error.html.erb +0 -7
  234. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_dark_error.jsx +0 -18
  235. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_dark.html.erb +0 -29
  236. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_dark.jsx +0 -38
  237. data/app/pb_kits/playbook/pb_currency/docs/_currency_dark.html.erb +0 -23
  238. data/app/pb_kits/playbook/pb_currency/docs/_currency_dark.jsx +0 -32
  239. data/app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb +0 -24
  240. data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx +0 -32
  241. data/app/pb_kits/playbook/pb_date/docs/_date_default_react.jsx +0 -20
  242. data/app/pb_kits/playbook/pb_date/docs/_date_default_react.md +0 -3
  243. data/app/pb_kits/playbook/pb_date/docs/_date_timezone.html.erb +0 -51
  244. data/app/pb_kits/playbook/pb_date/docs/_date_timezone.md +0 -6
  245. data/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb +0 -27
  246. data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx +0 -39
  247. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_dark.html.erb +0 -13
  248. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_dark.jsx +0 -41
  249. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_dark.html.erb +0 -12
  250. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_dark.jsx +0 -20
  251. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_dark.html.erb +0 -9
  252. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_dark.jsx +0 -28
  253. data/app/pb_kits/playbook/pb_time/docs/_time_timezone.jsx +0 -59
  254. data/app/pb_kits/playbook/pb_time/docs/_time_timezone.md +0 -11
  255. data/app/pb_kits/playbook/pb_title/docs/_title_variants.html.erb +0 -1
  256. data/app/pb_kits/playbook/pb_title/docs/_title_variants.jsx +0 -17
  257. data/app/pb_kits/playbook/pb_title/docs/_title_variants.md +0 -3
  258. data/app/pb_kits/playbook/react_rails_kits.js +0 -5
  259. 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