playbook_ui 12.31.0 → 12.33.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 39c902d86406eacebfff3d633131660ecfdaf57e1d7b0f9480e1e9090e958501
-  data.tar.gz: a617f4fda7d3e3ed0b6de62504710c4962cdb70c3d59877057fe082262aec1f6
+  metadata.gz: af23c95c3a2dfab60faa4e74711e27f0600fccef932d12090196891014fdc786
+  data.tar.gz: d1f4fbb4f83bdbb75f868288af41a9ec6a4885d20ea62717bcbfb94075b3a062
 SHA512:
-  metadata.gz: 00f0e49f95ed90f0e6a1567cb4ff0448c48e77580f3c7ee02dcdbb060e3a472527007f9026f5486508c7ab3bb12d2a3b5d189605549ee1803c91c377a81ec671
-  data.tar.gz: b37a1a86dc19ff217a582a712161b34b6e4f7875c0b35a040b2c55030c61aa7076ee909555a9df9d4100e2441b9459ea0b391d0dabfec25cd89b191e96148d55
+  metadata.gz: 674a42175dd977edfae485963f39a88723454f85b803f6f61fa62a57a92ac6c4a43f9110efab59a46381a178d41df9912af6f307a6aee299c46dd984ecf01a62
+  data.tar.gz: 0a0aadf265fc5e3da4cba3ce7888db39ce74e238d5521f2ee836c906da84de677d407e679b2add0976422f4fe631b7817d26360e15c775382b38934017319589

data/app/pb_kits/playbook/index.js

@@ -129,4 +129,4 @@ export { default as PbTypeahead } from './pb_typeahead'
 export { default as dialogHelper } from './pb_dialog/dialogHelper'
 
 //Theming
-export {default as mapTheme} from './pb_map/pbMapTheme'
+export {default as mapTheme} from './pb_map/pbMapTheme'

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -15,6 +15,7 @@ type BackgroundProps = {
   'card_light' | 'card_dark' | 'data_1' | 'data_2' | 'data_3' | 'data_4' | 'data_5' | 'data_6' | 'data_7' | 'data_8' |
   'border_light' | 'border_dark' | 'success_secondary' | 'error_secondary' | 'info_secondary' | 'warning_secondary' |
   'neutral_secondary' | 'primary_secondary' | 'success_subtle' | 'warning_subtle' | 'error_subtle' | 'info_subtle' | 'neutral_subtle',
+  backgroundPosition?: string,
   backgroundRepeat?: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round' | 'initial' | 'inherit',
   backgroundSize?: 'auto' | 'cover' | 'contain',
   children?: React.ReactChild[] | React.ReactNode,
@@ -33,6 +34,7 @@ const Background = (props: BackgroundProps) => {
     alt = '',
     aria = {},
     backgroundColor = 'light',
+    backgroundPosition = '',
     backgroundRepeat = 'initial',
     backgroundSize = 'cover',
     children,
@@ -52,7 +54,14 @@ const Background = (props: BackgroundProps) => {
     backgroundImage: `url(${imageUrl})`,
     backgroundRepeat: `${backgroundRepeat}`,
     backgroundSize: `${backgroundSize}`,
+    backgroundPosition: backgroundPosition
   }
+
+  const backgroundPositionStyle = {
+    backgroundColor: customColor? customColor: null,
+    backgroundPosition: `${backgroundPosition}`
+  }
+
   const getBackgroundColor = customColor ? 'pb_background_custom_color' : `pb_background_color_${backgroundColor}`
   const classes = classnames(buildCss('pb_background_kit'), 'lazyload', backgroundStyle, transition, globalProps(props), getBackgroundColor, className)
 
@@ -80,7 +89,7 @@ const Background = (props: BackgroundProps) => {
             {...dataProps}
             className={classes}
             id={id}
-            style={customColor ? { backgroundColor: customColor } : null}
+            style={backgroundPositionStyle}
         >
           { children }
         </Tag>

data/app/pb_kits/playbook/pb_background/background.html.erb

@@ -6,7 +6,8 @@
       class: object.classname,
       style: "background-image: url('#{object.image_url}');
               background-repeat: #{object.background_repeat};
-              background-size: #{object.background_size};"
+              background-size: #{object.background_size};
+              background-position: #{object.background_position};"
   ) do %>
     <%= content.presence %>
   <% end %>

data/app/pb_kits/playbook/pb_background/background.rb

@@ -70,7 +70,8 @@ module Playbook
                                 neutral_subtle
                               ],
                               default: "light"
-
+      prop :background_position, type: Playbook::Props::String,
+                                default: nil
       prop :background_repeat, type: Playbook::Props::Enum,
                                 values: %w[
                                   repeat
@@ -106,7 +107,8 @@ module Playbook
       end
 
       def custom_background_color
-        "background-color: #{custom_color};"
+        "background-color: #{custom_color};
+        background-position: #{background_position}"
       end
 
     private

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

@@ -15,6 +15,7 @@ $pb_dark_body_colors: (
   default:        $text_dk_default,
   light:          $text_dk_light,
   lighter:        $text_dk_lighter,
+  link:           $primary_action_dark,
   error:          $error,
   success:        $text_dk_success_sm,
 );

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

@@ -47,9 +47,9 @@ $pb_button_border_width: 0px;
   width: fit-content;
   font-family: $font_family_base;
   white-space: nowrap;
-  
+
   @include focus;
-  
+
   &[class*=dark] {
     @include focus-dark
   }
@@ -77,7 +77,7 @@ $pb_button_border_width: 0px;
     outline: none;
     border-width: $pb_button_border_width;
   }
-  
+
 };
 
 @mixin pb_button_hover($bg: darken($primary_action, $pb_button_hover_darken)){
@@ -101,7 +101,7 @@ $pb_button_border_width: 0px;
 
 // Secondary ====================
 @mixin pb_button_secondary {
-  @include pb_button_variant($secondary-action, $primary_action);
+  @include pb_button_variant($secondary_action, $primary_action);
 
   @media (hover:hover) {
     &:hover {
@@ -109,9 +109,9 @@ $pb_button_border_width: 0px;
     }
     &:active {
       transition: none;
-      @include pb_button_variant($secondary-action, $primary_action);
+      @include pb_button_variant($secondary_action, $primary_action);
     }
-  } 
+  }
 }
 
 // Link =========================

data/app/pb_kits/playbook/pb_button/docs/_button_hover.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("button", props: { hover: { shadow: "deep"}, text: "Shadow Deep", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { hover: { shadow: "deeper"}, text: "Shadow Deeper", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { hover: { shadow: "deepest"}, text: "Shadow Deepest", margin_right: "lg" }) %>

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

@@ -10,6 +10,7 @@ examples:
   - button_options: Button Additional Options
   - button_size: Button Size
   - button_form: Button Form Attribute
+  
   react:
   - button_default: Button Variants
   - button_full_width: Button Full Width

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

@@ -53,7 +53,7 @@ $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors)
   };
 
   @each $name, $shadow in $box_shadows {
-    &[class*=_#{$name}] {
+    &[class^=_#{$name}] {
       box-shadow: $shadow;
     }
   }

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss

@@ -26,7 +26,7 @@ $pb_button_styles: [
 @mixin pb_circle_icon_button_active {
   &:active {
     transition: none;
-    @include pb_button_variant($secondary-action, $primary_action);
+    @include pb_button_variant($secondary_action, $primary_action);
   }
 }
 

data/app/pb_kits/playbook/pb_date/_date.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import classnames from "classnames";
 
-import DateTime from "../pb_kit/dateTime";
 import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
+import DateTime from '../pb_kit/dateTime';
 
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
@@ -20,7 +20,7 @@ type PbDateProps = {
   showIcon?: boolean;
   size?: "sm" | "md" | "lg";
   unstyled?: boolean;
-  value: string | Date;
+  value: Date;
 };
 
 const PbDate = (props: PbDateProps) => {
@@ -37,12 +37,11 @@ const PbDate = (props: PbDateProps) => {
     value,
   } = props;
 
-  const dateTimestamp = new DateTime({ value: value });
-  const weekday = dateTimestamp.toWeekday();
-  const month = dateTimestamp.toMonth();
-  const day = dateTimestamp.toDay();
-  const year = dateTimestamp.toYear();
-  const currentYear = new Date().getFullYear().toString();
+  const weekday = DateTime.toWeekday(value);
+  const month = DateTime.toMonth(value);
+  const day = DateTime.toDay(value);
+  const year = DateTime.toYear(value);
+  const currentYear = new Date().getFullYear();
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);

data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx

@@ -7,7 +7,7 @@ const DateAlignment = (props) => {
       <FormattedDate
           dayOfWeek
           icon
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -17,7 +17,7 @@ const DateAlignment = (props) => {
           alignment="center"
           dayOfWeek
           icon
-          value="2020-12-25"
+          value={new Date('25 Dec 2020')}
           {...props}
       />
 

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -14,7 +14,7 @@ const DateDefault = (props) => {
 
       <FormattedDate
           size="sm"
-          value="2012-08-03"
+          value={new Date('03 Aug 2012')}
           {...props}
       />
 
@@ -23,7 +23,7 @@ const DateDefault = (props) => {
       <FormattedDate
           showDayOfWeek
           size="sm"
-          value="2017-12-03"
+          value={new Date('03 Dec 2017')}
           {...props}
       />
 
@@ -38,7 +38,7 @@ const DateDefault = (props) => {
       <br />
 
       <FormattedDate
-          value="2012-08-03"
+          value={new Date('03 Aug 2012')}
           {...props}
       />
 
@@ -46,7 +46,7 @@ const DateDefault = (props) => {
 
       <FormattedDate
           showDayOfWeek
-          value="2017-12-03"
+          value={new Date('03 Dec 2017')}
           {...props}
       />
     </>

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx

@@ -21,7 +21,7 @@ const DateUnstyled = (props) => {
       <Title size={1}>
         <FormattedDate
             unstyled
-            value="1995-12-25"
+            value={new Date('25 Dec 1995')}
             {...props}
         />
       </Title>
@@ -36,7 +36,7 @@ const DateUnstyled = (props) => {
             showDayOfWeek
             showIcon
             unstyled
-            value="1995-12-25"
+            value={new Date('25 Dec 1995')}
             {...props}
         />
       </Caption>

data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx

@@ -7,7 +7,7 @@ const DateVariants = (props) => {
       <FormattedDate
           showIcon
           size="sm"
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -15,7 +15,7 @@ const DateVariants = (props) => {
       <br />
 
       <FormattedDate
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -24,7 +24,7 @@ const DateVariants = (props) => {
 
       <FormattedDate
           showIcon
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -33,7 +33,7 @@ const DateVariants = (props) => {
 
       <FormattedDate
           showDayOfWeek
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -43,7 +43,7 @@ const DateVariants = (props) => {
       <FormattedDate
           showDayOfWeek
           showIcon
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
     </div>

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

@@ -71,13 +71,42 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     }
   }
   const disabledParser = () => {
-    if (disableDate && disableDate.length > 0) {
-      return disableDate
-    } else if (disableRange && disableRange.length > 0) {
-      return disableRange
-    } else {
-      return []
-    }
+    const disabledArray=[]
+     
+    disableDate && disableDate.length > 0 && disabledArray.push(...disableDate)
+    disableRange && disableRange.length > 0 && disabledArray.push(...disableRange)
+    disableWeekdays && disableWeekdays.length > 0 && disabledArray.push(...disabledWeekDays())
+
+    return disabledArray
+  }
+
+  const disabledWeekDays = () => {
+    return (
+      [
+        (date:any) => {
+          const weekdayObj: {
+            [day: string]: number
+          } = {
+            Sunday: 0,
+            Monday: 1,
+            Tuesday: 2,
+            Wednesday: 3,
+            Thursday: 4,
+            Friday: 5,
+            Saturday: 6,
+          }
+          return (
+            date.getDay() === weekdayObj[disableWeekdays[0]] ||
+            date.getDay() === weekdayObj[disableWeekdays[1]] ||
+            date.getDay() === weekdayObj[disableWeekdays[2]] ||
+            date.getDay() === weekdayObj[disableWeekdays[3]] ||
+            date.getDay() === weekdayObj[disableWeekdays[4]] ||
+            date.getDay() === weekdayObj[disableWeekdays[5]] ||
+            date.getDay() === weekdayObj[disableWeekdays[6]]
+          )
+        },
+      ]
+    )
   }
   const calendarResizer = () => {
     const cal = document.querySelector(`#cal-${pickerId}.open`) as HTMLElement
@@ -127,30 +156,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     disableMobile: true,
     dateFormat: getDateFormat(),
     defaultDate: defaultDateGetter(),
-    disable: disableWeekdays && disableWeekdays.length > 0 ? [
-      (date) => {
-        const weekdayObj: {
-          [day: string]: number
-        } = {
-          Sunday: 0,
-          Monday: 1,
-          Tuesday: 2,
-          Wednesday: 3,
-          Thursday: 4,
-          Friday: 5,
-          Saturday: 6,
-        }
-        return (
-          date.getDay() === weekdayObj[disableWeekdays[0]] ||
-          date.getDay() === weekdayObj[disableWeekdays[1]] ||
-          date.getDay() === weekdayObj[disableWeekdays[2]] ||
-          date.getDay() === weekdayObj[disableWeekdays[3]] ||
-          date.getDay() === weekdayObj[disableWeekdays[4]] ||
-          date.getDay() === weekdayObj[disableWeekdays[5]] ||
-          date.getDay() === weekdayObj[disableWeekdays[6]]
-        )
-      },
-    ] : disabledParser(),
+    disable: disabledParser(),
     enableTime,
     locale: {
       rangeSeparator: ' to '

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx

@@ -3,7 +3,7 @@ import classnames from "classnames";
 
 import { globalProps } from "../utilities/globalProps";
 import { buildCss, buildDataProps } from "../utilities/props";
-import DateTime from "../pb_kit/dateTime";
+import DateTime from '../pb_kit/dateTime';
 
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
@@ -21,18 +21,16 @@ type DateRangeInlineProps = {
   endDate?: Date;
 };
 
-const dateTimestamp = (dateValue: Date | string, includeYear: boolean) => {
-  const date = new DateTime({ value: dateValue });
+const dateTimestamp = (dateValue: Date, includeYear: boolean) => {
   if (includeYear) {
-    return `${date.toMonth()} ${date.toDay()}, ${date.toYear()}`;
+    return `${DateTime.toMonth(dateValue)} ${DateTime.toDay(dateValue)}, ${DateTime.toYear(dateValue)}`;
   } else {
-    return `${date.toMonth()} ${date.toDay()}`;
+    return `${DateTime.toMonth(dateValue)} ${DateTime.toDay(dateValue)}`;
   }
 };
 
-const dateTimeIso = (dateValue: Date | string) => {
-  const date = new DateTime({ value: dateValue });
-  return date.toIso();
+const dateTimeIso = (dateValue: Date) => {
+  return DateTime.toIso(dateValue);
 };
 
 const DateRangeInline = (props: DateRangeInlineProps) => {
@@ -52,14 +50,17 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
       <>
         {icon && (
           <>
-            <Body color="light" key={Math.random()} tag="span">
-              <Icon
-                className="pb_date_range_inline_icon"
-                dark={dark}
-                fixedWidth
-                icon="calendar-alt"
-                size={size}
+            <Body color="light"
+                key={Math.random()}
                 tag="span"
+            >
+              <Icon
+                  className="pb_date_range_inline_icon"
+                  dark={dark}
+                  fixedWidth
+                  icon="calendar-alt"
+                  size={size}
+                  tag="span"
               />
             </Body>
           </>
@@ -78,7 +79,7 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
 
   const dateRangeClasses = buildCss("pb_date_range_inline_kit", align);
   const dataProps = buildDataProps(data)
-  const renderTime = (date: Date | string) => {
+  const renderTime = (date: Date) => {
     return (
       <time dateTime={dateTimeIso(date)}>
         {dateInCurrentYear() ? (
@@ -92,24 +93,30 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
 
   return (
     <div
-    {...dataProps}
-      className={classnames(dateRangeClasses, globalProps(props), className)}
+        {...dataProps}
+        className={classnames(dateRangeClasses, globalProps(props), className)}
     >
       <div className="pb_date_range_inline_wrapper">
         {size == "xs" && (
           <>
             {iconContent()}
-            <Caption dark={dark} tag="span">
+            <Caption dark={dark}
+                tag="span"
+            >
               {renderTime(startDate)}
             </Caption>
-            <Caption dark={dark} tag="span">
+            <Caption dark={dark}
+                tag="span"
+            >
               <Icon
-                className="pb_date_range_inline_arrow"
-                fixedWidth
-                icon="long-arrow-right"
+                  className="pb_date_range_inline_arrow"
+                  fixedWidth
+                  icon="long-arrow-right"
               />
             </Caption>
-            <Caption dark={dark} tag="span">
+            <Caption dark={dark}
+                tag="span"
+            >
               {renderTime(endDate)}
             </Caption>
           </>
@@ -118,18 +125,25 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
         {size == "sm" && (
           <>
             {iconContent()}
-            <Body dark={dark} tag="span">
+            <Body dark={dark}
+                tag="span"
+            >
               {renderTime(startDate)}
             </Body>
-            <Body color="light" dark={dark} tag="span">
-              <Icon
-                className="pb_date_range_inline_arrow"
+            <Body color="light"
                 dark={dark}
-                fixedWidth
-                icon="long-arrow-right"
+                tag="span"
+            >
+              <Icon
+                  className="pb_date_range_inline_arrow"
+                  dark={dark}
+                  fixedWidth
+                  icon="long-arrow-right"
               />
             </Body>
-            <Body dark={dark} tag="span">
+            <Body dark={dark}
+                tag="span"
+            >
               {renderTime(endDate)}
             </Body>
           </>

data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx

@@ -14,9 +14,9 @@ type DateRangeStackedProps = {
   className?: string | string[],
   data?: string,
   dark?: boolean,
-  endDate: string,
+  endDate: Date,
   id?: string,
-  startDate: string,
+  startDate: Date,
 }
 
 const DateRangeStacked = (props: DateRangeStackedProps) => {
@@ -29,7 +29,9 @@ const DateRangeStacked = (props: DateRangeStackedProps) => {
   const dataProps = buildDataProps(data)
 
   return (
-    <div {...dataProps} className={css}>
+    <div {...dataProps}
+        className={css}
+    >
       <Flex vertical="center">
         <FlexItem>
           <DateYearStacked

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
 import classnames from "classnames";
-import DateTime from "../pb_kit/dateTime";
 import { buildCss, buildDataProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
+import DateTime from '../pb_kit/dateTime';
 
 import Caption from "../pb_caption/_caption";
 import Title from "../pb_title/_title";
@@ -14,7 +14,7 @@ type DateStackedProps = {
   className?: string | string[];
   dark?: boolean;
   data?: string;
-  date: string | Date;
+  date: Date;
   size?: "sm" | "md";
   id?: string;
   reverse?: boolean;
@@ -45,39 +45,42 @@ const DateStacked = (props: DateStackedProps) => {
     className
   );
 
-  const currentYear = new Date().getFullYear().toString();
-  const dateTimestamp = new DateTime({ value: date });
-  const inputYear = dateTimestamp.toYear().toString();
+  const currentYear = new Date().getFullYear()
+  const inputYear = DateTime.toYear(date);
   const dataProps = buildDataProps(data)
 
   return (
     <>
       {bold == false ? (
-        <div {...dataProps} className={classes}>
+        <div {...dataProps}
+            className={classes}
+        >
           <div className="pb_date_stacked_day_month">
-            <Caption text={dateTimestamp.toMonth().toUpperCase()} />
+            <Caption text={DateTime.toMonth(date).toUpperCase()} />
             <Title
-              dark={dark}
-              size={sizes[size]}
-              text={dateTimestamp.toDay()}
+                dark={dark}
+                size={sizes[size]}
+                text={DateTime.toDay(date).toString()}
             />
           </div>
           {currentYear != inputYear && <Caption size="xs">{inputYear}</Caption>}
         </div>
       ) : (
-          <div {...dataProps} className={classes}>
+          <div {...dataProps}
+              className={classes}
+          >
             <div className="pb_date_stacked_day_month">
-              <Title 
-                bold 
-                dark={dark} 
-                size="4" 
-                text={dateTimestamp.toMonth()} 
+              <Title
+                  bold
+                  dark={dark}
+                  size="4"
+                  text={DateTime.toMonth(date)}
               />
-              <Title 
-                bold 
-                dark={dark} 
-                size="4" 
-                text={dateTimestamp.toDay()} 
+              <Title
+                  bold
+                  dark={dark}
+                  size="4"
+                  text={DateTime.toDay(date).toString()}
               />
               {currentYear != inputYear && <Title size="4">{inputYear}</Title>}
             </div>

data/app/pb_kits/playbook/pb_date_time/_date_time.tsx

@@ -13,7 +13,7 @@ type DateTimeProps = {
   aria?: { [key: string]: string; },
   className?: string,
   data?: { [key: string]: string; },
-  datetime: string,
+  datetime: Date,
   id?: string,
   size?: "sm" | "md",
   showDayOfWeek: boolean,