@amsterdam/design-system-react 0.14.1 → 0.15.0

package/dist/TextArea/TextArea.test.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createRef, useState } from 'react';
+import { TextArea } from './TextArea';
+import '@testing-library/jest-dom';
+describe('Text area', () => {
+    it('renders', () => {
+        render(_jsx(TextArea, {}));
+        const component = screen.getByRole('textbox');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(TextArea, {}));
+        const component = screen.getByRole('textbox');
+        expect(component).toHaveClass('ams-text-area');
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(TextArea, { className: "extra" }));
+        const component = screen.getByRole('textbox');
+        expect(component).toHaveClass('ams-text-area extra');
+    });
+    it('renders a textarea with horizontal resize', () => {
+        render(_jsx(TextArea, { resize: "horizontal" }));
+        const component = screen.getByRole('textbox');
+        expect(component).toHaveClass('ams-text-area ams-text-area--resize-horizontal');
+    });
+    it('renders a textarea with vertical resize', () => {
+        render(_jsx(TextArea, { resize: "vertical" }));
+        const component = screen.getByRole('textbox');
+        expect(component).toHaveClass('ams-text-area ams-text-area--resize-vertical');
+    });
+    it('renders a textarea with no resize', () => {
+        render(_jsx(TextArea, { resize: "none" }));
+        const component = screen.getByRole('textbox');
+        expect(component).toHaveClass('ams-text-area ams-text-area--resize-none');
+    });
+    it('renders a textarea with cols class when cols prop is provided', () => {
+        render(_jsx(TextArea, { cols: 10 }));
+        const component = screen.getByRole('textbox');
+        expect(component).toHaveClass('ams-text-area ams-text-area--cols');
+    });
+    it('can be controlled', async () => {
+        function ControlledComponent() {
+            const [value, setValue] = useState('Hello');
+            return _jsx(TextArea, { onChange: (e) => setValue(e.target.value), value: value });
+        }
+        render(_jsx(ControlledComponent, {}));
+        const componentText = screen.getByDisplayValue('Hello');
+        expect(componentText).toBeInTheDocument();
+        const component = screen.getByRole('textbox');
+        if (component) {
+            await userEvent.type(component, ', World!');
+        }
+        const newComponentText = screen.getByDisplayValue('Hello, World!');
+        expect(newComponentText).toBeInTheDocument();
+    });
+    it('should not update the value when disabled', async () => {
+        render(_jsx(TextArea, { defaultValue: "Hello", disabled: true }));
+        const component = screen.getByRole('textbox');
+        if (component) {
+            await userEvent.type(component, ', World!');
+        }
+        expect(component).toHaveValue('Hello');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(TextArea, { ref: ref }));
+        const component = screen.getByRole('textbox');
+        expect(ref.current).toBe(component);
+    });
+    it('renders bidirectional by default using `dir="auto"`', () => {
+        render(_jsx(TextArea, {}));
+        const component = screen.getByRole('textbox');
+        expect(component).toHaveAttribute('dir', 'auto');
+    });
+    it('renders left-to-right by using `dir="ltr"`', () => {
+        render(_jsx(TextArea, { dir: "ltr" }));
+        const component = screen.getByRole('textbox');
+        expect(component).toHaveAttribute('dir', 'ltr');
+    });
+    describe('Invalid state', () => {
+        it('is not invalid by default', () => {
+            render(_jsx(TextArea, {}));
+            const component = screen.getByRole('textbox');
+            expect(component).not.toBeInvalid();
+        });
+        it('can have an invalid state', () => {
+            render(_jsx(TextArea, { invalid: true }));
+            const component = screen.getByRole('textbox');
+            expect(component).toHaveAttribute('aria-invalid');
+            expect(component).toBeInvalid();
+        });
+        it('omits non-essential invalid attributes when not invalid', () => {
+            render(_jsx(TextArea, { invalid: false }));
+            const component = screen.getByRole('textbox');
+            expect(component).not.toHaveAttribute('aria-invalid');
+        });
+    });
+});

package/dist/TextArea/index.d.ts

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

package/dist/TextArea/index.js

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

package/dist/TextInput/TextInput.d.ts

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

package/dist/TextInput/TextInput.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 textInputTypes = ['email', 'tel', 'text', 'url'];
+export const TextInput = forwardRef(({ className, dir, invalid, type = 'text', ...restProps }, ref) => (_jsx("input", { ...restProps, "aria-invalid": invalid || undefined, className: clsx('ams-text-input', className), dir: dir ?? 'auto', ref: ref, type: type })));
+TextInput.displayName = 'TextInput';

package/dist/TextInput/TextInput.test.d.ts

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

package/dist/TextInput/TextInput.test.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createRef, useState } from 'react';
+import { TextInput, textInputTypes } from './TextInput';
+import '@testing-library/jest-dom';
+describe('Text input', () => {
+    it('renders', () => {
+        render(_jsx(TextInput, {}));
+        const component = screen.getByRole('textbox');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(TextInput, {}));
+        const component = screen.getByRole('textbox');
+        expect(component).toHaveClass('ams-text-input');
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(TextInput, { className: "extra" }));
+        const component = screen.getByRole('textbox');
+        expect(component).toHaveClass('extra');
+        expect(component).toHaveClass('ams-text-input');
+    });
+    it('should be working in a controlled state', async () => {
+        function ControlledComponent() {
+            const [value, setValue] = useState('Hello');
+            return _jsx(TextInput, { onChange: (e) => setValue(e.target.value), value: value });
+        }
+        render(_jsx(ControlledComponent, {}));
+        const componentText = screen.getByDisplayValue('Hello');
+        expect(componentText).toBeInTheDocument();
+        const component = screen.getByRole('textbox');
+        if (component) {
+            await userEvent.type(component, ', World!');
+        }
+        const newComponentText = screen.getByDisplayValue('Hello, World!');
+        expect(newComponentText).toBeInTheDocument();
+    });
+    it('should not update the value when disabled', async () => {
+        render(_jsx(TextInput, { defaultValue: "Hello", disabled: true }));
+        const component = screen.getByRole('textbox');
+        if (component) {
+            await userEvent.type(component, ', World!');
+        }
+        expect(component).toHaveValue('Hello');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(TextInput, { ref: ref }));
+        const component = screen.getByRole('textbox');
+        expect(ref.current).toBe(component);
+    });
+    it('renders bidirectional by default using `dir="auto"`', () => {
+        render(_jsx(TextInput, {}));
+        const component = screen.getByRole('textbox');
+        expect(component).toHaveAttribute('dir', 'auto');
+    });
+    it('renders left-to-right by using `dir="ltr"`', () => {
+        render(_jsx(TextInput, { dir: "ltr" }));
+        const component = screen.getByRole('textbox');
+        expect(component).toHaveAttribute('dir', 'ltr');
+    });
+    describe('Invalid state', () => {
+        it('is not invalid by default', () => {
+            render(_jsx(TextInput, {}));
+            const component = screen.getByRole('textbox');
+            expect(component).not.toBeInvalid();
+        });
+        it('can have an invalid state', () => {
+            render(_jsx(TextInput, { invalid: true }));
+            const component = screen.getByRole('textbox');
+            expect(component).toHaveAttribute('aria-invalid');
+            expect(component).toBeInvalid();
+        });
+        it('omits non-essential invalid attributes when not invalid', () => {
+            render(_jsx(TextInput, { invalid: false }));
+            const component = screen.getByRole('textbox');
+            expect(component).not.toHaveAttribute('aria-invalid');
+        });
+    });
+    describe('Type', () => {
+        textInputTypes.map((type) => it(`sets the ‘${type}’ type`, () => {
+            render(_jsx(TextInput, { type: type }));
+            const component = screen.getByRole('textbox');
+            expect(component).toHaveAttribute('type', type);
+        }));
+    });
+});

package/dist/TextInput/index.d.ts

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

package/dist/TextInput/index.js

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

package/dist/TimeInput/TimeInput.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { InputHTMLAttributes } from 'react';
+export type TimeInputProps = {
+    /** Whether the value fails a validation rule. */
+    invalid?: boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>;
+export declare const TimeInput: import("react").ForwardRefExoticComponent<{
+    /** Whether the value fails a validation rule. */
+    invalid?: boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/TimeInput/TimeInput.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 TimeInput = forwardRef(({ className, invalid, ...restProps }, ref) => (_jsx("input", { ...restProps, "aria-invalid": invalid || undefined, className: clsx('ams-time-input', className), ref: ref, type: "time" })));
+TimeInput.displayName = 'TimeInput';

package/dist/TimeInput/TimeInput.test.d.ts

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

package/dist/TimeInput/TimeInput.test.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { TimeInput } from './TimeInput';
+import '@testing-library/jest-dom';
+describe('Time input', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(TimeInput, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(TimeInput, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-time-input');
+    });
+    it('renders an additional class name', () => {
+        const { container } = render(_jsx(TimeInput, { className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-time-input extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(TimeInput, { 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(TimeInput, {}));
+            const component = container.querySelector(':only-child');
+            expect(component).not.toBeInvalid();
+        });
+        it('can have an invalid state', () => {
+            const { container } = render(_jsx(TimeInput, { 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(TimeInput, { invalid: false }));
+            const component = container.querySelector(':only-child');
+            expect(component).not.toHaveAttribute('aria-invalid');
+        });
+    });
+});

package/dist/TimeInput/index.d.ts

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

package/dist/TimeInput/index.js

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

package/dist/TopTaskLink/TopTaskLink.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { AnchorHTMLAttributes } from 'react';
+export type TopTaskLinkProps = {
+    /** The text content. */
+    description: string;
+    /** The title. */
+    label: string;
+} & AnchorHTMLAttributes<HTMLAnchorElement>;
+export declare const TopTaskLink: import("react").ForwardRefExoticComponent<{
+    /** The text content. */
+    description: string;
+    /** The title. */
+    label: string;
+} & AnchorHTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/TopTaskLink/TopTaskLink.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 TopTaskLink = forwardRef(({ className, description, label, ...restProps }, ref) => (_jsxs("a", { ...restProps, className: clsx('ams-top-task-link', className), ref: ref, children: [_jsx("span", { className: "ams-top-task-link__label", children: label }), _jsx("span", { className: "ams-visually-hidden", children: "," }), _jsx("span", { className: "ams-top-task-link__description", children: description })] })));
+TopTaskLink.displayName = 'TopTaskLink';

package/dist/TopTaskLink/TopTaskLink.test.d.ts

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

package/dist/TopTaskLink/TopTaskLink.test.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { TopTaskLink } from './TopTaskLink';
+import '@testing-library/jest-dom';
+describe('Top task link', () => {
+    it('renders a link role element', () => {
+        render(_jsx(TopTaskLink, { description: "Description", href: "/", label: "Label" }));
+        const link = screen.getByRole('link', {
+            name: 'Label , Description',
+        });
+        expect(link).toBeInTheDocument();
+        expect(link).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(TopTaskLink, { description: "Description", href: "/", label: "Label" }));
+        const link = screen.getByRole('link', {
+            name: 'Label , Description',
+        });
+        const label = screen.getByText('Label');
+        const description = screen.getByText('Description');
+        expect(link).toHaveClass('ams-top-task-link');
+        expect(label).toHaveClass('ams-top-task-link__label');
+        expect(description).toHaveClass('ams-top-task-link__description');
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(TopTaskLink, { className: "extra", description: "Description", href: "/", label: "Label" }));
+        const link = screen.getByRole('link', {
+            name: 'Label , Description',
+        });
+        expect(link).toHaveClass('extra');
+        expect(link).toHaveClass('ams-top-task-link');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(TopTaskLink, { description: "Description", href: "/", label: "Label", ref: ref }));
+        const link = screen.getByRole('link', {
+            name: 'Label , Description',
+        });
+        expect(ref.current).toBe(link);
+    });
+});

package/dist/TopTaskLink/index.d.ts

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

package/dist/TopTaskLink/index.js

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

package/dist/UnorderedList/UnorderedList.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type UnorderedListProps = {
+    /** Changes the text colour for readability on a dark background. */
+    color?: 'inverse';
+    /** Whether the list items show a marker. */
+    markers?: boolean;
+    /** The size of the text. */
+    size?: 'small';
+} & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
+export declare const UnorderedList: import("react").ForwardRefExoticComponent<{
+    /** Changes the text colour for readability on a dark background. */
+    color?: "inverse";
+    /** Whether the list items show a marker. */
+    markers?: boolean;
+    /** The size of the text. */
+    size?: "small";
+} & HTMLAttributes<HTMLUListElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLUListElement>> & {
+    Item: import("react").ForwardRefExoticComponent<import("react").LiHTMLAttributes<HTMLLIElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLLIElement>>;
+};

package/dist/UnorderedList/UnorderedList.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 { UnorderedListItem } from './UnorderedListItem';
+const UnorderedListRoot = forwardRef(({ children, className, color, markers = true, size, ...restProps }, ref) => {
+    return (_jsx("ul", { className: clsx('ams-unordered-list', color && `ams-unordered-list--${color}`, !markers && 'ams-unordered-list--no-markers', size && `ams-unordered-list--${size}`, className), ref: ref, ...restProps, children: children }));
+});
+UnorderedListRoot.displayName = 'UnorderedList';
+export const UnorderedList = Object.assign(UnorderedListRoot, { Item: UnorderedListItem });

package/dist/UnorderedList/UnorderedList.test.d.ts

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

package/dist/UnorderedList/UnorderedList.test.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { UnorderedList } from './UnorderedList';
+import '@testing-library/jest-dom';
+describe('Unordered list', () => {
+    it('renders an HTML ul element', () => {
+        const { container } = render(_jsx(UnorderedList, {}));
+        const list = container.querySelector('ul:only-child');
+        expect(list).toBeInTheDocument();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(UnorderedList, {}));
+        const component = screen.getByRole('list');
+        expect(component).toHaveClass('ams-unordered-list');
+    });
+    it('renders a no markers class', () => {
+        render(_jsx(UnorderedList, { markers: false }));
+        const component = screen.getByRole('list');
+        expect(component).toHaveClass('ams-unordered-list--no-markers');
+    });
+    it('renders the class name for inverse color', () => {
+        render(_jsx(UnorderedList, { color: "inverse" }));
+        const component = screen.getByRole('list');
+        expect(component).toHaveClass('ams-unordered-list--inverse');
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(UnorderedList, { className: "extra" }));
+        const component = screen.getByRole('list');
+        expect(component).toHaveClass('ams-unordered-list extra');
+    });
+    it('renders its subcomponent', () => {
+        const listItems = ['Item 1', 'Item 2', 'Item 3'];
+        const { container } = render(_jsx(UnorderedList, { children: listItems.map((item, index) => (_jsx(UnorderedList.Item, { children: item }, index))) }));
+        const list = screen.getByRole('list');
+        const items = container.querySelectorAll('.ams-unordered-list__item');
+        expect(list).toBeInTheDocument();
+        expect(items.length).toBe(3);
+    });
+    it('renders the small size class', () => {
+        render(_jsx(UnorderedList, { size: "small" }));
+        const component = screen.getByRole('list');
+        expect(component).toHaveClass('ams-unordered-list--small');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(UnorderedList, { ref: ref }));
+        const component = screen.getByRole('list');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/UnorderedList/UnorderedListItem.d.ts

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

package/dist/UnorderedList/UnorderedListItem.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 UnorderedListItem = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("li", { className: clsx('ams-unordered-list__item', className), ref: ref, ...restProps, children: children })));
+UnorderedListItem.displayName = 'UnorderedList.Item';

package/dist/UnorderedList/UnorderedListItem.test.d.ts

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

package/dist/UnorderedList/UnorderedListItem.test.js

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

package/dist/UnorderedList/index.d.ts

@@ -0,0 +1,3 @@
+export { UnorderedList } from './UnorderedList';
+export type { UnorderedListProps } from './UnorderedList';
+export type { UnorderedListItemProps } from './UnorderedListItem';

package/dist/UnorderedList/index.js

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

package/dist/common/accessibility.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+export declare const ariaRoleForTag: Record<string, string>;

package/dist/common/accessibility.js

@@ -0,0 +1,13 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+export const ariaRoleForTag = {
+    article: 'article',
+    aside: 'complementary',
+    footer: 'contentinfo',
+    header: 'banner',
+    main: 'main',
+    nav: 'navigation',
+    section: 'region',
+};

package/dist/common/formatFileSize.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+/**
+ * @param fileSize The size of the file in bytes.
+ * @param precision The number of significant digits in the output.
+ * @returns A human readable file size
+ */
+export declare const formatFileSize: (fileSize: number, precision?: number) => string;

package/dist/common/formatFileSize.js

@@ -0,0 +1,17 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+/**
+ * @param fileSize The size of the file in bytes.
+ * @param precision The number of significant digits in the output.
+ * @returns A human readable file size
+ */
+export const formatFileSize = (fileSize, precision = 3) => {
+    const UNITS = ['bytes', 'kB', 'MB', 'GB'];
+    if (fileSize === 0)
+        return '0 bytes';
+    const exponent = Math.floor(Math.log10(fileSize) / 3);
+    const size = (fileSize / Math.pow(1000, exponent)).toPrecision(precision);
+    return `${size} ${UNITS[exponent]}`;
+};

package/dist/common/formatFileSize.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/common/formatFileSize.test.js

@@ -0,0 +1,18 @@
+import { formatFileSize } from './formatFileSize';
+describe('formatFileSize', () => {
+    it('formats bytes correctly', () => {
+        expect(formatFileSize(500)).toBe('500 bytes');
+    });
+    it('formats kilobytes correctly', () => {
+        expect(formatFileSize(1024, 1)).toBe('1 kB');
+        expect(formatFileSize(2048, 1)).toBe('2 kB');
+    });
+    it('formats megabytes correctly', () => {
+        expect(formatFileSize(1048576, 1)).toBe('1 MB');
+        expect(formatFileSize(2097152, 1)).toBe('2 MB');
+    });
+    it('formats gigabytes correctly', () => {
+        expect(formatFileSize(1073741824, 1)).toBe('1 GB');
+        expect(formatFileSize(2147483648, 1)).toBe('2 GB');
+    });
+});