Skip to content

Commit 3f5de7b

Browse files
colinrotherhamcolinrotherham
committed
Align table caption with NHS.UK frontend
1 parent 086fdac commit 3f5de7b

File tree

8 files changed

+172
-58
lines changed

8 files changed

+172
-58
lines changed

‎src/components/content-presentation/table/Table.tsx‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,7 @@
1-
import React, {
2-
ComponentPropsWithRef,
3-
ComponentPropsWithoutRef,
4-
FC,
5-
ReactNode,
6-
useMemo,
7-
useState,
8-
} from 'react';
1+
import React, { ComponentPropsWithoutRef, FC, ReactNode, useMemo, useState } from 'react';
92
import classNames from 'classnames';
103
import TableBody from './components/TableBody';
11-
import TableCaption from './components/TableCaption';
4+
import TableCaption, { TableCaptionProps } from './components/TableCaption';
125
import TableCell from './components/TableCell';
136
import TableContainer from './components/TableContainer';
147
import TableHead from './components/TableHead';
@@ -19,7 +12,7 @@ import TableContext, { ITableContext } from './TableContext';
1912
interface TableProps extends ComponentPropsWithoutRef<'table'> {
2013
responsive?: boolean;
2114
caption?: ReactNode;
22-
captionProps?: ComponentPropsWithRef<'caption'>;
15+
captionProps?: TableCaptionProps;
2316
}
2417

2518
const TableComponent: FC<TableProps> = ({

‎src/components/content-presentation/table/components/TableCaption.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,20 @@
11
import React, { ComponentPropsWithoutRef, FC } from 'react';
22
import classNames from 'classnames';
3+
import { NHSUKSize } from '@util/types/NHSUKTypes';
34

4-
const TableCaption: FC<ComponentPropsWithoutRef<'caption'>> = ({ className, ...rest }) => (
5-
<caption className={classNames('nhsuk-table__caption', className)} {...rest} />
5+
export interface TableCaptionProps extends ComponentPropsWithoutRef<'caption'> {
6+
size?: NHSUKSize;
7+
}
8+
9+
const TableCaption: FC<TableCaptionProps> = ({ className, size, ...rest }) => (
10+
<caption
11+
className={classNames(
12+
'nhsuk-table__caption',
13+
{ [`nhsuk-table__caption--${size}`]: size },
14+
className,
15+
)}
16+
{...rest}
17+
/>
618
);
719

820
TableCaption.displayName = 'Table.Caption';

‎src/components/content-presentation/table/components/__tests__/TableCaption.test.tsx‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,31 @@
11
import React from 'react';
22
import { render } from '@testing-library/react';
3+
import { NHSUKSize } from '@util/types/NHSUKTypes';
4+
import Table from '../..';
35
import TableCaption from '../TableCaption';
46

57
describe('TableCaption', () => {
68
it('matches snapshot', () => {
7-
const { container } = render(<TableCaption />);
9+
const { container } = render(
10+
<Table>
11+
<TableCaption>Caption</TableCaption>
12+
</Table>,
13+
);
14+
15+
expect(container).toMatchSnapshot();
16+
});
17+
18+
it.each<NHSUKSize>(['s', 'm', 'l', 'xl'])('renders with custom size %s', (size) => {
19+
const { container } = render(
20+
<Table>
21+
<TableCaption size={size}>Caption</TableCaption>
22+
</Table>,
23+
);
24+
25+
const captionEl = container.querySelector('caption');
26+
27+
expect(captionEl).toHaveTextContent('Caption');
28+
expect(captionEl).toHaveClass(`nhsuk-table__caption--${size}`);
829

930
expect(container).toMatchSnapshot();
1031
});

‎src/components/content-presentation/table/components/__tests__/TableCell.test.tsx‎

Lines changed: 39 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,30 @@
11
import React from 'react';
22
import { render } from '@testing-library/react';
3-
43
import Table from '../../Table';
5-
import TableBody from '../TableBody';
6-
import TableCell from '../TableCell';
7-
import TableHead from '../TableHead';
8-
import TableRow from '../TableRow';
94

105
describe('Table.Cell', () => {
116
it('matches snapshot', () => {
12-
const { container } = render(<TableCell />);
7+
const { container } = render(
8+
<Table>
9+
<Table.Body>
10+
<Table.Row>
11+
<Table.Cell>Cell</Table.Cell>
12+
</Table.Row>
13+
</Table.Body>
14+
</Table>,
15+
);
1316

1417
expect(container).toMatchSnapshot();
1518
});
1619

1720
it('prints dev warning when used outside of a head or body', () => {
1821
jest.spyOn(console, 'warn').mockImplementation();
22+
1923
render(
2024
<table>
2125
<thead>
2226
<tr>
23-
<TableCell />
27+
<Table.Cell>Cell</Table.Cell>
2428
</tr>
2529
</thead>
2630
</table>,
@@ -37,11 +41,11 @@ describe('Table.Cell', () => {
3741
it('returns th element when inside a Table.Head', () => {
3842
const { container } = render(
3943
<Table>
40-
<TableHead>
41-
<TableRow>
42-
<TableCell id="test-id" />
43-
</TableRow>
44-
</TableHead>
44+
<Table.Head>
45+
<Table.Row>
46+
<Table.Cell id="test-id">Cell</Table.Cell>
47+
</Table.Row>
48+
</Table.Head>
4549
</Table>,
4650
);
4751
const cellWrapper = container.querySelector('th.nhsuk-table__header');
@@ -52,11 +56,11 @@ describe('Table.Cell', () => {
5256
it('returns td element when inside a Table.Body', () => {
5357
const { container } = render(
5458
<Table>
55-
<TableBody>
56-
<TableRow>
57-
<TableCell id="test-id" />
58-
</TableRow>
59-
</TableBody>
59+
<Table.Body>
60+
<Table.Row>
61+
<Table.Cell id="test-id" />
62+
</Table.Row>
63+
</Table.Body>
6064
</Table>,
6165
);
6266
const cellWrapper = container.querySelector('td.nhsuk-table__cell');
@@ -67,16 +71,16 @@ describe('Table.Cell', () => {
6771
it('adds responsive heading when _responsive=True', () => {
6872
const { container } = render(
6973
<Table responsive>
70-
<TableHead>
71-
<TableRow>
72-
<TableCell>TestHeading</TableCell>
73-
</TableRow>
74-
</TableHead>
75-
<TableBody>
76-
<TableRow>
77-
<TableCell id="test-id" />
78-
</TableRow>
79-
</TableBody>
74+
<Table.Head>
75+
<Table.Row>
76+
<Table.Cell>TestHeading</Table.Cell>
77+
</Table.Row>
78+
</Table.Head>
79+
<Table.Body>
80+
<Table.Row>
81+
<Table.Cell id="test-id" />
82+
</Table.Row>
83+
</Table.Body>
8084
</Table>,
8185
);
8286
const cellElement = container.querySelector('td');
@@ -91,7 +95,7 @@ describe('Table.Cell', () => {
9195
<table>
9296
<tbody>
9397
<tr>
94-
<TableCell data-test="cell" isNumeric />
98+
<Table.Cell data-test="cell" isNumeric />
9599
</tr>
96100
</tbody>
97101
</table>,
@@ -104,11 +108,11 @@ describe('Table.Cell', () => {
104108
it('adds the numeric header class when isNumeric is true', () => {
105109
const { container } = render(
106110
<table>
107-
<TableHead>
111+
<Table.Head>
108112
<tr>
109-
<TableCell data-test="cell" isNumeric />
113+
<Table.Cell data-test="cell" isNumeric />
110114
</tr>
111-
</TableHead>
115+
</Table.Head>
112116
</table>,
113117
);
114118
const cell = container.querySelector('th[data-test="cell"].nhsuk-table__header--numeric');
@@ -119,14 +123,14 @@ describe('Table.Cell', () => {
119123
it('does not add the numeric header when isNumeric is false', () => {
120124
const { container } = render(
121125
<table>
122-
<TableHead>
126+
<Table.Head>
123127
<tr>
124-
<TableCell data-test="header" />
128+
<Table.Cell data-test="header" />
125129
</tr>
126-
</TableHead>
130+
</Table.Head>
127131
<tbody>
128132
<tr>
129-
<TableCell data-test="cell" />
133+
<Table.Cell data-test="cell" />
130134
</tr>
131135
</tbody>
132136
</table>,

‎src/components/content-presentation/table/components/__tests__/TableHead.test.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,11 @@ import TableHead from '../TableHead';
66

77
describe('Table.Head', () => {
88
it('matches snapshot', () => {
9-
const { container } = render(<TableHead />);
9+
const { container } = render(
10+
<Table>
11+
<TableHead />
12+
</Table>,
13+
);
1014

1115
expect(container).toMatchSnapshot();
1216
});

‎src/components/content-presentation/table/components/__tests__/__snapshots__/TableCaption.test.tsx.snap‎

Lines changed: 65 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,70 @@
22

33
exports[`TableCaption matches snapshot 1`] = `
44
<div>
5-
<caption
6-
class="nhsuk-table__caption"
7-
/>
5+
<table
6+
class="nhsuk-table"
7+
>
8+
<caption
9+
class="nhsuk-table__caption"
10+
>
11+
Caption
12+
</caption>
13+
</table>
14+
</div>
15+
`;
16+
17+
exports[`TableCaption renders with custom size l 1`] = `
18+
<div>
19+
<table
20+
class="nhsuk-table"
21+
>
22+
<caption
23+
class="nhsuk-table__caption nhsuk-table__caption--l"
24+
>
25+
Caption
26+
</caption>
27+
</table>
28+
</div>
29+
`;
30+
31+
exports[`TableCaption renders with custom size m 1`] = `
32+
<div>
33+
<table
34+
class="nhsuk-table"
35+
>
36+
<caption
37+
class="nhsuk-table__caption nhsuk-table__caption--m"
38+
>
39+
Caption
40+
</caption>
41+
</table>
42+
</div>
43+
`;
44+
45+
exports[`TableCaption renders with custom size s 1`] = `
46+
<div>
47+
<table
48+
class="nhsuk-table"
49+
>
50+
<caption
51+
class="nhsuk-table__caption nhsuk-table__caption--s"
52+
>
53+
Caption
54+
</caption>
55+
</table>
56+
</div>
57+
`;
58+
59+
exports[`TableCaption renders with custom size xl 1`] = `
60+
<div>
61+
<table
62+
class="nhsuk-table"
63+
>
64+
<caption
65+
class="nhsuk-table__caption nhsuk-table__caption--xl"
66+
>
67+
Caption
68+
</caption>
69+
</table>
870
</div>
971
`;

‎src/components/content-presentation/table/components/__tests__/__snapshots__/TableCell.test.tsx.snap‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,22 @@
22

33
exports[`Table.Cell matches snapshot 1`] = `
44
<div>
5-
<td
6-
class="nhsuk-table__cell"
7-
/>
5+
<table
6+
class="nhsuk-table"
7+
>
8+
<tbody
9+
class="nhsuk-table__body"
10+
>
11+
<tr
12+
class="nhsuk-table__row"
13+
>
14+
<td
15+
class="nhsuk-table__cell"
16+
>
17+
Cell
18+
</td>
19+
</tr>
20+
</tbody>
21+
</table>
822
</div>
923
`;

‎src/components/content-presentation/table/components/__tests__/__snapshots__/TableHead.test.tsx.snap‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,12 @@
22

33
exports[`Table.Head matches snapshot 1`] = `
44
<div>
5-
<thead
6-
class="nhsuk-table__head"
7-
/>
5+
<table
6+
class="nhsuk-table"
7+
>
8+
<thead
9+
class="nhsuk-table__head"
10+
/>
11+
</table>
812
</div>
913
`;

0 commit comments

Comments
 (0)