playbook_ui 12.30.1 → 12.31.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: be0a7b566ae2becf6f879bd4f1cd39c0c27f487ef1a0a962238469eeec8753c6
-  data.tar.gz: ff75740ac1377ced70e9c9b6dc4dbe78f3f7a4ec7a0320d202f4be2b5c3601cd
+  metadata.gz: 39c902d86406eacebfff3d633131660ecfdaf57e1d7b0f9480e1e9090e958501
+  data.tar.gz: a617f4fda7d3e3ed0b6de62504710c4962cdb70c3d59877057fe082262aec1f6
 SHA512:
-  metadata.gz: 589840dca5165dd2173a6d2eb01bf95045918ddf958598262a5040cc9e18560ec5cc1cc1073fd522ed50266bb2a3d9fbee1b42ca5eea8d862ffe2a0408e3163f
-  data.tar.gz: d04f64d8a30a45a41541f861c39db6dc82fc21b636e5caa87ec1c889399eaa28fd09374f1994a3266c4cf8bec4d5e3bc80bbe0dfe346a65713b0bdda06c2b321
+  metadata.gz: 00f0e49f95ed90f0e6a1567cb4ff0448c48e77580f3c7ee02dcdbb060e3a472527007f9026f5486508c7ab3bb12d2a3b5d189605549ee1803c91c377a81ec671
+  data.tar.gz: b37a1a86dc19ff217a582a712161b34b6e4f7875c0b35a040b2c55030c61aa7076ee909555a9df9d4100e2441b9459ea0b391d0dabfec25cd89b191e96148d55

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_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,
+}) %>
+ 

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.jsx

@@ -0,0 +1,88 @@
+import React from "react";
+import MultiLevelSelect from "../_multi_level_select";
+
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people1",
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent1",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative1",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "development1",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "contact1",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "customer1",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const MultiLevelSelectSelectedIds = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id="multi-level-select-selected_ids"
+          onSelect={(selectedNodes) =>
+          console.log("Selected Items with Return All Selected Data", selectedNodes)
+          }
+          returnAllSelected
+          selectedIds={["energy1","talent1"]}
+          treeData={treeData}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default MultiLevelSelectSelectedIds;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md

@@ -0,0 +1,5 @@
+`selected_ids` (Rails) / `selectedIds` (React) is an optional prop that accepts an array of ids that, if present, will mark the corresponding nodes on the treeData as checked on page load. 
+
+Items that include `checked:true` on the treeData itself will also be selected on page load, even without being passed to `selectedIds`.
+
+When an item is marked as checked on page load by any means, the dropdown will expand to show the checked items for easier accessibility. 

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

@@ -2,9 +2,11 @@ examples:
   rails:
   - multi_level_select_default: Default
   - multi_level_select_return_all_selected: Return All Selected
+  - multi_level_select_selected_ids: Selected Ids
   - multi_level_select_with_form: With Form
   
   react:
   - multi_level_select_default: Default
   - multi_level_select_return_all_selected: Return All Selected
+  - multi_level_select_selected_ids: Selected Ids
   

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

@@ -1,2 +1,3 @@
 export { default as MultiLevelSelectDefault } from './_multi_level_select_default.jsx'
-export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
+export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
+export { default as MultiLevelSelectSelectedIds } from "./_multi_level_select_selected_ids.jsx"

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb

@@ -9,6 +9,8 @@ module Playbook
                        default: []
       prop :return_all_selected, type: Playbook::Props::Boolean,
                                  default: false
+      prop :selected_ids, type: Playbook::Props::Array,
+                          default: []
       prop :input_display, type: Playbook::Props::Enum,
                            values: %w[pills none],
                            default: "pills"
@@ -24,6 +26,7 @@ module Playbook
           name: name,
           treeData: tree_data,
           returnAllSelected: return_all_selected,
+          selectedIds: selected_ids,
         }
       end
     end

data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss

@@ -45,6 +45,13 @@ $section_colors_dark: (
     }
   }
 
+  &[class*=_dashed] {
+    &::before, &::after {
+      border: 1px dashed $border_light;
+      background: none;
+    }
+  }
+
   // Dark =========================
 
   &.dark {