feat(Table): new Table.Foot and style caption (#2744)

resolves #2597 resolves #2598 --------- Co-authored-by: Eirik Backer <[email protected]>
digdir · Nov 7, 2024 · 6b56db2 · 6b56db2
1 parent c3a0765
commit 6b56db2
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 20 deletions.
diff --git a/.changeset/twenty-cheetahs-leave.md b/.changeset/twenty-cheetahs-leave.md
@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Table: Add `Table.Foot` and style caption
diff --git a/packages/css/table.css b/packages/css/table.css
@@ -19,7 +19,7 @@
   color: var(--dsc-table-color);
   width: 100%;
 
-  & > :is(tbody, thead) > tr > :is(th, td) {
+  & > :is(tbody, thead, tfoot) > tr > :is(th, td) {
     background: var(--dsc-table-background);
     border-bottom: var(--dsc-table-border);
     padding: var(--dsc-table-padding);
@@ -38,6 +38,17 @@
     border-bottom: var(--dsc-table-header-divider);
   }
 
+  & > tfoot > tr > :is(th, td) {
+    background: var(--dsc-table-background);
+    border-bottom: none;
+    border-top: var(--dsc-table-border);
+  }
+
+  & caption {
+    @composes ds-heading from './heading.css';
+    text-align: inherit;
+  }
+
   /* Add rounded border to first and last row */
   & > :is(thead, tbody):first-child > tr:first-child > :is(th, td) {
     &:first-child {
@@ -50,7 +61,7 @@
   }
 
   /* Add rounded border to last row */
-  & > :is(thead, tbody):last-child > tr:last-child > :is(th, td) {
+  & > :is(thead, tbody, tfoot):last-child > tr:last-child > :is(th, td) {
     &:first-child {
       border-bottom-left-radius: var(--dsc-table-border-radius);
     }

diff --git a/packages/react/src/components/Table/Table.stories.tsx b/packages/react/src/components/Table/Table.stories.tsx
@@ -16,6 +16,7 @@ export default {
 export const Preview: Story = (args) => {
   return (
     <Table {...args}>
+      <caption>Table caption</caption>
       <Table.Head>
         <Table.Row>
           <Table.HeaderCell>Header 1</Table.HeaderCell>
@@ -35,6 +36,13 @@ export const Preview: Story = (args) => {
           <Table.Cell>Cell 6</Table.Cell>
         </Table.Row>
       </Table.Body>
+      <Table.Foot>
+        <Table.Row>
+          <Table.Cell>Footer 1</Table.Cell>
+          <Table.Cell>Footer 2</Table.Cell>
+          <Table.Cell>Footer 3</Table.Cell>
+        </Table.Row>
+      </Table.Foot>
     </Table>
   );
 };
@@ -166,7 +174,7 @@ StickyHeader.args = {
 };
 
 StickyHeader.parameters = {
-  customStyles: { height: '280px', overflow: 'auto' },
+  customStyles: { height: '280px', overflow: 'auto', padding: 0 },
 };
 
 type CheckedItems = {

diff --git a/packages/react/src/components/Table/Table.test.tsx b/packages/react/src/components/Table/Table.test.tsx
@@ -3,7 +3,14 @@ import { render as renderRtl, screen } from '@testing-library/react';
 import type { TableProps } from './Table';
 import { Table } from './Table';
 
-import { TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from '.';
+import {
+  TableBody,
+  TableCell,
+  TableFoot,
+  TableHead,
+  TableHeaderCell,
+  TableRow,
+} from '.';
 
 const children = (
   <>
@@ -26,6 +33,13 @@ const children = (
         <TableCell>Cell 6</TableCell>
       </TableRow>
     </TableBody>
+    <TableFoot>
+      <TableRow>
+        <TableCell>Footer 1</TableCell>
+        <TableCell>Footer 2</TableCell>
+        <TableCell>Footer 3</TableCell>
+      </TableRow>
+    </TableFoot>
   </>
 );
 

diff --git a/packages/react/src/components/Table/TableFoot.tsx b/packages/react/src/components/Table/TableFoot.tsx
@@ -0,0 +1,9 @@
+import { type HTMLAttributes, forwardRef } from 'react';
+
+export type TableFootProps = HTMLAttributes<HTMLTableSectionElement>;
+
+export const TableFoot = forwardRef<HTMLTableSectionElement, TableFootProps>(
+  function TableFoot(rest, ref) {
+    return <tfoot ref={ref} {...rest} />;
+  },
+);
diff --git a/packages/react/src/components/Table/index.ts b/packages/react/src/components/Table/index.ts
@@ -4,42 +4,47 @@ import { TableBody } from './TableBody';
 import type { TableBodyProps } from './TableBody';
 import { TableCell } from './TableCell';
 import type { TableCellProps } from './TableCell';
+import { TableFoot } from './TableFoot';
+import type { TableFootProps } from './TableFoot';
 import { TableHead } from './TableHead';
 import type { TableHeadProps } from './TableHead';
 import { TableHeaderCell } from './TableHeaderCell';
 import type { TableHeaderCellProps } from './TableHeaderCell';
 import { TableRow } from './TableRow';
 import type { TableRowProps } from './TableRow';
 
-type TableComponent = typeof TableRoot & {
-  Head: typeof TableHead;
-  Body: typeof TableBody;
-  Row: typeof TableRow;
-  Cell: typeof TableCell;
-  HeaderCell: typeof TableHeaderCell;
-};
-
-const Table = TableRoot as TableComponent;
-
-Table.Head = TableHead;
-Table.Body = TableBody;
-Table.Row = TableRow;
-Table.Cell = TableCell;
-Table.HeaderCell = TableHeaderCell;
+const Table = Object.assign(TableRoot, {
+  Head: TableHead,
+  Body: TableBody,
+  Row: TableRow,
+  Cell: TableCell,
+  HeaderCell: TableHeaderCell,
+  Foot: TableFoot,
+});
 
 Table.displayName = 'Table';
 Table.Head.displayName = 'Table.Head';
 Table.Body.displayName = 'Table.Body';
 Table.Row.displayName = 'Table.Row';
 Table.Cell.displayName = 'Table.Cell';
 Table.HeaderCell.displayName = 'Table.HeaderCell';
+Table.Foot.displayName = 'Table.Foot';
 
-export { Table, TableHead, TableBody, TableRow, TableCell, TableHeaderCell };
+export {
+  Table,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableCell,
+  TableHeaderCell,
+  TableFoot,
+};
 export type {
   TableProps,
   TableHeadProps,
   TableBodyProps,
   TableRowProps,
   TableCellProps,
   TableHeaderCellProps,
+  TableFootProps,
 };