playbook_ui 12.30.1 → 12.31.0.pre.alpha.datepickerdisableddatefix931

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: be0a7b566ae2becf6f879bd4f1cd39c0c27f487ef1a0a962238469eeec8753c6
-  data.tar.gz: ff75740ac1377ced70e9c9b6dc4dbe78f3f7a4ec7a0320d202f4be2b5c3601cd
+  metadata.gz: 654d556d34f5a4d85545aff221a0ad40d54b0f09c6f5a26d74dbd99b346ce57d
+  data.tar.gz: 3ae3d76e2d79224c105d7b8c53c7f7c9033cda03505d55cc4222262926e9a580
 SHA512:
-  metadata.gz: 589840dca5165dd2173a6d2eb01bf95045918ddf958598262a5040cc9e18560ec5cc1cc1073fd522ed50266bb2a3d9fbee1b42ca5eea8d862ffe2a0408e3163f
-  data.tar.gz: d04f64d8a30a45a41541f861c39db6dc82fc21b636e5caa87ec1c889399eaa28fd09374f1994a3266c4cf8bec4d5e3bc80bbe0dfe346a65713b0bdda06c2b321
+  metadata.gz: 1e0ed9fa251b5130bcdfc146ea0e1144b2273424c5f8171fc12b573ada98fbf2ca743d7467602d6d904b65c16fb8976ed51133461bb6497cff4dc038823100b4
+  data.tar.gz: a8dcf56f0adeed47b1e403318feec0a711f9d45dbc6617e26bdb19533fe055552a61bfeb05663141b49d28810f12f3e62397f8177ffa07e6510533a5972f1b5b

data/app/pb_kits/playbook/_playbook.scss

@@ -110,5 +110,7 @@
 @import './utilities/display';
 @import './utilities/flexbox';
 @import './utilities/focus';
+@import './utilities/border_radius';
+@import './utilities/hover';
 
 @import 'pb_multi_level_select/multi_level_select';

data/app/pb_kits/playbook/pb_badge/_badge.scss

@@ -37,6 +37,11 @@
     border-radius: $pb_badge_height / 2;
   }
 
+  &[class*=_notification] {
+    background: $primary;
+    color: $white;
+  }
+
   &.dark {
     border-width: 0;
 

data/app/pb_kits/playbook/pb_badge/_badge.tsx

@@ -24,7 +24,7 @@ type BadgeProps = {
   removeOnClick?: React.MouseEventHandler<HTMLSpanElement>,
   rounded?: boolean,
   text?: string,
-  variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
+  variant?: "error" | "info" | "neutral" | "notification" | "primary" | "success" | "warning",
 } & GlobalProps
 const Badge = (props: BadgeProps) => {
   const {

data/app/pb_kits/playbook/pb_badge/badge.rb

@@ -6,7 +6,7 @@ module Playbook
       prop :rounded, type: Playbook::Props::Boolean, default: false
       prop :text
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[success warning error info neutral primary],
+                     values: %w[success warning error info neutral notification primary],
                      default: "neutral"
 
       def classname

data/app/pb_kits/playbook/pb_badge/badge.test.js

@@ -93,3 +93,16 @@ test('displays success variant', () => {
     cleanup()
 
 })
+
+test('displays notification variant', () => {
+  render(
+    <Badge
+        data={{ testid: testId }}
+        text="1"
+        variant="notification"
+    />
+  )
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(`pb_badge_kit_notification`)
+  cleanup()
+})

data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.html.erb

@@ -0,0 +1,12 @@
+<div>
+  <%= pb_rails("badge", props: {
+    text: "1",
+    variant: "notification",
+    rounded: true
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "4",
+    variant: "notification"
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import Badge from '../_badge'
+
+const BadgeNotification = (props) => {
+  return (
+    <>
+      <Badge
+          rounded
+          text="1"
+          variant="notification"
+          {...props}
+      />
+
+      &nbsp;
+
+      <Badge
+          text="4"
+          variant="notification"
+          {...props}
+      />
+    </>
+  )
+}
+
+export default BadgeNotification

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

@@ -3,9 +3,10 @@ examples:
   - badge_default: Rectangle
   - badge_rounded: Rounded
   - badge_colors: Colors
- 
+  - badge_notification: Notification
 
   react:
   - badge_default: Rectangle
   - badge_rounded: Rounded
   - badge_colors: Colors
+  - badge_notification: Notification

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

@@ -1,3 +1,4 @@
 export { default as BadgeDefault } from './_badge_default'
 export { default as BadgeRounded } from './_badge_rounded'
 export { default as BadgeColors } from './_badge_colors'
+export { default as BadgeNotification } from './_badge_notification'

data/app/pb_kits/playbook/pb_button/docs/_button_hover.jsx

@@ -0,0 +1,40 @@
+import React from "react"
+import { Button } from "../../"
+
+const ButtonHover = (props) => (
+  <div>
+    <div>
+      <Button
+          hover={{ shadow: "deep" }}
+          marginRight='lg'
+          marginTop='xl'
+          onClick={() => alert("button clicked!")}
+          tabIndex={0}
+          text='Shadow Deep'
+          {...props}
+      />{" "}
+      <Button
+          hover={{ shadow: "deeper" }}
+          marginRight='lg'
+          marginTop='xl'
+          onClick={() => alert("button clicked!")}
+          tabIndex={0}
+          text='Shadow Deeper'
+          variant='secondary'
+          {...props}
+      />{" "}
+      <Button
+          hover={{ shadow: "deepest" }}
+          marginRight='lg'
+          marginTop='xl'
+          onClick={() => alert("button clicked!")}
+          tabIndex={0}
+          text='Shadow Deepest'
+          variant='link'
+          {...props}
+      />
+    </div>
+  </div>
+)
+
+export default ButtonHover

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

@@ -21,3 +21,4 @@ examples:
   - button_options: Button Additional Options (onClick)
   - button_size: Button Size
   - button_form: Button Form Attribute
+  - button_hover: Button Hover

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

@@ -8,3 +8,4 @@ export { default as ButtonAccessibility } from './_button_accessibility.jsx'
 export { default as ButtonOptions } from './_button_options.jsx'
 export { default as ButtonSize } from './_button_size.jsx'
 export { default as ButtonForm } from './_button_form.jsx'
+export { default as ButtonHover } from './_button_hover.jsx'

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_message/docs/_message_default.jsx

@@ -1,43 +1,33 @@
-import React from 'react'
+import React from "react"
 
-import Message from '../_message'
-import Image from '../../pb_image/_image'
+import Message from "../_message"
+import Image from "../../pb_image/_image"
 
 const MessageDefault = (props) => {
   return (
     <div>
       <Message
-          avatarName="Mike Bishop"
-          avatarStatus="online"
-          avatarUrl="https://randomuser.me/api/portraits/men/50.jpg"
-          label="Anna Black"
-          message="How can we assist you today?"
-          timestamp="20 seconds ago"
+          avatarName='Mike Bishop'
+          avatarStatus='online'
+          avatarUrl='https://randomuser.me/api/portraits/men/50.jpg'
+          borderRadius='rounded'
+          label='Anna Black'
+          message='How can we assist you today?'
+          timestamp='20 seconds ago'
           {...props}
       />
 
       <br />
       <br />
-
-      <Message
-          alignTimestamp="left"
-          avatarName="Wade Winningham"
-          avatarUrl="https://randomuser.me/api/portraits/men/14.jpg"
-          label="Patrick Welch"
-          message="We will escalate this issue to a Senior Support agent."
-          timestamp="9 minutes ago"
-          {...props}
-      />
-
       <br />
       <br />
 
       <Message
-          avatarName="Becca Jacobs"
-          avatarUrl="https://randomuser.me/api/portraits/women/50.jpg"
-          label="Lucille Sanchez"
-          message="Application for Kate Smith is waiting for your approval"
-          timestamp="2 days ago"
+          avatarName='Becca Jacobs'
+          avatarUrl='https://randomuser.me/api/portraits/women/50.jpg'
+          label='Lucille Sanchez'
+          message='Application for Kate Smith is waiting for your approval'
+          timestamp='2 days ago'
           {...props}
       />
 
@@ -45,10 +35,10 @@ const MessageDefault = (props) => {
       <br />
 
       <Message
-          avatarName="Timothy Wenhold"
-          label="Beverly Reyes"
-          message="We are so sorry you had a bad experience!"
-          timestamp="2 days ago"
+          avatarName='Timothy Wenhold'
+          label='Beverly Reyes'
+          message='We are so sorry you had a bad experience!'
+          timestamp='2 days ago'
           {...props}
       />
 
@@ -56,24 +46,23 @@ const MessageDefault = (props) => {
       <br />
 
       <Message
-          label="Keith Craig"
-          message="Please hold for one moment, I will check with my manager."
-          timestamp="2 days ago"
+          label='Keith Craig'
+          message='Please hold for one moment, I will check with my manager.'
+          timestamp='2 days ago'
           {...props}
       />
 
       <br />
       <br />
 
-      <Message
-          label="Keith Craig"
-          timestamp="2 days ago"
+      <Message label='Keith Craig'
+          timestamp='2 days ago'
           {...props}
       >
         <Image
-            alt="picture of a misty forest"
-            size="md"
-            url="https://unsplash.it/500/400/?image=634"
+            alt='picture of a misty forest'
+            size='md'
+            url='https://unsplash.it/500/400/?image=634'
         />
       </Message>
 
@@ -81,18 +70,17 @@ const MessageDefault = (props) => {
       <br />
 
       <Message
-          label="Keith Craig"
-          message="Please hold for one moment, I will check with my manager."
-          timestamp="2 days ago"
+          label='Keith Craig'
+          message='Please hold for one moment, I will check with my manager.'
+          timestamp='2 days ago'
           {...props}
       >
         <Image
-            alt="picture of a misty forest"
-            size="md"
-            url="https://unsplash.it/500/400/?image=634"
+            alt='picture of a misty forest'
+            size='md'
+            url='https://unsplash.it/500/400/?image=634'
         />
       </Message>
-
     </div>
   )
 }

data/app/pb_kits/playbook/pb_message/docs/_message_hover.jsx

@@ -0,0 +1,41 @@
+import React from "react"
+
+import Message from "../_message"
+
+const MessageHover = (props) => {
+  return (
+    <div>
+      <Message
+          avatarName='Mike Bishop'
+          avatarStatus='online'
+          avatarUrl='https://randomuser.me/api/portraits/men/50.jpg'
+          borderRadius='rounded'
+          hover={{ background: "success_subtle" }}
+          label='Anna Black'
+          message='How can we assist you today?'
+          padding="xs"
+          {...props}
+      />
+
+      <br />
+      <br />
+      <br />
+
+      <Message
+          avatarName='Becca Jacobs'
+          avatarUrl='https://randomuser.me/api/portraits/women/50.jpg'
+          borderRadius='rounded'
+          hover={{ shadow: "deepest" }}
+          label='Lucille Sanchez'
+          message='Application for Kate Smith is waiting for your approval'
+          padding="xs"
+          {...props}
+      />
+
+      <br />
+
+    </div>
+  )
+}
+
+export default MessageHover

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

@@ -8,4 +8,5 @@ examples:
   react:
   - message_default: Default
   - message_timestamp: With Timestamp Hover
+  - message_hover: Hover
 

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

@@ -1,2 +1,4 @@
 export { default as MessageDefault } from './_message_default.jsx'
 export { default as MessageTimestamp } from './_message_timestamp.jsx'
+export { default as MessageHover } from './_message_hover.jsx'
+

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

@@ -135,7 +135,7 @@ export const recursiveCheckParent = (
   return data;
 };
 
-export const getExpandedItems = (treeData: { [key: string]: string }[]) => {
+export const getExpandedItems = (treeData: { [key: string]: string }[], selectedIds: string[]) => {
   let expandedItems: any[] = [];
 
   const traverse = (items: string | any[], ancestors: any[] = []) => {
@@ -146,6 +146,9 @@ export const getExpandedItems = (treeData: { [key: string]: string }[]) => {
       if (item.expanded) {
         expandedItems.push(item.id);
       }
+      if (selectedIds && selectedIds.length && selectedIds.includes(item.id)) {
+        expandedItems.push(...itemAncestors.map((ancestor) => ancestor.id));
+      }
       if (Array.isArray(item.children)) {
         const hasCheckedChildren = item.children.some(
           (child: { [key: string]: string }) => child.checked

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

@@ -28,6 +28,7 @@ type MultiLevelSelectProps = {
   returnAllSelected?: boolean
   treeData?: { [key: string]: string }[]
   onSelect?: (prop: { [key: string]: any }) => void
+  selectedIds?: string[]
 } & GlobalProps
 
 const MultiLevelSelect = (props: MultiLevelSelectProps) => {
@@ -41,6 +42,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     returnAllSelected = false,
     treeData,
     onSelect = () => {},
+    selectedIds
   } = props
 
   const ariaProps = buildAriaProps(aria)
@@ -64,14 +66,14 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   //state for return for default
   const [defaultReturn, setDefaultReturn] = useState([])
   // Get expanded items from treeData.
-  const initialExpandedItems = getExpandedItems(treeData);
+  const initialExpandedItems = getExpandedItems(treeData, selectedIds);
   // Initialize state with expanded items.
   const [expanded, setExpanded] = useState(initialExpandedItems);
 
 
   useEffect(() => {
-    setFormattedData(addCheckedAndParentProperty(treeData))
-  }, [treeData])
+    setFormattedData(addCheckedAndParentProperty(treeData, selectedIds))
+  }, [treeData, selectedIds])
 
   useEffect(() => {
     if (returnAllSelected) {
@@ -160,6 +162,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   //function to map over data and add parent_id + depth property to each item
   const addCheckedAndParentProperty = (
     treeData: { [key: string]: any }[],
+    selectedIds: string[],
     parent_id: string = null,
     depth: number = 0,
   ) => {
@@ -169,6 +172,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     return treeData.map((item: { [key: string]: any } | any) => {
       const newItem = {
         ...item,
+        checked: selectedIds && selectedIds.length && selectedIds.includes(item.id),
         parent_id,
         depth,
       }
@@ -179,6 +183,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
             : item.children
         newItem.children = addCheckedAndParentProperty(
           children,
+          selectedIds,
           newItem.id,
           depth + 1
         )

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.html.erb

@@ -0,0 +1,76 @@
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "100",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "101",
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "102",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "103",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "104",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "105",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "106",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "107",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "108",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "109",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "110",
+          },
+        ],
+      },
+    ],
+}] %>
+
+
+
+
+<%= pb_rails("multi_level_select", props: {
+    id: "multi-level-select-seelcted_ids",
+    name: "my_data_array_selected",
+    return_all_selected: true,
+    selected_ids:["110","102"],
+    tree_data: treeData,
+}) %>
+