playbook_ui 14.9.0.pre.alpha.PBNTR746datepickerdefaultbug4903 → 14.9.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5121

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx

@@ -3,7 +3,7 @@
 import classnames from 'classnames'
 import React, { useContext } from 'react'
 import { buildCss } from '../../utilities/props'
-import { globalProps } from '../../utilities/globalProps'
+import { globalProps, GlobalProps } from '../../utilities/globalProps'
 
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
@@ -25,7 +25,7 @@ const CollapsibleMain = ({
   className,
   cursor = 'pointer',
   ...props
-}: CollapsibleMainProps): React.ReactElement=> {
+}: CollapsibleMainProps & GlobalProps): React.ReactElement=> {
   const {collapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick}: any = useContext(CollapsibleContext)
   const mainCSS = buildCss('pb_collapsible_main_kit')
   const mainSpacing = globalProps(props, { cursor })

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

@@ -68,7 +68,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     timeFormat = 'at h:i K',
     yearRange,
   } = config
-  console.log("1 " + JSON.stringify(config));
+
   // ===========================================================
   // |                   Hook Definitions                      |
   // ===========================================================
@@ -148,8 +148,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
 
     // time selection
     if (enableTime) pluginList.push(timeSelectPlugin({ caption: timeCaption, showTimezone: showTimezone}))
-    console.log("3 " + JSON.stringify(customQuickPickDates));
-    console.log("4 " + pluginList);
+
     return pluginList
   }
 
@@ -245,7 +244,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
 
   // Reverse month and year dropdown reset on form.reset()
   if (picker.input.form) {
-    console.log("5 " + picker.input.form);
     picker.input.form.addEventListener('reset', () => {
       // Code block triggers after form.reset() is called and executed
       setTimeout(() => {

data/app/pb_kits/playbook/pb_drawer/_drawer.tsx

@@ -287,7 +287,6 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
               {...ariaProps}
               {...dataProps}
               {...htmlProps}
-              style={dynamicInlineProps}
               className={classnames(drawerClassNames.base, {
               [drawerClassNames.afterOpen]:
                 animationState === "afterOpen",
@@ -296,6 +295,7 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
             })}
               id={id}
               onClick={(e) => e.stopPropagation()}
+              style={dynamicInlineProps}
           >
             {children}
           </div>
@@ -306,7 +306,6 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
             {...dataProps}
             {...htmlProps}
             className={classes}
-            style={dynamicInlineProps}
         >
           {isModalVisible && (
             <div
@@ -327,6 +326,7 @@ const Drawer = (props: DrawerProps): React.ReactElement => {
                     animationState === "beforeClose",
                 })}
                   onClick={(e) => e.stopPropagation()}
+                  style={dynamicInlineProps}
               >
                 {children}
               </div>

data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss

@@ -0,0 +1,57 @@
+@mixin error-state-flex-start-selectors {
+  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit),
+  &:has(.pb_text_input_kit):has(.pb_date_picker_kit.error),
+  &:has(.pb_text_input_kit):has(.pb_select_kit_wrapper.error),
+  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error) {
+    align-items: flex-start;
+  }
+}
+
+@mixin error-state-center-selectors {
+  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper.error):has(.pb_phone_number_input),
+  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has([class^=pb_button_kit]) {
+    align-items: center;
+  }
+}
+
+@mixin error-state-flex-end-selectors {
+  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper.error):has(.pb_phone_number_input):has(.pb_text_input_kit.error) {
+    align-items: flex-end;
+  }
+}
+
+@mixin error-state-right-side-select-kit {
+  &:has(.pb_text_input_kit:not(.error)):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error),
+  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper) {
+    align-items: flex-start;
+
+    .pb_select_kit_wrapper {
+      padding-top: $space_md;
+      margin-top: 2px;
+
+      .pb_select_kit_caret {
+        padding-top: $space_md;
+      }
+    }
+
+    .pb_select_kit_wrapper.error {
+      padding-top: $space_md;
+      margin-top: 2px;
+
+      .pb_select_kit_caret {
+        padding-top: $space_xl;
+      }
+    }
+  }
+}
+
+@mixin error-state-left-side-select-kit {
+  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_phone_number_input):has(.pb_text_input_kit.error) {
+    align-items: flex-start;
+
+    .pb_text_input_kit.error {
+      padding-top: $space_md;
+      margin-top: 2px;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -1,3 +1,6 @@
+@import "../tokens/spacing";
+@import "./error_state_mixin";
+
 [class^=pb_form_group_kit] {
   display: inline-flex;
   flex-direction: row;
@@ -12,6 +15,12 @@
     }
   }
 
+@include error-state-flex-start-selectors;
+@include error-state-center-selectors;
+@include error-state-flex-end-selectors;
+@include error-state-left-side-select-kit;
+@include error-state-right-side-select-kit;
+
   & [class^=pb_text_input_kit] .text_input_wrapper,
   & [class^=pb_date_picker_kit] .input_wrapper,
   & [class^=pb_select] {
@@ -27,7 +36,7 @@
       border-bottom-right-radius: 0;
       border-top-right-radius: 0;
       border-right-width: 0;
-    
+
       &:focus {
         outline: $primary solid 1px;
         outline-offset: -1px;
@@ -150,7 +159,7 @@
   & > [class^=pb_selectable_card_kit] input[type="checkbox"]:not(:checked) ~ label, [class^=pb_selectable_card_kit] input[type="radio"]:not(:checked) ~ label {
     &:hover {
       border-right-color: $slate;
-    } 
+    }
   }
 
   & > [class^=pb_selectable_card_kit]:not(:first-child) label {

data/app/pb_kits/playbook/pb_gauge/_gauge.scss

@@ -1,12 +1,33 @@
+@import "../tokens/colors";
+
 [class^=pb_gauge_kit] {
 
+  .fix {
+    fill: $text_lt_default;
+    stroke: none;
+
+    &[class*=dark] {
+      fill: $text_dk_default;
+    }
+  }
+
   .suffix {
     fill: $text_lt_light;
+    stroke: none;
     font: $regular $font_larger $font_family_base;
+
+    &[class*=dark] {
+      fill: $text_dk_light;
+    }
   }
   .prefix {
     fill: $text_lt_light;
+    stroke: none;
     font: $regular $font_base $font_family_base;
+
+    &[class*=dark] {
+      fill: $text_dk_light;
+    }
   }
 
   rect.highcharts-background {
@@ -16,4 +37,13 @@
   .gauge-pane {
     stroke-linejoin: round;
   }
-}
+
+  &[class*=dark] {
+    color: $text_dk_default;
+
+    .pb_title_kit_size_1,
+    .pb_caption_kit_xs {
+        color: $text_dk_light;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_gauge/_gauge.tsx

@@ -164,9 +164,9 @@ const Gauge = ({
             color: defaultColors.text_lt_default,
             enabled: true,
             format:
-              `<span class="prefix">${prefix}</span>` +
-              '<span class="fix">{y:,f}</span>' +
-              `<span class="suffix">${suffix}</span>`,
+              `<span class="prefix${dark ? " dark" : ""}">${prefix}</span>` +
+              `<span class="fix${dark ? " dark" : ""}">{y:,f}</span>` +
+              `<span class="suffix${dark ? " dark" : ""}">${suffix}</span>`,
             style: {
               fontFamily: typography.font_family_base,
               fontWeight: typography.regular,

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx

@@ -17,47 +17,60 @@ const GaugeComplex = (props) => (
       gap="sm"
       padding="xl"
       wrap
+      {...props}
   >
     <FlexItem
         flex={1}
         grow
+        {...props}
     >
       <Card
           maxWidth="xs"
           padding="md"
+          {...props}
       >
         <Title
             paddingBottom="sm"
             size={4}
             text="Abandoned Calls"
+            {...props}
         />
-        <Flex align="stretch">
+        <Flex
+            align="stretch"
+            {...props}
+        >
           <Flex
               marginRight="sm"
               orientation="column"
+              {...props}
           >
             <Body
                 color="light"
                 paddingBottom="sm"
                 text="Total Abandoned"
+                {...props}
             />
             <Flex
                 align="baseline"
                 paddingBottom="xs"
+                {...props}
             >
               <Title
                   size={1}
                   text="39"
+                  {...props}
               />
               <Title
                   color="light"
                   size={3}
                   text="calls"
+                  {...props}
               />
             </Flex>
             <Caption
                 size="xs"
                 text="of 390"
+                {...props}
             />
           </Flex>
 
@@ -65,22 +78,29 @@ const GaugeComplex = (props) => (
               alignSelf="stretch"
               marginRight="sm"
               orientation="vertical"
+              {...props}
           />
 
           <Flex
               orientation="column"
               wrap
+              {...props}
           >
               <Body
                   color="light"
                   text="% Abandoned"
-               />
-            <Flex wrap>
+                  {...props}
+              />
+            <Flex
+                wrap
+                {...props}
+            >
               <FlexItem
                   fixedSize="150px"
                   overflow="hidden"
                   shrink
-              > 
+                  {...props}
+              >
                 <Gauge
                     chartData={data}
                     disableAnimation
@@ -90,7 +110,7 @@ const GaugeComplex = (props) => (
                     {...props}
                 />
                </FlexItem>
-            </Flex>  
+            </Flex>
           </Flex>
         </Flex>
       </Card>

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx

@@ -18,7 +18,7 @@ type HomeAddressStreetProps = {
   className?: string,
   data?: { [key: string]: string },
   dark?: boolean,
-  emphasis: "street" | "city",
+  emphasis: "street" | "city" | "none",
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   homeId: string,
   houseStyle: string,
@@ -129,6 +129,22 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
           </div>
         </div>
       }
+      {emphasis == 'none' &&
+        <div>
+          <Body dark={dark}>
+            {joinPresent([titleize(address), houseStyle], ' · ')}
+          </Body>
+          <Body dark={dark}>{titleize(addressCont)}</Body>
+          <div>
+            <Body
+                color="light"
+                dark={dark}
+              >
+            {`${titleize(city)}, ${state} ${zipcode}`}
+          </Body>
+          </div>
+        </div>
+      }
       {homeId &&
         <Hashtag
             classname="home-hashtag"

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.html.erb

@@ -24,4 +24,20 @@
   state: "PA",
   zipcode: "19382",
   territory: "PHL",
-}) %>
+}) %>
+
+<br>
+<br>
+
+<%= pb_rails("home_address_street", props: {
+  address: "70 Prospect Ave",
+  address_cont: "Apt M18",
+  city: "West Chester",
+  emphasis: "none",
+  home_id: 8250263,
+  home_url: "https://powerhrg.com/",
+  house_style: "Colonial",
+  state: "PA",
+  zipcode: "19382",
+  territory: "PHL",
+}) %>

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx

@@ -32,6 +32,21 @@ const HomeAddressStreetEmphasis = (props) => {
           zipcode="19382"
           {...props}
       />
+      <br />
+      <br />
+      <HomeAddressStreet
+          address="70 Prospect Ave"
+          addressCont="Apt M18"
+          city="West Chester"
+          emphasis="none"
+          homeId="8250263"
+          homeUrl="https://powerhrg.com/"
+          houseStyle="Colonial"
+          state="PA"
+          territory="PHL"
+          zipcode="19382"
+          {...props}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.md

@@ -1,2 +1,3 @@
 Emphasis on street happens by default. (no prop needed)
-Emphasis on "city" makes the city emphasized, rather than the street.
+Emphasis on "city" makes the city emphasized, rather than the street.
+Adding "none" to emphasis prop will provide no emphasis.

data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb

@@ -7,7 +7,7 @@ module Playbook
       prop :address_cont
       prop :city
       prop :emphasis, type: Playbook::Props::Enum,
-                      values: %w[street city],
+                      values: %w[street city none],
                       default: "street"
       prop :home_id, type: Playbook::Props::Number
       prop :home_url
@@ -77,6 +77,20 @@ module Playbook
         }
       end
 
+      def none_emphasis_props
+        {
+          address_house_style: address_house_style,
+          address_house_style2: address_house_style2,
+          city_state_zip: city_state_zip,
+          dark: dark,
+          home_id: home_id,
+          home_url: home_url,
+          target: target_option,
+          new_window: new_window,
+          territory: territory,
+        }
+      end
+
       def target_option
         if target && home_url
           target

data/app/pb_kits/playbook/pb_home_address_street/none_emphasis.html.erb

@@ -0,0 +1,32 @@
+<%= pb_rails "body", props: {
+  classname: "pb_home_address_street_address",
+  size: 4,
+  text: object.address_house_style,
+  dark: object.dark
+} %>
+<%= pb_rails "body", props: {
+  classname: "pb_home_address_street_address",
+  size: 4,
+  text: object.address_house_style2,
+  dark: object.dark
+} %>
+<%= pb_rails "body", props: {
+  color: "light",
+  text: object.city_state_zip,
+  dark: object.dark
+} %>
+
+<% if object.home_id %>
+  <%= pb_rails("hashtag", props: {
+    text: "#{object.home_id}",
+    url: object.home_url || "#",
+    type: "home",
+    dark: object.dark,
+    classname: "home-hashtag",
+    new_window: object.new_window,
+    target: object.target_option}) %>
+<% end %>
+
+<%= pb_rails "body", props: { color: "light", tag: "span", dark: object.dark } do %>
+  <small><%= object.territory %></small>
+<% end %>

data/app/pb_kits/playbook/pb_home_address_street/none_emphasis.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbHomeAddressStreet
+    class NoneEmphasis < Playbook::KitBase
+      prop :address_house_style
+      prop :address_house_style2
+      prop :city_state_zip
+      prop :home_id, type: Playbook::Props::Number
+      prop :home_url
+      prop :new_window, type: Playbook::Props::Boolean,
+                        default: false
+      prop :target
+      prop :territory
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
+
+      def target_option
+        if target && home_url
+          target
+        elsif new_window
+          "_blank"
+        else
+          "_self"
+        end
+      end
+    end
+  end
+end

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

@@ -24,34 +24,37 @@ type LayoutPropTypes = {
 type LayoutSideProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-}
+} & GlobalProps
 
 type LayoutBodyProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-}
+} & GlobalProps
 
 type LayoutItemProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
   size?: "sm" | "md" | "lg"
-}
+} & GlobalProps
 
 type LayoutHeaderProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-}
+} & GlobalProps
 
 type LayoutFooterProps = {
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-}
+} & GlobalProps
 
-// Side component
 const Side = (props: LayoutSideProps) => {
   const { children, className } = props
+  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div className={classnames('layout_sidebar', globalProps(props), className)}>
+    <div
+        className={classnames('layout_sidebar', globalProps(props), className)}
+        style={dynamicInlineProps}
+    >
       {children}
     </div>
   )
@@ -60,8 +63,12 @@ const Side = (props: LayoutSideProps) => {
 // Body component
 const Body = (props: LayoutBodyProps) => {
   const { children, className } = props
+  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div className={classnames('layout_body', globalProps(props), className)}>
+    <div
+        className={classnames('layout_body', globalProps(props), className)}
+        style={dynamicInlineProps}
+    >
       {children}
     </div>
   )
@@ -71,8 +78,12 @@ const Body = (props: LayoutBodyProps) => {
 const Item = (props: LayoutItemProps) => {
   const { children, className, size = 'sm' } = props
   const sizeClass = `size_${size}`
+  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div className={classnames('layout_item', sizeClass, globalProps(props), className)}>
+    <div
+        className={classnames('layout_item', sizeClass, globalProps(props), className)}
+        style={dynamicInlineProps}
+    >
       {children}
     </div>
   )
@@ -81,8 +92,12 @@ const Item = (props: LayoutItemProps) => {
 // Header component
 const Header = (props: LayoutHeaderProps) => {
   const { children, className } = props
+  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div className={classnames('layout_header', globalProps(props), className)}>
+    <div
+        className={classnames('layout_header', globalProps(props), className)}
+        style={dynamicInlineProps}
+    >
       {children}
     </div>
   )
@@ -91,8 +106,12 @@ const Header = (props: LayoutHeaderProps) => {
 // Footer component
 const Footer = (props: LayoutFooterProps) => {
   const { children, className } = props
+  const dynamicInlineProps = globalInlineProps(props)
   return (
-    <div className={classnames('layout_footer', globalProps(props), className)}>
+    <div
+        className={classnames('layout_footer', globalProps(props), className)}
+        style={dynamicInlineProps}
+    >
       {children}
     </div>
   )

data/app/pb_kits/playbook/pb_link/_link.scss

@@ -17,7 +17,7 @@
     outline-offset: 2px;
   }
   &:visited {
-    color: $data_3;
+    color: darken($primary_action, 10%);
   }
   &.dark  {
     @include pb_link($active_dark);
@@ -34,7 +34,7 @@
       }
 
       &:visited {
-        color: $data_3;
+        color: darken($primary_action, 10%);
       }
     }
   }
@@ -48,7 +48,7 @@
       }
 
       &:visited {
-        color: $data_3;
+        color: darken($primary_action, 10%);
       }
     }
   }