@amsterdam/design-system-react 0.14.1 → 0.16.0

package/dist/FileList/FileList.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { FileListItem } from './FileListItem';
+export const FileListRoot = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("ul", { ...restProps, className: clsx('ams-file-list', className), ref: ref, children: children })));
+FileListRoot.displayName = 'FileList';
+export const FileList = Object.assign(FileListRoot, {
+    Item: FileListItem,
+});

package/dist/FileList/FileList.test.d.ts

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

package/dist/FileList/FileList.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 { FileList } from './FileList';
+import '@testing-library/jest-dom';
+describe('FileList', () => {
+    it('renders', () => {
+        render(_jsx(FileList, {}));
+        const component = screen.getByRole('list');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(FileList, {}));
+        const component = screen.getByRole('list');
+        expect(component).toHaveClass('ams-file-list');
+    });
+    it('renders an extra class name', () => {
+        render(_jsx(FileList, { className: "extra" }));
+        const component = screen.getByRole('list');
+        expect(component).toHaveClass('ams-file-list extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(FileList, { ref: ref }));
+        const component = screen.getByRole('list');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/FileList/FileListItem.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes } from 'react';
+export type FileListItemProps = {
+    file: File;
+    onDelete?: () => void;
+} & HTMLAttributes<HTMLLIElement>;
+export declare const FileListItem: import("react").ForwardRefExoticComponent<{
+    file: File;
+    onDelete?: () => void;
+} & HTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>;

package/dist/FileList/FileListItem.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { DocumentIcon } from '@amsterdam/design-system-react-icons';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+import { formatFileSize } from '../common/formatFileSize';
+import { formatFileType } from '../common/formatFileType';
+export const FileListItem = forwardRef(({ className, file, onDelete, ...restProps }, ref) => (_jsxs("li", { ...restProps, className: clsx('ams-file-list__item', className), ref: ref, children: [_jsx("div", { className: "ams-file-list__item-preview", children: file.type.startsWith('image/') ? (_jsx("img", { alt: file.name, src: URL.createObjectURL(file) })) : (_jsx(Icon, { size: "heading-3", square: true, svg: DocumentIcon })) }), _jsxs("div", { className: "ams-file-list__item-info", children: [file.name, _jsxs("div", { className: "ams-file-input__item-details", children: ["(", formatFileType(file.type), ", ", formatFileSize(file.size), ")"] })] }), onDelete && (_jsx("div", { children: _jsx(Button, { onClick: () => onDelete(), variant: "tertiary", children: "Verwijder" }) }))] })));
+FileListItem.displayName = 'FileList.Item';

package/dist/FileList/FileListItem.test.d.ts

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

package/dist/FileList/FileListItem.test.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import '@testing-library/jest-dom';
+import { FileListItem } from './FileListItem';
+describe('FileListItem', () => {
+    const file = new File(['sample content'], 'sample.txt', { type: 'text/plain' });
+    it('renders', () => {
+        render(_jsx(FileListItem, { file: file }));
+        const component = screen.getByRole('listitem');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(FileListItem, { file: file }));
+        const component = screen.getByRole('listitem');
+        expect(component).toHaveClass('ams-file-list__item');
+    });
+    it('renders an extra class name', () => {
+        render(_jsx(FileListItem, { className: "extra", file: file }));
+        const component = screen.getByRole('listitem');
+        expect(component).toHaveClass('ams-file-list__item extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(FileListItem, { file: file, ref: ref }));
+        const component = screen.getByRole('listitem');
+        expect(ref.current).toBe(component);
+    });
+    it('renders the file name', () => {
+        render(_jsx(FileListItem, { file: file }));
+        expect(screen.getByText('sample.txt')).toBeInTheDocument();
+    });
+    it('calls onDelete when the remove button is clicked', () => {
+        const onDelete = jest.fn();
+        render(_jsx(FileListItem, { file: file, onDelete: onDelete }));
+        fireEvent.click(screen.getByRole('button'));
+        expect(onDelete).toHaveBeenCalledTimes(1);
+    });
+});

package/dist/FileList/index.d.ts

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

package/dist/FileList/index.js

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

package/dist/Grid/Grid.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type GridColumnNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type GridColumnNumbers = {
+    narrow: 1 | 2 | 3 | 4;
+    medium: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    wide: GridColumnNumber;
+};
+export declare const gridGaps: readonly ["none", "large", "2x-large"];
+export type GridGap = (typeof gridGaps)[number];
+export declare const gridPaddings: readonly ["large", "x-large", "2x-large"];
+export type GridPadding = (typeof gridPaddings)[number];
+export declare const gridTags: readonly ["article", "aside", "div", "footer", "header", "main", "nav", "section"];
+export type GridTag = (typeof gridTags)[number];
+type GridPaddingVerticalProp = {
+    paddingBottom?: never;
+    paddingTop?: never;
+    /** The amount of space above and below. */
+    paddingVertical?: GridPadding;
+};
+type GridPaddingTopAndBottomProps = {
+    /** The amount of space below. */
+    paddingBottom?: GridPadding;
+    /** The amount of space above. */
+    paddingTop?: GridPadding;
+    paddingVertical?: never;
+};
+export type GridProps = {
+    /** The HTML tag to use. */
+    as?: GridTag;
+    /** The amount of space between rows. */
+    gapVertical?: GridGap;
+} & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+export declare const Grid: import("react").ForwardRefExoticComponent<GridProps & import("react").RefAttributes<any>> & {
+    Cell: import("react").ForwardRefExoticComponent<import("./GridCell").GridCellProps & import("react").RefAttributes<unknown>>;
+};
+export {};

package/dist/Grid/Grid.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { GridCell } from './GridCell';
+import { paddingClasses } from './paddingClasses';
+export const gridGaps = ['none', 'large', '2x-large'];
+export const gridPaddings = ['large', 'x-large', '2x-large'];
+export const gridTags = ['article', 'aside', 'div', 'footer', 'header', 'main', 'nav', 'section'];
+const GridRoot = forwardRef(({ as: Tag = 'div', children, className, gapVertical, paddingBottom, paddingTop, paddingVertical, ...restProps }, ref) => (_jsx(Tag, { ...restProps, className: clsx('ams-grid', gapVertical && `ams-grid--gap-vertical--${gapVertical}`, paddingClasses('grid', paddingBottom, paddingTop, paddingVertical), className), ref: ref, children: children })));
+GridRoot.displayName = 'Grid';
+export const Grid = Object.assign(GridRoot, { Cell: GridCell });

package/dist/Grid/Grid.test.d.ts

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

package/dist/Grid/Grid.test.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Grid, gridGaps, gridPaddings, gridTags } from './Grid';
+import { ariaRoleForTag } from '../common/accessibility';
+import '@testing-library/jest-dom';
+describe('Grid', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(Grid, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(Grid, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-grid');
+    });
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(Grid, { className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-grid extra');
+    });
+    gridGaps.forEach((size) => {
+        it(`renders the correct class name for a ${size} vertical gap`, () => {
+            const { container } = render(_jsx(Grid, { gapVertical: size }));
+            const component = container.querySelector(':only-child');
+            expect(component).toHaveClass(`ams-grid--gap-vertical--${size}`);
+        });
+    });
+    gridPaddings.forEach((size) => {
+        it(`renders the correct class name for a ${size} bottom padding`, () => {
+            const { container } = render(_jsx(Grid, { paddingBottom: size }));
+            const component = container.querySelector(':only-child');
+            expect(component).toHaveClass(`ams-grid--padding-bottom--${size}`);
+        });
+    });
+    gridPaddings.forEach((size) => {
+        it(`renders the correct class name for a ${size} top padding`, () => {
+            const { container } = render(_jsx(Grid, { paddingTop: size }));
+            const component = container.querySelector(':only-child');
+            expect(component).toHaveClass(`ams-grid--padding-top--${size}`);
+        });
+    });
+    gridPaddings.forEach((size) => {
+        it(`renders the correct class name for a ${size} vertical padding`, () => {
+            const { container } = render(_jsx(Grid, { paddingVertical: size }));
+            const component = container.querySelector(':only-child');
+            expect(component).toHaveClass(`ams-grid--padding-vertical--${size}`);
+        });
+    });
+    gridTags.forEach((tag) => {
+        it(`renders with a custom ${tag} tag`, () => {
+            const { container } = render(_jsx(Grid, { "aria-label": tag === 'section' ? 'Accessible name' : undefined, as: tag }));
+            const component = tag === 'div' ? container.querySelector(tag) : screen.getByRole(ariaRoleForTag[tag]);
+            expect(component).toBeInTheDocument();
+        });
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(Grid, { ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Grid/GridCell.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+import type { GridColumnNumber, GridColumnNumbers } from './Grid';
+export declare const gridCellTags: readonly ["article", "aside", "div", "footer", "header", "main", "nav", "section"];
+export type GridCellTag = (typeof gridCellTags)[number];
+type GridCellSpanAllProp = {
+    /** Lets the cell span the full width of all grid variants. */
+    span: 'all';
+    start?: never;
+};
+type GridCellSpanAndStartProps = {
+    /** The amount of grid columns the cell spans. */
+    span?: GridColumnNumber | GridColumnNumbers;
+    /** The index of the grid column the cell starts at. */
+    start?: GridColumnNumber | GridColumnNumbers;
+};
+export type GridCellProps = {
+    /** The HTML tag to use. */
+    as?: GridCellTag;
+} & (GridCellSpanAllProp | GridCellSpanAndStartProps) & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+export declare const GridCell: import("react").ForwardRefExoticComponent<GridCellProps & import("react").RefAttributes<unknown>>;
+export {};

package/dist/Grid/GridCell.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { gridCellClasses } from './gridCellClasses';
+export const gridCellTags = ['article', 'aside', 'div', 'footer', 'header', 'main', 'nav', 'section'];
+export const GridCell = forwardRef(({ as: Tag = 'div', children, className, span, start, ...restProps }, ref) => (_jsx(Tag, { ...restProps, className: clsx('ams-grid__cell', gridCellClasses(span, start), className), ref: ref, children: children })));
+GridCell.displayName = 'Grid.Cell';

package/dist/Grid/GridCell.test.d.ts

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

package/dist/Grid/GridCell.test.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Grid } from './Grid';
+import { gridCellTags } from './GridCell';
+import { ariaRoleForTag } from '../common/accessibility';
+import '@testing-library/jest-dom';
+describe('Grid cell', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(Grid.Cell, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(Grid.Cell, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-grid__cell');
+    });
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(Grid.Cell, { className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-grid__cell extra');
+    });
+    it('renders no class names for undefined values for start and span', () => {
+        const { container } = render(_jsx(Grid.Cell, {}));
+        const elementWithSpanClass = container.querySelector('[class*="ams-grid__cell--span"]');
+        const elementWithStartClass = container.querySelector('[class*="ams-grid__cell--start"]');
+        expect(elementWithSpanClass).not.toBeInTheDocument();
+        expect(elementWithStartClass).not.toBeInTheDocument();
+    });
+    it('renders class names for single number values for start and span', () => {
+        const { container } = render(_jsx(Grid.Cell, { span: 4, start: 2 }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-grid__cell--span-4 ams-grid__cell--start-2');
+    });
+    it('renders class names for a single number value for start', () => {
+        const { container } = render(_jsx(Grid.Cell, { span: 8 }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-grid__cell--span-8');
+    });
+    it('renders class names for a single number value for span', () => {
+        const { container } = render(_jsx(Grid.Cell, { start: 6 }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-grid__cell--start-6');
+    });
+    it('renders class names for a single number for span and an object for start', () => {
+        const { container } = render(_jsx(Grid.Cell, { span: 8, start: { narrow: 2, medium: 4, wide: 6 } }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-grid__cell--span-8 ams-grid__cell--start-2 ams-grid__cell--start-4-medium ams-grid__cell--start-6-wide');
+    });
+    it('renders class names for an object for span and a single number for start', () => {
+        const { container } = render(_jsx(Grid.Cell, { span: { narrow: 3, medium: 5, wide: 7 }, start: 2 }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-grid__cell--span-3 ams-grid__cell--span-5-medium ams-grid__cell--span-7-wide ams-grid__cell--start-2');
+    });
+    it('renders class names for an object for both start and span', () => {
+        const { container } = render(_jsx(Grid.Cell, { span: { narrow: 2, medium: 4, wide: 6 }, start: { narrow: 1, medium: 3, wide: 5 } }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-grid__cell--span-2 ams-grid__cell--span-4-medium ams-grid__cell--span-6-wide ams-grid__cell--start-1 ams-grid__cell--start-3-medium ams-grid__cell--start-5-wide');
+    });
+    it('renders the correct class name for the “all” value of span', () => {
+        const { container } = render(_jsx(Grid.Cell, { span: "all" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-grid__cell--span-all');
+    });
+    gridCellTags.forEach((tag) => {
+        it(`renders with a custom ${tag} tag`, () => {
+            const { container } = render(_jsx(Grid.Cell, { "aria-label": tag === 'section' ? 'Accessible name' : undefined, as: tag }));
+            const component = tag === 'div' ? container.querySelector(tag) : screen.getByRole(ariaRoleForTag[tag]);
+            expect(component).toBeInTheDocument();
+        });
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(Grid.Cell, { ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Grid/gridCellClasses.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { GridColumnNumber, GridColumnNumbers } from './Grid';
+import type { GridCellProps } from './GridCell';
+export declare const addGridClass: (prefix: string, value?: GridColumnNumber | GridColumnNumbers | "all") => string[];
+export declare const gridCellClasses: (colSpan?: GridCellProps["span"], colStart?: GridCellProps["start"]) => string[];

package/dist/Grid/gridCellClasses.js

@@ -0,0 +1,18 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+export const addGridClass = (prefix, value) => {
+    if (value === 'all' || typeof value === 'number') {
+        return [`${prefix}${value}`];
+    }
+    else if (value) {
+        const { narrow, medium, wide } = value;
+        return [`${prefix}${narrow}`, `${prefix}${medium}-medium`, `${prefix}${wide}-wide`];
+    }
+    return [];
+};
+export const gridCellClasses = (colSpan, colStart) => [
+    ...addGridClass('ams-grid__cell--span-', colSpan),
+    ...addGridClass('ams-grid__cell--start-', colStart),
+];

package/dist/Grid/index.d.ts

@@ -0,0 +1,3 @@
+export { Grid } from './Grid';
+export type { GridColumnNumber, GridColumnNumbers, GridProps } from './Grid';
+export type { GridCellProps } from './GridCell';

package/dist/Grid/index.js

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

package/dist/Grid/paddingClasses.d.ts

@@ -0,0 +1,2 @@
+import type { GridPadding } from './Grid';
+export declare const paddingClasses: (componentName: string, paddingBottom?: GridPadding, paddingTop?: GridPadding, paddingVertical?: GridPadding) => string[];

package/dist/Grid/paddingClasses.js

@@ -0,0 +1,13 @@
+export const paddingClasses = (componentName, paddingBottom, paddingTop, paddingVertical) => {
+    const classes = [];
+    if (paddingVertical) {
+        return [`ams-${componentName}--padding-vertical--${paddingVertical}`];
+    }
+    if (paddingBottom) {
+        classes.push(`ams-${componentName}--padding-bottom--${paddingBottom}`);
+    }
+    if (paddingTop) {
+        classes.push(`ams-${componentName}--padding-top--${paddingTop}`);
+    }
+    return classes;
+};

package/dist/Heading/Heading.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type HeadingProps = {
+    /** Changes the text colour for readability on a dark background. */
+    color?: 'inverse';
+    /** The hierarchical level within the document. */
+    level: 1 | 2 | 3 | 4;
+    /** Uses larger or smaller text without changing its position in the heading hierarchy. */
+    size?: 'level-1' | 'level-2' | 'level-3' | 'level-4' | 'level-5' | 'level-6';
+} & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
+export declare const Heading: import("react").ForwardRefExoticComponent<{
+    /** Changes the text colour for readability on a dark background. */
+    color?: "inverse";
+    /** The hierarchical level within the document. */
+    level: 1 | 2 | 3 | 4;
+    /** Uses larger or smaller text without changing its position in the heading hierarchy. */
+    size?: "level-1" | "level-2" | "level-3" | "level-4" | "level-5" | "level-6";
+} & HTMLAttributes<HTMLHeadingElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/Heading/Heading.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { getHeadingTag } from './getHeadingTag';
+export const Heading = forwardRef(({ children, className, color, level, size, ...restProps }, ref) => {
+    const Tag = getHeadingTag(level);
+    const visualLevel = size ? size.slice(-1) : level;
+    return (_jsx(Tag, { className: clsx('ams-heading', `ams-heading--${visualLevel}`, color && `ams-heading--${color}`, className), ref: ref, ...restProps, children: children }));
+});
+Heading.displayName = 'Heading';

package/dist/Heading/Heading.test.d.ts

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

package/dist/Heading/Heading.test.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Heading } from './Heading';
+import '@testing-library/jest-dom';
+describe('Heading', () => {
+    it('renders an element with role heading', () => {
+        render(_jsx(Heading, { level: 1, children: "Breaking news" }));
+        const heading = screen.getByRole('heading', {
+            name: 'Breaking news',
+        });
+        expect(heading).toBeInTheDocument();
+        expect(heading).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(Heading, { level: 1 }));
+        const heading = screen.getByRole('heading');
+        expect(heading).toHaveClass('ams-heading');
+    });
+    it('renders an extra class name', () => {
+        render(_jsx(Heading, { className: "extra", level: 1 }));
+        const heading = screen.getByRole('heading');
+        expect(heading).toHaveClass('ams-heading extra');
+    });
+    it('renders the allowed levels correctly', () => {
+        render(_jsxs(_Fragment, { children: [_jsx(Heading, { level: 1, children: "Heading 1" }), _jsx(Heading, { level: 2, children: "Heading 2" }), _jsx(Heading, { level: 3, children: "Heading 3" }), _jsx(Heading, { level: 4, children: "Heading 4" })] }));
+        const h1 = screen.getByRole('heading', { level: 1, name: 'Heading 1' });
+        const h2 = screen.getByRole('heading', { level: 2, name: 'Heading 2' });
+        const h3 = screen.getByRole('heading', { level: 3, name: 'Heading 3' });
+        const h4 = screen.getByRole('heading', { level: 4, name: 'Heading 4' });
+        expect(h1).toBeInTheDocument();
+        expect(h2).toBeInTheDocument();
+        expect(h3).toBeInTheDocument();
+        expect(h4).toBeInTheDocument();
+    });
+    it('renders the correct size level class', () => {
+        render(_jsxs(_Fragment, { children: [_jsx(Heading, { level: 1, size: "level-1", children: "Size level 1" }), _jsx(Heading, { level: 1, size: "level-2", children: "Size level 2" }), _jsx(Heading, { level: 1, size: "level-3", children: "Size level 3" }), _jsx(Heading, { level: 1, size: "level-4", children: "Size level 4" }), _jsx(Heading, { level: 1, size: "level-5", children: "Size level 5" }), _jsx(Heading, { level: 1, size: "level-6", children: "Size level 6" })] }));
+        const sizeLevel1 = screen.getByRole('heading', { level: 1, name: 'Size level 1' });
+        const sizeLevel2 = screen.getByRole('heading', { level: 1, name: 'Size level 2' });
+        const sizeLevel3 = screen.getByRole('heading', { level: 1, name: 'Size level 3' });
+        const sizeLevel4 = screen.getByRole('heading', { level: 1, name: 'Size level 4' });
+        const sizeLevel5 = screen.getByRole('heading', { level: 1, name: 'Size level 5' });
+        const sizeLevel6 = screen.getByRole('heading', { level: 1, name: 'Size level 6' });
+        expect(sizeLevel1).toHaveClass('ams-heading--1');
+        expect(sizeLevel2).toHaveClass('ams-heading--2');
+        expect(sizeLevel3).toHaveClass('ams-heading--3');
+        expect(sizeLevel4).toHaveClass('ams-heading--4');
+        expect(sizeLevel5).toHaveClass('ams-heading--5');
+        expect(sizeLevel6).toHaveClass('ams-heading--6');
+    });
+    it('renders the class name for inverse color', () => {
+        render(_jsx(Heading, { color: "inverse", level: 1, children: "Heading" }));
+        const heading = screen.getByRole('heading', { name: 'Heading' });
+        expect(heading).toHaveClass('ams-heading--inverse');
+    });
+    it('renders inline markup', () => {
+        render(_jsxs(Heading, { level: 1, children: [_jsx("strong", { children: "Breaking" }), " news"] }));
+        const heading = screen.getByRole('heading', { name: 'Breaking news' });
+        const inlineMarkup = heading.querySelector('strong');
+        expect(inlineMarkup).toBeInTheDocument();
+    });
+    it('is able to pass a React ref', () => {
+        const ref = createRef();
+        render(_jsx(Heading, { level: 1, ref: ref }));
+        const heading = screen.getByRole('heading');
+        expect(ref.current).toBe(heading);
+    });
+});

package/dist/Heading/getHeadingTag.d.ts

@@ -0,0 +1,2 @@
+import type { HeadingProps } from './Heading';
+export declare function getHeadingTag(level: HeadingProps['level'] | null): "h2" | "h3" | "h4" | "h1";

package/dist/Heading/getHeadingTag.js

@@ -0,0 +1,13 @@
+export function getHeadingTag(level) {
+    switch (level) {
+        case 2:
+            return 'h2';
+        case 3:
+            return 'h3';
+        case 4:
+            return 'h4';
+        // Ensure valid HTML with invalid input outside of TypeScript.
+        default:
+            return 'h1';
+    }
+}

package/dist/Heading/index.d.ts

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

package/dist/Heading/index.js

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

package/dist/Hint/Hint.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+type HintAndOptionalProps = {
+    /** Show a custom hint text. */
+    hint?: string;
+    /** Appends the text '(niet verplicht)' to the label or legend if no hint is provided. Use when the associated inputs are optional. */
+    optional?: boolean;
+};
+export type HintProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & HintAndOptionalProps;
+export declare const Hint: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
+} & HintAndOptionalProps & import("react").RefAttributes<HTMLElement>>;
+export {};

package/dist/Hint/Hint.js

@@ -0,0 +1,21 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+const getHintText = ({ hint, optional }) => {
+    if (hint) {
+        return hint;
+    }
+    else if (optional) {
+        return 'niet verplicht';
+    }
+    return null;
+};
+export const Hint = forwardRef(({ className, hint, optional, ...restProps }, ref) => {
+    const hintText = getHintText({ hint, optional });
+    return (hintText && (_jsxs("span", { ...restProps, className: clsx('ams-hint', className), ref: ref, children: ["(", hintText, ")"] })));
+});
+Hint.displayName = 'Hint';

package/dist/Hint/Hint.test.d.ts

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