playbook_ui 12.30.1 → 12.31.0.pre.alpha.PLAY814removemomentjs935

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 %>

data/app/pb_kits/playbook/pb_section_separator/section_separator.rb

@@ -12,9 +12,12 @@ module Playbook
                          default: "horizontal"
       prop :dark, type: Playbook::Props::Boolean,
                   default: false
+      prop :line_style, type: Playbook::Props::Enum,
+                        values: %w[dashed solid],
+                        default: "solid"
 
       def classname
-        generate_classname("pb_section_separator_kit", variant, orientation)
+        generate_classname("pb_section_separator_kit", variant, orientation, line_style == "dashed" ? "dashed" : nil)
       end
 
     private

data/app/pb_kits/playbook/pb_time/_time.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import classnames from "classnames";
 
-import DateTime from "../pb_kit/dateTime";
 import { buildCss } from "../utilities/props";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
+import DateTime from '../pb_kit/dateTime';
 
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
@@ -13,7 +13,7 @@ type TimeProps = {
   align?: "left" | "center" | "right";
   className?: string | string[];
   data?: string;
-  date: string;
+  date: Date;
   dark?: boolean;
   id?: string;
   showIcon?: boolean;
@@ -41,8 +41,6 @@ const Time = (props: TimeProps) => {
     className
   );
 
-  const dateTimestamp = new DateTime({ value: date, zone: timeZone });
-
   return (
     <div className={classes}>
       {showIcon && (
@@ -70,18 +68,18 @@ const Time = (props: TimeProps) => {
             )
       )}
 
-      <time dateTime={date}>
+      <time dateTime={date.toString()}>
         <span>
           {unstyled
             ? (
                 <>
                   <span>
-                    {dateTimestamp.toTimeWithMeridian()}
+                    {DateTime.toTimeWithMeridiem(date, timeZone)}
                   </span>
                   {" "}
                   {showTimezone && (
                     <span>
-                      {dateTimestamp.toTimezone()}
+                      {DateTime.toTimeZone(date, timeZone)}
                     </span>
                   )}
                 </>
@@ -92,13 +90,13 @@ const Time = (props: TimeProps) => {
                     <Body
                         className="pb_time"
                         tag="span"
-                        text={dateTimestamp.toTimeWithMeridian()}
+                        text={DateTime.toTimeWithMeridiem(date, timeZone)}
                     />{" "}
                     {showTimezone && (
                       <Body
                           color="light"
                           tag="span"
-                          text={dateTimestamp.toTimezone()}
+                          text={DateTime.toTimeZone(date, timeZone)}
                       />
                     )}
                   </>
@@ -108,13 +106,13 @@ const Time = (props: TimeProps) => {
                     <Caption
                         color="light"
                         tag="span"
-                        text={dateTimestamp.toTimeWithMeridian()}
+                        text={DateTime.toTimeWithMeridiem(date, timeZone)}
                     />{" "}
                     {showTimezone && (
                       <Caption
                           color="light"
                           tag="span"
-                          text={dateTimestamp.toTimezone()}
+                          text={DateTime.toTimeZone(date, timeZone)}
                       />
                     )}
                   </>