playbook_ui 13.20.0.pre.alpha.PBNTR225advancedtablefeedback2375 → 13.20.0.pre.alpha.play1247htmloptions2403

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.html.erb

@@ -4,7 +4,8 @@
       aria: object.aria,
       class: object.classname,
       data: object.data,
-      id: object.id) do %>
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
   <% else %>
@@ -12,7 +13,8 @@
       aria: object.aria,
       class: object.classname,
       data: object.data,
-      id: object.id) do %>
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
   <% end %>

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

@@ -3,7 +3,8 @@
       aria: object.aria,
       class: object.classname,
       data: object.data,
-      id: object.id) do %>
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
 <% else %>
@@ -11,7 +12,8 @@
       aria: object.aria,
       class: object.classname,
       data: object.data,
-      id: object.id) do %>
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
-<% end %>
+<% end %>

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

@@ -3,7 +3,8 @@
       aria: object.aria,
       class: object.classname,
       data: object.data,
-      id: object.id) do %>
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence || object.text %>
     <% end %>
 <% else %>
@@ -11,7 +12,8 @@
       aria: object.aria,
       class: object.classname,
       data: object.data,
-      id: object.id) do %>
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence || object.text %>
     <% end %>
-<% end %>
+<% end %>

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

@@ -3,7 +3,8 @@
       aria: object.aria,
       class: object.classname,
       data: object.data,
-      id: object.id) do %>
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
 <% else %>
@@ -11,7 +12,8 @@
       aria: object.aria,
       class: object.classname,
       data: object.data,
-      id: object.id) do %>
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
-<% end %>
+<% end %>

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

@@ -4,7 +4,8 @@
       aria: object.aria,
       class: object.classname,
       data: object.data,
-      id: "pb-th#{object.id}" ) do %>
+      id: "pb-th#{object.id}",
+      **combined_html_options) do %>
     <% unless sorting_style? %>
       <%= pb_rails("flex", props:{ align: object.align_content, justify: object.justify_sort_icon, classname: "pb_th_nolink" }) do %>
         <%= content.presence || object.text %>
@@ -51,7 +52,8 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
       <%= content.presence || object.text %>
   <% end %>
-<% end %>
+<% end %>

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

@@ -3,7 +3,8 @@
       aria: object.aria,
       class: object.classname,
       data: object.data,
-      id: object.id) do %>
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
 <% else %>
@@ -11,7 +12,8 @@
       aria: object.aria,
       class: object.classname,
       data: object.data,
-      id: object.id) do %>
+      id: object.id,
+      **combined_html_options) do %>
       <%= content.presence %>
     <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_text_input/text_input.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
     aria: object.aria,
     class: object.classname,
-    data: object.data) do %>
+    data: object.data,
+    **combined_html_options) do %>
   <% if object.label.present? %>
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
   <% end %>

data/app/pb_kits/playbook/pb_textarea/textarea.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
   <% if object.label.present? %>
     <%= pb_rails("caption", props: {text: object.label, dark: object.dark}) %>
   <% end %>

data/app/pb_kits/playbook/pb_time/time.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
   <%
     # convert deprecated prop values
     size = object.size

data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
       <div class="pb_time_range_inline_wrapper">
         <% if object.icon == true %>
           <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "clock", dark: object.dark, classname:"pb_time_range_inline_icon", fixed_width: true, size: object.size }) }) %>
@@ -13,4 +14,4 @@
           <%= pb_rails(object.text_kit, props: { tag: "span", color: object.text_timezone_color, classname:"pb_time_range_inline_timezone", text: object.pb_date_end_time.to_timezone.upcase }) %>
         <% end %>
       </div>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
 
     <%= pb_rails("body", props: { color: "light", dark: object.dark, classname: "pb_time_stacked time-spacing" }) do %>
       <time>

data/app/pb_kits/playbook/pb_timeline/item.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
   id: object.id,
   data: object.data,
-  class: object.classname) do %>
+  class: object.classname,
+  **combined_html_options) do %>
 
   <div class="pb_timeline_item_left_block">
     <% if object.date.present? %>

data/app/pb_kits/playbook/pb_timeline/timeline.html.erb

@@ -1,6 +1,7 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb

@@ -2,7 +2,8 @@
   aria: object.aria,
   id: object.id,
   data: object.data,
-  class: object.classname) do %>
+  class: object.classname,
+  **combined_html_options) do %>
 
   <% if object.unstyled %>
     <div><%= object.timestamp_text %></div>

data/app/pb_kits/playbook/pb_title/title.html.erb

@@ -2,5 +2,6 @@
     aria: object.aria,
     id: object.id,
     data: object.data,
-    class: object.classname) do %><%= content.presence || object.text %><% end %>
-    
+    class: object.classname,
+    **combined_html_options) do %><%= content.presence || object.text %><% end %>
+    

data/app/pb_kits/playbook/pb_title_count/title_count.html.erb

@@ -2,7 +2,8 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
   <%= pb_rails("title", props: {
     dark: object.dark,
     size: object.title_size,

data/app/pb_kits/playbook/pb_title_detail/title_detail.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
   <%= pb_rails("title", props: { text: object.title, size: 4 }) %>
   <%= pb_rails("body", props: { text: object.detail, color: "light" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_toggle/toggle.html.erb

@@ -2,7 +2,8 @@
     id: object.id,
     data: object.data,
     aria: object.aria,
-    class: object.classname) do %>
+    class: object.classname,
+    **combined_html_options) do %>
   <label class="pb_toggle_wrapper">
     <%= content.presence || object.input %>
     <div class="pb_toggle_control"></div>

data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb

@@ -1,7 +1,8 @@
 <%= content_tag(:div,
   id: object.id,
   data: object.data,
-  class: object.classname) do %>
+  class: object.classname,
+  **combined_html_options) do %>
   <div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip">
     <%= content.presence %>
     <div class="arrow" id="<%= object.tooltip_id %>-arrow"></div>

data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb

@@ -4,7 +4,8 @@
   <%= content_tag(:div,
                 id: object.id,
                 data: object.data,
-                class: object.classname + object.inline_class) do %>
+                class: object.classname + object.inline_class,
+                **combined_html_options) do %>
     <div class="pb_typeahead_wrapper">
       <div class="pb_typeahead_loading_indicator" data-pb-typeahead-kit-loading-indicator>
         <%= pb_rails("icon", props: {

data/app/pb_kits/playbook/pb_user/user.html.erb

@@ -2,7 +2,8 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
   <% if object.avatar_url.present? || object.avatar %>
     <%= pb_rails("avatar", props: {
       name: object.name,

data/app/pb_kits/playbook/pb_user_badge/user_badge.html.erb

@@ -2,6 +2,7 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
   <%= content_tag(:div, object.display_badge, class: "pb_user_badge_wrapper") %>
 <% end %>

data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb

@@ -2,7 +2,8 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id) do %>
+    id: object.id,
+    **combined_html_options) do %>
     <%= pb_rails("caption", props: {dark: object.dark, text: object.day_of_week}) %>
     <%= pb_rails("title", props: {dark: object.dark, size: 4, tag: "span", text: object.formatted_month_and_day}) %>
 <% end %>