playbook_ui_docs 13.28.0.pre.alpha.PBNTR297gradientoverlay3029 → 13.28.0.pre.alpha.PLAY888Cardkithighlightoverflowtooltiperror2937

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 13.28.0.pre.alpha.PBNTR297gradientoverlay3029
+  version: 13.28.0.pre.alpha.PLAY888Cardkithighlightoverflowtooltiperror2937
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-06-06 00:00:00.000000000 Z
+date: 2024-05-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -35,8 +35,6 @@ extra_rdoc_files: []
 files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx
@@ -139,10 +137,9 @@ files:
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.html.erb
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.jsx
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_colors.md
+- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.html.erb
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.html.erb
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.md
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.html.erb
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_default.jsx
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_height.html.erb
@@ -626,11 +623,6 @@ files:
 - app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_default.jsx
 - app/pb_kits/playbook/pb_distribution_bar/docs/example.yml
 - app/pb_kits/playbook/pb_distribution_bar/docs/index.js
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx
-- app/pb_kits/playbook/pb_draggable/docs/example.yml
-- app/pb_kits/playbook/pb_draggable/docs/index.js
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md
@@ -1186,12 +1178,6 @@ files:
 - app/pb_kits/playbook/pb_online_status/docs/_online_status_default.jsx
 - app/pb_kits/playbook/pb_online_status/docs/example.yml
 - app/pb_kits/playbook/pb_online_status/docs/index.js
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_default.jsx
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.md
-- app/pb_kits/playbook/pb_overlay/docs/example.yml
-- app/pb_kits/playbook/pb_overlay/docs/index.js
 - app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb
 - app/pb_kits/playbook/pb_pagination/docs/_pagination_default.md
 - app/pb_kits/playbook/pb_pagination/docs/example.yml
@@ -1533,22 +1519,17 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_action_middle.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_action_middle.md
+- app/pb_kits/playbook/pb_table/docs/_table_alignment_column.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_alignment_column.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_alignment_column.md
-- app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.html.erb
-- app/pb_kits/playbook/pb_table/docs/_table_alignment_column_rails.md
+- app/pb_kits/playbook/pb_table/docs/_table_alignment_row.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_alignment_row.md
-- app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.html.erb
-- app/pb_kits/playbook/pb_table/docs/_table_alignment_row_rails.md
+- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.md
-- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.html.erb
-- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data_rails.md
+- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.md
-- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.html.erb
-- app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row_rails.md
 - app/pb_kits/playbook/pb_table/docs/_table_container.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_container.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_data_table.html.erb
@@ -1574,9 +1555,6 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_one_action.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_one_action.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_one_action.md
-- app/pb_kits/playbook/pb_table/docs/_table_outer_padding.html.erb
-- app/pb_kits/playbook/pb_table/docs/_table_outer_padding.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_outer_padding.md
 - app/pb_kits/playbook/pb_table/docs/_table_responsive_table.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_responsive_table.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_side_highlight.html.erb

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb

@@ -1,40 +0,0 @@
-<% 
-  column_definitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-    }
-  ]
-
-  subrow_headers = ["Quarter", "Month", "Day"]
-%>
-
-<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { id: "subrow_headers", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
-<% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.md

@@ -1,3 +0,0 @@
-`subrow_headers` is an optional prop that if present will add header rows at each level of the nested data. The prop takes an array of strings, each string being the text for each header row. The array of strings must be in the order in which they need to be rendered in the UI according to depth.
-
-`enable_toggle_expansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enable_toggle_expansion` is a string that can be "all", "header" or "none". If set to "all", the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to "header" button will only appear in header and NOT in subRow headers. This is set to "header" by default.

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom_rails.md

@@ -1,2 +0,0 @@
-The `custom_options` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
- It's important to note that certain options may require specific script imports to function properly.

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_overlay/docs/_overlay_default.jsx

@@ -1,40 +0,0 @@
-import React from 'react'
-import {
-    Overlay,
-    Table,
-} from '../..'
-
-const TableExample = () => {
-    return (
-        <Table size="sm">
-            <thead>
-                <tr>
-                    <th>{'Column 1'}</th>
-                    <th>{'Column 2'}</th>
-                    <th>{'Column 3'}</th>
-                    <th>{'Column 4'}</th>
-                    <th>{'Column 5'}</th>
-                </tr>
-            </thead>
-            <tbody>
-                {Array.from({ length: 7 }, (_, index) => (
-                    <tr key={index}>
-                        {Array.from({ length: 5 }, (_, columnIndex) => (
-                            <td key={columnIndex}>{`Value ${columnIndex + 1}`}</td>
-                        ))}
-                    </tr>
-                ))}
-            </tbody>
-        </Table>
-    )
-}
-
-const OverlayDefault = () => (
-    <>
-        <Overlay>
-            <TableExample />
-        </Overlay>
-    </>
-)
-
-export default OverlayDefault

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md

@@ -1,7 +0,0 @@
-Overlays require a `color`, which sets the "start" (opaque) color of a gradient mask. Because this overlay is intended to reveal underlying content, the "end" color is fixed to transparent.
-
-The optional `layout` prop accepts a `position` and a `size` as a key:value pair object.
-
-The `position` prop sets the side where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
-
-The `size` prop accepts a percentage value as a string and literally translates to how much of the container is covered by the overlay. By default, `size` is set to `100%` so that your overlay covers the entire container with a smooth fade from `color` at its starting edge, fading to transparent and ending at the containers opposite edge.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import {
-    Overlay,
-    Card,
-    Flex,
-    FlexItem,
-} from '../..'
-
-const InlineCardsExample = () => {
-    return (
-        <Flex
-            columnGap="lg"
-            orientation="row"
-            overflowX="auto"
-        >
-            {Array.from({ length: 15 }, (_, index) => (
-                <FlexItem key={index}>
-                    <Card>{"Card Content"}</Card>
-                </FlexItem>
-            ))}
-        </Flex>
-    )
-}
-
-const OverlayMultiDirectional = () => (
-    <>
-        <Overlay
-            color="white"
-            layout={{"left-right": "10%"}}
-        >
-            <InlineCardsExample />
-        </Overlay>
-    </>
-)
-
-export default OverlayMultiDirectional

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.md

@@ -1,5 +0,0 @@
-Optionally, you can pass multi-directional options (`left-right` or `top-bottom`) to the `position` prop, which create multiple overlays. 
-
-Your `color` is still applied as the starting edge to both overlays, and each mask will fade to transparent moving toward its opposite edge, ending at the `size` percentage you set. 
-
-NOTE: Multi-directional overlays share the available container space, so passing a size greater than "50%" to a multi-directional overlay will cause your masks to overlap at the midline of your container. As a best practice, we do not recommend exceeding a size of 25% when using multi-directional overlays.

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

@@ -1,4 +0,0 @@
-examples:
-  react:
-  - overlay_default: Default
-  - overlay_multi_directional: Multi-directional

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

@@ -1,2 +0,0 @@
-export { default as OverlayDefault } from './_overlay_default.jsx'
-export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'

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.