playbook_ui 6.6.0 → 6.8.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (360) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -2
  3. data/app/controllers/playbook/application_controller.rb +3 -1
  4. data/app/controllers/playbook/pages_controller.rb +21 -1
  5. data/app/helpers/playbook/application_helper.rb +19 -0
  6. data/app/helpers/playbook/pb_kit_helper.rb +18 -2
  7. data/app/pb_kits/playbook/config/_kit_example.html.erb +3 -3
  8. data/app/pb_kits/playbook/config/_kit_ui.html.erb +2 -1
  9. data/app/pb_kits/playbook/config/_pb_kit_api.html.erb +10 -12
  10. data/app/pb_kits/playbook/index.js +1 -0
  11. data/app/pb_kits/playbook/packs/examples.js +2 -0
  12. data/app/pb_kits/playbook/packs/site_styles/_site-style.scss +15 -4
  13. data/app/pb_kits/playbook/packs/site_styles/docs/_kit_doc.scss +26 -73
  14. data/app/pb_kits/playbook/packs/site_styles/docs/_kits_examples.scss +0 -3
  15. data/app/pb_kits/playbook/packs/site_styles/docs/_markdown.scss +8 -2
  16. data/app/pb_kits/playbook/pb_avatar/_avatar.jsx +13 -4
  17. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +6 -1
  18. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.jsx +6 -1
  19. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_status.jsx +5 -1
  20. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.jsx +3 -1
  21. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.jsx +2 -1
  22. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click.jsx +2 -1
  23. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.jsx +5 -1
  24. data/app/pb_kits/playbook/pb_avatar_action_button/docs/example.yml +1 -9
  25. data/app/pb_kits/playbook/pb_avatar_action_button/docs/index.js +0 -4
  26. data/app/pb_kits/playbook/pb_badge/_badge.jsx +4 -2
  27. data/app/pb_kits/playbook/pb_badge/docs/_badge_colors.jsx +19 -1
  28. data/app/pb_kits/playbook/pb_badge/docs/_badge_default.jsx +4 -1
  29. data/app/pb_kits/playbook/pb_badge/docs/_badge_rounded.jsx +4 -1
  30. data/app/pb_kits/playbook/pb_badge/docs/example.yml +1 -2
  31. data/app/pb_kits/playbook/pb_badge/docs/index.js +0 -1
  32. data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx +1 -1
  33. data/app/pb_kits/playbook/pb_body/docs/_body_block.jsx +2 -2
  34. data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx +6 -1
  35. data/app/pb_kits/playbook/pb_body/docs/example.yml +2 -4
  36. data/app/pb_kits/playbook/pb_body/docs/index.js +0 -1
  37. data/app/pb_kits/playbook/pb_button/_button.jsx +5 -1
  38. data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.jsx +2 -1
  39. data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx +2 -1
  40. data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx +6 -2
  41. data/app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx +2 -1
  42. data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx +4 -1
  43. data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx +4 -1
  44. data/app/pb_kits/playbook/pb_button/docs/_button_options.jsx +2 -1
  45. data/app/pb_kits/playbook/pb_button/docs/example.yml +0 -2
  46. data/app/pb_kits/playbook/pb_button/docs/index.js +0 -1
  47. data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.jsx +5 -1
  48. data/app/pb_kits/playbook/pb_caption/_caption.jsx +2 -2
  49. data/app/pb_kits/playbook/pb_caption/docs/_caption_light.jsx +7 -2
  50. data/app/pb_kits/playbook/pb_caption/docs/example.yml +2 -6
  51. data/app/pb_kits/playbook/pb_caption/docs/index.js +0 -1
  52. data/app/pb_kits/playbook/pb_card/_card.scss +0 -3
  53. data/app/pb_kits/playbook/pb_card/docs/_card_border_none.jsx +7 -4
  54. data/app/pb_kits/playbook/pb_card/docs/_card_content.jsx +3 -3
  55. data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx +39 -13
  56. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx +13 -4
  57. data/app/pb_kits/playbook/pb_card/docs/_card_light.jsx +2 -2
  58. data/app/pb_kits/playbook/pb_card/docs/_card_padding.jsx +37 -7
  59. data/app/pb_kits/playbook/pb_card/docs/_card_selected.jsx +8 -3
  60. data/app/pb_kits/playbook/pb_card/docs/_card_separator.jsx +13 -4
  61. data/app/pb_kits/playbook/pb_card/docs/_card_shadow.jsx +25 -5
  62. data/app/pb_kits/playbook/pb_card/docs/example.yml +0 -2
  63. data/app/pb_kits/playbook/pb_card/docs/index.js +0 -1
  64. data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx +5 -2
  65. data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +3 -1
  66. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_checked.jsx +2 -1
  67. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom.jsx +5 -2
  68. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.jsx +2 -1
  69. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.jsx +2 -1
  70. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_options.html.erb +10 -0
  71. data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +1 -4
  72. data/app/pb_kits/playbook/pb_checkbox/docs/index.js +0 -2
  73. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.html.erb +1 -1
  74. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx +130 -0
  75. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss +1 -1
  76. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +39 -0
  77. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +29 -0
  78. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +28 -0
  79. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_inner_sizes.jsx +117 -0
  80. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +53 -0
  81. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +30 -0
  82. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx +45 -0
  83. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx +30 -0
  84. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx +45 -0
  85. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +11 -0
  86. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +9 -0
  87. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx +5 -1
  88. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_click.jsx +2 -1
  89. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.jsx +5 -1
  90. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx +3 -1
  91. data/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml +0 -2
  92. data/app/pb_kits/playbook/pb_circle_icon_button/docs/index.js +0 -1
  93. data/app/pb_kits/playbook/pb_contact/_contact.jsx +5 -1
  94. data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx +6 -1
  95. data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx +5 -1
  96. data/app/pb_kits/playbook/pb_currency/_currency.jsx +5 -1
  97. data/app/pb_kits/playbook/pb_currency/docs/_currency_large.jsx +4 -1
  98. data/app/pb_kits/playbook/pb_currency/docs/_currency_medium.jsx +4 -1
  99. data/app/pb_kits/playbook/pb_currency/docs/_currency_small.jsx +4 -1
  100. data/app/pb_kits/playbook/pb_currency/docs/example.yml +1 -2
  101. data/app/pb_kits/playbook/pb_currency/docs/index.js +0 -1
  102. data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx +5 -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_picker/_date_picker.jsx +2 -2
  106. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js +4 -0
  107. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx +34 -0
  108. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md +3 -0
  109. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +1 -0
  110. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
  111. data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx +5 -1
  112. data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx +2 -2
  113. data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.jsx +5 -1
  114. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx +2 -2
  115. data/app/pb_kits/playbook/pb_flex/_flex.jsx +2 -2
  116. data/app/pb_kits/playbook/pb_flex/_flex_item.jsx +1 -1
  117. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +9 -1
  118. data/app/pb_kits/playbook/pb_form/form_builder/checkbox_field.rb +7 -2
  119. data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx +3 -2
  120. data/app/pb_kits/playbook/pb_gauge/_gauge.jsx +1 -1
  121. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.jsx +5 -1
  122. data/app/pb_kits/playbook/pb_hashtag/docs/example.yml +0 -2
  123. data/app/pb_kits/playbook/pb_hashtag/docs/index.js +0 -1
  124. data/app/pb_kits/playbook/pb_highlight/_highlight.jsx +1 -1
  125. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.jsx +2 -2
  126. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx +3 -1
  127. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_modified.jsx +2 -1
  128. data/app/pb_kits/playbook/pb_home_address_street/docs/example.yml +1 -3
  129. data/app/pb_kits/playbook/pb_home_address_street/docs/index.js +0 -1
  130. data/app/pb_kits/playbook/pb_icon/_icon.jsx +2 -2
  131. data/app/pb_kits/playbook/pb_icon_value/_icon_value.jsx +5 -1
  132. data/app/pb_kits/playbook/pb_image/_image.jsx +5 -1
  133. data/app/pb_kits/playbook/pb_label_pill/_label_pill.jsx +5 -1
  134. data/app/pb_kits/playbook/pb_label_value/docs/example.yml +1 -7
  135. data/app/pb_kits/playbook/pb_label_value/docs/index.js +0 -4
  136. data/app/pb_kits/playbook/pb_layout/_layout.jsx +4 -4
  137. data/app/pb_kits/playbook/pb_legend/docs/example.yml +1 -5
  138. data/app/pb_kits/playbook/pb_legend/docs/index.js +0 -2
  139. data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx +1 -1
  140. data/app/pb_kits/playbook/pb_list/_list.jsx +3 -2
  141. data/app/pb_kits/playbook/pb_list/_list_item.jsx +3 -2
  142. data/app/pb_kits/playbook/pb_list/docs/example.yml +1 -11
  143. data/app/pb_kits/playbook/pb_list/docs/index.js +0 -6
  144. data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml +1 -3
  145. data/app/pb_kits/playbook/pb_loading_inline/docs/index.js +0 -1
  146. data/app/pb_kits/playbook/pb_logistic/_logistic.jsx +5 -1
  147. data/app/pb_kits/playbook/pb_message/_message.jsx +5 -1
  148. data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx +5 -2
  149. data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml +1 -2
  150. data/app/pb_kits/playbook/pb_multiple_users/docs/index.js +0 -1
  151. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +1 -2
  152. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +0 -1
  153. data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +24 -0
  154. data/app/pb_kits/playbook/pb_nav/_nav.jsx +2 -2
  155. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +28 -0
  156. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx +13 -4
  157. data/app/pb_kits/playbook/pb_online_status/docs/example.yml +1 -2
  158. data/app/pb_kits/playbook/pb_online_status/docs/index.js +0 -1
  159. data/app/pb_kits/playbook/pb_person/_person.jsx +5 -1
  160. data/app/pb_kits/playbook/pb_person_contact/_person_contact.jsx +5 -1
  161. data/app/pb_kits/playbook/pb_pill/docs/example.yml +1 -3
  162. data/app/pb_kits/playbook/pb_pill/docs/index.js +0 -1
  163. data/app/pb_kits/playbook/pb_popover/_popover.jsx +5 -1
  164. data/app/pb_kits/playbook/pb_progress_pills/docs/example.yml +1 -4
  165. data/app/pb_kits/playbook/pb_progress_pills/docs/index.js +0 -2
  166. data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.jsx +4 -4
  167. data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx +1 -1
  168. data/app/pb_kits/playbook/pb_progress_step/docs/example.yml +0 -2
  169. data/app/pb_kits/playbook/pb_progress_step/docs/index.js +0 -1
  170. data/app/pb_kits/playbook/pb_radio/_radio.html.erb +1 -1
  171. data/app/pb_kits/playbook/pb_radio/docs/_radio_options.html.erb +9 -0
  172. data/app/pb_kits/playbook/pb_radio/docs/example.yml +1 -4
  173. data/app/pb_kits/playbook/pb_radio/docs/index.js +0 -3
  174. data/app/pb_kits/playbook/pb_radio/radio.rb +2 -4
  175. data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx +1 -1
  176. data/app/pb_kits/playbook/pb_section_separator/docs/example.yml +1 -2
  177. data/app/pb_kits/playbook/pb_section_separator/docs/index.js +0 -1
  178. data/app/pb_kits/playbook/pb_select/_select.scss +1 -1
  179. data/app/pb_kits/playbook/pb_select/docs/example.yml +1 -4
  180. data/app/pb_kits/playbook/pb_select/docs/index.js +0 -2
  181. data/app/pb_kits/playbook/pb_selectable_card/docs/example.yml +1 -2
  182. data/app/pb_kits/playbook/pb_selectable_card/docs/index.js +0 -1
  183. data/app/pb_kits/playbook/pb_selectable_card_icon/docs/example.yml +1 -4
  184. data/app/pb_kits/playbook/pb_selectable_card_icon/docs/index.js +0 -1
  185. data/app/pb_kits/playbook/pb_selectable_icon/docs/example.yml +1 -3
  186. data/app/pb_kits/playbook/pb_selectable_icon/docs/index.js +0 -1
  187. data/app/pb_kits/playbook/pb_stat_change/_stat_change.jsx +2 -2
  188. data/app/pb_kits/playbook/pb_stat_value/_stat_value.jsx +3 -3
  189. data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.jsx +6 -1
  190. data/app/pb_kits/playbook/pb_table/_table.jsx +2 -2
  191. data/app/pb_kits/playbook/pb_table/docs/example.yml +1 -4
  192. data/app/pb_kits/playbook/pb_table/docs/index.js +0 -2
  193. data/app/pb_kits/playbook/pb_text_input/_text_input.jsx +1 -1
  194. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +0 -5
  195. data/app/pb_kits/playbook/pb_text_input/docs/index.js +0 -2
  196. data/app/pb_kits/playbook/pb_textarea/_textarea.jsx +1 -1
  197. data/app/pb_kits/playbook/pb_textarea/docs/example.yml +1 -4
  198. data/app/pb_kits/playbook/pb_textarea/docs/index.js +0 -2
  199. data/app/pb_kits/playbook/pb_time/_time.jsx +2 -2
  200. data/app/pb_kits/playbook/pb_time/docs/_time_default.html.erb +4 -4
  201. data/app/pb_kits/playbook/pb_time/docs/_time_timestamp.html.erb +2 -1
  202. data/app/pb_kits/playbook/pb_time/docs/_time_timezone.html.erb +1 -5
  203. data/app/pb_kits/playbook/pb_time/docs/example.yml +0 -2
  204. data/app/pb_kits/playbook/pb_time/docs/index.js +0 -1
  205. data/app/pb_kits/playbook/pb_time/time.rb +1 -1
  206. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.jsx +1 -1
  207. data/app/pb_kits/playbook/pb_time_range_inline/docs/example.yml +0 -3
  208. data/app/pb_kits/playbook/pb_time_range_inline/docs/index.js +0 -1
  209. data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx +3 -3
  210. data/app/pb_kits/playbook/pb_time_stacked/docs/example.yml +1 -3
  211. data/app/pb_kits/playbook/pb_time_stacked/docs/index.js +0 -1
  212. data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx +1 -1
  213. data/app/pb_kits/playbook/pb_title/_title.jsx +5 -1
  214. data/app/pb_kits/playbook/pb_title/docs/example.yml +1 -2
  215. data/app/pb_kits/playbook/pb_title/docs/index.js +0 -1
  216. data/app/pb_kits/playbook/pb_title_count/_title_count.jsx +5 -1
  217. data/app/pb_kits/playbook/pb_title_count/docs/example.yml +0 -4
  218. data/app/pb_kits/playbook/pb_title_count/docs/index.js +0 -2
  219. data/app/pb_kits/playbook/pb_title_detail/_title_detail.jsx +1 -1
  220. data/app/pb_kits/playbook/pb_toggle/_toggle.jsx +3 -3
  221. data/app/pb_kits/playbook/pb_toggle/_toggle.scss +41 -43
  222. data/app/pb_kits/playbook/pb_toggle/docs/example.yml +0 -2
  223. data/app/pb_kits/playbook/pb_toggle/docs/index.js +0 -1
  224. data/app/pb_kits/playbook/pb_toggle/toggle.rb +1 -1
  225. data/app/pb_kits/playbook/pb_user/docs/example.yml +1 -4
  226. data/app/pb_kits/playbook/pb_user/docs/index.js +0 -3
  227. data/app/pb_kits/playbook/pb_user_badge/_user_badge.jsx +5 -2
  228. data/app/pb_kits/playbook/pb_user_badge/docs/example.yml +0 -5
  229. data/app/pb_kits/playbook/pb_user_badge/docs/index.js +0 -1
  230. data/app/pb_kits/playbook/pb_weekday_stacked/docs/example.yml +0 -3
  231. data/app/pb_kits/playbook/pb_weekday_stacked/docs/index.js +0 -1
  232. data/app/pb_kits/playbook/plugins/pb_chart.js +1 -1
  233. data/app/pb_kits/playbook/tokens/_colors.scss +1 -1
  234. data/app/views/layouts/playbook/_nav.html.erb +31 -7
  235. data/app/views/layouts/playbook/_sidebar.html.erb +6 -7
  236. data/app/views/layouts/playbook/application.html.erb +26 -0
  237. data/app/views/playbook/pages/kit_show.html.erb +4 -4
  238. data/lib/generators/kit/templates/kit_jsx.erb.tt +1 -1
  239. data/lib/playbook/version.rb +1 -2
  240. metadata +19 -123
  241. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions_dark.html.erb +0 -17
  242. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions_dark.jsx +0 -21
  243. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_dark.html.erb +0 -9
  244. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_dark.jsx +0 -14
  245. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click_dark.html.erb +0 -15
  246. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click_dark.jsx +0 -16
  247. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement_dark.html.erb +0 -31
  248. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement_dark.jsx +0 -33
  249. data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip_dark.html.erb +0 -12
  250. data/app/pb_kits/playbook/pb_badge/docs/_badge_dark.html.erb +0 -124
  251. data/app/pb_kits/playbook/pb_badge/docs/_badge_dark.jsx +0 -160
  252. data/app/pb_kits/playbook/pb_body/docs/_body_dark.html.erb +0 -28
  253. data/app/pb_kits/playbook/pb_body/docs/_body_dark.jsx +0 -35
  254. data/app/pb_kits/playbook/pb_button/docs/_button_default_dark.html.erb +0 -22
  255. data/app/pb_kits/playbook/pb_button/docs/_button_default_dark.jsx +0 -31
  256. data/app/pb_kits/playbook/pb_caption/docs/_caption_dark.html.erb +0 -3
  257. data/app/pb_kits/playbook/pb_caption/docs/_caption_dark.jsx +0 -25
  258. data/app/pb_kits/playbook/pb_card/docs/_card_dark.html.erb +0 -3
  259. data/app/pb_kits/playbook/pb_card/docs/_card_dark.jsx +0 -12
  260. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_dark.html.erb +0 -4
  261. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_dark.jsx +0 -17
  262. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_dark_error.html.erb +0 -7
  263. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_dark_error.jsx +0 -18
  264. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_dark.html.erb +0 -29
  265. data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_dark.jsx +0 -38
  266. data/app/pb_kits/playbook/pb_currency/docs/_currency_dark.html.erb +0 -23
  267. data/app/pb_kits/playbook/pb_currency/docs/_currency_dark.jsx +0 -32
  268. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_dark.html.erb +0 -13
  269. data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_dark.jsx +0 -41
  270. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_dark.html.erb +0 -12
  271. data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_dark.jsx +0 -20
  272. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_dark.html.erb +0 -24
  273. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_dark.jsx +0 -35
  274. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_dark.html.erb +0 -43
  275. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_dark.jsx +0 -54
  276. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples_dark.html.erb +0 -80
  277. data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples_dark.jsx +0 -101
  278. data/app/pb_kits/playbook/pb_legend/docs/_legend_dark.html.erb +0 -5
  279. data/app/pb_kits/playbook/pb_legend/docs/_legend_dark.jsx +0 -21
  280. data/app/pb_kits/playbook/pb_legend/docs/_legend_dark_prefix.html.erb +0 -1
  281. data/app/pb_kits/playbook/pb_legend/docs/_legend_dark_prefix.jsx +0 -15
  282. data/app/pb_kits/playbook/pb_list/docs/_list_dark.html.erb +0 -7
  283. data/app/pb_kits/playbook/pb_list/docs/_list_dark.jsx +0 -19
  284. data/app/pb_kits/playbook/pb_list/docs/_list_dark_borderless.html.erb +0 -7
  285. data/app/pb_kits/playbook/pb_list/docs/_list_dark_borderless.jsx +0 -22
  286. data/app/pb_kits/playbook/pb_list/docs/_list_dark_lg.html.erb +0 -7
  287. data/app/pb_kits/playbook/pb_list/docs/_list_dark_lg.jsx +0 -22
  288. data/app/pb_kits/playbook/pb_list/docs/_list_dark_ordered.html.erb +0 -7
  289. data/app/pb_kits/playbook/pb_list/docs/_list_dark_ordered.jsx +0 -22
  290. data/app/pb_kits/playbook/pb_list/docs/_list_dark_xpadding.html.erb +0 -7
  291. data/app/pb_kits/playbook/pb_list/docs/_list_dark_xpadding.jsx +0 -22
  292. data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_dark.html.erb +0 -13
  293. data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_dark.jsx +0 -20
  294. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_dark.html.erb +0 -41
  295. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_dark.jsx +0 -52
  296. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_dark.html.erb +0 -53
  297. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_dark.jsx +0 -62
  298. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_dark.html.erb +0 -9
  299. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_dark.jsx +0 -28
  300. data/app/pb_kits/playbook/pb_pill/docs/_pill_dark.html.erb +0 -52
  301. data/app/pb_kits/playbook/pb_pill/docs/_pill_dark.jsx +0 -69
  302. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_dark.html.erb +0 -1
  303. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_dark.jsx +0 -20
  304. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_status_dark.html.erb +0 -1
  305. data/app/pb_kits/playbook/pb_progress_pills/docs/_progress_pills_status_dark.jsx +0 -19
  306. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_dark.html.erb +0 -34
  307. data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_dark.jsx +0 -18
  308. data/app/pb_kits/playbook/pb_radio/docs/_radio_dark.html.erb +0 -25
  309. data/app/pb_kits/playbook/pb_radio/docs/_radio_dark.jsx +0 -33
  310. data/app/pb_kits/playbook/pb_radio/docs/_radio_dark_error.html.erb +0 -7
  311. data/app/pb_kits/playbook/pb_radio/docs/_radio_dark_error.jsx +0 -17
  312. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dark.html.erb +0 -1
  313. data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dark.jsx +0 -14
  314. data/app/pb_kits/playbook/pb_select/docs/_select_dark.html.erb +0 -24
  315. data/app/pb_kits/playbook/pb_select/docs/_select_dark.jsx +0 -33
  316. data/app/pb_kits/playbook/pb_select/docs/_select_dark_error.html.erb +0 -25
  317. data/app/pb_kits/playbook/pb_select/docs/_select_dark_error.jsx +0 -39
  318. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_dark.html.erb +0 -45
  319. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_dark.jsx +0 -72
  320. data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_dark.html.erb +0 -30
  321. data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_dark.jsx +0 -40
  322. data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_dark.html.erb +0 -26
  323. data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_dark.jsx +0 -43
  324. data/app/pb_kits/playbook/pb_table/docs/_table_container_dark.html.erb +0 -34
  325. data/app/pb_kits/playbook/pb_table/docs/_table_container_dark.jsx +0 -47
  326. data/app/pb_kits/playbook/pb_table/docs/_table_dark.html.erb +0 -34
  327. data/app/pb_kits/playbook/pb_table/docs/_table_dark.jsx +0 -46
  328. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_dark.html.erb +0 -5
  329. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_dark.jsx +0 -78
  330. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_dark_error.html.erb +0 -14
  331. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_dark_error.jsx +0 -18
  332. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_dark.html.erb +0 -9
  333. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_dark.jsx +0 -34
  334. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_dark_error.html.erb +0 -6
  335. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_dark_error.jsx +0 -19
  336. data/app/pb_kits/playbook/pb_time/docs/_time_dark.html.erb +0 -70
  337. data/app/pb_kits/playbook/pb_time/docs/_time_dark.jsx +0 -21
  338. data/app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_dark.html.erb +0 -72
  339. data/app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_dark.jsx +0 -81
  340. data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_dark.html.erb +0 -1
  341. data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_dark.jsx +0 -15
  342. data/app/pb_kits/playbook/pb_title/docs/_title_dark.html.erb +0 -8
  343. data/app/pb_kits/playbook/pb_title/docs/_title_dark.jsx +0 -35
  344. data/app/pb_kits/playbook/pb_title_count/docs/_title_count_align_dark.html.erb +0 -23
  345. data/app/pb_kits/playbook/pb_title_count/docs/_title_count_align_dark.jsx +0 -34
  346. data/app/pb_kits/playbook/pb_title_count/docs/_title_count_dark.html.erb +0 -23
  347. data/app/pb_kits/playbook/pb_title_count/docs/_title_count_dark.jsx +0 -34
  348. data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_dark.html.erb +0 -19
  349. data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_dark.jsx +0 -29
  350. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_size.html.erb +0 -11
  351. data/app/pb_kits/playbook/pb_toggle/docs/_toggle_size.jsx +0 -44
  352. data/app/pb_kits/playbook/pb_user/docs/_user_dark.html.erb +0 -42
  353. data/app/pb_kits/playbook/pb_user/docs/_user_dark.jsx +0 -55
  354. data/app/pb_kits/playbook/pb_user/docs/_user_text_only_dark.html.erb +0 -19
  355. data/app/pb_kits/playbook/pb_user/docs/_user_text_only_dark.jsx +0 -26
  356. data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_dark.html.erb +0 -13
  357. data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_dark.jsx +0 -27
  358. data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_dark.html.erb +0 -1
  359. data/app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_dark.jsx +0 -14
  360. data/app/views/layouts/playbook/application.html.slim +0 -22
@@ -6,7 +6,6 @@ examples:
6
6
  - time_timestamp: Timestamp Values
7
7
  - time_timezone: Handling Timezones
8
8
  - time_align: Alignment
9
- - time_dark: Dark
10
9
 
11
10
  react:
12
11
  - time_default: Default
@@ -14,4 +13,3 @@ examples:
14
13
  - time_timestamp: Timestamp Values
15
14
  - time_timezone: Handling Timezones
16
15
  - time_align: Alignment
17
- - time_dark: Dark
@@ -2,5 +2,4 @@ export { default as TimeDefault } from './_time_default.jsx'
2
2
  export { default as TimeSizes } from './_time_sizes.jsx'
3
3
  export { default as TimeTimestamp } from './_time_timestamp.jsx'
4
4
  export { default as TimeAlign } from './_time_align.jsx'
5
- export { default as TimeDark } from './_time_dark.jsx'
6
5
  export { default as TimeTimezone } from './_time_timezone.jsx'
@@ -18,7 +18,7 @@ module Playbook
18
18
  prop :show_icon, type: Playbook::Props::Boolean,
19
19
  default: false
20
20
  prop :show_timezone, type: Playbook::Props::Boolean,
21
- default: false
21
+ default: true
22
22
 
23
23
  def classname
24
24
  # convert deprecated prop values
@@ -78,7 +78,7 @@ const TimeRangeInline = (props: TimeRangeInlineProps) => {
78
78
 
79
79
  return (
80
80
  <div
81
- className={classnames('pb_time_range_inline_kit_' + alignment, className, globalProps(props))}
81
+ className={classnames('pb_time_range_inline_kit_' + alignment, globalProps(props), className)}
82
82
  >
83
83
  <div className="pb_time_range_inline_wrapper">
84
84
  <If condition={size == 'xs'}>
@@ -2,10 +2,7 @@ examples:
2
2
 
3
3
  rails:
4
4
  - time_range_inline_default: Default
5
- - time_range_inline_dark: Dark
6
5
 
7
6
 
8
7
  react:
9
8
  - time_range_inline_default: Default
10
- - time_range_inline_dark: Dark
11
-
@@ -1,2 +1 @@
1
1
  export { default as TimeRangeInlineDefault } from './_time_range_inline_default.jsx'
2
- export { default as TimeRangeInlineDark } from './_time_range_inline_dark.jsx'
@@ -26,11 +26,11 @@ type TimeStackedProps = {
26
26
  const TimeStacked = (props: TimeStackedProps) => {
27
27
  const { className, dark = false, date, tag = 'body' } = props
28
28
  const classes = classnames(
29
- className,
30
29
  buildCss('pb_time_stacked_kit', {
31
- dark: dark,
30
+ dark,
32
31
  }),
33
- globalProps(props)
32
+ globalProps(props),
33
+ className
34
34
  )
35
35
 
36
36
  const tagClasses = classnames(buildCss('pb_time_stacked_kit', tag))
@@ -3,11 +3,9 @@ examples:
3
3
  rails:
4
4
  - time_stacked_default: Default
5
5
  - time_stacked_caption: With Caption
6
- - time_stacked_dark: Dark
6
+
7
7
 
8
8
 
9
9
  react:
10
10
  - time_stacked_default: Default
11
11
  - time_stacked_caption: With Caption
12
- - time_stacked_dark: Dark
13
-
@@ -1,3 +1,2 @@
1
1
  export { default as TimeStackedDefault } from './_time_stacked_default.jsx'
2
- export { default as TimeStackedDark } from './_time_stacked_dark.jsx'
3
2
  export { default as TimeStackedCaption } from './_time_stacked_caption.jsx'
@@ -24,7 +24,7 @@ const Timestamp = (props: TimestampProps) => {
24
24
  return (
25
25
  <div
26
26
  {...dataProps}
27
- className={classnames(className, pbCss, globalProps(props))}
27
+ className={classnames(pbCss, globalProps(props), className)}
28
28
  id={id}
29
29
  >
30
30
  <Caption
@@ -32,7 +32,11 @@ const Title = (props: TitleProps) => {
32
32
 
33
33
  const ariaProps = buildAriaProps(aria)
34
34
  const dataProps = buildDataProps(data)
35
- const classes = classnames(buildCss('pb_title_kit', size, variant), className, globalProps(props))
35
+ const classes = classnames(
36
+ buildCss('pb_title_kit', size, variant),
37
+ globalProps(props),
38
+ className
39
+ )
36
40
  const Tag = `${tag}`
37
41
 
38
42
  return (
@@ -2,8 +2,7 @@ examples:
2
2
  rails:
3
3
  - title_light: Light UI
4
4
  - title_variants: Variants
5
- - title_dark: Dark UI
5
+
6
6
  react:
7
7
  - title_light: Light UI
8
8
  - title_variants: Variants
9
- - title_dark: Dark UI
@@ -1,3 +1,2 @@
1
1
  export { default as TitleLight } from './_title_light.jsx'
2
- export { default as TitleDark } from './_title_dark.jsx'
3
2
  export { default as TitleVariants } from './_title_variants.jsx'
@@ -34,7 +34,11 @@ const TitleCount = (props: TitleCountProps) => {
34
34
  const ariaProps = buildAriaProps(aria)
35
35
  const dataProps = buildDataProps(data)
36
36
 
37
- const css = classnames(buildCss('pb_title_count_kit', align, size), className, globalProps(props))
37
+ const css = classnames(
38
+ buildCss('pb_title_count_kit', align, size),
39
+ globalProps(props),
40
+ className
41
+ )
38
42
 
39
43
  const formatCount = count.toLocaleString()
40
44
 
@@ -2,11 +2,7 @@ examples:
2
2
  rails:
3
3
  - title_count_default: Default
4
4
  - title_count_align: Align
5
- - title_count_dark: Dark
6
- - title_count_align_dark: Dark
7
5
 
8
6
  react:
9
7
  - title_count_default: Default
10
8
  - title_count_align: Align
11
- - title_count_dark: Dark
12
- - title_count_align_dark: Dark
@@ -1,4 +1,2 @@
1
1
  export { default as TitleCountDefault } from './_title_count_default.jsx'
2
2
  export { default as TitleCountAlign } from './_title_count_align.jsx'
3
- export { default as TitleCountDark } from './_title_count_dark.jsx'
4
- export { default as TitleCountAlignDark } from './_title_count_align_dark.jsx'
@@ -25,7 +25,7 @@ const TitleDetail = (props: TitleDetailProps) => {
25
25
  return (
26
26
  <div
27
27
  {...dataProps}
28
- className={classnames(className, pbCss, globalProps(props))}
28
+ className={classnames(pbCss, globalProps(props), className)}
29
29
  id={id}
30
30
  >
31
31
  <Title
@@ -34,7 +34,7 @@ const Toggle = ({
34
34
  id,
35
35
  name,
36
36
  onChange = () => {},
37
- size = 'md',
37
+ size = 'sm',
38
38
  value,
39
39
  ...props
40
40
  }: Props) => {
@@ -47,13 +47,13 @@ const Toggle = ({
47
47
  on: checked,
48
48
  off: !checked,
49
49
  }
50
- ), className)
50
+ ))
51
51
 
52
52
  return (
53
53
  <div
54
54
  {...ariaProps}
55
55
  {...dataProps}
56
- className={classnames(css, globalProps(props))}
56
+ className={classnames(css, globalProps(props), className)}
57
57
  id={id}
58
58
  >
59
59
  <label className="pb_toggle_wrapper">
@@ -2,55 +2,53 @@
2
2
 
3
3
  $color_checkbox_success: $data_1;
4
4
  $color_checkbox_default: $border_light;
5
- $transition: .2s cubic-bezier(0.95, 0.05, 0.795, 0.035);
6
- $toggle_sizes: (
7
- "sm": 50px,
8
- "md": 60px,
9
- );
5
+ $transition: .2s ease-in-out;
10
6
 
11
7
  [class^=pb_toggle_kit] {
12
8
  position: relative;
9
+ $width: 44px;
10
+ $height: $width/2;
11
+ $border_success: 3px solid $color_checkbox_success;
12
+ $border_default: 3px solid $color_checkbox_default;
13
13
 
14
- @each $name, $size in $toggle_sizes {
15
- &[class*=_#{$name}] {
16
14
 
17
- $width: $size;
18
- $height: $width/2;
19
-
20
- .pb_toggle_wrapper {
21
- .pb_toggle_control {
22
- cursor: pointer;
23
- transition: $transition;
24
- width: $width;
25
- height: $height;
26
- display: block;
27
- border-radius: $height;
28
- border: 3px solid $color_checkbox_default;
29
- background-color: $color_checkbox_default;
30
- position: relative;
31
- box-sizing: content-box;
32
- &:after {
33
- transition: $transition;
34
- content: "";
35
- width: $width/2;
36
- height: $height;
37
- display: block;
38
- background-color: $white;
39
- border-radius: 50%;
40
- position: absolute;
41
- top: 0;
42
- left: 0;
43
- }
15
+ .pb_toggle_wrapper {
16
+ .pb_toggle_control {
17
+ cursor: pointer;
18
+ transition: $transition;
19
+ width: $width;
20
+ height: $height;
21
+ display: block;
22
+ border-radius: $height;
23
+ border: $border_default;
24
+ position: relative;
25
+ box-sizing: content-box;
26
+ &:after {
27
+ transition: $transition;
28
+ content: "";
29
+ width: $width/2 - 4px;
30
+ height: $height - 4px;
31
+ background-color: $color_checkbox_default;
32
+ border-radius: 50%;
33
+ position: absolute;
34
+ top: 2px;
35
+ left: 2px;
36
+ }
37
+ &:hover {
38
+ border: $border_success;
39
+ &:after{
40
+ background-color: $color_checkbox_success;
44
41
  }
45
- input {
46
- display: none;
47
- &:checked + .pb_toggle_control {
48
- border-color: $color_checkbox_success;
49
- background-color: $color_checkbox_success;
50
- &:after{
51
- left: $width/2;
52
- }
53
- }
42
+ }
43
+ }
44
+ input {
45
+ display: none;
46
+ &:checked + .pb_toggle_control {
47
+ border: $border_success;
48
+ background-color: $color_checkbox_success;
49
+ &:after{
50
+ left: $width/2 + 2px;
51
+ background-color: $white;
54
52
  }
55
53
  }
56
54
  }
@@ -2,14 +2,12 @@ examples:
2
2
 
3
3
  rails:
4
4
  - toggle_default: Default State
5
- - toggle_size: Sizes
6
5
  - toggle_name: Name and Value
7
6
  - toggle_custom: Custom checkbox input
8
7
  - toggle_custom_radio: Custom radio inputs
9
8
 
10
9
  react:
11
10
  - toggle_default: Default State
12
- - toggle_size: Sizes
13
11
  - toggle_name: Name and Value
14
12
  - toggle_custom: Custom checkbox input
15
13
  - toggle_custom_radio: Custom radio inputs
@@ -1,5 +1,4 @@
1
1
  export { default as ToggleDefault } from './_toggle_default'
2
- export { default as ToggleSize } from './_toggle_size'
3
2
  export { default as ToggleCustom } from './_toggle_custom'
4
3
  export { default as ToggleName } from './_toggle_name'
5
4
  export { default as ToggleCustomRadio } from './_toggle_custom_radio'
@@ -16,7 +16,7 @@ module Playbook
16
16
  prop :name
17
17
  prop :size, type: Playbook::Props::Enum,
18
18
  values: %w[sm md],
19
- default: "md"
19
+ default: "sm"
20
20
  prop :value
21
21
 
22
22
  def classname
@@ -6,8 +6,7 @@ examples:
6
6
  - user_text_only: Text Only
7
7
  - user_size: Horizontal Size
8
8
  - user_vertical_size: Vertical Size
9
- - user_dark: Dark
10
- - user_text_only_dark: Text Only
9
+
11
10
 
12
11
 
13
12
 
@@ -17,5 +16,3 @@ examples:
17
16
  - user_text_only: Text Only
18
17
  - user_size: Horizontal Size
19
18
  - user_vertical_size: Vertical Size
20
- - user_dark: Dark
21
- - user_text_only_dark: Text Only
@@ -3,6 +3,3 @@ export { default as UserWithTerritory } from './_user_with_territory.jsx'
3
3
  export { default as UserTextOnly } from './_user_text_only.jsx'
4
4
  export { default as UserSize } from './_user_size.jsx'
5
5
  export { default as UserVerticalSize } from './_user_vertical_size.jsx'
6
- export { default as UserDark } from './_user_dark.jsx'
7
- export { default as UserTextOnlyDark } from './_user_text_only_dark.jsx'
8
-
@@ -26,8 +26,11 @@ const UserBadge = (props: UserBadgeProps) => {
26
26
  const image = require(`./badges/_${badge}.svg`)
27
27
  const ariaProps = buildAriaProps(aria)
28
28
  const dataProps = buildDataProps(data)
29
- const classes = classnames(buildCss('pb_user_badge_kit', size), globalProps(props),
30
- className)
29
+ const classes = classnames(
30
+ buildCss('pb_user_badge_kit', size),
31
+ globalProps(props),
32
+ className
33
+ )
31
34
 
32
35
  return (
33
36
  <div
@@ -3,12 +3,7 @@ examples:
3
3
  rails:
4
4
  - user_badge_default: Default
5
5
  - user_badge_size: Sizes
6
- - user_badge_dark: Dark
7
- - user_badge_size_dark: Sizes Dark
8
-
9
6
 
10
7
  react:
11
8
  - user_badge_default: Default
12
9
  - user_badge_size: Sizes
13
- - user_badge_dark: Dark
14
- - user_badge_size_dark: Sizes Dark
@@ -1,4 +1,3 @@
1
1
  export { default as UserBadgeDefault } from './_user_badge_default.jsx'
2
2
  export { default as UserBadgeSize } from './_user_badge_size.jsx'
3
- export { default as UserBadgeDark } from './_user_badge_dark.jsx'
4
3
  export { default as UserBadgeSizeDark } from './_user_badge_size_dark.jsx'
@@ -2,14 +2,11 @@ examples:
2
2
 
3
3
  rails:
4
4
  - weekday_stacked_default: Default
5
- - weekday_stacked_dark: Dark
6
5
  - weekday_stacked_compact: Compact
7
6
  - weekday_stacked_variant: Variant
8
7
 
9
8
 
10
9
  react:
11
10
  - weekday_stacked_default: Default
12
- - weekday_stacked_dark: Dark
13
11
  - weekday_stacked_compact: Compact
14
12
  - weekday_stacked_variant: Variant
15
-
@@ -1,4 +1,3 @@
1
1
  export { default as WeekdayStackedDefault } from './_weekday_stacked_default.jsx'
2
- export { default as WeekdayStackedDark } from './_weekday_stacked_dark.jsx'
3
2
  export { default as WeekdayStackedVariant } from './_weekday_stacked_variant.jsx'
4
3
  export { default as WeekdayStackedCompact } from './_weekday_stacked_compact.jsx'
@@ -33,7 +33,7 @@ const mapColors = (array) => {
33
33
 
34
34
  // Adjust Circle Chart Block Kit Dimensions to Match the Chart for Centering
35
35
  const alignBlockElement = (event) => {
36
- const itemToMove = document.querySelector(`#wrapper-circle-chart-${event.target.renderTo.id} .pb_circle_chart_block`)
36
+ const itemToMove = document.querySelector(`#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`)
37
37
  const chartContainer = document.querySelector(`#${event.target.renderTo.id}`)
38
38
  if (itemToMove !== null) {
39
39
  itemToMove.style.height = `${event.target.chartHeight}px`
@@ -55,7 +55,7 @@ $main_colors: (
55
55
 
56
56
  // Background colors ------------------
57
57
  $bg_light: $silver;
58
- $bg_dark: #172257;
58
+ $bg_dark: #0a0527;
59
59
  $background_colors: (
60
60
  bg_light: $bg_light,
61
61
  bg_dark: $bg_dark
@@ -1,12 +1,36 @@
1
- <div class="pb--page--topNav">
2
- <h1>
3
- <%= link_to root_url do %>
4
- <%= image_tag("pb.logo.svg") %>
1
+
2
+ <div class="pb--page--topNav <%= cookies[:dark_mode] == "true" ? 'dark' : '' %>">
3
+ <% if @playbook.nil?%>
4
+ <p>playbok is nil</p>
5
+ <% end %>
6
+ <%= pb_rails("flex", props:{spacing:"between",vertical: "center"}) do%>
7
+ <%= pb_rails("flex", props:{spacing:"between",vertical: "center"}) do%>
8
+ <%= link_to root_url do %>
9
+ <%= image_tag("pb.logo.svg") %>
10
+ <% end %>
11
+ <%= pb_rails("caption", props: { tag: "span", text: Playbook::VERSION }) %>
12
+ <% end %>
13
+ <div id="toggle-modes">
14
+ <% if cookies[:dark_mode] == "false" || cookies[:dark_mode] == nil%>
15
+ <%= pb_rails("circle_icon_button", props: {
16
+ variant: "secondary",
17
+ icon: "moon",
18
+ tag:"a",
19
+ link: enable_dark_mode_path
20
+ }) %>
21
+ <% else %>
22
+ <%= pb_rails("circle_icon_button", props: {
23
+ variant: "secondary",
24
+ icon: "sun",
25
+ tag:"a",
26
+ link: disable_dark_mode_path
27
+ }) %>
28
+ <% end %>
5
29
  <% end %>
6
- &nbsp;
7
- <%= pb_rails("caption", props: { tag: "span", text: Playbook::VERSION }) %>
8
- </h1>
30
+ </div>
31
+
9
32
  </div>
33
+ <%= pb_rails("section_separator")%>
10
34
  <% flash.each do |name, msg| %>
11
35
  <% name = "success" if name == "notice" %>
12
36
  <%= pb_rails("fixed_confirmation_toast", props: { text: msg, status: name }) %>