feat(table): create table footer component (#864)

dequelabs · Jan 23, 2023 · aee7d22 · aee7d22
1 parent f7f6318
commit aee7d22
Show file tree

Hide file tree

Showing 6 changed files with 147 additions and 6 deletions.
diff --git a/docs/patterns/components/Table/index.js b/docs/patterns/components/Table/index.js
@@ -4,6 +4,7 @@ import {
   Table,
   TableBody,
   TableCell,
+  TableFooter,
   TableHead,
   TableHeader,
   TableRow,
@@ -362,6 +363,97 @@ const SortableTable = () => {
   )
 }`}
       </Code>
+      <h3>Border variant Table with TableFooter</h3>
+      <Table variant="border">
+        <TableHead>
+          <TableRow>
+            <TableHeader scope="col">First Name</TableHeader>
+            <TableHeader scope="col">Last Name</TableHeader>
+            <TableHeader scope="col">Email</TableHeader>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          <TableRow>
+            <TableCell>Frank</TableCell>
+            <TableCell>Zappa</TableCell>
+            <TableCell>[email protected]</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Duane</TableCell>
+            <TableCell>Allman</TableCell>
+            <TableCell>[email protected]</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Yamandu</TableCell>
+            <TableCell>Costa</TableCell>
+            <TableCell>[email protected]</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Jimmy</TableCell>
+            <TableCell>Herring</TableCell>
+            <TableCell>[email protected]</TableCell>
+          </TableRow>
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TableCell>This is a table footer.</TableCell>
+            <TableCell>It can be used to provide additional</TableCell>
+            <TableCell>information about the table.</TableCell>
+          </TableRow>
+        </TableFooter>
+      </Table>
+      <Code role="region" tabIndex="0">
+        {`import React from 'react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@deque/cauldron-react';
+
+const TableBorder = () => (
+  <Table variant="border">
+    <TableHead>
+      <TableRow>
+        <TableHeader scope="col">First Name</TableHeader>
+        <TableHeader scope="col">Last Name</TableHeader>
+        <TableHeader scope="col">Email</TableHeader>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      <TableRow>
+        <TableCell>Frank</TableCell>
+        <TableCell>Zappa</TableCell>
+        <TableCell>[email protected]</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Duane</TableCell>
+        <TableCell>Allman</TableCell>
+        <TableCell>[email protected]</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Yamandu</TableCell>
+        <TableCell>Costa</TableCell>
+        <TableCell>[email protected]</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Jimmy</TableCell>
+        <TableCell>Herring</TableCell>
+        <TableCell>[email protected]</TableCell>
+      </TableRow>
+    </TableBody>
+    <TableFooter>
+      <TableRow>
+        <TableCell>This is a table footer.</TableCell>
+        <TableCell>It can be used to provide additional</TableCell>
+        <TableCell>information about the table.</TableCell>
+      </TableRow>
+    </TableFooter>
+  </Table>
+)`}
+      </Code>
 
       <div className="Demo-props">
         <h2>Props</h2>
@@ -417,7 +509,7 @@ const SortableTable = () => {
             className
           }}
         />
-        <h3>TableHead, TableBody, TableRow, and TableCell</h3>
+        <h3>TableHead, TableBody, TableFooter, TableRow, and TableCell</h3>
         <PropDocs
           docs={{
             children,

diff --git a/packages/react/__tests__/src/components/Table/index.js b/packages/react/__tests__/src/components/Table/index.js
@@ -6,7 +6,8 @@ import Table, {
   TableCell,
   TableHead,
   TableHeader,
-  TableRow
+  TableRow,
+  TableFooter
 } from '../../../../src/components/Table';
 import axe from '../../../axe';
 
@@ -31,6 +32,14 @@ const renderDefaultTable = () =>
           <TableCell className="my-table-cell">2</TableCell>
         </TableRow>
       </TableBody>
+      <TableFooter className="my-table-footer" data-foo="true">
+        <TableRow className="my-table-row">
+          <TableCell className="my-table-cell" data-foo="true">
+            foo
+          </TableCell>
+          <TableCell className="my-table-cell">bar</TableCell>
+        </TableRow>
+      </TableFooter>
     </Table>
   );
 
@@ -42,14 +51,16 @@ describe('Table components', () => {
     const tableHeader = table.find('TableHeader').at(0);
     const tableBody = table.find('TableBody');
     const tableCell = table.find('TableCell').at(0);
+    const tableFooter = table.find('TableFooter').at(0);
 
     const tableItems = [
       table,
       tableHead,
       tableRow,
       tableHeader,
       tableBody,
-      tableCell
+      tableCell,
+      tableFooter
     ];
 
     tableItems.forEach(wrapper => {
@@ -64,13 +75,15 @@ describe('Table components', () => {
     const tableHeader = table.find('TableHeader').at(0);
     const tableBody = table.find('TableBody');
     const tableCell = table.find('TableCell').at(0);
+    const tableFooter = table.find('TableFooter').at(0);
 
     expect(table.is('.my-table')).toBe(true);
     expect(tableHead.is('.my-table-head')).toBe(true);
     expect(tableRow.is('.my-table-row')).toBe(true);
     expect(tableHeader.is('.my-table-header')).toBe(true);
     expect(tableBody.is('.my-table-body')).toBe(true);
     expect(tableCell.is('.my-table-cell')).toBe(true);
+    expect(tableFooter.is('.my-table-footer')).toBe(true);
   });
 
   test('passes arbitrary props through', () => {
@@ -80,14 +93,16 @@ describe('Table components', () => {
     const tableHeader = table.find('TableHeader').at(0);
     const tableBody = table.find('TableBody');
     const tableCell = table.find('TableCell').at(0);
+    const tableFooter = table.find('TableFooter').at(0);
 
     const tableItems = [
       table,
       tableHead,
       tableRow,
       tableHeader,
       tableBody,
-      tableCell
+      tableCell,
+      tableFooter
     ];
 
     tableItems.forEach(wrapper => {
@@ -104,12 +119,14 @@ describe('Table components', () => {
     const head = shallow(<TableHead>a</TableHead>);
     const header = shallow(<TableHeader>a</TableHeader>);
     const row = shallow(<TableRow>a</TableRow>);
+    const footer = shallow(<TableFooter>a</TableFooter>);
 
     expect(table.is('table')).toBe(true);
     expect(body.is('tbody')).toBe(true);
     expect(cell.is('td')).toBe(true);
     expect(head.is('thead')).toBe(true);
     expect(header.is('th')).toBe(true);
+    expect(footer.is('tfoot')).toBe(true);
     expect(row.is('tr')).toBe(true);
   });
 

diff --git a/packages/react/src/components/Table/TableFooter.tsx b/packages/react/src/components/Table/TableFooter.tsx
@@ -0,0 +1,21 @@
+import React, { HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const TableFooter = ({
+  children,
+  className,
+  ...other
+}: HTMLAttributes<HTMLTableSectionElement>) => (
+  <tfoot className={classNames('TableFooter', className)} {...other}>
+    {children}
+  </tfoot>
+);
+
+TableFooter.displayName = 'TableFooter';
+TableFooter.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string
+};
+
+export default TableFooter;
diff --git a/packages/react/src/components/Table/index.ts b/packages/react/src/components/Table/index.ts
@@ -4,3 +4,4 @@ export { default as TableCell } from './TableCell';
 export { default as TableHead } from './TableHead';
 export { default as TableHeader } from './TableHeader';
 export { default as TableRow } from './TableRow';
+export { default as TableFooter } from './TableFooter';
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
@@ -81,7 +81,8 @@ export {
   TableCell,
   TableHead,
   TableHeader,
-  TableRow
+  TableRow,
+  TableFooter
 } from './components/Table';
 export { default as Tabs, Tab, TabPanel } from './components/Tabs';
 export {

diff --git a/packages/styles/table.css b/packages/styles/table.css
@@ -89,7 +89,8 @@
 }
 
 .TableCell,
-.TableHeader {
+.TableHeader,
+.TableFooter {
   padding: var(--table-space) var(--space-smallest);
 }
 
@@ -103,12 +104,20 @@
 
 .Table--border,
 .Table--border .TableHeader,
+.Table--border .TableFooter,
 .Table--border .TableCell {
   border: 1px solid var(--gray-40);
 }
 
 .cauldron--theme-dark .Table--border,
 .cauldron--theme-dark .Table--border .TableHeader,
+.cauldron--theme-dark .Table--border .TableFooter,
 .cauldron--theme-dark .Table--border .TableCell {
   border-color: var(--stroke-dark);
 }
+
+.TableFooter .TableCell {
+  background: var(--table-header-background-color);
+  font-weight: var(--font-weight-medium);
+  color: var(--table-header-text-color);
+}