playbook_ui 12.13.0 → 12.14.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a8ab799be2c717401ccd987c55ab580b5ad66ad4180ff3590e679aa9f8b20e1b
-  data.tar.gz: 1061a9d85bf0cc5c7ef7731a9747eb29ff51e9151bd51e6f5401daec9c66429f
+  metadata.gz: a42d45fa9c0cb3563d9253c5c676edcd535e813873bca8f31162258372554bb9
+  data.tar.gz: 162a8abeed8d622e81d218e90c6a1d693a17d068d489234cbd0fb39f2c50ac7e
 SHA512:
-  metadata.gz: 2a058d2ba141e6f0867018940f66dbdbd2be9ebc77d921e83d54a9f0113f037e4c356c38b1e050e3e5d6a4a58262095707dd54f3929fcafefea53e4e2b023026
-  data.tar.gz: 6bcbc50017600ac0915e86ce76c1b5a55cbc2cbda223f9e883121851382b146609a53dfe148ca11110629cd766bb8aa935c27edca1a773c46aaefdc89d374076
+  metadata.gz: de1b0f03c8ca91aedae5581617fab0920bde4bfbaa034137021a0f3fe87932a6cb963231f9add0470a606046341d3c5a0b8d3819803ae7eb34af9415f4c340b6
+  data.tar.gz: e5f9702e6a3f812e3ae0080cc604406fbc7f115f2b1fcf7f83e2537e9502a833d93436abe3f3c9c0795d013791f62ba43631be32298891143a8fbf58728f2ef4

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.tsx

@@ -78,6 +78,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     mode = 'single',
     name,
     onChange = () => { void 0 },
+    onClose,
     pickerId,
     placeholder = 'Select Date',
     plugins = false,
@@ -95,9 +96,13 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
   const inputAriaProps = buildAriaProps(inputAria)
   const inputDataProps = buildDataProps(inputData)
 
+  const filteredProps = {...props}
+  delete filteredProps?.position
+
   const classes = classnames(
     buildCss('pb_date_picker_kit'),
-    globalProps(props),
+    //@ts-ignore
+    globalProps(filteredProps),
     error ? 'error' : null,
     className
   )
@@ -117,8 +122,10 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       minDate,
       mode,
       onChange,
+      onClose,
       pickerId,
       plugins,
+      // @ts-ignore
       position,
       positionElement,
       selectionType,

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -19,6 +19,7 @@ type DatePickerConfig = {
   hideIcon?: boolean;
   inLine?: boolean,
   onChange: (dateStr: string, selectedDates: Date[]) => void,
+  onClose: (dateStr: Date[] | string, selectedDates: Date[] | string) => void,
   selectionType?: "month" | "week" | "",
   showTimezone?: boolean,
   staticPosition: boolean,
@@ -41,6 +42,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     minDate,
     mode,
     onChange = () => {},
+    onClose = () => {},
     pickerId,
     plugins,
     position = "auto",
@@ -151,9 +153,10 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       window.addEventListener('resize', calendarResizer)
       if (!staticPosition && scrollContainer) attachToScroll(scrollContainer)
     }],
-    onClose: [() => {
+    onClose: [(selectedDates, dateStr) => {
       window.removeEventListener('resize', calendarResizer)
       if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer as HTMLElement)
+      onClose(selectedDates, dateStr)
     }],
     onChange: [(selectedDates, dateStr) => {
       onChange(dateStr, selectedDates)

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx

@@ -0,0 +1,43 @@
+/* eslint-disable react/no-multi-comp */
+import React, { useState } from 'react'
+import { DatePicker,LabelValue } from '../..'
+
+
+const DatePickerOnClose = (props) => {
+  const today = new Date()
+  const [dateString, setDateString] = useState(today.toLocaleDateString())
+  const [dateObj, setDateObj] = useState([today])
+
+  const handleOnClose = (selectedDates, dateStr) => {
+    setDateString(dateStr)
+    setDateObj(selectedDates)
+  }
+
+
+  return (
+    <div>
+        <DatePicker
+            defaultDate={dateString}
+            enableTime
+            marginBottom="lg"
+            onClose={handleOnClose}
+            pickerId="date-picker-on-close"
+            showTimezone
+            {...props}
+        />
+        <LabelValue
+            label="Date Object"
+            marginBottom="lg"
+            value={dateObj[0] ? dateObj[0].toString() : ''}
+            {...props}
+        />
+        <LabelValue
+            label="Date String"
+            value={dateString}
+            {...props}
+        />
+    </div>
+  )
+}
+
+export default DatePickerOnClose

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md

@@ -0,0 +1,3 @@
+The `onClose` handler function has access to two arguments: `dateStr` and `selectedDates`.
+
+The first, `dateStr`, is a string of the chosen date.  The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.

data/app/pb_kits/playbook/pb_date_picker/docs/example.yml

@@ -31,6 +31,7 @@ examples:
   - date_picker_input: Input Field
   - date_picker_label: Label
   - date_picker_on_change: onChange
+  - date_picker_on_close: onClose
   - date_picker_range: Range
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates

data/app/pb_kits/playbook/pb_date_picker/docs/index.js

@@ -19,3 +19,4 @@ export { default as DatePickerWeek } from './_date_picker_week.jsx'
 export { default as DatePickerPositions } from './_date_picker_positions.jsx'
 export { default as DatePickerPositionsElement } from './_date_picker_positions_element.jsx'
 export { default as DatePickerAllowInput } from './_date_picker_allow_input'
+export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'

data/app/pb_kits/playbook/pb_layout/_layout.tsx

@@ -151,6 +151,10 @@ const Layout = (props: LayoutPropTypes) => {
   const nonSideChildren = layoutChildren.filter(
     (child: React.ReactElement & {type: {displayName: string}}) => child.type?.displayName !== 'Side'
   )
+
+  const filteredProps = {...props}
+  delete filteredProps?.position
+
   return (
     <div
         {...ariaProps}
@@ -159,7 +163,8 @@ const Layout = (props: LayoutPropTypes) => {
         layoutCss,
         layoutCollapseCss,
         className,
-        globalProps(props)
+        //@ts-ignore
+        globalProps(filteredProps)
       )}
     >
       {subComponentTags('Side')}

data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("legend", props: { color: "data_8", text: "Windows" }) %>
-<%= pb_rails("legend", props: { color: "warning", text: "Windows" }) %>
-<%= pb_rails("legend", props: { color: "windows", text: "Windows" }) %>
-<%= pb_rails("legend", props: { color: "category_7", text: "Windows" }) %>
+<%= pb_rails("legend", props: { color: "data_8", text: "Data 8" }) %>
+<%= pb_rails("legend", props: { color: "warning", text: "Warning" }) %>
+<%= pb_rails("legend", props: { color: "product_6_highlight", text: "Product 6 (highlight)" }) %>
+<%= pb_rails("legend", props: { color: "category_7", text: "Category 7" }) %>

data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.jsx

@@ -5,22 +5,22 @@ const LegendColors = (props) => (
   <div>
     <Legend
         color="data_8"
-        text="Windows"
+        text="Data 8"
         {...props}
     />
     <Legend
         color="warning"
-        text="Windows"
+        text="Warning"
         {...props}
     />
     <Legend
-        color="windows"
-        text="Windows"
+        color="product_6_highlight"
+        text="Product 6 (highlight)"
         {...props}
     />
     <Legend
         color="category_7"
-        text="Windows"
+        text="Category 7"
         {...props}
     />
   </div>

data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("legend", props: { color: "#dc418a", text: "Windows" }) %>
-<%= pb_rails("legend", props: { color: "#3ef0b8", text: "Windows" }) %>
-<%= pb_rails("legend", props: { color: "#ab8b04", text: "Windows" }) %>
+<%= pb_rails("legend", props: { color: "#dc418a", text: "Custom Legend Color 1" }) %>
+<%= pb_rails("legend", props: { color: "#3ef0b8", text: "Custom Legend Color 2" }) %>
+<%= pb_rails("legend", props: { color: "#ab8b04", text: "Custom Legend Color 3" }) %>

data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx

@@ -5,17 +5,17 @@ const LegendCustomColors = (props) => (
   <div>
     <Legend
         color="#dc418a"
-        text="Windows"
+        text="Custom Legend Color 1"
         {...props}
     />
     <Legend
         color="#3ef0b8"
-        text="Windows"
+        text="Custom Legend Color 2"
         {...props}
     />
     <Legend
         color="#ab8b04"
-        text="Windows"
+        text="Custom Legend Color 3"
         {...props}
     />
   </div>

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -89,6 +89,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
   const [itiInit, setItiInit] = useState<any>()
   const [error, setError] = useState('')
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
+  const [selectedData, setSelectedData] = useState()
 
   const validateTooLongNumber = (itiInit: any) => {
     const error = itiInit.getValidationError()
@@ -121,10 +122,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
     validateOnlyNumbers()
   }
 
+  const getCurrentSelectedData = (itiInit: any, inputValue: string) => {
+    return { ...itiInit.getSelectedCountryData(), number: inputValue }
+  }
+
   const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(evt.target.value)
     validateTooLongNumber(itiInit)
-    onChange(evt)
+    const phoneNumberData = getCurrentSelectedData(itiInit, evt.target.value)
+    setSelectedData(phoneNumberData)
+    onChange(phoneNumberData)
     isValid(itiInit.isValidNumber())
   }
 
@@ -136,15 +143,21 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
 
   useEffect(() => {
     const telInputInit = new intlTelInput(inputRef.current, {
-        separateDialCode: true,
-        preferredCountries,
-        allowDropdown: !disabled,
-        initialCountry,
-        onlyCountries,
-      }
+      separateDialCode: true,
+      preferredCountries,
+      allowDropdown: !disabled,
+      initialCountry,
+      onlyCountries,
+    }
     )
-    
-    inputRef.current.addEventListener("countrychange", () => validateTooLongNumber(telInputInit))
+
+    inputRef.current.addEventListener("countrychange", (evt: Event) => {
+      validateTooLongNumber(telInputInit)
+      const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
+      setSelectedData(phoneNumberData)
+      onChange(phoneNumberData)
+    })
+
     inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
     inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
 
@@ -156,6 +169,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
       <TextInput
         className={dropDownIsOpen ? 'dropdown_open' : ''}
         dark={dark}
+        data-phone-number={JSON.stringify(selectedData)}
         disabled={disabled}
         error={error}
         id={id}

data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.html.erb

@@ -9,22 +9,22 @@
     </tr>
   </thead>
   <tbody>
-    <%= pb_rails("table/table_row", props: { side_highlight_color: "solar" }) do %>
-			<td>Solar</td>
+    <%= pb_rails("table/table_row", props: { side_highlight_color: "product_1_highlight" }) do %>
+			<td>Product 1</td>
 			<td>Value 2</td>
 			<td>Value 3</td>
 			<td>Value 4</td>
 			<td>Value 5</td>
     <% end %>
-		<%= pb_rails("table/table_row", props: { side_highlight_color: "roofing" }) do %>
-			<td>Roofing</td>
+		<%= pb_rails("table/table_row", props: { side_highlight_color: "product_2_highlight" }) do %>
+			<td>Product 2</td>
 			<td>Value 2</td>
 			<td>Value 3</td>
 			<td>Value 4</td>
 			<td>Value 5</td>
     <% end %>
-    <%= pb_rails("table/table_row", props: { side_highlight_color: "gutters" }) do %>
-			<td>Gutters</td>
+    <%= pb_rails("table/table_row", props: { side_highlight_color: "product_3_highlight" }) do %>
+			<td>Product 3</td>
 			<td>Value 2</td>
 			<td>Value 3</td>
 			<td>Value 4</td>

data/app/pb_kits/playbook/pb_table/docs/_table_side_highlight.jsx

@@ -21,30 +21,30 @@ const TableSideHighlight = (props) => {
         </thead>
         <tbody>
           <TableRow
-              sideHighlightColor="solar"
+              sideHighlightColor="product_1_highlight"
               {...props}
           >
-            <td>{'Solar'}</td>
+            <td>{'Product 1'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
           <TableRow
-              sideHighlightColor="roofing"
+              sideHighlightColor="product_2_highlight"
               {...props}
           >
-            <td>{'Roofing'}</td>
+            <td>{'Product 2'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
           </TableRow>
           <TableRow
-              sideHighlightColor="gutters"
+              sideHighlightColor="product_3_highlight"
               {...props}
           >
-            <td>{'Gutters'}</td>
+            <td>{'Product 3'}</td>
             <td>{'Value 2'}</td>
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>

data/app/pb_kits/playbook/tokens/_colors.scss

@@ -213,22 +213,62 @@ $status_color_text: (
 $primary_action:      $primary !default;
 
 /* Product colors ---------------------*/
-$windows:             $royal !default;
-$siding:              $yellow !default;
-$doors:               $teal !default;
-$solar:               $green !default;
-$roofing:             $slate !default;
-$gutters:             $purple !default;
-$insulation:          $red !default;
+$product_1_background:  #003DB2 !default;
+$product_1_highlight:   #0057FF !default;
+$product_2_background:  #6000AC !default;
+$product_2_highlight:   #8200E9 !default;
+$product_3_background:  #B85C00 !default;
+$product_3_highlight:   #CE7500 !default;
+$product_4_background:  #007E8F !default;
+$product_4_highlight:   #00B9D2 !default;
+$product_5_background:  #760B24 !default;
+$product_5_highlight:   #B8032E !default;
+$product_6_background:  #008540 !default;
+$product_6_highlight:   #00A851 !default;
+$product_7_background:  #96006C !default;
+$product_7_highlight:   #CD0094 !default;
+$product_8_background:  #144075 !default;
+$product_8_highlight:   #1A569E !default;
+$product_9_background:  #fcc419 !default;
+$product_9_highlight:   #ffd43b !default;
+$product_10_background: #20c997 !default;
+$product_10_highlight:  #38d9a9 !default;
+$windows:               $product_1_background !default; // deprecated
+$siding:                $product_2_background !default; // deprecated
+$doors:                 $product_3_background !default; // deprecated
+$solar:                 $product_4_background !default; // deprecated
+$roofing:               $product_5_background !default; // deprecated
+$gutters:               $product_6_background !default; // deprecated
+$insulation:            $product_7_background !default; // deprecated
 $product_colors: (
-  windows:            $windows,
-  siding:             $siding,
-  doors:              $doors,
-  solar:              $solar,
-  roofing:            $roofing,
-  gutters:            $gutters,
-  insulation:         $insulation
-);
+  windows:                $windows,
+  siding:                 $siding,
+  doors:                  $doors,
+  solar:                  $solar,
+  roofing:                $roofing,
+  gutters:                $gutters,
+  insulation:             $insulation,
+  product_1_background:   $product_1_background,
+  product_1_highlight:    $product_1_highlight,
+  product_2_background:   $product_2_background,
+  product_2_highlight:    $product_2_highlight,
+  product_3_background:   $product_3_background,
+  product_3_highlight:    $product_3_highlight,
+  product_4_background:   $product_4_background,
+  product_4_highlight:    $product_4_highlight,
+  product_5_background:   $product_5_background,
+  product_5_highlight:    $product_5_highlight,
+  product_6_background:   $product_6_background,
+  product_6_highlight:    $product_6_highlight,
+  product_7_background:   $product_7_background,
+  product_7_highlight:    $product_7_highlight,
+  product_8_background:   $product_8_background,
+  product_8_highlight:    $product_8_highlight,
+  product_9_background:   $product_9_background,
+  product_9_highlight:    $product_9_highlight,
+  product_10_background:  $product_10_background,
+  product_10_highlight:   $product_10_highlight
+) !default;
 
 /* Category colors ---------------------*/
 $category_1:   $royal !default;

data/app/pb_kits/playbook/tokens/_positioning.scss

@@ -1,3 +1,16 @@
+$relative: relative !default;
+$absolute: absolute !default;
+$fixed: fixed !default;
+$sticky: sticky !default;
+$static: static !default;
+$position: (
+  relative: $relative,
+  absolute: $absolute,
+  fixed: $fixed,
+  sticky: $sticky,
+  static: $static
+);
+
 // z_index variables
 $z_1: 100 !default;
 $z_2: 200 !default;

data/app/pb_kits/playbook/utilities/_colors.scss

@@ -1,3 +1,5 @@
+// Color Helper Utilities
+
 @function shade($color, $percentage) {
   @return mix($charcoal, $color, $percentage);
 }
@@ -14,9 +16,12 @@
   @return $text_color;
 }
 
+
+// Generate Color Helper Classes
+
 @mixin background-color($colors-list) {
   @each $name, $color in $colors-list {
-    .#{$name} {
+    .pb_web_#{$name} {
       background-color: $color !important;
     }
   }
@@ -28,15 +33,4 @@
       color: $color !important;
     }
   }
-}
-
-.bg_gradient {
-  background: $gradient_start;
-  background: -moz-linear-gradient(-45deg, $gradient_start 0%, $gradient_end 100%);
-  background: -webkit-linear-gradient(-45deg, $gradient_start 0%, $gradient_end 100%);
-  background: linear-gradient(135deg, $gradient_start 0%, $gradient_end 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$gradient_start}', endColorstr='#{$gradient_end}',GradientType=1 );
-}
-
-@include text-color($text_colors);
-@include background-color($background_colors);
+}

data/app/pb_kits/playbook/utilities/_positioning.scss

@@ -1,3 +1,23 @@
+.position_relative {
+  position: relative;
+}
+
+.position_absolute {
+  position: absolute;
+}
+
+.position_fixed {
+  position: fixed;
+}
+
+.position_sticky {
+  position: sticky;
+}
+
+.position_static {
+  position: static;
+}
+
 .z_index_1 {
   z-index: 100;
 }

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -100,6 +100,10 @@ type Padding = {
   padding?: AllSizes,
 }
 
+type Position = {
+  position?: "relative" | "absolute" | "fixed" | "sticky" | "static",
+}
+
 type Shadow = {
   shadow?: "none" | "deep" | "deeper" | "deepest",
 }
@@ -115,7 +119,7 @@ export type GlobalProps = AlignContent & AlignItems & AlignSelf &
   BorderRadius & Cursor & Dark & Display & DisplaySizes & Flex & FlexDirection &
   FlexGrow & FlexShrink & FlexWrap & JustifyContent & JustifySelf &
   LineHeight & Margin & MaxWidth & NumberSpacing & Order & Padding &
-  Shadow & ZIndex
+  Position & Shadow & ZIndex
 
 const getResponsivePropClasses = (prop: {[key: string]: string}, classPrefix: string) => {
   const keys: string[] = Object.keys(prop)
@@ -283,7 +287,12 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     } else {
       return order ? `flex_order_${order}` : ''
     }
-  }
+  }, 
+  positionProps: ({ position }: Position) => {
+    let css = ''
+    css += position && position !== 'static' ? `position_${position}` : ''
+    return css
+  },
 }
 
 type DefaultProps = {[key: string]: string} | Record<string, unknown>

data/lib/playbook/classnames.rb

@@ -31,6 +31,7 @@ module Playbook
         flex_grow_props,
         flex_shrink_props,
         order_props,
+        position_props,
       ].compact.join(" ")
     end
 

data/lib/playbook/kit_base.rb

@@ -19,6 +19,7 @@ require "playbook/flex"
 require "playbook/flex_grow"
 require "playbook/flex_shrink"
 require "playbook/order"
+require "playbook/position"
 
 module Playbook
   class KitBase < ViewComponent::Base
@@ -43,6 +44,7 @@ module Playbook
     include Playbook::FlexGrow
     include Playbook::FlexShrink
     include Playbook::Order
+    include Playbook::Position
 
     prop :id
     prop :data, type: Playbook::Props::Hash, default: {}

data/lib/playbook/position.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Playbook
+  module Position
+    def self.included(base)
+      base.prop :position
+    end
+
+  private
+
+    def position_props
+      selected_props = position_options.keys.select { |sk| try(sk) }
+      return nil unless selected_props.present?
+
+      selected_props.map do |k|
+        value = send(k)
+        return nil unless position_values.include? value
+
+        "position_#{value}"
+      end.compact.join(" ")
+    end
+
+    def position_options
+      {
+        position: "position",
+      }
+    end
+
+    def position_values
+      %w[relative absolute fixed sticky]
+    end
+  end
+end

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.12.0"
-  VERSION = "12.13.0"
+  PREVIOUS_VERSION = "12.13.0"
+  VERSION = "12.14.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.13.0
+  version: 12.14.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-04-04 00:00:00.000000000 Z
+date: 2023-04-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -738,6 +738,8 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_month_and_year.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
@@ -2438,6 +2440,7 @@ files:
 - lib/playbook/pb_doc_helper.rb
 - lib/playbook/pb_forms_helper.rb
 - lib/playbook/pb_kit_helper.rb
+- lib/playbook/position.rb
 - lib/playbook/props.rb
 - lib/playbook/props/array.rb
 - lib/playbook/props/base.rb