@amsterdam/design-system-react 0.15.0 → 0.16.0

package/dist/DescriptionList/DescriptionList.test.js

@@ -15,7 +15,7 @@ describe('Description List', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-description-list');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(DescriptionList, { className: "extra" }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-description-list extra');

package/dist/DescriptionList/DescriptionListDescription.test.js

@@ -15,7 +15,7 @@ describe('Description List Description', () => {
         const component = screen.getByRole('definition');
         expect(component).toHaveClass('ams-description-list__description');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(DescriptionList.Description, { className: "extra", children: "Test" }));
         const component = screen.getByRole('definition');
         expect(component).toHaveClass('ams-description-list__description extra');

package/dist/DescriptionList/DescriptionListSection.test.js

@@ -15,7 +15,7 @@ describe('Description List Section', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-description-list__section');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(DescriptionList.Section, { className: "extra", children: "Test" }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-description-list__section extra');

package/dist/DescriptionList/DescriptionListTerm.test.js

@@ -15,7 +15,7 @@ describe('Description List Term', () => {
         const component = screen.getByRole('term');
         expect(component).toHaveClass('ams-description-list__term');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(DescriptionList.Term, { className: "extra", children: "Test" }));
         const component = screen.getByRole('term');
         expect(component).toHaveClass('ams-description-list__term extra');

package/dist/Dialog/Dialog.test.js

@@ -15,7 +15,7 @@ describe('Dialog', () => {
         const component = screen.getByRole('dialog', { hidden: true });
         expect(component).toHaveClass('ams-dialog');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(Dialog, { className: "extra", heading: "Test heading" }));
         const component = screen.getByRole('dialog', { hidden: true });
         expect(component).toHaveClass('ams-dialog extra');

package/dist/ErrorMessage/ErrorMessage.test.js

@@ -15,7 +15,7 @@ describe('Error message', () => {
         const component = screen.getByRole('paragraph');
         expect(component).toHaveClass('ams-error-message');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(ErrorMessage, { className: "extra" }));
         const component = screen.getByRole('paragraph');
         expect(component).toHaveClass('ams-error-message extra');

package/dist/Field/Field.test.js

@@ -15,7 +15,7 @@ describe('Field', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-field');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(Field, { className: "extra" }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-field extra');

package/dist/FieldSet/FieldSet.test.js

@@ -15,7 +15,7 @@ describe('FieldSet', () => {
         const component = screen.getByRole('group', { name: 'Test' });
         expect(component).toHaveClass('ams-field-set');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(FieldSet, { className: "extra", legend: "Test" }));
         const component = screen.getByRole('group', { name: 'Test' });
         expect(component).toHaveClass('ams-field-set extra');

package/dist/Figure/Figure.test.js

@@ -15,7 +15,7 @@ describe('Figure', () => {
         const component = screen.getByRole('figure');
         expect(component).toHaveClass('ams-figure');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(Figure, { className: "extra" }));
         const component = screen.getByRole('figure');
         expect(component).toHaveClass('ams-figure extra');

package/dist/Figure/FigureCaption.test.js

@@ -20,7 +20,7 @@ describe('Figure Caption', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-figure__caption--inverse');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(FigureCaption, { className: "extra" }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-figure__caption extra');

package/dist/FileInput/FileInput.test.js

@@ -15,7 +15,7 @@ describe('File input', () => {
         const component = container.querySelector('input[type="file"]');
         expect(component).toHaveClass('ams-file-input');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(FileInput, { className: "extra" }));
         const component = container.querySelector('input[type="file"]');
         expect(component).toHaveClass('ams-file-input extra');

package/dist/FileList/FileList.test.js

@@ -15,7 +15,7 @@ describe('FileList', () => {
         const component = screen.getByRole('list');
         expect(component).toHaveClass('ams-file-list');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(FileList, { className: "extra" }));
         const component = screen.getByRole('list');
         expect(component).toHaveClass('ams-file-list extra');

package/dist/FileList/FileListItem.test.js

@@ -16,7 +16,7 @@ describe('FileListItem', () => {
         const component = screen.getByRole('listitem');
         expect(component).toHaveClass('ams-file-list__item');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(FileListItem, { className: "extra", file: file }));
         const component = screen.getByRole('listitem');
         expect(component).toHaveClass('ams-file-list__item extra');

package/dist/Grid/Grid.d.ts

@@ -9,27 +9,30 @@ export type GridColumnNumbers = {
     medium: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
     wide: GridColumnNumber;
 };
-export type GridPaddingSize = 'small' | 'medium' | 'large';
+export declare const gridGaps: readonly ["none", "large", "2x-large"];
+export type GridGap = (typeof gridGaps)[number];
+export declare const gridPaddings: readonly ["large", "x-large", "2x-large"];
+export type GridPadding = (typeof gridPaddings)[number];
 export declare const gridTags: readonly ["article", "aside", "div", "footer", "header", "main", "nav", "section"];
 export type GridTag = (typeof gridTags)[number];
 type GridPaddingVerticalProp = {
     paddingBottom?: never;
     paddingTop?: never;
     /** The amount of space above and below. */
-    paddingVertical?: GridPaddingSize;
+    paddingVertical?: GridPadding;
 };
 type GridPaddingTopAndBottomProps = {
     /** The amount of space below. */
-    paddingBottom?: GridPaddingSize;
+    paddingBottom?: GridPadding;
     /** The amount of space above. */
-    paddingTop?: GridPaddingSize;
+    paddingTop?: GridPadding;
     paddingVertical?: never;
 };
 export type GridProps = {
     /** The HTML tag to use. */
     as?: GridTag;
     /** The amount of space between rows. */
-    gapVertical?: 'none' | 'small' | 'large';
+    gapVertical?: GridGap;
 } & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 export declare const Grid: import("react").ForwardRefExoticComponent<GridProps & import("react").RefAttributes<any>> & {
     Cell: import("react").ForwardRefExoticComponent<import("./GridCell").GridCellProps & import("react").RefAttributes<unknown>>;

package/dist/Grid/Grid.js

@@ -7,6 +7,8 @@ import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { GridCell } from './GridCell';
 import { paddingClasses } from './paddingClasses';
+export const gridGaps = ['none', 'large', '2x-large'];
+export const gridPaddings = ['large', 'x-large', '2x-large'];
 export const gridTags = ['article', 'aside', 'div', 'footer', 'header', 'main', 'nav', 'section'];
 const GridRoot = forwardRef(({ as: Tag = 'div', children, className, gapVertical, paddingBottom, paddingTop, paddingVertical, ...restProps }, ref) => (_jsx(Tag, { ...restProps, className: clsx('ams-grid', gapVertical && `ams-grid--gap-vertical--${gapVertical}`, paddingClasses('grid', paddingBottom, paddingTop, paddingVertical), className), ref: ref, children: children })));
 GridRoot.displayName = 'Grid';

package/dist/Grid/Grid.test.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
-import { Grid, gridTags } from './Grid';
+import { Grid, gridGaps, gridPaddings, gridTags } from './Grid';
 import { ariaRoleForTag } from '../common/accessibility';
 import '@testing-library/jest-dom';
-const paddingSizes = ['small', 'medium', 'large'];
 describe('Grid', () => {
     it('renders', () => {
         const { container } = render(_jsx(Grid, {}));
@@ -17,42 +16,33 @@ describe('Grid', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-grid');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(Grid, { className: "extra" }));
         const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('extra');
-        expect(component).toHaveClass('ams-grid');
-    });
-    it('renders the correct class name for a zero gap', () => {
-        const { container } = render(_jsx(Grid, { gapVertical: "none" }));
-        const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('ams-grid--gap-vertical--none');
-    });
-    it(`renders the correct class name for a small gap`, () => {
-        const { container } = render(_jsx(Grid, { gapVertical: "small" }));
-        const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('ams-grid--gap-vertical--small');
+        expect(component).toHaveClass('ams-grid extra');
     });
-    it(`renders the correct class name for a large gap`, () => {
-        const { container } = render(_jsx(Grid, { gapVertical: "large" }));
-        const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('ams-grid--gap-vertical--large');
+    gridGaps.forEach((size) => {
+        it(`renders the correct class name for a ${size} vertical gap`, () => {
+            const { container } = render(_jsx(Grid, { gapVertical: size }));
+            const component = container.querySelector(':only-child');
+            expect(component).toHaveClass(`ams-grid--gap-vertical--${size}`);
+        });
     });
-    paddingSizes.forEach((size) => {
+    gridPaddings.forEach((size) => {
         it(`renders the correct class name for a ${size} bottom padding`, () => {
             const { container } = render(_jsx(Grid, { paddingBottom: size }));
             const component = container.querySelector(':only-child');
             expect(component).toHaveClass(`ams-grid--padding-bottom--${size}`);
         });
     });
-    paddingSizes.forEach((size) => {
+    gridPaddings.forEach((size) => {
         it(`renders the correct class name for a ${size} top padding`, () => {
             const { container } = render(_jsx(Grid, { paddingTop: size }));
             const component = container.querySelector(':only-child');
             expect(component).toHaveClass(`ams-grid--padding-top--${size}`);
         });
     });
-    paddingSizes.forEach((size) => {
+    gridPaddings.forEach((size) => {
         it(`renders the correct class name for a ${size} vertical padding`, () => {
             const { container } = render(_jsx(Grid, { paddingVertical: size }));
             const component = container.querySelector(':only-child');
@@ -62,13 +52,7 @@ describe('Grid', () => {
     gridTags.forEach((tag) => {
         it(`renders with a custom ${tag} tag`, () => {
             const { container } = render(_jsx(Grid, { "aria-label": tag === 'section' ? 'Accessible name' : undefined, as: tag }));
-            let component;
-            if (tag === 'div') {
-                component = container.querySelector(tag);
-            }
-            else {
-                component = screen.getByRole(ariaRoleForTag[tag]);
-            }
+            const component = tag === 'div' ? container.querySelector(tag) : screen.getByRole(ariaRoleForTag[tag]);
             expect(component).toBeInTheDocument();
         });
     });

package/dist/Grid/GridCell.test.js

@@ -17,7 +17,7 @@ describe('Grid cell', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-grid__cell');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(Grid.Cell, { className: "extra" }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-grid__cell extra');
@@ -67,13 +67,7 @@ describe('Grid cell', () => {
     gridCellTags.forEach((tag) => {
         it(`renders with a custom ${tag} tag`, () => {
             const { container } = render(_jsx(Grid.Cell, { "aria-label": tag === 'section' ? 'Accessible name' : undefined, as: tag }));
-            let component;
-            if (tag === 'div') {
-                component = container.querySelector(tag);
-            }
-            else {
-                component = screen.getByRole(ariaRoleForTag[tag]);
-            }
+            const component = tag === 'div' ? container.querySelector(tag) : screen.getByRole(ariaRoleForTag[tag]);
             expect(component).toBeInTheDocument();
         });
     });

package/dist/Grid/paddingClasses.d.ts

@@ -1,2 +1,2 @@
-import type { GridPaddingSize } from './Grid';
-export declare const paddingClasses: (componentName: string, paddingBottom?: GridPaddingSize, paddingTop?: GridPaddingSize, paddingVertical?: GridPaddingSize) => string[];
+import type { GridPadding } from './Grid';
+export declare const paddingClasses: (componentName: string, paddingBottom?: GridPadding, paddingTop?: GridPadding, paddingVertical?: GridPadding) => string[];

package/dist/Heading/Heading.test.js

@@ -12,16 +12,28 @@ describe('Heading', () => {
         expect(heading).toBeInTheDocument();
         expect(heading).toBeVisible();
     });
-    it('renders the other allowed levels correctly', () => {
-        render(_jsxs(_Fragment, { children: [_jsx(Heading, { level: 2, children: "Heading 2" }), _jsx(Heading, { level: 3, children: "Heading 3" }), _jsx(Heading, { level: 4, children: "Heading 4" })] }));
+    it('renders a design system BEM class name', () => {
+        render(_jsx(Heading, { level: 1 }));
+        const heading = screen.getByRole('heading');
+        expect(heading).toHaveClass('ams-heading');
+    });
+    it('renders an extra class name', () => {
+        render(_jsx(Heading, { className: "extra", level: 1 }));
+        const heading = screen.getByRole('heading');
+        expect(heading).toHaveClass('ams-heading extra');
+    });
+    it('renders the allowed levels correctly', () => {
+        render(_jsxs(_Fragment, { children: [_jsx(Heading, { level: 1, children: "Heading 1" }), _jsx(Heading, { level: 2, children: "Heading 2" }), _jsx(Heading, { level: 3, children: "Heading 3" }), _jsx(Heading, { level: 4, children: "Heading 4" })] }));
+        const h1 = screen.getByRole('heading', { level: 1, name: 'Heading 1' });
         const h2 = screen.getByRole('heading', { level: 2, name: 'Heading 2' });
         const h3 = screen.getByRole('heading', { level: 3, name: 'Heading 3' });
         const h4 = screen.getByRole('heading', { level: 4, name: 'Heading 4' });
+        expect(h1).toBeInTheDocument();
         expect(h2).toBeInTheDocument();
         expect(h3).toBeInTheDocument();
         expect(h4).toBeInTheDocument();
     });
-    it('renders the correct style level class', () => {
+    it('renders the correct size level class', () => {
         render(_jsxs(_Fragment, { children: [_jsx(Heading, { level: 1, size: "level-1", children: "Size level 1" }), _jsx(Heading, { level: 1, size: "level-2", children: "Size level 2" }), _jsx(Heading, { level: 1, size: "level-3", children: "Size level 3" }), _jsx(Heading, { level: 1, size: "level-4", children: "Size level 4" }), _jsx(Heading, { level: 1, size: "level-5", children: "Size level 5" }), _jsx(Heading, { level: 1, size: "level-6", children: "Size level 6" })] }));
         const sizeLevel1 = screen.getByRole('heading', { level: 1, name: 'Size level 1' });
         const sizeLevel2 = screen.getByRole('heading', { level: 1, name: 'Size level 2' });
@@ -47,16 +59,10 @@ describe('Heading', () => {
         const inlineMarkup = heading.querySelector('strong');
         expect(inlineMarkup).toBeInTheDocument();
     });
-    it('renders an additional class name', () => {
-        const { container } = render(_jsx(Heading, { className: "large", level: 1 }));
-        const heading = container.querySelector(':only-child');
-        expect(heading).toHaveClass('large');
-        expect(heading).toHaveClass('ams-heading');
-    });
     it('is able to pass a React ref', () => {
         const ref = createRef();
-        const { container } = render(_jsx(Heading, { level: 1, ref: ref }));
-        const heading = container.querySelector(':only-child');
+        render(_jsx(Heading, { level: 1, ref: ref }));
+        const heading = screen.getByRole('heading');
         expect(ref.current).toBe(heading);
     });
 });

package/dist/Hint/Hint.test.js

@@ -15,7 +15,7 @@ describe('Hint', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-hint');
     });
-    it('renders an additional class name', () => {
+    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');

package/dist/Icon/Icon.d.ts

@@ -5,7 +5,7 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, ReactNode } from 'react';
-export declare const iconSizes: string[];
+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. */

package/dist/Icon/Icon.test.js

@@ -37,11 +37,10 @@ describe('Icon', () => {
         const icon = container.querySelector('span:only-child');
         expect(icon).toHaveClass('ams-icon--inverse');
     });
-    it('renders an additional class name', () => {
-        const { container } = render(_jsx(Icon, { className: "large", svg: AlertIcon }));
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(Icon, { className: "extra", svg: AlertIcon }));
         const icon = container.querySelector(':only-child');
-        expect(icon).toHaveClass('large');
-        expect(icon).toHaveClass('ams-icon');
+        expect(icon).toHaveClass('ams-icon extra');
     });
     it('supports ForwardRef in React', () => {
         const ref = createRef();

package/dist/IconButton/IconButton.js

@@ -7,5 +7,5 @@ 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, ...restProps }, ref) => (_jsxs("button", { ...restProps, className: clsx('ams-icon-button', color && `ams-icon-button--${color}`, className), ref: ref, children: [_jsx("span", { className: "ams-visually-hidden", children: label }), _jsx(Icon, { size: size, square: true, svg: svg })] })));
+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.js

@@ -15,7 +15,7 @@ describe('Icon button', () => {
         const component = screen.getByRole('button');
         expect(component).toHaveClass('ams-icon-button');
     });
-    it('renders an additional class name', () => {
+    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');

package/dist/Image/Image.d.ts

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

package/dist/Image/Image.test.js

@@ -17,7 +17,7 @@ describe('Image', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-image');
     });
-    it('renders an additional class name', () => {
+    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');

package/dist/ImageSlider/ImageSlider.test.js

@@ -48,7 +48,7 @@ describe('Image Slider', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-image-slider');
     });
-    it('renders an additional class name', () => {
+    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');

package/dist/ImageSlider/ImageSliderItem.test.js

@@ -19,7 +19,7 @@ describe('Image Slider Item', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-image-slider__item');
     });
-    it('renders an additional class name', () => {
+    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');

package/dist/ImageSlider/ImageSliderScroller.test.js

@@ -19,7 +19,7 @@ describe('Image Slider Scroller', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-image-slider__scroller');
     });
-    it('renders an additional class name', () => {
+    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');

package/dist/ImageSlider/ImageSliderThumbnails.js

@@ -26,7 +26,7 @@ export const ImageSliderThumbnails = forwardRef(({ className, imageLabel, thumbn
             }
         }
     }, [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]);
+    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.js

@@ -34,7 +34,7 @@ describe('Image Slider Thumbnails', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-image-slider__thumbnails');
     });
-    it('renders an additional class name', () => {
+    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');

package/dist/InvalidFormAlert/InvalidFormAlert.test.js

@@ -24,7 +24,7 @@ describe('Invalid Form Alert', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-invalid-form-alert');
     });
-    it('renders an additional class name', () => {
+    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');

package/dist/Label/Label.test.js

@@ -39,11 +39,10 @@ describe('Label', () => {
         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" }));
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(Label, { className: "extra", htmlFor: "form-control" }));
         const label = container.querySelector(':only-child');
-        expect(label).toHaveClass('large');
-        expect(label).toHaveClass('ams-label');
+        expect(label).toHaveClass('ams-label extra');
     });
     it('supports ForwardRef in React', () => {
         const ref = createRef();

package/dist/Link/Link.d.ts

@@ -3,17 +3,11 @@
  * 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

@@ -5,5 +5,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 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 })));
+export const Link = forwardRef(({ children, className, color, ...restProps }, ref) => (_jsx("a", { ...restProps, className: clsx('ams-link', color && `ams-link--${color}`, className), ref: ref, children: children })));
 Link.displayName = 'Link';

package/dist/Link/Link.test.js

@@ -1,46 +1,39 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { render } from '@testing-library/react';
+import { render, screen } 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', '#');
+        render(_jsx(Link, { href: "#" }));
+        const component = screen.getByRole('link');
+        expect(component).toBeInTheDocument();
+        expect(component).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 a design system BEM class name', () => {
+        render(_jsx(Link, { href: "#" }));
+        const component = screen.getByRole('link');
+        expect(component).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 an extra class name', () => {
+        render(_jsx(Link, { className: "extra", href: "#" }));
+        const component = screen.getByRole('link');
+        expect(component).toHaveClass('ams-link extra');
     });
     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');
+        render(_jsx(Link, { color: "contrast", href: "#" }));
+        const component = screen.getByRole('link');
+        expect(component).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');
+        render(_jsx(Link, { color: "inverse", href: "#" }));
+        const component = screen.getByRole('link');
+        expect(component).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);
+        render(_jsx(Link, { href: "#", ref: ref }));
+        const component = screen.getByRole('link');
+        expect(ref.current).toBe(component);
     });
 });