playbook_ui 12.5.0 → 12.6.0.pre.alpha.cssphone1

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

@@ -0,0 +1,81 @@
+import React, { useState, useEffect } from "react";
+import classnames from "classnames";
+import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
+import { globalProps } from "../utilities/globalProps";
+import { findItemById, checkIt, unCheckIt } from "./helper_functions";
+import MultiSelectHelper from "./_multi_select_helper";
+
+type MultiLevelSelectProps = {
+  aria?: { [key: string]: string };
+  className?: string;
+  data?: { [key: string]: string };
+  id?: string;
+  treeData?: { [key: string]: string }[];
+  onChange?: any;
+  onSelect?: (SelectedNodes: { [key: string]: any }) => void;
+};
+
+const MultiLevelSelect = (props: MultiLevelSelectProps) => {
+  const { aria = {}, className, data = {}, id, treeData, onSelect } = props;
+
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const classes = classnames(
+    buildCss("pb_multi_level_select"),
+    globalProps(props),
+    className
+  );
+
+  const [formattedData, setFormattedData] = useState(treeData);
+  const [selectedItems, setSelectedItems] = useState([]);
+
+  const onChange = (currentNode: { [key: string]: any }) => {
+    const updatedData = formattedData.map((item: any) => {
+      if (item.id === currentNode._id) {
+        if (currentNode.checked) {
+          checkIt(item, selectedItems, setSelectedItems);
+        } else {
+          unCheckIt(item, selectedItems, setSelectedItems);
+        }
+      } else if (item.children) {
+        const foundItem = findItemById(item.children, currentNode._id);
+        if (foundItem) {
+          if (currentNode.checked) {
+            checkIt(foundItem, selectedItems, setSelectedItems);
+          } else {
+            unCheckIt(foundItem, selectedItems, setSelectedItems);
+          }
+        }
+      }
+
+      return item;
+    });
+
+    setFormattedData(updatedData);
+  };
+
+  useEffect(() => {
+    const selected = selectedItems.filter(
+      (item: { [key: string]: any }) => item.checked
+    );
+    //filter to remove duplicate items
+    const uniqueSelected = selected.filter(
+      (obj, index, self) => index === self.findIndex((t) => t.id === obj.id)
+    );
+    onSelect(uniqueSelected);
+  }, [selectedItems]);
+
+  return (
+    <div {...ariaProps} {...dataProps} className={classes} id={id}>
+      <MultiSelectHelper
+        treeData={formattedData}
+        id={id}
+        onChange={onChange}
+        onSelect={onSelect}
+        {...props}
+      />
+    </div>
+  );
+};
+
+export default MultiLevelSelect;

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

@@ -0,0 +1,30 @@
+import React from "react"
+import DropdownTreeSelect from "react-dropdown-tree-select"
+import "react-dropdown-tree-select/dist/styles.css"
+
+type HelperProps = {
+  id?: string
+  treeData?: { [key: string]: string }[]
+  onChange?: () => {}
+
+}
+
+const MultiSelectHelper = (props: HelperProps) => {
+  const { id, treeData, onChange } = props
+
+
+  return (
+      <DropdownTreeSelect
+        data={treeData}
+        id={id}
+        keepOpenOnSelect
+        keepTreeOnSearch
+        keepChildrenOnSearch
+        onChange={onChange}
+        texts={{ placeholder: "Select..." }}
+        mode='hierarchical'
+      />
+  )
+}
+
+export default MultiSelectHelper

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

@@ -0,0 +1,86 @@
+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 MultiLevelSelectDefault = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id="multiselect-default"
+          onSelect={(selectedNodes) =>
+          console.log("Selected Items", selectedNodes)
+          }
+          treeData={treeData}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default MultiLevelSelectDefault;

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

@@ -0,0 +1,3 @@
+The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user. `treeData` is a required prop that is expected to contain the data in the form of an array of objects. See code snippet for an example data array.
+
+The `onSelect` prop returns an array of all checked items, irrespective of whether it is a parent, child or grandchild. Open the console on this example and check and uncheck checkboxes to see this is action!

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

@@ -0,0 +1,6 @@
+examples:
+  
+  
+  react:
+  - multi_level_select_default: Default
+  

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

@@ -0,0 +1 @@
+export { default as MultiLevelSelectDefault } from './_multi_level_select_default.jsx'

data/app/pb_kits/playbook/pb_multi_level_select/helper_functions.ts

@@ -0,0 +1,60 @@
+export const findItemById = (
+  items: { [key: string]: any }[],
+  id: string
+): any => {
+  for (const item of items) {
+    if (item.id === id) {
+      return item;
+    }
+    if (item.children) {
+      const found = findItemById(item.children, id);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+};
+
+export const checkIt = (
+  foundItem: { [key: string]: any },
+  selectedItems: any[],
+  setSelectedItems: Function
+) => {
+  if (!foundItem) {
+    return;
+  }
+
+  foundItem.checked = true;
+  foundItem.expanded = true;
+  selectedItems.push(foundItem);
+
+  if (foundItem.children) {
+    foundItem.children.map((x: any) => {
+      checkIt(x, selectedItems, setSelectedItems);
+    });
+  }
+
+  setSelectedItems([...selectedItems]);
+};
+
+export const unCheckIt = (
+  foundItem: { [key: string]: any },
+  selectedItems: any,
+  setSelectedItems: any
+) => {
+  if (!foundItem) {
+    return;
+  }
+
+  foundItem.checked = false;
+  const newSelectedItems = selectedItems.filter(
+    (item: any) => item.id !== foundItem.id
+  );
+  if (foundItem.children) {
+    foundItem.children.map((x: any) => {
+      unCheckIt(x, selectedItems, setSelectedItems);
+    });
+  }
+  setSelectedItems([...newSelectedItems]);
+};

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+
+import { MultiLevelSelect } from '../'
+
+const treeData = {
+  label: 'search me',
+  value: 'searchme',
+  id:'default1',
+  children: [
+    {
+      label: 'search me too',
+      value: 'searchmetoo',
+      id:'default2',
+      children: [
+        {
+          label: 'No one can get me',
+          value: 'anonymous',
+          id:'default2',
+        },
+      ],
+    },
+  ],
+}
+
+const testId = "multiselect-test"
+test('should render custom class', () => {
+  render(
+      <MultiLevelSelect
+          className='custom-class'
+          data={{ testid: testId}}
+          onSelect={()=> console.log("hello")}
+          treeData={treeData}
+      /> 
+  ) 
+
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass('custom-class')
+})
+

data/app/pb_kits/playbook/pb_person_contact/{_person_contact.jsx → _person_contact.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 
@@ -17,14 +15,13 @@ type ContactItem = {
 }
 
 type PersonContactProps = {
-  aria?: object,
-  className?: string | array<string>,
-  dark?: boolean,
+  aria?: { [key: string]: string },
+  className?: string | string[],
   data?: object,
   firstName: string,
   id?: string,
   lastName: string,
-  contacts?: array<ContactItem>,
+  contacts?: ContactItem[],
 }
 
 const PersonContact = (props: PersonContactProps) => {
@@ -60,34 +57,34 @@ const PersonContact = (props: PersonContactProps) => {
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      className={classes}
+      id={id}
     >
       <Person
-          firstName={firstName}
-          lastName={lastName}
+        firstName={firstName}
+        lastName={lastName}
       />
       {validContacts().map((contactObject, index) => (
         <Contact
-            contactDetail={contactObject.contactDetail}
-            contactType={contactObject.contactType}
-            contactValue={contactObject.contactValue}
-            key={`valid-contact-${index}`}
+          contactDetail={contactObject.contactDetail}
+          contactType={contactObject.contactType}
+          contactValue={contactObject.contactValue}
+          key={`valid-contact-${index}`}
         />
       ))}
       {wrongContacts().map((contactObject, index) => (
         <div key={`wrong-contact-caption-wrapper-${index}`}>
           <Caption
-              className="wrong_numbers"
-              key={`wrong-contact-caption-${index}`}
-              text="wrong number"
+            className="wrong_numbers"
+            key={`wrong-contact-caption-${index}`}
+            text="wrong number"
           />
           <Contact
-              contactType={contactObject.contactType}
-              contactValue={contactObject.contactValue}
-              key={`wrong-contact-${index}`}
+            contactType={contactObject.contactType}
+            contactValue={contactObject.contactValue}
+            key={`wrong-contact-${index}`}
           />
         </div>
       ))}

data/app/pb_kits/playbook/pb_person_contact/person_contact.test.js

@@ -0,0 +1,112 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import PersonContact from './_person_contact'
+
+const testId = 'personContact'
+const multipleTestId = 'personContactMultiple'
+
+const PersonContactTest = (props) => {
+    return (
+        <>
+            <PersonContact
+                aria={{ label: testId }}
+                className={'custom-class'}
+                contacts={[
+                    {
+                        contactType: 'email',
+                        contactValue: 'email@example.com',
+                    },
+                    {
+                        contactValue: '5555555555',
+                        contactDetail: 'Home',
+                    },
+                    {
+                        contactType: 'work',
+                        contactValue: '3245627482',
+                        contactDetail: 'Work',
+                    },
+                ]}
+                data={{ testid: testId }}
+                firstName="Jose"
+                id={testId}
+                lastName="da Silva"
+                {...props}
+            />
+            <PersonContact
+                contacts={[
+                    {
+                        contactValue: '5555555555',
+                        contactType: 'wrong-phone',
+                    },
+                ]}
+                data={{ testid: multipleTestId }}
+                firstName="Brenda"
+                lastName="Walters"
+                {...props}
+            />
+        </>
+    )
+}
+
+test('should render custom class and data', () => {
+    render(<PersonContactTest />)
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('custom-class')
+})
+
+test('should render id', () => {
+    render(<PersonContactTest />)
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveProperty('id', testId)
+})
+
+test('should render aria-label', () => {
+    render(<PersonContactTest />)
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveAttribute('aria-label', testId)
+})
+
+test('should render firstName', () => {
+    render(<PersonContactTest />)
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveTextContent('Jose')
+})
+
+test('should render lastName', () => {
+    render(<PersonContactTest />)
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveTextContent('da Silva')
+})
+
+test('should render contact value', () => {
+    render(<PersonContactTest />)
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveTextContent('(555) 555-5555')
+})
+
+test('should render contact detail', () => {
+    render(<PersonContactTest />)
+
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveTextContent('Home')
+})
+
+test('should render multiple contacts', () => {
+    render(<PersonContactTest />)
+
+    const kit = screen.getByTestId(multipleTestId)
+    expect(kit).toHaveTextContent('Brenda Walters')
+})
+
+test('should render wrong number', () => {
+    render(<PersonContactTest />)
+
+    const kit = screen.getByTestId(multipleTestId)
+    expect(kit).toHaveTextContent('wrong number')
+})

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss

@@ -1,16 +1,46 @@
 @import "../tokens/colors";
 
+$transform-rotate-deg: 135deg;
+$input-max-width: 284px;
+$dropdown-min-width: 340px;
+$flag-min-resolution: 192dpi;
+
 .pb_phone_number_input {
   input::placeholder {
     color: $focus_input_light;
   }
 
+  .text_input {
+    max-width: $input-max-width;
+  }
+
+  .dropdown_open {
+    .text_input {
+      border-color: $primary !important;
+    }
+
+    .iti__selected-flag:focus-visible {
+      outline-style: none;
+    }
+  }
+
   .iti__country {
     padding: 5px 10px 5px 16px;
+    transition: $transition_default;
   }
 
   .iti__selected-flag {
-    padding: 0 6px 0 16px;
+    padding: 0 $space_xxs 0 $space_sm;
+
+    &[aria-expanded="true"] {
+      color: $primary_action;
+    }
+
+    &:focus-visible {
+      outline-style: solid;
+      border-radius: $space_xxs 0px 0px $space_xxs;
+      outline-color: $primary;
+    }
   }
 
   .iti__country.iti__highlight {
@@ -31,6 +61,11 @@
 
   .iti__flag {
     background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/img/flags.png");
+    border-radius: 1px;
+  }
+
+  .iti--separate-dial-code {
+    width: 100%;
   }
 
   .iti--separate-dial-code .iti__selected-flag {
@@ -52,49 +87,50 @@
 
   .iti__arrow::before {
     border-style: solid;
-    border-width: 0.1em 0.1em 0 0;
+    border-width: 1px 1px 0 0;
     content: '';
     display: inline-block;
-    height: 0.6em;
-    left: 0.1em;
+    height: $space_xxs + 1px;
+    left: 1px;
     position: relative;
     vertical-align: top;
-    width: 0.6em;
-    top: 10px;
-    transform: rotate(135deg);
-    font-size: 0.5em;
+    width: $space_xxs + 1px;
+    top: $space_xs + 2px;
+    transform: rotate($transform-rotate-deg);
     color: $slate;
   }
 
   .iti__arrow.iti__arrow--up::before {
-    transform: rotate(-45deg);
-    top: 12px;
+    transform: rotate(-($transform-rotate-deg/3));
+    top: $space_xs + 4px;
+    color: $primary_action;
   }
 
   .iti__active::after {
     float: right;
     content: "";
-    margin-top: 5px;
-    transform: rotate(45deg);
-    height: 12px;
-    width: 6px;
+    margin-top: $space_xxs + 1px;
+    transform: rotate($transform-rotate-deg/3);
+    height: $space_xs + 4px;
+    width: $space_xxs + 2px;
     border-bottom: 2px solid;
     border-right: 2px solid;
     border-radius: 1px;
   }
 
   .iti__country-list {
-    min-width: 340px;
+    min-width: $dropdown-min-width;
     border-radius: $border_radius_md;
     border: 1px solid $border_light;
     box-shadow: $shadow_deep;
+    margin-top: 1px;
   }
 
   .iti__divider {
     border-bottom: 1px solid $border_light;
   }
   
-  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
     .iti__flag {
       background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/img/flags@2x.png");
     }