fix(Footer): add proper semantics

Author: rwieruch

.storybook/preview.js

@@ -46,6 +46,7 @@ export const parameters = {
         ['Base', ...Features],
         'Features',
         Features,
+        'Mixing Features',
         'Theming',
         ['Themes', 'CSS Class', 'Imperative Style'],
         'Library Themes',
@@ -57,7 +58,6 @@ export const parameters = {
           'Bootstrap (WIP)',
           'Ant Design (WIP)',
         ],
-        'Composites',
         ['Sort & Select', 'Tree & Select', 'Tree & Sort'],
         'Types',
         ['Data', 'Compact Table', 'Composed Table', ...Features, 'Virtualized'],

.storybook/stories/Composites/hide-horizontal.story.js

@@ -15,7 +15,7 @@ import { useTheme } from '@table-library/react-table-library/theme';
 
 import { nodes } from '../data';
 
-storiesOf('Composites/Column Hide & Horizontal', module)
+storiesOf('Mixing Features/Column Hide & Horizontal', module)
   .addParameters({ component: Table })
   .add('base', () => {
     const data = { nodes };

.storybook/stories/Composites/hide-resize.story.js

@@ -14,7 +14,7 @@ import {
 
 import { nodes } from '../data';
 
-storiesOf('Composites/Column Hide & Resize', module)
+storiesOf('Mixing Features/Column Hide & Resize', module)
   .addParameters({ component: Table })
   .add('base', () => {
     const data = { nodes };

.storybook/stories/Composites/resize-fixed-column.story.js

@@ -14,7 +14,7 @@ import { useTheme } from '@table-library/react-table-library/theme';
 
 import { nodes } from '../data';
 
-storiesOf('Composites/Resize & Fixed Column', module)
+storiesOf('Mixing Features/Resize & Fixed Column', module)
   .addParameters({ component: Table })
   .add('base', () => {
     const data = { nodes };

.storybook/stories/Composites/resize-horizontal.story.js

@@ -14,7 +14,7 @@ import { useTheme } from '@table-library/react-table-library/theme';
 
 import { nodes } from '../data';
 
-storiesOf('Composites/Resize & Horizontal', module)
+storiesOf('Mixing Features/Resize & Horizontal', module)
   .addParameters({ component: Table })
   .add('base', () => {
     const data = { nodes };

.storybook/stories/Composites/sort-select.story.js

@@ -21,7 +21,7 @@ import {
 
 import { nodes } from '../data';
 
-storiesOf('Composites/Sort & Select', module)
+storiesOf('Mixing Features/Sort & Select', module)
   .addParameters({ component: Table })
   .add('base', () => {
     const data = { nodes };

.storybook/stories/Composites/tree-select.story.js

@@ -22,7 +22,7 @@ import {
 
 import { nodes } from '../data';
 
-storiesOf('Composites/Tree & Select', module)
+storiesOf('Mixing Features/Tree & Select', module)
   .addParameters({ component: Table })
   .add('base', () => {
     const data = { nodes };

.storybook/stories/Composites/tree-sort.story.js

@@ -16,7 +16,7 @@ import { useSort, HeaderCellSort } from '@table-library/react-table-library/sort
 
 import { nodes } from '../data';
 
-storiesOf('Composites/Tree & Sort', module)
+storiesOf('Mixing Features/Tree & Sort', module)
   .addParameters({ component: Table })
   .add('base', () => {
     const data = { nodes };

.storybook/stories/Types/theme.story.mdx

@@ -8,9 +8,11 @@ import { Meta } from '@storybook/addon-docs';
 export type Theme = {
   Table?: string,
   Header?: string,
+  Footer?: string,
   Body?: string,
   BaseRow?: string,
   HeaderRow?: string,
+  FooterRow?: string,
   Row?: string,
   BaseCell?: string,
   HeaderCell?: string,

src/table/Cell/Cell.tsx

@@ -29,7 +29,7 @@ export const Cell: React.FC<CellProps> = ({
   if (colSpan) {
     colSpanStyle = {
       ...colSpanStyle,
-      'grid-column': `span ${colSpan} / ${index + colSpan + previousColSpans + 1}`,
+      gridColumn: `span ${colSpan} / ${index + colSpan + previousColSpans + 1}`,
     };
   }
 

src/table/Cell/HeaderCell.tsx

@@ -75,6 +75,7 @@ export const HeaderCell: React.FC<HeaderCellProps> = ({
   pinLeft,
   pinRight,
   stiff,
+  isFooter,
   colSpan = 0,
   previousColSpans = 0,
   resize,
@@ -93,7 +94,7 @@ export const HeaderCell: React.FC<HeaderCellProps> = ({
   if (colSpan) {
     colSpanStyle = {
       ...colSpanStyle,
-      'grid-column': `span ${colSpan} / ${index + colSpan + previousColSpans + 1}`,
+      gridColumn: `span ${colSpan} / ${index + colSpan + previousColSpans + 1}`,
     };
   }
 
@@ -109,7 +110,7 @@ export const HeaderCell: React.FC<HeaderCellProps> = ({
         style={{ ...colSpanStyle, ...style }}
         css={css`
           ${theme?.BaseCell}
-          ${theme?.HeaderCell}
+          ${isFooter ? theme?.FooterCell : theme?.HeaderCell}
         `}
         className={cs('th', className, {
           stiff,

src/table/Footer/index.tsx

@@ -10,14 +10,14 @@ import {
   HeaderCellProps,
 } from '@table-library/react-table-library/types/table';
 
-const Footer: React.FC<HeaderProps> = (props) => <Header {...props} _className="tfoot" />;
+const Footer: React.FC<HeaderProps> = (props) => <Header {...props} isFooter />;
 
 const FooterRow: React.FC<HeaderRowProps> = (props) => (
-  <HeaderRow {...props} _className="tr-footer" role="rowfooter" />
+  <HeaderRow {...props} isFooter role="rowfooter" />
 );
 
 const FooterCell: React.FC<HeaderCellProps> = (props) => (
-  <HeaderCell {...props} role="columnfooter" />
+  <HeaderCell {...props} isFooter role="columnfooter" />
 );
 
 export { Footer, FooterRow, FooterCell };

src/table/Header/index.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import cs from 'clsx';
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
@@ -12,11 +13,7 @@ const headerRow = `
   display: contents;
 `;
 
-export const Header: React.FC<HeaderProps> = ({
-  _className = 'thead',
-  children,
-  ...rest
-}: HeaderProps) => {
+export const Header: React.FC<HeaderProps> = ({ isFooter, children, ...rest }: HeaderProps) => {
   const theme = React.useContext(ThemeContext);
 
   const context = React.useContext(LayoutContext);
@@ -27,15 +24,15 @@ export const Header: React.FC<HeaderProps> = ({
 
   const { layout } = context;
 
-  const As = layout?.isDiv ? 'div' : 'thead';
+  const As = layout?.isDiv ? 'div' : isFooter ? 'tfoot' : 'thead';
 
   return (
     <As
       role="rowgroup"
-      className={_className}
+      className={cs({ tfoot: isFooter, thead: !isFooter })}
       css={css`
         ${headerRow}
-        ${theme?.Header}
+        ${isFooter ? theme?.Footer : theme?.Header}
       `}
       {...rest}
     >

src/table/Row/HeaderRow.tsx

@@ -57,7 +57,7 @@ const useInitialLayout = () => {
 export const HeaderRow: React.FC<HeaderRowProps> = ({
   className,
   role = 'rowheader',
-  _className = 'tr-header',
+  isFooter,
   children,
   ...rest
 }: HeaderRowProps) => {
@@ -73,9 +73,12 @@ export const HeaderRow: React.FC<HeaderRowProps> = ({
       data-table-library_tr-header=""
       css={css`
         ${theme?.BaseRow}
-        ${theme?.HeaderRow}
+        ${isFooter ? theme?.FooterRow : theme?.HeaderRow}
       `}
-      className={cs('tr', _className, className)}
+      className={cs('tr', className, {
+        'tr-footer': isFooter,
+        'tr-header': !isFooter,
+      })}
       ref={ref}
       {...rest}
     >

src/types/table.ts

@@ -33,6 +33,7 @@ export type HeaderCellProps = {
   pinLeft?: boolean;
   pinRight?: boolean;
   stiff?: boolean;
+  isFooter?: boolean;
   resize?: ColumnResizeProps;
   children?: React.ReactNode;
 } & RestProps;
@@ -51,6 +52,7 @@ export type BodyProps = {
 } & RestProps;
 
 export type HeaderRowProps = {
+  isFooter?: boolean;
   className?: string;
   children: React.ReactNode;
 } & RestProps;

src/types/theme.ts

@@ -1,11 +1,14 @@
 export type Theme = {
   Table?: string;
   Header?: string;
+  Footer?: string;
   Body?: string;
   BaseRow?: string;
   HeaderRow?: string;
+  FooterRow?: string;
   Row?: string;
   BaseCell?: string;
   HeaderCell?: string;
+  FooterCell?: string;
   Cell?: string;
 };