RubyGems - playbook_ui - Versions diffs - 12.30.1.pre.alpha.play846responsivespacingglobalpropsneedsdefault924 → 12.31.0.pre.alpha.PLAY814removemomentjs933 - Mend

playbook_ui 12.30.1.pre.alpha.play846responsivespacingglobalpropsneedsdefault924 → 12.31.0.pre.alpha.PLAY814removemomentjs933

Files changed (88) hide show

data/app/pb_kits/playbook/pb_label_value/_label_value.tsx CHANGED Viewed

@@ -1,8 +1,8 @@
 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";
@@ -26,9 +26,9 @@ type LabelValueProps = {
   title?: string;
 };
-const dateString = (value: DateTime) => {
-  const month = value.toMonthNum();
-  const day = value.toDay();
+const dateString = (value: Date) => {
+  const month = DateTime.toMonthNum(value);
+  const day = DateTime.toDay(value);
   return ` · ${month}/${day}`;
 };
@@ -52,7 +52,6 @@ const LabelValue = (props: LabelValueProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-  const formattedDate = new DateTime({ value: date });
   const variantClass = variant === "details" ? "details" : "";
   const classes = classnames(
     buildCss("pb_label_value_kit", variantClass),
@@ -62,59 +61,81 @@ const LabelValue = (props: LabelValueProps) => {
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      className={classes}
-      id={id}
-      title={title}
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+        title={title}
     >
-      <Caption dark={dark} text={label} />
+      <Caption dark={dark}
+          text={label}
+      />
       {variant === "details" ? (
-        <Flex inline vertical="center">
+        <Flex inline
+            vertical="center"
+        >
           {icon && (
-            <Body color="light" dark={dark} marginRight="xs">
-              <Icon dark={dark} fixedWidth icon={icon} />
+            <Body color="light"
+                dark={dark}
+                marginRight="xs"
+            >
+              <Icon dark={dark}
+                  fixedWidth
+                  icon={icon}
+              />
             </Body>
           )}
           {description && (
             <Body
-              color="light"
-              dark={dark}
-              marginRight="xs"
-              text={description}
+                color="light"
+                dark={dark}
+                marginRight="xs"
+                text={description}
             />
           )}
           {active === true ? (
-            <Flex inline vertical="center">
+            <Flex inline
+                vertical="center"
+            >
               {title && (
-                <Title dark={dark} size={4} text={title} variant="link" />
+                <Title dark={dark}
+                    size={4}
+                    text={title}
+                    variant="link"
+                />
               )}
               {date && (
                 <Title
-                  dark={dark}
-                  marginLeft="xs"
-                  size={4}
-                  text={" " + dateString(formattedDate)}
-                  variant="link"
+                    dark={dark}
+                    marginLeft="xs"
+                    size={4}
+                    text={" " + dateString(date)}
+                    variant="link"
                 />
               )}
             </Flex>
           ) : (
             <>
-              {title && <Title dark={dark} size={4} text={title} />}
+              {title && <Title dark={dark}
+                  size={4}
+                  text={title}
+                        />
+              }
               {date && (
                 <Title
-                  dark={dark}
-                  marginLeft="xs"
-                  size={4}
-                  text={" " + dateString(formattedDate)}
+                    dark={dark}
+                    marginLeft="xs"
+                    size={4}
+                    text={" " + dateString(date)}
                 />
               )}
             </>
           )}
         </Flex>
       ) : (
-        <Body dark={dark} text={value} />
+        <Body dark={dark}
+            text={value}
+        />
       )}
     </div>
   );

data/app/pb_kits/playbook/pb_message/_message.tsx CHANGED Viewed

@@ -23,8 +23,8 @@ type MessageProps = {
   id?: string,
   label?: string,
   message: string,
-  timestamp?: string,
-  timestampObject?: string,
+  timestamp?: Date,
+  timestampObject?: Date,
   timezone?: string,
   alignTimestamp?: string,
 }
@@ -61,50 +61,50 @@ const Message = (props: MessageProps) => {
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      className={classes}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
     >
       {shouldDisplayAvatar &&
         <Avatar
-          imageUrl={avatarUrl}
-          name={avatarName}
-          size="xs"
-          status={avatarStatus}
+            imageUrl={avatarUrl}
+            name={avatarName}
+            size="xs"
+            status={avatarStatus}
         />
       }
       <div className="content_wrapper">
         <Flex
-          justify={alignTimestamp === 'left' ? 'none' : 'between'}
-          orientation="row"
+            justify={alignTimestamp === 'left' ? 'none' : 'between'}
+            orientation="row"
         >
           {label &&
             <Title
-              className="message_title"
-              size={4}
-              text={label}
+                className="message_title"
+                size={4}
+                text={label}
             />
           }
           <Timestamp
-            className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
-            text={timestamp}
-            timestamp={''}
-            timezone={timezone}
+              className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
+              text={timestamp.toString()}
+              timestamp={null}
+              timezone={timezone}
           />
           {timestampObject &&
             <Timestamp
-              className={`pull-${alignTimestamp} message_timestamp`}
-              text={''}
-              timestamp={timestampObject}
-              timezone={timezone}
+                className={`pull-${alignTimestamp} message_timestamp`}
+                text={''}
+                timestamp={timestampObject}
+                timezone={timezone}
             />
           }
         </Flex>
         {message &&
           <Body
-            className="pb_message_body"
-            text={message}
+              className="pb_message_body"
+              text={message}
           />
         }
         {children}

data/app/pb_kits/playbook/pb_message/docs/_message_default.jsx CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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"