playbook_ui 7.0.1.pre.alpha5 → 7.0.1.pre.alpha10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 307f7d3b50e4e7f2fa0120bcc21789e4c7cdbdb7d95be1a861916bde4c60d53c
-  data.tar.gz: 60128d11456552fcb094b720a0397dd7819e114739724fd453658fbe19b2f79c
+  metadata.gz: 564d38b6ee17565260aa12a23e6bd24ffe743ee1e76495ddb3fb6c70cce2ad52
+  data.tar.gz: 0fd88fa565499b96e2e71d8a6b04e3cc2b78f443360c1b966b3ae66a946239bf
 SHA512:
-  metadata.gz: 2b60ba28e743d5e4eaabd90b07d7046de61659cebbc1ff64496dd58c98cc02c16780474fda3a1b6e66332c8dab3c66c2dc87a8b9840e83c693ab2945e499dfec
-  data.tar.gz: 79d7e15c19a592e027b8c67e56eb9ae058c4c7b3dd989fd05b0cb2111b18114b704b90b6dc35247a5b0195939e34cbf1c988e7c1db2d87946430be47585e731d
+  metadata.gz: 4b3421ce38f65500a9eb723786150dd104fd7971f8a6ea760250a97da387c2413e8b32ad98d1439535437b7503455810be7520b17b3f7f1237e6585da686f2cb
+  data.tar.gz: f9e4aa1f86a1d4d281a39619c353e9084a74dae22493f1b11b872e358fa19c15559b08d9ecacdf8ecba91927e493594546de96bb86925bb8bdb545abd36df578

data/app/controllers/playbook/application_controller.rb

@@ -3,7 +3,7 @@
 module Playbook
   class ApplicationController < ActionController::Base
     protect_from_forgery with: :exception
-
+   
     helper Webpacker::Helper
     helper Playbook::PbKitHelper
     helper Playbook::PbDocHelper
@@ -11,5 +11,6 @@ module Playbook
     append_view_path Playbook::Engine.root + "app/pb_kits"
   end
 
-  ENV["dark_mode"] = "false"
+  ENV["playbook"] = "true"
+    
 end

data/app/controllers/playbook/pages_controller.rb

@@ -10,12 +10,16 @@ module Playbook
     before_action :set_category, only: %i[kit_category_show_rails kit_category_show_react]
 
     def enable_dark_mode
-      ENV["dark_mode"] = "true"
+      cookies[:dark_mode] = {
+        value: "true"
+      }
       redirect_back(fallback_location: root_path)
     end
 
     def disable_dark_mode
-      ENV["dark_mode"] = "false"
+       cookies[:dark_mode] = {
+        value: "false"
+      }
       redirect_back(fallback_location: root_path)
     end
 

data/app/helpers/playbook/application_helper.rb

@@ -15,7 +15,7 @@ module Playbook
     end
 
     def dark_mode
-      if ENV["dark_mode"] == "true"
+      if cookies[:dark_mode] == "true"
         true
       else
         false
@@ -23,14 +23,14 @@ module Playbook
     end
 
     def dark_mode_props(props)
-      if ENV["dark_mode"] == "true"
+      if cookies[:dark_mode] == "true"
         props.merge(dark: dark_mode)
-      elsif ENV["dark_mode"] == "false"
+      elsif cookies[:dark_mode] == "false"
         props.merge(dark: dark_mode)
       else
         props
       end
     end
-    
+
   end
 end

data/app/helpers/playbook/pb_doc_helper.rb

@@ -45,7 +45,6 @@ module Playbook
     end
 
     def pb_kit(kit: "", type: "rails", show_code: true)
-      # @dark = ENV["dark_mode"]
       @type = type
       @kit_examples = get_kit_examples(kit, type)
       @show_code = show_code

data/app/helpers/playbook/pb_kit_helper.rb

@@ -10,7 +10,7 @@ module Playbook
     def pb_rails(kit, props: {}, &block)
       previous = prefix_partial_path_with_controller_namespace
       self.prefix_partial_path_with_controller_namespace = false
-      kit = build_view_model(kit.to_s, rails_props, &block)
+      kit = build_view_model(kit.to_s, rails_props(props), &block)
       render(partial: kit, as: :object)
     ensure
       self.prefix_partial_path_with_controller_namespace = previous
@@ -21,16 +21,16 @@ module Playbook
     end
 
   private
-    def rails_props
-      if ENV["dark_mode"].nil?
+    def rails_props(props)
+      if cookies[:dark_mode].nil? && ENV["playbook"].nil?
         props
       else
-        dark_mode_props
+        dark_mode_props(props)
       end
     end  
 
     def react_props
-      if ENV["dark_mode"].is_set?
+      if cookies[:dark_mode].nil? && ENV["playbook"].nil?
         false
       else
         dark_mode

data/app/pb_kits/playbook/_playbook.scss

@@ -15,6 +15,7 @@
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
+@import 'pb_date_picker/date_picker';
 @import 'pb_date_range_inline/date_range_inline';
 @import 'pb_date_range_stacked/date_range_stacked';
 @import 'pb_date_stacked/date_stacked';

data/app/pb_kits/playbook/config/_kit_ui.html.erb

@@ -19,7 +19,7 @@
 </div>
 
   <% if @show_code%>
-    <div class="markdown pb--kit-example-markdown <%=ENV["dark_mode"] == "true" ? "dark" : "" %>">
+    <div class="markdown pb--kit-example-markdown <%= cookies[:dark_mode] == "true" ? "dark" : "" %>">
       <%= markdown(get_per_sample_descriptions(@kit_examples[:kit], key)) %>
     </div>
     <div class="pb--codeControls">

data/app/pb_kits/playbook/data/menu.yml

@@ -25,6 +25,7 @@ kits:
   - fixed_confirmation_toast
   - flex
   - forms:
+    - date_picker
     - file_upload
     - form
     - form_pill

data/app/pb_kits/playbook/index.js

@@ -14,6 +14,7 @@ export Contact from './pb_contact/_contact.jsx'
 export Currency from './pb_currency/_currency.jsx'
 export DashboardValue from './pb_dashboard_value/_dashboard_value.jsx'
 export Date from './pb_date/_date.jsx'
+export DatePicker from './pb_date_picker/_date_picker.jsx'
 export DateRangeInline from './pb_date_range_inline/_date_range_inline.jsx'
 export DateRangeStacked from './pb_date_range_stacked/_date_range_stacked.jsx'
 export DateStacked from './pb_date_stacked/_date_stacked.jsx'
@@ -91,6 +92,7 @@ export dashboardValueSettings from './pb_dashboard_value/dashboardValueSettings'
 
 // Other JS/Plugins
 export pbChart from './plugins/pb_chart.js'
+export datePickerHelper from './pb_date_picker/date_picker_helper.js'
 export PbTypeahead from './pb_typeahead'
 export PbPopover from './pb_popover'
 export PbTable from './pb_table'

data/app/pb_kits/playbook/packs/examples.js

@@ -28,6 +28,7 @@ import * as Contact from 'pb_contact/docs'
 import * as Currency from 'pb_currency/docs'
 import * as DashboardValue from 'pb_dashboard_value/docs'
 import * as Date from 'pb_date/docs'
+import * as DatePicker from 'pb_date_picker/docs'
 import * as DateRangeInline from 'pb_date_range_inline/docs'
 import * as DateRangeStacked from 'pb_date_range_stacked/docs'
 import * as DateStacked from 'pb_date_stacked/docs'
@@ -108,6 +109,7 @@ WebpackerReact.setup({
   ...Currency,
   ...DashboardValue,
   ...Date,
+  ...DatePicker,
   ...DateRangeInline,
   ...DateRangeStacked,
   ...DateStacked,
@@ -172,4 +174,3 @@ WebpackerReact.setup({
   ...UserBadge,
   ...WeekdayStacked,
 })
-

data/app/pb_kits/playbook/packs/site_styles/docs/_kit_doc.scss

@@ -36,9 +36,9 @@
   }
 
   .pb--kit-example, .pb--kit-example-markdown {
-    &.dark{
+    &.dark {
       color: $text_dk_light;
-      a{
+      a {
         color: $teal;
       }
     }
@@ -107,7 +107,6 @@
     background: none;
 
     .pb--kit-example {
-      color: $white;
 
       &::after {
         background: $border-dark;
@@ -128,6 +127,6 @@
   }
 }
 
-pre.highlight{
-  padding:$space_xl;
+pre.highlight {
+  padding: $space_xl;
 }

data/app/pb_kits/playbook/packs/site_styles/docs/_markdown.scss

@@ -81,7 +81,7 @@
   }
   &.dark {
     color: $text_dk_light ;
-    h1,h2,h3,h4,h5,h6{
+    h1,h2,h3,h4,h5,h6 {
      color: $text_dk_light; 
     }
   }

data/app/pb_kits/playbook/pb_body/_body.jsx

@@ -26,7 +26,7 @@ const Body = (props: BodyProps) => {
     aria = {},
     className,
     children,
-    color = 'default',
+    color = '',
     data = {},
     highlightedText = [],
     highlighting = false,

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -1,6 +1,7 @@
 @import "./body_mixins";
 
 [class^=pb_body_kit]{
+  @include pb_body($text_lt_default);
   @each $color_name, $color_value in $pb_body_colors {
     &[class*=_#{$color_name}] {
       @include pb_body($color_value);
@@ -19,8 +20,23 @@
   }
   
   @each $status_name, $status_value in $pb_body_status {
-    &[class*=_default_#{$status_name}][class*=dark] {
+    &[class*=#{$status_name}] {
       @include pb_body($status_value);
     }
   }
+
+  &[class*=dark] {
+    @include pb_body_dark();
+    @each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
+      &[class*=_#{$dark_color_name}][class*=dark]{
+        @include pb_body($dark_color_value); 
+      }
+    }
+    @each $status_name, $status_value in $pb_body_status {
+      &[class*=_#{$status_name}] {
+        @include pb_body($status_value);
+      }
+    }
+  }
+ 
 }

data/app/pb_kits/playbook/pb_body/body.rb

@@ -41,7 +41,7 @@ module Playbook
       end
 
       def color_class
-        color
+        color == "default" ? nil : color
       end
 
       def status_class

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -97,6 +97,7 @@ const Button = (props: ButtonPropTypes) => {
     <span className="pb_button_content">
       <If condition={icon !== null}>
         <i className={`pb_icon_kit far fa-${icon} fa-fw`} />
+        {' '}
       </If>
       <span>{text || children}</span>
     </span>

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -10,7 +10,8 @@ $pb_button_size: 40px;
 $pb_button_v_padding: 7px;
 $pb_button_h_padding: 34px;
 $pb_button_hover_darken: 4%;
-$pb_button_border_width: 1px;
+$pb_button_border_width: 0px;
+
 
 @mixin pb_button($bg: $primary_action, $color: $text_dk_default, $border: transparent) {
   text-rendering: optimizeLegibility;
@@ -47,16 +48,17 @@ $pb_button_border_width: 1px;
     visibility: visible;
   }
 
-  &:hover {
+  &:hover, &:focus {
     outline: none;
+    
   }
 
-  &:active,
-  &:focus {
+  &:active {
     outline: none;
     border-width: $pb_button_border_width;
     border-color: darken($bg, $pb_button_hover_darken);
   }
+  
 };
 
 @mixin pb_button_hover($bg: darken($primary_action, $pb_button_hover_darken)){
@@ -67,8 +69,10 @@ $pb_button_border_width: 1px;
 @mixin pb_button_primary {
   @include pb_button;
 
-  &:hover {
-    @include pb_button_hover;
+  @media (hover:hover) {
+    &:hover {
+      @include pb_button_hover;
+    }
   }
 }
 
@@ -76,17 +80,21 @@ $pb_button_border_width: 1px;
 @mixin pb_button_secondary {
   @include pb_button(rgba($primary_action, 0.05), $primary_action);
 
-  &:hover {
-    @include pb_button_hover(rgba($primary_action, $opacity_3));
-  }
+  @media (hover:hover) {
+    &:hover {
+      @include pb_button_hover(rgba($primary_action, $opacity_3));
+    }
+  } 
 }
 
 // Link =========================
 @mixin pb_button_link {
   @include pb_button($transparent, $primary_action);
 
-  &:hover {
-    @include pb_button_hover($transparent);
+  @media (hover:hover) {
+    &:hover {
+      @include pb_button_hover($transparent);
+    }
   }
 }
 
@@ -120,8 +128,10 @@ $pb_button_border_width: 1px;
 @mixin pb_button_primary_dark{
   @include pb_button($primary_action);
 
-  &:hover {
-    @include pb_button_hover($bg: darken($primary_action, $pb_button_hover_darken));
+  @media (hover:hover) {
+    &:hover {
+      @include pb_button_hover($bg: darken($primary_action, $pb_button_hover_darken));
+    }
   }
 }
 
@@ -129,17 +139,21 @@ $pb_button_border_width: 1px;
 @mixin pb_button_secondary_dark{
   @include pb_button(rgba($white, 0.2), $white);
 
-  &:hover {
-    @include pb_button_hover(rgba($primary_action, $opacity_2));
+  @media (hover:hover) {
+    &:hover {
+      @include pb_button_hover(rgba($primary_action, $opacity_2));
+    }
   }
 }
 
 // Dark Link =============
 @mixin pb_button_link_dark {
-  @include pb_button($transparent, $primary_action);
+  @include pb_button($transparent, $white);
 
-  &:hover {
-    @include pb_button_hover($transparent);
+  @media (hover:hover) {
+    &:hover {
+      @include pb_button_hover($transparent);
+    }
   }
 }
 

data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx

@@ -9,12 +9,14 @@ const ButtonDefault = (props) => (
         onClick={() => alert('button clicked!')}
         text="Button Primary"
     />
+    {' '}
     <Button
         onClick={() => alert('button clicked!')}
         text="Button Secondary"
         variant="secondary"
         {...props}
     />
+    {' '}
     <Button
         onClick={() => alert('button clicked!')}
         text="Button Link"

data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx

@@ -8,12 +8,14 @@ const ButtonLink = (props) => (
         link="https://google.com"
         text="A Tag Button"
     />
+    {' '}
     <Button
         {...props}
         link="https://google.com"
         newWindow
         text="Open in New Window"
     />
+    {' '}
     <Button
         {...props}
         disabled

data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx

@@ -8,12 +8,14 @@ const ButtonLoading = (props) => (
         loading
         text="Button Primary"
     />
+    {' '}
     <Button
         {...props}
         loading
         text="Button Secondary"
         variant="secondary"
     />
+    {' '}
     <Button
         {...props}
         loading

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss

@@ -13,13 +13,17 @@
       & > [class^=pb_button]  {
         margin-right: $space-xs;
 
-        &:hover {
-          background-color:darken($royal, 20%);
+        @media (hover:hover) {
+          &:hover {
+            background-color:darken($royal, 20%);
+          }
         }
 
         &[class*=secondary] {
-          &:hover {
-            background-color:rgba($primary_action, $opacity_3)
+          @media (hover:hover) {
+            &:hover {
+              background-color:rgba($primary_action, $opacity_3)
+            }
           }
         }
   
@@ -42,13 +46,17 @@
         width: 100%;
         margin-bottom: $space-xs;
 
-        &:hover {
-          background-color:darken($royal, 20%);
+        @media (hover:hover) {
+          &:hover {
+            background-color:darken($royal, 20%);
+          }
         }
 
         &[class*=secondary] {
-          &:hover {
-            background-color:rgba($primary_action, $opacity_3)
+          @media (hover:hover) {
+            &:hover {
+              background-color:rgba($primary_action, $opacity_3)
+            }
           }
         }