@amsterdam/design-system-react 0.14.1 → 0.16.0

package/dist/Hint/Hint.test.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { Hint } from '.';
+import '@testing-library/jest-dom';
+describe('Hint', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(Hint, { hint: "hint" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(Hint, { optional: true }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-hint');
+    });
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(Hint, { className: "extra", optional: true }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-hint extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(Hint, { ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+    it('renders the provided hint text', () => {
+        const { container } = render(_jsx(Hint, { hint: "hint text" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveTextContent('(hint text)');
+    });
+    it('renders the default hint text', () => {
+        const { container } = render(_jsx(Hint, { optional: true }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveTextContent('(niet verplicht)');
+    });
+    it('renders the provided hint text when `optional` is set to `false`', () => {
+        const { container } = render(_jsx(Hint, { hint: "not required", optional: true }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveTextContent('(not required)');
+    });
+    it('renders the provided hint text "required" while also being marked as not optional', () => {
+        const { container } = render(_jsx(Hint, { hint: "required", optional: false }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveTextContent('(required)');
+    });
+});

package/dist/Hint/index.d.ts

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

package/dist/Hint/index.js

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

package/dist/Icon/Icon.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, ReactNode } from 'react';
+export declare const iconSizes: readonly ["small", "large", "heading-3", "heading-4", "heading-5", "heading-6"];
+type IconSize = (typeof iconSizes)[number];
+export type IconProps = {
+    /** Changes the icon colour for readability on a dark background. */
+    color?: 'inverse';
+    /** The size of the icon. Choose the size of the corresponding body text or heading. */
+    size?: IconSize;
+    /** Whether the icon container should be made square. */
+    square?: boolean;
+    /** The component rendering the icon’s markup. */
+    svg: Function | ReactNode;
+} & HTMLAttributes<HTMLSpanElement>;
+export declare const Icon: import("react").ForwardRefExoticComponent<{
+    /** Changes the icon colour for readability on a dark background. */
+    color?: "inverse";
+    /** The size of the icon. Choose the size of the corresponding body text or heading. */
+    size?: IconSize;
+    /** Whether the icon container should be made square. */
+    square?: boolean;
+    /** The component rendering the icon’s markup. */
+    svg: Function | ReactNode;
+} & HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLElement>>;
+export {};

package/dist/Icon/Icon.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2021 Gemeente Utrecht
+ * Copyright (c) 2021 Robbert Broersma
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+export const iconSizes = ['small', 'large', 'heading-3', 'heading-4', 'heading-5', 'heading-6'];
+export const Icon = forwardRef(({ className, color, size, square, svg, ...restProps }, ref) => (_jsx("span", { className: clsx('ams-icon', color && `ams-icon--${color}`, size && `ams-icon--${size}`, square && 'ams-icon--square', className), ref: ref, ...restProps, children: typeof svg === 'function' ? svg() : svg })));
+Icon.displayName = 'Icon';

package/dist/Icon/Icon.test.d.ts

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

package/dist/Icon/Icon.test.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AlertIcon } from '@amsterdam/design-system-react-icons';
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { Icon, iconSizes } from './Icon';
+import '@testing-library/jest-dom';
+describe('Icon', () => {
+    it('renders a span element', () => {
+        const { container } = render(_jsx(Icon, { svg: AlertIcon }));
+        const icon = container.querySelector('span:only-child');
+        expect(icon).toBeInTheDocument();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(Icon, { svg: AlertIcon }));
+        const icon = container.querySelector(':only-child');
+        expect(icon).toHaveClass('ams-icon');
+    });
+    it('renders an svg child', () => {
+        const { container } = render(_jsx(Icon, { svg: AlertIcon }));
+        const svg = container.querySelector(':only-child svg');
+        expect(svg).toBeInTheDocument();
+    });
+    iconSizes.forEach((size) => {
+        it(`renders the correct class name for a ‘${size}’ icon`, () => {
+            const { container } = render(_jsx(Icon, { size: size, svg: AlertIcon }));
+            const icon = container.querySelector(':only-child');
+            expect(icon).toHaveClass(`ams-icon--${size}`);
+        });
+    });
+    it('renders the right square class', () => {
+        const { container } = render(_jsx(Icon, { square: true, svg: AlertIcon }));
+        const icon = container.querySelector('span:only-child');
+        expect(icon).toHaveClass('ams-icon--square');
+    });
+    it('renders the class name for inverse color', () => {
+        const { container } = render(_jsx(Icon, { color: "inverse", svg: AlertIcon }));
+        const icon = container.querySelector('span:only-child');
+        expect(icon).toHaveClass('ams-icon--inverse');
+    });
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(Icon, { className: "extra", svg: AlertIcon }));
+        const icon = container.querySelector(':only-child');
+        expect(icon).toHaveClass('ams-icon extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(Icon, { ref: ref, svg: AlertIcon }));
+        const icon = container.querySelector(':only-child');
+        expect(ref.current).toBe(icon);
+    });
+});

package/dist/Icon/index.d.ts

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

package/dist/Icon/index.js

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

package/dist/IconButton/IconButton.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { ButtonHTMLAttributes } from 'react';
+import type { IconProps } from '../Icon';
+export type IconButtonProps = {
+    /** Changes the text colour for readability on a light or dark background. */
+    color?: 'contrast' | 'inverse';
+    /** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
+    label: string;
+    /** The size of the icon. */
+    size?: IconProps['size'];
+    /** The component rendering the icon’s markup. */
+    svg?: IconProps['svg'];
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const IconButton: import("react").ForwardRefExoticComponent<{
+    /** Changes the text colour for readability on a light or dark background. */
+    color?: "contrast" | "inverse";
+    /** The accessible text for the button. Will be announced by screen readers. Should describe the button’s action. */
+    label: string;
+    /** The size of the icon. */
+    size?: IconProps["size"];
+    /** The component rendering the icon’s markup. */
+    svg?: IconProps["svg"];
+} & ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/IconButton/IconButton.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { CloseIcon } from '@amsterdam/design-system-react-icons';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Icon } from '../Icon';
+export const IconButton = forwardRef(({ className, color, label, size, svg = CloseIcon, type, ...restProps }, ref) => (_jsxs("button", { ...restProps, className: clsx('ams-icon-button', color && `ams-icon-button--${color}`, className), ref: ref, type: type || 'button', children: [_jsx("span", { className: "ams-visually-hidden", children: label }), _jsx(Icon, { size: size, square: true, svg: svg })] })));
+IconButton.displayName = 'IconButton';

package/dist/IconButton/IconButton.test.d.ts

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

package/dist/IconButton/IconButton.test.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { IconButton } from './IconButton';
+import '@testing-library/jest-dom';
+describe('Icon button', () => {
+    it('renders', () => {
+        render(_jsx(IconButton, { label: "Test" }));
+        const component = screen.getByRole('button');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(IconButton, { label: "Test" }));
+        const component = screen.getByRole('button');
+        expect(component).toHaveClass('ams-icon-button');
+    });
+    it('renders an extra class name', () => {
+        render(_jsx(IconButton, { className: "extra", label: "Test" }));
+        const component = screen.getByRole('button');
+        expect(component).toHaveClass('ams-icon-button extra');
+    });
+    it('renders an accessible label', () => {
+        render(_jsx(IconButton, { className: "extra", label: "Test" }));
+        const component = screen.getByRole('button', { name: 'Test' });
+        expect(component).toBeInTheDocument();
+    });
+    it('renders the class name for contrast color', () => {
+        render(_jsx(IconButton, { color: "contrast", label: "Test" }));
+        const component = screen.getByRole('button');
+        expect(component).toHaveClass('ams-icon-button--contrast');
+    });
+    it('renders the class name for inverse color', () => {
+        render(_jsx(IconButton, { color: "inverse", label: "Test" }));
+        const component = screen.getByRole('button');
+        expect(component).toHaveClass('ams-icon-button--inverse');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(IconButton, { label: "Test", ref: ref }));
+        const component = screen.getByRole('button');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/IconButton/index.d.ts

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

package/dist/IconButton/index.js

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

package/dist/Image/Image.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { ImgHTMLAttributes } from 'react';
+import { AspectRatioProps } from '../common/types';
+export type ImageProps = {
+    /** A textual description of the content of the image. */
+    alt: string;
+} & AspectRatioProps & Omit<ImgHTMLAttributes<HTMLImageElement>, 'children'>;
+export declare const Image: import("react").ForwardRefExoticComponent<{
+    /** A textual description of the content of the image. */
+    alt: string;
+} & AspectRatioProps & Omit<ImgHTMLAttributes<HTMLImageElement>, "children"> & import("react").RefAttributes<HTMLImageElement>>;

package/dist/Image/Image.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';
+import { generateAspectRatioClass } from './generateAspectRatioClass';
+export const Image = forwardRef(({ aspectRatio, className, ...restProps }, ref) => (_jsx("img", { ...restProps, className: clsx('ams-image', generateAspectRatioClass(aspectRatio), className), ref: ref })));
+Image.displayName = 'Image';

package/dist/Image/Image.test.d.ts

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

package/dist/Image/Image.test.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { Image } from './Image';
+import { generateAspectRatioClass } from './generateAspectRatioClass';
+import { aspectRatioOptions } from '../common/types';
+import '@testing-library/jest-dom';
+describe('Image', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(Image, { alt: "" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(Image, { alt: "" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-image');
+    });
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(Image, { alt: "", className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-image extra');
+    });
+    aspectRatioOptions.forEach((aspectRatio) => {
+        it(`renders class names to display the image in the ${aspectRatio} aspect ratio`, () => {
+            const { container } = render(_jsx(Image, { alt: "", aspectRatio: aspectRatio }));
+            const component = container.querySelector(':only-child');
+            const aspectRatioClass = generateAspectRatioClass(aspectRatio) || '';
+            expect(component).toHaveClass(aspectRatioClass);
+        });
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(Image, { alt: "", ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Image/generateAspectRatioClass.d.ts

@@ -0,0 +1 @@
+export declare const generateAspectRatioClass: (aspectRatio?: string) => string | undefined;

package/dist/Image/generateAspectRatioClass.js

@@ -0,0 +1 @@
+export const generateAspectRatioClass = (aspectRatio) => aspectRatio && `ams-aspect-ratio-${aspectRatio.replace(':', '-')}`;

package/dist/Image/index.d.ts

@@ -0,0 +1,3 @@
+export { Image } from './Image';
+export { generateAspectRatioClass } from './generateAspectRatioClass';
+export type { ImageProps } from './Image';

package/dist/Image/index.js

@@ -0,0 +1,2 @@
+export { Image } from './Image';
+export { generateAspectRatioClass } from './generateAspectRatioClass';

package/dist/ImageSlider/ImageSlider.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes } from 'react';
+import { ImageProps } from '../Image/Image';
+export type ImageSliderImageProps = ImageProps;
+export type ImageSliderProps = {
+    /** Display buttons to navigate to the previous or next image. */
+    controls?: boolean;
+    /** Label for the image if you need to translate the alt text. */
+    imageLabel?: string;
+    /** The set of images to display. */
+    images: ImageSliderImageProps[];
+    /** The label for the ‘next’ button */
+    nextLabel?: string;
+    /** The label for the ‘previous’ button */
+    previousLabel?: string;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const ImageSliderRoot: import("react").ForwardRefExoticComponent<{
+    /** Display buttons to navigate to the previous or next image. */
+    controls?: boolean;
+    /** Label for the image if you need to translate the alt text. */
+    imageLabel?: string;
+    /** The set of images to display. */
+    images: ImageSliderImageProps[];
+    /** The label for the ‘next’ button */
+    nextLabel?: string;
+    /** The label for the ‘previous’ button */
+    previousLabel?: string;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ImageSlider: import("react").ForwardRefExoticComponent<{
+    /** Display buttons to navigate to the previous or next image. */
+    controls?: boolean;
+    /** Label for the image if you need to translate the alt text. */
+    imageLabel?: string;
+    /** The set of images to display. */
+    images: ImageSliderImageProps[];
+    /** The label for the ‘next’ button */
+    nextLabel?: string;
+    /** The label for the ‘previous’ button */
+    previousLabel?: string;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>> & {
+    Item: import("react").ForwardRefExoticComponent<{
+        slideId: number;
+    } & HTMLAttributes<HTMLDivElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/ImageSlider/ImageSlider.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ImageSliderContext } from './ImageSliderContext';
+import { ImageSliderControls } from './ImageSliderControls';
+import { ImageSliderItem } from './ImageSliderItem';
+import { ImageSliderScroller } from './ImageSliderScroller';
+import { ImageSliderThumbnails } from './ImageSliderThumbnails';
+import { Image } from '../Image/Image';
+export const ImageSliderRoot = forwardRef(({ className, controls, imageLabel = 'Afbeelding', images, nextLabel = 'Volgende', previousLabel = 'Vorige', ...restProps }, ref) => {
+    const [currentSlideId, setCurrentSlideId] = useState(0);
+    const [isAtStart, setIsAtStart] = useState(true);
+    const [isAtEnd, setIsAtEnd] = useState(false);
+    const targetRef = useRef(null);
+    const observerRef = useRef(null);
+    const inView = useCallback((observations) => {
+        const images = Array.from(targetRef.current?.children || []);
+        observations.forEach((observation) => {
+            if (observation.isIntersecting) {
+                setCurrentSlideId(images.indexOf(observation.target));
+            }
+        });
+    }, []);
+    const observerOptions = useMemo(() => ({
+        root: targetRef.current,
+        threshold: 0.6,
+    }), []);
+    const updateControls = useCallback(() => {
+        const sliderScrollerElement = targetRef.current;
+        if (!sliderScrollerElement)
+            return;
+        const { firstElementChild: firstElement, lastElementChild: lastElement } = sliderScrollerElement;
+        setIsAtStart(firstElement === sliderScrollerElement?.children[currentSlideId]);
+        setIsAtEnd(lastElement === sliderScrollerElement?.children[currentSlideId]);
+    }, [currentSlideId]);
+    useEffect(() => {
+        if (targetRef.current) {
+            observerRef.current = new IntersectionObserver(inView, observerOptions);
+            const observer = observerRef.current;
+            const slides = Array.from(targetRef.current.children);
+            slides.forEach((slide) => observer.observe(slide));
+            targetRef.current.addEventListener('scrollend', synchronise);
+            updateControls();
+            return () => {
+                slides.forEach((slide) => observer.unobserve(slide));
+                targetRef.current?.removeEventListener('scrollend', synchronise);
+            };
+        }
+        return undefined;
+    }, [inView, observerOptions, updateControls]);
+    const synchronise = useCallback(() => updateControls(), [updateControls]);
+    const goToSlide = useCallback((element) => {
+        const sliderScrollerElement = targetRef.current;
+        if (!sliderScrollerElement || !element)
+            return;
+        sliderScrollerElement.scrollTo({
+            left: sliderScrollerElement.scrollLeft + element.offsetLeft - sliderScrollerElement.scrollLeft,
+        });
+    }, []);
+    const goToSlideId = useCallback((id) => {
+        const element = targetRef.current?.children[id];
+        if (element)
+            goToSlide(element);
+    }, [goToSlide]);
+    const goToNextSlide = useCallback(() => {
+        const element = targetRef.current?.children[currentSlideId];
+        const nextElement = element?.nextElementSibling;
+        if (nextElement)
+            goToSlide(nextElement);
+    }, [currentSlideId, goToSlide]);
+    const goToPreviousSlide = useCallback(() => {
+        const element = targetRef.current?.children[currentSlideId];
+        const previousElement = element?.previousElementSibling;
+        if (previousElement)
+            goToSlide(previousElement);
+    }, [currentSlideId, goToSlide]);
+    useEffect(() => {
+        const handleResize = () => {
+            const sliderScrollerElement = targetRef.current;
+            const currentSlideElement = targetRef.current?.children[currentSlideId];
+            if (!sliderScrollerElement || !currentSlideElement)
+                return;
+            const expectedScrollLeft = currentSlideElement.offsetLeft;
+            if (Math.abs(sliderScrollerElement.scrollLeft - expectedScrollLeft) < 1)
+                return;
+            goToSlide(currentSlideElement);
+        };
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [currentSlideId, goToSlide]);
+    return (_jsx(ImageSliderContext.Provider, { value: { currentSlideId, goToNextSlide, goToPreviousSlide, goToSlideId, isAtEnd, isAtStart }, children: _jsxs("div", { ...restProps, "aria-roledescription": "carousel", className: clsx('ams-image-slider', controls && 'ams-image-slider--controls', className), ref: ref, tabIndex: -1, children: [controls && _jsx(ImageSliderControls, { nextLabel: nextLabel, previousLabel: previousLabel }), _jsx(ImageSliderScroller, { "aria-live": "polite", ref: targetRef, role: "group", tabIndex: 0, children: images.map(({ alt, aspectRatio, sizes, src, srcSet }, index) => (_jsx(ImageSliderItem, { slideId: index, children: _jsx(Image, { alt: alt, aspectRatio: aspectRatio, sizes: sizes, src: src, srcSet: srcSet }) }, index))) }), _jsx(ImageSliderThumbnails, { imageLabel: imageLabel, thumbnails: images })] }) }));
+});
+ImageSliderRoot.displayName = 'ImageSlider';
+export const ImageSlider = Object.assign(ImageSliderRoot, { Item: ImageSliderItem });

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

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

package/dist/ImageSlider/ImageSlider.test.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { ImageSlider } from './ImageSlider';
+import '@testing-library/jest-dom';
+const observe = jest.fn();
+const unobserve = jest.fn();
+const disconnect = jest.fn();
+const takeRecords = jest.fn();
+// Mock implementation of IntersectionObserver
+window.IntersectionObserver = jest.fn(() => ({
+    disconnect,
+    observe,
+    root: null,
+    rootMargin: '',
+    takeRecords,
+    thresholds: [],
+    unobserve,
+}));
+describe('Image Slider', () => {
+    const images = [
+        {
+            alt: 'Bridge',
+            src: 'https://picsum.photos/id/122/320/180',
+        },
+        {
+            alt: 'Bunker',
+            src: 'https://picsum.photos/id/101/320/180',
+        },
+        {
+            alt: 'Chairs',
+            src: 'https://picsum.photos/id/153/320/180',
+        },
+    ];
+    it('renders', () => {
+        const { container } = render(_jsx(ImageSlider, { images: images }));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders slides', () => {
+        const { container } = render(_jsx(ImageSlider, { images: images }));
+        const slides = Array.from(container.querySelectorAll('.ams-image-slider__item'));
+        expect(slides).toHaveLength(3);
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(ImageSlider, { images: images }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-image-slider');
+    });
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(ImageSlider, { className: "extra", images: images }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-image-slider extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(ImageSlider, { images: images, ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+    it('renders thumbnails', () => {
+        const { container } = render(_jsx(ImageSlider, { images: images }));
+        expect(container.querySelector('.ams-image-slider__thumbnails')).toBeInTheDocument();
+    });
+});

package/dist/ImageSlider/ImageSliderContext.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+export type ImageSliderContextValue = {
+    currentSlideId: number;
+    goToNextSlide: () => void;
+    goToPreviousSlide: () => void;
+    goToSlideId: (id: number) => void;
+    isAtEnd: boolean;
+    isAtStart: boolean;
+};
+export declare const ImageSliderContext: import("react").Context<ImageSliderContextValue>;

package/dist/ImageSlider/ImageSliderContext.js

@@ -0,0 +1,14 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { createContext } from 'react';
+const defaultValues = {
+    currentSlideId: 0,
+    goToNextSlide: () => { },
+    goToPreviousSlide: () => { },
+    goToSlideId: () => { },
+    isAtEnd: false,
+    isAtStart: true,
+};
+export const ImageSliderContext = createContext(defaultValues);

package/dist/ImageSlider/ImageSliderControls.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes } from 'react';
+export type ImageSliderControlsProps = {
+    /** The label for the ‘next’ button */
+    nextLabel: string;
+    /** The label for the ‘previous’ button */
+    previousLabel: string;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const ImageSliderControls: import("react").ForwardRefExoticComponent<{
+    /** The label for the ‘next’ button */
+    nextLabel: string;
+    /** The label for the ‘previous’ button */
+    previousLabel: string;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/ImageSlider/ImageSliderControls.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { ChevronLeftIcon, ChevronRightIcon } from '@amsterdam/design-system-react-icons';
+import clsx from 'clsx';
+import { forwardRef, useCallback, useContext } from 'react';
+import { ImageSliderContext } from './ImageSliderContext';
+import { IconButton } from '../IconButton';
+export const ImageSliderControls = forwardRef(({ className, nextLabel, previousLabel, ...restProps }, ref) => {
+    const { goToNextSlide, goToPreviousSlide, isAtEnd, isAtStart } = useContext(ImageSliderContext);
+    const handleClickPrevious = useCallback(() => goToPreviousSlide(), [goToPreviousSlide]);
+    const handleClickNext = useCallback(() => goToNextSlide(), [goToNextSlide]);
+    return (_jsxs("div", { ...restProps, className: clsx('ams-image-slider__controls', className), ref: ref, children: [_jsx(IconButton, { className: "ams-image-slider__control ams-image-slider__control--previous", color: "inverse", disabled: isAtStart, label: previousLabel, onClick: handleClickPrevious, svg: ChevronLeftIcon }), _jsx(IconButton, { className: "ams-image-slider__control ams-image-slider__control--next", color: "inverse", disabled: isAtEnd, label: nextLabel, onClick: handleClickNext, svg: ChevronRightIcon })] }));
+});
+ImageSliderControls.displayName = 'ImageSliderControls';

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

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