playbook_ui 12.18.0 → 12.19.0.pre.alpha.movemarkdown637

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

@@ -1,71 +0,0 @@
-<% 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

@@ -1,87 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,2 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,39 +0,0 @@
-<%= 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

@@ -1,52 +0,0 @@
-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

@@ -1,41 +0,0 @@
-<%= 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

@@ -1,54 +0,0 @@
-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

@@ -1,95 +0,0 @@
-<%= 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

@@ -1,108 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1 +0,0 @@
-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

@@ -1,50 +0,0 @@
-<%= 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",
-    }
-  ]
-}) %>