playbook_ui 13.28.0.pre.alpha.pbntr312tableheaderflexremoval3019 → 13.28.0.pre.alpha.play829selectablecardalignment2978

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_table/docs/_table_alignment_column_rails.html.erb

@@ -1,33 +0,0 @@
-<%= pb_rails("table") do %>  <%= pb_rails("table/table_head") do %>
-      <%= pb_rails("table/table_row") do %>
-          <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Rating", text_align: "center" }) %>
-          <%= pb_rails("table/table_header", props: { text: "Money", text_align: "right" }) %>
-       <% end %>
-  <% end %>
-  <%= pb_rails("table/table_body") do %>
-      <%= pb_rails("table/table_row") do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "3", text_align: "center" }) %>
-          <%= pb_rails("table/table_cell", props: { text: "$57.32", text_align: "right" }) %>
-      <% end %>
-      <%= pb_rails("table/table_row") do %>
-        <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-        <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-        <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-        <%= pb_rails("table/table_cell", props: { text: "2", text_align: "center" }) %>
-        <%= pb_rails("table/table_cell", props: { text: "$5,657.08", text_align: "right" }) %>
-    <% end %>
-      <%= pb_rails("table/table_row") do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "4", text_align: "center" }) %>
-          <%= pb_rails("table/table_cell", props: { text: "$358.77", text_align: "right" }) %>
-      <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.md

@@ -1,2 +0,0 @@
-Pass our `text_align` global prop to any `table/table_cell` subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns.
-In the table above the "Rating" column contents is centered and the "Money" column contents is right aligned.

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.html.erb

@@ -1,34 +0,0 @@
-<%= pb_rails("table") do %>
-  <%= pb_rails("table/table_head") do %>
-      <%= pb_rails("table/table_row") do %>
-          <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
-          <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
-       <% end %>
-  <% end %>
-  <%= pb_rails("table/table_body") do %>
-      <%= pb_rails("table/table_row") do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-      <% end %>
-      <%= pb_rails("table/table_row", props: { text_align: "center" }) do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-      <% end %>
-      <%= pb_rails("table/table_row", props: { text_align: "right" }) do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-      <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.md

@@ -1,2 +0,0 @@
-Pass our `text_align` global prop to any `table/table_row` subcomponent to change the text alignment of all cells within that row.
-The header/ first row is the default, followed by the second row being centered, and then the last row shifted to the right.

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.html.erb

@@ -1,54 +0,0 @@
-<%= pb_rails("table") do %>
-  <%= pb_rails("table/table_head") do %>
-    <%= pb_rails("table/table_row") do %>
-      <%= pb_rails("table/table_header", props: { text: "&nbsp;" }) %>
-      <%= pb_rails("table/table_header", props: { text: "Price" }) %>
-    <% end %>
-  <% end %>
-  <%= pb_rails("table/table_body") do %>
-    <%= pb_rails("table/table_row") do %>
-      <%= pb_rails("table/table_cell", props: { text: "Total", vertical_align: "bottom" }) %>
-      <%= pb_rails("table/table_cell") do %>
-        $12<br/>
-        $46<br/>
-        $25<br/>
-        -------<br/>
-        $83
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>
-<br/>
-<%= pb_rails("table", props: { size: "sm" }) do %>
-  <%= pb_rails("table/table_head") do %>
-    <%= pb_rails("table/table_row") do %>
-      <%= pb_rails("table/table_header", props: { text: "Espresso Drinks" }) %>
-      <%= pb_rails("table/table_header", props: { text: "Ingredients" }) %>
-    <% end %>
-  <% end %>
-  <%= pb_rails("table/table_body") do %>
-    <%= pb_rails("table/table_row") do %>
-      <%= pb_rails("table/table_cell", props: { text: "Cappuccino", vertical_align: "top" }) %>
-      <%= pb_rails("table/table_cell") do %>
-        Espresso<br/>
-        Steamed Milk<br/>
-        Milk Foam
-      <% end %>
-    <% end %>
-    <%= pb_rails("table/table_row") do %>
-      <%= pb_rails("table/table_cell", props: { text: "Macchiato", vertical_align: "top" }) %>
-      <%= pb_rails("table/table_cell") do %>
-        Espresso<br/>
-        Steamed Milk
-      <% end %>
-    <% end %>
-    <%= pb_rails("table/table_row") do %>
-      <%= pb_rails("table/table_cell", props: { text: "Mocha", vertical_align: "top" }) %>
-      <%= pb_rails("table/table_cell") do %>
-        Espresso<br/>
-        Hot Chocolate<br/>
-        Steamed Milk
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.md

@@ -1,2 +0,0 @@
-Pass our `vertical_align` global prop to any `table/table_cell` subcomponent to change the text alignment of individual cells, or apply this prop persistently to align entire columns.
-The first table shifts "Total" down, whereas the second table shifts the "Espresso Drinks" column contents up.

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.md

@@ -1 +0,0 @@
-Pass our `verticalAlign` global prop to any `table.row` subcomponent to change the vertical alignment of all cells within that row.

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.html.erb

@@ -1,53 +0,0 @@
-<%= pb_rails("table") do %>
-    <%= pb_rails("table/table_head") do %>
-      <%= pb_rails("table/table_row") do %>
-        <%= pb_rails("table/table_header", props: { text: "Column 1" }) %>
-        <%= pb_rails("table/table_header", props: { text: "Column 2" }) %>
-        <%= pb_rails("table/table_header", props: { text: "Column 3" }) %>
-        <%= pb_rails("table/table_header", props: { text: "Column 4" }) %>
-        <%= pb_rails("table/table_header", props: { text: "Column 5" }) %>       
-      <% end %>
-    <% end %>
-    <%= pb_rails("table/table_body") do %>
-      <%= pb_rails("table/table_row") do %>
-        <%= pb_rails("table/table_cell") do %>
-          Value 1a
-          <br />
-          Value 1a
-          <br />
-          Value 1a
-        <% end %>
-        <%= pb_rails("table/table_cell", props: { text: "Value 2a" }) %>
-        <%= pb_rails("table/table_cell", props: { text: "Value 3a" }) %>
-        <%= pb_rails("table/table_cell", props: { text: "Value 4a" }) %>
-        <%= pb_rails("table/table_cell", props: { text: "Value 5a" }) %>
-      <% end %>
-      <%= pb_rails("table/table_row", props: { vertical_align: "middle" }) do %>
-        <%= pb_rails("table/table_cell") do %>
-          Value 1b
-          <br />
-          Value 1b
-          <br />
-          Value 1b
-        <% end %>
-        <%= pb_rails("table/table_cell", props: { text: "Value 2b" }) %>
-        <%= pb_rails("table/table_cell", props: { text: "Value 3b" }) %>
-        <%= pb_rails("table/table_cell", props: { text: "Value 4b" }) %>
-        <%= pb_rails("table/table_cell", props: { text: "Value 5b" }) %>
-      <% end %>
-      <%= pb_rails("table/table_row", props: { vertical_align: "bottom" }) do %>
-        <%= pb_rails("table/table_cell") do %>
-          Value 1c
-          <br />
-          Value 1c
-          <br />
-          Value 1c
-        <% end %>
-        <%= pb_rails("table/table_cell", props: { text: "Value 2c" }) %>
-        <%= pb_rails("table/table_cell", props: { text: "Value 3c" }) %>
-        <%= pb_rails("table/table_cell", props: { text: "Value 4c" }) %>
-        <%= pb_rails("table/table_cell", props: { text: "Value 5c" }) %>
-      <% end %>
-    <% end %>
-  <% end %>
-  

data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.md

@@ -1 +0,0 @@
-Pass our `vertical_align` global prop to any `table/table_row` subcomponent to change the vertical alignment of all cells within that row.

data/app/pb_kits/playbook/pb_table/docs/_table_outer_padding.jsx

@@ -1,76 +0,0 @@
-import React from 'react'
-
-import Table from '../_table'
-import Button from '../../pb_button/_button'
-
-const TableOuterPadding = (props) => {
-  return (
-    <Table
-        outerPadding="sm"
-        size="sm"
-        {...props}
-    >
-      <thead>
-        <tr>
-          <th>{'Column 1'}</th>
-          <th>{'Column 2'}</th>
-          <th>{'Column 3'}</th>
-          <th>{'Column 4'}</th>
-          <th>{''}</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>{'Value 1'}</td>
-          <td>{'Value 2'}</td>
-          <td>{'Value 3'}</td>
-          <td>{'Value 4'}</td>
-          <td align="right">
-            {' '}
-            <Button
-                onClick={() => alert('button clicked!')}
-                text="Action"
-                variant="secondary"
-                {...props}
-            />
-            {' '}
-          </td>
-        </tr>
-        <tr>
-          <td>{'Value 1'}</td>
-          <td>{'Value 2'}</td>
-          <td>{'Value 3'}</td>
-          <td>{'Value 4'}</td>
-          <td align="right">
-            {' '}
-            <Button
-                onClick={() => alert('button clicked!')}
-                text="Action"
-                variant="secondary"
-                {...props}
-            />
-            {' '}
-          </td>
-        </tr>
-        <tr>
-          <td>{'Value 1'}</td>
-          <td>{'Value 2'}</td>
-          <td>{'Value 3'}</td>
-          <td>{'Value 4'}</td>
-          <td align="right">
-            {' '}
-            <Button
-                onClick={() => alert('button clicked!')}
-                text="Action"
-                variant="secondary"
-                {...props}
-            />
-            {' '}
-          </td>
-        </tr>
-      </tbody>
-    </Table>
-  )
-}
-
-export default TableOuterPadding