playbook_ui 12.20.0.pre.alpha.movemarkdown668 → 12.20.0.pre.alpha.title2665

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_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",
+    }
+  ]
+}) %>

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

@@ -0,0 +1,108 @@
+import React from 'react'
+import { Body, MultipleUsers } from '../../'
+
+const MultipleUsersSize = (props) => {
+  return (
+    <div>
+      <Body
+          color="light"
+          text="xs"
+      />
+      <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 />
+
+      <MultipleUsers
+          marginTop="xs"
+          size="xs"
+          users={[
+            {
+              name: 'Shawn Palmer',
+              imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg',
+            },
+            {
+              name: 'Andrew Murray Cooper Craig',
+              imageUrl: 'https://randomuser.me/api/portraits/men/75.jpg',
+            },
+          ]}
+          {...props}
+      />
+
+      <Body
+          color="light"
+          marginTop="xs"
+          text="xxs"
+      />
+      <MultipleUsers
+          size="xxs"
+          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 />
+
+      <MultipleUsers
+          marginTop="xs"
+          size="xxs"
+          users={[
+            {
+              name: 'Shawn Palmer',
+              imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg',
+            },
+            {
+              name: 'Andrew Murray Cooper Craig',
+              imageUrl: 'https://randomuser.me/api/portraits/men/75.jpg',
+            },
+          ]}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default MultipleUsersSize

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

@@ -0,0 +1 @@
+User avatar default size is `xs` or `28px`, but you can pass in `xxs` to change avatar size to `20px`.

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

@@ -0,0 +1,12 @@
+examples:
+
+  rails:
+  - multiple_users_default: Default
+  - multiple_users_reverse: Reverse
+  - multiple_users_size: Size
+
+
+  react:
+  - multiple_users_default: Default
+  - multiple_users_reverse: Reverse
+  - multiple_users_size: Size

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

@@ -0,0 +1,3 @@
+export { default as MultipleUsersDefault } from './_multiple_users_default.jsx'
+export { default as MultipleUsersReverse } from './_multiple_users_reverse.jsx'
+export { default as MultipleUsersSize } from './_multiple_users_size.jsx'

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

@@ -0,0 +1 @@
+Multiple users stacked is used in tight spaces, where we need to indicate that multiple users are associated to a specific action or item.

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default.html.erb

@@ -0,0 +1,50 @@
+<%= pb_rails("multiple_users_stacked", props: {
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    }
+  ]
+}) %>
+
+<br/><br/>
+
+<%= pb_rails("multiple_users_stacked", 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",
+    }
+  ]
+}) %>
+
+<br/><br/>
+
+<%= pb_rails("multiple_users_stacked", 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",
+    }
+  ]
+}) %>