Add footerexperiment

packages/braid-design-system/src/lib/components/Table/Table.css.ts

@@ -97,6 +97,11 @@ globalStyle(`${table} > tbody > tr:last-of-type > *`, {
   borderBottom: 0,
 });
 
+// export const borderTopFooter = style({});
+// globalStyle(`${table} > tfoot > *:first-of-type > *${borderTopFooter}`, {
+//   borderTop: `${vars.borderWidth.standard} solid ${borderColor}`,
+// });
+
 export const showOnTablet = style(
   responsiveStyle({ tablet: { display: 'table-cell' } }),
 );

packages/braid-design-system/src/lib/components/Table/TableCell.tsx

@@ -9,6 +9,7 @@ import {
 } from '../../utils/resolveResponsiveRangeProps';
 import {
   TableContext,
+  TableFooterContext,
   TableHeaderContext,
   TableRowContext,
 } from './TableContext';
@@ -52,6 +53,7 @@ export const TableCell = ({
     });
 
   const tableHeaderContext = useContext(TableHeaderContext);
+  const tableFooterContext = useContext(TableFooterContext);
   const tableRowContext = useContext(TableRowContext);
   const tableContext = useContext(TableContext);
 
@@ -64,6 +66,7 @@ export const TableCell = ({
 
   const isHeaderCell =
     typeof header !== 'undefined' ? header : tableHeaderContext;
+  const isFooterCell = tableFooterContext;
 
   const softWidth = width === 'content' ? '1%' : width;
   const hasMaxWidth = typeof maxWidth !== 'undefined';
@@ -97,6 +100,7 @@ export const TableCell = ({
         [styles.maxWidth]: hasMaxWidth,
         [styles.alignYCenter]: tableContext.alignY === 'center',
         [styles.borderBottom]: true,
+        // [styles.borderTopFooter]: isFooterCell,
         [styles.showOnTablet]: !hideOnTablet && hideOnMobile,
         [styles.showOnDesktop]:
           !hideOnDesktop && (hideOnTablet || hideOnMobile),
@@ -114,7 +118,7 @@ export const TableCell = ({
     >
       <DefaultTextPropsProvider
         size="small"
-        weight={isHeaderCell ? 'strong' : undefined}
+        weight={isHeaderCell || isFooterCell ? 'strong' : undefined}
         maxLines={hasMaxWidth && !wrap ? 1 : undefined}
       >
         {align !== 'left' ? (

packages/braid-design-system/src/lib/components/Table/TableContext.tsx

@@ -10,4 +10,5 @@ export const TableContext = createContext<
 >(false);
 export const TableHeaderContext = createContext(false);
 export const TableBodyContext = createContext(false);
+export const TableFooterContext = createContext(false);
 export const TableRowContext = createContext(false);

packages/braid-design-system/src/lib/components/Table/TableFooter.tsx

@@ -0,0 +1,37 @@
+import assert from 'assert';
+import { useContext, type ReactNode } from 'react';
+// import { TableRow } from './TableRow';
+import { TableContext, TableFooterContext } from './TableContext';
+import buildDataAttributes, {
+  type DataAttributeMap,
+} from '../private/buildDataAttributes';
+
+// import * as styles from './Table.css';
+
+interface TableHeaderProps {
+  children: ReactNode;
+  data?: DataAttributeMap;
+}
+
+export const TableFooter = ({
+  children,
+  data,
+  ...restProps
+}: TableHeaderProps) => {
+  const tableContext = useContext(TableContext);
+
+  assert(tableContext, 'TableFooter must be used within a Table component');
+
+  return (
+    <TableFooterContext.Provider value={true}>
+      <tfoot
+        // className={
+        // tableContext.fullBleed ? undefined : styles.tableHeaderRounding
+        // }
+        {...buildDataAttributes({ data, validateRestProps: restProps })}
+      >
+        {children}
+      </tfoot>
+    </TableFooterContext.Provider>
+  );
+};

packages/braid-design-system/src/lib/components/Table/TableRow.tsx

@@ -5,6 +5,7 @@ import {
   TableHeaderContext,
   TableContext,
   TableBodyContext,
+  TableFooterContext,
 } from './TableContext';
 import buildDataAttributes, {
   type DataAttributeMap,
@@ -19,6 +20,7 @@ export const TableRow = ({ children, data, ...restProps }: TableRowProps) => {
   const tableContext = useContext(TableContext);
   const tableHeaderContext = useContext(TableHeaderContext);
   const tableBodyContext = useContext(TableBodyContext);
+  const tableFooterContext = useContext(TableFooterContext);
   const tableRowContext = useContext(TableRowContext);
 
   assert(tableContext, 'TableRow must be used within a Table component');
@@ -31,7 +33,7 @@ export const TableRow = ({ children, data, ...restProps }: TableRowProps) => {
   );
 
   assert(
-    tableBodyContext || tableHeaderContext,
+    tableBodyContext || tableHeaderContext || tableFooterContext,
     'TableRow must be used within a TableBody component',
   );
 

packages/braid-design-system/src/lib/components/index.ts

@@ -72,6 +72,7 @@ export { Strong } from './Strong/Strong';
 export { Table } from './Table/Table';
 export { TableBody } from './Table/TableBody';
 export { TableCell } from './Table/TableCell';
+export { TableFooter } from './Table/TableFooter';
 export { TableHeader } from './Table/TableHeader';
 export { TableRow } from './Table/TableRow';
 export { Tab } from './Tabs/Tab';

site/src/undocumentedExports.json

@@ -14,6 +14,7 @@
     "Step",
     "TableBody",
     "TableCell",
+    "TableFooter",
     "TableHeader",
     "TableRow",
     "Tab",