playbook_ui 13.20.0 → 13.21.0.pre.alpha.PBNTR224letuserresetrowexpansion2441

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 89bd4e938528cafc5784b31a33e8164edd9b132e4f63f2ebbf2ba1160b07738f
-  data.tar.gz: b87c8966e25b1b0b6fc2a01b84ae7164436a4f2be860f49c7414f667d1c5d40f
+  metadata.gz: c791ef532b5ab0046b1f23ecb0ee10c42d252a03e82ff41aa6a9d975ba74a4c6
+  data.tar.gz: c160c5caed43fb098b0ff002f03f5864fc0fb5b0fadd9cc4beeba5b84a55ce43
 SHA512:
-  metadata.gz: 7991e682deaf82d106bb0e2a29bb029a6299eba736a0c3e85de50366efa998db4f30026c9fcfc3cf4f7c2ac95f2fddaa38a90add59379d7c7b0890e070e8850a
-  data.tar.gz: 6f649c427896f5010b9721ffd3a0e0c9f282f6eb6c65c666cdbd2487aab6132175a7660b7e48bc89cbe1133736ac4a79d9911f053bb481193096f6032220e6c9
+  metadata.gz: ed5e0daf589b941e3fdf81c9afb1b82f92d499694b4d887f29c3562c1d3161b4ad96a1dcb37b16467b27bc94e66a2601862ce0aa88e4f58b02d99848e2e2a6e3
+  data.tar.gz: 7a6cad2d2ff14437be085b01b78b1292dd14a464de5b27a2da662db19699050da4dbe7de3fbe7a6feac61d6032093db39a01ea38e862fe574ef8e6d85cbc5ab5

data/app/pb_kits/playbook/index.js

@@ -93,7 +93,7 @@ export { default as StarRating } from './pb_star_rating/_star_rating'
 export { default as StatChange } from './pb_stat_change/_stat_change'
 export { default as StatValue } from './pb_stat_value/_stat_value'
 export { default as Table } from './pb_table/_table'
-export { default as TableRow } from './pb_table/_table_row'
+export { default as TableRow } from './pb_table/subcomponents/_table_row'
 export { default as TextInput } from './pb_text_input/_text_input'
 export { default as Textarea } from './pb_textarea/_textarea'
 export { default as Time } from './pb_time/_time'

data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx

@@ -11,7 +11,12 @@ const CollapsibleTrail = ({ leftOffset }: { leftOffset: number }) => {
     backgroundColor: "#E4E8F0",
   }
 
-  return <div style={style} />
+  return (
+    <div 
+        className="collapsible-trail" 
+        style={style} 
+    />
+  )
 }
 
 // Updated function to render multiple trails depending on depth

data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx

@@ -22,11 +22,14 @@ export const CustomCell = ({
   row,
   value,
 }: CustomCellProps & GlobalProps) => {
-  const { setExpanded, expanded, inlineRowLoading } = useContext(AdvancedTableContext);
+  const { setExpanded, expanded, expandedControl, inlineRowLoading } = useContext(AdvancedTableContext);
 
   const handleOnExpand = (row: Row<DataType>) => {
     onRowToggleClick && onRowToggleClick(row);
-    setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
+    
+    if (!expandedControl) {
+      setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
+    }
   };
   const RowHasChildren = row.original.children ? true : false
   const renderButton = inlineRowLoading ? RowHasChildren : row.getCanExpand()

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx

@@ -15,6 +15,7 @@ import { DataType } from "../Utilities/types"
 type TableBodyProps = {
   className?: string;
   collapsibleTrail?: boolean
+  dark?: boolean,
   id?: string;
   subRowHeaders?: string[]
 }
@@ -22,6 +23,7 @@ type TableBodyProps = {
 export const TableBody = ({
   className,
   collapsibleTrail = true,
+  dark = false,
   id,
   subRowHeaders,
   ...props

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx

@@ -10,6 +10,7 @@ import { DataType } from "../Utilities/types"
 type TableHeaderProps = {
   children?: React.ReactNode | React.ReactNode[]
   className?: string
+  dark?: boolean,
   enableSorting?: boolean
   id?: string;
   sortIcon?: string | string[]
@@ -18,6 +19,7 @@ type TableHeaderProps = {
 export const TableHeader = ({
   children,
   className,
+  dark = false,
   enableSorting = false,
   id,
   sortIcon = ["arrow-up-short-wide", "arrow-down-short-wide"],

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -95,4 +95,49 @@
       border-right: $transparent !important;
     }
   }
+
+  &.dark {
+    .bg-white {
+      background: $bg_dark_card;
+    }
+
+    .bg-silver {
+      background: $bg_dark;
+    }
+
+    .table-header-cells:first-child, td:first-child {
+      box-shadow: 1px 0px 0px 0px $border_dark !important;
+    }
+
+    .collapsible-trail {
+      background-color: $border_dark !important;
+    }
+
+    .sort-button-icon, .header-sort-button > div {
+      color: $white !important;
+    }
+
+    .gray-icon {
+      color:  $text_dk_light !important;
+    }
+
+    .sticky-header {
+      background-color: $bg_dark_card;
+    }
+
+    .loading-toggle-icon,
+    .loading-cell {
+      &::after {
+        background-color: $bg_dark !important;
+        background-image: linear-gradient(
+          to left,
+          $bg_dark 0%,
+          lighten($bg_dark, 1%) 50%,
+          lighten($bg_dark, 2%) 60%,
+          $bg_dark 80%,
+          $bg_dark 100%
+        ) !important;
+      }
+    }
+  }
 }

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -27,6 +27,7 @@ type AdvancedTableProps = {
   children?: React.ReactNode | React.ReactNode[];
   className?: string;
   columnDefinitions: DataType[];
+  dark?: boolean,
   data?: { [key: string]: string };
   enableToggleExpansion?: "all" | "header" | "none";
   expandedControl?: DataType;
@@ -50,6 +51,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     children,
     className,
     columnDefinitions,
+    dark = false,
     data = {},
     enableToggleExpansion = "header",
     expandedControl,
@@ -220,6 +222,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             columnDefinitions,
             enableToggleExpansion,
             expanded,
+            expandedControl,
             handleExpandOrCollapse,
             inlineRowLoading,
             loading,
@@ -231,6 +234,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       >
         <Table
             className={`${loading ? "content-loading" : ""}`}
+            dark={dark}
             dataTable
             numberSpacing="tabular"
             responsive="none"

data/app/pb_kits/playbook/pb_date/docs/_date_alignment_swift.md

@@ -1,11 +1,31 @@
 ![date-alignment](https://github.com/powerhome/playbook/assets/92755007/094761cb-5151-4de5-a8e1-f905455c2aca)
 
 ```swift
-
-VStack(spacing: Spacing.small) {
-  PBDate(Date(), variant: .standard, typography: .title4, alignment: .leading)
-  PBDate(Date(), variant: .withIcon(isStandard: true), typography: .title4, iconSize: .x1, alignment: .center)
-  PBDate(Date(), variant: .short, typography: .title4, alignment: .trailing)
+ VStack(spacing: Spacing.small) {
+  HStack {
+    PBDate(
+      Date().makeDate(year: 1995, month: 12, day: 25),
+      variant: .standard,
+      typography: .title4
+    )
+  }
+  .frame(maxWidth: .infinity, alignment: .leading)
+  HStack {
+    PBDate(
+      Date().makeDate(year: 2020, month: 12, day: 25),
+      variant: .withIcon(isStandard: true),
+      typography: .title4,
+      iconSize: .x1
+    )
+  }
+  .frame(maxWidth: .infinity, alignment: .center)
+  HStack {
+    PBDate(
+    Date(),
+    variant: .short,
+    typography: .title4
+   )
+  }
+  .frame(maxWidth: .infinity, alignment: .trailing)
 }
-
 ```

data/app/pb_kits/playbook/pb_date/docs/_date_default_swift.md

@@ -2,15 +2,34 @@
 
 
 ```swift
-
 VStack(alignment: .leading, spacing: Spacing.small) {
-  PBDate(Date(), variant: .short)
-  PBDate(Date(), variant: .dayDate)
-  PBDate(Date(), variant: .standard)
+  PBDate(
+    Date(),
+    variant: .short
+  )
+  PBDate(
+    Date().makeDate(year: 2012, month: 8, day: 3),
+    variant: .standard
+  )
+  PBDate(
+    Date().makeDate(year: 2017, month: 12, day: 3),
+    variant: .dayDate(showYear: true)
+  )
   Spacer()
-  PBDate(Date(), variant: .short, typography: .title4)
-  PBDate(Date(), variant: .dayDate, typography: .title4)
-  PBDate(Date(), variant: .standard, typography: .title4)
+  PBDate(
+    Date(),
+    variant: .short, 
+    typography: .title4
+  )
+  PBDate(
+    Date().makeDate(year: 2012, month: 8, day: 3),
+    variant: .standard, 
+    typography: .title4
+  )
+  PBDate(
+    Date().makeDate(year: 2017, month: 12, day: 3),
+    variant: .dayDate(showYear: true),
+    typography: .title4
+  )
 }
-
 ```

data/app/pb_kits/playbook/pb_message/docs/_description.md

@@ -1 +1 @@
-This multi kit consist of a an avatar, a status, a caption, a body text, and a time stamp. All which can be optional.
+This multi kit consists of a an avatar, a status, a caption, a body text, and a time stamp, all of which are optional.

data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss

@@ -40,6 +40,10 @@
     &[class*="_active"] {
       color: $primary;
       letter-spacing: normal;
+
+      [class*="_icon_right"] {
+        color: $white;
+      }
     }
     &[class*="dark"] {
       [class*="_item_text"],

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -3,6 +3,13 @@ import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import PbTable from '.'
+import {
+  TableHead,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableCell,
+} from "./subcomponents";
 
 type TableProps = {
     aria?: { [key: string]: string },
@@ -105,4 +112,10 @@ const Table = (props: TableProps) => {
     )
 }
 
+Table.Head = TableHead
+Table.Header = TableHeader
+Table.Body = TableBody
+Table.Row = TableRow
+Table.Cell = TableCell
+
 export default Table

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

@@ -1,7 +1,6 @@
 import React from 'react'
 
 import Table from '../_table'
-import TableRow from '../_table_row'
 
 const TableSideHighlight = (props) => {
   return (
@@ -20,7 +19,7 @@ const TableSideHighlight = (props) => {
           </tr>
         </thead>
         <tbody>
-          <TableRow
+          <Table.Row
               sideHighlightColor="product_1_highlight"
               {...props}
           >
@@ -29,8 +28,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="product_2_highlight"
               {...props}
           >
@@ -39,8 +38,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="product_3_highlight"
               {...props}
           >
@@ -49,8 +48,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="none"
               {...props}
           >
@@ -59,7 +58,7 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
+          </Table.Row>
         </tbody>
       </Table>
 
@@ -79,7 +78,7 @@ const TableSideHighlight = (props) => {
           </tr>
         </thead>
         <tbody>
-          <TableRow
+          <Table.Row
               sideHighlightColor="success"
               {...props}
           >
@@ -88,8 +87,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="warning"
               {...props}
           >
@@ -98,8 +97,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="error"
               {...props}
           >
@@ -108,8 +107,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="none"
               {...props}
           >
@@ -118,7 +117,7 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
+          </Table.Row>
         </tbody>
       </Table>
 
@@ -138,7 +137,7 @@ const TableSideHighlight = (props) => {
           </tr>
         </thead>
         <tbody>
-          <TableRow
+          <Table.Row
               sideHighlightColor="category_1"
               {...props}
           >
@@ -147,8 +146,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="category_2"
               {...props}
           >
@@ -157,8 +156,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="category_3"
               {...props}
           >
@@ -167,8 +166,8 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
-          <TableRow
+          </Table.Row>
+          <Table.Row
               sideHighlightColor="none"
               {...props}
           >
@@ -177,7 +176,7 @@ const TableSideHighlight = (props) => {
             <td>{'Value 3'}</td>
             <td>{'Value 4'}</td>
             <td>{'Value 5'}</td>
-          </TableRow>
+          </Table.Row>
         </tbody>
       </Table>
     </div>

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

@@ -0,0 +1,47 @@
+import React from 'react'
+
+import Table from '../_table'
+
+const TableWithSubcomponents = (props) => {
+  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.Row>
+      </Table.Head>
+      <Table.Body>
+        <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.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.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.Row>
+      </Table.Body>
+    </Table>
+  )
+}
+
+export default TableWithSubcomponents

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

@@ -0,0 +1,7 @@
+You can optionally build your table using our sub-components, which map to their respective html table elements:
+
+`Table.Head` = `thead`
+`Table.Body` = `tbody`
+`Table.Row` = `tr`
+`Table.Header` = `th`
+`Table.Cell` = `td`

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

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

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

@@ -0,0 +1,48 @@
+import React from 'react'
+
+import Table from '../_table'
+
+const TableWithSubcomponentsAsDivs = (props) => {
+  return (
+    <Table
+        size="sm"
+        tag="div"
+        {...props}
+    >
+      <Table.Head tag="div">
+        <Table.Row tag="div">
+          <Table.Header tag="div">{'Column 1'}</Table.Header>
+          <Table.Header tag="div">{'Column 2'}</Table.Header>
+          <Table.Header tag="div">{'Column 3'}</Table.Header>
+          <Table.Header tag="div">{'Column 4'}</Table.Header>
+          <Table.Header tag="div">{'Column 5'}</Table.Header>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body tag="div">
+        <Table.Row tag="div">
+          <Table.Cell tag="div">{'Value 1'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 2'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 3'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 4'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 5'}</Table.Cell>
+        </Table.Row>
+        <Table.Row tag="div">
+          <Table.Cell tag="div">{'Value 1'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 2'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 3'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 4'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 5'}</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell tag="div">{'Value 1'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 2'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 3'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 4'}</Table.Cell>
+          <Table.Cell tag="div">{'Value 5'}</Table.Cell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  )
+}
+
+export default TableWithSubcomponentsAsDivs

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

@@ -0,0 +1,3 @@
+Optionally build your table with divs by passing `div` to the `tag` prop of all* your sub-components. 
+
+*NOTE: The `tag` prop defaults to `table`, which returns html elements.  If divs are desired, sub-components must be used and all table elements, including the initial kit call, must use `div` as their `tag` in order for the table to render properly.

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

@@ -0,0 +1,34 @@
+<%= 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"}) %>       
+         <% 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") 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") 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_with_subcomponents_rails.md

@@ -0,0 +1,7 @@
+You can optionally build your table using our sub-components, which map to their respective html table elements:
+
+`table_head` = `thead`
+`table_body` = `tbody`
+`table_row` = `tr`
+`table_header` = `th`
+`table_cell` = `td`