playbook_ui 12.31.0 → 12.32.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 39c902d86406eacebfff3d633131660ecfdaf57e1d7b0f9480e1e9090e958501
-  data.tar.gz: a617f4fda7d3e3ed0b6de62504710c4962cdb70c3d59877057fe082262aec1f6
+  metadata.gz: a79955ccab5fc9bbdbb96a5a4d10cd3f65f6e85801573552c171032bae82ca4b
+  data.tar.gz: bb3d6b87543fbfce6c0ce0d1d006d73b670d239ae77acde85be73effcb5af1a9
 SHA512:
-  metadata.gz: 00f0e49f95ed90f0e6a1567cb4ff0448c48e77580f3c7ee02dcdbb060e3a472527007f9026f5486508c7ab3bb12d2a3b5d189605549ee1803c91c377a81ec671
-  data.tar.gz: b37a1a86dc19ff217a582a712161b34b6e4f7875c0b35a040b2c55030c61aa7076ee909555a9df9d4100e2441b9459ea0b391d0dabfec25cd89b191e96148d55
+  metadata.gz: 3a9c508c6a7fef4e46f8bc0127a8afd4cfa33f3e7622428447c7beac1849bccb0a671ddb3eeb3c53344c699b067dbfd612f770e31abf643ccff9b1468ff97c13
+  data.tar.gz: e996bd743ae739a19a668a12ad4668acb3da51787e7b83f9dec559e88fb9cb75dae48191097fe5d46768ca360a57d43784fac4c3b4aae30a1b7209abc602ee68

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_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_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -14,24 +14,26 @@ const iconMap = {
 };
 
 type FixedConfirmationToastProps = {
-  autoClose?: number;
-  className?: string;
-  closeable?: boolean;
-  data?: string;
-  horizontal?: "right" | "left" | "center";
-  id?: string;
-  multiLine?: boolean;
-  onClose?: () => void;
-  open?: boolean;
-  status?: "success" | "error" | "neutral" | "tip";
-  text: string;
-  vertical?: "top" | "bottom";
-};
+  autoClose?: number,
+  children?: React.ReactChild[] | React.ReactChild,
+  className?: string,
+  closeable?: boolean,
+  data?: string,
+  horizontal?: "right" | "left" | "center",
+  id?: string,
+  multiLine?: boolean,
+  onClose?: () => void,
+  open?: boolean,
+  status?: "success" | "error" | "neutral" | "tip",
+  text?: string,
+  vertical?: "top" | "bottom",
+}
 
 const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
   const [showToast, toggleToast] = useState(true);
   const {
     autoClose = 0,
+    children,
     className,
     closeable = false,
     horizontal,
@@ -75,13 +77,20 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
       {showToast && (
         <div className={css} onClick={handleClick}>
           {icon && <Icon className="pb_icon" fixedWidth icon={icon} />}
-          <Title
-            className="pb_fixed_confirmation_toast_text"
-            size={4}
-            text={text}
-          />
+
+          {
+            children && children ||
+            text && (
+              <Title
+                className="pb_fixed_confirmation_toast_text"
+                size={4}
+                text={text}
+              />
+            )
+          }
+
           {closeable && (
-            <Icon className="pb_icon" fixedWidth={false} icon="times" />
+            <Icon className="pb_icon" cursor="pointer" fixedWidth={false} icon="times" />
           )}
         </div>
       )}

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children.html.erb

@@ -0,0 +1,17 @@
+<%= pb_rails("fixed_confirmation_toast", props: {
+  padding_y: "none",
+  status: "success"
+}) do %>
+  <%= pb_rails("title", props: {
+    dark: true,
+    margin_left: "md",
+    text: "Design & Handoff Process was moved to UX Designer Learning Track.",
+    size: 4
+  }) %>
+  <%= pb_rails("button", props: {
+    dark: true,
+    padding_right: "none",
+    text: "Undo",
+    variant: "link"
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import FixedConfirmationToast from '../_fixed_confirmation_toast'
+import Button from '../../pb_button/_button'
+import Title from '../../pb_title/_title'
+
+const FixedConfirmationToastChildren = (props) => {
+    return (
+        <>
+            <FixedConfirmationToast
+                paddingY="none"
+                status="success"
+                {...props}
+            >
+                <Title
+                    dark
+                    marginLeft="md"
+                    size={4}
+                    text="Design & Handoff Process was moved to UX Designer Learning Track."
+                />
+                <Button
+                    dark
+                    onClick={() => alert("button clicked!")}
+                    paddingRight="none"
+                    text="Undo"
+                    variant="link"
+                />
+            </FixedConfirmationToast>
+        </>
+    )
+}
+
+export default FixedConfirmationToastChildren

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children.md

@@ -0,0 +1,3 @@
+Pass anything (including any of our kits) to the `children` prop to customize the content of the fixed confirmation toast.
+
+**NOTE:** passing `children` overrides any content passed to `text`

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

@@ -5,6 +5,7 @@ examples:
   - fixed_confirmation_toast_multi_line: Multi Line
   - fixed_confirmation_toast_close: Click to Close
   - fixed_confirmation_toast_positions: Click to Show Positions
+  - fixed_confirmation_toast_children: Children
   
   react:
   - fixed_confirmation_toast_default: Default
@@ -12,3 +13,4 @@ examples:
   - fixed_confirmation_toast_close: Click to Close
   - fixed_confirmation_toast_positions: Click to Show Positions
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
+  - fixed_confirmation_toast_children: Children

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

@@ -3,3 +3,4 @@ export { default as FixedConfirmationToastMultiLine } from './_fixed_confirmatio
 export { default as FixedConfirmationToastClose } from './_fixed_confirmation_toast_close.jsx'
 export { default as FixedConfirmationToastPositions } from './_fixed_confirmation_toast_positions.jsx'
 export { default as FixedConfirmationToastAutoClose } from './_fixed_confirmation_toast_auto_close.jsx'
+export { default as FixedConfirmationToastChildren } from './_fixed_confirmation_toast_children.jsx'

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb

@@ -4,6 +4,12 @@
     data: object.data,
     class: object.classname) do %>
     <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
-    <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_fixed_confirmation_toast_text" }) if object.show_text? %>
-    <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon" }) if object.closeable %>
+
+    <% if content %>
+        <%= content %>
+    <% elsif object.show_text? %>
+        <%= pb_rails("title", props: { text: object.text, size: 4, classname: "pb_fixed_confirmation_toast_text" }) %>
+    <% end %>
+
+    <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer" }) if object.closeable %>
 <% end %>

data/app/pb_kits/playbook/pb_message/docs/_message_hover.html.erb

@@ -0,0 +1,25 @@
+<%= pb_rails("message", props: {
+  avatar_name: "Mike Bishop",
+  avatar_status: "online",
+  avatar_url: "https://randomuser.me/api/portraits/men/50.jpg",
+  border_radius: "rounded",
+  hover: { background: "success_subtle" },
+  label: "Anna Black",
+  message: "How can we assist you today?",
+  padding: "xs",
+}) %>
+
+<br><br>
+
+<%= pb_rails("message", props: {
+  align_timestamp: "left",
+  avatar_name: "Lucille Sanchez",
+  avatar_url: "https://randomuser.me/api/portraits/women/50.jpg",
+  border_radius: "rounded",
+  hover: { shadow: "deepest" },
+  label: "Becca Jacobs",
+  message: "Application for Kate Smith is waiting for your approval",
+  padding: "xs",
+}) %>
+
+<br><br>

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

@@ -3,6 +3,7 @@ examples:
   rails:
   - message_default: Default
   - message_timestamp: With Timestamp Hover
+  - message_hover: Hover
 
 
   react:

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss

@@ -36,6 +36,7 @@
       input {
         border: none;
         font-family: $font_family_base;
+        font-size: $font_base;
         &:focus {
           outline: none;
         }

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -250,6 +250,15 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     }
   }
 
+  const itemsSelectedLength = () => {
+    let items
+    if (returnAllSelected && returnedArray && returnedArray.length) {
+      items = returnedArray.length
+    } else if (!returnAllSelected && defaultReturn && defaultReturn.length) {
+      items = defaultReturn.length
+    }
+    return items
+  }
   //rendering formattedData to UI based on typeahead
   const renderNestedOptions = (items: { [key: string]: any }[]) => {
     return (
@@ -346,7 +355,9 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
               onChange={(e) => {
                 setFilterItem(e.target.value)
               }}
-              placeholder='Start typing...'
+              placeholder={inputDisplay === "none" && itemsSelectedLength() ? (
+                    `${itemsSelectedLength()} ${itemsSelectedLength() === 1 ? 'item' : 'items'} selected`
+                  ) : ("Start typing...")}
               value={filterItem}
               onClick={() => setIsClosed(false)}
             />

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

@@ -2,7 +2,7 @@
 
 @mixin hover-color-classes($colors-list) {
     @each $name, $color in $colors-list {
-      .bg-hover-#{$name}:hover {
+      .hover_background_#{$name}:hover {
         background-color: $color !important;
         transition: background-color $transition-speed ease;
       }

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

@@ -147,7 +147,7 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
       let css = '';
       if (!hover) return css;
       css += hover.shadow ? `hover_shadow_${hover.shadow} ` : '';
-      css += hover.background ? `bg-hover-${hover.background } ` : '';
+      css += hover.background ? `hover_background_${hover.background } ` : '';
       css += hover.scale ? `hover_scale_${hover.scale} ` : '';
       return css;
   },