@amsterdam/design-system-react 0.14.1 → 0.15.0

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 }, 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 additional 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 additional 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';

package/dist/Label/Label.test.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Label } from './Label';
+import '@testing-library/jest-dom';
+describe('Label', () => {
+    it('renders an HTML label element', () => {
+        const { container } = render(_jsx(Label, { htmlFor: "form-control" }));
+        const label = container.querySelector('label:only-child');
+        expect(label).toBeInTheDocument();
+        expect(label).toBeVisible();
+    });
+    it('renders an HTML label element with for attribute', () => {
+        const { container } = render(_jsx(Label, { htmlFor: "form-control" }));
+        const label = container.querySelector('label[for="form-control"]:only-child');
+        expect(label).toBeInTheDocument();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(Label, { htmlFor: "form-control" }));
+        const label = container.querySelector(':only-child');
+        expect(label).toHaveClass('ams-label');
+    });
+    it('renders rich text content', () => {
+        const { container } = render(_jsxs(Label, { htmlFor: "form-control", children: [_jsx("strong", { children: "Current" }), " password"] }));
+        const label = container.querySelector(':only-child');
+        const richText = label?.querySelector('strong');
+        expect(richText).toBeInTheDocument();
+    });
+    it('can be associated with an HTML form input', () => {
+        render(_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: "email", children: "Email" }), _jsx("input", { id: "email", type: "email" })] }));
+        const textbox = screen.getByRole('textbox', {
+            name: 'Email',
+        });
+        expect(textbox).toBeInTheDocument();
+        expect(textbox).toBeVisible();
+    });
+    it('can be hidden', () => {
+        const { container } = render(_jsx(Label, { hidden: true, htmlFor: "form-control" }));
+        const label = container.querySelector(':only-child');
+        expect(label).not.toBeVisible();
+    });
+    it('renders an additional class name', () => {
+        const { container } = render(_jsx(Label, { className: "large", htmlFor: "form-control" }));
+        const label = container.querySelector(':only-child');
+        expect(label).toHaveClass('large');
+        expect(label).toHaveClass('ams-label');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(Label, { htmlFor: "form-control", ref: ref }));
+        const div = container.querySelector(':only-child');
+        expect(ref.current).toBe(div);
+    });
+    it('renders the provided hint text after the label', () => {
+        const { container } = render(_jsx(Label, { hint: "hint text", htmlFor: "form-control", children: "Label" }));
+        const label = container.querySelector('label:only-child');
+        expect(label).toHaveTextContent('Label (hint text)');
+    });
+    it('renders the default hint text after the label', () => {
+        const { container } = render(_jsx(Label, { htmlFor: "form-control", optional: true, children: "Label" }));
+        const label = container.querySelector('label:only-child');
+        expect(label).toHaveTextContent('Label (niet verplicht)');
+    });
+    it('renders the provided hint text after the label when `optional` is set to `false`', () => {
+        const { container } = render(_jsx(Label, { hint: "not required", htmlFor: "form-control", optional: true, children: "Label" }));
+        const label = container.querySelector('label:only-child');
+        expect(label).toHaveTextContent('Label (not required)');
+    });
+    it('renders the provided hint text after the label while `optional` is set to `false`', () => {
+        const { container } = render(_jsx(Label, { hint: "required", htmlFor: "form-control", optional: false, children: "Label" }));
+        const label = container.querySelector('label:only-child');
+        expect(label).toHaveTextContent('Label (required)');
+    });
+});

package/dist/Label/index.d.ts

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

package/dist/Label/index.js

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

package/dist/Link/Link.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { AnchorHTMLAttributes } from 'react';
+type LinkVariant = 'standalone' | 'inline';
+export type LinkProps = {
+    /** Changes the text colour for readability on a light or dark background. */
+    color?: 'contrast' | 'inverse';
+    /** Whether the link is inline or stands alone. */
+    variant?: LinkVariant;
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'placeholder'>;
+export declare const Link: import("react").ForwardRefExoticComponent<{
+    /** Changes the text colour for readability on a light or dark background. */
+    color?: "contrast" | "inverse";
+    /** Whether the link is inline or stands alone. */
+    variant?: LinkVariant;
+} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "placeholder"> & import("react").RefAttributes<HTMLAnchorElement>>;
+export {};

package/dist/Link/Link.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 Link = forwardRef(({ children, className, color, variant = 'standalone', ...restProps }, ref) => (_jsx("a", { ...restProps, className: clsx('ams-link', color && `ams-link--${color}`, variant === 'inline' && 'ams-link--inline', variant === 'standalone' && 'ams-link--standalone', className), ref: ref, children: children })));
+Link.displayName = 'Link';

package/dist/Link/Link.test.d.ts

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

package/dist/Link/Link.test.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { Link } from './Link';
+import '@testing-library/jest-dom';
+describe('Link', () => {
+    const linktext = 'Linktext';
+    it('renders with href attribute', () => {
+        const { container } = render(_jsx(Link, { href: "#", children: linktext }));
+        const link = container.querySelector('a:only-child');
+        expect(link).toBeInTheDocument();
+        expect(link).toHaveAttribute('href', '#');
+    });
+    it('renders standalone variant', () => {
+        const { container } = render(_jsx(Link, { href: "#", children: linktext }));
+        const link = container.querySelector('a:only-child');
+        expect(link).toHaveClass('ams-link');
+    });
+    it('renders inline variant', () => {
+        const { container } = render(_jsx(Link, { href: "#", variant: "inline", children: linktext }));
+        const link = container.querySelector('a:only-child');
+        expect(link).toHaveClass('ams-link ams-link--inline');
+    });
+    it('renders an additional class name', () => {
+        const { container } = render(_jsx(Link, { className: "large" }));
+        const link = container.querySelector(':only-child');
+        expect(link).toHaveClass('large');
+        expect(link).toHaveClass('ams-link');
+    });
+    it('renders the class name for contrast color', () => {
+        const { container } = render(_jsx(Link, { color: "contrast", href: "#", children: linktext }));
+        const link = container.querySelector('a:only-child');
+        expect(link).toHaveClass('ams-link ams-link--contrast');
+    });
+    it('renders the class name for inverse color', () => {
+        const { container } = render(_jsx(Link, { color: "inverse", href: "#", children: linktext }));
+        const link = container.querySelector('a:only-child');
+        expect(link).toHaveClass('ams-link ams-link--inverse');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(Link, { href: "https://example.com/", ref: ref, children: 'https://example.com/' }));
+        const link = container.querySelector(':only-child');
+        expect(ref.current).toBe(link);
+    });
+});

package/dist/Link/index.d.ts

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

package/dist/Link/index.js

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

package/dist/LinkList/LinkList.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type LinkListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
+export declare const LinkList: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLUListElement>> & {
+    Link: import("react").ForwardRefExoticComponent<{
+        color?: "contrast" | "inverse";
+        icon?: Function;
+        size?: "small" | "large";
+    } & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLAnchorElement>>;
+};

package/dist/LinkList/LinkList.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { LinkListLink } from './LinkListLink';
+/** A collection of related links. */
+const LinkListRoot = forwardRef(({ children, className, ...restProps }, ref) => {
+    return (_jsx("ul", { className: clsx('ams-link-list', className), ref: ref, ...restProps, children: children }));
+});
+LinkListRoot.displayName = 'LinkList';
+export const LinkList = Object.assign(LinkListRoot, { Link: LinkListLink });

package/dist/LinkList/LinkList.test.d.ts

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