playbook_ui 14.10.0.pre.alpha.play16825301 → 14.10.0.pre.rc.0

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx

@@ -1,97 +0,0 @@
-import React, { useState } from 'react';
-import { Button, Flex, SkeletonLoading, User } from "playbook-ui";
-
-const SkeletonLoadingUser = (props) => {
-  const [isLoading, setIsLoading] = useState(true)
-  const toggleLoading = () => setIsLoading((prev) => !prev)
-
-  return (
-    <div>
-      <Button 
-          marginBottom="md" 
-          onClick={toggleLoading} 
-          variant="secondary"
-      >
-          {isLoading ? "Show User" : "Show Skeleton Loading"}
-      </Button>
-      <div>
-        {isLoading ? (
-          <Flex alignItems="center">
-              <SkeletonLoading 
-                  borderRadius="rounded" 
-                  height="38px" 
-                  paddingRight="sm"
-                  width="38px" 
-                  {...props} 
-              />
-                <SkeletonLoading 
-                    gap="xxs"
-                    height="18px" 
-                    stack="2"
-                    width="161px"
-                    {...props}
-                />
-          </Flex>
-        ) : (
-          <User
-              align="left"
-              avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
-              name="Anna Black"
-              orientation="horizontal"
-              title="Remodeling Consultant"
-              {...props}
-          />
-        )}
-      </div>
-      <div>
-        {isLoading ? (
-          <Flex 
-              alignItems="start"
-              paddingTop="md"
-          >
-              <Flex 
-                  alignItems="center" 
-                  flexDirection="column"
-              >
-                  <SkeletonLoading 
-                      borderRadius="rounded" 
-                      height="80px" 
-                      paddingBottom="xs" 
-                      width="80px" 
-                      {...props}
-                  />
-                  <SkeletonLoading 
-                      height="32px" 
-                      paddingBottom="xxs" 
-                      width="144px" 
-                      {...props} 
-                  />
-                  <SkeletonLoading 
-                      height="21px" 
-                      width="164px" 
-                      {...props}
-                  />
-              </Flex>
-          </Flex>
-        ) : (
-          <Flex
-              alignItems="start" 
-              paddingTop="md"
-          >
-              <User
-                  align="center"
-                  avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
-                  name="Anna Black"
-                  orientation="vertical"
-                  size="lg"
-                  title="Remodeling Consultant"
-                  {...props}
-              />
-          </Flex>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default SkeletonLoadingUser;

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

@@ -1,88 +0,0 @@
-import React from 'react'
-import Table from '../_table'
-
-const TableStickyColumns = () => {
-    return (
-        <Table
-            responsive="scroll"
-            size="md"
-            stickyLeftColumn={["a"]}
-            stickyRightColumn={["b"]}
-        >
-            <thead>
-                <tr>
-                    <th id="a">{'Column 1'}</th>
-                    <th>{'Column 2'}</th>
-                    <th>{'Column 3'}</th>
-                    <th>{'Column 4'}</th>
-                    <th>{'Column 5'}</th>
-                    <th>{'Column 6'}</th>
-                    <th>{'Column 7'}</th>
-                    <th>{'Column 8'}</th>
-                    <th>{'Column 9'}</th>
-                    <th>{'Column 10'}</th>
-                    <th>{'Column 11'}</th>
-                    <th>{'Column 12'}</th>
-                    <th>{'Column 13'}</th>
-                    <th>{'Column 14'}</th>
-                    <th id="b">{'Column 15'}</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    <td id="a">{'Value 1'}</td>
-                    <td>{'Value 2'}</td>
-                    <td>{'Value 3'}</td>
-                    <td>{'Value 4'}</td>
-                    <td>{'Value 5'}</td>
-                    <td>{'Value 6'}</td>
-                    <td>{'Value 7'}</td>
-                    <td>{'Value 8'}</td>
-                    <td>{'Value 9'}</td>
-                    <td>{'Value 10'}</td>
-                    <td>{'Value 11'}</td>
-                    <td>{'Value 12'}</td>
-                    <td>{'Value 13'}</td>
-                    <td>{'Value 14'}</td>
-                    <td id="b">{'Value 15'}</td>
-                </tr>
-                <tr>
-                    <td id="a">{'Value 1'}</td>
-                    <td>{'Value 2'}</td>
-                    <td>{'Value 3'}</td>
-                    <td>{'Value 4'}</td>
-                    <td>{'Value 5'}</td>
-                    <td>{'Value 6'}</td>
-                    <td>{'Value 7'}</td>
-                    <td>{'Value 8'}</td>
-                    <td>{'Value 9'}</td>
-                    <td>{'Value 10'}</td>
-                    <td>{'Value 11'}</td>
-                    <td>{'Value 12'}</td>
-                    <td>{'Value 13'}</td>
-                    <td>{'Value 14'}</td>
-                    <td id="b">{'Value 15'}</td>
-                </tr>
-                <tr>
-                    <td id="a">{'Value 1'}</td>
-                    <td>{'Value 2'}</td>
-                    <td>{'Value 3'}</td>
-                    <td>{'Value 4'}</td>
-                    <td>{'Value 5'}</td>
-                    <td>{'Value 6'}</td>
-                    <td>{'Value 7'}</td>
-                    <td>{'Value 8'}</td>
-                    <td>{'Value 9'}</td>
-                    <td>{'Value 10'}</td>
-                    <td>{'Value 11'}</td>
-                    <td>{'Value 12'}</td>
-                    <td>{'Value 13'}</td>
-                    <td>{'Value 14'}</td>
-                    <td id="b">{'Value 15'}</td>
-                </tr>
-            </tbody>
-        </Table>
-    )
-}
-
-export default TableStickyColumns

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

@@ -1,3 +0,0 @@
-The `stickyLeftColumn` and `stickyRightColumn` props can be used together on the same table as needed.
-
-Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using props.

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

@@ -1,77 +0,0 @@
-<%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_left_column: ["1", "2", "3"] }) do %>
-  <thead>
-    <tr>
-      <th id="1">Column 1</th>
-      <th id="2">Column 2</th>
-      <th id="3">Column 3</th>
-      <th>Column 4</th>
-      <th>Column 5</th>
-      <th>Column 6</th>
-      <th>Column 7</th>
-      <th>Column 8</th>
-      <th>Column 9</th>
-      <th>Column 10</th>
-      <th>Column 11</th>
-      <th>Column 12</th>
-      <th>Column 13</th>
-      <th>Column 14</th>
-      <th>Column 15</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td id="1">Value 1</td>
-      <td id="2">Value 2</td>
-      <td id="3">Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-      <td>Value 6</td>
-      <td>Value 7</td>
-      <td>Value 8</td>
-      <td>Value 9</td>
-      <td>Value 10</td>
-      <td>Value 11</td>
-      <td>Value 12</td>
-      <td>Value 13</td>
-      <td>Value 14</td>
-      <td>Value 15</td>
-
-    </tr>
-    <tr>
-      <td id="1">Value 1</td>
-      <td id="2">Value 2</td>
-      <td id="3">Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-      <td>Value 6</td>
-      <td>Value 7</td>
-      <td>Value 8</td>
-      <td>Value 9</td>
-      <td>Value 10</td>
-      <td>Value 11</td>
-      <td>Value 12</td>
-      <td>Value 13</td>
-      <td>Value 14</td>
-      <td>Value 15</td>
-
-    </tr>
-    <tr>
-      <td id="1">Value 1</td>
-      <td id="2">Value 2</td>
-      <td id="3">Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-      <td>Value 6</td>
-      <td>Value 7</td>
-      <td>Value 8</td>
-      <td>Value 9</td>
-      <td>Value 10</td>
-      <td>Value 11</td>
-      <td>Value 12</td>
-      <td>Value 13</td>
-      <td>Value 14</td>
-      <td>Value 15</td>
-
-    </tr>
-  </tbody>
-<% end %>

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

@@ -1,3 +0,0 @@
-The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
-
-Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyLeftColumn`.

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

@@ -1,87 +0,0 @@
-import React from 'react'
-import Table from '../_table'
-
-const TableStickyRightColumns = () => {
-    return (
-        <Table
-            responsive="scroll"
-            size="md"
-            stickyRightColumn={["13", "14", "15"]}
-        >
-            <thead>
-                <tr>
-                    <th>{'Column 1'}</th>
-                    <th>{'Column 2'}</th>
-                    <th>{'Column 3'}</th>
-                    <th>{'Column 4'}</th>
-                    <th>{'Column 5'}</th>
-                    <th>{'Column 6'}</th>
-                    <th>{'Column 7'}</th>
-                    <th>{'Column 8'}</th>
-                    <th>{'Column 9'}</th>
-                    <th>{'Column 10'}</th>
-                    <th>{'Column 11'}</th>
-                    <th>{'Column 12'}</th>
-                    <th id="13">{'Column 13'}</th>
-                    <th id="14">{'Column 14'}</th>
-                    <th id="15">{'Column 15'}</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    <td>{'Value 1'}</td>
-                    <td>{'Value 2'}</td>
-                    <td>{'Value 3'}</td>
-                    <td>{'Value 4'}</td>
-                    <td>{'Value 5'}</td>
-                    <td>{'Value 6'}</td>
-                    <td>{'Value 7'}</td>
-                    <td>{'Value 8'}</td>
-                    <td>{'Value 9'}</td>
-                    <td>{'Value 10'}</td>
-                    <td>{'Value 11'}</td>
-                    <td>{'Value 12'}</td>
-                    <td id="13">{'Value 13'}</td>
-                    <td id="14">{'Value 14'}</td>
-                    <td id="15">{'Value 15'}</td>
-                </tr>
-                <tr>
-                    <td>{'Value 1'}</td>
-                    <td>{'Value 2'}</td>
-                    <td>{'Value 3'}</td>
-                    <td>{'Value 4'}</td>
-                    <td>{'Value 5'}</td>
-                    <td>{'Value 6'}</td>
-                    <td>{'Value 7'}</td>
-                    <td>{'Value 8'}</td>
-                    <td>{'Value 9'}</td>
-                    <td>{'Value 10'}</td>
-                    <td>{'Value 11'}</td>
-                    <td>{'Value 12'}</td>
-                    <td id="13">{'Value 13'}</td>
-                    <td id="14">{'Value 14'}</td>
-                    <td id="15">{'Value 15'}</td>
-                </tr>
-                <tr>
-                    <td>{'Value 1'}</td>
-                    <td>{'Value 2'}</td>
-                    <td>{'Value 3'}</td>
-                    <td>{'Value 4'}</td>
-                    <td>{'Value 5'}</td>
-                    <td>{'Value 6'}</td>
-                    <td>{'Value 7'}</td>
-                    <td>{'Value 8'}</td>
-                    <td>{'Value 9'}</td>
-                    <td>{'Value 10'}</td>
-                    <td>{'Value 11'}</td>
-                    <td>{'Value 12'}</td>
-                    <td id="13">{'Value 13'}</td>
-                    <td id="14">{'Value 14'}</td>
-                    <td id="15">{'Value 15'}</td>
-                </tr>
-            </tbody>
-        </Table>
-    )
-}
-
-export default TableStickyRightColumns

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

@@ -1,5 +0,0 @@
-The `stickyRightColumn` prop works in the same way as the above `stickyLeftColumn` prop. It expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
-
-If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
-
-Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyRightColumn` prop.

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

@@ -1,75 +0,0 @@
-import React from 'react'
-import { Table, Icon, Body, Card } from 'playbook-ui'
-
-const TableWithCollapsible = (props) => {
-
-  const Content = () => {
-    return (
-      <Card 
-          borderNone
-          borderRadius="none"
-          padding="md"
-          {...props}
-      >
-        <Body {...props}>Nested content inside a Table Row</Body>
-      </Card>
-    );
-  };
-
-return (
-      <Table
-          size="sm"
-          {...props}
-      >
-        <Table.Head>
-          <Table.Row>
-            <Table.Header>{'Column 1'}</Table.Header>
-            <Table.Header>{'Column 2'}</Table.Header>
-            <Table.Header>{'Column 3'}</Table.Header>
-            <Table.Header>{'Column 4'}</Table.Header>
-            <Table.Header>{'Column 5'}</Table.Header>
-            <Table.Header>{''}</Table.Header>
-          </Table.Row>
-
-        </Table.Head>
-        <Table.Body>
-          <Table.Row collapsible 
-              collapsibleContent={<Content/>}
-              {...props}
-          >
-            <Table.Cell>{'Value 1'}</Table.Cell>
-            <Table.Cell>{'Value 2'}</Table.Cell>
-            <Table.Cell>{'Value 3'}</Table.Cell>
-            <Table.Cell>{'Value 4'}</Table.Cell>
-            <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell textAlign="right">{ 
-              <Icon
-                  color="primary"
-                  fixedWidth
-                  icon="chevron-down"
-              />}
-            </Table.Cell>
-
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell>{'Value 1'}</Table.Cell>
-            <Table.Cell>{'Value 2'}</Table.Cell>
-            <Table.Cell>{'Value 3'}</Table.Cell>
-            <Table.Cell>{'Value 4'}</Table.Cell>
-            <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell>{''}</Table.Cell>
-          </Table.Row>
-          <Table.Row>
-            <Table.Cell>{'Value 1'}</Table.Cell>
-            <Table.Cell>{'Value 2'}</Table.Cell>
-            <Table.Cell>{'Value 3'}</Table.Cell>
-            <Table.Cell>{'Value 4'}</Table.Cell>
-            <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell>{''}</Table.Cell>
-          </Table.Row>
-        </Table.Body>
-      </Table>
-  )
-}
-
-export default TableWithCollapsible

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

@@ -1 +0,0 @@
-The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsibleContent` prop to add any content to the collapsible Row.

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

@@ -1,108 +0,0 @@
-import React from 'react'
-import { Table, Card, Icon, Body } from 'playbook-ui'
-
-const TableWithCollapsibleWithCustomClick = (props) => {
-
-  const Content = () => {
-    return (
-      <Card 
-          borderNone
-          borderRadius="none"
-          padding="md"
-          {...props}
-      >
-        <Body {...props}>Nested content inside a Table Row</Body>
-      </Card>
-    );
-  };
-
-
-return (
-      <Table
-          size="sm"
-          {...props}
-      >
-        <Table.Head>
-          <Table.Row>
-            <Table.Header>{'Column 1'}</Table.Header>
-            <Table.Header>{'Column 2'}</Table.Header>
-            <Table.Header>{'Column 3'}</Table.Header>
-            <Table.Header>{'Column 4'}</Table.Header>
-            <Table.Header>{'Column 5'}</Table.Header>
-            <Table.Header>{''}</Table.Header>
-          </Table.Row>
-
-        </Table.Head>
-        <Table.Body>
-          <Table.Row collapsible 
-              collapsibleContent={<Content/>}
-              toggleCellId="cell-1"
-              {...props}
-          >
-            <Table.Cell>{'Value 1'}</Table.Cell>
-            <Table.Cell>{'Value 2'}</Table.Cell>
-            <Table.Cell>{'Value 3'}</Table.Cell>
-            <Table.Cell>{'Value 4'}</Table.Cell>
-            <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell cursor="pointer" 
-                id="cell-1"
-                textAlign="right"
-            >
-              <Icon
-                  color="primary"
-                  fixedWidth
-                  icon="chevron-down"
-              />
-            </Table.Cell>
-
-          </Table.Row>
-          <Table.Row collapsible 
-              collapsibleContent={<Content/>}
-              toggleCellId="cell-2"
-              {...props}
-          >
-            <Table.Cell>{'Value 1'}</Table.Cell>
-            <Table.Cell>{'Value 2'}</Table.Cell>
-            <Table.Cell>{'Value 3'}</Table.Cell>
-            <Table.Cell>{'Value 4'}</Table.Cell>
-            <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell cursor="pointer" 
-                id="cell-2"
-                textAlign="right"
-            >
-              <Icon
-                  color="primary"
-                  fixedWidth
-                  icon="chevron-down"
-              />
-            </Table.Cell>
-
-          </Table.Row>
-          <Table.Row collapsible 
-              collapsibleContent={<Content/>}
-              toggleCellId="cell-3"
-              {...props}
-          >
-            <Table.Cell>{'Value 1'}</Table.Cell>
-            <Table.Cell>{'Value 2'}</Table.Cell>
-            <Table.Cell>{'Value 3'}</Table.Cell>
-            <Table.Cell>{'Value 4'}</Table.Cell>
-            <Table.Cell>{'Value 5'}</Table.Cell>
-            <Table.Cell cursor="pointer" 
-                id="cell-3"
-                textAlign="right"
-            >
-              <Icon
-                  color="primary"
-                  fixedWidth
-                  icon="chevron-down"
-              />
-            </Table.Cell>
-
-          </Table.Row>
-        </Table.Body>
-      </Table>
-  )
-}
-
-export default TableWithCollapsibleWithCustomClick

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

@@ -1,2 +0,0 @@
-When using the `collapsible` prop, the default functionality is that the entire Row will be clickable to toggle the Row. To limit the click event to a specific Table Cell, you can use the `toggleCellId` prop to pass in the id of the Cell you want to use as the trigger.
-__NOTE__: `toggleCellId` and the id on the Cell you want to use as the trigger MUST be the same. 

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

@@ -1,94 +0,0 @@
-import React from 'react'
-import { Table, Icon, Card, Body, Image, Flex } from 'playbook-ui'
-
-const TableWithCollapsibleWithCustomContent = (props) => {
-
-  const Content = () => {
-    return (
-      <Card 
-          borderNone
-          borderRadius="none"
-          color="light" 
-          paddingX="xl"
-          paddingY="md"
-          {...props}
-      >
-         <Body paddingBottom="sm" 
-             text="Expanded Custom Layout"
-             {...props}
-         />
-         <Flex justify="between">
-           <Image
-               url="https://via.placeholder.com/150"
-           />
-           <Image
-               url="https://via.placeholder.com/150"
-           />
-           <Image
-               url="https://via.placeholder.com/150"
-           />
-           <Image
-               url="https://via.placeholder.com/150"
-           />
-          </Flex>
-      </Card>
-    );
-  };
-
-    return (
-    <Table
-        size="sm"
-        {...props}
-    >
-      <Table.Head>
-        <Table.Row>
-          <Table.Header>{'Column 1'}</Table.Header>
-          <Table.Header>{'Column 2'}</Table.Header>
-          <Table.Header>{'Column 3'}</Table.Header>
-          <Table.Header>{'Column 4'}</Table.Header>
-          <Table.Header>{'Column 5'}</Table.Header>
-          <Table.Header>{''}</Table.Header>
-        </Table.Row>
-
-      </Table.Head>
-      <Table.Body>
-        <Table.Row collapsible 
-            collapsibleContent={<Content/>}
-            {...props}
-        >
-          <Table.Cell>{'Value 1'}</Table.Cell>
-          <Table.Cell>{'Value 2'}</Table.Cell>
-          <Table.Cell>{'Value 3'}</Table.Cell>
-          <Table.Cell>{'Value 4'}</Table.Cell>
-          <Table.Cell>{'Value 5'}</Table.Cell>
-          <Table.Cell textAlign="right">{ 
-            <Icon
-                color="primary"
-                fixedWidth
-                icon="chevron-down"
-            />}
-          </Table.Cell>
-
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>{'Value 1'}</Table.Cell>
-          <Table.Cell>{'Value 2'}</Table.Cell>
-          <Table.Cell>{'Value 3'}</Table.Cell>
-          <Table.Cell>{'Value 4'}</Table.Cell>
-          <Table.Cell>{'Value 5'}</Table.Cell>
-          <Table.Cell>{''}</Table.Cell>
-        </Table.Row>
-        <Table.Row>
-          <Table.Cell>{'Value 1'}</Table.Cell>
-          <Table.Cell>{'Value 2'}</Table.Cell>
-          <Table.Cell>{'Value 3'}</Table.Cell>
-          <Table.Cell>{'Value 4'}</Table.Cell>
-          <Table.Cell>{'Value 5'}</Table.Cell>
-          <Table.Cell>{''}</Table.Cell>
-        </Table.Row>
-      </Table.Body>
-    </Table>
-  )
-}
-
-export default TableWithCollapsibleWithCustomContent