@amsterdam/design-system-react 0.14.1 → 0.15.0

package/dist/Table/Table.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { TableBody } from './TableBody';
+import { TableCaption } from './TableCaption';
+import { TableCell } from './TableCell';
+import { TableFooter } from './TableFooter';
+import { TableHeader } from './TableHeader';
+import { TableHeaderCell } from './TableHeaderCell';
+import { TableRow } from './TableRow';
+const TableRoot = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("div", { className: "ams-table", children: _jsx("table", { ...restProps, className: clsx('ams-table__table', className), ref: ref, children: children }) })));
+TableRoot.displayName = 'Table';
+export const Table = Object.assign(TableRoot, {
+    Body: TableBody,
+    Caption: TableCaption,
+    Cell: TableCell,
+    Footer: TableFooter,
+    Header: TableHeader,
+    HeaderCell: TableHeaderCell,
+    Row: TableRow,
+});

package/dist/Table/Table.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Table/Table.test.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Table } from './Table';
+import '@testing-library/jest-dom';
+describe('Table', () => {
+    it('renders', () => {
+        render(_jsx(Table, {}));
+        const component = screen.getByRole('table');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(Table, {}));
+        const component = screen.getByRole('table');
+        expect(component).toHaveClass('ams-table__table');
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(Table, { className: "extra" }));
+        const component = screen.getByRole('table');
+        expect(component).toHaveClass('ams-table__table extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(Table, { ref: ref }));
+        const component = screen.getByRole('table');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Table/TableBody.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type TableBodyProps = PropsWithChildren<HTMLAttributes<HTMLTableSectionElement>>;
+export declare const TableBody: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLTableSectionElement>>;

package/dist/Table/TableBody.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+export const TableBody = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("tbody", { ...restProps, className: clsx('ams-table__body', className), ref: ref, children: children })));
+TableBody.displayName = 'Table.Body';

package/dist/Table/TableBody.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Table/TableBody.test.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Table } from './Table';
+import { TableBody } from './TableBody';
+import '@testing-library/jest-dom';
+describe('Table body', () => {
+    it('renders', () => {
+        render(_jsx(Table, { children: _jsx(TableBody, {}) }));
+        const component = screen.getByRole('rowgroup');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(Table, { children: _jsx(TableBody, {}) }));
+        const component = screen.getByRole('rowgroup');
+        expect(component).toHaveClass('ams-table__body');
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(Table, { children: _jsx(TableBody, { className: "extra" }) }));
+        const component = screen.getByRole('rowgroup');
+        expect(component).toHaveClass('ams-table__body extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(Table, { children: _jsx(TableBody, { ref: ref }) }));
+        const component = screen.getByRole('rowgroup');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Table/TableCaption.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2022 Robbert Broersma
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type TableCaptionProps = PropsWithChildren<HTMLAttributes<HTMLTableCaptionElement>>;
+export declare const TableCaption: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableCaptionElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLTableCaptionElement>>;

package/dist/Table/TableCaption.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2022 Robbert Broersma
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+export const TableCaption = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("caption", { ...restProps, className: clsx('ams-table__caption', className), ref: ref, children: children })));
+TableCaption.displayName = 'Table.Caption';

package/dist/Table/TableCaption.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Table/TableCaption.test.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Table } from './Table';
+import { TableCaption } from './TableCaption';
+import '@testing-library/jest-dom';
+describe('Table caption', () => {
+    it('renders', () => {
+        render(_jsx(Table, { children: _jsx(TableCaption, { children: "Caption" }) }));
+        const component = screen.getByRole('table', {
+            name: 'Caption',
+        });
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(Table, { children: _jsx(TableCaption, { children: "Caption" }) }));
+        const component = screen.getByRole('table', {
+            name: 'Caption',
+        });
+        const caption = component?.querySelector(':only-child');
+        expect(caption).toHaveClass('ams-table__caption');
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(Table, { children: _jsx(TableCaption, { className: "extra", children: "Caption" }) }));
+        const component = screen.getByRole('table', {
+            name: 'Caption',
+        });
+        const caption = component?.querySelector(':only-child');
+        expect(caption).toHaveClass('ams-table__caption extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(Table, { children: _jsx(TableCaption, { ref: ref, children: "Caption" }) }));
+        const component = screen.getByRole('table', {
+            name: 'Caption',
+        });
+        const caption = component?.querySelector(':only-child');
+        expect(ref.current).toBe(caption);
+    });
+});

package/dist/Table/TableCell.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { PropsWithChildren, TdHTMLAttributes } from 'react';
+export type TableCellProps = PropsWithChildren<TdHTMLAttributes<HTMLTableCellElement>>;
+export declare const TableCell: import("react").ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLTableCellElement>>;

package/dist/Table/TableCell.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+export const TableCell = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("td", { ...restProps, className: clsx('ams-table__cell', className), ref: ref, children: children })));
+TableCell.displayName = 'Table.Cell';

package/dist/Table/TableCell.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Table/TableCell.test.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Table } from './Table';
+import { TableBody } from './TableBody';
+import { TableCell } from './TableCell';
+import { TableRow } from './TableRow';
+import '@testing-library/jest-dom';
+describe('Table cell', () => {
+    it('renders', () => {
+        render(_jsx(Table, { children: _jsx(TableBody, { children: _jsx(TableRow, { children: _jsx(TableCell, { children: "Data" }) }) }) }));
+        const component = screen.getByRole('cell');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(Table, { children: _jsx(TableBody, { children: _jsx(TableRow, { children: _jsx(TableCell, { children: "Data" }) }) }) }));
+        const component = screen.getByRole('cell');
+        expect(component).toHaveClass('ams-table__cell');
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(Table, { children: _jsx(TableBody, { children: _jsx(TableRow, { children: _jsx(TableCell, { className: "extra", children: "Data" }) }) }) }));
+        const component = screen.getByRole('cell');
+        expect(component).toHaveClass('ams-table__cell extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(Table, { children: _jsx(TableBody, { children: _jsx(TableRow, { children: _jsx(TableCell, { ref: ref, children: "Data" }) }) }) }));
+        const component = screen.getByRole('cell');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Table/TableFooter.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type TableFooterProps = PropsWithChildren<HTMLAttributes<HTMLTableSectionElement>>;
+export declare const TableFooter: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLTableSectionElement>>;

package/dist/Table/TableFooter.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+export const TableFooter = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("tfoot", { ...restProps, className: clsx('ams-table__footer', className), ref: ref, children: children })));
+TableFooter.displayName = 'Table.Footer';

package/dist/Table/TableFooter.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Table/TableFooter.test.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Table } from './Table';
+import { TableFooter } from './TableFooter';
+import '@testing-library/jest-dom';
+describe('Table footer', () => {
+    it('renders', () => {
+        render(_jsx(Table, { children: _jsx(TableFooter, {}) }));
+        const component = screen.getByRole('rowgroup');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(Table, { children: _jsx(TableFooter, {}) }));
+        const component = screen.getByRole('rowgroup');
+        expect(component).toHaveClass('ams-table__footer');
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(Table, { children: _jsx(TableFooter, { className: "extra" }) }));
+        const component = screen.getByRole('rowgroup');
+        expect(component).toHaveClass('ams-table__footer extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(Table, { children: _jsx(TableFooter, { ref: ref }) }));
+        const component = screen.getByRole('rowgroup');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Table/TableHeader.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type TableHeaderProps = PropsWithChildren<HTMLAttributes<HTMLTableSectionElement>>;
+export declare const TableHeader: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLTableSectionElement>>;

package/dist/Table/TableHeader.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+export const TableHeader = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("thead", { ...restProps, className: clsx('ams-table__header', className), ref: ref, children: children })));
+TableHeader.displayName = 'Table.Header';

package/dist/Table/TableHeader.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Table/TableHeader.test.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Table } from './Table';
+import { TableHeader } from './TableHeader';
+import '@testing-library/jest-dom';
+describe('Table header', () => {
+    it('renders', () => {
+        render(_jsx(Table, { children: _jsx(TableHeader, {}) }));
+        const component = screen.getByRole('rowgroup');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(Table, { children: _jsx(TableHeader, {}) }));
+        const component = screen.getByRole('rowgroup');
+        expect(component).toHaveClass('ams-table__header');
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(Table, { children: _jsx(TableHeader, { className: "extra" }) }));
+        const component = screen.getByRole('rowgroup');
+        expect(component).toHaveClass('ams-table__header extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(Table, { children: _jsx(TableHeader, { ref: ref }) }));
+        const component = screen.getByRole('rowgroup');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Table/TableHeaderCell.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { PropsWithChildren, ThHTMLAttributes } from 'react';
+export type TableHeaderCellProps = PropsWithChildren<ThHTMLAttributes<HTMLTableCellElement>>;
+export declare const TableHeaderCell: import("react").ForwardRefExoticComponent<ThHTMLAttributes<HTMLTableCellElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLTableCellElement>>;

package/dist/Table/TableHeaderCell.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+export const TableHeaderCell = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("th", { ...restProps, className: clsx('ams-table__header-cell', className), ref: ref, children: children })));
+TableHeaderCell.displayName = 'Table.HeaderCell';

package/dist/Table/TableHeaderCell.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Table/TableHeaderCell.test.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Table } from './Table';
+import { TableHeader } from './TableHeader';
+import { TableHeaderCell } from './TableHeaderCell';
+import { TableRow } from './TableRow';
+import '@testing-library/jest-dom';
+describe('Table header cell', () => {
+    it('renders', () => {
+        render(_jsx(Table, { children: _jsx(TableHeader, { children: _jsx(TableRow, { children: _jsx(TableHeaderCell, { children: "Data" }) }) }) }));
+        const component = screen.getByRole('columnheader');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a rowheader when you specify it', () => {
+        render(_jsx(Table, { children: _jsx(TableHeader, { children: _jsx(TableRow, { children: _jsx(TableHeaderCell, { scope: "row", children: "Data" }) }) }) }));
+        const component = screen.getByRole('rowheader');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(Table, { children: _jsx(TableHeader, { children: _jsx(TableRow, { children: _jsx(TableHeaderCell, { children: "Data" }) }) }) }));
+        const component = screen.getByRole('columnheader');
+        expect(component).toHaveClass('ams-table__header-cell');
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(Table, { children: _jsx(TableHeader, { children: _jsx(TableRow, { children: _jsx(TableHeaderCell, { className: "extra", children: "Data" }) }) }) }));
+        const component = screen.getByRole('columnheader');
+        expect(component).toHaveClass('ams-table__header-cell extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(Table, { children: _jsx(TableHeader, { children: _jsx(TableRow, { children: _jsx(TableHeaderCell, { ref: ref, children: "Data" }) }) }) }));
+        const component = screen.getByRole('columnheader');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Table/TableRow.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type TableRowProps = PropsWithChildren<HTMLAttributes<HTMLTableRowElement>>;
+export declare const TableRow: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLTableRowElement>>;

package/dist/Table/TableRow.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+export const TableRow = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("tr", { ...restProps, className: clsx('ams-table__row', className), ref: ref, children: children })));
+TableRow.displayName = 'Table.Row';

package/dist/Table/TableRow.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Table/TableRow.test.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Table } from './Table';
+import { TableBody } from './TableBody';
+import { TableRow } from './TableRow';
+import '@testing-library/jest-dom';
+describe('Table row', () => {
+    it('renders', () => {
+        render(_jsx(Table, { children: _jsx(TableBody, { children: _jsx(TableRow, {}) }) }));
+        const component = screen.getByRole('row');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(Table, { children: _jsx(TableBody, { children: _jsx(TableRow, {}) }) }));
+        const component = screen.getByRole('row');
+        expect(component).toHaveClass('ams-table__row');
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(Table, { children: _jsx(TableBody, { children: _jsx(TableRow, { className: "extra" }) }) }));
+        const component = screen.getByRole('row');
+        expect(component).toHaveClass('ams-table__row extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(Table, { children: _jsx(TableBody, { children: _jsx(TableRow, { ref: ref }) }) }));
+        const component = screen.getByRole('row');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Table/index.d.ts

@@ -0,0 +1,2 @@
+export { Table } from './Table';
+export type { TableProps } from './Table';

package/dist/Table/index.js

@@ -0,0 +1 @@
+export { Table } from './Table';

package/dist/TableOfContents/TableOfContents.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+import type { HeadingProps } from '../Heading';
+export type TableOfContentsProps = {
+    /** The text for the Heading. */
+    heading?: string;
+    /**
+     * The hierarchical level of the Heading within the document.
+     * Note: this intentionally does not change the font size.
+     */
+    headingLevel?: HeadingProps['level'];
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+export declare const TableOfContents: import("react").ForwardRefExoticComponent<{
+    /** The text for the Heading. */
+    heading?: string;
+    /**
+     * The hierarchical level of the Heading within the document.
+     * Note: this intentionally does not change the font size.
+     */
+    headingLevel?: HeadingProps["level"];
+} & HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLElement>> & {
+    Link: import("react").ForwardRefExoticComponent<{
+        label: string;
+    } & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;
+    List: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLUListElement>>;
+};

package/dist/TableOfContents/TableOfContents.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { TableOfContentsLink } from './TableOfContentsLink';
+import { TableOfContentsList } from './TableOfContentsList';
+import { Heading } from '../Heading';
+const TableOfContentsRoot = forwardRef(({ children, className, heading, headingLevel = 2, ...restProps }, ref) => {
+    return (_jsxs("nav", { ...restProps, className: clsx('ams-table-of-contents', className), ref: ref, children: [heading && (_jsx(Heading, { className: "ams-table-of-contents__heading", level: headingLevel, size: "level-4", children: heading })), children] }));
+});
+TableOfContentsRoot.displayName = 'TableOfContents';
+export const TableOfContents = Object.assign(TableOfContentsRoot, {
+    Link: TableOfContentsLink,
+    List: TableOfContentsList,
+});

package/dist/TableOfContents/TableOfContents.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/TableOfContents/TableOfContents.test.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { TableOfContents } from './TableOfContents';
+import '@testing-library/jest-dom';
+describe('Table of contents', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(TableOfContents, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders its children', () => {
+        render(_jsx(TableOfContents, { children: _jsx(TableOfContents.List, {}) }));
+        const testChild = screen.getByRole('list');
+        expect(testChild).toBeTruthy();
+    });
+    it('renders a heading', () => {
+        render(_jsx(TableOfContents, { heading: "Test heading" }));
+        const heading = screen.getByRole('heading');
+        expect(heading).toBeInTheDocument();
+        expect(heading).toHaveTextContent('Test heading');
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(TableOfContents, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-table-of-contents');
+    });
+    it('renders an additional class name', () => {
+        const { container } = render(_jsx(TableOfContents, { className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-table-of-contents extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(TableOfContents, { ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/TableOfContents/TableOfContentsLink.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { AnchorHTMLAttributes } from 'react';
+export type TableOfContentsLinkProps = {
+    /** The text for the link. */
+    label: string;
+} & AnchorHTMLAttributes<HTMLAnchorElement>;
+export declare const TableOfContentsLink: import("react").ForwardRefExoticComponent<{
+    /** The text for the link. */
+    label: string;
+} & AnchorHTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/TableOfContents/TableOfContentsLink.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+export const TableOfContentsLink = forwardRef(({ children, className, label, ...restProps }, ref) => (_jsxs("li", { className: "ams-table-of-contents__item", children: [_jsx("a", { ...restProps, className: clsx('ams-table-of-contents__link', className), ref: ref, children: label }), children] })));
+TableOfContentsLink.displayName = 'TableOfContents.Link';

package/dist/TableOfContents/TableOfContentsLink.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';