@amsterdam/design-system-react 0.14.1 → 0.16.0

package/dist/Checkbox/Checkbox.test.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Checkbox } from './Checkbox';
+import '@testing-library/jest-dom';
+describe('Checkbox', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(Checkbox, {}));
+        const wrapper = container.querySelector(':only-child');
+        const input = screen.getByRole('checkbox');
+        const label = container.querySelector('label');
+        expect(wrapper).toBeInTheDocument();
+        expect(wrapper).toBeVisible();
+        expect(input).toBeInTheDocument();
+        expect(input).toBeVisible();
+        expect(label).toBeInTheDocument();
+        expect(label).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(Checkbox, {}));
+        const wrapper = container.querySelector(':only-child');
+        const input = screen.getByRole('checkbox');
+        const label = container.querySelector('label');
+        expect(wrapper).toHaveClass('ams-checkbox');
+        expect(input).toHaveClass('ams-checkbox__input');
+        expect(label).toHaveClass('ams-checkbox__label');
+    });
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(Checkbox, { className: "extra" }));
+        const wrapper = container.querySelector(':only-child');
+        expect(wrapper).toHaveClass('ams-checkbox extra');
+    });
+    describe('Checked state', () => {
+        it('is not checked by default', () => {
+            render(_jsx(Checkbox, {}));
+            const input = screen.getByRole('checkbox');
+            expect(input).not.toBeChecked();
+        });
+        it('can have a checked state', () => {
+            const handleChange = () => { };
+            render(_jsx(Checkbox, { checked: true, onChange: handleChange }));
+            const input = screen.getByRole('checkbox');
+            expect(input).toBeChecked();
+        });
+    });
+    describe('Indeterminate state', () => {
+        it('is not indeterminate by default', () => {
+            render(_jsx(Checkbox, {}));
+            const input = screen.getByRole('checkbox');
+            expect(input).not.toBePartiallyChecked();
+        });
+        it('can have an indeterminate state', () => {
+            render(_jsx(Checkbox, { indeterminate: true }));
+            const input = screen.getByRole('checkbox');
+            expect(input).toBePartiallyChecked();
+        });
+    });
+    describe('Invalid state', () => {
+        it('is not invalid by default', () => {
+            render(_jsx(Checkbox, {}));
+            const input = screen.getByRole('checkbox');
+            expect(input).not.toBeInvalid();
+        });
+        it('can have an invalid state', () => {
+            render(_jsx(Checkbox, { invalid: true }));
+            const input = screen.getByRole('checkbox');
+            expect(input).toHaveAttribute('aria-invalid');
+            expect(input).toBeInvalid();
+        });
+        it('omits non-essential invalid attributes when not invalid', () => {
+            render(_jsx(Checkbox, { invalid: false }));
+            const input = screen.getByRole('checkbox');
+            expect(input).not.toHaveAttribute('aria-invalid');
+        });
+    });
+    describe('Disabled state', () => {
+        it('is not disabled by default', () => {
+            render(_jsx(Checkbox, {}));
+            const input = screen.getByRole('checkbox');
+            expect(input).not.toBeDisabled();
+        });
+        it('can have a disabled state', () => {
+            render(_jsx(Checkbox, { disabled: true }));
+            const input = screen.getByRole('checkbox');
+            expect(input).toBeDisabled();
+        });
+    });
+    describe('Disabled invalid state', () => {
+        it('can have a disabled invalid state', () => {
+            render(_jsx(Checkbox, { disabled: true, invalid: true }));
+            const input = screen.getByRole('checkbox');
+            expect(input).toBeDisabled();
+            expect(input).toBeInvalid();
+        });
+    });
+    it('can trigger a change event', () => {
+        const handleChange = jest.fn();
+        render(_jsx(Checkbox, { onChange: handleChange }));
+        const input = screen.getByRole('checkbox');
+        input?.click();
+        expect(handleChange).toHaveBeenCalled();
+    });
+    it('does not trigger a change event when disabled', () => {
+        const handleChange = jest.fn();
+        render(_jsx(Checkbox, { disabled: true, onChange: handleChange }));
+        const input = screen.getByRole('checkbox');
+        input?.click();
+        expect(handleChange).not.toHaveBeenCalled();
+    });
+    it('can trigger a change event by clicking on label', () => {
+        const handleChange = jest.fn();
+        const { container } = render(_jsx(Checkbox, { onChange: handleChange }));
+        const label = container.querySelector('label');
+        label?.click();
+        expect(handleChange).toHaveBeenCalled();
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(Checkbox, { ref: ref }));
+        const input = screen.getByRole('checkbox');
+        expect(ref.current).toBe(input);
+    });
+});

package/dist/Checkbox/index.d.ts

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

package/dist/Checkbox/index.js

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

package/dist/Column/Column.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+import type { CrossAlignForColumn, MainAlign } from '../common/types';
+export declare const columnTags: readonly ["article", "div", "section"];
+type ColumnTag = (typeof columnTags)[number];
+export declare const columnGapSizes: readonly ["none", "x-small", "small", "large", "x-large"];
+type ColumnGap = (typeof columnGapSizes)[number];
+export type ColumnProps = {
+    /**
+     * The vertical alignment of the items in the column.
+     * @default start
+     */
+    align?: MainAlign;
+    /**
+     * The horizontal alignment of the items in the column.
+     * @default stretch
+     */
+    alignHorizontal?: CrossAlignForColumn;
+    /**
+     * The HTML element to use.
+     * @default div
+     */
+    as?: ColumnTag;
+    /**
+     * The amount of space between items.
+     * @default medium
+     */
+    gap?: ColumnGap;
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+export declare const Column: import("react").ForwardRefExoticComponent<{
+    /**
+     * The vertical alignment of the items in the column.
+     * @default start
+     */
+    align?: MainAlign;
+    /**
+     * The horizontal alignment of the items in the column.
+     * @default stretch
+     */
+    alignHorizontal?: CrossAlignForColumn;
+    /**
+     * The HTML element to use.
+     * @default div
+     */
+    as?: ColumnTag;
+    /**
+     * The amount of space between items.
+     * @default medium
+     */
+    gap?: ColumnGap;
+} & HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<unknown>>;
+export {};

package/dist/Column/Column.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';
+export const columnTags = ['article', 'div', 'section'];
+export const columnGapSizes = ['none', 'x-small', 'small', 'large', 'x-large'];
+export const Column = forwardRef(({ align, alignHorizontal, as: Tag = 'div', children, className, gap, ...restProps }, ref) => (_jsx(Tag, { ...restProps, className: clsx('ams-column', align && `ams-column--align-${align}`, alignHorizontal && `ams-column--align-horizontal-${alignHorizontal}`, gap && `ams-column--gap-${gap}`, className), ref: ref, children: children })));
+Column.displayName = 'Column';

package/dist/Column/Column.test.d.ts

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

package/dist/Column/Column.test.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Column, columnGapSizes, columnTags } from './Column';
+import { ariaRoleForTag } from '../common/accessibility';
+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');
+    });
+    columnGapSizes.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 extra class name', () => {
+        const { container } = render(_jsx(Column, { className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-column extra');
+    });
+    columnTags.forEach((tag) => {
+        it(`renders with a custom ${tag} tag`, () => {
+            const { container } = render(_jsx(Column, { "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(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 extra 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 extra 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 extra 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 extra 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 extra 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';