@amsterdam/design-system-react 0.14.1 → 0.15.0

package/dist/ErrorMessage/ErrorMessage.test.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { ErrorMessage } from './ErrorMessage';
+import '@testing-library/jest-dom';
+describe('Error message', () => {
+    it('renders', () => {
+        render(_jsx(ErrorMessage, {}));
+        const component = screen.getByRole('paragraph');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(ErrorMessage, {}));
+        const component = screen.getByRole('paragraph');
+        expect(component).toHaveClass('ams-error-message');
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(ErrorMessage, { className: "extra" }));
+        const component = screen.getByRole('paragraph');
+        expect(component).toHaveClass('ams-error-message extra');
+    });
+    it('renders a Dutch prefix by default', () => {
+        render(_jsx(ErrorMessage, {}));
+        const component = screen.getByText('Invoerfout', { exact: false });
+        expect(component).toBeInTheDocument();
+    });
+    it('renders a custom prefix', () => {
+        render(_jsx(ErrorMessage, { prefix: "Error" }));
+        const component = screen.getByText('Error', { exact: false });
+        expect(component).toBeInTheDocument();
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(ErrorMessage, { ref: ref }));
+        const component = screen.getByRole('paragraph');
+        expect(ref.current).toBe(component);
+    });
+    it('shows an icon', () => {
+        const { container } = render(_jsx(ErrorMessage, {}));
+        const iconWrapper = container.querySelector('.ams-icon');
+        const icon = container.querySelector('svg');
+        expect(iconWrapper).toBeInTheDocument();
+        expect(icon).toBeInTheDocument();
+    });
+    // TODO: we can't currently test this, because we can't pass a class or anything to the SVG
+    // We plan on changing this, so we can test this in the future
+    it.skip('shows a custom icon', () => { });
+});

package/dist/ErrorMessage/index.d.ts

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

package/dist/ErrorMessage/index.js

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

package/dist/Field/Field.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type FieldProps = {
+    /** Whether the field has an input with a validation error */
+    invalid?: boolean;
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+export declare const Field: import("react").ForwardRefExoticComponent<{
+    /** Whether the field has an input with a validation error */
+    invalid?: boolean;
+} & HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Field/Field.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 Field = forwardRef(({ children, className, invalid, ...restProps }, ref) => (_jsx("div", { ...restProps, className: clsx('ams-field', invalid && 'ams-field--invalid', className), ref: ref, children: children })));
+Field.displayName = 'Field';

package/dist/Field/Field.test.d.ts

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

package/dist/Field/Field.test.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { Field } from './Field';
+import '@testing-library/jest-dom';
+describe('Field', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(Field, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(Field, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-field');
+    });
+    it('renders an additional class name', () => {
+        const { container } = render(_jsx(Field, { className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-field extra');
+    });
+    it('renders with the error class', () => {
+        const { container } = render(_jsx(Field, { invalid: true }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-field--invalid');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(Field, { ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Field/index.d.ts

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

package/dist/Field/index.js

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

package/dist/FieldSet/FieldSet.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+import { HintProps } from '../Hint';
+export type FieldSetProps = PropsWithChildren<HTMLAttributes<HTMLFieldSetElement>> & {
+    /** Whether the field set has an input with a validation error */
+    invalid?: boolean;
+    /** The text for the caption. */
+    legend: string;
+} & HintProps;
+export declare const FieldSet: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLFieldSetElement> & {
+    children?: import("react").ReactNode | undefined;
+} & {
+    /** Whether the field set has an input with a validation error */
+    invalid?: boolean;
+    /** The text for the caption. */
+    legend: string;
+} & HTMLAttributes<HTMLElement> & {
+    hint?: string;
+    optional?: boolean;
+} & import("react").RefAttributes<HTMLFieldSetElement>>;

package/dist/FieldSet/FieldSet.js

@@ -0,0 +1,12 @@
+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 { Hint } from '../Hint';
+export const FieldSet = forwardRef(({ children, className, hint, invalid, legend, optional, ...restProps }, ref) => {
+    return (_jsxs("fieldset", { ...restProps, className: clsx('ams-field-set', invalid && 'ams-field-set--invalid', className), ref: ref, children: [_jsxs("legend", { className: "ams-field-set__legend", children: [legend, " ", _jsx(Hint, { hint: hint, optional: optional })] }), children] }));
+});
+FieldSet.displayName = 'FieldSet';

package/dist/FieldSet/FieldSet.test.d.ts

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

package/dist/FieldSet/FieldSet.test.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { FieldSet } from './FieldSet';
+import '@testing-library/jest-dom';
+describe('FieldSet', () => {
+    it('renders', () => {
+        render(_jsx(FieldSet, { legend: "Test" }));
+        const component = screen.getByRole('group', { name: 'Test' });
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(FieldSet, { legend: "Test" }));
+        const component = screen.getByRole('group', { name: 'Test' });
+        expect(component).toHaveClass('ams-field-set');
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(FieldSet, { className: "extra", legend: "Test" }));
+        const component = screen.getByRole('group', { name: 'Test' });
+        expect(component).toHaveClass('ams-field-set extra');
+    });
+    it('renders the correct legend class name', () => {
+        const { container } = render(_jsx(FieldSet, { legend: "Test" }));
+        const component = container.querySelector('legend');
+        expect(component).toHaveClass('ams-field-set__legend');
+    });
+    it('renders the error class', () => {
+        const { container } = render(_jsx(FieldSet, { invalid: true, legend: "Test" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-field-set--invalid');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(FieldSet, { legend: "Test", ref: ref }));
+        const component = screen.getByRole('group', { name: 'Test' });
+        expect(ref.current).toBe(component);
+    });
+    it('renders the provided hint text after the legend', () => {
+        render(_jsx(FieldSet, { hint: "hint text", legend: "Legend" }));
+        const component = screen.getByRole('group', { name: 'Legend (hint text)' });
+        expect(component).toBeInTheDocument();
+    });
+    it('renders the default hint text after the legend', () => {
+        render(_jsx(FieldSet, { legend: "Legend", optional: true }));
+        const component = screen.getByRole('group', { name: 'Legend (niet verplicht)' });
+        expect(component).toBeInTheDocument();
+    });
+    it('renders the provided hint text after the legend when both `optional` and `hint` props are used', () => {
+        render(_jsx(FieldSet, { hint: "not required", legend: "Legend", optional: true }));
+        const component = screen.getByRole('group', { name: 'Legend (not required)' });
+        expect(component).toBeInTheDocument();
+    });
+    it('renders the provided hint text after the legend while `optional` is set to `false`', () => {
+        render(_jsx(FieldSet, { hint: "required", legend: "Legend", optional: false }));
+        const component = screen.getByRole('group', { name: 'Legend (required)' });
+        expect(component).toBeInTheDocument();
+    });
+});

package/dist/FieldSet/index.d.ts

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

package/dist/FieldSet/index.js

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

package/dist/Figure/Figure.d.ts

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

package/dist/Figure/Figure.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 { FigureCaption } from './FigureCaption';
+const FigureRoot = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("figure", { ...restProps, className: clsx('ams-figure', className), ref: ref, children: children })));
+FigureRoot.displayName = 'Figure';
+export const Figure = Object.assign(FigureRoot, { Caption: FigureCaption });

package/dist/Figure/Figure.test.d.ts

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

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

package/dist/Figure/FigureCaption.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type FigureCaptionProps = {
+    /** Changes the text colour for readability on a dark background. */
+    color?: 'inverse';
+} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+export declare const FigureCaption: import("react").ForwardRefExoticComponent<{
+    /** Changes the text colour for readability on a dark background. */
+    color?: "inverse";
+} & HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLElement>>;

package/dist/Figure/FigureCaption.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 FigureCaption = forwardRef(({ children, className, color, ...restProps }, ref) => (_jsx("figcaption", { ...restProps, className: clsx('ams-figure__caption', color && `ams-figure__caption--${color}`, className), ref: ref, children: children })));
+FigureCaption.displayName = 'Figure.Caption';

package/dist/Figure/FigureCaption.test.d.ts

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

package/dist/Figure/FigureCaption.test.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { FigureCaption } from './FigureCaption';
+import '@testing-library/jest-dom';
+describe('Figure Caption', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(FigureCaption, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(FigureCaption, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-figure__caption');
+    });
+    it('renders the class name for inverse color', () => {
+        const { container } = render(_jsx(FigureCaption, { color: "inverse", children: "Caption" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-figure__caption--inverse');
+    });
+    it('renders an additional class name', () => {
+        const { container } = render(_jsx(FigureCaption, { className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-figure__caption extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(FigureCaption, { ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Figure/index.d.ts

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

package/dist/Figure/index.js

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

package/dist/FileInput/FileInput.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { InputHTMLAttributes } from 'react';
+export type FileInputProps = InputHTMLAttributes<HTMLInputElement>;
+export declare const FileInput: import("react").ForwardRefExoticComponent<FileInputProps & import("react").RefAttributes<HTMLInputElement>>;

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

package/dist/FileInput/FileInput.test.d.ts

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

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

package/dist/FileInput/index.d.ts

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

package/dist/FileInput/index.js

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

package/dist/FileList/FileList.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type FileListProps = {} & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
+export declare const FileListRoot: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLOListElement>>;
+export declare const FileList: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLOListElement>> & {
+    Item: import("react").ForwardRefExoticComponent<{
+        file: File;
+        onDelete?: () => void;
+    } & HTMLAttributes<HTMLLIElement> & import("react").RefAttributes<HTMLLIElement>>;
+};

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 additional 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 additional 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/Footer/Footer.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type FooterProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+export declare const Footer: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLElement>> & {
+    Menu: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLUListElement>>;
+    MenuLink: import("react").ForwardRefExoticComponent<import("react").AnchorHTMLAttributes<HTMLAnchorElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLAnchorElement>>;
+    Spotlight: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/Footer/Footer.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { FooterMenu } from './FooterMenu';
+import { FooterMenuLink } from './FooterMenuLink';
+import { FooterSpotlight } from './FooterSpotlight';
+const FooterRoot = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("footer", { ...restProps, className: clsx('ams-footer', className), ref: ref, children: children })));
+FooterRoot.displayName = 'Footer';
+export const Footer = Object.assign(FooterRoot, {
+    Menu: FooterMenu,
+    MenuLink: FooterMenuLink,
+    Spotlight: FooterSpotlight,
+});

package/dist/Footer/Footer.test.d.ts

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