playbook_ui 13.28.0.pre.alpha.PBNTR297gradientoverlay3029 → 13.28.0.pre.alpha.PLAY888Cardkithighlightoverflowtooltiperror2937

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx

@@ -1,53 +0,0 @@
-import React, { useState } from "react";
-import { SelectableList, Draggable, DraggableProvider } from "../../";
-
-// Initial items to be dragged
-const data = [
-  {
-    id: "1",
-    text: "Task 1",
-  },
-  {
-    id: "2",
-    text: "Task 2",
-  },
-  {
-    id: "3",
-    text: "Task 3",
-  },
-  {
-    id: "4",
-    text: "Task 4",
-  },
-];
-
-const DraggableDefault = (props) => {
-  const [initialState, setInitialState] = useState(data);
-
-  return (
-    <DraggableProvider initialItems={data}
-        onChange={(items) => setInitialState(items)}
-    >
-      <Draggable
-          {...props}
-      >
-        <Draggable.Container>
-          <SelectableList variant="checkbox">
-            {initialState.map(({ id, text }) => (
-              <Draggable.Item id={id} 
-                  key={id}
-              >
-                <SelectableList.Item label={text} 
-                    name={id} 
-                    value={id} 
-                />
-              </Draggable.Item>
-            ))}
-          </SelectableList>
-        </Draggable.Container>
-      </Draggable>
-    </DraggableProvider>
-  );
-};
-
-export default DraggableDefault;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx

@@ -1,159 +0,0 @@
-import React, { useState } from "react";
-import {
-  Flex,
-  Caption,
-  Card,
-  FlexItem,
-  Badge,
-  Avatar,
-  Title,
-  Body,
-  Draggable,
-  DraggableProvider,
-} from "../../";
-
-// Initial groups to drag between
-const containers = ["To Do", "In Progress", "Done"];
-
-// Initial items to be dragged
-const data = [
-  {
-    id: "1",
-    container: "To Do",
-    title: "Task 1",
-    description: "Bug fixes",
-    assignee_name: "Terry Miles",
-    assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
-  },
-  {
-    id: "2",
-    container: "To Do",
-    title: "Task 2",
-    description: "Documentation",
-    assignee_name: "Sophia Miles",
-    assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
-  },
-  {
-    id: "3",
-    container: "In Progress",
-    title: "Task 3",
-    description: "Add a variant",
-    assignee_name: "Alice Jones",
-    assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
-  },
-  {
-    id: "4",
-    container: "To Do",
-    title: "Task 4",
-    description: "Add jest tests",
-    assignee_name: "Mike James",
-    assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
-  },
-  {
-    id: "5",
-    container: "Done",
-    title: "Task 5",
-    description: "Alpha testing",
-    assignee_name: "James Guy",
-    assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
-  },
-  {
-    id: "6",
-    container: "In Progress",
-    title: "Task 6",
-    description: "Release",
-    assignee_name: "Sally Jones",
-    assignee_img: "https://randomuser.me/api/portraits/women/28.jpg",
-  },
-];
-
-const DraggableMultipleContainer = (props) => {
-  const [initialState, setInitialState] = useState(data);
-
-  const badgeProperties = (container) => {
-    switch (container) {
-      case "To Do":
-        return { text: "queue", color: "warning" };
-      case "In Progress":
-        return { text: "progress", color: "primary" };
-      default:
-        return { text: "done", color: "success" };
-    }
-  };
-
-  return (
-    <DraggableProvider initialItems={data}
-        onChange={(items) => setInitialState(items)}
-    >
-      <Draggable
-          display="flex"
-          justifyContent="center"
-          {...props}
-      >
-          {containers?.map((container) => (
-            <Draggable.Container 
-                container={container}
-                key={container} 
-                padding="sm"
-            >
-                <Caption textAlign="center">{container}</Caption>
-                <Flex 
-                    alignItems="stretch"
-                    orientation="column" 
-                >
-                  {initialState
-                    .filter((item) => item.container === container)
-                    .map(
-                      ({
-                        assignee_img,
-                        assignee_name,
-                        description,
-                        id,
-                        title,
-                      }) => (
-                        <Draggable.Item 
-                            container={container}
-                            id={id} 
-                            key={id}
-                        >
-                          <Card
-                              marginBottom="sm"
-                              padding="sm"
-                          >
-                            <Flex justify="between">
-                              <FlexItem>
-                                <Flex>
-                                  <Avatar
-                                      imageUrl={assignee_img}
-                                      name={assignee_name}
-                                      size="xxs"
-                                  />
-                                  <Title paddingLeft="xs" 
-                                      size={4}
-                                      text={title}
-                                  />
-                                </Flex>
-                              </FlexItem>
-                              <Badge
-                                  marginLeft="sm"
-                                  rounded
-                                  text={badgeProperties(container).text}
-                                  variant={badgeProperties(container).color}
-                              />
-                            </Flex>
-                            <Body paddingTop="xs"
-                                text={description} 
-                            />
-                          </Card>
-                        </Draggable.Item>
-                      )
-                    )}
-                </Flex>
-            </Draggable.Container>
-          ))}
-      </Draggable>
-    </DraggableProvider>
-  );
-};
-
-export default DraggableMultipleContainer;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx

@@ -1,121 +0,0 @@
-import React, { useState } from "react";
-import {
-  Flex,
-  Badge,
-  Title,
-  Icon,
-  Draggable,
-  DraggableProvider,
-  Card,
-  Caption,
-} from "../../";
-
-// Initial items to be dragged
-const data = [
-  {
-    id: "1",
-    text: "Joe Black",
-  },
-  {
-    id: "2",
-    text: "Nancy White",
-  },
-  {
-    id: "3",
-    text: "Bill Green",
-  },
-];
-
-const DraggableWithCards = (props) => {
-  const [initialState, setInitialState] = useState(data);
-
-  return (
-    <DraggableProvider
-        initialItems={data}
-        onChange={(items) => setInitialState(items)}
-    >
-      <Draggable {...props}>
-        <Draggable.Container>
-          {initialState.map(({ id, text }) => (
-            <Draggable.Item id={id} 
-                key={id}
-			>
-              <Card
-                  highlight={{ position: "side", color: "primary" }}
-                  marginBottom="xs"
-              >
-                <Flex alignItems="stretch" 
-                    flexDirection="column"
-				>
-                  <Flex gap="xs">
-                    <Title size={4} 
-                        text={text} 
-					/>
-                    <Badge 
-                        text="35-12345" 
-                        variant="primary" 
-					/>
-                  </Flex>
-
-                  <Flex 
-                      gap="sm" 
-                      spacing="between"
-                  >
-                    <Caption 
-                        size="xs" 
-                        text="8:00A" 
-					/>
-                    <Flex gap="xxs">
-                      <Caption 
-                          size="xs" 
-                          text="Township Name" 
-                      />
-                      <Caption size="xs" 
-                          text="•" 
-                      />
-                      <Caption size="xs" 
-                          text="90210" 
-                      />
-                    </Flex>
-                  </Flex>
-
-                  <Flex gap="xxs" 
-                      spacing="between"
-                  >
-                    <Flex gap="xxs">
-                      <Caption color="error" 
-                          size="xs"
-                      >
-                        <Icon icon="house-circle-exclamation" />
-                      </Caption>
-                      <Caption color="success" 
-                          size="xs">
-                        <Icon icon="file-circle-check" />
-                      </Caption>
-                    </Flex>
-                    <Flex>
-                      <Badge rounded 
-                          text="Schedule QA" 
-                          variant="warning" 
-                       />
-                      <Badge rounded 
-                          text="Flex" 
-                          variant="primary" 
-                      />
-                      <Badge rounded 
-                          text="R99" 
-                          variant="primary" 
-                      />
-                    </Flex>
-                  </Flex>
-                </Flex>
-              </Card>
-            </Draggable.Item>
-          ))}
-        </Draggable.Container>
-      </Draggable>
-    </DraggableProvider>
-  );
-};
-
-export default DraggableWithCards;

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

@@ -1,9 +0,0 @@
-examples:
-  
-  
-  react:
-  - draggable_default: Default
-  - draggable_with_cards: Draggable with Cards
-  - draggable_multiple_containers: Dragging Across Multiple Containers
-  
-  

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

@@ -1,3 +0,0 @@
-export { default as DraggableDefault } from './_draggable_default.jsx'
-export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
-export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'

data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx

@@ -1,65 +0,0 @@
-import React, {useState} from "react"
-import { render, screen } from "../utilities/test-utils"
-
-import { Draggable, DraggableProvider, SelectableList } from '../'
-
-const testId = 'draggable'
-
-const data = [
-  {
-    id: "1",
-    text: "Task 1",
-  },
-  {
-    id: "2",
-    text: "Task 2",
-  },
-  {
-    id: "3",
-    text: "Task 3",
-  },
-  {
-    id: "4",
-    text: "Task 4",
-  },
-];
-
-
-const DefaultDraggableKit = () => {
-  const [initialState, setInitialState] = useState(data);
-
-  return (
-    <DraggableProvider
-        initialItems={data}
-        onChange={(items) => setInitialState(items)}
-    >
-      <Draggable
-          data={{ testid: testId }}
-          draggableItems={data}
-          onDragChange={(items) => setInitialItems(items)}
-      >
-        <Draggable.Container>
-          <SelectableList variant="checkbox">
-            {initialState.map(({ id, text }) => (
-              <Draggable.Item id={id} 
-                  key={id}
-              >
-                <SelectableList.Item label={text} 
-                    name={id} 
-                    value={id} 
-                />
-              </Draggable.Item>
-            ))}
-          </SelectableList>
-        </Draggable.Container>
-      </Draggable>
-    </DraggableProvider>
-  );
-};
-
-test('generated default kit and classname', () => {
-render(<DefaultDraggableKit/>)
-const kit = screen.getByTestId(testId)
-expect(kit).toBeInTheDocument()
-expect(kit).toHaveClass('pb_draggable')
-})

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx

@@ -1,54 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import {
-  buildAriaProps,
-  buildCss,
-  buildDataProps,
-  buildHtmlProps
-} from "../../utilities/props";
-import { globalProps } from "../../utilities/globalProps";
-import { DraggableContext } from "../context";
-
-type DraggableContainerProps = {
-  aria?: { [key: string]: string };
-  children?: React.ReactNode;
-  className?: string;
-  container?: any;
-  data?: { [key: string]: string };
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  id?: string;
-};
-
-const DraggableContainer = (props: DraggableContainerProps) => {
-  const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id } = props;
-
-  const { handleDragOver, handleDrop, activeContainer } = DraggableContext();
-
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
-
-  const classes = classnames(
-    buildCss("pb_draggable_container"),
-    `${activeContainer === container ? "active" : ""}`,
-    globalProps(props),
-    className
-  );
-
-  return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
-        id={id}
-        key={container}
-        onDragOver={(e) => handleDragOver(e, container)}
-        onDrop={() => handleDrop(container)}
-    >
-      {children}
-    </div>
-  );
-};
-
-export default DraggableContainer;

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx

@@ -1,57 +0,0 @@
-import React from "react";
-import classnames from "classnames";
-import {
-  buildAriaProps,
-  buildCss,
-  buildDataProps,
-  buildHtmlProps
-} from "../../utilities/props";
-import { globalProps } from "../../utilities/globalProps";
-import { DraggableContext } from "../context";
-
-type DraggableItemProps = {
-  aria?: { [key: string]: string };
-  children?: React.ReactNode;
-  className?: string;
-  container?: any;
-  data?: { [key: string]: string };
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  id?: string;
-};
-
-const DraggableItem = (props: DraggableItemProps) => {
-  const { aria = {}, children, className, container, data = {}, htmlOptions = {},  id } = props;
-
-  const { isDragging, handleDragStart, handleDragEnter, handleDragEnd } =
-    DraggableContext();
-
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const htmlProps = buildHtmlProps(htmlOptions);
-
-  const classes = classnames(
-    buildCss("pb_draggable_item"),
-    `${isDragging === id ? "is_dragging" : ""}`,
-    globalProps(props),
-    className
-  );
-
-  return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
-        draggable
-        id={id}
-        key={id}
-        onDragEnd={() => handleDragEnd()}
-        onDragEnter={() => handleDragEnter(id, container)}
-        onDragStart={() => handleDragStart(id, container)}
-    >
-      {children}
-    </div>
-  );
-};
-
-export default DraggableItem;

data/app/pb_kits/playbook/pb_gauge/gauge.test.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import { render, screen } from '../utilities/test-utils';
-import Gauge from './_gauge';
-
-beforeEach(() => {
-  // Silences error logs within the test suite.
-  jest.spyOn(console, 'error');
-  jest.spyOn(console, 'warn');
-  console.error.mockImplementation(() => {});
-  console.warn.mockImplementation(() => {});
-});
-
-afterEach(() => {
-  console.error.mockRestore();
-  console.warn.mockRestore();
-});
-
-const testId = 'gauge1';
-
-test('uses exact classname', () => {
-  const data = [
-    { name: 'Name', value: 45 },
-  ]
-  render(
-    <Gauge
-        chartData={data}
-        data={{ testid: testId }}
-        id='gaugeid'
-    />
-  );
- 
-  const kit = screen.getByTestId(testId);
-  expect(kit).toHaveClass('pb_gauge_kit');
-});
-

data/app/pb_kits/playbook/pb_line_graph/lineGraph.test.js

@@ -1,52 +0,0 @@
-import React from 'react';
-import { render, screen } from '../utilities/test-utils';
-import LineGraph from './_line_graph';
-
-beforeEach(() => {
-  // Silences error logs within the test suite.
-  jest.spyOn(console, 'error');
-  jest.spyOn(console, 'warn');
-  console.error.mockImplementation(() => {});
-  console.warn.mockImplementation(() => {});
-});
-
-afterEach(() => {
-  console.error.mockRestore();
-  console.warn.mockRestore();
-});
-
-const testId = 'linechart1';
-
-test('uses exact classname', () => {
-  const data = [{
-    name: 'Installation',
-    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
-  }, {
-    name: 'Manufacturing',
-    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
-  }, {
-    name: 'Sales & Distribution',
-    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
-  }, {
-    name: 'Project Development',
-    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
-  }, {
-    name: 'Other',
-    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
-  }]
-  render(
-    <LineGraph
-        axisTitle="Number of Employees"
-        chartData={data}
-        data={{ testid: testId }}
-        id="line-default"
-        subTitle="Source: thesolarfoundation.com"
-        title="Solar Employment Growth by Sector, 2010-2016"
-        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
-        yAxisMin={0}
-    />
-  );
- 
-  const kit = screen.getByTestId(testId);
-  expect(kit).toHaveClass('pb_bar_graph');
-});

data/app/pb_kits/playbook/pb_overlay/_overlay.scss

@@ -1,12 +0,0 @@
-[class^=pb_overlay] {
-  .overlay-container {
-    position: relative;
-  }
-
-  .overlay {
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-    z-index: 1;
-  }
-}