From 6942ccb4f35350b1abdd3049b02e1e38e7a6e89a Mon Sep 17 00:00:00 2001
From: Robbert Broersma <mail@robbertbroersma.nl>
Date: Tue, 22 Mar 2022 11:01:36 +0100
Subject: [PATCH 1/8] build: install Utrecht Design System BEM class names

---
 package-lock.json | 13 +++++++++++++
 package.json      |  1 +
 pages/_app.tsx    |  1 +
 3 files changed, 15 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 0edb39af..2ff6a9ba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
         "@types/react": "17.0.39",
         "@typescript-eslint/eslint-plugin": "5.12.0",
         "@typescript-eslint/parser": "5.12.0",
+        "@utrecht/component-library-css": "1.0.0-alpha.186",
         "eslint": "8.9.0",
         "eslint-config-next": "12.1.0",
         "eslint-config-prettier": "8.4.0",
@@ -7649,6 +7650,12 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@utrecht/component-library-css": {
+      "version": "1.0.0-alpha.186",
+      "resolved": "https://registry.npmjs.org/@utrecht/component-library-css/-/component-library-css-1.0.0-alpha.186.tgz",
+      "integrity": "sha512-enzHVLplF3mCJzYPPt+MF/3NvshZYW7QLQrrD5U6ua1JReDMLvLpmetP6JR2VRCF8hUfYashyQbq/iXwFQDCeQ==",
+      "dev": true
+    },
     "node_modules/@utrecht/design-tokens": {
       "version": "1.0.0-alpha.172",
       "resolved": "https://registry.npmjs.org/@utrecht/design-tokens/-/design-tokens-1.0.0-alpha.172.tgz",
@@ -23261,6 +23268,12 @@
         }
       }
     },
+    "@utrecht/component-library-css": {
+      "version": "1.0.0-alpha.186",
+      "resolved": "https://registry.npmjs.org/@utrecht/component-library-css/-/component-library-css-1.0.0-alpha.186.tgz",
+      "integrity": "sha512-enzHVLplF3mCJzYPPt+MF/3NvshZYW7QLQrrD5U6ua1JReDMLvLpmetP6JR2VRCF8hUfYashyQbq/iXwFQDCeQ==",
+      "dev": true
+    },
     "@utrecht/design-tokens": {
       "version": "1.0.0-alpha.172",
       "resolved": "https://registry.npmjs.org/@utrecht/design-tokens/-/design-tokens-1.0.0-alpha.172.tgz",
diff --git a/package.json b/package.json
index 0a633549..0317085f 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "@types/react": "17.0.39",
     "@typescript-eslint/eslint-plugin": "5.12.0",
     "@typescript-eslint/parser": "5.12.0",
+    "@utrecht/component-library-css": "1.0.0-alpha.186",
     "eslint": "8.9.0",
     "eslint-config-next": "12.1.0",
     "eslint-config-prettier": "8.4.0",
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 2201552e..09fcbf0d 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -2,6 +2,7 @@ import type { AppProps } from "next/app";
 import { useEffect } from "react";
 import "../styles/globals.css";
 import "@utrecht/design-tokens/dist/index.css";
+import "@utrecht/component-library-css/dist/bem.css";
 
 function MyApp({ Component, pageProps }: AppProps) {
   useEffect(() => {

From 57fe2659609647cc3220520cf9b89c6afd7a7240 Mon Sep 17 00:00:00 2001
From: Robbert Broersma <mail@robbertbroersma.nl>
Date: Tue, 22 Mar 2022 11:02:03 +0100
Subject: [PATCH 2/8] feat: ValueCurrency component

---
 src/components/ValueCurrency.tsx     |  78 ++++++++
 src/components/ValueCurrent.test.tsx | 261 +++++++++++++++++++++++++++
 2 files changed, 339 insertions(+)
 create mode 100644 src/components/ValueCurrency.tsx
 create mode 100644 src/components/ValueCurrent.test.tsx

diff --git a/src/components/ValueCurrency.tsx b/src/components/ValueCurrency.tsx
new file mode 100644
index 00000000..c8b56a4f
--- /dev/null
+++ b/src/components/ValueCurrency.tsx
@@ -0,0 +1,78 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from "clsx";
+import { ForwardedRef, forwardRef, HTMLAttributes } from "react";
+
+interface ValueCurrencyProps extends HTMLAttributes<HTMLDataElement> {
+  currency?: string;
+  amount: string | number;
+  locale?: string;
+}
+
+export const formatLabel = (locale: string, currency: string, amount: number): string =>
+  new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency,
+    minimumFractionDigits: Number.isInteger(amount) ? 0 : undefined,
+    useGrouping: false,
+  })
+    .format(amount)
+    // Remove whitespace
+    .replace(/[\s]+/g, "")
+    // Replace dash (U+002D) with minus sign (U+2212)
+    .replace("-", "\u2212");
+
+export const formatVisually = (locale: string, currency: string, amount: number): string => {
+  let formatted = new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency,
+  }).format(amount);
+
+  // Replace dash (U+002D) with minus sign (U+2212)
+  formatted = formatted.replace(/-/, "\u2212");
+
+  // Move the minus to before the currency
+  if ((locale === "nl" || locale === "nl-NL") && /\u2212/.test(formatted)) {
+    formatted = formatted.replace(/(.+)\u2212(.+)/, "\u2212 $1$2");
+  }
+
+  // Replace white space with non-breaking space
+  formatted = formatted.replace(/ /g, "\u00A0");
+
+  return formatted;
+};
+
+export const ValueCurrency = forwardRef(
+  (
+    { children, currency = "EUR", amount, locale = "nl-NL", className, ...restProps }: ValueCurrencyProps,
+    ref: ForwardedRef<HTMLDataElement>
+  ) => {
+    const number = typeof amount === "string" ? parseFloat(amount) : amount;
+    const labelFormatted = formatLabel(locale, currency, number);
+    let visuallyFormatted = formatVisually(locale, currency, number);
+
+    return (
+      <data
+        {...restProps}
+        ref={ref}
+        value={`${currency} ${amount}`}
+        className={clsx(
+          "example-value",
+          "example-value--currency",
+          "example-value--numeric",
+          number < 0 && "example-value--negative",
+          number > 0 && "example-value--positive",
+          className
+        )}
+        aria-label={labelFormatted}
+      >
+        {children || visuallyFormatted}
+      </data>
+    );
+  }
+);
+
+ValueCurrency.displayName = "example-value--currency";
diff --git a/src/components/ValueCurrent.test.tsx b/src/components/ValueCurrent.test.tsx
new file mode 100644
index 00000000..737b2f16
--- /dev/null
+++ b/src/components/ValueCurrent.test.tsx
@@ -0,0 +1,261 @@
+import { render } from "@testing-library/react";
+import { createRef } from "react";
+import { formatLabel, formatVisually, ValueCurrency } from "./ValueCurrency";
+import "@testing-library/jest-dom";
+
+describe("Currency value", () => {
+  it("renders a data HTML element", () => {
+    const { container } = render(<ValueCurrency locale="nl-NL" currency="EUR" amount={123.45} />);
+
+    const currency = container.querySelector("data:only-child");
+
+    expect(currency).toBeInTheDocument();
+  });
+
+  it("renders a data HTML element with a value attribute", () => {
+    const { container } = render(<ValueCurrency locale="nl-NL" currency="EUR" amount={123} />);
+
+    const currency = container.querySelector("data:only-child");
+
+    expect(currency?.getAttribute("value")).toContain("EUR");
+    expect(currency?.getAttribute("value")).toContain("123");
+  });
+
+  it("renders a BEM class name", () => {
+    const { container } = render(<ValueCurrency locale="nl-NL" currency="EUR" amount={1} />);
+
+    const currency = container.querySelector(":only-child");
+
+    expect(currency).toHaveClass("example-value");
+    expect(currency).toHaveClass("example-value--currency");
+  });
+
+  it("renders rich text content", () => {
+    const { container } = render(
+      <ValueCurrency locale="nl-NL" currency="EUR" amount={123.45}>
+        <span className="currency">€</span>
+        <span className="amount">123</span>
+        <span className="decimal-separator">,</span>
+        <span className="cents">45</span>
+      </ValueCurrency>
+    );
+
+    const currency = container.querySelector(":only-child");
+
+    const richText = currency?.querySelector("span");
+
+    expect(richText).toBeInTheDocument();
+  });
+
+  it("can be hidden", () => {
+    const { container } = render(<ValueCurrency locale="nl-NL" currency="EUR" amount={1} hidden />);
+
+    const currency = container.querySelector(":only-child");
+
+    expect(currency).not.toBeVisible();
+  });
+
+  it("can have a custom class name", () => {
+    const { container } = render(<ValueCurrency locale="nl-NL" currency="EUR" amount={1} className="reservation" />);
+
+    const currency = container.querySelector(":only-child");
+
+    expect(currency).toHaveClass("reservation");
+  });
+
+  it("supports ForwardRef in React", () => {
+    const ref = createRef<HTMLDataElement>();
+
+    const { container } = render(<ValueCurrency locale="nl-NL" currency="EUR" amount={1} ref={ref} />);
+
+    const currency = container.querySelector(":only-child");
+
+    expect(ref.current).toBe(currency);
+  });
+});
+
+describe("Currency formatting for screen readers", () => {
+  it("renders no white space", () => {
+    const label = formatLabel("en-US", "USD", Number.MAX_SAFE_INTEGER);
+
+    expect(label).not.toMatch(/\s+/);
+  });
+
+  it("renders a Unicode minus sign (U+2212) for negative numbers", () => {
+    const label = formatLabel("en-US", "USD", Number.MIN_SAFE_INTEGER);
+
+    expect(label).not.toContain("-");
+    expect(label).toContain("\u2212");
+  });
+
+  it("renders a Unicode minus sign (U+2212) for negative zero", () => {
+    const label = formatLabel("en-US", "USD", -0);
+
+    expect(label).toContain("\u2212");
+  });
+
+  it("renders no minus sign for positive numbers", () => {
+    const label = formatLabel("en-US", "USD", Number.MAX_SAFE_INTEGER);
+
+    expect(label).not.toContain("-");
+    expect(label).not.toContain("\u2212");
+  });
+
+  it("renders no grouping separators", () => {
+    const label = formatLabel("en-US", "USD", Number.MAX_SAFE_INTEGER);
+
+    expect(label).not.toContain(",");
+  });
+
+  it("renders decimal for fractional values", () => {
+    const label = formatLabel("en-US", "USD", 1.99);
+
+    expect(label).toContain("99");
+  });
+
+  it("renders the localized number of decimals (0 decimals)", () => {
+    const label = formatLabel("en-US", "JPY", 1.5);
+
+    expect(label).toContain("2");
+  });
+
+  it("renders the localized number of decimals (2 decimals)", () => {
+    const label = formatLabel("en-US", "USD", 1.5);
+
+    expect(label).toContain("50");
+  });
+
+  it("renders the localized number of decimals (3 decimals)", () => {
+    const label = formatLabel("en-US", "OMR", 1.5);
+
+    expect(label).toContain("500");
+  });
+
+  it("renders no decimals for integer values", () => {
+    const label = formatLabel("en-US", "USD", 1);
+
+    expect(label).not.toContain("0");
+  });
+
+  it("renders example values", () => {
+    const examples = [
+      {
+        locale: "en-US",
+        currency: "USD",
+        amount: Number.MAX_SAFE_INTEGER,
+        expected: "$9007199254740991",
+      },
+      {
+        locale: "nl-NL",
+        currency: "EUR",
+        amount: Number.MAX_SAFE_INTEGER,
+        expected: "€9007199254740991",
+      },
+      {
+        locale: "de-DE",
+        currency: "EUR",
+        amount: Number.MAX_SAFE_INTEGER,
+        expected: "9007199254740991€",
+      },
+    ];
+
+    examples.forEach(({ locale, currency, amount, expected }) => {
+      const label = formatLabel(locale, currency, amount);
+
+      expect(label).toBe(expected);
+    });
+  });
+});
+
+describe("Currency formatting for visual users", () => {
+  it("can render white space between currency and amount", () => {
+    const label = formatVisually("nl-NL", "EUR", 123);
+
+    expect(label).toMatch(/\s+\d/);
+  });
+
+  it("renders a non-breaking space as whitespace between currency and amount", () => {
+    const label = formatVisually("nl-NL", "EUR", 123);
+
+    expect(label).toMatch(/\u00A0\d/);
+  });
+
+  it("renders a Unicode minus sign (U+2212) for negative numbers", () => {
+    const label = formatVisually("en-US", "USD", Number.MIN_SAFE_INTEGER);
+
+    expect(label).not.toContain("-");
+    expect(label).toContain("\u2212");
+  });
+
+  it("renders a Unicode minus sign (U+2212) for negative zero", () => {
+    const label = formatVisually("en-US", "USD", -0);
+
+    expect(label).toContain("\u2212");
+  });
+
+  it("renders no minus sign for positive numbers", () => {
+    const label = formatVisually("en-US", "USD", Number.MAX_SAFE_INTEGER);
+
+    expect(label).not.toContain("-");
+    expect(label).not.toContain("\u2212");
+  });
+
+  it("renders grouping separators", () => {
+    const label = formatVisually("en-US", "USD", Number.MAX_SAFE_INTEGER);
+
+    expect(label).toContain(",");
+  });
+
+  it("renders the localized number of decimals (0 decimals)", () => {
+    const label = formatVisually("en-US", "JPY", 1.5);
+
+    expect(label).toContain("2");
+  });
+
+  it("renders the localized number of decimals (2 decimals)", () => {
+    const label = formatVisually("en-US", "USD", 1.5);
+
+    expect(label).toContain("50");
+  });
+
+  it("renders the localized number of decimals (3 decimals)", () => {
+    const label = formatVisually("en-US", "OMR", 1.5);
+
+    expect(label).toContain("500");
+  });
+
+  it("renders decimals for integer values", () => {
+    const label = formatVisually("en-US", "USD", 1);
+
+    expect(label).toContain("00");
+  });
+
+  it("renders example values", () => {
+    const examples = [
+      {
+        locale: "en-US",
+        currency: "USD",
+        amount: Number.MIN_SAFE_INTEGER,
+        expected: "\u2212$9,007,199,254,740,991.00",
+      },
+      {
+        locale: "nl-NL",
+        currency: "EUR",
+        amount: Number.MIN_SAFE_INTEGER,
+        expected: "\u2212\u00A0€\u00A09.007.199.254.740.991,00",
+      },
+      {
+        locale: "de-DE",
+        currency: "EUR",
+        amount: Number.MIN_SAFE_INTEGER,
+        expected: "\u22129.007.199.254.740.991,00\u00A0€",
+      },
+    ];
+
+    examples.forEach(({ locale, currency, amount, expected }) => {
+      const label = formatVisually(locale, currency, amount);
+
+      expect(label).toBe(expected);
+    });
+  });
+});

From 4e1fc87e1c53fc84e8ca3e2268f3ea192e6db7ab Mon Sep 17 00:00:00 2001
From: Robbert Broersma <mail@robbertbroersma.nl>
Date: Tue, 22 Mar 2022 11:02:15 +0100
Subject: [PATCH 3/8] feat: Table components

---
 src/components/utrecht/Table.test.tsx         | 203 ++++++++++++++++++
 src/components/utrecht/Table.tsx              |  19 ++
 src/components/utrecht/TableBody.test.tsx     |  99 +++++++++
 src/components/utrecht/TableBody.tsx          |  22 ++
 src/components/utrecht/TableCaption.test.tsx  |  90 ++++++++
 src/components/utrecht/TableCaption.tsx       |  22 ++
 src/components/utrecht/TableCell.test.tsx     | 137 ++++++++++++
 src/components/utrecht/TableCell.tsx          |  22 ++
 src/components/utrecht/TableFooter.test.tsx   |  96 +++++++++
 src/components/utrecht/TableFooter.tsx        |  22 ++
 src/components/utrecht/TableHeader.test.tsx   |  96 +++++++++
 src/components/utrecht/TableHeader.tsx        |  22 ++
 .../utrecht/TableHeaderCell.test.tsx          | 153 +++++++++++++
 src/components/utrecht/TableHeaderCell.tsx    |  22 ++
 src/components/utrecht/TableRow.test.tsx      | 106 +++++++++
 src/components/utrecht/TableRow.tsx           |  19 ++
 16 files changed, 1150 insertions(+)
 create mode 100644 src/components/utrecht/Table.test.tsx
 create mode 100644 src/components/utrecht/Table.tsx
 create mode 100644 src/components/utrecht/TableBody.test.tsx
 create mode 100644 src/components/utrecht/TableBody.tsx
 create mode 100644 src/components/utrecht/TableCaption.test.tsx
 create mode 100644 src/components/utrecht/TableCaption.tsx
 create mode 100644 src/components/utrecht/TableCell.test.tsx
 create mode 100644 src/components/utrecht/TableCell.tsx
 create mode 100644 src/components/utrecht/TableFooter.test.tsx
 create mode 100644 src/components/utrecht/TableFooter.tsx
 create mode 100644 src/components/utrecht/TableHeader.test.tsx
 create mode 100644 src/components/utrecht/TableHeader.tsx
 create mode 100644 src/components/utrecht/TableHeaderCell.test.tsx
 create mode 100644 src/components/utrecht/TableHeaderCell.tsx
 create mode 100644 src/components/utrecht/TableRow.test.tsx
 create mode 100644 src/components/utrecht/TableRow.tsx

diff --git a/src/components/utrecht/Table.test.tsx b/src/components/utrecht/Table.test.tsx
new file mode 100644
index 00000000..224d0e18
--- /dev/null
+++ b/src/components/utrecht/Table.test.tsx
@@ -0,0 +1,203 @@
+import { render, screen } from "@testing-library/react";
+import { createRef } from "react";
+import { Table } from "./Table";
+import { TableHeader } from "./TableHeader";
+import { TableFooter } from "./TableFooter";
+import { TableBody } from "./TableBody";
+import { TableCaption } from "./TableCaption";
+import { TableRow } from "./TableRow";
+import "@testing-library/jest-dom";
+
+fdescribe("Table", () => {
+  it("renders a table role element", () => {
+    render(<Table />);
+
+    const table = screen.getByRole("table");
+
+    expect(table).toBeInTheDocument();
+    expect(table).toBeVisible();
+  });
+
+  it("can render a table role element with an accessible name", () => {
+    render(<Table aria-label="Interesting data" />);
+
+    const table = screen.getByRole("table", {
+      name: "Interesting data",
+    });
+
+    expect(table).toBeInTheDocument();
+  });
+
+  it("can render a table role element with an accessible name defined by an associated heading", () => {
+    render(
+      <>
+        <h2 id="h2">Interesting data</h2>
+        <Table aria-labelledby="h2" />
+      </>
+    );
+
+    const table = screen.getByRole("table", {
+      name: "Interesting data",
+    });
+
+    expect(table).toBeInTheDocument();
+  });
+
+  it("renders an HTML table element", () => {
+    const { container } = render(<Table />);
+
+    const table = container.querySelector("table:only-child");
+
+    expect(table).toBeInTheDocument();
+  });
+
+  it("renders a design system BEM class name", () => {
+    const { container } = render(<Table />);
+    const table = container.querySelector(":only-child");
+
+    expect(table).toHaveClass("utrecht-table");
+  });
+
+  it("renders table section for header", () => {
+    render(
+      <Table>
+        <TableHeader />
+      </Table>
+    );
+
+    const table = screen.getByRole("table");
+
+    const section = table.querySelector(":only-child");
+
+    expect(section).toBeInTheDocument();
+  });
+
+  it("renders table section for footer", () => {
+    render(
+      <Table>
+        <TableFooter />
+      </Table>
+    );
+
+    const table = screen.getByRole("table");
+
+    const section = table.querySelector(":only-child");
+
+    expect(section).toBeInTheDocument();
+  });
+
+  it("renders table section for body", () => {
+    render(
+      <Table>
+        <TableBody />
+      </Table>
+    );
+
+    const table = screen.getByRole("table");
+
+    const section = table.querySelector(":only-child");
+
+    expect(section).toBeInTheDocument();
+  });
+
+  // Skip because React rendering does not allow tables without thead/tfoot/tbody
+  it.skip("renders table rows", () => {
+    const { container } = render(
+      <Table>
+        <TableRow />
+        <TableRow />
+        <TableRow />
+      </Table>
+    );
+    const table = container.querySelector(":only-child");
+    const row = table?.querySelector(":only-child");
+
+    expect(row).toBe(screen.getByRole("row"));
+  });
+
+  it("renders table rows grouped in header section", () => {
+    const { container } = render(
+      <Table>
+        <TableHeader>
+          <TableRow />
+        </TableHeader>
+      </Table>
+    );
+
+    const table = container.querySelector(":only-child");
+    const header = table?.querySelector(":only-child");
+    const headerChild = header?.querySelector(":only-child");
+
+    expect(headerChild).toBeInTheDocument();
+
+    const row = screen.getByRole("row");
+
+    expect(row).toBe(headerChild);
+  });
+
+  it("renders table rows grouped in footer section", () => {
+    const { container } = render(
+      <Table>
+        <TableFooter>
+          <TableRow />
+        </TableFooter>
+      </Table>
+    );
+
+    const table = container.querySelector(":only-child");
+    const footer = table?.querySelector(":only-child");
+    const footerChild = footer?.querySelector(":only-child");
+
+    expect(footerChild).toBeInTheDocument();
+
+    const row = screen.getByRole("row");
+
+    expect(row).toBe(footerChild);
+  });
+
+  it("renders table rows grouped in body section", () => {
+    const { container } = render(
+      <Table>
+        <TableBody>
+          <TableRow />
+        </TableBody>
+      </Table>
+    );
+
+    const table = container.querySelector(":only-child");
+    const body = table?.querySelector(":only-child");
+    const bodyChild = body?.querySelector(":only-child");
+
+    expect(bodyChild).toBeInTheDocument();
+
+    const row = screen.getByRole("row");
+
+    expect(row).toBe(bodyChild);
+  });
+
+  it("can be hidden", () => {
+    const { container } = render(<Table hidden />);
+
+    const table = container.querySelector(":only-child");
+
+    expect(table).not.toBeVisible();
+  });
+
+  it("can have a custom class name", () => {
+    const { container } = render(<Table className="full-width" />);
+
+    const table = container.querySelector(":only-child");
+
+    expect(table).toHaveClass("full-width");
+  });
+
+  it("supports ForwardRef in React", () => {
+    const ref = createRef<HTMLHeadingElement>();
+
+    const { container } = render(<Table ref={ref} />);
+
+    const table = container.querySelector(":only-child");
+
+    expect(ref.current).toBe(table);
+  });
+});
diff --git a/src/components/utrecht/Table.tsx b/src/components/utrecht/Table.tsx
new file mode 100644
index 00000000..4a51cf0a
--- /dev/null
+++ b/src/components/utrecht/Table.tsx
@@ -0,0 +1,19 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2022 Robbert Broersma
+ */
+
+import clsx from "clsx";
+import { ForwardedRef, forwardRef, PropsWithChildren, TableHTMLAttributes } from "react";
+
+type TableProps = TableHTMLAttributes<HTMLTableElement>;
+
+export const Table = forwardRef(
+  ({ children, className, ...restProps }: PropsWithChildren<TableProps>, ref: ForwardedRef<HTMLTableElement>) => (
+    <table {...restProps} ref={ref} className={clsx("utrecht-table", className)}>
+      {children}
+    </table>
+  )
+);
+
+Table.displayName = "utrecht-table";
diff --git a/src/components/utrecht/TableBody.test.tsx b/src/components/utrecht/TableBody.test.tsx
new file mode 100644
index 00000000..7a04b7d9
--- /dev/null
+++ b/src/components/utrecht/TableBody.test.tsx
@@ -0,0 +1,99 @@
+import { render, screen } from "@testing-library/react";
+import { createRef } from "react";
+import { Table } from "./Table";
+import { TableHeader } from "./TableHeader";
+import { TableFooter } from "./TableFooter";
+import { TableBody } from "./TableBody";
+import { TableCaption } from "./TableCaption";
+import { TableRow } from "./TableRow";
+import "@testing-library/jest-dom";
+
+fdescribe("Table body", () => {
+  it("renders a rowgroup role element", () => {
+    render(
+      <Table>
+        <TableBody />
+      </Table>
+    );
+
+    const tableBody = screen.getByRole("rowgroup");
+
+    expect(tableBody).toBeInTheDocument();
+    expect(tableBody).toBeVisible();
+  });
+
+  it("renders an HTML tbody element", () => {
+    const { container } = render(
+      <Table>
+        <TableBody />
+      </Table>
+    );
+    const table = container.querySelector(":only-child");
+    const tableBody = table?.querySelector("tbody:only-child");
+
+    expect(tableBody).toBeInTheDocument();
+  });
+
+  it("renders a design system BEM class name", () => {
+    const { container } = render(
+      <Table>
+        <TableBody />
+      </Table>
+    );
+    const table = container.querySelector(":only-child");
+    const tableBody = table?.querySelector(":only-child");
+
+    expect(tableBody).toHaveClass("utrecht-table__body");
+  });
+
+  it("renders table rows", () => {
+    const { container } = render(
+      <Table>
+        <TableBody>
+          <TableRow />
+        </TableBody>
+      </Table>
+    );
+    const tableBody = screen.getByRole("rowgroup");
+    const row = tableBody?.querySelector(":only-child");
+
+    expect(row).toBe(screen.getByRole("row"));
+  });
+
+  it("can be hidden", () => {
+    const { container } = render(
+      <Table>
+        <TableBody hidden />
+      </Table>
+    );
+    const table = container.querySelector(":only-child");
+    const tableBody = table?.querySelector(":only-child");
+
+    expect(tableBody).not.toBeVisible();
+  });
+
+  it("can have a custom class name", () => {
+    const { container } = render(
+      <Table>
+        <TableBody className="alternate-row-colors" />
+      </Table>
+    );
+    const table = container.querySelector(":only-child");
+    const tableBody = table?.querySelector(":only-child");
+
+    expect(tableBody).toHaveClass("alternate-row-colors");
+  });
+
+  it("supports ForwardRef in React", () => {
+    const ref = createRef<HTMLTableSectionElement>();
+    const { container } = render(
+      <Table>
+        <TableBody ref={ref} />
+      </Table>
+    );
+    const table = container.querySelector(":only-child");
+    const tableBody = table?.querySelector(":only-child");
+
+    expect(ref.current).toBe(tableBody);
+  });
+});
diff --git a/src/components/utrecht/TableBody.tsx b/src/components/utrecht/TableBody.tsx
new file mode 100644
index 00000000..d011ba53
--- /dev/null
+++ b/src/components/utrecht/TableBody.tsx
@@ -0,0 +1,22 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2022 Robbert Broersma
+ */
+
+import clsx from "clsx";
+import { ForwardedRef, forwardRef, PropsWithChildren, TableHTMLAttributes } from "react";
+
+type TableBodyProps = TableHTMLAttributes<HTMLTableSectionElement>;
+
+export const TableBody = forwardRef(
+  (
+    { children, className, ...restProps }: PropsWithChildren<TableBodyProps>,
+    ref: ForwardedRef<HTMLTableSectionElement>
+  ) => (
+    <tbody {...restProps} ref={ref} className={clsx("utrecht-table__body", className)}>
+      {children}
+    </tbody>
+  )
+);
+
+TableBody.displayName = "utrecht-table__body";
diff --git a/src/components/utrecht/TableCaption.test.tsx b/src/components/utrecht/TableCaption.test.tsx
new file mode 100644
index 00000000..04595428
--- /dev/null
+++ b/src/components/utrecht/TableCaption.test.tsx
@@ -0,0 +1,90 @@
+import { render, screen } from "@testing-library/react";
+import { createRef } from "react";
+import { Table } from "./Table";
+import { TableHeader } from "./TableHeader";
+import { TableFooter } from "./TableFooter";
+import { TableBody } from "./TableBody";
+import { TableCaption } from "./TableCaption";
+import { TableRow } from "./TableRow";
+import "@testing-library/jest-dom";
+
+fdescribe("Table caption", () => {
+  it("can render an accessible name for a table element", () => {
+    render(
+      <Table>
+        <TableCaption>Interesting data</TableCaption>
+      </Table>
+    );
+
+    const table = screen.getByRole("table", {
+      name: "Interesting data",
+    });
+
+    expect(table).toBeInTheDocument();
+  });
+
+  it("renders an HTML caption element", () => {
+    const { container } = render(
+      <Table>
+        <TableCaption />
+      </Table>
+    );
+
+    const table = container.querySelector(":only-child");
+    const caption = table?.querySelector("caption:only-child");
+
+    expect(caption).toBeInTheDocument();
+  });
+
+  it("renders a design system BEM class name", () => {
+    const { container } = render(
+      <Table>
+        <TableCaption />
+      </Table>
+    );
+    const table = container.querySelector(":only-child");
+    const caption = table?.querySelector(":only-child");
+
+    expect(caption).toHaveClass("utrecht-table__caption");
+  });
+
+  it("can be hidden", () => {
+    const { container } = render(
+      <Table>
+        <TableCaption hidden />
+      </Table>
+    );
+    const table = container.querySelector(":only-child");
+    const caption = table?.querySelector(":only-child");
+
+    expect(caption).not.toBeVisible();
+  });
+
+  it("can have a custom class name", () => {
+    const { container } = render(
+      <Table>
+        <TableCaption className="heading-2" />
+      </Table>
+    );
+
+    const table = container.querySelector(":only-child");
+    const caption = table?.querySelector(":only-child");
+
+    expect(caption).toHaveClass("heading-2");
+  });
+
+  it("supports ForwardRef in React", () => {
+    const ref = createRef<HTMLTableCaptionElement>();
+
+    const { container } = render(
+      <Table>
+        <TableCaption ref={ref} />
+      </Table>
+    );
+
+    const table = container.querySelector(":only-child");
+    const caption = table?.querySelector(":only-child");
+
+    expect(ref.current).toBe(caption);
+  });
+});
diff --git a/src/components/utrecht/TableCaption.tsx b/src/components/utrecht/TableCaption.tsx
new file mode 100644
index 00000000..6b5c9f59
--- /dev/null
+++ b/src/components/utrecht/TableCaption.tsx
@@ -0,0 +1,22 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2022 Robbert Broersma
+ */
+
+import clsx from "clsx";
+import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from "react";
+
+type TableCaptionProps = HTMLAttributes<HTMLTableCaptionElement>;
+
+export const TableCaption = forwardRef(
+  (
+    { children, className, ...restProps }: PropsWithChildren<TableCaptionProps>,
+    ref: ForwardedRef<HTMLTableCaptionElement>
+  ) => (
+    <caption {...restProps} ref={ref} className={clsx("utrecht-table__caption", className)}>
+      {children}
+    </caption>
+  )
+);
+
+TableCaption.displayName = "utrecht-table__caption";
diff --git a/src/components/utrecht/TableCell.test.tsx b/src/components/utrecht/TableCell.test.tsx
new file mode 100644
index 00000000..6af0a000
--- /dev/null
+++ b/src/components/utrecht/TableCell.test.tsx
@@ -0,0 +1,137 @@
+import { render, screen } from "@testing-library/react";
+import { createRef } from "react";
+import { Table } from "./Table";
+import { TableBody } from "./TableBody";
+import { TableRow } from "./TableRow";
+import { TableCell } from "./TableCell";
+import "@testing-library/jest-dom";
+
+describe("Table cell", () => {
+  /**
+   * The following tests will render an complete table instead of just one standalone table cell,
+   * because React doesn't allow standalone rendering of <td>.
+   *
+   * Since simply using `:only-child` like the other tests doesn't work anymore,
+   * the following tests heavily rely on `useRef()`. (That's also why the test for ForwardRef is
+   * one of the first tests.)
+   */
+  it("renders a cell role element", () => {
+    render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell />
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+
+    const cell = screen.getByRole("cell");
+
+    expect(cell).toBeInTheDocument();
+    expect(cell).toBeVisible();
+  });
+
+  it("supports ForwardRef in React", () => {
+    const ref = createRef<HTMLTableCellElement>();
+
+    const { container } = render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell ref={ref} />
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+
+    const row = screen.getByRole("row");
+    const cell = row.querySelector(":only-child");
+
+    expect(ref.current).toBe(cell);
+  });
+
+  it("renders a td HTML element", () => {
+    const { container } = render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell />
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+    const cell = container.querySelector("td:only-child");
+
+    expect(cell).toBeInTheDocument();
+  });
+
+  it("renders a design system BEM class name", () => {
+    const ref = createRef<HTMLTableCellElement>();
+    render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell ref={ref} />
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+    const cell = ref.current;
+
+    expect(cell).toHaveClass("utrecht-table__cell");
+  });
+
+  it("renders rich text content", () => {
+    const ref = createRef<HTMLTableCellElement>();
+    render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell ref={ref}>
+              <data value="1234">1,234</data>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+
+    const cell = ref.current;
+
+    const richText = cell?.querySelector("data");
+
+    expect(richText).toBeInTheDocument();
+  });
+
+  it("can be hidden", () => {
+    const ref = createRef<HTMLTableCellElement>();
+    render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell ref={ref} hidden />
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+
+    expect(ref.current).not.toBeVisible();
+  });
+
+  it("can have a custom class name", () => {
+    const ref = createRef<HTMLTableCellElement>();
+    render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell ref={ref} className="negative">
+              -42
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+
+    expect(ref.current).toHaveClass("negative");
+  });
+});
diff --git a/src/components/utrecht/TableCell.tsx b/src/components/utrecht/TableCell.tsx
new file mode 100644
index 00000000..32942241
--- /dev/null
+++ b/src/components/utrecht/TableCell.tsx
@@ -0,0 +1,22 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2022 Robbert Broersma
+ */
+
+import clsx from "clsx";
+import { ForwardedRef, forwardRef, PropsWithChildren, TdHTMLAttributes } from "react";
+
+type TableCellProps = TdHTMLAttributes<HTMLTableCellElement>;
+
+export const TableCell = forwardRef(
+  (
+    { children, className, ...restProps }: PropsWithChildren<TableCellProps>,
+    ref: ForwardedRef<HTMLTableCellElement>
+  ) => (
+    <td {...restProps} ref={ref} className={clsx("utrecht-table__cell", className)}>
+      {children}
+    </td>
+  )
+);
+
+TableCell.displayName = "utrecht-table__cell";
diff --git a/src/components/utrecht/TableFooter.test.tsx b/src/components/utrecht/TableFooter.test.tsx
new file mode 100644
index 00000000..a584a41a
--- /dev/null
+++ b/src/components/utrecht/TableFooter.test.tsx
@@ -0,0 +1,96 @@
+import { render, screen } from "@testing-library/react";
+import { createRef } from "react";
+import { Table } from "./Table";
+import { TableFooter } from "./TableFooter";
+import { TableRow } from "./TableRow";
+import "@testing-library/jest-dom";
+
+fdescribe("Table footer", () => {
+  it("renders a rowgroup role element", () => {
+    render(
+      <Table>
+        <TableFooter />
+      </Table>
+    );
+
+    const tableFooter = screen.getByRole("rowgroup");
+
+    expect(tableFooter).toBeInTheDocument();
+    expect(tableFooter).toBeVisible();
+  });
+
+  it("renders an HTML tfoot element", () => {
+    const { container } = render(
+      <Table>
+        <TableFooter />
+      </Table>
+    );
+    const table = container.querySelector(":only-child");
+    const tableFooter = table?.querySelector("tfoot:only-child");
+
+    expect(tableFooter).toBeInTheDocument();
+  });
+
+  it("renders a design system BEM class name", () => {
+    const { container } = render(
+      <Table>
+        <TableFooter />
+      </Table>
+    );
+    const table = container.querySelector(":only-child");
+    const tableFooter = table?.querySelector(":only-child");
+
+    expect(tableFooter).toHaveClass("utrecht-table__footer");
+  });
+
+  it("renders table rows", () => {
+    const { container } = render(
+      <Table>
+        <TableFooter>
+          <TableRow />
+        </TableFooter>
+      </Table>
+    );
+    const tableFooter = screen.getByRole("rowgroup");
+    const row = tableFooter?.querySelector(":only-child");
+
+    expect(row).toBe(screen.getByRole("row"));
+  });
+
+  it("can be hidden", () => {
+    const { container } = render(
+      <Table>
+        <TableFooter hidden />
+      </Table>
+    );
+    const table = container.querySelector(":only-child");
+    const tableFooter = table?.querySelector(":only-child");
+
+    expect(tableFooter).not.toBeVisible();
+  });
+
+  it("can have a custom class name", () => {
+    const { container } = render(
+      <Table>
+        <TableFooter className="alternate-column-colors" />
+      </Table>
+    );
+    const table = container.querySelector(":only-child");
+    const tableFooter = table?.querySelector(":only-child");
+
+    expect(tableFooter).toHaveClass("alternate-column-colors");
+  });
+
+  it("supports ForwardRef in React", () => {
+    const ref = createRef<HTMLTableSectionElement>();
+    const { container } = render(
+      <Table>
+        <TableFooter ref={ref} />
+      </Table>
+    );
+    const table = container.querySelector(":only-child");
+    const tableFooter = table?.querySelector(":only-child");
+
+    expect(ref.current).toBe(tableFooter);
+  });
+});
diff --git a/src/components/utrecht/TableFooter.tsx b/src/components/utrecht/TableFooter.tsx
new file mode 100644
index 00000000..40ddb369
--- /dev/null
+++ b/src/components/utrecht/TableFooter.tsx
@@ -0,0 +1,22 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2022 Robbert Broersma
+ */
+
+import clsx from "clsx";
+import { ForwardedRef, forwardRef, PropsWithChildren, TableHTMLAttributes } from "react";
+
+type TableFooterProps = TableHTMLAttributes<HTMLTableSectionElement>;
+
+export const TableFooter = forwardRef(
+  (
+    { children, className, ...restProps }: PropsWithChildren<TableFooterProps>,
+    ref: ForwardedRef<HTMLTableSectionElement>
+  ) => (
+    <tfoot {...restProps} ref={ref} className={clsx("utrecht-table__footer", className)}>
+      {children}
+    </tfoot>
+  )
+);
+
+TableFooter.displayName = "utrecht-table__footer";
diff --git a/src/components/utrecht/TableHeader.test.tsx b/src/components/utrecht/TableHeader.test.tsx
new file mode 100644
index 00000000..647f239c
--- /dev/null
+++ b/src/components/utrecht/TableHeader.test.tsx
@@ -0,0 +1,96 @@
+import { render, screen } from "@testing-library/react";
+import { createRef } from "react";
+import { Table } from "./Table";
+import { TableHeader } from "./TableHeader";
+import { TableRow } from "./TableRow";
+import "@testing-library/jest-dom";
+
+fdescribe("Table header", () => {
+  it("renders a rowgroup role element", () => {
+    render(
+      <Table>
+        <TableHeader />
+      </Table>
+    );
+
+    const tableHeader = screen.getByRole("rowgroup");
+
+    expect(tableHeader).toBeInTheDocument();
+    expect(tableHeader).toBeVisible();
+  });
+
+  it("renders an HTML thead element", () => {
+    const { container } = render(
+      <Table>
+        <TableHeader />
+      </Table>
+    );
+    const table = container.querySelector(":only-child");
+    const tableHeader = table?.querySelector("thead:only-child");
+
+    expect(tableHeader).toBeInTheDocument();
+  });
+
+  it("renders a design system BEM class name", () => {
+    const { container } = render(
+      <Table>
+        <TableHeader />
+      </Table>
+    );
+    const table = container.querySelector(":only-child");
+    const tableHeader = table?.querySelector(":only-child");
+
+    expect(tableHeader).toHaveClass("utrecht-table__header");
+  });
+
+  it("renders table rows", () => {
+    const { container } = render(
+      <Table>
+        <TableHeader>
+          <TableRow />
+        </TableHeader>
+      </Table>
+    );
+    const tableHeader = screen.getByRole("rowgroup");
+    const row = tableHeader?.querySelector(":only-child");
+
+    expect(row).toBe(screen.getByRole("row"));
+  });
+
+  it("can be hidden", () => {
+    const { container } = render(
+      <Table>
+        <TableHeader hidden />
+      </Table>
+    );
+    const table = container.querySelector(":only-child");
+    const tableHeader = table?.querySelector(":only-child");
+
+    expect(tableHeader).not.toBeVisible();
+  });
+
+  it("can have a custom class name", () => {
+    const { container } = render(
+      <Table>
+        <TableHeader className="alternate-column-colors" />
+      </Table>
+    );
+    const table = container.querySelector(":only-child");
+    const tableHeader = table?.querySelector(":only-child");
+
+    expect(tableHeader).toHaveClass("alternate-column-colors");
+  });
+
+  it("supports ForwardRef in React", () => {
+    const ref = createRef<HTMLTableSectionElement>();
+    const { container } = render(
+      <Table>
+        <TableHeader ref={ref} />
+      </Table>
+    );
+    const table = container.querySelector(":only-child");
+    const tableHeader = table?.querySelector(":only-child");
+
+    expect(ref.current).toBe(tableHeader);
+  });
+});
diff --git a/src/components/utrecht/TableHeader.tsx b/src/components/utrecht/TableHeader.tsx
new file mode 100644
index 00000000..dbee5aa6
--- /dev/null
+++ b/src/components/utrecht/TableHeader.tsx
@@ -0,0 +1,22 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2022 Robbert Broersma
+ */
+
+import clsx from "clsx";
+import { ForwardedRef, forwardRef, PropsWithChildren, TableHTMLAttributes } from "react";
+
+type TableHeaderProps = TableHTMLAttributes<HTMLTableSectionElement>;
+
+export const TableHeader = forwardRef(
+  (
+    { children, className, ...restProps }: PropsWithChildren<TableHeaderProps>,
+    ref: ForwardedRef<HTMLTableSectionElement>
+  ) => (
+    <thead {...restProps} ref={ref} className={clsx("utrecht-table__header", className)}>
+      {children}
+    </thead>
+  )
+);
+
+TableHeader.displayName = "utrecht-table__header";
diff --git a/src/components/utrecht/TableHeaderCell.test.tsx b/src/components/utrecht/TableHeaderCell.test.tsx
new file mode 100644
index 00000000..010b5a4a
--- /dev/null
+++ b/src/components/utrecht/TableHeaderCell.test.tsx
@@ -0,0 +1,153 @@
+import { render, screen } from "@testing-library/react";
+import { createRef } from "react";
+import { Table } from "./Table";
+import { TableBody } from "./TableBody";
+import { TableRow } from "./TableRow";
+import { TableHeaderCell } from "./TableHeaderCell";
+import "@testing-library/jest-dom";
+
+describe("Table header cell", () => {
+  /**
+   * The following tests will render an complete table instead of just one standalone table cell,
+   * because React doesn't allow standalone rendering of <td>.
+   *
+   * Since simply using `:only-child` like the other tests doesn't work anymore,
+   * the following tests heavily rely on `useRef()`. (That's also why the test for ForwardRef is
+   * one of the first tests.)
+   */
+  it("renders a columnheader role element", () => {
+    render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableHeaderCell />
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+
+    const cell = screen.getByRole("columnheader");
+
+    expect(cell).toBeInTheDocument();
+    expect(cell).toBeVisible();
+  });
+
+  it("can render a rowheader role element", () => {
+    render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableHeaderCell scope="row" />
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+
+    const cell = screen.getByRole("rowheader");
+
+    expect(cell).toBeInTheDocument();
+  });
+
+  it("supports ForwardRef in React", () => {
+    const ref = createRef<HTMLTableHeaderCellElement>();
+
+    const { container } = render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableHeaderCell ref={ref} />
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+
+    const row = screen.getByRole("row");
+    const cell = row.querySelector(":only-child");
+
+    expect(ref.current).toBe(cell);
+  });
+
+  it("renders a th HTML element", () => {
+    const { container } = render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableHeaderCell />
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+    const cell = container.querySelector("th:only-child");
+
+    expect(cell).toBeInTheDocument();
+  });
+
+  it("renders a design system BEM class name", () => {
+    const ref = createRef<HTMLTableHeaderCellElement>();
+    render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableHeaderCell ref={ref} />
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+    const cell = ref.current;
+
+    expect(cell).toHaveClass("utrecht-table__header-cell");
+  });
+
+  it("renders rich text content", () => {
+    const ref = createRef<HTMLTableHeaderCellElement>();
+    render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableHeaderCell ref={ref}>
+              <abbr title="Uniform Resource Identifier ">URI</abbr>
+            </TableHeaderCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+
+    const cell = ref.current;
+
+    const richText = cell?.querySelector("abbr");
+
+    expect(richText).toBeInTheDocument();
+  });
+
+  it("can be hidden", () => {
+    const ref = createRef<HTMLTableHeaderCellElement>();
+    render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableHeaderCell ref={ref} hidden />
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+
+    expect(ref.current).not.toBeVisible();
+  });
+
+  it("can have a custom class name", () => {
+    const ref = createRef<HTMLTableHeaderCellElement>();
+    render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableHeaderCell ref={ref} className="negative">
+              -42
+            </TableHeaderCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+
+    expect(ref.current).toHaveClass("negative");
+  });
+});
diff --git a/src/components/utrecht/TableHeaderCell.tsx b/src/components/utrecht/TableHeaderCell.tsx
new file mode 100644
index 00000000..ac7a82b0
--- /dev/null
+++ b/src/components/utrecht/TableHeaderCell.tsx
@@ -0,0 +1,22 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2022 Robbert Broersma
+ */
+
+import clsx from "clsx";
+import { ForwardedRef, forwardRef, PropsWithChildren, ThHTMLAttributes } from "react";
+
+type TableHeaderCellProps = ThHTMLAttributes<HTMLTableCellElement>;
+
+export const TableHeaderCell = forwardRef(
+  (
+    { children, className, ...restProps }: PropsWithChildren<TableHeaderCellProps>,
+    ref: ForwardedRef<HTMLTableCellElement>
+  ) => (
+    <th {...restProps} ref={ref} className={clsx("utrecht-table__header-cell", className)}>
+      {children}
+    </th>
+  )
+);
+
+TableHeaderCell.displayName = "utrecht-table__header-cell";
diff --git a/src/components/utrecht/TableRow.test.tsx b/src/components/utrecht/TableRow.test.tsx
new file mode 100644
index 00000000..a065c007
--- /dev/null
+++ b/src/components/utrecht/TableRow.test.tsx
@@ -0,0 +1,106 @@
+import { render, screen } from "@testing-library/react";
+import { createRef } from "react";
+import { Table } from "./Table";
+import { TableHeader } from "./TableHeader";
+import { TableFooter } from "./TableFooter";
+import { TableBody } from "./TableBody";
+import { TableCaption } from "./TableCaption";
+import { TableRow } from "./TableRow";
+import "@testing-library/jest-dom";
+
+fdescribe("Table row", () => {
+  it("renders a table row role element", () => {
+    render(
+      <Table>
+        <TableBody>
+          <TableRow />
+        </TableBody>
+      </Table>
+    );
+
+    const table = screen.getByRole("row");
+
+    expect(table).toBeInTheDocument();
+    expect(table).toBeVisible();
+  });
+
+  it("renders an HTML tr element", () => {
+    const { container } = render(
+      <Table>
+        <TableBody>
+          <TableRow />
+        </TableBody>
+      </Table>
+    );
+
+    const table = container.querySelector(":only-child");
+    const tableBody = table?.querySelector(":only-child");
+    const tableRow = tableBody?.querySelector("tr:only-child");
+
+    expect(tableRow).toBeInTheDocument();
+  });
+
+  it("renders a design system BEM class name", () => {
+    const { container } = render(
+      <Table>
+        <TableBody>
+          <TableRow />
+        </TableBody>
+      </Table>
+    );
+    const table = container.querySelector(":only-child");
+    const tableBody = table?.querySelector(":only-child");
+    const tableRow = tableBody?.querySelector(":only-child");
+
+    expect(tableRow).toHaveClass("utrecht-table__row");
+  });
+
+  it("can be hidden", () => {
+    const { container } = render(
+      <Table>
+        <TableBody>
+          <TableRow hidden />
+        </TableBody>
+      </Table>
+    );
+    const table = container.querySelector(":only-child");
+    const tableBody = table?.querySelector(":only-child");
+    const tableRow = tableBody?.querySelector(":only-child");
+
+    expect(tableRow).not.toBeVisible();
+  });
+
+  it("can have a custom class name", () => {
+    const { container } = render(
+      <Table>
+        <TableBody>
+          <TableRow className="odd" />
+        </TableBody>
+      </Table>
+    );
+
+    const table = container.querySelector(":only-child");
+    const tableBody = table?.querySelector(":only-child");
+    const tableRow = tableBody?.querySelector(":only-child");
+
+    expect(tableRow).toHaveClass("odd");
+  });
+
+  it("supports ForwardRef in React", () => {
+    const ref = createRef<HTMLTableRowElement>();
+
+    const { container } = render(
+      <Table>
+        <TableBody>
+          <TableRow ref={ref} />
+        </TableBody>
+      </Table>
+    );
+
+    const table = container.querySelector(":only-child");
+    const tableBody = table?.querySelector(":only-child");
+    const tableRow = tableBody?.querySelector(":only-child");
+
+    expect(ref.current).toBe(tableRow);
+  });
+});
diff --git a/src/components/utrecht/TableRow.tsx b/src/components/utrecht/TableRow.tsx
new file mode 100644
index 00000000..730d0aff
--- /dev/null
+++ b/src/components/utrecht/TableRow.tsx
@@ -0,0 +1,19 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2022 Robbert Broersma
+ */
+
+import clsx from "clsx";
+import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from "react";
+
+type TableRowProps = HTMLAttributes<HTMLTableRowElement>;
+
+export const TableRow = forwardRef(
+  ({ children, className, ...restProps }: PropsWithChildren<TableRowProps>, ref: ForwardedRef<HTMLTableRowElement>) => (
+    <tr {...restProps} ref={ref} className={clsx("utrecht-table__row", className)}>
+      {children}
+    </tr>
+  )
+);
+
+TableRow.displayName = "utrecht-table__row";

From f8a00e9867127a723d654f11e44e8538974cf2b8 Mon Sep 17 00:00:00 2001
From: Robbert Broersma <mail@robbertbroersma.nl>
Date: Tue, 22 Mar 2022 11:10:23 +0100
Subject: [PATCH 4/8] feat: transaction table demo

---
 pages/amounts.tsx      | 168 +++++++++++++++++++++++++++++++++++++++++
 pages/transactions.tsx | 128 +++++++++++++++++++++++++++++++
 styles/globals.css     |   8 ++
 3 files changed, 304 insertions(+)
 create mode 100644 pages/amounts.tsx
 create mode 100644 pages/transactions.tsx

diff --git a/pages/amounts.tsx b/pages/amounts.tsx
new file mode 100644
index 00000000..1fd6cc5b
--- /dev/null
+++ b/pages/amounts.tsx
@@ -0,0 +1,168 @@
+import { UtrechtDocument } from "@utrecht/web-component-library-react";
+import Head from "next/head";
+import { ValueCurrency } from "../src/components/ValueCurrency";
+import { Table } from "../src/components/utrecht/Table";
+import { TableBody } from "../src/components/utrecht/TableBody";
+import { TableCell } from "../src/components/utrecht/TableCell";
+import { TableHeader } from "../src/components/utrecht/TableHeader";
+import { TableHeaderCell } from "../src/components/utrecht/TableHeaderCell";
+import { TableRow } from "../src/components/utrecht/TableRow";
+
+export default function AmountsDemo() {
+  return (
+    <>
+      <UtrechtDocument lang="nl">
+        <Head>
+          <title>Voorbeeld met bedragen</title>
+        </Head>
+
+        <main>
+          <h1>Voorbeeld met bedragen</h1>
+          <p>Dit is een tijdelijke pagina.</p>
+          <p>Lijst met eerst het bedrag uitgeschreven in tekst, daarna volgt de versie met speciale opmaak.</p>
+          <section>
+            <h2>Nederlands</h2>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHeaderCell>Type bedrag</TableHeaderCell>
+                  <TableHeaderCell>Uitgeschreven</TableHeaderCell>
+                  <TableHeaderCell>Toegankelijk label</TableHeaderCell>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                <TableRow>
+                  <TableCell>rond bedrag</TableCell>
+                  <TableCell>honderddrieëntwintig euro</TableCell>
+                  <TableCell>
+                    <ValueCurrency locale="nl-NL" currency="EUR" amount="123"></ValueCurrency>
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>bedrag met centen</TableCell>
+                  <TableCell>drie euro en vijfennegentig cent</TableCell>
+                  <TableCell>
+                    <ValueCurrency locale="nl-NL" currency="EUR" amount="3.95"></ValueCurrency>
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>bedrag met alleen centen</TableCell>
+                  <TableCell>negenennegentig eurocent</TableCell>
+                  <TableCell>
+                    <ValueCurrency locale="nl-NL" currency="EUR" amount="0.99"></ValueCurrency>
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>negatief bedrag</TableCell>
+                  <TableCell>minus drie euro en vijfennegentig cent</TableCell>
+                  <TableCell>
+                    <ValueCurrency locale="nl-NL" currency="EUR" amount="-3.95"></ValueCurrency>
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>groot bedrag</TableCell>
+                  <TableCell>vierhonderdvijfendertigduizend euro</TableCell>
+                  <TableCell>
+                    <ValueCurrency locale="nl-NL" currency="EUR" amount="435000"></ValueCurrency>
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>bedrag in buitenlandse valuta</TableCell>
+                  <TableCell>honderd Amerikaanse dollar</TableCell>
+                  <TableCell>
+                    <ValueCurrency locale="nl-NL" currency="USD" amount="100"></ValueCurrency>
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>bedrag in buitenlandse valuta</TableCell>
+                  <TableCell>honderd Canadese dollar</TableCell>
+                  <TableCell>
+                    <ValueCurrency locale="nl-NL" currency="CAD" amount="100"></ValueCurrency>
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>bedrag in buitenlandse valuta</TableCell>
+                  <TableCell>honderd Britse pond</TableCell>
+                  <TableCell>
+                    <ValueCurrency locale="nl-NL" currency="GBP" amount="100"></ValueCurrency>
+                  </TableCell>
+                </TableRow>
+                <TableRow></TableRow>
+              </TableBody>
+            </Table>
+          </section>
+          <section lang="en-US">
+            <h2>American English</h2>
+            <Table>
+              <thead>
+                <TableRow>
+                  <TableHeaderCell>Type of amount</TableHeaderCell>
+                  <TableHeaderCell>Written in full</TableHeaderCell>
+                  <TableHeaderCell>Accessible label</TableHeaderCell>
+                </TableRow>
+              </thead>
+              <TableBody>
+                <TableRow>
+                  <TableCell>simple amount</TableCell>
+                  <TableCell>one hundred twenty-three dollars</TableCell>
+                  <TableCell>
+                    <ValueCurrency locale="en-US" currency="USD" amount="123"></ValueCurrency>
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>amount with cents</TableCell>
+                  <TableCell>three dollars ninety-five</TableCell>
+                  <TableCell>
+                    <ValueCurrency locale="en-US" currency="USD" amount="3.95"></ValueCurrency>
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>only cents</TableCell>
+                  <TableCell>ninety-nine cents</TableCell>
+                  <TableCell>
+                    <ValueCurrency locale="en-US" currency="USD" amount="0.99"></ValueCurrency>
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>negative amount</TableCell>
+                  <TableCell>minus three dollars and ninety-five cents</TableCell>
+                  <TableCell>
+                    <ValueCurrency locale="en-US" currency="USD" amount="-3.95"></ValueCurrency>
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>large amount</TableCell>
+                  <TableCell>four hundred thirty-five thousand dollars</TableCell>
+                  <TableCell>
+                    <ValueCurrency locale="en-US" currency="USD" amount="435000"></ValueCurrency>
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>amount with foreign currency</TableCell>
+                  <TableCell>one hundred Euros</TableCell>
+                  <TableCell>
+                    <ValueCurrency locale="nl-NL" currency="EUR" amount="100"></ValueCurrency>
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>amount with foreign currency</TableCell>
+                  <TableCell>one hundred Canadian dollars</TableCell>
+                  <TableCell>
+                    <ValueCurrency locale="nl-NL" currency="CAD" amount="100"></ValueCurrency>
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>amount with foreign currency</TableCell>
+                  <TableCell>one hundred pound sterling</TableCell>
+                  <TableCell>
+                    <ValueCurrency locale="nl-NL" currency="GBP" amount="100"></ValueCurrency>
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+          </section>
+        </main>
+      </UtrechtDocument>
+    </>
+  );
+}
diff --git a/pages/transactions.tsx b/pages/transactions.tsx
new file mode 100644
index 00000000..c2dd1a08
--- /dev/null
+++ b/pages/transactions.tsx
@@ -0,0 +1,128 @@
+/* eslint-disable react/no-unescaped-entities */
+
+import { UtrechtDocument } from "@utrecht/web-component-library-react";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { AlternateLangNavComponent } from "../src/AlternateLangNavComponent";
+import { ValueCurrency } from "../src/components/ValueCurrency";
+import { ValueDate } from "../src/components/ValueDate";
+import { Heading1 } from "../src/components/utrecht/Heading1";
+import { Heading2 } from "../src/components/utrecht/Heading2";
+import { Paragraph } from "../src/components/utrecht/Paragraph";
+import { Table } from "../src/components/utrecht/Table";
+import { TableBody } from "../src/components/utrecht/TableBody";
+import { TableCell } from "../src/components/utrecht/TableCell";
+import { TableHeader } from "../src/components/utrecht/TableHeader";
+import { TableHeaderCell } from "../src/components/utrecht/TableHeaderCell";
+import { TableRow } from "../src/components/utrecht/TableRow";
+import { UnorderedList } from "../src/components/utrecht/UnorderedList";
+import { UnorderedListItem } from "../src/components/utrecht/UnorderedListItem";
+
+export default function Home() {
+  const locale = useRouter().locale || "en";
+
+  const locales = [
+    {
+      lang: "en",
+      hrefLang: "en",
+      title: "This page in English",
+      textContent: "EN",
+    },
+    {
+      lang: "nl",
+      hrefLang: "nl",
+      title: "Deze pagina in Nederlands",
+      textContent: "NL",
+    },
+  ];
+
+  return (
+    <>
+      <UtrechtDocument lang="nl">
+        <Head>
+          <title>Voorbeeld met banktransacties</title>
+        </Head>
+        <header>
+          <nav>
+            <AlternateLangNavComponent locales={locales} />
+          </nav>
+        </header>
+
+        <main>
+          <Heading1>Voorbeeld met banktransacties</Heading1>
+          <Paragraph>Dit is een tijdelijke pagina.</Paragraph>
+          <UnorderedList>
+            <UnorderedListItem>
+              Voor de tabel is geen <code>caption</code> gebruikt maar een heading element (<code>h2</code> in dit
+              geval), zodat je de sneltoetsen voor "volgende heading" en "vorige heading" snel de goede tabel kan
+              vinden.
+            </UnorderedListItem>
+            <UnorderedListItem>
+              De heading is gekoppeld aan de tabel met <code>aria-labelledby</code>, zodat wanneer de tabel wordt
+              weergegeven door een screenreader wel de heading het effect heeft van een table caption. Zonder deze
+              koppeling, wanneer je achteruit door het document gaat, zou je een tabel tegenkomen zonder de context waar
+              het over gaat.
+            </UnorderedListItem>
+            <UnorderedListItem>
+              De bedragen in de tabel zijn voorzien van een <code>aria-label</code> waar de notatie van het bedrag is
+              geoptimaliseerd voor onder andere screen readers (zodat de waarde{" "}
+              <q lang="en">programmatically determined</q> kan worden).
+            </UnorderedListItem>
+          </UnorderedList>
+          <Heading2 id="8b19a39d-cdbb-4c97-bbeb-b1a8e568b7bd">januari 2022</Heading2>
+          <Table aria-labelledby="8b19a39d-cdbb-4c97-bbeb-b1a8e568b7bd">
+            <TableHeader>
+              <TableRow>
+                <TableHeaderCell>Icoon</TableHeaderCell>
+                <TableHeaderCell>
+                  <div className="sr-only">Datum</div>
+                </TableHeaderCell>
+                <TableHeaderCell>Onderwerp</TableHeaderCell>
+                <TableHeaderCell>Bedrag</TableHeaderCell>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              <TableRow>
+                <TableCell></TableCell>
+                <TableCell>
+                  <ValueDate date="2022-01-20" className="sr-only" />
+                </TableCell>
+                <TableCell>
+                  <div className="reverse">
+                    <div aria-hidden="true">
+                      <ValueDate date="2022-01-20" />
+                    </div>
+                    <div>Leefgeld</div>
+                  </div>
+                </TableCell>
+                <TableCell className="utrecht-table__cell--numeric-column utrecht-table__cell--numeric-data">
+                  <ValueCurrency locale={locale} currency="EUR" amount="-456" />
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell></TableCell>
+                <TableCell>
+                  <ValueDate date="2022-01-20" className="sr-only" />
+                </TableCell>
+                <TableCell>
+                  <div className="reverse">
+                    <div aria-hidden="true">
+                      <ValueDate date="2022-01-20" />
+                    </div>
+                    <div>Belastingdienst</div>
+                  </div>
+                </TableCell>
+                <TableCell hidden>
+                  <ValueDate date="2022-01-20" />
+                </TableCell>
+                <TableCell className="utrecht-table__cell--numeric-column utrecht-table__cell--numeric-data">
+                  <ValueCurrency locale={locale} currency="EUR" amount="123" />
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </main>
+      </UtrechtDocument>
+    </>
+  );
+}
diff --git a/styles/globals.css b/styles/globals.css
index 42ca60c6..8cdf7166 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -4,3 +4,11 @@ body {
   margin-inline-end: 0;
   margin-inline-start: 0;
 }
+
+.example-value--date {
+  color: grey;
+}
+
+.example-value--positive {
+  color: green;
+}

From 153ab007f604f2ffd5d9bda165ad6fbfb0812031 Mon Sep 17 00:00:00 2001
From: Robbert Broersma <mail@robbertbroersma.nl>
Date: Tue, 22 Mar 2022 11:57:45 +0100
Subject: [PATCH 5/8] ci: tmp deploy of this branch

---
 .github/workflows/continuous-delivery.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/continuous-delivery.yml b/.github/workflows/continuous-delivery.yml
index 1f8bd960..ce00ce17 100644
--- a/.github/workflows/continuous-delivery.yml
+++ b/.github/workflows/continuous-delivery.yml
@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - main
+      - feat/currency
   pull_request:
 
 jobs:

From 17258c5467842950a1e7512dd42d91cb2c98c589 Mon Sep 17 00:00:00 2001
From: Robbert Broersma <mail@robbertbroersma.nl>
Date: Fri, 25 Mar 2022 12:40:31 +0100
Subject: [PATCH 6/8] build: more flexible csp

---
 next.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/next.config.js b/next.config.js
index cbc2b2c5..3f95b620 100644
--- a/next.config.js
+++ b/next.config.js
@@ -15,7 +15,7 @@ module.exports = {
         headers: [
           {
             key: 'Content-Security-Policy',
-            value: "default-src 'self'",
+            value: "default-src 'self'; style-src data: 'self' 'unsafe-inline'; script-src data: 'self' 'unsafe-eval'",
           },
           {
             key: 'Referrer-Policy',

From 374e44d1cc18a40344acb0bc631c032b042aa5eb Mon Sep 17 00:00:00 2001
From: Robbert Broersma <mail@robbertbroersma.nl>
Date: Wed, 30 Mar 2022 12:54:34 +0200
Subject: [PATCH 7/8] feat: ValueDate component

---
 src/components/ValueDate.tsx | 39 ++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/components/ValueDate.tsx

diff --git a/src/components/ValueDate.tsx b/src/components/ValueDate.tsx
new file mode 100644
index 00000000..c6319b7a
--- /dev/null
+++ b/src/components/ValueDate.tsx
@@ -0,0 +1,39 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Robbert Broersma
+ */
+
+import clsx from "clsx";
+import { ForwardedRef, forwardRef, HTMLAttributes } from "react";
+
+interface ValueDateProps extends HTMLAttributes<HTMLDataElement> {
+  date: string;
+  locale?: string;
+}
+
+export const formatDate = (locale: string, date: string): string =>
+  new Intl.DateTimeFormat(locale, { dateStyle: "full" }).format(Date.parse("2022-01-20"));
+
+export const ValueDate = forwardRef(
+  (
+    { children, date, locale = "nl-NL", className, ...restProps }: ValueDateProps,
+    ref: ForwardedRef<HTMLDataElement>
+  ) => {
+    const formatted = formatDate(locale, date);
+
+    // We considered <time dateTime="...">.
+    // Unfortunately screen reader user experience was diminished by repeating the date.
+    return (
+      <data
+        {...restProps}
+        ref={ref}
+        value={`${date}`}
+        className={clsx("example-value", "example-value--date", className)}
+      >
+        {children || formatted}
+      </data>
+    );
+  }
+);
+
+ValueDate.displayName = "example-value--date";

From 683f84f22e78ea2f84486bf643a632dd11b18971 Mon Sep 17 00:00:00 2001
From: Robbert Broersma <mail@robbertbroersma.nl>
Date: Wed, 30 Mar 2022 15:47:21 +0200
Subject: [PATCH 8/8] WIP

---
 next.config.js     |  3 ++-
 pages/_app.tsx     |  6 ------
 styles/globals.css | 19 +++++++++++++++++++
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/next.config.js b/next.config.js
index 3f95b620..ce2eb652 100644
--- a/next.config.js
+++ b/next.config.js
@@ -15,7 +15,8 @@ module.exports = {
         headers: [
           {
             key: 'Content-Security-Policy',
-            value: "default-src 'self'; style-src data: 'self' 'unsafe-inline'; script-src data: 'self' 'unsafe-eval'",
+            value:
+              "default-src 'self'; style-src data: 'self' 'unsafe-inline'; script-src data: 'self' 'unsafe-eval'; connect-src 'self'",
           },
           {
             key: 'Referrer-Policy',
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 09fcbf0d..f1f7e6cc 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -8,12 +8,6 @@ function MyApp({ Component, pageProps }: AppProps) {
   useEffect(() => {
     import("@utrecht/web-component-library-stencil/dist/utrecht/utrecht.esm.js");
   }, []);
-  useEffect(() => {
-    const script = document.createElement("script");
-    script.async = true;
-    script.src = "https://unpkg.com/@nl-design-system-unstable/theme-switcher";
-    document.body.appendChild(script);
-  }, []);
 
   useEffect(() => {
     document.documentElement.classList.add("utrecht-theme");
diff --git a/styles/globals.css b/styles/globals.css
index 8cdf7166..9b39fdd3 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -12,3 +12,22 @@ body {
 .example-value--positive {
   color: green;
 }
+
+.sr-only {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  margin: -1px !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important;
+}
+
+.reverse {
+  display: flex;
+  flex-direction: column-reverse;
+}