@amsterdam/design-system-react 0.14.1 → 0.16.0

package/dist/ImageSlider/ImageSliderControls.test.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { ImageSliderControls } from './ImageSliderControls';
+import '@testing-library/jest-dom';
+describe('Image Slider Controls', () => {
+    const nextLabel = 'Volgende';
+    const previousLabel = 'Vorige';
+    it('renders', () => {
+        const { container } = render(_jsx(ImageSliderControls, { nextLabel: nextLabel, previousLabel: previousLabel }));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(ImageSliderControls, { nextLabel: nextLabel, previousLabel: previousLabel, ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/ImageSlider/ImageSliderItem.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type ImageSliderItemProps = {
+    /** The identifier of the item. Must match the key or order of the slides (starting at 0). */
+    slideId: number;
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+export declare const ImageSliderItem: import("react").ForwardRefExoticComponent<{
+    /** The identifier of the item. Must match the key or order of the slides (starting at 0). */
+    slideId: number;
+} & HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/ImageSlider/ImageSliderItem.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef, useContext, useMemo } from 'react';
+import { ImageSliderContext } from './ImageSliderContext';
+export const ImageSliderItem = forwardRef(({ children, className, slideId, ...restProps }, ref) => {
+    const { currentSlideId } = useContext(ImageSliderContext);
+    const isInView = useMemo(() => currentSlideId === slideId, [currentSlideId, slideId]);
+    const itemClassName = useMemo(() => clsx('ams-image-slider__item', isInView && 'ams-image-slider__item--in-view', className), [isInView, className]);
+    return (_jsx("div", { ...restProps, className: itemClassName, ref: ref, ...(!isInView && { inert: '' }), children: children }));
+});
+ImageSliderItem.displayName = 'ImageSlider.Item';

package/dist/ImageSlider/ImageSliderItem.test.d.ts

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

package/dist/ImageSlider/ImageSliderItem.test.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { ImageSliderItem } from './ImageSliderItem';
+import '@testing-library/jest-dom';
+describe('Image Slider Item', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(ImageSliderItem, { slideId: 0 }));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders children', () => {
+        const { container } = render(_jsx(ImageSliderItem, { slideId: 0, children: "child" }));
+        expect(container).toHaveTextContent('child');
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(ImageSliderItem, { slideId: 0 }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-image-slider__item');
+    });
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(ImageSliderItem, { className: "extra", slideId: 0 }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-image-slider__item extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(ImageSliderItem, { ref: ref, slideId: 0 }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/ImageSlider/ImageSliderScroller.d.ts

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

package/dist/ImageSlider/ImageSliderScroller.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 ImageSliderScroller = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("div", { ...restProps, className: clsx('ams-image-slider__scroller', className), ref: ref, children: children })));
+ImageSliderScroller.displayName = 'ImageSlider.Scroller';

package/dist/ImageSlider/ImageSliderScroller.test.d.ts

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

package/dist/ImageSlider/ImageSliderScroller.test.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { ImageSliderScroller } from './ImageSliderScroller';
+import '@testing-library/jest-dom';
+describe('Image Slider Scroller', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(ImageSliderScroller, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders children', () => {
+        const { container } = render(_jsx(ImageSliderScroller, { children: "child" }));
+        expect(container).toHaveTextContent('child');
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(ImageSliderScroller, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-image-slider__scroller');
+    });
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(ImageSliderScroller, { className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-image-slider__scroller extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(ImageSliderScroller, { ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/ImageSlider/ImageSliderThumbnails.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes } from 'react';
+import { ImageSliderImageProps } from './ImageSlider';
+export type ImageSliderThumbnailsProps = {
+    imageLabel?: string;
+    thumbnails: ImageSliderImageProps[];
+} & HTMLAttributes<HTMLElement>;
+export declare const ImageSliderThumbnails: import("react").ForwardRefExoticComponent<{
+    imageLabel?: string;
+    thumbnails: ImageSliderImageProps[];
+} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;

package/dist/ImageSlider/ImageSliderThumbnails.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef, useCallback, useContext, useMemo } from 'react';
+import { ImageSliderContext } from './ImageSliderContext';
+import { generateAspectRatioClass } from '../Image/generateAspectRatioClass';
+export const ImageSliderThumbnails = forwardRef(({ className, imageLabel, thumbnails, ...restProps }, ref) => {
+    const { currentSlideId, goToNextSlide, goToPreviousSlide, goToSlideId } = useContext(ImageSliderContext);
+    const handleKeyDown = useCallback((event) => {
+        const element = event.currentTarget.children[currentSlideId];
+        if (event.key === 'ArrowRight') {
+            const nextElement = element?.nextElementSibling;
+            if (nextElement) {
+                nextElement.focus();
+                goToNextSlide();
+            }
+        }
+        if (event.key === 'ArrowLeft') {
+            const previousElement = element?.previousElementSibling;
+            if (previousElement) {
+                previousElement.focus();
+                goToPreviousSlide();
+            }
+        }
+    }, [currentSlideId, goToNextSlide, goToPreviousSlide]);
+    const renderThumbnails = useMemo(() => thumbnails.map(({ alt, aspectRatio, src }, index) => (_jsx("button", { "aria-label": `${imageLabel} ${index + 1}: ${alt}`, "aria-posinset": index + 1, "aria-selected": currentSlideId === index ? 'true' : 'false', "aria-setsize": thumbnails.length, className: clsx('ams-image-slider__thumbnail', currentSlideId === index && 'ams-image-slider__thumbnail--in-view', generateAspectRatioClass(aspectRatio)), onClick: () => goToSlideId(index), role: "tab", style: { backgroundImage: `url(${src})` }, tabIndex: currentSlideId === index ? 0 : -1, type: "button" }, index))), [currentSlideId, goToSlideId, imageLabel, thumbnails]);
+    return (_jsx("nav", { ...restProps, className: clsx('ams-image-slider__thumbnails', className), onKeyDown: handleKeyDown, ref: ref, role: "tablist", children: renderThumbnails }));
+});
+ImageSliderThumbnails.displayName = 'ImageSlider.Thumbnails';

package/dist/ImageSlider/ImageSliderThumbnails.test.d.ts

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

package/dist/ImageSlider/ImageSliderThumbnails.test.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { ImageSliderThumbnails } from './ImageSliderThumbnails';
+import '@testing-library/jest-dom';
+describe('Image Slider Thumbnails', () => {
+    const thumbnails = [
+        {
+            alt: 'This is gallery image 1',
+            src: 'https://picsum.photos/id/122/1280/720',
+        },
+        {
+            alt: 'This is gallery image 2',
+            src: 'https://picsum.photos/id/101/1280/720',
+        },
+        {
+            alt: 'This is gallery image 3',
+            src: 'https://picsum.photos/id/153/1280/720',
+        },
+    ];
+    it('renders', () => {
+        const { container } = render(_jsx(ImageSliderThumbnails, { thumbnails: thumbnails }));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders thumbnails', () => {
+        const { container } = render(_jsx(ImageSliderThumbnails, { thumbnails: thumbnails }));
+        const thumbs = container.querySelectorAll('.ams-image-slider__thumbnail');
+        expect(thumbs).toHaveLength(thumbnails.length);
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(ImageSliderThumbnails, { thumbnails: thumbnails }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-image-slider__thumbnails');
+    });
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(ImageSliderThumbnails, { className: "extra", thumbnails: thumbnails }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-image-slider__thumbnails extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(ImageSliderThumbnails, { ref: ref, thumbnails: thumbnails }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/ImageSlider/index.d.ts

@@ -0,0 +1,3 @@
+export { ImageSlider } from './ImageSlider';
+export type { ImageSliderProps } from './ImageSlider';
+export type { ImageSliderItemProps } from './ImageSliderItem';

package/dist/ImageSlider/index.js

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

package/dist/InvalidFormAlert/InvalidFormAlert.d.ts

@@ -0,0 +1,68 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes } from 'react';
+import type { HeadingProps } from '../Heading';
+export type ErrorLink = {
+    id: string;
+    label: string;
+};
+export type InvalidFormAlertProps = {
+    /**
+     * The text following the error count.
+     * This is used to show the error count in the document title.
+     * @default { plural: 'invoerfouten', singular: 'invoerfout' }
+     */
+    errorCountLabel?: {
+        plural: string;
+        singular: string;
+    };
+    /** The list of error messages to display. */
+    errors: ErrorLink[];
+    /**
+     * Whether the component receives focus on first render
+     * @default true
+     */
+    focusOnRender?: boolean;
+    /**
+     * The text for the Heading.
+     * @default Verbeter de fouten voor u verder gaat
+     */
+    heading?: string;
+    /**
+     * The hierarchical level of the Invalid Form Alert’s Heading within the document.
+     * There is no default value; determine the correct level for each instance.
+     * Note: this intentionally does not change the font size.
+     **/
+    headingLevel: HeadingProps['level'];
+} & HTMLAttributes<HTMLDivElement>;
+export declare const InvalidFormAlert: import("react").ForwardRefExoticComponent<{
+    /**
+     * The text following the error count.
+     * This is used to show the error count in the document title.
+     * @default { plural: 'invoerfouten', singular: 'invoerfout' }
+     */
+    errorCountLabel?: {
+        plural: string;
+        singular: string;
+    };
+    /** The list of error messages to display. */
+    errors: ErrorLink[];
+    /**
+     * Whether the component receives focus on first render
+     * @default true
+     */
+    focusOnRender?: boolean;
+    /**
+     * The text for the Heading.
+     * @default Verbeter de fouten voor u verder gaat
+     */
+    heading?: string;
+    /**
+     * The hierarchical level of the Invalid Form Alert’s Heading within the document.
+     * There is no default value; determine the correct level for each instance.
+     * Note: this intentionally does not change the font size.
+     **/
+    headingLevel: HeadingProps["level"];
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/InvalidFormAlert/InvalidFormAlert.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { forwardRef, useState } from 'react';
+import { InvalidFormAlertWithErrors } from './InvalidFormAlertWithErrors';
+import { useAddErrorCountToDocumentTitle } from './useAddErrorCountToDocumentTitle';
+export const InvalidFormAlert = forwardRef(({ errorCountLabel, errors, ...restProps }, ref) => {
+    // An Invalid Form Alert without errors only resets the document title.
+    // With errors, it renders the InvalidFormAlertWithErrors component.
+    useAddErrorCountToDocumentTitle(errors, errorCountLabel);
+    // Focus should only be set on first render of InvalidFormAlertWithErrors.
+    // Subsequent renders should not set focus.
+    const [hasFocusedOnce, setHasFocusedOnce] = useState(false);
+    if (errors.length === 0)
+        return undefined;
+    return (_jsx(InvalidFormAlertWithErrors, { ...restProps, errors: errors, hasFocusedOnce: hasFocusedOnce, ref: ref, setHasFocusedOnce: setHasFocusedOnce }));
+});
+InvalidFormAlert.displayName = 'InvalidFormAlert';

package/dist/InvalidFormAlert/InvalidFormAlert.test.d.ts

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

package/dist/InvalidFormAlert/InvalidFormAlert.test.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import { createRef } from 'react';
+import { InvalidFormAlert } from './InvalidFormAlert';
+import '@testing-library/jest-dom';
+describe('Invalid Form Alert', () => {
+    const testErrors = [
+        { id: '#', label: 'Vul een geldige datum in (bijvoorbeeld 6 januari 2030).' },
+        { id: '#', label: 'De geldigheidsdatum van uw paspoort moet in de toekomst liggen.' },
+    ];
+    it('renders', () => {
+        const { container } = render(_jsx(InvalidFormAlert, { errors: testErrors, headingLevel: 2 }));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('does not render when there are no errors', () => {
+        const { container } = render(_jsx(InvalidFormAlert, { errors: [], headingLevel: 2 }));
+        const component = container.querySelector(':only-child');
+        expect(component).not.toBeInTheDocument();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(InvalidFormAlert, { errors: testErrors, headingLevel: 2 }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-invalid-form-alert');
+    });
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(InvalidFormAlert, { className: "extra", errors: testErrors, headingLevel: 2 }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-invalid-form-alert extra');
+    });
+    it('renders a list item and link for every error', () => {
+        render(_jsx(InvalidFormAlert, { errors: testErrors, headingLevel: 2 }));
+        const listItems = screen.getAllByRole('listitem');
+        const links = screen.getAllByRole('link');
+        expect(listItems.length).toBe(2);
+        expect(links.length).toBe(2);
+    });
+    it('renders a link with the correct name and href for every error', () => {
+        render(_jsx(InvalidFormAlert, { errors: testErrors, headingLevel: 2 }));
+        const link1 = screen.getByRole('link', { name: testErrors[0].label });
+        const link2 = screen.getByRole('link', { name: testErrors[1].label });
+        expect(link1).toHaveAttribute('href', testErrors[0].id);
+        expect(link2).toHaveAttribute('href', testErrors[1].id);
+    });
+    it('renders a custom heading', () => {
+        render(_jsx(InvalidFormAlert, { errors: testErrors, heading: "Test heading", headingLevel: 2 }));
+        const component = screen.getByRole('heading', { name: 'Test heading' });
+        expect(component).toBeInTheDocument();
+    });
+    it('renders the correct heading level', () => {
+        render(_jsx(InvalidFormAlert, { errors: testErrors, headingLevel: 4 }));
+        const component = screen.getByRole('heading', { level: 4 });
+        expect(component).toBeInTheDocument();
+    });
+    const docTitle = 'Document title';
+    const singleTestError = [{ id: '#', label: 'De geldigheidsdatum van uw paspoort moet in de toekomst liggen.' }];
+    describe('prepends the document title with the error count', () => {
+        it('single error', async () => {
+            document.title = docTitle;
+            render(_jsx(InvalidFormAlert, { errors: singleTestError, headingLevel: 2 }));
+            await waitFor(() => expect(document.title).toBe(`(1 invoerfout) ${docTitle}`));
+        });
+        it('multiple errors', async () => {
+            document.title = docTitle;
+            render(_jsx(InvalidFormAlert, { errors: testErrors, headingLevel: 2 }));
+            await waitFor(() => expect(document.title).toBe(`(2 invoerfouten) ${docTitle}`));
+        });
+    });
+    describe('renders a custom document title label', () => {
+        const label = { plural: 'errors', singular: 'error' };
+        it('no errors', async () => {
+            document.title = docTitle;
+            render(_jsx(InvalidFormAlert, { errors: [], headingLevel: 2 }));
+            await waitFor(() => expect(document.title).toBe(docTitle));
+        });
+        it('single error', async () => {
+            document.title = docTitle;
+            render(_jsx(InvalidFormAlert, { errorCountLabel: label, errors: singleTestError, headingLevel: 2 }));
+            await waitFor(() => expect(document.title).toBe(`(1 error) ${docTitle}`));
+        });
+        it('multiple errors', async () => {
+            document.title = docTitle;
+            render(_jsx(InvalidFormAlert, { errorCountLabel: label, errors: testErrors, headingLevel: 2 }));
+            await waitFor(() => expect(document.title).toBe(`(2 errors) ${docTitle}`));
+        });
+    });
+    it('has focus on render', async () => {
+        const { container } = render(_jsx(InvalidFormAlert, { errors: testErrors, headingLevel: 2 }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveFocus();
+    });
+    it('can disable automatic focus', async () => {
+        const { container } = render(_jsx(InvalidFormAlert, { errors: testErrors, focusOnRender: false, headingLevel: 2 }));
+        const component = container.querySelector(':only-child');
+        expect(component).not.toHaveFocus();
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(InvalidFormAlert, { errors: testErrors, headingLevel: 2, ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/InvalidFormAlert/InvalidFormAlertWithErrors.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { Dispatch, SetStateAction } from 'react';
+import type { InvalidFormAlertProps } from './InvalidFormAlert';
+export declare const InvalidFormAlertWithErrors: import("react").ForwardRefExoticComponent<Omit<InvalidFormAlertProps, "errorCountLabel"> & {
+    /** Whether the component has set focus once. */
+    hasFocusedOnce: boolean;
+    /** Callback to let parent component know whether focus has been set once. */
+    setHasFocusedOnce: Dispatch<SetStateAction<boolean>>;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/InvalidFormAlert/InvalidFormAlertWithErrors.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
+import { Alert } from '../Alert';
+import { LinkList } from '../LinkList';
+export const InvalidFormAlertWithErrors = forwardRef(({ className, errors, focusOnRender = true, hasFocusedOnce, heading = 'Verbeter de fouten voor u verder gaat', headingLevel, setHasFocusedOnce, ...restProps }, ref) => {
+    const innerRef = useRef(null);
+    // use a passed ref if it's there, otherwise use innerRef
+    useImperativeHandle(ref, () => innerRef.current);
+    useEffect(() => {
+        if (innerRef.current && focusOnRender && !hasFocusedOnce) {
+            innerRef.current.focus();
+            setHasFocusedOnce(true);
+        }
+    }, [innerRef]);
+    return (_jsx(Alert, { ...restProps, className: clsx('ams-invalid-form-alert', className), heading: heading, headingLevel: headingLevel, ref: innerRef, severity: "error", tabIndex: -1, children: _jsx(LinkList, { children: errors.map(({ id, label }) => (_jsx(LinkList.Link, { href: id, children: label }, `${id}-${label}`))) }) }));
+});
+InvalidFormAlertWithErrors.displayName = 'InvalidFormAlertWithErrors';

package/dist/InvalidFormAlert/index.d.ts

@@ -0,0 +1,2 @@
+export { InvalidFormAlert } from './InvalidFormAlert';
+export type { ErrorLink, InvalidFormAlertProps } from './InvalidFormAlert';

package/dist/InvalidFormAlert/index.js

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

package/dist/InvalidFormAlert/useAddErrorCountToDocumentTitle.d.ts

@@ -0,0 +1,11 @@
+export declare const useAddErrorCountToDocumentTitle: (
+/** The list of error messages used to calculate the error count. */
+errors: {
+    id: string;
+    label: string;
+}[], 
+/** The text following the error count. */
+label?: {
+    plural: string;
+    singular: string;
+}) => null;

package/dist/InvalidFormAlert/useAddErrorCountToDocumentTitle.js

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react';
+export const useAddErrorCountToDocumentTitle = (
+/** The list of error messages used to calculate the error count. */
+errors, 
+/** The text following the error count. */
+label = {
+    plural: 'invoerfouten',
+    singular: 'invoerfout',
+}) => {
+    const [documentTitle, setDocumentTitle] = useState();
+    useEffect(() => {
+        setDocumentTitle(document.title);
+    }, []);
+    if (!documentTitle)
+        return null;
+    if (errors.length === 1) {
+        document.title = `(${errors.length} ${label.singular}) ${documentTitle}`;
+    }
+    else if (errors.length > 1) {
+        document.title = `(${errors.length} ${label.plural}) ${documentTitle}`;
+    }
+    else {
+        document.title = documentTitle;
+    }
+    return null;
+};

package/dist/Label/Label.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright Gemeente Amsterdam
+ */
+import type { LabelHTMLAttributes, PropsWithChildren } from 'react';
+import { HintProps } from '../Hint';
+export type LabelProps = PropsWithChildren<LabelHTMLAttributes<HTMLLabelElement>> & HintProps;
+export declare const Label: import("react").ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLabelElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").HTMLAttributes<HTMLElement> & {
+    hint?: string;
+    optional?: boolean;
+} & import("react").RefAttributes<HTMLLabelElement>>;

package/dist/Label/Label.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Hint } from '../Hint';
+export const Label = forwardRef(({ children, className, hint, optional, ...restProps }, ref) => {
+    return (_jsxs("label", { ...restProps, className: clsx('ams-label', className), ref: ref, children: [children, " ", _jsx(Hint, { hint: hint, optional: optional })] }));
+});
+Label.displayName = 'Label';

package/dist/Label/Label.test.d.ts

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