playbook_ui 12.13.0 → 12.14.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown456

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a8ab799be2c717401ccd987c55ab580b5ad66ad4180ff3590e679aa9f8b20e1b
-  data.tar.gz: 1061a9d85bf0cc5c7ef7731a9747eb29ff51e9151bd51e6f5401daec9c66429f
+  metadata.gz: d134719af99c9b743c91b79eaf9df31ec4f190b0ee63eef43ca0371f45285bae
+  data.tar.gz: 9548d090839568767077f07961bc410807d7f658c0b9c26bc732192f39f98740
 SHA512:
-  metadata.gz: 2a058d2ba141e6f0867018940f66dbdbd2be9ebc77d921e83d54a9f0113f037e4c356c38b1e050e3e5d6a4a58262095707dd54f3929fcafefea53e4e2b023026
-  data.tar.gz: 6bcbc50017600ac0915e86ce76c1b5a55cbc2cbda223f9e883121851382b146609a53dfe148ca11110629cd766bb8aa935c27edca1a773c46aaefdc89d374076
+  metadata.gz: fe57e92aa08c99eba690fe145d67f01f7bdc07bea84a3697445a8231c80a3d1ce10196f4dc9239d147eefa54064334d3f065772b62414218e28d8c0b9befcc76
+  data.tar.gz: b61b2412844e71772d46587d98803aa254e43e100466345873958cbfe093faa37a7242be2a8b5cd0202a5e1716bd88cb63d8647f63d302d99aafe05f12bdf878

data/app/pb_kits/playbook/pb_card/_card.scss

@@ -1,4 +1,5 @@
 @import "card_mixin";
+@import "../utilities/colors";
 
 [class^=pb_card_kit] {
   @include pb_card;
@@ -29,9 +30,7 @@
     @each $color_name, $color_value in $pb_card_header_colors {
       &[class*=_#{$color_name}] {
         @include pb_card_header_color($color_value);
-        [class^=pb_body_kit] {
-          color: lightenText($color_value);
-        }
+        color: lightenText($color_value);
       }
     }
     &[class*=_white] {

data/app/pb_kits/playbook/pb_card/card.rb

@@ -15,7 +15,7 @@ module Playbook
                            values: %w[xs sm md lg xl none rounded],
                            default: "md"
       prop :background, type: Playbook::Props::Enum,
-                        values: %w[white light dark windows siding doors solar roofing gutters insulation none],
+                        values: %w[white light dark product_1_background product_1_highlight product_2_background product_2_highlight product_3_background product_3_highlight product_4_background product_4_highlight product_5_background product_5_highlight product_6_background product_6_highlight product_7_background product_7_highlight product_8_background product_8_highlight product_9_background product_9_highlight product_10_background product_10_highlight windows siding doors solar roofing gutters insulation none],
                         default: "none"
 
       def classname

data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb

@@ -1,57 +1,44 @@
-<%= pb_rails("title", props: { text: "Card Colors", tag: "h4", size: 4 }) %>
+<%= pb_rails("title", props: { text: "Card Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
 
-<br>
-
-<%= pb_rails("card", props: { background: "dark", dark: true })  do %>
+<%= pb_rails("card", props: { background: "dark", dark: true, margin_bottom: "sm" })  do %>
   <%= pb_rails("body", props: {
   text: "Dark",
-  color: "lighter"
+  dark: true 
 }) %>
 <% end %>
 
-<br>
-
-<%= pb_rails("card")  do %>
+<%= pb_rails("card", props: { margin_bottom: "sm" })  do %>
   <%= pb_rails("body", props: {
-  text: "White"
+  text: "White / Default"
 }) %>
 <% end %>
 
-<br>
-
-<%= pb_rails("card", props: { background: "light" })  do %>
+<%= pb_rails("card", props: { background: "light", margin_bottom: "sm" })  do %>
   <%= pb_rails("body", props: {
-  text: "Light"
-}) %>
+    text: "Light",
+    dark: false
+  }) %>
 <% end %>
 
-<br>
-
-<%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4 }) %>
-
-<br>
+<%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
 
-<%= pb_rails("card", props: { background: "windows", dark: true })  do %>
+<%= pb_rails("card", props: { background: "product_1_background", dark: true, margin_bottom: "sm" })  do %>
   <%= pb_rails("body", props: {
-  text: "Windows",
-  color: "lighter"
-}) %>
+    text: "Product 1 Background",
+    dark: true
+  }) %>
 <% end %>
 
-<br>
-
-<%= pb_rails("card", props: { background: "siding" })  do %>
+<%= pb_rails("card", props: { background: "product_7_highlight", margin_bottom: "sm" })  do %>
   <%= pb_rails("body", props: {
-  text: "Siding"
-}) %>
+    text: "Product 7 Highlight",
+    dark: true
+  }) %>
 <% end %>
 
-<br>
-
-<%= pb_rails("card", props: { background: "doors" })  do %>
+<%= pb_rails("card", props: { background: "product_2_background", margin_bottom: "sm" })  do %>
   <%= pb_rails("body", props: {
-  text: "Doors"
-}) %>
+    text: "Product 2 Highlight",
+    dark: true
+  }) %>
 <% end %>
-
-<br>

data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx

@@ -8,91 +8,88 @@ const CardBackground = (props) => {
     <div>
       <Title
           {...props}
+          marginBottom="sm"
           size={4}
           tag="h4"
           text="Card Colors"
       />
-
-      <br />
-
       <Card
           background="dark"
           dark
+          marginBottom="sm"
           {...props}
       >
         <Body
-            color="lighter"
+            dark
             text="Dark"
-            {...props}
         />
       </Card>
 
-      <br />
-
-      <Card>
+      <Card
+          marginBottom="sm"
+          {...props}
+      >
         <Body
-            text="White"
+            text="White / Default"
+            {...props}    
         />
       </Card>
 
-      <br />
 
       <Card
           background="light"
+          marginBottom="sm"
           {...props}
       >
-        <Body
-            text="Light"
-        />
+        <Body text="Light"  />
       </Card>
 
-      <br />
-
+    
       <Title
           {...props}
+          marginBottom="sm"
           size={4}
           tag="h4"
           text="Product Colors"
       />
 
-      <br />
-
       <Card
-          background="windows"
+          background="product_1_background"
+          marginBottom="sm"
           {...props}
-      >
+        >
         <Body
-            color="lighter"
-            text="Windows"
-            {...props}
+            dark
+            text="Product 1 Background"
         />
       </Card>
 
-      <br />
+      
 
-      <Card
-          background="siding"
-          {...props}
-      >
-        <Body
-            text="Siding"
-            {...props}
-        />
+      <Card 
+          background="product_7_highlight" 
+          marginBottom="sm"
+          {...props} >
+        <Body 
+            dark
+            text="Product 7 Highlight"  
+          />
       </Card>
 
-      <br />
+      
 
-      <Card
-          background="doors"
+      <Card 
+          background="product_2_highlight" 
+          marginBottom="sm"
           {...props}
       >
         <Body
-            text="Doors"
-            {...props}
+            dark
+            text="Product 2 Highlight"    
         />
       </Card>
 
-      <br />
+      
     </div>
   )
 }

data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb

@@ -1,74 +1,57 @@
-<%= pb_rails("title", props: { text: "Category Colors", tag: "h4", size: 4 }) %>
+<%= pb_rails("title", props: { text: "Category Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
 
-<br>
-
-  <%= pb_rails("card", props: { padding: "none", header: true}) do %>
-    <%= pb_rails("card/card_header", props: { padding: "sm" }) do %>
-      <%= pb_rails("body", props: { text: "category_1", dark: true }) %>
-    <% end %>
-    <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
-      Body
-    <% end %>
+<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
+  <%= pb_rails("card/card_header", props: { padding: "sm" }) do %>
+    <%= pb_rails("body", props: { text: "Category 1", dark: true }) %>
   <% end %>
-
-<br>
-
-  <%= pb_rails("card", props: { padding: "none", header: true}) do %>
-    <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "category_2" }) do %>
-      <%= pb_rails("body", props: { text: "category_2", dark: true }) %>
-
-    <% end %>
-    <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
-      Body
-    <% end %>
+  <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
+    Category 1
   <% end %>
+<% end %>
 
-<br>
-
-<%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4 }) %>
+<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
+  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "category_3" }) do %>
+    <%= pb_rails("body", props: { text: "Category 3", dark: false }) %>
+  <% end %>
+  <%= pb_rails("card/card_body", props: { padding: "md",  }) do %>
+    Body
+  <% end %>
+<% end %>
 
-<br>
+<%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
 
-<%= pb_rails("card", props: { padding: "none", header: true}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "siding" }) do %>
-    <%= pb_rails("body", props: { text: "Siding", dark: true }) %>
+<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
+  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "product_2_background" }) do %>
+    <%= pb_rails("body", props: { text: "Product 2 Background", dark: true }) %>
   <% end %>
   <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
     Body
   <% end %>
 <% end %>
 
-<br>
-
-<%= pb_rails("card", props: { padding: "none", header: true}) do %>
-  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "gutters" }) do %>
-    <%= pb_rails("body", props: { text: "Gutters", dark: true }) %>
+<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
+  <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "product_6_background" }) do %>
+    <%= pb_rails("body", props: { text: "Product 6 Background", dark: true }) %>
   <% end %>
   <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
     Body
   <% end %>
 <% end %>
 
-<br>
+<%= pb_rails("title", props: { text: "Background Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
 
-<%= pb_rails("title", props: { text: "Background Colors", tag: "h4", size: 4 }) %>
-
-<br>
-
-<%= pb_rails("card", props: { padding: "none", header: true}) do %>
+<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
   <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "white" }) do %>
-    <%= pb_rails("body", props: { text: "White" }) %>
+    <%= pb_rails("body", props: { text: "White", dark: false }) %>
   <% end %>
   <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
     Body
   <% end %>
 <% end %>
 
-<br>
-
-<%= pb_rails("card", props: { padding: "none", header: true}) do %>
+<%= pb_rails("card", props: { padding: "none", header: true, margin_bottom: "sm"}) do %>
   <%= pb_rails("card/card_header", props: { padding: "sm", header_color: "bg_dark" }) do %>
-    <%= pb_rails("body", props: { text: "Dark" }) %>
+    <%= pb_rails("body", props: { text: "Dark", dark: true }) %>
   <% end %>
   <%= pb_rails("card/card_body", props: { padding: "md" }) do %>
     Body

data/app/pb_kits/playbook/pb_card/docs/_card_header.jsx

@@ -9,21 +9,21 @@ const CardHeader = (props) => {
     <div>
       <Title
           {...props}
+          marginBottom='sm'
           size={4}
           tag="h4"
           text="Category Colors"
       />
 
-      <br />
-
       <Card
           {...props}
+          marginBottom='sm'
           padding="none"
       >
-        <Card.Header>
+        <Card.Header headerColor="category_1" >
           <Body
-              {...props}
-              text="category_1"
+              dark
+              text="Category 1"
           />
         </Card.Header>
         <Card.Body>
@@ -34,19 +34,15 @@ const CardHeader = (props) => {
         </Card.Body>
       </Card>
 
-      <br />
-
       <Card
           {...props}
+          marginBottom='sm'
           padding="none"
       >
         <Card.Header
-            headerColor="category_2"
+            headerColor="category_3"
         >
-          <Body
-              {...props}
-              text="category_2"
-          />
+          <Body text="Category 3" />
         </Card.Header>
         <Card.Body
             padding="md"
@@ -58,27 +54,27 @@ const CardHeader = (props) => {
         </Card.Body>
       </Card>
 
-      <br />
 
       <Title
           {...props}
+          marginBottom='sm'
           size={4}
           tag="h4"
           text="Product Colors"
       />
 
-      <br />
-
       <Card
           {...props}
+          marginBottom='sm'
           padding="none"
       >
         <Card.Header
-            headerColor="siding"
+            headerColor="product_2_background"
         >
           <Body
               {...props}
-              text="Siding"
+              dark
+              text="Product 2 Background"
           />
         </Card.Header>
         <Card.Body>
@@ -89,18 +85,16 @@ const CardHeader = (props) => {
         </Card.Body>
       </Card>
 
-      <br />
-
       <Card
           {...props}
+          marginBottom='sm'
           padding="none"
       >
-        <Card.Header
-            headerColor="gutters"
-        >
+        <Card.Header headerColor="product_6_background" >
           <Body
               {...props}
-              text="Gutters"
+              dark
+              text="Product 6 Background"
           />
         </Card.Header>
         <Card.Body>
@@ -111,28 +105,24 @@ const CardHeader = (props) => {
         </Card.Body>
       </Card>
 
-      <br />
 
       <Title
           {...props}
+          marginBottom='sm'
           size={4}
           tag="h4"
           text="Background Colors"
       />
 
-      <br />
-
       <Card
           {...props}
+          marginBottom='sm'
           padding="none"
       >
         <Card.Header
             headerColor="white"
         >
-          <Body
-              {...props}
-              text="White"
-          />
+          <Body text="White" />
         </Card.Header>
         <Card.Body>
           <Body
@@ -142,8 +132,6 @@ const CardHeader = (props) => {
         </Card.Body>
       </Card>
 
-      <br />
-
       <Card
           {...props}
           padding="none"
@@ -152,7 +140,7 @@ const CardHeader = (props) => {
             headerColor="dark"
         >
           <Body
-              {...props}
+              dark
               text="Dark"
           />
         </Card.Header>

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb

@@ -1,9 +1,9 @@
-<%= pb_rails("card", props: {highlight: {position: "side", color:"windows"}}) do %>
-  Card content
+<%= pb_rails("card", props: {highlight: {position: "side", color:"product_6_highlight"}, margin_bottom: "sm"}) do %>
+  Side Position & Product 6 Highlight Color
 <% end %>
-
-<br>
-
-<%= pb_rails("card", props: {highlight: {position: "top", color:"warning"}}) do %>
-  Card content
+<%= pb_rails("card", props: {highlight: {position: "top", color:"warning"}, margin_bottom: "sm"}) do %>
+  Top Position & Warning Color
 <% end %>
+<%= pb_rails("card", props: {highlight: {position: "side", color:"category_2"}, margin_bottom: "sm"}) do %>
+  Side Position & Category 2 Color
+<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx

@@ -7,27 +7,25 @@ const CardHighlight = (props) => {
     <div>
       <Card
           {...props}
-          highlight={{ position: 'side', color: 'windows' }}
+          highlight={{ position: 'side', color: 'product_6_highlight' }}
+          marginBottom="sm"
       >
-        {'Card content'}
+        {'Side Position & Product 6 Highlight Color'}
       </Card>
 
-      <br />
-
       <Card
           {...props}
           highlight={{ position: 'top', color: 'warning' }}
+          marginBottom="sm"
       >
-        {'Card content'}
+        {'Top Position & Warning Color'}
       </Card>
 
-      <br />
-
       <Card
           {...props}
           highlight={{ position: 'side', color: 'category_2' }}
       >
-        {'Card content'}
+        {'Side Position & Category 2 Color'}
       </Card>
     </div>
   )

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -6,6 +6,7 @@
 @import "./sass_partials/month_and_year_styles";
 @import "./sass_partials/time_selection_styles";
 @import "./sass_partials/input_styles";
+@import "./sass_partials/quick_pick_styles";
 
 [class^=pb_date_picker_kit] {
   .input_wrapper {
@@ -26,7 +27,32 @@
       @include transition_default;
       border-color: $primary;
     }
+    .add-on-card {
+      border-color: $primary;
+    }
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      .add-on-card {
+        cursor: pointer;
+        background-color: rgba($focus_input_light,$opacity_5);
+      }
+    }
+  }
+  .text_input_wrapper_add_on .add-on-icon {
+    color: $text_lt_light
   }
+
+  .text_input_wrapper_add_on .add-on-right .text_input{
+    cursor: pointer;
+  }
+  
+}
+
+
+.pb_popover_reference_wrapper {
+  display: unset !important
 }
 
 .flatpickr-calendar {