playbook_ui 14.4.0.pre.alpha.stephenagreerpatch13910 → 14.4.0.pre.rc.0

data/app/pb_kits/playbook/pb_drawer/drawer.test.jsx

@@ -1,77 +0,0 @@
-import React, { useState } from 'react';
-import { render, cleanup, fireEvent, screen } from '../utilities/test-utils';
-import { Drawer, Button } from 'playbook-ui';
-
-const size = 'sm';
-
-function DrawerTest({ props }) {
-  const [isOpen, setIsOpen] = useState(false);
-  const close = () => setIsOpen(false);
-  const open = () => setIsOpen(true);
-
-  return (
-    <>
-      <Button onClick={open}>{'Open Drawer'}</Button>
-      <Drawer
-          className="wrapper"
-          onClose={close}
-          opened={isOpen}
-          placement="left"
-          portalClassName="portal"
-          size={size}
-          {...props}
-      >
-        {props && props.children}
-      </Drawer>
-    </>
-  );
-}
-
-afterEach(cleanup);
-
-test('renders with the right border class when border prop is right', async () => {
-  render(<DrawerTest props={{ border: 'right' }} />);
-
-  fireEvent.click(screen.getByText('Open Drawer'));
-
-  const drawer = await screen.findByRole('dialog');
-  expect(drawer).toHaveClass('drawer_border_right');
-});
-
-test('renders with the left border class when border prop is left', async () => {
-  render(<DrawerTest props={{ border: 'left' }} />);
-
-  fireEvent.click(screen.getByText('Open Drawer'));
-
-  const drawer = await screen.findByRole('dialog');
-  expect(drawer).toHaveClass('drawer_border_left');
-});
-
-test('renders with the full border class when border prop is full', async () => {
-  render(<DrawerTest props={{ border: 'full' }} />);
-
-  fireEvent.click(screen.getByText('Open Drawer'));
-
-  const drawer = await screen.findByRole('dialog');
-  expect(drawer).toHaveClass('drawer_border_full');
-});
-
-test('does not have a border class when border prop is none', async () => {
-  render(<DrawerTest props={{ border: 'none' }} />);
-
-  fireEvent.click(screen.getByText('Open Drawer'));
-
-  const drawer = await screen.findByRole('dialog');
-  expect(drawer).not.toHaveClass('drawer_border_right');
-  expect(drawer).not.toHaveClass('drawer_border_left');
-  expect(drawer).not.toHaveClass('drawer_border_full');
-});
-
-test('renders the correct size class for a large drawer', async () => {
-  render(<DrawerTest props={{ size: 'lg' }} />);
-
-  fireEvent.click(screen.getByText('Open Drawer'));
-
-  const drawer = await screen.findByRole('dialog');
-  expect(drawer).toHaveClass('pb_drawer pb_drawer_lg_left');
-});

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.html.erb

@@ -1,117 +0,0 @@
-<%= pb_rails("title", props: { text: "Status Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
-
-<%= pb_rails("form_pill", props: {
-    text: "Primary",
-    tabindex: 0,
-}) %>
-<%= pb_rails("form_pill", props: {
-    color: "neutral",
-    text: "Neutral",
-    tabindex: 0,
-}) %>
-<%= pb_rails("form_pill", props: {
-    color: "success",
-    text: "Success",
-    tabindex: 0,
-}) %>
-<%= pb_rails("form_pill", props: {
-    color: "warning",
-    text: "Warning",
-    tabindex: 0,
-}) %>
-<%= pb_rails("form_pill", props: {
-    color: "error",
-    text: "Error",
-    tabindex: 0,
-}) %>
-<%= pb_rails("form_pill", props: {
-    color: "info",
-    text: "Info",
-    tabindex: 0,
-}) %>
-
-<%= pb_rails("title", props: { text: "Data Colors", tag: "h4", size: 4, margin_bottom: "sm", margin_top: "md" }) %>
-
-<%= pb_rails("form_pill", props: {
-    color: "data_1",
-    text: "Data 1",
-    tabindex: 0,
-}) %>
-<%= pb_rails("form_pill", props: {
-    color: "data_2",
-    text: "Data 2",
-    tabindex: 0,
-}) %>
-<%= pb_rails("form_pill", props: {
-    color: "data_3",
-    text: "Data 3",
-    tabindex: 0,
-}) %>
-<%= pb_rails("form_pill", props: {
-    color: "data_4",
-    text: "Data 4",
-    tabindex: 0,
-}) %>
-<%= pb_rails("form_pill", props: {
-    color: "data_5",
-    text: "Data 5",
-    tabindex: 0,
-}) %>
-<%= pb_rails("form_pill", props: {
-    color: "data_6",
-    text: "Data 6",
-    tabindex: 0,
-}) %>
-<%= pb_rails("form_pill", props: {
-    color: "data_7",
-    text: "Data 7",
-    tabindex: 0,
-}) %>
-<%= pb_rails("form_pill", props: {
-    color: "data_8",
-    text: "Data 8",
-    tabindex: 0,
-}) %>
-
-<%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4, margin_bottom: "sm", margin_top: "md" }) %>
-
-<%= pb_rails("form_pill", props: {
-    color: "windows",
-    text: "Windows",
-    tabindex: 0,
-}) %>
-<%= pb_rails("form_pill", props: {
-    color: "siding",
-    text: "Siding",
-    tabindex: 0,
-}) %>
-<%= pb_rails("form_pill", props: {
-    color: "roofing",
-    text: "Roofing",
-    tabindex: 0,
-}) %>
-<%= pb_rails("form_pill", props: {
-    color: "doors",
-    text: "Doors",
-    tabindex: 0,
-}) %>
-<%= pb_rails("form_pill", props: {
-    color: "gutters",
-    text: "Gutters",
-    tabindex: 0,
-}) %>
-<%= pb_rails("form_pill", props: {
-    color: "solar",
-    text: "Solar",
-    tabindex: 0,
-}) %>
-<%= pb_rails("form_pill", props: {
-    color: "insulation",
-    text: "Insulation",
-    tabindex: 0,
-}) %>
-<%= pb_rails("form_pill", props: {
-    color: "accessories",
-    text: "Accessories",
-    tabindex: 0,
-}) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.jsx

@@ -1,227 +0,0 @@
-import React from 'react'
-import { FormPill, Title } from 'playbook-ui'
-
-const FormPillColors = (props) => {
-  return (
-    <div>
-      <Title
-          marginBottom="sm"
-          size={4}
-          text="Status Colors"
-          {...props}
-      />
-      <FormPill
-          onClick={() => {
-            alert('Click!')
-          }}
-          tabIndex={0}
-          text="Primary"
-          {...props}
-      />
-      <FormPill
-          color="neutral"
-          onClick={() => {
-            alert('Click!')
-          }}
-          tabIndex={0}
-          text="Neutral"
-          {...props}
-      />
-      <FormPill
-          color="success"
-          onClick={() => {
-            alert('Click!')
-          }}
-          tabIndex={0}
-          text="Success"
-          {...props}
-      />
-      <FormPill
-          color="warning"
-          onClick={() => {
-            alert('Click!')
-          }}
-          tabIndex={0}
-          text="Warning"
-          {...props}
-      />
-      <FormPill
-          color="error"
-          onClick={() => {
-            alert('Click!')
-          }}
-          tabIndex={0}
-          text="Error"
-          {...props}
-      />
-      <FormPill
-          color="info"
-          onClick={() => {
-            alert('Click!')
-          }}
-          tabIndex={0}
-          text="Info"
-          {...props}
-      />
-      <Title
-          marginBottom="sm"
-          marginTop="md"
-          size={4}
-          text="Data Colors"
-          {...props}
-      />
-      <FormPill
-          color="data_1"
-          onClick={() => {
-            alert('Click!')
-          }}
-          tabIndex={0}
-          text="Data 1"
-          {...props}
-      />
-      <FormPill
-          color="data_2"
-          onClick={() => {
-            alert('Click!')
-          }}
-          tabIndex={0}
-          text="Data 2"
-          {...props}
-      />
-      <FormPill
-          color="data_3"
-          onClick={() => {
-            alert('Click!')
-          }}
-          tabIndex={0}
-          text="Data 3"
-          {...props}
-      />
-      <FormPill
-          color="data_4"
-          onClick={() => {
-            alert('Click!')
-          }}
-          tabIndex={0}
-          text="Data 4"
-          {...props}
-      />
-      <FormPill
-          color="data_5"
-          onClick={() => {
-            alert('Click!')
-          }}
-          tabIndex={0}
-          text="Data 5"
-          {...props}
-      />
-      <FormPill
-          color="data_6"
-          onClick={() => {
-            alert('Click!')
-          }}
-          tabIndex={0}
-          text="Data 6"
-          {...props}
-      />
-      <FormPill
-          color="data_7"
-          onClick={() => {
-            alert('Click!')
-          }}
-          tabIndex={0}
-          text="Data 7"
-          {...props}
-      />
-      <FormPill
-          color="data_8"
-          onClick={() => {
-            alert('Click!')
-          }}
-          tabIndex={0}
-          text="Data 8"
-          {...props}
-      />
-      <Title
-          marginBottom="sm"
-          marginTop="md"
-          size={4}
-          text="Product Colors"
-          {...props}
-      />
-      <FormPill
-          color="windows"
-          onClick={() => {
-            alert('Click!')
-          }}
-          tabIndex={0}
-          text="Windows"
-          {...props}
-      />
-      <FormPill
-          color="siding"
-          onClick={() => {
-            alert('Click!')
-          }}
-          tabIndex={0}
-          text="Siding"
-          {...props}
-      />
-      <FormPill
-          color="roofing"
-          onClick={() => {
-            alert('Click!')
-          }}
-          tabIndex={0}
-          text="Roofing"
-          {...props}
-      />
-      <FormPill
-          color="doors"
-          onClick={() => {
-            alert('Click!')
-          }}
-          tabIndex={0}
-          text="Doors"
-          {...props}
-      />
-      <FormPill
-          color="gutters"
-          onClick={() => {
-            alert('Click!')
-          }}
-          tabIndex={0}
-          text="Gutters"
-          {...props}
-      />
-      <FormPill
-          color="solar"
-          onClick={() => {
-            alert('Click!')
-          }}
-          tabIndex={0}
-          text="Solar"
-          {...props}
-      />
-      <FormPill
-          color="insulation"
-          onClick={() => {
-            alert('Click!')
-          }}
-          tabIndex={0}
-          text="Insulation"
-          {...props}
-      />
-      <FormPill
-          color="accessories"
-          onClick={() => {
-            alert('Click!')
-          }}
-          tabIndex={0}
-          text="Accessories"
-          {...props}
-      />
-    </div>
-  )
-}
-export default FormPillColors

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.md

@@ -1 +0,0 @@
-The Status, Data, and Product colors highlighted above can be passed to the `color` prop. Primary is the default color. Form pills with a text tag, an avatar, or an icon with text tag can all receive the `color` prop. 

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

@@ -1,72 +0,0 @@
-<% treeData = [{
-    label: "Power Home Remodeling",
-    value: "Power Home Remodeling",
-    id: "100",
-    expanded: true,
-    children: [
-      {
-        label: "People",
-        value: "People",
-        id: "101",
-        expanded: true,
-        children: [
-          {
-            label: "Talent Acquisition",
-            value: "Talent Acquisition",
-            id: "102",
-          },
-          {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "103",
-            children: [
-              {
-                label: "Initiatives",
-                value: "Initiatives",
-                id: "104",
-              },
-              {
-                label: "Learning & Development",
-                value: "Learning & Development",
-                id: "105",
-              },
-            ],
-          },
-          {
-            label: "People Experience",
-            value: "People Experience",
-            id: "106",
-          },
-        ],
-      },
-      {
-        label: "Contact Center",
-        value: "Contact Center",
-        id: "107",
-        children: [
-          {
-            label: "Appointment Management",
-            value: "Appointment Management",
-            id: "108",
-          },
-          {
-            label: "Customer Service",
-            value: "Customer Service",
-            id: "109",
-          },
-          {
-            label: "Energy",
-            value: "Energy",
-            id: "110",
-          },
-        ],
-      },
-    ],
-}] %>
-
-<%= pb_rails("multi_level_select", props: {
-    id: "multi-level-select-default-rails",
-    name: "my_array",
-    tree_data: treeData,
-    pill_color: "neutral"
-}) %>

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

@@ -1,91 +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",
-            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 MultiLevelSelectColor = (props) => {
-  return (
-    <div>
-      <MultiLevelSelect
-          id='multiselect-color'
-          onSelect={(selectedNodes) =>
-            console.log(
-              "Selected Items",
-              selectedNodes
-            )
-          }
-          pillColor="neutral"
-          treeData={treeData}
-          {...props}
-      />
-    </div>
-  )
-};
-
-export default MultiLevelSelectColor;

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

@@ -1 +0,0 @@
-Change the form pill color by passing the optional `pill_color` prop. Product, Data, and Status colors are available options. Check them out <a href="https://playbook.powerapp.cloud/kits/form_pill#form-pill-colors" target="_blank">here</a> in the Form Pill colors example.

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

@@ -1 +0,0 @@
-Change the form pill color by passing the optional `pillColor` prop. Product, Data, and Status colors are available options. Check them out <a href="https://playbook.powerapp.cloud/kits/form_pill/react#form-pill-colors" target="_blank">here</a> in the Form Pill colors example.

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

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