@amsterdam/design-system-react 0.14.1 → 0.15.0

package/dist/Column/Column.test.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Column, columnGaps } from './Column';
+import { crossAlignOptionsForColumn, mainAlignOptions } from '../common/types';
+import '@testing-library/jest-dom';
+describe('Column', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(Column, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(Column, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-column');
+    });
+    columnGaps.map((gap) => it(`renders with ‘${gap}’ gap`, () => {
+        const { container } = render(_jsx(Column, { gap: gap }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass(`ams-column--gap-${gap}`);
+    }));
+    it('renders an additional class name', () => {
+        const { container } = render(_jsx(Column, { className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-column extra');
+    });
+    it('renders with an article tag', () => {
+        render(_jsx(Column, { as: "article" }));
+        const component = screen.getByRole('article');
+        expect(component).toBeInTheDocument();
+    });
+    it('renders with a section tag', () => {
+        const { container } = render(_jsx(Column, { as: "section" }));
+        const component = container.querySelector('section');
+        expect(component).toBeInTheDocument();
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(Column, { ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+    describe('Alignment', () => {
+        mainAlignOptions.map((align) => it(`sets the ‘${align}’ alignment`, () => {
+            const { container } = render(_jsx(Column, { align: align }));
+            const component = container.querySelector(':only-child');
+            expect(component).toHaveClass(`ams-column--align-${align}`);
+        }));
+        crossAlignOptionsForColumn.map((align) => it(`sets the ‘${align}’ vertical alignment`, () => {
+            const { container } = render(_jsx(Column, { alignHorizontal: align }));
+            const component = container.querySelector(':only-child');
+            expect(component).toHaveClass(`ams-column--align-horizontal-${align}`);
+        }));
+    });
+});

package/dist/Column/index.d.ts

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

package/dist/Column/index.js

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

package/dist/DateInput/DateInput.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { InputHTMLAttributes } from 'react';
+export declare const dateInputTypes: readonly ["date", "datetime-local"];
+type DateInputType = (typeof dateInputTypes)[number];
+export type DateInputProps = {
+    /** Whether the value fails a validation rule. */
+    invalid?: boolean;
+    /** The kind of data that the user should provide. */
+    type?: DateInputType;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>;
+export declare const DateInput: import("react").ForwardRefExoticComponent<{
+    /** Whether the value fails a validation rule. */
+    invalid?: boolean;
+    /** The kind of data that the user should provide. */
+    type?: DateInputType;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/DateInput/DateInput.js

@@ -0,0 +1,10 @@
+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 dateInputTypes = ['date', 'datetime-local'];
+export const DateInput = forwardRef(({ className, invalid, type = 'date', ...restProps }, ref) => (_jsx("input", { ...restProps, "aria-invalid": invalid || undefined, className: clsx('ams-date-input', className), ref: ref, type: type })));
+DateInput.displayName = 'DateInput';

package/dist/DateInput/DateInput.test.d.ts

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

package/dist/DateInput/DateInput.test.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { DateInput, dateInputTypes } from './DateInput';
+import '@testing-library/jest-dom';
+describe('Date input', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(DateInput, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(DateInput, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-date-input');
+    });
+    it('renders an additional class name', () => {
+        const { container } = render(_jsx(DateInput, { className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-date-input extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(DateInput, { ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+    describe('Invalid state', () => {
+        it('is not invalid by default', () => {
+            const { container } = render(_jsx(DateInput, {}));
+            const component = container.querySelector(':only-child');
+            expect(component).not.toBeInvalid();
+        });
+        it('can have an invalid state', () => {
+            const { container } = render(_jsx(DateInput, { invalid: true }));
+            const component = container.querySelector(':only-child');
+            expect(component).toHaveAttribute('aria-invalid');
+            expect(component).toBeInvalid();
+        });
+        it('omits non-essential invalid attributes when not invalid', () => {
+            const { container } = render(_jsx(DateInput, { invalid: false }));
+            const component = container.querySelector(':only-child');
+            expect(component).not.toHaveAttribute('aria-invalid');
+        });
+    });
+    describe('Type', () => {
+        dateInputTypes.map((type) => it(`sets the ‘${type}’ type`, () => {
+            const { container } = render(_jsx(DateInput, { type: type }));
+            const component = container.querySelector(':only-child');
+            expect(component).toHaveAttribute('type', type);
+        }));
+    });
+});

package/dist/DateInput/index.d.ts

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

package/dist/DateInput/index.js

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

package/dist/DescriptionList/DescriptionList.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export declare const descriptionListTermsWidths: readonly ["narrow", "medium", "wide"];
+type DescriptionListTermsWidth = (typeof descriptionListTermsWidths)[number];
+export type DescriptionListProps = {
+    /** Changes the text colour for readability on a dark background. */
+    color?: 'inverse';
+    termsWidth?: DescriptionListTermsWidth;
+} & PropsWithChildren<HTMLAttributes<HTMLDListElement>>;
+export declare const DescriptionList: import("react").ForwardRefExoticComponent<{
+    /** Changes the text colour for readability on a dark background. */
+    color?: "inverse";
+    termsWidth?: DescriptionListTermsWidth;
+} & HTMLAttributes<HTMLDListElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDListElement>> & {
+    Description: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLElement>>;
+    Section: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    Term: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLElement>>;
+};
+export {};

package/dist/DescriptionList/DescriptionList.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { DescriptionListDescription } from './DescriptionListDescription';
+import { DescriptionListSection } from './DescriptionListSection';
+import { DescriptionListTerm } from './DescriptionListTerm';
+export const descriptionListTermsWidths = ['narrow', 'medium', 'wide'];
+const DescriptionListRoot = forwardRef(({ children, className, color, termsWidth, ...restProps }, ref) => (_jsx("dl", { ...restProps, className: clsx('ams-description-list', color && `ams-description-list--${color}`, termsWidth && `ams-description-list--${termsWidth}`, className), ref: ref, children: children })));
+DescriptionListRoot.displayName = 'DescriptionList';
+export const DescriptionList = Object.assign(DescriptionListRoot, {
+    Description: DescriptionListDescription,
+    Section: DescriptionListSection,
+    Term: DescriptionListTerm,
+});

package/dist/DescriptionList/DescriptionList.test.d.ts

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

package/dist/DescriptionList/DescriptionList.test.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { DescriptionList, descriptionListTermsWidths } from './DescriptionList';
+import '@testing-library/jest-dom';
+describe('Description List', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(DescriptionList, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(DescriptionList, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-description-list');
+    });
+    it('renders an additional class name', () => {
+        const { container } = render(_jsx(DescriptionList, { className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-description-list extra');
+    });
+    descriptionListTermsWidths.map((width) => it(`renders the class name for the ‘${width}’ terms column width`, () => {
+        const { container } = render(_jsx(DescriptionList, { termsWidth: width }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass(`ams-description-list--${width}`);
+    }));
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(DescriptionList, { ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+    it('renders the class name for inverse color', () => {
+        const { container } = render(_jsx(DescriptionList, { color: "inverse" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-description-list--inverse');
+    });
+});

package/dist/DescriptionList/DescriptionListDescription.d.ts

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

package/dist/DescriptionList/DescriptionListDescription.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 DescriptionListDescription = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("dd", { ...restProps, className: clsx('ams-description-list__description', className), ref: ref, children: children })));
+DescriptionListDescription.displayName = 'DescriptionList.Description';

package/dist/DescriptionList/DescriptionListDescription.test.d.ts

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

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

package/dist/DescriptionList/DescriptionListSection.d.ts

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

package/dist/DescriptionList/DescriptionListSection.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 DescriptionListSection = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("div", { ...restProps, className: clsx('ams-description-list__section', className), ref: ref, children: children })));
+DescriptionListSection.displayName = 'DescriptionList.Section';

package/dist/DescriptionList/DescriptionListSection.test.d.ts

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

package/dist/DescriptionList/DescriptionListSection.test.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { DescriptionList } from './DescriptionList';
+import '@testing-library/jest-dom';
+describe('Description List Section', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(DescriptionList.Section, { children: "Test" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(DescriptionList.Section, { children: "Test" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-description-list__section');
+    });
+    it('renders an additional class name', () => {
+        const { container } = render(_jsx(DescriptionList.Section, { className: "extra", children: "Test" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-description-list__section extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(DescriptionList.Section, { ref: ref, children: "Test" }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/DescriptionList/DescriptionListTerm.d.ts

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

package/dist/DescriptionList/DescriptionListTerm.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 DescriptionListTerm = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("dt", { ...restProps, className: clsx('ams-description-list__term', className), ref: ref, children: children })));
+DescriptionListTerm.displayName = 'DescriptionList.Term';

package/dist/DescriptionList/DescriptionListTerm.test.d.ts

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

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

package/dist/DescriptionList/index.d.ts

@@ -0,0 +1,4 @@
+export { DescriptionList } from './DescriptionList';
+export type { DescriptionListProps } from './DescriptionList';
+export type { DescriptionListTermProps } from './DescriptionListTerm';
+export type { DescriptionListDescriptionProps } from './DescriptionListDescription';

package/dist/DescriptionList/index.js

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

package/dist/Dialog/Dialog.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { MouseEvent } from 'react';
+import type { DialogHTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+export type DialogProps = {
+    /** The label for the button that dismisses the Dialog. */
+    closeButtonLabel?: string;
+    /** Content for the footer, often one Button or an Action Group containing more of them. */
+    footer?: ReactNode;
+    /** The text for the Heading. */
+    heading: string;
+} & PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>>;
+export declare const Dialog: import("react").ForwardRefExoticComponent<{
+    /** The label for the button that dismisses the Dialog. */
+    closeButtonLabel?: string;
+    /** Content for the footer, often one Button or an Action Group containing more of them. */
+    footer?: ReactNode;
+    /** The text for the Heading. */
+    heading: string;
+} & DialogHTMLAttributes<HTMLDialogElement> & {
+    children?: ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDialogElement>> & {
+    close: (event: MouseEvent<HTMLButtonElement>) => void | undefined;
+    open: (id: string) => void;
+};

package/dist/Dialog/Dialog.js

@@ -0,0 +1,17 @@
+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 { Heading } from '../Heading';
+import { IconButton } from '../IconButton';
+const closeDialog = (event) => event.currentTarget.closest('dialog')?.close();
+const openDialog = (id) => document.querySelector(id)?.showModal();
+const DialogRoot = forwardRef(({ children, className, closeButtonLabel = 'Sluiten', footer, heading, ...restProps }, ref) => (_jsxs("dialog", { ...restProps, className: clsx('ams-dialog', className), ref: ref, children: [_jsxs("header", { className: "ams-dialog__header", children: [_jsx(Heading, { level: 1, size: "level-4", children: heading }), _jsx(IconButton, { label: closeButtonLabel, onClick: closeDialog, size: "heading-4", type: "button" })] }), _jsx("div", { className: "ams-dialog__body", children: children }), footer && _jsx("footer", { className: "ams-dialog__footer", children: footer })] })));
+DialogRoot.displayName = 'Dialog';
+export const Dialog = Object.assign(DialogRoot, {
+    close: closeDialog,
+    open: openDialog,
+});

package/dist/Dialog/Dialog.test.d.ts

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

package/dist/Dialog/Dialog.test.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Dialog } from './Dialog';
+import '@testing-library/jest-dom';
+describe('Dialog', () => {
+    it('renders', () => {
+        render(_jsx(Dialog, { heading: "Test heading", open: true }));
+        const component = screen.getByRole('dialog');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(Dialog, { heading: "Test heading" }));
+        const component = screen.getByRole('dialog', { hidden: true });
+        expect(component).toHaveClass('ams-dialog');
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(Dialog, { className: "extra", heading: "Test heading" }));
+        const component = screen.getByRole('dialog', { hidden: true });
+        expect(component).toHaveClass('ams-dialog extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(Dialog, { heading: "Test heading", ref: ref }));
+        const component = screen.getByRole('dialog', { hidden: true });
+        expect(ref.current).toBe(component);
+    });
+    it('is not visible when open attribute is not used', () => {
+        render(_jsx(Dialog, { heading: "Test heading" }));
+        const component = screen.getByRole('dialog', { hidden: true });
+        expect(component).toBeInTheDocument();
+        expect(component).not.toBeVisible();
+    });
+    it('renders a heading', () => {
+        render(_jsx(Dialog, { heading: "Test heading", open: true }));
+        const heading = screen.getByRole('heading', {
+            name: 'Test heading',
+        });
+        expect(heading).toBeInTheDocument();
+    });
+    it('renders children', () => {
+        const { getByText } = render(_jsx(Dialog, { heading: "Test heading", children: "Test content" }));
+        expect(getByText('Test content')).toBeInTheDocument();
+    });
+    it('renders footer when provided', () => {
+        render(_jsx(Dialog, { footer: _jsx("button", { children: "Click Me" }), heading: "Test heading", open: true }));
+        const footer = screen.getByRole('contentinfo');
+        const button = screen.getByRole('button', {
+            name: 'Click Me',
+        });
+        expect(footer).toBeInTheDocument();
+        expect(button).toBeInTheDocument();
+    });
+    it('does not render footer when not provided', () => {
+        const { container } = render(_jsx(Dialog, { heading: "Test heading" }));
+        const component = container.querySelector('footer');
+        expect(component).not.toBeInTheDocument();
+    });
+    it('renders DialogClose button', () => {
+        render(_jsx(Dialog, { heading: "Test heading", open: true }));
+        const closeButton = screen.getByRole('button', { name: 'Sluiten' });
+        expect(closeButton).toBeInTheDocument();
+    });
+    it('renders a custom close label', () => {
+        render(_jsx(Dialog, { closeButtonLabel: "Close", heading: "Test heading", open: true }));
+        const closeButton = screen.getByRole('button', { name: 'Close' });
+        expect(closeButton).toBeInTheDocument();
+    });
+    it.skip('can be closed with the Close button', () => {
+        // We currently can't test this because dialog isn't properly supported in jsdom
+        // https://github.com/jsdom/jsdom/issues/3294
+    });
+    it.skip('has no accessible content when it is closed', () => {
+        // We currently can't test this because dialog isn't properly supported in jsdom
+        // https://github.com/jsdom/jsdom/issues/3294
+    });
+});

package/dist/Dialog/index.d.ts

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

package/dist/Dialog/index.js

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

package/dist/ErrorMessage/ErrorMessage.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type ErrorMessageProps = {
+    /** An icon to display instead of the default icon. */
+    icon?: Function;
+    /** An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’. */
+    prefix?: string;
+} & PropsWithChildren<HTMLAttributes<HTMLParagraphElement>>;
+export declare const ErrorMessage: import("react").ForwardRefExoticComponent<{
+    /** An icon to display instead of the default icon. */
+    icon?: Function;
+    /** An accessible phrase that screen readers announce before the error message. Should translate to something like ‘input error’. */
+    prefix?: string;
+} & HTMLAttributes<HTMLParagraphElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/ErrorMessage/ErrorMessage.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { AlertIcon } from '@amsterdam/design-system-react-icons';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Icon } from '../Icon';
+export const ErrorMessage = forwardRef(({ children, className, icon, prefix = 'Invoerfout', ...restProps }, ref) => (_jsxs("p", { ...restProps, className: clsx('ams-error-message', className), ref: ref, children: [_jsx(Icon, { size: "small", svg: icon ? icon : AlertIcon }), _jsxs("span", { className: "ams-visually-hidden", children: [prefix, ': '] }), children] })));
+ErrorMessage.displayName = 'ErrorMessage';

package/dist/ErrorMessage/ErrorMessage.test.d.ts

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