@amsterdam/design-system-react 0.15.0 → 1.0.0

package/dist/Breakout/Breakout.test.js

@@ -1,9 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 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 +20,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.d.ts

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import '@testing-library/jest-dom';

package/dist/Breakout/BreakoutCell.test.js

@@ -1,8 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 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 +21,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 +115,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/Breakout/index.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { Breakout } from './Breakout';
 export type { BreakoutProps } from './Breakout';
 export type { BreakoutCellProps } from './BreakoutCell';

package/dist/Breakout/index.js

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { Breakout } from './Breakout';

package/dist/Button/Button.d.ts

@@ -27,5 +27,8 @@ export type ButtonProps = {
     /** The level of prominence. Use a primary button only once per page or section. */
     variant?: 'primary' | 'secondary' | 'tertiary';
 } & (IconButtonProps | TextButtonProps) & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-buttons-button--docs Button docs at Amsterdam Design System}
+ */
 export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/Button/Button.js

@@ -6,5 +6,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { Icon } from '../Icon';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-buttons-button--docs Button docs at Amsterdam Design System}
+ */
 export const Button = forwardRef(({ children, className, disabled, icon, iconBefore, iconOnly, type, variant = 'primary', ...restProps }, ref) => (_jsxs("button", { ...restProps, className: clsx('ams-button', `ams-button--${variant}`, icon && iconOnly && `ams-button--icon-only`, className), disabled: disabled, ref: ref, type: type || 'button', children: [icon && (iconBefore || iconOnly) && _jsx(Icon, { square: iconOnly, svg: icon }), icon && iconOnly ? _jsx("span", { className: "ams-visually-hidden", children: children }) : children, icon && !iconBefore && !iconOnly && _jsx(Icon, { svg: icon })] })));
 Button.displayName = 'Button';

package/dist/Button/Button.test.d.ts

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import '@testing-library/jest-dom';

package/dist/Button/Button.test.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { CloseIcon } from '@amsterdam/design-system-react-icons';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
@@ -13,7 +17,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/Button/index.d.ts

@@ -1,2 +1,6 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { Button } from './Button';
 export type { ButtonProps } from './Button';

package/dist/Button/index.js

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { Button } from './Button';

package/dist/Card/Card.d.ts

@@ -4,14 +4,27 @@
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
 export type CardProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-card--docs Card docs at Amsterdam Design System}
+ */
 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,18 @@ 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 });
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-navigation-card--docs Card docs at Amsterdam Design System}
+ */
+export const Card = Object.assign(CardRoot, {
+    Heading: CardHeading,
+    HeadingGroup: CardHeadingGroup,
+    Image: CardImage,
+    Link: CardLink,
+});

package/dist/Card/Card.test.d.ts

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import '@testing-library/jest-dom';

package/dist/Card/Card.test.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
 import { Card } from './Card';
@@ -15,7 +19,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.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import '@testing-library/jest-dom';

package/dist/Card/CardHeading.test.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+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.d.ts

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import '@testing-library/jest-dom';

package/dist/Card/CardHeadingGroup.test.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
 import { CardHeadingGroup } from './CardHeadingGroup';
@@ -15,7 +19,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/Card/CardImage.test.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import '@testing-library/jest-dom';

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

@@ -1,28 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 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.d.ts

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import '@testing-library/jest-dom';

package/dist/Card/CardLink.test.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
 import { CardLink } from './CardLink';
@@ -15,7 +19,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/Card/index.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { Card } from './Card';
 export type { CardProps } from './Card';
 export type { CardHeadingGroupProps } from './CardHeadingGroup';

package/dist/Card/index.js

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { Card } from './Card';

package/dist/CharacterCount/CharacterCount.d.ts

@@ -9,6 +9,9 @@ export type CharacterCountProps = HTMLAttributes<HTMLDivElement> & {
     /** The maximum length of the field’s value. */
     maxLength: number;
 };
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-character-count--docs Character Count docs at Amsterdam Design System}
+ */
 export declare const CharacterCount: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     /** The current length of the field’s value. */
     length: number;

package/dist/CharacterCount/CharacterCount.js

@@ -5,5 +5,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-character-count--docs Character Count docs at Amsterdam Design System}
+ */
 export const CharacterCount = forwardRef(({ className, length, maxLength, ...restProps }, ref) => (_jsx("div", { ...restProps, className: clsx('ams-character-count', length > maxLength && 'ams-character-count--error', className), ref: ref, role: "status", children: `${length} van ${maxLength} tekens` })));
 CharacterCount.displayName = 'CharacterCount';

package/dist/CharacterCount/CharacterCount.test.d.ts

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import '@testing-library/jest-dom';

package/dist/CharacterCount/CharacterCount.test.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
 import { CharacterCount } from './CharacterCount';
@@ -15,7 +19,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/CharacterCount/index.d.ts

@@ -1,2 +1,6 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { CharacterCount } from './CharacterCount';
 export type { CharacterCountProps } from './CharacterCount';

package/dist/CharacterCount/index.js

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { CharacterCount } from './CharacterCount';

package/dist/Checkbox/Checkbox.d.ts

@@ -2,18 +2,25 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-import type { InputHTMLAttributes, PropsWithChildren } from 'react';
+import type { InputHTMLAttributes, PropsWithChildren, ReactNode } from 'react';
 export type CheckboxProps = {
+    /** An icon to display instead of the default icon. */
+    icon?: ReactNode;
     /** Allows being neither checked nor unchecked. */
     indeterminate?: boolean;
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
 } & PropsWithChildren<Omit<InputHTMLAttributes<HTMLInputElement>, 'aria-invalid' | 'type'>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-checkbox--docs Checkbox docs at Amsterdam Design System}
+ */
 export declare const Checkbox: import("react").ForwardRefExoticComponent<{
+    /** An icon to display instead of the default icon. */
+    icon?: ReactNode;
     /** Allows being neither checked nor unchecked. */
     indeterminate?: boolean;
     /** Whether the value fails a validation rule. */
     invalid?: boolean;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "aria-invalid" | "type"> & {
-    children?: import("react").ReactNode | undefined;
+    children?: ReactNode | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;