playbook_ui 12.26.1 → 12.27.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7fbc9b56c02a9915257f3a1169f85773e8a063c14de44a2492a250f9015dee65
-  data.tar.gz: f70c024e4feae26b0767595ad538df87eb08e78453a56c6ca22de07552d60d5d
+  metadata.gz: c8a90666ee111265053efa8a6306dcf5312bd5db5b1f9ed04f9f308efc4b800c
+  data.tar.gz: 5ff43b2f9c0b59121483cb30cfd1fcd24ba8fa02c65381000fb86b8ef5097fa9
 SHA512:
-  metadata.gz: e40a155458785168e1fb5f5f63efe8c5bcd7dca3d1b8c618557d86453d5008336454d205330742fc029e6593e05e566610eb853577b42a993934eeb20408ffa5
-  data.tar.gz: 9acc8dcd73190cc433572b49bdef61cb4e425304125aaf8d5b61c7426f5f4c2a314f1e2b38e9b55a5f37b6f45b56cb8079ec9b82070c461699ae9b2357689a2d
+  metadata.gz: 23a90f57292ebf633ef4d2305b4ca7c038abd1bfa8a0a2e8729c5c279522c265b76ca3e8f616076d5483990467baeaec22999d70dec6cb015f9064a64cba7e6a
+  data.tar.gz: ca7a82f0e5d3c9de8df3cef5c4913f1dbbd8890b0b29ebfd563f6cb02d5125c664a0a221cb676eb56a68e1f4be7ce26bd1507c0bf7893530a916ccf8e720891d

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss

@@ -1,4 +1,6 @@
 // Manual Import -- Flatpickr Styles
+@import "./tokens/typography";
+
 .flatpickr-calendar {
   background: transparent;
   opacity: 0;
@@ -295,7 +297,7 @@
 .flatpickr-current-month {
   font-size: 135%;
   line-height: inherit;
-  font-weight: 300;
+  font-weight: $light;
   color: inherit;
   position: absolute;
   width: 75%;
@@ -310,7 +312,7 @@
 }
 .flatpickr-current-month span.cur-month {
   font-family: inherit;
-  font-weight: 700;
+  font-weight: $bolder;
   color: inherit;
   display: inline-block;
   margin-left: 0.5ch;
@@ -341,7 +343,7 @@
   display: inline-block;
   font-size: inherit;
   font-family: inherit;
-  font-weight: 300;
+  font-weight: $light;
   line-height: inherit;
   height: auto;
   border: 0;
@@ -371,7 +373,7 @@
   cursor: pointer;
   font-size: inherit;
   font-family: inherit;
-  font-weight: 300;
+  font-weight: $light;
   height: auto;
   line-height: inherit;
   margin: -1px 0 0 0;
@@ -492,7 +494,7 @@ span.flatpickr-weekday {
           box-sizing: border-box;
   color: #393939;
   cursor: pointer;
-  font-weight: 400;
+  font-weight: $regular;
   width: 14.2857143%;
   -webkit-flex-basis: 14.2857143%;
       -ms-flex-preferred-size: 14.2857143%;
@@ -707,11 +709,11 @@ span.flatpickr-weekday {
   appearance: textfield;
 }
 .flatpickr-time input.flatpickr-hour {
-  font-weight: bold;
+  font-weight: $bolder;
 }
 .flatpickr-time input.flatpickr-minute,
 .flatpickr-time input.flatpickr-second {
-  font-weight: 400;
+  font-weight: $regular;
 }
 .flatpickr-time input:focus {
   outline: 0;
@@ -723,7 +725,7 @@ span.flatpickr-weekday {
   float: left;
   line-height: inherit;
   color: #393939;
-  font-weight: bold;
+  font-weight: $bolder;
   width: 2%;
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -738,7 +740,7 @@ span.flatpickr-weekday {
   width: 18%;
   cursor: pointer;
   text-align: center;
-  font-weight: 400;
+  font-weight: $regular;
 }
 .flatpickr-time input:hover,
 .flatpickr-time .flatpickr-am-pm:hover,

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_month_and_year_styles.scss

@@ -20,7 +20,7 @@
   color: $text_lt_default;
   cursor: pointer;
   display: inline-block;
-  font-weight: 400;
+  font-weight: $regular;
   margin: 0.5px;
   justify-content: center;
   padding: 10px;

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_week_styles.scss

@@ -20,7 +20,7 @@
   color: $text_lt_default;
   cursor: pointer;
   display: inline-block;
-  font-weight: 400;
+  font-weight: $regular;
   margin: 0.5px;
   justify-content: center;
   padding: 10px;

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -56,7 +56,7 @@ $form_pill_colors: (
     height: -moz-fit-content;
     .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
       font-size: 16px;
-      font-weight: 400;
+      font-weight: $regular;
     }
     .pb_form_pill_text, .pb_form_pill_tag {
       line-height: 1.7;

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

@@ -1,12 +1,12 @@
-import React, { useState, useEffect, useRef } from "react";
-import classnames from "classnames";
-import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
-import { globalProps, GlobalProps } from "../utilities/globalProps";
-import Icon from "../pb_icon/_icon";
-import Checkbox from "../pb_checkbox/_checkbox";
-import FormPill from "../pb_form_pill/_form_pill";
-import CircleIconButton from "../pb_circle_icon_button/_circle_icon_button";
-import { cloneDeep } from "lodash";
+import React, { useState, useEffect, useRef } from "react"
+import classnames from "classnames"
+import { globalProps, GlobalProps } from "../utilities/globalProps"
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
+import Checkbox from "../pb_checkbox/_checkbox"
+import Icon from "../pb_icon/_icon"
+import FormPill from "../pb_form_pill/_form_pill"
+import CircleIconButton from "../pb_circle_icon_button/_circle_icon_button"
+import { cloneDeep } from "lodash"
 
 import {
   getAncestorsOfUnchecked,
@@ -15,17 +15,18 @@ import {
   getCheckedItems,
   getDefaultCheckedItems,
   recursiveCheckParent,
-} from "./_helper_functions";
+} from "./_helper_functions"
 
 type MultiLevelSelectProps = {
-  aria?: { [key: string]: string };
-  className?: string;
-  data?: { [key: string]: string };
-  id?: string;
-  returnAllSelected?: boolean;
-  treeData?: { [key: string]: string }[];
-  onSelect?: (prop: { [key: string]: any }) => void;
-} & GlobalProps;
+  aria?: { [key: string]: string }
+  className?: string
+  data?: { [key: string]: string }
+  id?: string
+  name?: string
+  returnAllSelected?: boolean
+  treeData?: { [key: string]: string }[]
+  onSelect?: (prop: { [key: string]: any }) => void
+} & GlobalProps
 
 const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   const {
@@ -33,71 +34,74 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     className,
     data = {},
     id,
+    name,
     returnAllSelected = false,
     treeData,
     onSelect = () => {},
-  } = props;
+  } = props
 
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
   const classes = classnames(
     buildCss("pb_multi_level_select"),
     globalProps(props),
     className
-  );
+  )
+
+  const dropdownRef = useRef(null)
 
-  const dropdownRef = useRef(null);
 
   //state for expanded property
-  const [expanded, setExpanded] = useState([]);
+  const [expanded, setExpanded] = useState([])
   //state for whether dropdown is open or closed
-  const [isClosed, setIsClosed] = useState(true);
+  const [isClosed, setIsClosed] = useState(true)
   //state from onchange for textinput, to use for filtering to create typeahead
-  const [filterItem, setFilterItem] = useState("");
+  const [filterItem, setFilterItem] = useState("")
   //this is essentially the return that the user will get when they use the kit
-  const [returnedArray, setReturnedArray] = useState([]);
+  const [returnedArray, setReturnedArray] = useState([])
   //formattedData with checked and parent_id added
-  const [formattedData, setFormattedData] = useState([]);
+  const [formattedData, setFormattedData] = useState([])
   //state for return for default
-  const [defaultReturn, setDefaultReturn] = useState([]);
+  const [defaultReturn, setDefaultReturn] = useState([])
+
 
   useEffect(() => {
-    setFormattedData(addCheckedAndParentProperty(treeData));
-  }, [treeData]);
+    setFormattedData(addCheckedAndParentProperty(treeData))
+  }, [treeData])
 
   useEffect(() => {
     if (returnAllSelected) {
-      setReturnedArray(getCheckedItems(formattedData));
+      setReturnedArray(getCheckedItems(formattedData))
     } else {
-      setDefaultReturn(getDefaultCheckedItems(formattedData));
+      setDefaultReturn(getDefaultCheckedItems(formattedData))
     }
-  }, [formattedData]);
+  }, [formattedData])
 
   useEffect(() => {
     // Function to handle clicks outside the dropdown
     const handleClickOutside = (event: any) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-        setIsClosed(true);
+        setIsClosed(true)
       }
-    };
+    }
     // Attach the event listener
-    window.addEventListener("click", handleClickOutside);
+    window.addEventListener("click", handleClickOutside)
     // Clean up the event listener on unmount
     return () => {
-      window.removeEventListener("click", handleClickOutside);
-    };
-  }, []);
+      window.removeEventListener("click", handleClickOutside)
+    }
+  }, [])
 
   const modifyRecursive = (tree: { [key: string]: any }[], check: boolean) => {
     if (!Array.isArray(tree)) {
-      return;
+      return
     }
     return tree.map((item: { [key: string]: any }) => {
-      item.checked = check;
-      item.children = modifyRecursive(item.children, check);
-      return item;
-    });
-  };
+      item.checked = check
+      item.children = modifyRecursive(item.children, check)
+      return item
+    })
+  }
 
   //iterate over tree, find item and set checked or unchecked
   const modifyValue = (
@@ -106,48 +110,48 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     check: boolean
   ) => {
     if (!Array.isArray(tree)) {
-      return;
+      return
     }
     return tree.map((item: any) => {
-      if (item.id != id) item.children = modifyValue(id, item.children, check);
+      if (item.id != id) item.children = modifyValue(id, item.children, check)
       else {
-        item.checked = check;
-        item.children = modifyRecursive(item.children, check);
+        item.checked = check
+        item.children = modifyRecursive(item.children, check)
       }
 
-      return item;
-    });
-  };
+      return item
+    })
+  }
 
   //clone tree, check items + children
   const checkItem = (item: { [key: string]: any }) => {
-    const tree = cloneDeep(formattedData);
+    const tree = cloneDeep(formattedData)
     if (returnAllSelected) {
-      return modifyValue(item.id, tree, true);
+      return modifyValue(item.id, tree, true)
     } else {
-      const checkedTree = modifyValue(item.id, tree, true);
-      return recursiveCheckParent(item, checkedTree);
+      const checkedTree = modifyValue(item.id, tree, true)
+      return recursiveCheckParent(item, checkedTree)
     }
-  };
+  }
 
   //clone tree, uncheck items + children
   const unCheckItem = (item: { [key: string]: any }) => {
-    const tree = cloneDeep(formattedData);
+    const tree = cloneDeep(formattedData)
     if (returnAllSelected) {
-      return modifyValue(item.id, tree, false);
+      return modifyValue(item.id, tree, false)
     } else {
-      const uncheckedTree = modifyValue(item.id, tree, false);
-      return getAncestorsOfUnchecked(uncheckedTree, item);
+      const uncheckedTree = modifyValue(item.id, tree, false)
+      return getAncestorsOfUnchecked(uncheckedTree, item)
     }
-  };
+  }
 
   //setformattedData with proper properties
   const changeItem = (item: { [key: string]: any }, check: boolean) => {
-    const tree = check ? checkItem(item) : unCheckItem(item);
-    setFormattedData(tree);
+    const tree = check ? checkItem(item) : unCheckItem(item)
+    setFormattedData(tree)
 
-    return tree;
-  };
+    return tree
+  }
 
   //function to map over data and add parent_id + depth property to each item
   const addCheckedAndParentProperty = (
@@ -156,87 +160,86 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     depth: number = 0
   ) => {
     if (!Array.isArray(treeData)) {
-      return;
+      return
     }
     return treeData.map((item: { [key: string]: any } | any) => {
       const newItem = {
         ...item,
         parent_id,
         depth,
-      };
+      }
       if (newItem.children && newItem.children.length > 0) {
         const children =
           item.checked && !returnAllSelected
             ? modifyRecursive(item.children, true)
-            : item.children;
+            : item.children
         newItem.children = addCheckedAndParentProperty(
           children,
           newItem.id,
           depth + 1
-        );
+        )
       }
-      return newItem;
-    });
-  };
+      return newItem
+    })
+  }
 
   //click event for x on form pill
   const handlePillClose = (event: any, clickedItem: { [key: string]: any }) => {
     // prevents the dropdown from closing when clicking on the pill
-    event.stopPropagation();
-    const updatedTree = changeItem(clickedItem, false);
+    event.stopPropagation()
+    const updatedTree = changeItem(clickedItem, false)
     //logic for removing items from returnArray or defaultReturn when pills clicked
     if (returnAllSelected) {
-      onSelect(getCheckedItems(updatedTree));
+      onSelect(getCheckedItems(updatedTree))
     } else {
-      onSelect(getDefaultCheckedItems(updatedTree));
+      onSelect(getDefaultCheckedItems(updatedTree))
     }
-  };
+  }
 
   //handle click on input wrapper(entire div with pills, typeahead, etc) so it doesn't close when input or form pill is clicked
   const handleInputWrapperClick = (e: any) => {
-    e.stopPropagation();
+    e.stopPropagation()
     if (
       e.target.id === "multiselect_input" ||
       e.target.classList.contains("pb_form_pill_tag")
     ) {
-      return;
+      return
     }
-    setIsClosed(!isClosed);
-  };
+    setIsClosed(!isClosed)
+  }
 
   //Main function to handle any click inside dropdown
   const handledropdownItemClick = (e: any, check: boolean) => {
-    const clickedItem = e.target.parentNode.id;
+    const clickedItem = e.target.parentNode.id
     //setting filterItem to "" will clear textinput and clear typeahead
-    setFilterItem("");
+    setFilterItem("")
 
-    const filtered = filterFormattedDataById(formattedData, clickedItem);
-    const updatedTree = changeItem(filtered[0], check);
-    console.log(updatedTree);
+    const filtered = filterFormattedDataById(formattedData, clickedItem)
+    const updatedTree = changeItem(filtered[0], check)
     if (returnAllSelected) {
-      onSelect(getCheckedItems(updatedTree));
+      onSelect(getCheckedItems(updatedTree))
     } else {
-      onSelect(getDefaultCheckedItems(updatedTree));
+      onSelect(getDefaultCheckedItems(updatedTree))
     }
-  };
+  }
 
-  const isExpanded = (item: any) => expanded.indexOf(item.id) > -1;
+  const isExpanded = (item: any) => expanded.indexOf(item.id) > -1
 
   //handle click on chevron toggles in dropdown
   const handleToggleClick = (id: string, event: React.MouseEvent) => {
-    event.stopPropagation();
-    const clickedItem = filterFormattedDataById(formattedData, id);
+    event.stopPropagation()
+    const clickedItem = filterFormattedDataById(formattedData, id)
     if (clickedItem) {
-      let expandedArray = [...expanded];
-      const itemExpanded = isExpanded(clickedItem[0]);
+      let expandedArray = [...expanded]
+      const itemExpanded = isExpanded(clickedItem[0])
 
       if (itemExpanded)
-        expandedArray = expandedArray.filter((i) => i != clickedItem[0].id);
-      else expandedArray.push(clickedItem[0].id);
+        expandedArray = expandedArray.filter((i) => i != clickedItem[0].id)
+      else expandedArray.push(clickedItem[0].id)
 
-      setExpanded(expandedArray);
+      setExpanded(expandedArray)
     }
-  };
+  }
 
   //rendering formattedData to UI based on typeahead
   const renderNestedOptions = (items: { [key: string]: any }[]) => {
@@ -245,9 +248,9 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
         {Array.isArray(items) &&
           items.map((item: { [key: string]: any }) => {
             return (
-              <>
-                <li key={item.id} className="dropdown_item" data-name={item.id}>
-                  <div className="dropdown_item_checkbox_row">
+              <div key={item.id}>
+                <li className='dropdown_item' data-name={item.id}>
+                  <div className='dropdown_item_checkbox_row'>
                     <div
                       key={isExpanded(item) ? "chevron-down" : "chevron-right"}
                     >
@@ -263,17 +266,17 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                         onClick={(event: any) =>
                           handleToggleClick(item.id, event)
                         }
-                        variant="link"
+                        variant='link'
                       />
                     </div>
                     <Checkbox text={item.label} id={item.id}>
                       <input
                         checked={item.checked}
-                        type="checkbox"
+                        type='checkbox'
                         name={item.label}
                         value={item.label}
                         onChange={(e) => {
-                          handledropdownItemClick(e, !item.checked);
+                          handledropdownItemClick(e, !item.checked)
                         }}
                       />
                     </Checkbox>
@@ -285,24 +288,30 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                       <div>{renderNestedOptions(item.children)}</div>
                     )}
                 </li>
-              </>
-            );
+              </div>
+            )
           })}
       </ul>
-    );
-  };
+    )
+  }
 
   return (
     <div {...ariaProps} {...dataProps} className={classes} id={id}>
-      <div ref={dropdownRef} className="wrapper">
-        <div className="input_wrapper" onClick={handleInputWrapperClick}>
-          <div className="input_inner_container">
+      <div ref={dropdownRef} className='wrapper'>
+        <div className='input_wrapper' onClick={handleInputWrapperClick}>
+          <div className='input_inner_container'>
+            {returnedArray.length !== 0 && returnAllSelected
+              ? returnedArray.map((item) => (
+                  <input type='hidden' name={`${name}[]`} value={item.id} />
+                ))
+              : null}
+
             {returnedArray.length !== 0 && returnAllSelected
               ? returnedArray.map((item, index) => (
                   <FormPill
                     key={index}
                     text={item.label}
-                    size="small"
+                    size='small'
                     onClick={(event: any) => handlePillClose(event, item)}
                   />
                 ))
@@ -313,29 +322,29 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                 <FormPill
                   key={index}
                   text={item.label}
-                  size="small"
+                  size='small'
                   onClick={(event: any) => handlePillClose(event, item)}
                 />
               ))}
             {returnedArray.length !== 0 && returnAllSelected && <br />}
             {defaultReturn.length !== 0 && !returnAllSelected && <br />}
             <input
-              id="multiselect_input"
+              id='multiselect_input'
               onChange={(e) => {
-                setFilterItem(e.target.value);
+                setFilterItem(e.target.value)
               }}
-              placeholder="Start typing..."
+              placeholder='Start typing...'
               value={filterItem}
               onClick={() => setIsClosed(false)}
             />
           </div>
           {isClosed ? (
-            <div key="chevron-down">
-              <Icon icon="chevron-down" />
+            <div key='chevron-down'>
+              <Icon icon='chevron-down' />
             </div>
           ) : (
-            <div key="chevron-up">
-              <Icon icon="chevron-up" />
+            <div key='chevron-up'>
+              <Icon icon='chevron-up' />
             </div>
           )}
         </div>
@@ -346,7 +355,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default MultiLevelSelect;
+export default MultiLevelSelect

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

@@ -1,72 +1,72 @@
 <% treeData = [{
     label: "Power Home Remodeling",
     value: "Power Home Remodeling",
-    id: "powerhome1",
+    id: "100",
     expanded: true,
     children: [
       {
         label: "People",
         value: "People",
-        id: "people1",
+        id: "101",
         children: [
           {
             label: "Talent Acquisition",
             value: "Talent Acquisition",
-            id: "talent1",
+            id: "102",
           },
           {
             label: "Business Affairs",
             value: "Business Affairs",
-            id: "business1",
+            id: "103",
             children: [
               {
                 label: "Initiatives",
                 value: "Initiatives",
-                id: "initiative1",
+                id: "104",
               },
               {
                 label: "Learning & Development",
                 value: "Learning & Development",
-                id: "development1",
+                id: "105",
               },
             ],
           },
           {
             label: "People Experience",
             value: "People Experience",
-            id: "experience1",
+            id: "106",
           },
         ],
       },
       {
         label: "Contact Center",
         value: "Contact Center",
-        id: "contact1",
+        id: "107",
         children: [
           {
             label: "Appointment Management",
             value: "Appointment Management",
-            id: "appointment1",
+            id: "108",
           },
           {
             label: "Customer Service",
             value: "Customer Service",
-            id: "customer1",
+            id: "109",
           },
           {
             label: "Energy",
             value: "Energy",
-            id: "energy1",
+            id: "110",
           },
         ],
       },
     ],
-  }] %>
+}] %>
 
 
-<%= pb_rails("multi_level_select", props: {
-    id: "default-multi-level-select",
-    tree_data:treeData
-    }) %>
-
 
+  <%= pb_rails("multi_level_select", props: {
+      id: "multi-level-select-default-rails",
+      name: "my_array",
+      tree_data: treeData
+  }) %>