playbook_ui 15.4.0.pre.alpha.testingseparation12413 → 15.4.0.pre.rc.0

data/app/pb_kits/playbook/pb_dropdown/quickpick/index.ts

@@ -1,60 +0,0 @@
-// QuickPick default options for Dropdown
-// This provides date range options similar to the DatePicker QuickPick functionality
-
-import DateTime from '../../pb_kit/dateTime';
-
-type QuickPickOption = {
-  label: string;
-  value: Date[];
-  formattedStartDate?: string;
-  formattedEndDate?: string;
-  id?: string;
-};
-
-// Helper to get QuickPick options with date ranges
-const getQuickPickOptions = (rangeEndsToday = false): QuickPickOption[] => {
-  const today = new Date();
-  const yesterday = DateTime.getYesterdayDate(new Date());
-
-  const thisWeekStartDate = DateTime.getFirstDayOfWeek(new Date());
-  const thisWeekEndDate = rangeEndsToday ? new Date() : DateTime.getLastDayOfWeek(new Date());
-  const lastWeekStartDate = DateTime.getPreviousWeekStartDate(new Date());
-  const lastWeekEndDate = DateTime.getPreviousWeekEndDate(new Date());
-
-  const thisMonthStartDate = DateTime.getMonthStartDate(new Date());
-  const thisMonthEndDate = rangeEndsToday ? new Date() : DateTime.getMonthEndDate(new Date());
-  const lastMonthStartDate = DateTime.getPreviousMonthStartDate(new Date());
-  const lastMonthEndDate = DateTime.getPreviousMonthEndDate(new Date());
-
-  const thisQuarterStartDate = DateTime.getQuarterStartDate(new Date());
-  const thisQuarterEndDate = rangeEndsToday ? new Date() : DateTime.getQuarterEndDate(new Date());
-  const lastQuarterStartDate = DateTime.getPreviousQuarterStartDate(new Date());
-  const lastQuarterEndDate = DateTime.getPreviousQuarterEndDate(new Date());
-
-  const thisYearStartDate = DateTime.getYearStartDate(new Date());
-  const thisYearEndDate = rangeEndsToday ? new Date() : DateTime.getYearEndDate(new Date());
-  const lastYearStartDate = DateTime.getPreviousYearStartDate(new Date());
-  const lastYearEndDate = DateTime.getPreviousYearEndDate(new Date());
-
-  const formatDate = (date: Date) => {
-  const day = String(date.getDate()).padStart(2, "0")
-  const month = String(date.getMonth() + 1).padStart(2, "0")
-  const year = date.getFullYear()
-
-  return `${month}/${day}/${year}`
-}
-  return [
-    { label: 'Today', value: [today, today], id: 'quickpick-today' },
-    { label: 'Yesterday', value: [yesterday, yesterday], formattedStartDate: `${formatDate(yesterday)}`, formattedEndDate: `${formatDate(yesterday)}`, id: 'quickpick-yesterday' },
-    { label: 'This Week', value: [thisWeekStartDate, thisWeekEndDate], formattedStartDate: `${formatDate(thisWeekStartDate)}`, formattedEndDate: `${formatDate(thisWeekEndDate)}`, id: 'quickpick-this-week' },
-    { label: 'This Month', value: [thisMonthStartDate, thisMonthEndDate], formattedStartDate: `${formatDate(thisMonthStartDate)}`, formattedEndDate: `${formatDate(thisMonthEndDate)}`, id: 'quickpick-this-month' },
-    { label: 'This Quarter', value: [thisQuarterStartDate, thisQuarterEndDate], formattedStartDate: `${formatDate(thisQuarterStartDate)}`, formattedEndDate: `${formatDate(thisQuarterEndDate)}`, id: 'quickpick-this-quarter' },
-    { label: 'This Year', value: [thisYearStartDate, thisYearEndDate], formattedStartDate: `${formatDate(thisYearStartDate)}`, formattedEndDate: `${formatDate(thisYearEndDate)}`, id: 'quickpick-this-year' },
-    { label: 'Last Week', value: [lastWeekStartDate, lastWeekEndDate], formattedStartDate: `${formatDate(lastWeekStartDate)}`, formattedEndDate: `${formatDate(lastWeekEndDate)}`, id: 'quickpick-last-week' },
-    { label: 'Last Month', value: [lastMonthStartDate, lastMonthEndDate], formattedStartDate: `${formatDate(lastMonthStartDate)}`, formattedEndDate: `${formatDate(lastMonthEndDate)}`, id: 'quickpick-last-month' },
-    { label: 'Last Quarter', value: [lastQuarterStartDate, lastQuarterEndDate], formattedStartDate: `${formatDate(lastQuarterStartDate)}`, formattedEndDate: `${formatDate(lastQuarterEndDate)}`, id: 'quickpick-last-quarter' },
-    { label: 'Last Year', value: [lastYearStartDate, lastYearEndDate], formattedStartDate: `${formatDate(lastYearStartDate)}`, formattedEndDate: `${formatDate(lastYearEndDate)}`, id: 'quickpick-last-year' },
-  ];
-};
-
-export default getQuickPickOptions

data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.html.erb

@@ -1,21 +0,0 @@
-<%= pb_rails("caption", props: { margin_bottom: "sm", text: "Default Variant" }) %>
-<%= pb_rails("nav", props: { orientation: "horizontal" }) do %>
-  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
-  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
-  <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
-  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
-<% end %>
-<%= pb_rails("caption", props: { margin_bottom: "sm", margin_top:"lg", text: "Subtle Variant" }) %>
-<%= pb_rails("nav", props: { orientation: "horizontal", variant: "subtle" }) do %>
-  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
-  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
-  <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
-  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
-<% end %>
-<%= pb_rails("caption", props: { margin_bottom: "sm", margin_top:"lg", text: "Bold Variant" }) %>
-<%= pb_rails("nav", props: { orientation: "horizontal", variant: "bold" }) do %>
-  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
-  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
-  <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
-  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
-<% end %>

data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.jsx

@@ -1,113 +0,0 @@
-import React from 'react'
-
-import Nav from '../_nav'
-import NavItem from '../_item'
-import Caption from '../../pb_caption/_caption'
-
-const HorizontalNavDisabled = (props) => {
-  return (
-    <>
-    <Caption marginBottom="sm">Default Variant</Caption>
-    <Nav
-        link="#"
-        orientation="horizontal"
-        {...props}
-    >
-      <NavItem
-          link="#"
-          text="About"
-          {...props}
-      />
-      <NavItem
-          active
-          link="#"
-          text="Case Studies"
-          {...props}
-      />
-      <NavItem
-          disabled
-          link="#"
-          text="Service"
-          {...props}
-      />
-      <NavItem
-          link="#"
-          text="Contacts"
-          {...props}
-      />
-      </Nav>
-      <Caption  
-          marginBottom="sm" 
-          marginTop="lg"
-      >
-        Subtle Variant
-      </Caption>
-      <Nav
-          link="#"
-          orientation="horizontal"
-          variant="subtle"
-          {...props}
-      >
-        <NavItem
-            link="#"
-            text="About"
-            {...props}
-        />
-        <NavItem
-            active
-            link="#"
-            text="Case Studies"
-            {...props}
-        />
-        <NavItem
-            disabled
-            link="#"
-            text="Service"
-            {...props}
-        />
-        <NavItem
-            link="#"
-            text="Contacts"
-            {...props}
-        />
-      </Nav>
-      <Caption  
-          marginBottom="sm" 
-          marginTop="lg"
-      >
-        Bold Variant
-      </Caption>
-      <Nav
-          link="#"
-          orientation="horizontal"
-          variant="bold"
-          {...props}
-      >
-        <NavItem
-            link="#"
-            text="About"
-            {...props}
-        />
-        <NavItem
-            active
-            link="#"
-            text="Case Studies"
-            {...props}
-        />
-        <NavItem
-            disabled
-            link="#"
-            text="Service"
-            {...props}
-        />
-        <NavItem
-            link="#"
-            text="Contacts"
-            {...props}
-        />
-      </Nav>
-    </>
-  )
-}
-
-export default HorizontalNavDisabled

data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.md

@@ -1 +0,0 @@
-Use the `disabled` prop on a `navItem`/`nav_item` within a horizontal nav to set it as disabled. This will render the UI as disabled, prevent clicks and not allow for tabIndex to access the item. 

data/app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.html.erb

@@ -1,30 +0,0 @@
-<%= pb_rails("flex", props: { justify: "between" }) do %>
-  <%= pb_rails("flex", props: { orientation:"column", wrap: true }) do %>
-    <%= pb_rails("caption", props: { margin_bottom: "sm", text: "Default Variant" }) %>
-    <%= pb_rails("nav") do %>
-      <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
-      <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
-      <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
-      <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
-    <% end %>
-  <% end %>
-    <%= pb_rails("flex", props: { orientation:"column", wrap: true }) do %>
-    <%= pb_rails("caption", props: { margin_bottom: "sm", text: "Subtle Variant" }) %>
-    <%= pb_rails("nav", props:{variant: "subtle"}) do %>
-      <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
-      <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
-      <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
-      <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
-    <% end %>
-  <% end %>
-    <%= pb_rails("flex", props: { orientation:"column", wrap: true }) do %>
-    <%= pb_rails("caption", props: { margin_bottom: "sm", text: "Bold Variant" }) %>
-    <%= pb_rails("nav", props:{variant: "bold"}) do %>
-      <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
-      <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
-      <%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
-      <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
-    <% end %>
-  <% end %>
-  
-<% end %>

data/app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.jsx

@@ -1,117 +0,0 @@
-import React from 'react'
-
-import Nav from '../_nav'
-import NavItem from '../_item'
-import Caption from '../../pb_caption/_caption'
-import Flex from '../../pb_flex/_flex'
-
-const VerticalNavDisabled = (props) => {
-  return (
-    <Flex justify="between" 
-        wrap
-    >
-        <Flex orientation="column">
-            <Caption marginBottom="sm">Default Variant</Caption>
-            <Nav
-                link="#"
-                {...props}
-            >
-            <NavItem
-                link="#"
-                text="About"
-                {...props}
-            />
-            <NavItem
-                active
-                link="#"
-                text="Case Studies"
-                {...props}
-            />
-            <NavItem
-                disabled
-                link="#"
-                text="Service"
-                {...props}
-            />
-            <NavItem
-                link="#"
-                text="Contacts"
-                {...props}
-            />
-            </Nav>
-        </Flex>
-        <Flex orientation="column">
-            <Caption  
-                marginBottom="sm" 
-            >
-                Subtle Variant
-            </Caption>
-            <Nav
-                link="#"
-                variant="subtle"
-                {...props}
-            >
-            <NavItem
-                link="#"
-                text="About"
-                {...props}
-            />
-            <NavItem
-                active
-                link="#"
-                text="Case Studies"
-                {...props}
-            />
-            <NavItem
-                disabled
-                link="#"
-                text="Service"
-                {...props}
-            />
-            <NavItem
-                link="#"
-                text="Contacts"
-                {...props}
-            />
-            </Nav>
-        </Flex>
-        <Flex orientation="column">
-            <Caption  
-                marginBottom="sm" 
-            >
-                Bold Variant
-            </Caption>
-            <Nav
-                link="#"
-                variant="bold"
-                {...props}
-            >
-                <NavItem
-                    link="#"
-                    text="About"
-                    {...props}
-                />
-                <NavItem
-                    active
-                    link="#"
-                    text="Case Studies"
-                    {...props}
-                />
-                <NavItem
-                    disabled
-                    link="#"
-                    text="Service"
-                    {...props}
-                />
-                <NavItem
-                    link="#"
-                    text="Contacts"
-                    {...props}
-                />
-            </Nav>
-        </Flex>
-    </Flex>
-  )
-}
-
-export default VerticalNavDisabled

data/app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.md

@@ -1 +0,0 @@
-Use the `disabled` prop on a `navItem`/`nav_item` within a vertical nav to set it as disabled. This will render the UI as disabled, prevent clicks and not allow for tabIndex to access the item. 

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.md

@@ -1 +0,0 @@
-In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.md

@@ -1,11 +0,0 @@
-Highcharts provides many options for customizing the legend display. This example showcases the following:
-
-`align` can be used to align the legend left, right or center (defaults to center)
-
-`verticalAlign` can be used to place the legend above the graph. Options are top, middle, bottom with default set to bottom
-
-`layout` determines the position of the legend items. Options are horizontal, vertical or proximate with default set to horizontal `layout: proximate` will place the legend items as close as possible to the graphs they're representing. It will also determine whether to place the legend above/below or on the side of the plot area, if the legend is in a corner.
-
-`x` offsets the legend relative to its horizontal alignment. Negative x moves it to the left, positive x moves it to the right (defaults to 0)
-
-`y` offsets the legend relative to its vertical alignment. Negative y moves it up, positive y moves it down (defaults to 0)

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.md

@@ -1 +0,0 @@
-In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_default.md

@@ -1 +0,0 @@
-In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_default.md

@@ -1 +0,0 @@
-In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.jsx

@@ -1,71 +0,0 @@
-import React, { useState } from "react";
-import PbReactPopover from "../_popover";
-import Body from "../../pb_body/_body";
-import Flex from "../../pb_flex/_flex";
-import CircleIconButton from "../../pb_circle_icon_button/_circle_icon_button";
-
-const PopoverAppendTo = (props) => {
-  const [showParentPopover, setShowParentPopover] = useState(false);
-  const [showSelectorPopover, setShowSelectorPopover] = useState(false);
-
-  const parentPopoverReference = (
-    <CircleIconButton
-        icon="info"
-        onClick={() => setShowParentPopover(!showParentPopover)}
-        variant="secondary"
-    />
-  );
-
-  const selectorPopoverReference = (
-    <CircleIconButton
-        icon="info"
-        onClick={() => setShowSelectorPopover(!showSelectorPopover)}
-        variant="secondary"
-    />
-  );
-
-  return (
-    <>
-      <Flex
-          marginBottom="md"
-          orientation="row"
-          vertical="center"
-          {...props}
-      >
-        <Body text="Click info for more details" />
-        &nbsp;
-        <PbReactPopover
-            appendTo="parent"
-            offset
-            placement="top"
-            reference={parentPopoverReference}
-            show={showParentPopover}
-            {...props}
-        >
-          {'I\'m a popover. I have been appended to my parent element.'}
-        </PbReactPopover>
-      </Flex>
-
-      <Flex
-          orientation="row"
-          vertical="center"
-          {...props}
-      >
-        <Body text="Click info for more details" />
-        &nbsp;
-        <PbReactPopover
-            appendTo=".kit-show-wrapper"
-            offset
-            placement="top"
-            reference={selectorPopoverReference}
-            show={showSelectorPopover}
-            {...props}
-        >
-          {'I\'m a popover. I have been appended to the .kit-show-wrapper.'}
-        </PbReactPopover>
-      </Flex>
-    </>
-  );
-};
-
-export default PopoverAppendTo;

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to_react.md

@@ -1 +0,0 @@
-By default, the popover tooltip attaches to the `<body>`. To attach it elsewhere, use the `appendTo` prop. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.

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

@@ -1,63 +0,0 @@
-<% content = capture do %>
-    <%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
-        <%= pb_rails("body", props: { text: "Nested content inside a Table Row" }) %>
-    <% end %>
-<% end %>
-
-<%= 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: "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"}) %>
-          <%= pb_rails("table/table_header", props: { text: ""}) %>
-       <% end %>
-  <% end %>
-  <%= pb_rails("table/table_body") do %>
-      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, id: "11" }) do %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 1", html_options: { onclick: "toggleArrows()" }}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 2", html_options: { onclick: "toggleArrows()" }}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 3", html_options: { onclick: "toggleArrows()" }}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 4", html_options: { onclick: "toggleArrows()" }}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 5", html_options: { onclick: "toggleArrows()" }}) %>
-          <%= pb_rails("table/table_cell", props: { text_align: "right", html_options: { onclick: "toggleArrows()" }}) do %>
-            <%= pb_rails("icon", props: {id: "chevron-icon-down", icon: "chevron-down", fixed_width: true, color: "primary" }) %>
-            <%= pb_rails("icon", props: {id: "chevron-icon-up", icon: "chevron-up", fixed_width: true, color: "primary" }) %>
-          <% end %>
-      <% 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: "Value 4"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-          <%= pb_rails("table/table_cell", props: { text: ""}) %>
-      <% 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: "Value 4"}) %>
-          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-          <%= pb_rails("table/table_cell", props: { text: ""}) %>
-      <% end %>
-  <% end %>
-<% end %>
-
-<script>
-    const downArrow = document.getElementById("chevron-icon-down");
-    const upArrow = document.getElementById("chevron-icon-up");
-
-    upArrow.style.display = upArrow.style.display === 'none' ? 'inline-block' : 'none';
-
-    function toggleArrows() {
-        if (downArrow) {
-            downArrow.style.display = downArrow.style.display === 'none' ? 'inline-block' : 'none';
-        }
-        if (upArrow) {
-            upArrow.style.display = upArrow.style.display === 'none' ? 'inline-block' : 'none';
-        }
-    }
-</script>

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

@@ -1,89 +0,0 @@
-import React, { useState } from 'react'
-import Table from '../_table'
-import Icon from '../../pb_icon/_icon'
-import Card from '../../pb_card/_card'
-import Body from '../../pb_body/_body'
-
-const TableWithDynamicCollapsible = (props) => {
-
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleToggleArrows = () => {
-    setIsOpen(!isOpen)
-  }
-
-  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 htmlOptions={{ onClick: handleToggleArrows }}>{'Value 1'}</Table.Cell>
-          <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 2'}</Table.Cell>
-          <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 3'}</Table.Cell>
-          <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 4'}</Table.Cell>
-          <Table.Cell htmlOptions={{ onClick: handleToggleArrows }}>{'Value 5'}</Table.Cell>
-          <Table.Cell
-              htmlOptions={{ onClick: handleToggleArrows }}
-              textAlign="right"
-          >
-            {
-              <Icon
-                  color="primary"
-                  fixedWidth
-                  icon={isOpen ? 'chevron-up' : '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 TableWithDynamicCollapsible

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

@@ -1,4 +0,0 @@
-The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsible_content` prop to add any content to the collapsible Row.
-Please be aware that you will need to pass in an `id` to any table rows you want to be collapsible. Make sure every `id` is unique if you are using multipe collapsibles.
-
-Follow this example to make the icons dynamic following the state of the collapsible.

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

@@ -1,3 +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.
-
-Follow this example to make the icons dynamic following the state of the collapsible.