@amsterdam/design-system-react 0.15.0 → 0.16.0

package/README.md

@@ -24,7 +24,7 @@ npm install @amsterdam/design-system-assets @amsterdam/design-system-css @amster
 ```
 
 The React components themselves are unstyled.
-[Override the design tokens](https://github.com/Amsterdam/design-system/blob/main/proprietary/tokens/README.md) to use them with a different branding.
+[Override the design tokens](https://github.com/Amsterdam/design-system/blob/main/packages-proprietary/tokens/README.md) to use them with a different branding.
 
 ## Usage
 

package/dist/Accordion/Accordion.js

@@ -12,7 +12,10 @@ const AccordionRoot = forwardRef(({ children, className, headingLevel, sectionAs
     const innerRef = useRef(null);
     // use a passed ref if it's there, otherwise use innerRef
     useImperativeHandle(ref, () => innerRef.current);
-    const { keyDown } = useKeyboardFocus(innerRef, { rotating: true });
+    const { keyDown } = useKeyboardFocus(innerRef, {
+        focusableElements: ['.ams-accordion__button:not([disabled])'],
+        rotating: true,
+    });
     return (_jsx(AccordionContext.Provider, { value: { headingLevel: headingLevel, sectionAs: sectionAs }, children: _jsx("div", { className: clsx('ams-accordion', className), onKeyDown: keyDown, ref: innerRef, children: children }) }));
 });
 AccordionRoot.displayName = 'Accordion';

package/dist/Accordion/Accordion.test.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render } from '@testing-library/react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { createRef } from 'react';
 import { Accordion } from './Accordion';
 import '@testing-library/jest-dom';
@@ -10,11 +11,26 @@ describe('Accordion', () => {
         expect(accordion).toBeInTheDocument();
         expect(accordion).toBeVisible();
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(Accordion, { className: "test", headingLevel: 1 }));
         const accordion = container.querySelector('.ams-accordion');
         expect(accordion).toHaveClass('test');
     });
+    it('sets focus on Accordion buttons when using arrow keys', async () => {
+        const user = userEvent.setup();
+        render(_jsxs(Accordion, { headingLevel: 1, children: [_jsx(Accordion.Section, { label: "one" }), _jsx(Accordion.Section, { label: "two" }), _jsx(Accordion.Section, { label: "three" })] }));
+        const firstButton = screen.getByRole('button', { name: 'one' });
+        const thirdButton = screen.getByRole('button', { name: 'three' });
+        await user.click(firstButton);
+        expect(firstButton).toHaveFocus();
+        // Click the down arrow key twice
+        await user.keyboard('{ArrowDown}');
+        await user.keyboard('{ArrowDown}');
+        expect(thirdButton).toHaveFocus();
+        expect(firstButton).not.toHaveFocus();
+        await user.keyboard('{ArrowDown}');
+        expect(firstButton).toHaveFocus();
+    });
     it('supports ForwardRef in React', () => {
         const ref = createRef();
         const { container } = render(_jsx(Accordion, { headingLevel: 1, ref: ref }));

package/dist/Accordion/AccordionSection.test.js

@@ -69,7 +69,7 @@ describe('Accordion section', () => {
         const icon = button ? button.querySelector('svg:only-child') : null;
         expect(icon).toBeInTheDocument();
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(Accordion.Section, { className: "test", label: testLabel, children: testContent }));
         const accordionSection = container.querySelector('.ams-accordion__section');
         expect(accordionSection).toHaveClass('test');

package/dist/ActionGroup/ActionGroup.test.js

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

package/dist/Alert/Alert.test.js

@@ -18,7 +18,7 @@ describe('Alert', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-alert');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(Alert, { className: "extra", heading: "Let op!", headingLevel: 2 }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-alert extra');

package/dist/Avatar/Avatar.test.js

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

package/dist/Badge/Badge.test.js

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

package/dist/Blockquote/Blockquote.test.js

@@ -23,15 +23,14 @@ describe('Blockquote', () => {
         const quote = container.querySelector(':only-child');
         expect(quote).toHaveClass('ams-blockquote');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(Blockquote, { className: "extra" }));
         const quote = container.querySelector(':only-child');
-        expect(quote).toHaveClass('extra');
-        expect(quote).toHaveClass('ams-blockquote');
+        expect(quote).toHaveClass('ams-blockquote extra');
     });
     it('renders the class name for inverse color', () => {
         const { container } = render(_jsx(Blockquote, { color: "inverse" }));
-        const quote = container.querySelector('blockquote:only-child');
+        const quote = container.querySelector(':only-child');
         expect(quote).toHaveClass('ams-blockquote--inverse');
     });
     it('supports ForwardRef in React', () => {

package/dist/Breadcrumb/Breadcrumb.test.js

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

package/dist/Breadcrumb/BreadcrumbLink.test.js

@@ -17,7 +17,7 @@ describe('Breadcrumb link', () => {
         const link = screen.getByRole('link');
         expect(link).toHaveClass('ams-breadcrumb__link');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(BreadcrumbLink, { className: "extra", href: "/" }));
         const component = screen.getByRole('link');
         expect(component).toHaveClass('ams-breadcrumb__link extra');

package/dist/Breakout/Breakout.test.js

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from '@testing-library/react';
 import { createRef } from 'react';
 import { Breakout } from './Breakout';
+import { gridGaps, gridPaddings } from '../Grid/Grid';
 import '@testing-library/jest-dom';
-const paddingSizes = ['small', 'medium', 'large'];
 describe('Breakout', () => {
     it('renders', () => {
         const { container } = render(_jsx(Breakout, {}));
@@ -16,41 +16,33 @@ describe('Breakout', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-breakout');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(Breakout, { className: "extra" }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-breakout extra');
     });
-    it('renders the correct class name for a zero gap', () => {
-        const { container } = render(_jsx(Breakout, { gapVertical: "none" }));
-        const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('ams-breakout--gap-vertical--none');
-    });
-    it(`renders the correct class name for a small gap`, () => {
-        const { container } = render(_jsx(Breakout, { gapVertical: "small" }));
-        const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('ams-breakout--gap-vertical--small');
-    });
-    it(`renders the correct class name for a large gap`, () => {
-        const { container } = render(_jsx(Breakout, { gapVertical: "large" }));
-        const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('ams-breakout--gap-vertical--large');
+    gridGaps.forEach((size) => {
+        it(`renders the correct class name for a ${size} vertical gap`, () => {
+            const { container } = render(_jsx(Breakout, { gapVertical: size }));
+            const component = container.querySelector(':only-child');
+            expect(component).toHaveClass(`ams-breakout--gap-vertical--${size}`);
+        });
     });
-    paddingSizes.forEach((size) => {
+    gridPaddings.forEach((size) => {
         it(`renders the correct class name for a ${size} bottom padding`, () => {
             const { container } = render(_jsx(Breakout, { paddingBottom: size }));
             const component = container.querySelector(':only-child');
             expect(component).toHaveClass(`ams-breakout--padding-bottom--${size}`);
         });
     });
-    paddingSizes.forEach((size) => {
+    gridPaddings.forEach((size) => {
         it(`renders the correct class name for a ${size} top padding`, () => {
             const { container } = render(_jsx(Breakout, { paddingTop: size }));
             const component = container.querySelector(':only-child');
             expect(component).toHaveClass(`ams-breakout--padding-top--${size}`);
         });
     });
-    paddingSizes.forEach((size) => {
+    gridPaddings.forEach((size) => {
         it(`renders the correct class name for a ${size} vertical padding`, () => {
             const { container } = render(_jsx(Breakout, { paddingVertical: size }));
             const component = container.querySelector(':only-child');

package/dist/Breakout/BreakoutCell.d.ts

@@ -5,6 +5,8 @@
 import type { HTMLAttributes, PropsWithChildren } from 'react';
 import type { BreakoutRowNumber, BreakoutRowNumbers } from './Breakout';
 import type { GridColumnNumber, GridColumnNumbers } from '../Grid/Grid';
+export declare const breakoutCellTags: readonly ["article", "div", "section"];
+type BreakoutCellTag = (typeof breakoutCellTags)[number];
 type BreakoutCellSpanAllProp = {
     /** Lets the cell span the full width of all grid variants. */
     colSpan: 'all';
@@ -29,7 +31,7 @@ type BreakoutCellRowSpanAndStartProps = {
 };
 export type BreakoutCellProps = {
     /** The HTML element to use. */
-    as?: 'article' | 'div' | 'section';
+    as?: BreakoutCellTag;
 } & (BreakoutCellSpanAllProp | BreakoutCellSpanAndStartProps) & BreakoutCellRowSpanAndStartProps & PropsWithChildren<HTMLAttributes<HTMLElement>>;
 export declare const BreakoutCell: import("react").ForwardRefExoticComponent<BreakoutCellProps & import("react").RefAttributes<any>>;
 export {};

package/dist/Breakout/BreakoutCell.js

@@ -6,5 +6,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { breakoutCellClasses } from './breakoutCellClasses';
+export const breakoutCellTags = ['article', 'div', 'section'];
 export const BreakoutCell = forwardRef(({ as: Tag = 'div', children, className, colSpan, colStart, has, rowSpan, rowStart, ...restProps }, ref) => (_jsx(Tag, { ...restProps, className: clsx('ams-breakout__cell', breakoutCellClasses(colSpan, colStart, rowSpan, rowStart), has && `ams-breakout__cell--has-${has}`, className), ref: ref, children: children })));
 BreakoutCell.displayName = 'Breakout.Cell';

package/dist/Breakout/BreakoutCell.test.js

@@ -3,6 +3,8 @@ import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
 import { Breakout } from './Breakout';
 import '@testing-library/jest-dom';
+import { breakoutCellTags } from './BreakoutCell';
+import { ariaRoleForTag } from '../common/accessibility';
 describe('Breakout cell', () => {
     it('renders', () => {
         const { container } = render(_jsx(Breakout.Cell, {}));
@@ -15,11 +17,18 @@ describe('Breakout cell', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-breakout__cell');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(Breakout.Cell, { className: "extra" }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-breakout__cell extra');
     });
+    breakoutCellTags.forEach((tag) => {
+        it(`renders with a custom ${tag} tag`, () => {
+            const { container } = render(_jsx(Breakout.Cell, { "aria-label": tag === 'section' ? 'Accessible name' : undefined, as: tag }));
+            const component = tag === 'div' ? container.querySelector(tag) : screen.getByRole(ariaRoleForTag[tag]);
+            expect(component).toBeInTheDocument();
+        });
+    });
     it('supports ForwardRef in React', () => {
         const ref = createRef();
         const { container } = render(_jsx(Breakout.Cell, { ref: ref }));
@@ -102,19 +111,14 @@ describe('Breakout cell', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-breakout__cell--row-span-2 ams-breakout__cell--row-span-3-medium ams-breakout__cell--row-span-4-wide ams-breakout__cell--row-start-1 ams-breakout__cell--row-start-2-medium ams-breakout__cell--row-start-3-wide');
     });
-});
-it(`renders the correct class if it has a Figure`, () => {
-    const { container } = render(_jsx(Breakout.Cell, { has: "figure" }));
-    const component = container.querySelector(':only-child');
-    expect(component).toHaveClass(`ams-breakout__cell--has-figure`);
-});
-it(`renders the correct class if it has a Spotlight`, () => {
-    const { container } = render(_jsx(Breakout.Cell, { colSpan: "all", has: "spotlight" }));
-    const component = container.querySelector(':only-child');
-    expect(component).toHaveClass(`ams-breakout__cell--has-spotlight`);
-});
-it('renders a custom tag', () => {
-    render(_jsx(Breakout.Cell, { as: "article" }));
-    const cell = screen.getByRole('article');
-    expect(cell).toBeInTheDocument();
+    it(`renders the correct class if it has a Figure`, () => {
+        const { container } = render(_jsx(Breakout.Cell, { has: "figure" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass(`ams-breakout__cell--has-figure`);
+    });
+    it(`renders the correct class if it has a Spotlight`, () => {
+        const { container } = render(_jsx(Breakout.Cell, { colSpan: "all", has: "spotlight" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass(`ams-breakout__cell--has-spotlight`);
+    });
 });

package/dist/Button/Button.test.js

@@ -13,7 +13,14 @@ describe('Button', () => {
         expect(button).toBeInTheDocument();
         expect(button).toBeVisible();
     });
-    it('renders an additional class name', () => {
+    it('renders a design system BEM class name', () => {
+        render(_jsx(Button, { children: "Click me!" }));
+        const button = screen.getByRole('button', {
+            name: 'Click me!',
+        });
+        expect(button).toHaveClass('ams-button');
+    });
+    it('renders an extra class name', () => {
         render(_jsx(Button, { className: "extra", children: "Click me!" }));
         const button = screen.getByRole('button', {
             name: 'Click me!',

package/dist/Card/Card.d.ts

@@ -7,11 +7,21 @@ export type CardProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
 export declare const Card: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>> & {
+    Heading: import("react").ForwardRefExoticComponent<{
+        color?: "inverse";
+        level: 1 | 2 | 3 | 4;
+        size?: "level-1" | "level-2" | "level-3" | "level-4" | "level-5" | "level-6";
+    } & HTMLAttributes<HTMLHeadingElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLHeadingElement>>;
     HeadingGroup: import("react").ForwardRefExoticComponent<{
         tagline: string;
     } & HTMLAttributes<HTMLElement> & {
         children?: import("react").ReactNode | undefined;
     } & import("react").RefAttributes<HTMLElement>>;
+    Image: import("react").ForwardRefExoticComponent<{
+        alt: string;
+    } & import("../common/types").AspectRatioProps & Omit<import("react").ImgHTMLAttributes<HTMLImageElement>, "children"> & import("react").RefAttributes<HTMLImageElement>>;
     Link: import("react").ForwardRefExoticComponent<import("react").AnchorHTMLAttributes<HTMLAnchorElement> & {
         children?: import("react").ReactNode | undefined;
     } & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/Card/Card.js

@@ -5,8 +5,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+import { CardHeading } from './CardHeading';
 import { CardHeadingGroup } from './CardHeadingGroup';
+import { CardImage } from './CardImage';
 import { CardLink } from './CardLink';
 const CardRoot = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("article", { ...restProps, className: clsx('ams-card', className), ref: ref, children: children })));
 CardRoot.displayName = 'Card';
-export const Card = Object.assign(CardRoot, { HeadingGroup: CardHeadingGroup, Link: CardLink });
+export const Card = Object.assign(CardRoot, {
+    Heading: CardHeading,
+    HeadingGroup: CardHeadingGroup,
+    Image: CardImage,
+    Link: CardLink,
+});

package/dist/Card/Card.test.js

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

package/dist/Card/CardHeading.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+export declare const CardHeading: import("react").ForwardRefExoticComponent<{
+    color?: "inverse";
+    level: 1 | 2 | 3 | 4;
+    size?: "level-1" | "level-2" | "level-3" | "level-4" | "level-5" | "level-6";
+} & import("react").HTMLAttributes<HTMLHeadingElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLHeadingElement>>;

package/dist/Card/CardHeading.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 { Heading } from '../Heading';
+export const CardHeading = forwardRef(({ children, className, size = 'level-4', ...restProps }, ref) => (_jsx(Heading, { ...restProps, className: clsx('ams-card__heading', className), ref: ref, size: size, children: children })));
+CardHeading.displayName = 'Card.Heading';

package/dist/Card/CardHeading.test.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { CardHeading } from './CardHeading';
+import '@testing-library/jest-dom';
+describe('Card Heading', () => {
+    it('renders', () => {
+        render(_jsx(CardHeading, { level: 1 }));
+        const component = screen.getByRole('heading');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(CardHeading, { level: 2 }));
+        const component = screen.getByRole('heading');
+        expect(component).toHaveClass('ams-card__heading');
+    });
+    it('renders an extra class name', () => {
+        render(_jsx(CardHeading, { className: "extra", level: 3 }));
+        const component = screen.getByRole('heading');
+        expect(component).toHaveClass('ams-card__heading extra');
+    });
+    it('renders the correct size level class', () => {
+        render(_jsx(CardHeading, { level: 4, size: "level-1", children: "Size level 1" }));
+        const component = screen.getByRole('heading');
+        expect(component).toHaveClass('ams-heading--1');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(CardHeading, { level: 4, ref: ref }));
+        const component = screen.getByRole('heading');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Card/CardHeadingGroup.test.js

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

package/dist/Card/CardImage.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+export declare const CardImage: import("react").ForwardRefExoticComponent<{
+    alt: string;
+} & import("../common/types").AspectRatioProps & Omit<import("react").ImgHTMLAttributes<HTMLImageElement>, "children"> & import("react").RefAttributes<HTMLImageElement>>;

package/dist/Card/CardImage.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 { Image } from '../Image';
+export const CardImage = forwardRef(({ className, ...restProps }, ref) => (_jsx(Image, { ...restProps, className: clsx('ams-card__image', className), ref: ref })));
+CardImage.displayName = 'Card.Image';

package/dist/{Footer/FooterSpotlight.test.js → Card/CardImage.test.js}

@@ -1,28 +1,28 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render } from '@testing-library/react';
 import { createRef } from 'react';
-import { Footer } from './Footer';
+import { CardImage } from './CardImage';
 import '@testing-library/jest-dom';
-describe('Footer top', () => {
+describe('Card Image', () => {
     it('renders', () => {
-        const { container } = render(_jsx(Footer.Spotlight, {}));
+        const { container } = render(_jsx(CardImage, { 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(Footer.Spotlight, {}));
+        const { container } = render(_jsx(CardImage, { alt: "" }));
         const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('ams-footer__spotlight');
+        expect(component).toHaveClass('ams-card__image');
     });
-    it('renders an additional class name', () => {
-        const { container } = render(_jsx(Footer.Spotlight, { className: "extra" }));
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(CardImage, { alt: "", className: "extra" }));
         const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('ams-footer__spotlight extra');
+        expect(component).toHaveClass('ams-card__image extra');
     });
     it('supports ForwardRef in React', () => {
         const ref = createRef();
-        const { container } = render(_jsx(Footer.Spotlight, { ref: ref }));
+        const { container } = render(_jsx(CardImage, { alt: "", ref: ref }));
         const component = container.querySelector(':only-child');
         expect(ref.current).toBe(component);
     });

package/dist/Card/CardLink.test.js

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

package/dist/CharacterCount/CharacterCount.test.js

@@ -15,7 +15,7 @@ describe('Character count', () => {
         const component = screen.getByRole('status');
         expect(component).toHaveClass('ams-character-count');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(CharacterCount, { className: "extra", length: 10, maxLength: 100 }));
         const component = screen.getByRole('status');
         expect(component).toHaveClass('ams-character-count extra');

package/dist/Checkbox/Checkbox.test.js

@@ -25,11 +25,10 @@ describe('Checkbox', () => {
         expect(input).toHaveClass('ams-checkbox__input');
         expect(label).toHaveClass('ams-checkbox__label');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(Checkbox, { className: "extra" }));
         const wrapper = container.querySelector(':only-child');
-        expect(wrapper).toHaveClass('extra');
-        expect(wrapper).toHaveClass('ams-checkbox');
+        expect(wrapper).toHaveClass('ams-checkbox extra');
     });
     describe('Checked state', () => {
         it('is not checked by default', () => {

package/dist/Column/Column.d.ts

@@ -4,9 +4,10 @@
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
 import type { CrossAlignForColumn, MainAlign } from '../common/types';
-export declare const columnGaps: readonly ["none", "x-small", "small", "large", "x-large"];
-type ColumnGap = (typeof columnGaps)[number];
-type ColumnTag = 'article' | 'div' | 'section';
+export declare const columnTags: readonly ["article", "div", "section"];
+type ColumnTag = (typeof columnTags)[number];
+export declare const columnGapSizes: readonly ["none", "x-small", "small", "large", "x-large"];
+type ColumnGap = (typeof columnGapSizes)[number];
 export type ColumnProps = {
     /**
      * The vertical alignment of the items in the column.

package/dist/Column/Column.js

@@ -5,6 +5,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-export const columnGaps = ['none', 'x-small', 'small', 'large', 'x-large'];
+export const columnTags = ['article', 'div', 'section'];
+export const columnGapSizes = ['none', 'x-small', 'small', 'large', 'x-large'];
 export const Column = forwardRef(({ align, alignHorizontal, as: Tag = 'div', children, className, gap, ...restProps }, ref) => (_jsx(Tag, { ...restProps, className: clsx('ams-column', align && `ams-column--align-${align}`, alignHorizontal && `ams-column--align-horizontal-${alignHorizontal}`, gap && `ams-column--gap-${gap}`, className), ref: ref, children: children })));
 Column.displayName = 'Column';

package/dist/Column/Column.test.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
-import { Column, columnGaps } from './Column';
+import { Column, columnGapSizes, columnTags } from './Column';
+import { ariaRoleForTag } from '../common/accessibility';
 import { crossAlignOptionsForColumn, mainAlignOptions } from '../common/types';
 import '@testing-library/jest-dom';
 describe('Column', () => {
@@ -16,25 +17,22 @@ describe('Column', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-column');
     });
-    columnGaps.map((gap) => it(`renders with ‘${gap}’ gap`, () => {
+    columnGapSizes.map((gap) => it(`renders with ‘${gap}’ gap`, () => {
         const { container } = render(_jsx(Column, { gap: gap }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass(`ams-column--gap-${gap}`);
     }));
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(Column, { className: "extra" }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-column extra');
     });
-    it('renders with an article tag', () => {
-        render(_jsx(Column, { as: "article" }));
-        const component = screen.getByRole('article');
-        expect(component).toBeInTheDocument();
-    });
-    it('renders with a section tag', () => {
-        const { container } = render(_jsx(Column, { as: "section" }));
-        const component = container.querySelector('section');
-        expect(component).toBeInTheDocument();
+    columnTags.forEach((tag) => {
+        it(`renders with a custom ${tag} tag`, () => {
+            const { container } = render(_jsx(Column, { "aria-label": tag === 'section' ? 'Accessible name' : undefined, as: tag }));
+            const component = tag === 'div' ? container.querySelector(tag) : screen.getByRole(ariaRoleForTag[tag]);
+            expect(component).toBeInTheDocument();
+        });
     });
     it('supports ForwardRef in React', () => {
         const ref = createRef();

package/dist/DateInput/DateInput.test.js

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