playbook_ui 13.20.0 → 13.21.0.pre.alpha.PBNTR224letuserresetrowexpansion2441

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

@@ -1,6 +1,5 @@
 examples:
   rails:
-    # - table_div: Div
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large
@@ -25,9 +24,11 @@ examples:
     - table_with_background_kit: Table With Background Kit
     - table_vertical_border: Vertical Borders
     - table_striped: Striped Table
+    - table_with_subcomponents_rails: Table with Sub Components (Table Elements)
+    - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
+
 
   react:
-    # - table_div: Div
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large
@@ -51,3 +52,6 @@ examples:
     - table_with_background_kit: Table With Background Kit
     - table_vertical_border: Vertical Borders
     - table_striped: Striped Table
+    - table_with_subcomponents: Table with Sub Components (Table Elements)
+    - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
+

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

@@ -22,3 +22,5 @@ export { default as TableWithBackgroundKit } from './_table_with_background_kit.
 export { default as TableVerticalBorder } from './_table_vertical_border.jsx'
 export { default as TableStriped } from './_table_striped.jsx'
 export { default as TableDiv } from './_table_div.jsx'
+export { default as TableWithSubcomponents } from './_table_with_subcomponents.jsx'
+export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'

data/app/pb_kits/playbook/pb_table/styles/_striped.scss

@@ -1,7 +1,7 @@
 [class^=pb_table] {
   &.striped {
     tbody, .pb_table_tbody {
-      tr:nth-child(odd), .tr:nth-child(odd) {
+      tr:nth-child(odd), .pb_table_tr:nth-child(odd) {
         background-color: $bg_light;
       }
     }
@@ -10,7 +10,7 @@
   &.dark {
     &.striped {
       tbody, .pb_table_tbody {
-        tr:nth-child(odd), .tr:nth-child(odd) {
+        tr:nth-child(odd), .pb_table_tr:nth-child(odd) {
           background-color: $bg_dark;
         }
       }

data/app/pb_kits/playbook/pb_table/styles/_structure.scss

@@ -48,7 +48,8 @@
         }
       }
       &.data_table {
-        thead tr th {
+        thead tr th,
+        .pb_table_thead .pb_table_tr .pb_table_th {
           padding-top: $cell-pad-sm;
           padding-bottom: $cell-pad-sm;
           &:first-child {
@@ -58,7 +59,8 @@
             padding-right: $cell-pad-sm;
           }
         }
-        tbody tr td {
+        tbody tr td,
+        .pb_table_tbody .pb_table_tr .pb_table_td  {
           padding-top: $cell-pad-sm;
           padding-bottom: $cell-pad-sm;
           &:first-child {

data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import classnames from "classnames";
+import {
+  buildAriaProps,
+  buildDataProps,
+  buildHtmlProps,
+} from "../../utilities/props";
+import { globalProps } from "../../utilities/globalProps";
+
+type TableBodyPropTypes = {
+  aria?: { [key: string]: string };
+  children: React.ReactNode[] | React.ReactNode;
+  className: string;
+  data?: { [key: string]: string };
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
+  id?: string;
+  tag?: "table" | "div";
+};
+
+const TableBody = (props: TableBodyPropTypes) => {
+  const {
+    aria = {},
+    children,
+    className,
+    data = {},
+    htmlOptions = {},
+    id,
+    tag = "table",
+  } = props;
+
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
+  const classes = classnames("pb_table_tbody", globalProps(props), className);
+  const isTableTag = tag === "table";
+
+  return (
+    <>
+      {isTableTag ? (
+        <tbody
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            id={id}
+        >
+          {children}
+        </tbody>
+      ) : (
+        <div
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            id={id}
+        >
+          {children}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default TableBody;

data/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import classnames from "classnames";
+import {
+  buildAriaProps,
+  buildDataProps,
+  buildHtmlProps,
+} from "../../utilities/props";
+import { globalProps } from "../../utilities/globalProps";
+
+type TableCellPropTypes = {
+  aria?: { [key: string]: string };
+  children: React.ReactNode[] | React.ReactNode;
+  className: string;
+  data?: { [key: string]: string };
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
+  id?: string;
+  tag?: "table" | "div";
+  text?: string
+};
+
+const TableCell = (props: TableCellPropTypes) => {
+  const {
+    aria = {},
+    children,
+    className,
+    data = {},
+    htmlOptions = {},
+    id,
+    tag = "table",
+    text,
+  } = props;
+
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
+  const classes = classnames("pb_table_td", globalProps(props), className);
+  const isTableTag = tag === "table";
+
+  return (
+    <>
+      {isTableTag ? (
+        <td
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            id={id}
+        >
+          {text || children}
+        </td>
+      ) : (
+        <div
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            id={id}
+        >
+          {text || children}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default TableCell;

data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import classnames from "classnames";
+import {
+  buildAriaProps,
+  buildDataProps,
+  buildHtmlProps,
+} from "../../utilities/props";
+import { globalProps } from "../../utilities/globalProps";
+
+type TableHeadPropTypes = {
+  aria?: { [key: string]: string };
+  children: React.ReactNode[] | React.ReactNode;
+  className: string;
+  data?: { [key: string]: string };
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
+  id?: string;
+  tag?: "table" | "div";
+};
+
+const TableHead = (props: TableHeadPropTypes) => {
+  const {
+    aria = {},
+    children,
+    className,
+    data = {},
+    htmlOptions = {},
+    id,
+    tag = "table",
+  } = props;
+
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
+  const classes = classnames("pb_table_thead", globalProps(props), className);
+  const isTableTag = tag === "table";
+
+  return (
+    <>
+      {isTableTag ? (
+        <thead
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            id={id}
+        >
+          {children}
+        </thead>
+      ) : (
+        <div
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            id={id}
+        >
+          {children}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default TableHead;

data/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import classnames from "classnames";
+import {
+  buildAriaProps,
+  buildDataProps,
+  buildHtmlProps,
+} from "../../utilities/props";
+import { globalProps } from "../../utilities/globalProps";
+
+type TableHeaderPropTypes = {
+  aria?: { [key: string]: string };
+  children: React.ReactNode[] | React.ReactNode;
+  className: string;
+  data?: { [key: string]: string };
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
+  id?: string;
+  tag?: "table" | "div";
+  text?: string;
+};
+
+const TableHeader = (props: TableHeaderPropTypes) => {
+  const {
+    aria = {},
+    children,
+    className,
+    data = {},
+    htmlOptions = {},
+    id,
+    tag = "table",
+    text
+  } = props;
+
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
+  const classes = classnames("pb_table_th", globalProps(props), className);
+  const isTableTag = tag === "table";
+
+  return (
+    <>
+      {isTableTag ? (
+        <th
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            id={id}
+        >
+          {text || children}
+        </th>
+      ) : (
+        <div
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            id={id}
+        >
+          {text || children}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default TableHeader;

data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import classnames from "classnames";
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+  buildHtmlProps,
+} from "../../utilities/props";
+import { globalProps } from "../../utilities/globalProps";
+
+type TableRowPropTypes = {
+  aria?: { [key: string]: string };
+  children: React.ReactNode[] | React.ReactNode;
+  className: string;
+  data?: { [key: string]: string };
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
+  id?: string;
+  sideHighlightColor: string;
+  tag?: "table" | "div";
+};
+
+const TableRow = (props: TableRowPropTypes) => {
+  const {
+    aria = {},
+    children,
+    className,
+    data = {},
+    htmlOptions = {},
+    id,
+    sideHighlightColor = "none",
+    tag = "table",
+  } = props;
+
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
+  const sideHighlightClass =
+    sideHighlightColor != "" ? `side_highlight_${sideHighlightColor}` : null;
+  const classes = classnames(
+    buildCss("pb_table_row_kit", sideHighlightClass),
+    "pb_table_tr",
+    globalProps(props),
+    className
+  );
+  const isTableTag = tag === "table";
+
+  return (
+    <>
+      {isTableTag ? (
+        <tr
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            id={id}
+        >
+          {children}
+        </tr>
+      ) : (
+        <div
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            id={id}
+        >
+          {children}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default TableRow;

data/app/pb_kits/playbook/pb_table/subcomponents/index.tsx

@@ -0,0 +1,5 @@
+export { default as TableHead } from './_table_head';
+export { default as TableHeader } from './_table_header';
+export { default as TableBody } from './_table_body';
+export { default as TableRow } from './_table_row';
+export { default as TableCell } from './_table_cell';

data/app/pb_kits/playbook/pb_table/table.test.js

@@ -1,7 +1,58 @@
-import { ensureAccessible, renderKit } from "../utilities/test-utils"
+import React from "react";
+import { ensureAccessible, renderKit, render, screen } from "../utilities/test-utils"
 
 import Table from "./_table"
 
+const DivsTable = () => {
+  return (
+    <>
+      <Table 
+          data={{testid: "table"}}
+          size="sm" 
+          tag="div"
+      >
+        <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.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.Row>
+        </Table.Body>
+      </Table>
+    </>
+  );
+};
+
+const TableTagTable = () => {
+  return (
+    <>
+      <Table 
+          data={{testid: "table"}}
+          size="sm" 
+      >
+        <Table.Head>
+          <Table.Row>
+            <Table.Header>{"Column 1"}</Table.Header>
+            <Table.Header>{"Column 2"}</Table.Header>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>{"Value 1"}</Table.Cell>
+            <Table.Cell>{"Value 2"}</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+    </>
+  );
+};
+
+
 const props = {
   data: { testid: "table" },
   sticky: false
@@ -20,3 +71,93 @@ test("when striped is true", () => {
   const kit = renderKit(Table, props, { striped: true })
   expect(kit).toHaveClass("pb_table table-sm table-responsive-collapse table-card striped table-collapse-sm")
 })
+
+test("Renders Table.Head subkit for Div Table", () => {
+  render (<DivsTable/>)
+
+  const kit = screen.getByTestId("table")
+  const head = kit.querySelector(".pb_table_thead")
+  expect(head).toBeInTheDocument()
+  expect(head.tagName).toBe("DIV")
+})
+
+test("Renders Table.Header subkit for Div Table", () => {
+  render (<DivsTable/>)
+
+  const kit = screen.getByTestId("table")
+  const head = kit.querySelector(".pb_table_th")
+  expect(head).toBeInTheDocument()
+  expect(head.tagName).toBe("DIV")
+})
+
+test("Renders Table.Body subkit for Div Table", () => {
+  render (<DivsTable/>)
+
+  const kit = screen.getByTestId("table")
+  const head = kit.querySelector(".pb_table_tbody")
+  expect(head).toBeInTheDocument()
+  expect(head.tagName).toBe("DIV")
+})
+
+test("Renders Table.Row subkit for Div Table", () => {
+  render (<DivsTable/>)
+
+  const kit = screen.getByTestId("table")
+  const head = kit.querySelector(".pb_table_tr")
+  expect(head).toBeInTheDocument()
+  expect(head.tagName).toBe("DIV")
+})
+
+test("Renders Table.Cell subkit for Div Table", () => {
+  render (<DivsTable/>)
+
+  const kit = screen.getByTestId("table")
+  const head = kit.querySelector(".pb_table_td")
+  expect(head).toBeInTheDocument()
+  expect(head.tagName).toBe("DIV")
+})
+
+test("Renders Table.Head subkit for HTML Table elements Table", () => {
+  render (<TableTagTable/>)
+
+  const kit = screen.getByTestId("table")
+  const head = kit.querySelector(".pb_table_thead")
+  expect(head).toBeInTheDocument()
+  expect(head.tagName).toBe("THEAD")
+})
+
+test("Renders Table.Header subkit for HTML Table elements Table", () => {
+  render (<TableTagTable/>)
+
+  const kit = screen.getByTestId("table")
+  const head = kit.querySelector(".pb_table_th")
+  expect(head).toBeInTheDocument()
+  expect(head.tagName).toBe("TH")
+})
+
+test("Renders Table.Body subkit for HTML Table elements Table", () => {
+  render (<TableTagTable/>)
+
+  const kit = screen.getByTestId("table")
+  const head = kit.querySelector(".pb_table_tbody")
+  expect(head).toBeInTheDocument()
+  expect(head.tagName).toBe("TBODY")
+})
+
+test("Renders Table.Row subkit for HTML Table elements Table", () => {
+  render (<TableTagTable/>)
+
+  const kit = screen.getByTestId("table")
+  const head = kit.querySelector(".pb_table_tr")
+  expect(head).toBeInTheDocument()
+  expect(head.tagName).toBe("TR")
+})
+
+test("Renders Table.Cell subkit for HTML Table elements Table", () => {
+  render (<TableTagTable/>)
+
+  const kit = screen.getByTestId("table")
+  const head = kit.querySelector(".pb_table_td")
+  expect(head).toBeInTheDocument()
+  expect(head.tagName).toBe("TD")
+})

data/app/pb_kits/playbook/pb_table/table_body.html.erb

@@ -0,0 +1,17 @@
+<% if object.tag == "table" %>
+    <%= content_tag(:tbody,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) do %>
+      <%= content.presence %>
+    <% end %>
+<% else %>
+    <%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) do %>
+      <%= content.presence %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/table_body.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTable
+    class TableBody < Playbook::KitBase
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[table div],
+                 default: "table"
+
+      def classname
+        generate_classname("pb_table_tbody")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_table/table_cell.html.erb

@@ -0,0 +1,17 @@
+<% if object.tag == "table" %>
+    <%= content_tag(:td,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) do %>
+      <%= content.presence || object.text %>
+    <% end %>
+<% else %>
+    <%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) do %>
+      <%= content.presence || object.text %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/table_cell.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTable
+    class TableCell < Playbook::KitBase
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[table div],
+                 default: "table"
+      prop :text, type: Playbook::Props::String,
+                  default: ""
+
+      def classname
+        generate_classname("pb_table_td")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_table/table_head.html.erb

@@ -0,0 +1,17 @@
+<% if object.tag == "table" %>
+    <%= content_tag(:thead,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) do %>
+      <%= content.presence %>
+    <% end %>
+<% else %>
+    <%= content_tag(:div,
+      aria: object.aria,
+      class: object.classname,
+      data: object.data,
+      id: object.id) do %>
+      <%= content.presence %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/table_head.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbTable
+    class TableHead < Playbook::KitBase
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[table div],
+                 default: "table"
+
+      def classname
+        generate_classname("pb_table_thead")
+      end
+    end
+  end
+end