playbook_ui 2.5.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (447) hide show
  1. checksums.yaml +7 -0
  2. data/README.md +316 -0
  3. data/Rakefile +32 -0
  4. data/app/assets/config/playbook_manifest.js +2 -0
  5. data/app/assets/images/clark.jpg +0 -0
  6. data/app/assets/images/giant.jpg +0 -0
  7. data/app/assets/images/pb-caret.svg +1 -0
  8. data/app/assets/images/pb-check.svg +11 -0
  9. data/app/controllers/playbook/application_controller.rb +10 -0
  10. data/app/controllers/playbook/guides_controller.rb +8 -0
  11. data/app/controllers/playbook/pages_controller.rb +50 -0
  12. data/app/helpers/playbook/application_helper.rb +19 -0
  13. data/app/helpers/playbook/layout_helper.rb +7 -0
  14. data/app/helpers/playbook/pb_doc_helper.rb +68 -0
  15. data/app/helpers/playbook/pb_kit_helper.rb +45 -0
  16. data/app/helpers/playbook/redcarpet_helper.rb +154 -0
  17. data/app/pb_kits/playbook/config/_kit_example.html.slim +5 -0
  18. data/app/pb_kits/playbook/config/_kit_ui.html.slim +24 -0
  19. data/app/pb_kits/playbook/config/_pb_kit_api.html.erb +18 -0
  20. data/app/pb_kits/playbook/packs/application.js +12 -0
  21. data/app/pb_kits/playbook/packs/examples.js +37 -0
  22. data/app/pb_kits/playbook/packs/kits.js +11 -0
  23. data/app/pb_kits/playbook/packs/main.scss +9 -0
  24. data/app/pb_kits/playbook/packs/pb_avatar.js +4 -0
  25. data/app/pb_kits/playbook/packs/pb_body.js +4 -0
  26. data/app/pb_kits/playbook/packs/pb_button.js +4 -0
  27. data/app/pb_kits/playbook/packs/pb_caption.js +4 -0
  28. data/app/pb_kits/playbook/packs/pb_card.js +4 -0
  29. data/app/pb_kits/playbook/packs/pb_image.js +6 -0
  30. data/app/pb_kits/playbook/packs/pb_input.js +4 -0
  31. data/app/pb_kits/playbook/packs/pb_layout.js +4 -0
  32. data/app/pb_kits/playbook/packs/pb_list.js +4 -0
  33. data/app/pb_kits/playbook/packs/pb_table.js +16 -0
  34. data/app/pb_kits/playbook/packs/pb_title.js +4 -0
  35. data/app/pb_kits/playbook/packs/pb_vertical_nav.js +4 -0
  36. data/app/pb_kits/playbook/packs/site_styles/_kit_style_index.scss +13 -0
  37. data/app/pb_kits/playbook/packs/site_styles/_scaffold.scss +43 -0
  38. data/app/pb_kits/playbook/packs/site_styles/_site-style.scss +72 -0
  39. data/app/pb_kits/playbook/packs/site_styles/docs/_all.scss +8 -0
  40. data/app/pb_kits/playbook/packs/site_styles/docs/_code_snippet.scss +531 -0
  41. data/app/pb_kits/playbook/packs/site_styles/docs/_color_utilities.scss +90 -0
  42. data/app/pb_kits/playbook/packs/site_styles/docs/_kit_doc.scss +173 -0
  43. data/app/pb_kits/playbook/packs/site_styles/docs/_kits_examples.scss +22 -0
  44. data/app/pb_kits/playbook/packs/site_styles/docs/_markdown.scss +82 -0
  45. data/app/pb_kits/playbook/packs/site_styles/docs/_spacing_tokens.scss +72 -0
  46. data/app/pb_kits/playbook/pb_avatar/_avatar.html.erb +8 -0
  47. data/app/pb_kits/playbook/pb_avatar/_avatar.jsx +62 -0
  48. data/app/pb_kits/playbook/pb_avatar/_avatar.scss +49 -0
  49. data/app/pb_kits/playbook/pb_avatar/avatar.rb +82 -0
  50. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.html.erb +5 -0
  51. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +16 -0
  52. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.html.erb +5 -0
  53. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.jsx +16 -0
  54. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +7 -0
  55. data/app/pb_kits/playbook/pb_avatar/docs/index.js +2 -0
  56. data/app/pb_kits/playbook/pb_body/_body.html.erb +4 -0
  57. data/app/pb_kits/playbook/pb_body/_body.jsx +36 -0
  58. data/app/pb_kits/playbook/pb_body/_body.scss +37 -0
  59. data/app/pb_kits/playbook/pb_body/body.rb +76 -0
  60. data/app/pb_kits/playbook/pb_body/docs/_body_dark.html.erb +3 -0
  61. data/app/pb_kits/playbook/pb_body/docs/_body_dark.jsx +14 -0
  62. data/app/pb_kits/playbook/pb_body/docs/_body_light.html.erb +3 -0
  63. data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx +14 -0
  64. data/app/pb_kits/playbook/pb_body/docs/example.yml +7 -0
  65. data/app/pb_kits/playbook/pb_body/docs/index.js +2 -0
  66. data/app/pb_kits/playbook/pb_button/_button.html.erb +9 -0
  67. data/app/pb_kits/playbook/pb_button/_button.jsx +40 -0
  68. data/app/pb_kits/playbook/pb_button/_button.scss +53 -0
  69. data/app/pb_kits/playbook/pb_button/_variations.json +15 -0
  70. data/app/pb_kits/playbook/pb_button/button.rb +87 -0
  71. data/app/pb_kits/playbook/pb_button/docs/_button_dark.html.erb +3 -0
  72. data/app/pb_kits/playbook/pb_button/docs/_button_dark.jsx +14 -0
  73. data/app/pb_kits/playbook/pb_button/docs/_button_light.html.erb +3 -0
  74. data/app/pb_kits/playbook/pb_button/docs/_button_light.jsx +14 -0
  75. data/app/pb_kits/playbook/pb_button/docs/_button_sizes.html.erb +3 -0
  76. data/app/pb_kits/playbook/pb_button/docs/_button_sizes.jsx +14 -0
  77. data/app/pb_kits/playbook/pb_button/docs/example.yml +9 -0
  78. data/app/pb_kits/playbook/pb_button/docs/index.js +3 -0
  79. data/app/pb_kits/playbook/pb_caption/_caption.html.erb +2 -0
  80. data/app/pb_kits/playbook/pb_caption/_caption.jsx +39 -0
  81. data/app/pb_kits/playbook/pb_caption/_caption.scss +5 -0
  82. data/app/pb_kits/playbook/pb_caption/_caption_lg.scss +5 -0
  83. data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +23 -0
  84. data/app/pb_kits/playbook/pb_caption/caption.rb +78 -0
  85. data/app/pb_kits/playbook/pb_caption/docs/_caption_dark.html.erb +2 -0
  86. data/app/pb_kits/playbook/pb_caption/docs/_caption_dark.jsx +13 -0
  87. data/app/pb_kits/playbook/pb_caption/docs/_caption_light.html.erb +2 -0
  88. data/app/pb_kits/playbook/pb_caption/docs/_caption_light.jsx +13 -0
  89. data/app/pb_kits/playbook/pb_caption/docs/example.yml +7 -0
  90. data/app/pb_kits/playbook/pb_caption/docs/index.js +2 -0
  91. data/app/pb_kits/playbook/pb_card/_card.html.erb +6 -0
  92. data/app/pb_kits/playbook/pb_card/_card.jsx +25 -0
  93. data/app/pb_kits/playbook/pb_card/_card.scss +14 -0
  94. data/app/pb_kits/playbook/pb_card/card.rb +37 -0
  95. data/app/pb_kits/playbook/pb_card/docs/_card_light.html.erb +3 -0
  96. data/app/pb_kits/playbook/pb_card/docs/_card_light.jsx +12 -0
  97. data/app/pb_kits/playbook/pb_card/docs/example.yml +5 -0
  98. data/app/pb_kits/playbook/pb_card/docs/index.js +1 -0
  99. data/app/pb_kits/playbook/pb_image/_image.html.erb +5 -0
  100. data/app/pb_kits/playbook/pb_image/_image.jsx +32 -0
  101. data/app/pb_kits/playbook/pb_image/_image.scss +15 -0
  102. data/app/pb_kits/playbook/pb_image/docs/_default_image.html.erb +1 -0
  103. data/app/pb_kits/playbook/pb_image/docs/_default_image.jsx +12 -0
  104. data/app/pb_kits/playbook/pb_image/docs/example.yml +5 -0
  105. data/app/pb_kits/playbook/pb_image/docs/index.js +1 -0
  106. data/app/pb_kits/playbook/pb_image/image.rb +53 -0
  107. data/app/pb_kits/playbook/pb_input/_input.html.erb +17 -0
  108. data/app/pb_kits/playbook/pb_input/_input.jsx +57 -0
  109. data/app/pb_kits/playbook/pb_input/_input.scss +58 -0
  110. data/app/pb_kits/playbook/pb_input/docs/_input_default.html.erb +5 -0
  111. data/app/pb_kits/playbook/pb_input/docs/_input_default.jsx +16 -0
  112. data/app/pb_kits/playbook/pb_input/docs/example.yml +5 -0
  113. data/app/pb_kits/playbook/pb_input/docs/index.js +1 -0
  114. data/app/pb_kits/playbook/pb_input/input.rb +85 -0
  115. data/app/pb_kits/playbook/pb_kit/base.rb +38 -0
  116. data/app/pb_kits/playbook/pb_layout/_body.html.erb +6 -0
  117. data/app/pb_kits/playbook/pb_layout/_body.jsx +26 -0
  118. data/app/pb_kits/playbook/pb_layout/_layout.html.erb +6 -0
  119. data/app/pb_kits/playbook/pb_layout/_layout.jsx +54 -0
  120. data/app/pb_kits/playbook/pb_layout/_layout.scss +87 -0
  121. data/app/pb_kits/playbook/pb_layout/_layout_mixin.scss +60 -0
  122. data/app/pb_kits/playbook/pb_layout/_sidebar.html.erb +6 -0
  123. data/app/pb_kits/playbook/pb_layout/_sidebar.jsx +26 -0
  124. data/app/pb_kits/playbook/pb_layout/body.rb +37 -0
  125. data/app/pb_kits/playbook/pb_layout/docs/_layout_lg.html.erb +4 -0
  126. data/app/pb_kits/playbook/pb_layout/docs/_layout_lg_dark.html.erb +4 -0
  127. data/app/pb_kits/playbook/pb_layout/docs/_layout_md.html.erb +4 -0
  128. data/app/pb_kits/playbook/pb_layout/docs/_layout_md_dark.html.erb +4 -0
  129. data/app/pb_kits/playbook/pb_layout/docs/_layout_sm.html.erb +4 -0
  130. data/app/pb_kits/playbook/pb_layout/docs/_layout_sm_dark.html.erb +4 -0
  131. data/app/pb_kits/playbook/pb_layout/docs/_layout_xl.html.erb +4 -0
  132. data/app/pb_kits/playbook/pb_layout/docs/_layout_xl_dark.html.erb +4 -0
  133. data/app/pb_kits/playbook/pb_layout/docs/_layout_xs.html.erb +4 -0
  134. data/app/pb_kits/playbook/pb_layout/docs/_layout_xs.jsx +15 -0
  135. data/app/pb_kits/playbook/pb_layout/docs/_layout_xs_dark.html.erb +4 -0
  136. data/app/pb_kits/playbook/pb_layout/docs/example.yml +14 -0
  137. data/app/pb_kits/playbook/pb_layout/docs/index.js +1 -0
  138. data/app/pb_kits/playbook/pb_layout/layout.rb +109 -0
  139. data/app/pb_kits/playbook/pb_layout/sidebar.rb +37 -0
  140. data/app/pb_kits/playbook/pb_list/_item.html.erb +6 -0
  141. data/app/pb_kits/playbook/pb_list/_list.html.erb +9 -0
  142. data/app/pb_kits/playbook/pb_list/_list.jsx +56 -0
  143. data/app/pb_kits/playbook/pb_list/_list.scss +94 -0
  144. data/app/pb_kits/playbook/pb_list/_list_item.jsx +26 -0
  145. data/app/pb_kits/playbook/pb_list/docs/_list_borderless.html.erb +7 -0
  146. data/app/pb_kits/playbook/pb_list/docs/_list_dark.html.erb +7 -0
  147. data/app/pb_kits/playbook/pb_list/docs/_list_dark_borderless.html.erb +7 -0
  148. data/app/pb_kits/playbook/pb_list/docs/_list_dark_lg.html.erb +7 -0
  149. data/app/pb_kits/playbook/pb_list/docs/_list_dark_ordered.html.erb +7 -0
  150. data/app/pb_kits/playbook/pb_list/docs/_list_dark_xpadding.html.erb +7 -0
  151. data/app/pb_kits/playbook/pb_list/docs/_list_default.html.erb +7 -0
  152. data/app/pb_kits/playbook/pb_list/docs/_list_default.jsx +16 -0
  153. data/app/pb_kits/playbook/pb_list/docs/_list_lg.html.erb +7 -0
  154. data/app/pb_kits/playbook/pb_list/docs/_list_ordered.html.erb +7 -0
  155. data/app/pb_kits/playbook/pb_list/docs/_list_xpadding.html.erb +7 -0
  156. data/app/pb_kits/playbook/pb_list/docs/example.yml +14 -0
  157. data/app/pb_kits/playbook/pb_list/docs/index.js +1 -0
  158. data/app/pb_kits/playbook/pb_list/item.rb +41 -0
  159. data/app/pb_kits/playbook/pb_list/list.rb +114 -0
  160. data/app/pb_kits/playbook/pb_table/_table.html.erb +12 -0
  161. data/app/pb_kits/playbook/pb_table/_table.jsx +60 -0
  162. data/app/pb_kits/playbook/pb_table/_table.scss +1 -0
  163. data/app/pb_kits/playbook/pb_table/docs/_table_container.html.erb +34 -0
  164. data/app/pb_kits/playbook/pb_table/docs/_table_container.jsx +45 -0
  165. data/app/pb_kits/playbook/pb_table/docs/_table_container_dark.html.erb +34 -0
  166. data/app/pb_kits/playbook/pb_table/docs/_table_container_dark.jsx +46 -0
  167. data/app/pb_kits/playbook/pb_table/docs/_table_dark.html.erb +34 -0
  168. data/app/pb_kits/playbook/pb_table/docs/_table_dark.jsx +45 -0
  169. data/app/pb_kits/playbook/pb_table/docs/_table_disable_hover.html.erb +34 -0
  170. data/app/pb_kits/playbook/pb_table/docs/_table_disable_hover.jsx +45 -0
  171. data/app/pb_kits/playbook/pb_table/docs/_table_lg.html.erb +34 -0
  172. data/app/pb_kits/playbook/pb_table/docs/_table_lg.jsx +43 -0
  173. data/app/pb_kits/playbook/pb_table/docs/_table_md.html.erb +34 -0
  174. data/app/pb_kits/playbook/pb_table/docs/_table_md.jsx +43 -0
  175. data/app/pb_kits/playbook/pb_table/docs/_table_multiline.html.erb +34 -0
  176. data/app/pb_kits/playbook/pb_table/docs/_table_multiline.jsx +43 -0
  177. data/app/pb_kits/playbook/pb_table/docs/_table_single_line.html.erb +48 -0
  178. data/app/pb_kits/playbook/pb_table/docs/_table_single_line.jsx +45 -0
  179. data/app/pb_kits/playbook/pb_table/docs/_table_sm.html.erb +34 -0
  180. data/app/pb_kits/playbook/pb_table/docs/_table_sm.jsx +43 -0
  181. data/app/pb_kits/playbook/pb_table/docs/example.yml +21 -0
  182. data/app/pb_kits/playbook/pb_table/docs/index.js +9 -0
  183. data/app/pb_kits/playbook/pb_table/styles/_all.scss +14 -0
  184. data/app/pb_kits/playbook/pb_table/styles/_as-cards.scss +49 -0
  185. data/app/pb_kits/playbook/pb_table/styles/_content.scss +13 -0
  186. data/app/pb_kits/playbook/pb_table/styles/_headers.scss +17 -0
  187. data/app/pb_kits/playbook/pb_table/styles/_hover.scss +66 -0
  188. data/app/pb_kits/playbook/pb_table/styles/_mixins.scss +0 -0
  189. data/app/pb_kits/playbook/pb_table/styles/_mobile.scss +138 -0
  190. data/app/pb_kits/playbook/pb_table/styles/_reset.scss +17 -0
  191. data/app/pb_kits/playbook/pb_table/styles/_single-line.scss +35 -0
  192. data/app/pb_kits/playbook/pb_table/styles/_structure.scss +39 -0
  193. data/app/pb_kits/playbook/pb_table/styles/_table-card.scss +88 -0
  194. data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss +92 -0
  195. data/app/pb_kits/playbook/pb_table/styles/_variables.scss +23 -0
  196. data/app/pb_kits/playbook/pb_table/table.rb +95 -0
  197. data/app/pb_kits/playbook/pb_title/_title.html.erb +1 -0
  198. data/app/pb_kits/playbook/pb_title/_title.jsx +33 -0
  199. data/app/pb_kits/playbook/pb_title/_title.scss +32 -0
  200. data/app/pb_kits/playbook/pb_title/_title_mixin.scss +57 -0
  201. data/app/pb_kits/playbook/pb_title/docs/_title_dark.html.erb +4 -0
  202. data/app/pb_kits/playbook/pb_title/docs/_title_dark.jsx +15 -0
  203. data/app/pb_kits/playbook/pb_title/docs/_title_light.html.erb +4 -0
  204. data/app/pb_kits/playbook/pb_title/docs/_title_light.jsx +15 -0
  205. data/app/pb_kits/playbook/pb_title/docs/example.yml +7 -0
  206. data/app/pb_kits/playbook/pb_title/docs/index.js +2 -0
  207. data/app/pb_kits/playbook/pb_title/title.rb +76 -0
  208. data/app/pb_kits/playbook/pb_vertical_nav/_item.html.erb +8 -0
  209. data/app/pb_kits/playbook/pb_vertical_nav/_item.jsx +34 -0
  210. data/app/pb_kits/playbook/pb_vertical_nav/_vertical_nav.html.erb +13 -0
  211. data/app/pb_kits/playbook/pb_vertical_nav/_vertical_nav.jsx +31 -0
  212. data/app/pb_kits/playbook/pb_vertical_nav/_vertical_nav.scss +73 -0
  213. data/app/pb_kits/playbook/pb_vertical_nav/docs/_default_nav.html.erb +5 -0
  214. data/app/pb_kits/playbook/pb_vertical_nav/docs/_default_nav.jsx +15 -0
  215. data/app/pb_kits/playbook/pb_vertical_nav/docs/example.yml +5 -0
  216. data/app/pb_kits/playbook/pb_vertical_nav/docs/index.js +1 -0
  217. data/app/pb_kits/playbook/pb_vertical_nav/item.rb +65 -0
  218. data/app/pb_kits/playbook/pb_vertical_nav/vertical_nav.rb +59 -0
  219. data/app/pb_kits/playbook/tokens/_animation-curves.scss +37 -0
  220. data/app/pb_kits/playbook/tokens/_border_radius.sass +27 -0
  221. data/app/pb_kits/playbook/tokens/_colors.scss +417 -0
  222. data/app/pb_kits/playbook/tokens/_fonts.scss +97 -0
  223. data/app/pb_kits/playbook/tokens/_line_height.scss +7 -0
  224. data/app/pb_kits/playbook/tokens/_opacity.scss +9 -0
  225. data/app/pb_kits/playbook/tokens/_positioning.scss +24 -0
  226. data/app/pb_kits/playbook/tokens/_screen_sizes.scss +30 -0
  227. data/app/pb_kits/playbook/tokens/_shadows.scss +8 -0
  228. data/app/pb_kits/playbook/tokens/_spacing.scss +27 -0
  229. data/app/pb_kits/playbook/tokens/_typography.sass +64 -0
  230. data/app/pb_kits/playbook/utilities/_background_colors.scss +21 -0
  231. data/app/pb_kits/playbook/utilities/_colors.scss +26 -0
  232. data/app/views/layouts/playbook/_nav.html.slim +3 -0
  233. data/app/views/layouts/playbook/_sidebar.html.slim +29 -0
  234. data/app/views/layouts/playbook/application.html.slim +18 -0
  235. data/app/views/layouts/playbook/fullscreen.html.slim +10 -0
  236. data/app/views/layouts/playbook/grid.html.slim +10 -0
  237. data/app/views/playbook/guides/create_kit.html.slim +16 -0
  238. data/app/views/playbook/guides/create_kit/_file_naming.html.md +2 -0
  239. data/app/views/playbook/guides/create_kit/_generator.html.md +6 -0
  240. data/app/views/playbook/guides/create_kit/_kit_examples.html.md +2 -0
  241. data/app/views/playbook/guides/create_kit/_kit_rails.html.md +2 -0
  242. data/app/views/playbook/guides/create_kit/_kit_react.html.md +2 -0
  243. data/app/views/playbook/guides/create_kit/_layout.html.md +2 -0
  244. data/app/views/playbook/guides/create_kit/_view_objects.html.md +2 -0
  245. data/app/views/playbook/guides/create_kit/_writing_sass.md +10 -0
  246. data/app/views/playbook/guides/use_nitro.html.slim +6 -0
  247. data/app/views/playbook/guides/use_nitro/_local.html.md +2 -0
  248. data/app/views/playbook/guides/use_nitro/_nitro_components.html.md +2 -0
  249. data/app/views/playbook/guides/use_nitro/_versions.html.md +2 -0
  250. data/app/views/playbook/pages/fullscreen.html.slim +10 -0
  251. data/app/views/playbook/pages/grid.html.slim +2 -0
  252. data/app/views/playbook/pages/home.html.slim +4 -0
  253. data/app/views/playbook/pages/kit_show.html.slim +14 -0
  254. data/app/views/playbook/pages/kits.html.slim +10 -0
  255. data/app/views/playbook/pages/principals/_getting_started.html.md +12 -0
  256. data/app/views/playbook/pages/principles.html.slim +5 -0
  257. data/app/views/playbook/pages/tokens.html.slim +15 -0
  258. data/app/views/playbook/pages/tokens/_pb_doc_spacing.html.slim +16 -0
  259. data/app/views/playbook/pages/utilities.html.slim +89 -0
  260. data/app/views/playbook/pages/utilities/_pb_doc_color.html.slim +14 -0
  261. data/components/Avatar/Avatar.jsx +96 -0
  262. data/components/Avatar/AvatarStory.jsx +19 -0
  263. data/components/Avatar/styles.scss +54 -0
  264. data/components/Avatar/styles.scss.flow +14 -0
  265. data/components/Badge/Badge.jsx +40 -0
  266. data/components/Badge/BadgeStory.jsx +40 -0
  267. data/components/Badge/badges.scss +167 -0
  268. data/components/Badge/labels.scss +121 -0
  269. data/components/Badge/styles.scss +4 -0
  270. data/components/Badge/styles.scss.flow +38 -0
  271. data/components/Banner/Banner.jsx +54 -0
  272. data/components/Banner/BannerStory.jsx +22 -0
  273. data/components/Banner/styles.scss +75 -0
  274. data/components/Banner/styles.scss.flow +19 -0
  275. data/components/Button/Button.jsx +75 -0
  276. data/components/Button/ButtonStory.jsx +94 -0
  277. data/components/Capping/CappingStory.jsx +21 -0
  278. data/components/Card/Card.jsx +44 -0
  279. data/components/Card/CardStory.jsx +19 -0
  280. data/components/CircleButton/CircleButton.jsx +51 -0
  281. data/components/CircleButton/CircleButtonStory.jsx +25 -0
  282. data/components/CircleButton/styles.scss +33 -0
  283. data/components/CircleButton/styles.scss.flow +6 -0
  284. data/components/CollapsibleCard/CollapsibleCard.jsx +108 -0
  285. data/components/CollapsibleCard/CollapsibleCardStory.jsx +26 -0
  286. data/components/Color/Color.jsx +55 -0
  287. data/components/Color/ColorStory.jsx +16 -0
  288. data/components/Color/styles.scss +6 -0
  289. data/components/Color/styles.scss.flow +5 -0
  290. data/components/ColorPickerInput/ColorPickerInput.jsx +99 -0
  291. data/components/ColorPickerInput/ColorPickerInputStory.jsx +37 -0
  292. data/components/ColorPickerInput/colorPickerInput.scss +10 -0
  293. data/components/ColorPickerInput/colorPickerInput.scss.flow +6 -0
  294. data/components/DOBInput/index.jsx +35 -0
  295. data/components/DOBInput/story.jsx +20 -0
  296. data/components/DOBInput/styles.scss +11 -0
  297. data/components/DOBInput/styles.scss.flow +7 -0
  298. data/components/DatePicker/DatePicker.jsx +156 -0
  299. data/components/DatePicker/DatePickerStory.jsx +22 -0
  300. data/components/DatePicker/styles.scss +6 -0
  301. data/components/DatePicker/styles.scss.flow +5 -0
  302. data/components/DateTimePicker/DateTimePicker.jsx +109 -0
  303. data/components/DateTimePicker/DateTimePickerStory.jsx +31 -0
  304. data/components/DateTimePicker/story-styles.scss +3 -0
  305. data/components/DateTimePicker/story-styles.scss.flow +5 -0
  306. data/components/DateTimePicker/styles.scss +1 -0
  307. data/components/DateTimePicker/styles.scss.flow +5 -0
  308. data/components/Errors/Errors.jsx +38 -0
  309. data/components/FileCard/FileCard.jsx +183 -0
  310. data/components/FileCard/FileCardStory.jsx +62 -0
  311. data/components/FileCard/styles.scss +81 -0
  312. data/components/FileCard/styles.scss.flow +12 -0
  313. data/components/Flip/Flip.jsx +50 -0
  314. data/components/Flip/FlipStory.jsx +85 -0
  315. data/components/Flip/styles.scss +41 -0
  316. data/components/Flip/styles.scss.flow +11 -0
  317. data/components/FlyoutPanel/FlyoutPanel.jsx +34 -0
  318. data/components/FlyoutPanel/FlyoutPanelStory.jsx +36 -0
  319. data/components/FlyoutPanel/flyout_panel.scss +33 -0
  320. data/components/FlyoutPanel/flyout_panel.scss.flow +11 -0
  321. data/components/Grade/Grade.jsx +55 -0
  322. data/components/Grade/GradeStory.jsx +18 -0
  323. data/components/Grade/grade.scss +39 -0
  324. data/components/Grade/grade.scss.flow +6 -0
  325. data/components/Highlight/Highlight.jsx +39 -0
  326. data/components/Highlight/HighlightStory.jsx +22 -0
  327. data/components/Highlight/styles.scss +24 -0
  328. data/components/Highlight/styles.scss.flow +17 -0
  329. data/components/Icon/Icon.jsx +54 -0
  330. data/components/Icon/IconButtonStory.jsx +20 -0
  331. data/components/Icon/IconStory.jsx +25 -0
  332. data/components/IconToggle/IconToggle.jsx +56 -0
  333. data/components/IconToggle/IconToggleStory.jsx +24 -0
  334. data/components/Milestones/MilestoneItem.jsx +47 -0
  335. data/components/Milestones/MilestoneItemStory.jsx +25 -0
  336. data/components/Milestones/Milestones.jsx +51 -0
  337. data/components/Milestones/MilestonesStory.jsx +30 -0
  338. data/components/Milestones/milestones.scss +19 -0
  339. data/components/Milestones/milestones.scss.flow +7 -0
  340. data/components/Milestones/milestones_item.scss +157 -0
  341. data/components/Milestones/milestones_item.scss.flow +13 -0
  342. data/components/Milestones/milestones_variables.scss +11 -0
  343. data/components/Modal/ModalStory.jsx +29 -0
  344. data/components/MonogramAvatar/MonogramAvatar.jsx +91 -0
  345. data/components/MonogramAvatar/MonogramAvatarStory.jsx +21 -0
  346. data/components/MonogramAvatar/monogram_avatar.scss +54 -0
  347. data/components/MonogramAvatar/monogram_avatar.scss.flow +10 -0
  348. data/components/Panel/Panel.jsx +159 -0
  349. data/components/Panel/PanelStory.jsx +23 -0
  350. data/components/Panel/panel.scss +32 -0
  351. data/components/Panel/panel.scss.flow +12 -0
  352. data/components/PanelGroup/PanelGroup.jsx +121 -0
  353. data/components/PanelGroup/PanelGroup.scss +96 -0
  354. data/components/PanelGroup/PanelGroup.scss.flow +6 -0
  355. data/components/PanelGroup/PanelGroupStory.jsx +112 -0
  356. data/components/SearchCollectionSelect/SearchCollectionSelect.jsx +29 -0
  357. data/components/SearchCollectionSelect/SearchCollectionSelectStory.jsx +48 -0
  358. data/components/SearchCollectionSelect/searchCollectionSelect.scss +0 -0
  359. data/components/SideModal/SideModalStory.jsx +31 -0
  360. data/components/Spinner/Spinner.jsx +80 -0
  361. data/components/Spinner/SpinnerStory.jsx +21 -0
  362. data/components/Spinner/spinner.scss +6 -0
  363. data/components/Spinner/spinner.scss.flow +5 -0
  364. data/components/StepMeter/StepMeter.jsx +75 -0
  365. data/components/StepMeter/StepMeterStory.jsx +25 -0
  366. data/components/StepMeter/step_meter.scss +120 -0
  367. data/components/StepMeter/step_meter.scss.flow +9 -0
  368. data/components/Survey/Survey.jsx +190 -0
  369. data/components/Survey/SurveyStory.jsx +125 -0
  370. data/components/Survey/survey.scss +75 -0
  371. data/components/Survey/survey.scss.flow +11 -0
  372. data/components/Tab/Tab.jsx +70 -0
  373. data/components/Tab/tab.scss +25 -0
  374. data/components/Tab/tab.scss.flow +6 -0
  375. data/components/TabList/TabList.jsx +35 -0
  376. data/components/TabList/TabListStory.jsx +31 -0
  377. data/components/TabList/tabList.scss +5 -0
  378. data/components/TabList/tabList.scss.flow +5 -0
  379. data/components/Text/Text.jsx +53 -0
  380. data/components/Text/TextStory.jsx +23 -0
  381. data/components/Text/styles.scss +3 -0
  382. data/components/Text/styles.scss.flow +123 -0
  383. data/components/Text/text.scss +35 -0
  384. data/components/TextInput/TextInput.jsx +95 -0
  385. data/components/TextInput/TextInputStory.jsx +23 -0
  386. data/components/TextInput/form-control.scss +96 -0
  387. data/components/TextInput/styles.scss +3 -0
  388. data/components/TextInput/styles.scss.flow +7 -0
  389. data/components/TimePicker/TimePicker.jsx +218 -0
  390. data/components/TimePicker/TimePickerStory.jsx +22 -0
  391. data/components/TimePicker/styles.scss +1 -0
  392. data/components/TimePicker/styles.scss.flow +5 -0
  393. data/components/ToggleButton/ToggleButton.jsx +68 -0
  394. data/components/ToggleButton/ToggleButtonStory.jsx +46 -0
  395. data/components/ToggleButton/toggleButton.scss +70 -0
  396. data/components/ToggleButton/toggleButton.scss.flow +14 -0
  397. data/components/UserStamp/UserStamp.jsx +40 -0
  398. data/components/UserStamp/UserStampStory.jsx +22 -0
  399. data/components/UserStamp/styles.scss +6 -0
  400. data/components/UserStamp/styles.scss.flow +7 -0
  401. data/components/Wip/Wip.jsx +34 -0
  402. data/components/index.js +33 -0
  403. data/components/types.js +21 -0
  404. data/db/migrate/20171025045845_devise_create_users.rb +42 -0
  405. data/db/migrate/20171025050917_create_sections.rb +9 -0
  406. data/db/migrate/20171025050923_create_categories.rb +10 -0
  407. data/db/migrate/20171025050930_create_pages.rb +12 -0
  408. data/db/migrate/20171025050935_create_tags.rb +9 -0
  409. data/db/migrate/20171025050941_create_types.rb +10 -0
  410. data/db/migrate/20171025051118_create_page_tags.rb +8 -0
  411. data/db/migrate/20171025051848_add_user_ref_to_pages.rb +5 -0
  412. data/db/migrate/20171025051853_add_type_ref_to_pages.rb +5 -0
  413. data/db/migrate/20171025051859_add_page_ref_to_page_tags.rb +5 -0
  414. data/db/migrate/20171025051904_add_tag_ref_to_page_tags.rb +5 -0
  415. data/db/migrate/20171025052205_add_section_ref_to_categories.rb +5 -0
  416. data/db/migrate/20171025052211_add_category_ref_to_pages.rb +5 -0
  417. data/db/migrate/20180327194658_add_nitro_id_to_user.rb +14 -0
  418. data/db/migrate/20180327195455_create_friendly_id_slugs.rb +15 -0
  419. data/db/migrate/20180328142634_drop_types.rb +5 -0
  420. data/db/migrate/20180328145054_remove_type_id_from_pages.rb +5 -0
  421. data/db/migrate/20180328145144_drop_friendly_id_slugs.rb +6 -0
  422. data/db/migrate/20180518133907_add_page_ref_to_pages.rb +5 -0
  423. data/db/seeds.rb +7 -0
  424. data/fonts/fontawesome.js +1978 -0
  425. data/fonts/regular.js +1217 -0
  426. data/lib/generators/kit/USAGE +32 -0
  427. data/lib/generators/kit/kit_generator.rb +86 -0
  428. data/lib/generators/kit/templates/html.erb +3 -0
  429. data/lib/generators/kit/templates/javascript.erb +4 -0
  430. data/lib/generators/kit/templates/jsx.erb +31 -0
  431. data/lib/generators/kit/templates/logo.txt +28 -0
  432. data/lib/generators/kit/templates/ruby.erb +48 -0
  433. data/lib/generators/kit/templates/scss.erb +0 -0
  434. data/lib/generators/kit/templates/storyrails.erb +2 -0
  435. data/lib/generators/kit/templates/storyreact.erb +2 -0
  436. data/lib/generators/kit/templates/variations.erb +10 -0
  437. data/lib/playbook.rb +32 -0
  438. data/lib/playbook/engine.rb +34 -0
  439. data/lib/playbook/version.rb +3 -0
  440. data/lib/playbook_ui.rb +3 -0
  441. data/lib/tasks/db.rake +8 -0
  442. data/lib/tasks/playbook_tasks.rake +24 -0
  443. data/stories/basic.js +18 -0
  444. data/stories/complex.js +15 -0
  445. data/stories/form.js +2 -0
  446. data/stories/index.js +29 -0
  447. metadata +832 -0
@@ -0,0 +1,14 @@
1
+ import React from "react"
2
+ import Body from "../_body.jsx"
3
+
4
+ function BodyLight() {
5
+ return (
6
+ <div>
7
+ <Body text="I am a body kit (Default)" />
8
+ <Body color="light" text="I am a body kit (Light)" />
9
+ <Body color="lighter" text="I am a body kit (Lighter)" />
10
+ </div>
11
+ )
12
+ }
13
+
14
+ export default BodyLight;
@@ -0,0 +1,7 @@
1
+ examples:
2
+ rails:
3
+ - body_light: Light UI
4
+ - body_dark: Dark UI
5
+ react:
6
+ - body_light: Light UI
7
+ - body_dark: Dark UI
@@ -0,0 +1,2 @@
1
+ export {default as BodyDark} from './_body_dark.jsx';
2
+ export {default as BodyLight} from './_body_light.jsx';
@@ -0,0 +1,9 @@
1
+ <%= content_tag(:div,
2
+ class: object.wrapperclass) do %>
3
+ <%= content_tag(:button,
4
+ id: object.id,
5
+ data: object.data,
6
+ class: object.classname("pb_button#{object.type}#{object.size}#{object.dark}")) do %>
7
+ <span><%= object.text %></span>
8
+ <% end %>
9
+ <% end %>
@@ -0,0 +1,40 @@
1
+ import React, { Component } from "react";
2
+ import PropTypes from "prop-types";
3
+
4
+ const propTypes = {
5
+ text: PropTypes.string.isRequired,
6
+ type: PropTypes.oneOf(["primary", "danger", "dashed"]),
7
+ size: PropTypes.oneOf(["large", "medium", "small"]),
8
+ dark: PropTypes.bool,
9
+ wrapperclass: PropTypes.string,
10
+ componentclass: PropTypes.string
11
+ };
12
+
13
+ const defaultProps = {
14
+ text: "Button",
15
+ type: null,
16
+ size: null,
17
+ dark: false,
18
+ wrapperclass: 'kit_btn_wrapper',
19
+ componentclass: ''
20
+
21
+ };
22
+
23
+ class Button extends Component {
24
+ render() {
25
+ const { text, type, size, dark, wrapperclass, componentclass} = this.props;
26
+
27
+ return (
28
+ <div className={wrapperclass}>
29
+ <button className={'pb_button' + (type !== null ? `_${type}` : "" ) + (size !== null ? `_${size}` : "" ) + (dark === true ? "_dark" : "") + (componentclass !== "" ? `${componentclass}` : "" )}>
30
+ <span>{text}</span>
31
+ </button>
32
+ </div>
33
+ );
34
+ }
35
+ }
36
+
37
+ Button.propTypes = propTypes;
38
+ Button.defaultProps = defaultProps;
39
+
40
+ export default Button;
@@ -0,0 +1,53 @@
1
+ @mixin kit_btn {
2
+ line-height: 38px;
3
+ padding: 0 15px;
4
+ border-radius: 4px;
5
+ border: 1px solid $ink_lightest;
6
+ font-size: 14px;
7
+ background: transparent;
8
+ }
9
+
10
+ .kit_btn_wrapper {
11
+ display: inline-block;
12
+
13
+ [class^=pb_button] {
14
+ @include kit_btn;
15
+
16
+ &[class*=_primary] {
17
+ background: $power_royal;
18
+ border: none;
19
+ color: $white;
20
+ }
21
+
22
+ &[class*=_danger] {
23
+ background: $power_red;
24
+ border: none;
25
+ color: $white;
26
+ }
27
+
28
+ &[class*=_dashed] {
29
+ background-color: $white;
30
+ color: $ink_lightest;
31
+ border: dashed 1px $ink_lightest;
32
+ }
33
+
34
+ &[class*=_large] {
35
+ font-size: $font_large;
36
+ padding: 0 15px;
37
+ height: 40px;
38
+ }
39
+
40
+ &[class*=_small] {
41
+ font-size: $font_smaller;
42
+ padding: 0 7px;
43
+ height: 24px;
44
+ line-height: normal;
45
+ }
46
+
47
+ &.red {
48
+ background: $power_red;
49
+ border: none;
50
+ color: $white;
51
+ }
52
+ }
53
+ }
@@ -0,0 +1,15 @@
1
+ {
2
+ "variations": [
3
+ {
4
+ "name": "primary",
5
+ "props": {
6
+ "type": "primary",
7
+ "dark": false,
8
+ "text": "Default Button"
9
+ }
10
+ },
11
+ {
12
+ "name": "danger"
13
+ }
14
+ ]
15
+ }
@@ -0,0 +1,87 @@
1
+ module Playbook
2
+ module PbButton
3
+ class Button < Playbook::PbKit::Base
4
+ PROPS = [:configured_classname,
5
+ :configured_dark,
6
+ :configured_data,
7
+ :configured_id,
8
+ :configured_size,
9
+ :configured_text,
10
+ :configured_type,
11
+ :configured_wrapperclass].freeze
12
+
13
+ def initialize(classname: default_configuration,
14
+ dark: default_configuration,
15
+ data: default_configuration,
16
+ id: default_configuration,
17
+ text: default_configuration,
18
+ type: default_configuration,
19
+ size: default_configuration,
20
+ wrapperclass: default_configuration)
21
+ self.configured_classname = classname
22
+ self.configured_dark = dark
23
+ self.configured_data = data
24
+ self.configured_id = id
25
+ self.configured_text = text
26
+ self.configured_type = type
27
+ self.configured_size = size
28
+ self.configured_wrapperclass = wrapperclass
29
+ end
30
+
31
+ def wrapperclass
32
+ if configured_wrapperclass == default_configuration
33
+ "kit_btn_wrapper"
34
+ else
35
+ configured_wrapperclass
36
+ end
37
+ end
38
+
39
+ def text
40
+ if configured_text == default_configuration
41
+ "Button"
42
+ else
43
+ configured_text
44
+ end
45
+ end
46
+
47
+ def type
48
+ if configured_type == default_configuration
49
+ ""
50
+ else
51
+ "_#{configured_type}"
52
+ end
53
+ end
54
+
55
+ def size
56
+ if configured_size == default_configuration
57
+ ""
58
+ else
59
+ "_#{configured_size}"
60
+ end
61
+ end
62
+
63
+ def dark
64
+ if configured_dark == default_configuration
65
+ ""
66
+ else
67
+ if (configured_dark == true)
68
+ "_dark"
69
+ end
70
+ end
71
+ end
72
+
73
+ def to_partial_path
74
+ "pb_button/button"
75
+ end
76
+
77
+ private
78
+
79
+ DEFAULT = Object.new
80
+ private_constant :DEFAULT
81
+ def default_configuration
82
+ DEFAULT
83
+ end
84
+ attr_accessor(*PROPS)
85
+ end
86
+ end
87
+ end
@@ -0,0 +1,3 @@
1
+ <%= pb_rails("button", props: { type: "primary" }) %>
2
+ <%= pb_rails("button", props: { type: "danger" }) %>
3
+ <%= pb_rails("button", props: { type: "dashed" }) %>
@@ -0,0 +1,14 @@
1
+ import React from "react"
2
+ import Button from "../_button.jsx"
3
+
4
+ function ButtonDark() {
5
+ return (
6
+ <div>
7
+ <Button type="primary"></Button>
8
+ <Button type="danger"></Button>
9
+ <Button type="dashed"></Button>
10
+ </div>
11
+ )
12
+ }
13
+
14
+ export default ButtonDark;
@@ -0,0 +1,3 @@
1
+ <%= pb_rails("button", props: { type: "primary" }) %>
2
+ <%= pb_rails("button", props: { type: "danger" }) %>
3
+ <%= pb_rails("button", props: { type: "dashed" }) %>
@@ -0,0 +1,14 @@
1
+ import React from "react"
2
+ import Button from "../_button.jsx"
3
+
4
+ function ButtonLight() {
5
+ return (
6
+ <div>
7
+ <Button type="primary"></Button>
8
+ <Button type="danger"></Button>
9
+ <Button type="dashed"></Button>
10
+ </div>
11
+ )
12
+ }
13
+
14
+ export default ButtonLight;
@@ -0,0 +1,3 @@
1
+ <%= pb_rails("button", props: { type: "primary", size: "small" }) %>
2
+ <%= pb_rails("button", props: { type: "primary", size: "medium" }) %>
3
+ <%= pb_rails("button", props: { type: "primary", size: "large" }) %>
@@ -0,0 +1,14 @@
1
+ import React from "react"
2
+ import Button from "../_button.jsx"
3
+
4
+ function ButtonSizes() {
5
+ return (
6
+ <div>
7
+ <Button type="primary" size="small"></Button>
8
+ <Button type="primary" size="medium"></Button>
9
+ <Button type="primary" size="large"></Button>
10
+ </div>
11
+ )
12
+ }
13
+
14
+ export default ButtonSizes;
@@ -0,0 +1,9 @@
1
+ examples:
2
+ rails:
3
+ - button_sizes: Button Sizes
4
+ - button_light: Buttons Light UI
5
+ - button_dark: Buttons Dark UI
6
+ react:
7
+ - button_sizes: Button Sizes
8
+ - button_light: Buttons Light UI
9
+ - button_dark: Buttons Dark UI
@@ -0,0 +1,3 @@
1
+ export {default as ButtonDark} from './_button_dark.jsx';
2
+ export {default as ButtonLight} from './_button_light.jsx';
3
+ export {default as ButtonSizes} from './_button_sizes.jsx';
@@ -0,0 +1,2 @@
1
+ <%= content_tag(:"#{object.tag}", object.text,
2
+ class: object.classname("caption#{object.large}#{object.dark}")) %>
@@ -0,0 +1,39 @@
1
+ import React from "react";
2
+ import PropTypes from "prop-types";
3
+
4
+ const propTypes = {
5
+ tag: PropTypes.string.isRequired,
6
+ text: PropTypes.string.isRequired,
7
+ large: PropTypes.bool,
8
+ dark: PropTypes.bool
9
+ };
10
+
11
+ const defaultProps = {
12
+ tag: "div",
13
+ text: "Hello Cool React Caption",
14
+ large: false,
15
+ dark: false
16
+ };
17
+
18
+ class Caption extends React.Component {
19
+ render() {
20
+ const { tag, text, large, dark } = this.props;
21
+ const Tag = `${tag}`;
22
+ return (
23
+ <Tag
24
+ className={
25
+ `caption` +
26
+ (large === true ? "_lg" : "") +
27
+ (dark === true ? "_dark" : "")
28
+ }
29
+ >
30
+ {text}
31
+ </Tag>
32
+ );
33
+ }
34
+ }
35
+
36
+ Caption.propTypes = propTypes;
37
+ Caption.defaultProps = defaultProps;
38
+
39
+ export default Caption;
@@ -0,0 +1,5 @@
1
+ @import "caption_mixin";
2
+
3
+ .caption {
4
+ @include caption;
5
+ }
@@ -0,0 +1,5 @@
1
+ @import "caption_mixin";
2
+
3
+ .caption_lg {
4
+ @include caption_lg;
5
+ }
@@ -0,0 +1,23 @@
1
+ @import "../tokens/colors";
2
+ @import "../tokens/typography";
3
+
4
+ @mixin caption($font_size: $font_smaller) {
5
+ &, &_dark {
6
+ @if $font_size == 12px {
7
+ font-weight: $bold;
8
+ }
9
+ text-transform: uppercase;
10
+ font-size: $font_size;
11
+ }
12
+ & {
13
+ color: $ink_lightest;
14
+ }
15
+ &_dark {
16
+ color: $white_opacity_6;
17
+ }
18
+ }
19
+
20
+
21
+ @mixin caption_lg {
22
+ @include caption($font_large);
23
+ }
@@ -0,0 +1,78 @@
1
+ module Playbook
2
+ module PbCaption
3
+ class Caption < Playbook::PbKit::Base
4
+ PROPS = [:configured_classname,
5
+ :configured_dark,
6
+ :configured_data,
7
+ :configured_id,
8
+ :configured_large,
9
+ :configured_tag,
10
+ :configured_text].freeze
11
+
12
+ def initialize(classname: default_configuration,
13
+ dark: default_configuration,
14
+ data: default_configuration,
15
+ id: default_configuration,
16
+ large: default_configuration,
17
+ tag: default_configuration,
18
+ text: default_configuration)
19
+ self.configured_classname = classname
20
+ self.configured_dark = dark
21
+ self.configured_data = data
22
+ self.configured_id = id
23
+ self.configured_large = large
24
+ self.configured_tag = tag
25
+ self.configured_text = text
26
+ end
27
+
28
+ def tag
29
+ if configured_tag == default_configuration
30
+ "div"
31
+ else
32
+ configured_tag
33
+ end
34
+ end
35
+
36
+ def text
37
+ if configured_text == default_configuration
38
+ "Caption"
39
+ else
40
+ configured_text
41
+ end
42
+ end
43
+
44
+ def large
45
+ if configured_large == default_configuration
46
+ ""
47
+ else
48
+ if (configured_large == true)
49
+ "_lg"
50
+ end
51
+ end
52
+ end
53
+
54
+ def dark
55
+ if configured_dark == default_configuration
56
+ ""
57
+ else
58
+ if (configured_dark == true)
59
+ "_dark"
60
+ end
61
+ end
62
+ end
63
+
64
+ def to_partial_path
65
+ "pb_caption/caption"
66
+ end
67
+
68
+ private
69
+
70
+ DEFAULT = Object.new
71
+ private_constant :DEFAULT
72
+ def default_configuration
73
+ DEFAULT
74
+ end
75
+ attr_accessor(*PROPS)
76
+ end
77
+ end
78
+ end