playbook_ui 12.30.1.pre.alpha.play846responsivespacingglobalpropsneedsdefault924 → 12.31.0

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 {

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

@@ -8,10 +8,12 @@ import Caption from '../pb_caption/_caption'
 
 type SectionSeparatorProps = {
   aria?: { [key: string]: string; },
+  children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   dark?: boolean,
   data?: { [key: string]: string; },
   id?: string,
+  lineStyle?: "solid" | "dashed",
   orientation?: "horizontal" | "vertical",
   text?: string,
   variant?: "card" | "background",
@@ -20,9 +22,11 @@ type SectionSeparatorProps = {
 const SectionSeparator = (props: SectionSeparatorProps) => {
   const {
     aria = {},
+    children,
     className,
     data = {},
     id,
+    lineStyle = 'solid',
     orientation = 'horizontal',
     text,
     dark = false,
@@ -30,21 +34,22 @@ const SectionSeparator = (props: SectionSeparatorProps) => {
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation), globalProps(props), className)
+  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, lineStyle === "dashed" ? lineStyle : ""), globalProps(props), className)
 
   return (
 
     <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
     >
       {
+        children && children ||
         text && (
           <span>
-          <Caption text={text} dark={dark}/>
-        </span>
+            <Caption text={text} dark={dark} />
+          </span>
         )
       }
     </div>

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.html.erb

@@ -0,0 +1,14 @@
+<%= pb_rails("section_separator", props: { line_style: "dashed" }) do %>
+    <%= pb_rails("card", props: {
+        border_radius: "rounded",
+        justify_content: "center",
+        padding: "none"
+    })  do %>
+        <%= pb_rails("caption", props: {
+            text: "TODAY",
+            size: "xs",
+            padding_left: "xs",
+            padding_right: "xs" 
+        }) %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { SectionSeparator, Card, Caption } from '../../'
+
+const children = (
+    <Card
+        borderRadius="rounded"
+        justifyContent="center"
+        padding="none"
+    >
+        <Caption
+            paddingLeft="xs"
+            paddingRight="xs"
+            size="xs"
+            text="TODAY"
+        />
+    </Card>
+)
+
+const SectionSeparatorChildren = (props) => {
+    return (
+        <SectionSeparator
+            {...props}
+            lineStyle='dashed'
+        >
+            {children}
+        </SectionSeparator>
+    )
+}
+
+export default SectionSeparatorChildren

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.md

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

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("section_separator", props: { line_style: "dashed" }) %>

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { SectionSeparator } from '../../'
+
+const SectionSeparatorDashed = (props) => {
+    return (
+        <SectionSeparator
+            {...props}
+            lineStyle='dashed'
+        />
+    )
+}
+
+export default SectionSeparatorDashed

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.html.erb

@@ -1 +1 @@
-<%= pb_rails("section_separator", props: { text: "Title Separator" }) %>
+<%= pb_rails("section_separator", props: { text: "Text Separator" }) %>

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx

@@ -5,7 +5,7 @@ const SectionSeparatorText = (props) => {
   return (
     <SectionSeparator
         {...props}
-        text="Title Separator"
+        text="Text Separator"
     />
   )
 }

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

@@ -1,12 +1,15 @@
 examples:
 
   rails:
-  - section_separator_text: Text Separator
   - section_separator_line: Line Separator
+  - section_separator_dashed: Dashed Separator
+  - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
-
+  - section_separator_children: Children
 
   react:
-  - section_separator_text: Text Separator
   - section_separator_line: Line Separator
+  - section_separator_dashed: Dashed Separator
+  - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
+  - section_separator_children: Children

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

@@ -1,3 +1,5 @@
 export { default as SectionSeparatorLine } from './_section_separator_line.jsx'
 export { default as SectionSeparatorText } from './_section_separator_text.jsx'
 export { default as SectionSeparatorVertical } from './_section_separator_vertical.jsx'
+export { default as SectionSeparatorDashed } from './_section_separator_dashed.jsx'
+export { default as SectionSeparatorChildren } from './_section_separator_children.jsx'

data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb

@@ -4,9 +4,11 @@
     data: object.data,
     class: object.classname) do %>
     <% if object.orientation === 'horizontal' %>
-        <% if object.text %>
+        <% if content %>
+            <%= content %>
+        <% elsif object.text %>
             <span><%= pb_rails("caption", props: { text: object.text }) %></span>
-        <%end%>
+        <% end %>
     <% end %>
     <% if object.orientation === 'vertical' %>
         <%= pb_rails("flex", props: { orientation: "column"}) do %>