playbook_ui 12.19.0.pre.alpha.movemarkdown639 → 12.20.0.pre.alpha.title2665

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,5 @@
+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.
+
+For the React version of the kit, 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!
+
+For the Rails version, the array of checked items is attached to the DOM in a data attribute titled `data-tree` on the wrapping div around the MultiLevelSelect.

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

@@ -0,0 +1,71 @@
+<% 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",
+          },
+        ],
+      },
+    ],
+  }] %>
+
+
+<%= pb_rails("multi_level_select", props: {
+    id: "parent-persistence-multi-level-select",
+    tree_data:treeData,
+    return_all_selected: true
+    }) %>

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

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

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

@@ -0,0 +1,3 @@
+The `returnAllSelected` or `return_all_selected` prop can be used when users want data on all checked nodes from the dropdown, irrespective of whether it is a parent or child node. 
+
+__NOTE__ :This variant also does not automatically uncheck the parent when any of the child nodes are unchecked. `returnAllSelected` is set to false by default. 

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

@@ -0,0 +1,9 @@
+examples:
+  rails:
+  - multi_level_select_default: Default
+  - multi_level_select_return_all_selected: Return All Selected
+  
+  react:
+  - multi_level_select_default: Default
+  - multi_level_select_return_all_selected: Return All Selected
+  

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

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

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

@@ -19,19 +19,20 @@ export const findItemById = (
 export const checkIt = (
   foundItem: { [key: string]: any },
   selectedItems: any[],
-  setSelectedItems: Function
+  setSelectedItems: Function,
+  expand: boolean
 ) => {
   if (!foundItem) {
     return;
   }
 
   foundItem.checked = true;
-  foundItem.expanded = true;
+  foundItem.expanded = expand;
   selectedItems.push(foundItem);
 
   if (foundItem.children) {
     foundItem.children.map((x: any) => {
-      checkIt(x, selectedItems, setSelectedItems);
+      checkIt(x, selectedItems, setSelectedItems, expand);
     });
   }
 
@@ -41,20 +42,46 @@ export const checkIt = (
 export const unCheckIt = (
   foundItem: { [key: string]: any },
   selectedItems: any,
-  setSelectedItems: any
+  setSelectedItems: any,
+  expand: boolean
 ) => {
   if (!foundItem) {
     return;
   }
 
   foundItem.checked = false;
+  foundItem.expanded = false;
   const newSelectedItems = selectedItems.filter(
     (item: any) => item.id !== foundItem.id
   );
   if (foundItem.children) {
     foundItem.children.map((x: any) => {
-      unCheckIt(x, selectedItems, setSelectedItems);
+      unCheckIt(x, selectedItems, setSelectedItems, expand);
     });
   }
   setSelectedItems([...newSelectedItems]);
 };
+
+
+export const getParentAndAncestorsIds = (itemId:string, items:{ [key: string]: string; }[], ancestors:string[] = []):any => {
+  for (let i = 0; i < items.length; i++) {
+    const item:any = items[i];
+    if (item.id === itemId) {
+      // item found in current level of items array
+      return [...ancestors, item.id];
+    }
+    if (item.children && item.children.length > 0) {
+      // recursively search through children
+      const foundAncestors = getParentAndAncestorsIds(
+        itemId,
+        item.children,
+        [...ancestors, item.id]
+      );
+      if (foundAncestors) {
+        return foundAncestors;
+      }
+    }
+  }
+  // item not found in this level of items array or its children
+  return null;
+}

data/app/pb_kits/playbook/pb_multiple_users/docs/_description.md

@@ -0,0 +1 @@
+The multiple users kit is used to show that more than one user is associated to an action or item.

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default.html.erb

@@ -0,0 +1,39 @@
+<%= pb_rails("multiple_users", props: {
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    },
+    {
+      name: "Lucille Sanchez",
+      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+    },
+    {
+      name: "Beverly Reyes",
+      image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+    },
+    {
+      name: "Keith Craig",
+      image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+    },
+    {
+      name: "Alicia Cooper",
+      image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+    }
+  ]
+}) %>
+
+<br/><br/>
+
+<%= pb_rails("multiple_users", props: {
+  users: [
+    {
+      name: "Shawn Palmer",
+      image_url: "https://randomuser.me/api/portraits/men/93.jpg",
+    },
+    {
+      name: "Andrew Murray",
+      image_url: "https://randomuser.me/api/portraits/men/75.jpg",
+    }
+  ]
+}) %>

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { MultipleUsers } from '../../'
+
+const MultipleUsersDefault = (props) => {
+  return (
+    <div>
+      <MultipleUsers
+          users={[
+        {
+          name: 'Patrick Welch',
+          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+        },
+        {
+          name: 'Lucille Sanchez',
+          imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+        },
+        {
+          name: 'Beverly Reyes',
+          imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
+        },
+        {
+          name: 'Keith Craig',
+          imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
+        },
+        {
+          name: 'Alicia Cooper',
+          imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
+        },
+      ]}
+          {...props}
+      />
+
+      <br />
+      <br />
+
+      <MultipleUsers
+          users={[
+        {
+          name: 'Shawn Palmer',
+          imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg',
+        },
+        {
+          name: 'Andrew Murray Cooper Craig',
+        },
+      ]}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default MultipleUsersDefault

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse.html.erb

@@ -0,0 +1,41 @@
+<%= pb_rails("multiple_users", props: {
+  reverse: true,
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    },
+    {
+      name: "Lucille Sanchez",
+      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+    },
+    {
+      name: "Beverly Reyes",
+      image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+    },
+    {
+      name: "Keith Craig",
+      image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+    },
+    {
+      name: "Alicia Cooper",
+      image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+    }
+  ]
+}) %>
+
+<br/><br/>
+
+<%= pb_rails("multiple_users", props: {
+  reverse: true,
+  users: [
+    {
+      name: "Shawn Palmer",
+      image_url: "https://randomuser.me/api/portraits/men/93.jpg",
+    },
+    {
+      name: "Andrew Murray",
+      image_url: "https://randomuser.me/api/portraits/men/75.jpg",
+    }
+  ]
+}) %>

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse.jsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { MultipleUsers } from '../../'
+
+const MultipleUsersReverse = (props) => {
+  return (
+    <div>
+      <MultipleUsers
+          reverse
+          users={[
+          {
+            name: 'Patrick Welch',
+            imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+          },
+          {
+            name: 'Lucille Sanchez',
+            imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+          },
+          {
+            name: 'Beverly Reyes',
+            imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
+          },
+          {
+            name: 'Keith Craig',
+            imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
+          },
+          {
+            name: 'Alicia Cooper',
+            imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
+          },
+        ]}
+          {...props}
+      />
+
+      <br />
+      <br />
+
+      <MultipleUsers
+          reverse
+          users={[
+          {
+            name: 'Shawn Palmer',
+            imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg',
+          },
+          {
+            name: 'Andrew Murray',
+          },
+        ]}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default MultipleUsersReverse

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.html.erb

@@ -0,0 +1,95 @@
+<%= pb_rails("body", props: {
+  text: "xs",
+  color: "light"
+}) %>
+<%= pb_rails("multiple_users", props: {
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    },
+    {
+      name: "Lucille Sanchez",
+      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+    },
+    {
+      name: "Beverly Reyes",
+      image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+    },
+    {
+      name: "Keith Craig",
+      image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+    },
+    {
+      name: "Alicia Cooper",
+      image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+    }
+  ]
+}) %>
+
+<br />
+
+<%= pb_rails("multiple_users", props: {
+  margin_top: "xs",
+  size: "xs",
+  users: [
+    {
+      name: "Shawn Palmer",
+      image_url: "https://randomuser.me/api/portraits/men/93.jpg",
+    },
+    {
+      name: "Andrew Murray",
+      image_url: "https://randomuser.me/api/portraits/men/75.jpg",
+    }
+  ]
+}) %>
+
+<br />
+
+<%= pb_rails("body", props: {
+  text: "xxs",
+  margin_top: "xs",
+  color: "light"
+}) %>
+<%= pb_rails("multiple_users", props: {
+  size: "xxs",
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    },
+    {
+      name: "Lucille Sanchez",
+      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+    },
+    {
+      name: "Beverly Reyes",
+      image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+    },
+    {
+      name: "Keith Craig",
+      image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+    },
+    {
+      name: "Alicia Cooper",
+      image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+    }
+  ]
+}) %>
+
+<br />
+
+<%= pb_rails("multiple_users", props: {
+  margin_top: "xs",
+  size: "xxs",
+  users: [
+    {
+      name: "Shawn Palmer",
+      image_url: "https://randomuser.me/api/portraits/men/93.jpg",
+    },
+    {
+      name: "Andrew Murray",
+      image_url: "https://randomuser.me/api/portraits/men/75.jpg",
+    }
+  ]
+}) %>