Added isNumeric optional parameter to table cell

Author: Luke Pearson

src/components/table/components/TableCell.tsx

@@ -9,22 +9,28 @@ const CellOutsideOfSectionWarning =
 export interface TableCellProps extends HTMLProps<HTMLTableCellElement> {
   _responsive?: boolean;
   _responsiveHeading?: string;
+  isNumeric?: boolean;
 }
 
 const TableCell: React.FC<TableCellProps> = ({
   className,
   _responsive,
   _responsiveHeading,
+  isNumeric,
   children,
   ...rest
 }) => {
   const section = useContext(TableSectionContext);
   useDevWarning(CellOutsideOfSectionWarning, () => section === TableSection.NONE);
 
+  const cellClass = section === TableSection.HEAD ? 'nhsuk-table__header' : 'nhsuk-table__cell';
+  const numericHeader = isNumeric ? `${cellClass}--numeric` : '';
+  const classes = classNames(cellClass, numericHeader, className)
+
   switch (section) {
     case TableSection.HEAD:
       return (
-        <th className={classNames('nhsuk-table__header', className)} scope="col" {...rest}>
+        <th className={classes} scope="col" {...rest}>
           {children}
         </th>
       );
@@ -34,7 +40,7 @@ const TableCell: React.FC<TableCellProps> = ({
     default:
       return (
         <td
-          className={classNames('nhsuk-table__cell', className)}
+          className={classes}
           role={_responsive ? 'cell' : undefined}
           {...rest}
         >

src/components/table/components/__tests__/TableCell.test.tsx

@@ -97,4 +97,62 @@ describe('Table.Cell', () => {
 
     wrapper.unmount();
   });
+
+  it('adds the numeric class when isNumeric is true', () => {
+    const wrapper = mount(
+      <table>
+        <tbody>
+          <tr>
+            <TableCell data-test="cell" isNumeric />
+          </tr>
+        </tbody>
+      </table>,
+    );
+
+    const cell = wrapper.find('[data-test="cell"]');
+    expect(cell.last().prop('className')).toContain('nhsuk-table__cell--numeric');
+
+    wrapper.unmount();
+  });
+
+  it('adds the numeric header class when isNumeric is true', () => {
+    const wrapper = mount(
+      <table>
+        <TableHead>
+          <tr>
+            <TableCell data-test="cell" isNumeric />
+          </tr>
+        </TableHead>
+      </table>,
+    );
+
+    const cell = wrapper.find('[data-test="cell"]');
+    expect(cell.last().prop('className')).toContain('nhsuk-table__header--numeric');
+
+    wrapper.unmount();
+  });
+
+  it('does not add the numeric header when isNumeric is false', () => {
+    const wrapper = mount(
+      <table>
+        <TableHead>
+          <tr>
+            <TableCell data-test="header" />
+          </tr>
+        </TableHead>
+        <tbody>
+          <tr>
+            <TableCell data-test="cell" />
+          </tr>
+        </tbody>
+      </table>,
+    );
+
+    const header = wrapper.find('[data-test="header"]');
+    expect(header.last().prop('className')).not.toContain('nhsuk-table__header--numeric');
+    const cell = wrapper.find('[data-test="cell"]');
+    expect(cell.last().prop('className')).not.toContain('nhsuk-table__header--numeric');
+
+    wrapper.unmount();
+  });
 });

stories/Table.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Table } from '../src';
+import { Col, Hint, Row, Table } from '../src';
 
 export const StandardTable = (): JSX.Element => (
   <Table caption="Skin symptoms and possible causes">
@@ -82,6 +82,36 @@ export const ResponsiveTable = (): JSX.Element => (
   </Table>
 );
 
+export const NumericCells = () => (
+  <Row>
+    <Col width="one-half">
+      <Hint>Right-aligned cells are used for numeric values</Hint>
+      <Table caption="Number of cases">
+        <Table.Head>
+          <Table.Row>
+            <Table.Cell>Location</Table.Cell>
+            <Table.Cell isNumeric>Number of cases</Table.Cell>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>England</Table.Cell>
+            <Table.Cell isNumeric>4,000</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>Wales</Table.Cell>
+            <Table.Cell isNumeric>2,500</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>Scotland</Table.Cell>
+            <Table.Cell isNumeric>600</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+    </Col>
+  </Row>
+);
+
 export default {
   title: 'Components/Table',
   component: Table,