playbook_ui 14.15.0.pre.alpha.PBNTR8996733 → 14.15.0.pre.alpha.PLAY1756pbcontenttagpt76661

data/app/pb_kits/playbook/pb_empty_state/docs/default_image/utils.tsx

@@ -1,118 +0,0 @@
-import React from "react";
-
-const computer = (
-  <svg
-      fill="none"
-      height={251}
-      width={341}
-      xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-        d="M13.131 233.77c8.809-2.023 18.518-1.86 26.426-6.068 17.42-9.269 21.361-45.131 10.744-58.369-15.926-19.858-33.825-2.383-25.724 10.342 2.817 4.425 9.208 7.26 14.112 8.505 40.222 10.212 62.266-21.411 91.212-43.379 8.325-6.318 16.972-12.289 25.976-17.712 7.597-4.575 15.571-8.608 23.725-12.22 8.436-3.738 16.866-7.895 25.954-9.791 19.121-3.989 30.617-6.438 50.156-7.193 6.868-.265 21.421 2.154 27.93 4.179a73.8 73.8 0 0 1 13.162 5.561c4.289 2.319 8.378 5.018 12.09 8.093 3.993 3.307 7.64 7.011 10.912 10.96 2.894 3.491 5.521 7.237 7.503 11.258 2.173 4.41 3.901 9.072 4.873 13.855.896 4.408-.929 18.105-2.018 22.49-2.446 9.854-26.142 9.975-33.36 5.394-17.25-10.948 2.072-41.177 8.585-49.299 15.495-19.328 29.66-28.821 24.775-54.869-.21-1.121-5.837-23.386-11.566-27.894-5.729-4.509-16.046-17.098-28.713-17.486"
-        stroke="#DFE3E8"
-        strokeDasharray="5 9"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={3}
-    />
-    <path d="M12.034 231.969h240.667v16.979H12.034z"
-        fill="#fff"
-    />
-    <path
-        clipRule="evenodd"
-        d="M24.04 232c1.59 9.986 50.66 18 110.96 18s109.37-8.014 110.96-18H24.04Z"
-        fill="#EFEFEF"
-        fillRule="evenodd"
-        opacity={0.398}
-    />
-    <path d="M12.028 233.803h240.726v-3.26H12.028v3.26Z"
-        fill="#DFE3E8"
-    />
-    <path
-        clipRule="evenodd"
-        d="M111.452 145.308h124.137c3 0 5.432 2.432 5.432 5.433v83.244a5.432 5.432 0 0 1-5.432 5.433H111.452c-3 0-5.432-2.432-5.432-5.433v-83.244a5.432 5.432 0 0 1 5.432-5.433Z"
-        fill="#E6EBEF"
-        fillRule="evenodd"
-    />
-    <mask
-        height={95}
-        id="a"
-        maskUnits="userSpaceOnUse"
-        style={{
-        maskType: "luminance",
-      }}
-        width={136}
-        x={106}
-        y={145}
-    >
-      <path
-          clipRule="evenodd"
-          d="M111.452 145.308h124.137c3 0 5.432 2.432 5.432 5.433v83.244a5.432 5.432 0 0 1-5.432 5.433H111.452c-3 0-5.432-2.432-5.432-5.433v-83.244a5.432 5.432 0 0 1 5.432-5.433Z"
-          fill="#fff"
-          fillRule="evenodd"
-      />
-    </mask>
-    <g mask="url(#a)">
-      <path
-          clipRule="evenodd"
-          d="m233.81 130.202-98.487 126.253H90.747l-9.791-155.738 152.854 29.485Z"
-          fill="#EFF3F6"
-          fillRule="evenodd"
-      />
-    </g>
-    <path
-        clipRule="evenodd"
-        d="m190.054 195.575-15.874 11.326v4.703a.423.423 0 0 1-.669.348l-15.206-10.848-.018-.013a.596.596 0 0 1-.249-.486v-11.039c0-.193.093-.375.25-.486l.017-.013 15.875-11.326v-4.703c0-.347.387-.549.668-.348l15.206 10.848.018.013c.157.111.25.293.25.485V195.076a.596.596 0 0 1-.251.486l-.017.013Z"
-        fill="#F9F9F9"
-        fillRule="evenodd"
-    />
-    <path
-        d="m174.18 206.901-.872-1.222a1.503 1.503 0 0 0-.628 1.222h1.5Zm15.874-11.326.871 1.221.02-.014-.891-1.207Zm-16.543 16.377.872-1.22-.001-.001-.871 1.221Zm-15.206-10.848-.88 1.215.009.006.871-1.221Zm-.018-.013.88-1.215-.008-.006-.872 1.221Zm.001-12.011.87 1.222.021-.016-.891-1.206Zm.017-.013-.871-1.221-.02.014.891 1.207Zm15.875-11.326.871 1.221a1.5 1.5 0 0 0 .629-1.221h-1.5Zm.668-5.051-.872 1.22.001.001.871-1.221Zm15.206 10.848.88-1.215-.009-.006-.871 1.221Zm.018.013-.88 1.215.011.008.869-1.223Zm-.001 12.011-.87-1.222-.02.015.89 1.207Zm-15.02 12.56 15.874-11.326-1.742-2.442-15.875 11.325 1.743 2.443Zm.629 3.482v-4.703h-3v4.703h3Zm-3.041 1.569c1.29.921 3.041-.023 3.041-1.569h-3c0-.853.974-1.393 1.703-.872l-1.744 2.441Zm-15.205-10.848 15.206 10.848 1.742-2.442-15.206-10.848-1.742 2.442Zm-.027-.02.018.014 1.76-2.43-.018-.013-1.76 2.429Zm-.869-1.7c0 .676.325 1.312.877 1.707l1.744-2.442a.905.905 0 0 1 .379.735h-3Zm0-.005v.005h3v-.005h-3Zm0-11.03v11.03h3v-11.03h-3Zm0-.004v.004h3v-.004h-3Zm.88-1.709a2.098 2.098 0 0 0-.88 1.709h3c0 .29-.14.565-.38.736l-1.74-2.445Zm-.004.003-.017.013 1.782 2.413.017-.012-1.782-2.414Zm15.894-11.34-15.874 11.326 1.742 2.442 15.875-11.326-1.743-2.442Zm-.628-3.482v4.703h3v-4.703h-3Zm3.04-1.569c-1.29-.921-3.04.023-3.04 1.569h3c0 .853-.975 1.393-1.704.872l1.744-2.441Zm15.205 10.848-15.206-10.848-1.742 2.442 15.206 10.848 1.742-2.442Zm.028.02-.019-.014-1.76 2.43.018.013 1.761-2.429Zm.869 1.699c0-.673-.324-1.312-.881-1.708l-1.738 2.446a.906.906 0 0 1-.381-.738h3Zm0 .006v-.006h-3v.006h3Zm0 11.029v-11.029h-3v11.029h3Zm0 .005v-.005h-3v.005h3Zm-.881 1.709a2.1 2.1 0 0 0 .881-1.709h-3c0-.29.139-.565.379-.736l1.74 2.445Zm.004-.003.017-.013-1.781-2.414-.017.013 1.781 2.414Z"
-        fill="#DFE3E8"
-    />
-    <path
-        clipRule="evenodd"
-        d="M236.947 145.308H111.452c-3 0-5.432 2.432-5.432 5.433v83.244a5.432 5.432 0 0 0 5.432 5.433h125.495c3 0 5.433-2.432 5.433-5.433v-83.244a5.433 5.433 0 0 0-5.433-5.433Zm-127.668 5.433c0-1.2.973-2.173 2.173-2.173h125.495c1.2 0 2.173.973 2.173 2.173v83.244c0 1.2-.973 2.173-2.173 2.173H111.452c-1.2 0-2.173-.973-2.173-2.173v-83.244Z"
-        fill="#DFE3E8"
-        fillRule="evenodd"
-    />
-    <circle
-        cx={272.814}
-        cy={31.086}
-        r={6.5}
-        stroke="#DFE3E8"
-        strokeWidth={3}
-        transform="rotate(-58 272.814 31.086)"
-    />
-    <path
-        d="m269.32 17.808 1.156-1.85c.435-.697 1.284-.86 1.869-.494l15.564 9.725c.584.366.811 1.2.376 1.897l-1.156 1.85c-.435.696-1.285.859-1.87.494l-15.564-9.726c-.584-.365-.81-1.2-.375-1.896Z"
-        stroke="#DFE3E8"
-        strokeWidth={3}
-    />
-    <path
-        d="m271.277 14.944-.852-6.723"
-        stroke="#DFE3E8"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={4}
-    />
-    <path
-        clipRule="evenodd"
-        d="m268.414 18.314-6.042 2.12 6.042-2.12Z"
-        stroke="#DFE3E8"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth={4}
-    />
-    <circle
-        cx={283.883}
-        cy={13.973}
-        r={6.5}
-        stroke="#DFE3E8"
-        strokeWidth={3}
-        transform="rotate(-58 283.883 13.973)"
-    />
-  </svg>
-)
-
-export default computer

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

@@ -1,8 +0,0 @@
-examples:
-
-
-  react:
-  - empty_state_default: Default
-  - empty_state_size: Size
-  - empty_state_orientation: Orientation
-  - empty_state_alignment: Alignment

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

@@ -1,4 +0,0 @@
-export { default as EmptyStateDefault } from './_empty_state_default.jsx'
-export { default as EmptyStateOrientation } from './_empty_state_orientation.jsx'
-export { default as EmptyStateSize } from './_empty_state_size.jsx'
-export { default as EmptyStateAlignment } from './_empty_state_alignment.jsx'

data/app/pb_kits/playbook/pb_empty_state/empty_state.test.jsx

@@ -1,17 +0,0 @@
-import React from 'react'
-import { render, screen } from '../utilities/test-utils'
-
-import { EmptyState } from 'playbook-ui'
-
-
-test('returns namespaced class name', () => {
-  render(
-    <EmptyState
-        data={{ testid: 'primary-test' }}
-        text="some text"
-    />
-  )
-
-  const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_empty_state_kit')
-})

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

@@ -1,76 +0,0 @@
-<% treeData = [{
-    label: "Power Home Remodeling",
-    value: "Power Home Remodeling",
-    id: "powerhome1",
-    expanded: true,
-    children: [
-      {
-        label: "People",
-        value: "People",
-        id: "people1",
-        expanded: true,
-        children: [
-          {
-            label: "Talent Acquisition",
-            value: "Talent Acquisition",
-            id: "talent1",
-            disabled: true,
-          },
-          {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "business1",
-            children: [
-              {
-                label: "Initiatives",
-                value: "Initiatives",
-                id: "initiative1",
-                disabled: true,
-              },
-              {
-                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",
-            disabled: true,
-          },
-          {
-            label: "Energy",
-            value: "Energy",
-            id: "energy1",
-          },
-        ],
-      },
-    ],
-}] %>
-
-
-<%= pb_rails("multi_level_select", props: {
-    id: "multi-level-select-disabled-options-rails",
-    name: "disabled_options",
-    return_all_selected: true,
-    tree_data: treeData
-}) %>

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

@@ -1,94 +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",
-        expanded: true,
-        children: [
-          {
-            label: "Talent Acquisition",
-            value: "Talent Acquisition",
-            id: "talent1",
-            disabled: true,
-          },
-          {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "business1",
-            children: [
-              {
-                label: "Initiatives",
-                value: "Initiatives",
-                id: "initiative1",
-                disabled: true,
-              },
-              {
-                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",
-            disabled: true,
-          },
-          {
-            label: "Energy",
-            value: "Energy",
-            id: "energy1",
-          },
-        ],
-      },
-    ],
-  },
-];
-
-const MultiLevelSelectDisabledOptions = (props) => {
-  return (
-    <div>
-      <MultiLevelSelect
-          id='multiselect-disabled-options'
-          onSelect={(selectedNodes) =>
-          console.log(
-            "Selected Items",
-            selectedNodes
-          )
-        }
-          returnAllSelected
-          treeData={treeData}
-          {...props}
-      />
-    </div>
-  )
-};
-
-export default MultiLevelSelectDisabledOptions;

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

@@ -1 +0,0 @@
-individual items can also be disabled by including the `disabled:true` within the object on the treeData for the `returnAllSelected`/`return_all_selected` variant. As noted above, this variant will return data on all checked nodes from the dropdown, irrespective of whether it is a parent or child node.

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

@@ -1,75 +0,0 @@
-<% treeData = [{
-    label: "Power Home Remodeling",
-    value: "Power Home Remodeling",
-    id: "powerhome1",
-    expanded: true,
-    children: [
-      {
-        label: "People",
-        value: "People",
-        id: "people1",
-        expanded: true,
-        children: [
-          {
-            label: "Talent Acquisition",
-            value: "Talent Acquisition",
-            id: "talent1",
-            disabled: true,
-          },
-          {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "business1",
-            children: [
-              {
-                label: "Initiatives",
-                value: "Initiatives",
-                id: "initiative1",
-                disabled: true,
-              },
-              {
-                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",
-            disabled: true,
-          },
-          {
-            label: "Energy",
-            value: "Energy",
-            id: "energy1",
-          },
-        ],
-      },
-    ],
-}] %>
-
-
-<%= pb_rails("multi_level_select", props: {
-    id: "multi-level-select-disabled-options-default-rails",
-    name: "disabled_options_default",
-    tree_data: treeData
-}) %>

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

@@ -1,93 +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",
-        expanded: true,
-        children: [
-          {
-            label: "Talent Acquisition",
-            value: "Talent Acquisition",
-            id: "talent1",
-            disabled: true,
-          },
-          {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "business1",
-            children: [
-              {
-                label: "Initiatives",
-                value: "Initiatives",
-                id: "initiative1",
-                disabled: true,
-              },
-              {
-                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",
-            disabled: true,
-          },
-          {
-            label: "Energy",
-            value: "Energy",
-            id: "energy1",
-          },
-        ],
-      },
-    ],
-  },
-];
-
-const MultiLevelSelectDisabledOptionsDefault = (props) => {
-  return (
-    <div>
-      <MultiLevelSelect
-          id='multiselect-disabled-options-default'
-          onSelect={(selectedNodes) =>
-          console.log(
-            "Selected Items",
-            selectedNodes
-          )
-        }
-          treeData={treeData}
-          {...props}
-      />
-    </div>
-  )
-};
-
-export default MultiLevelSelectDisabledOptionsDefault;

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

@@ -1,3 +0,0 @@
-To disable individual items in the treeData, include `disabled:true` within the object on the treeData that you want disabled. See the code snippet below for an example of how to do this.
-
-If a parent is selected, the parent will be returned in the selected items list, even if it has disabled children.

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

@@ -1,75 +0,0 @@
-<% treeData = [{
-    label: "Power Home Remodeling",
-    value: "Power Home Remodeling",
-    id: "powerhome1",
-    expanded: true,
-    children: [
-      {
-        label: "People",
-        value: "People",
-        id: "people1",
-        expanded: true,
-        children: [
-          {
-            label: "Talent Acquisition",
-            value: "Talent Acquisition",
-            id: "talent1",
-          },
-          {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "business1",
-            expanded: true,
-            disabled: true,
-            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: "mls-disabled-options-parent-rails",
-    name: "disabled_options_parent",
-    return_all_selected: true,
-    tree_data: treeData
-}) %>

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

@@ -1,93 +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",
-        expanded: true,
-        children: [
-          {
-            label: "Talent Acquisition",
-            value: "Talent Acquisition",
-            id: "talent1",
-          },
-          {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "business1",
-            expanded: true,
-            disabled: true,
-            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 MultiLevelSelectDisabledOptionsParent = (props) => {
-  return (
-    <div>
-      <MultiLevelSelect
-          id='multiselect-disabled-options-parent'
-          onSelect={(selectedNodes) =>
-          console.log(
-            "Selected Items",
-            selectedNodes
-          )
-        }
-          returnAllSelected
-          treeData={treeData}
-          {...props}
-      />
-    </div>
-  )
-};
-
-export default MultiLevelSelectDisabledOptionsParent;

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

@@ -1,3 +0,0 @@
-For the `returnAllSelected`/`return_all_selected` variant, disabling the parent item will NOT automatically disable it's children since this version allows you to select a parent even if all children are unselected. 
-
-You can manually pass `disabled:true` to any and all children of a disabled parent if you want to do so.