playbook_ui 12.5.0 → 12.6.0.pre.alpha.collapsible1

data/app/pb_kits/playbook/pb_filter/Filter/{ResultsCount.jsx → ResultsCount.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 
 import Caption from '../../pb_caption/_caption'
@@ -9,31 +7,58 @@ const resultsText = (results: number): string => results == 1 ? 'Result' : 'Resu
 
 type ResultsCountProps = {
   dark?: boolean,
-  results?: ?number,
+  results?: number | null,
   title?: boolean,
 }
-const ResultsCount = ({ dark, results, title }: ResultsCountProps) => (
-  <Choose>
-    <When condition={results && title}>
+const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactElement => {
+  
+  const resultTitle = () => {
+    return (
       <TitleCount
           align="center"
           count={results}
           dark={dark}
           title={`${resultsText(results)}:`}
       />
-    </When>
-    <When condition={results}>
+    )
+  }
+
+  const justResults = () => {
+    return (
       <Caption
           className="filter-results"
           dark={dark}
           size="xs"
           text={`${results} ${resultsText(results)}`}
       />
-    </When>
-    <Otherwise>
-      <div />
-    </Otherwise>
-  </Choose>
-)
+    )
+  }
+
+  const displayResultsCount = () => {
+    if (results && title) {
+      return (
+        <>
+          {resultTitle()}
+        </>
+      )
+    } else if (results) {
+      return (
+        <>
+          {justResults()}
+        </>
+      )
+    } else {
+      return (
+        <div />
+      )
+    }
+  }
+  
+  return (
+    <>
+      {displayResultsCount()}
+    </>
+  )
+}
 
 export default ResultsCount

data/app/pb_kits/playbook/pb_filter/Filter/{SortMenu.jsx → SortMenu.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React, { useState } from 'react'
 import { find, map, partial } from 'lodash'
 
@@ -12,9 +10,9 @@ import PbReactPopover from '../../pb_popover/_popover'
 export type Direction = 'asc' | 'desc'
 export type SortOptions = { [name: string]: string }
 export type SortValue = { name: string, dir: Direction }
-export type SortingChangeCallback = (SortValue[]) => void
+export type SortingChangeCallback = (value: SortValue[]) => void
 
-const nextValue = (value: SortValue[], name: string): Direction => {
+const nextValue = (value: SortValue[], name: string): SortValue => {
   const current = find(value, { name })
   return {
     name,
@@ -26,12 +24,13 @@ const directionIcon = (dir: Direction) => (
   dir == 'asc' ? 'sort-amount-up' : 'sort-amount-down'
 )
 
-const renderOptions = (options: SortOptions, value: SortValue[], handleChange: (SortValue) => void) => (
+const renderOptions = (options: SortOptions, value: SortValue[], handleChange: (arg0: SortValue) => void) => (
   map(options, (label, name) => {
     const next = nextValue(value, name)
     return (
       <ListItem key={`option-${next.name}-${next.dir}`}>
         <Button
+            htmlType={undefined}
             onClick={partial(handleChange, next)}
             text={` ${label}`}
             variant="link"
@@ -47,7 +46,7 @@ export type SortMenuProps = {
   options: SortOptions,
   value?: SortValue[],
 }
-const SortMenu = ({ dark, options, value, onChange }: SortMenuProps) => {
+const SortMenu = ({ dark, options, value, onChange }: SortMenuProps): React.ReactElement => {
   const [hide, updateHide] = useState(true)
   const toggle = () => updateHide(!hide)
   const handleChange = (value: SortValue) => {
@@ -58,6 +57,7 @@ const SortMenu = ({ dark, options, value, onChange }: SortMenuProps) => {
   const sortButton = (
     <Button
         dark={dark}
+        htmlType={undefined}
         id="sort-button"
         onClick={toggle}
         paddingRight="none"

data/app/pb_kits/playbook/pb_filter/Filter/{index.jsx → index.tsx}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import FilterSingle, { FilterSingleProps } from './FilterSingle'
 import FilterDouble, { FilterDoubleProps } from './FilterDouble'
@@ -10,16 +8,25 @@ type FilterProps =
       double?: boolean,
     })
 
-const Filter = ({ double = false, ...templateProps }: FilterProps) => {
-  return (
-    <Choose>
-      <When condition={double}>
+const Filter = ({ 
+  double = false,
+  ...templateProps
+  }: FilterProps): React.ReactElement => {
+  const displayFilter = () => {
+    if (double === true) {
+      return (
         <FilterDouble {...templateProps} />
-      </When>
-      <Otherwise>
+      )
+    } else {
+      return (
         <FilterSingle {...templateProps} />
-      </Otherwise>
-    </Choose>
+      )
+    }
+  }
+  return (
+    <>
+      {displayFilter()}
+    </>
   )
 }
 

data/app/pb_kits/playbook/pb_filter/{_filter.jsx → _filter.tsx}

@@ -1,3 +1 @@
-/* @flow */
-
 export { default } from './Filter'

data/app/pb_kits/playbook/pb_list/_list.tsx

@@ -11,14 +11,14 @@ type ListProps = {
   dark?: boolean;
   data?: object;
   id?: string;
-  layout: "" | "left" | "right";
+  layout?: "" | "left" | "right";
   ordered?: boolean;
   role?: string;
   tabIndex?: number;
   text?: string;
   size?: string;
   variant?: string;
-  xpadding: boolean;
+  xpadding?: boolean;
 };
 
 const List = (props: ListProps) => {

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

@@ -0,0 +1,86 @@
+@import "../pb_textarea/textarea_mixin";
+@import "../tokens/colors";
+@import "../tokens/border_radius";
+@import "../tokens/shadows";
+@import "../tokens/spacing";
+
+.pb_multi_level_select {
+  .dropdown {
+    width: 100%;
+    .search {
+      border-bottom: none;
+    }
+
+    .toggle.expanded:after {
+      border-style: solid;
+      border-width: 0.1em 0.1em 0 0;
+      content: "";
+      display: inline-block;
+      height: 0.6em;
+      left: 0.1em;
+      position: relative;
+      vertical-align: top;
+      width: 0.6em;
+      top: 10px;
+      transform: rotate(135deg);
+      font-size: 0.5em;
+    }
+    .toggle.collapsed:after {
+      border-style: solid;
+      border-width: 0.1em 0.1em 0 0;
+      content: "";
+      display: inline-block;
+      height: 0.6em;
+      left: 0.1em;
+      position: relative;
+      vertical-align: top;
+      width: 0.6em;
+      top: 10px;
+      transform: rotate(135deg);
+      font-size: 0.5em;
+
+      transform: rotate(-45deg);
+      top: 12px;
+    }
+
+    .tag {
+      height: 37px;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      padding: 0 $space_xxs 0 $space_xs;
+      border-radius: 18px;
+      background-color: rgba($primary, 0.1);
+      color: $primary;
+      border: none;
+      font-size: 16px;
+      font-weight: 700;
+
+      .tag-remove {
+        color: $primary;
+        padding-left: $space_xs;
+        padding-right: $space_xxs;
+      }
+    }
+  }
+  .react-dropdown-tree-select .dropdown .dropdown-trigger {
+    width: 100%;
+    @include pb_textarea_light;
+  }
+  .react-dropdown-tree-select .dropdown .dropdown-trigger.arrow.bottom:after {
+    content: none;
+  }
+  .react-dropdown-tree-select .dropdown .dropdown-trigger.arrow.top:after {
+    content: none;
+  }
+
+  .react-dropdown-tree-select .dropdown .dropdown-content {
+    width: 100%;
+    border: 1px solid $border_light;
+    border-radius: $border_rad_heavier;
+    box-shadow: $shadow_deeper;
+  }
+  .node.leaf.collapsed {
+    display: block !important;
+  }
+}

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>
       ))}