@amsterdam/design-system-react 0.15.0 → 1.0.0

package/dist/FieldSet/FieldSet.test.d.ts

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

package/dist/FieldSet/FieldSet.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 { FieldSet } from './FieldSet';
@@ -15,7 +19,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/FieldSet/index.d.ts

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

package/dist/FieldSet/index.js

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

package/dist/Figure/Figure.d.ts

@@ -4,6 +4,9 @@
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
 export type FigureProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-figure--docs Figure docs at Amsterdam Design System}
+ */
 export declare const Figure: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>> & {

package/dist/Figure/Figure.js

@@ -8,4 +8,7 @@ import { forwardRef } from 'react';
 import { FigureCaption } from './FigureCaption';
 const FigureRoot = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("figure", { ...restProps, className: clsx('ams-figure', className), ref: ref, children: children })));
 FigureRoot.displayName = 'Figure';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-media-figure--docs Figure docs at Amsterdam Design System}
+ */
 export const Figure = Object.assign(FigureRoot, { Caption: FigureCaption });

package/dist/Figure/Figure.test.d.ts

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

package/dist/Figure/Figure.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 { Figure } from './Figure';
@@ -15,7 +19,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.d.ts

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

package/dist/Figure/FigureCaption.test.js

@@ -1,4 +1,8 @@
 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 { FigureCaption } from './FigureCaption';
@@ -20,7 +24,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/Figure/index.d.ts

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

package/dist/Figure/index.js

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

package/dist/FileInput/FileInput.d.ts

@@ -4,4 +4,7 @@
  */
 import type { InputHTMLAttributes } from 'react';
 export type FileInputProps = InputHTMLAttributes<HTMLInputElement>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-file-input--docs File Input docs at Amsterdam Design System}
+ */
 export declare const FileInput: import("react").ForwardRefExoticComponent<FileInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/FileInput/FileInput.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-file-input--docs File Input docs at Amsterdam Design System}
+ */
 export const FileInput = forwardRef(({ className, ...restProps }, ref) => (_jsx("input", { ...restProps, className: clsx('ams-file-input', className), ref: ref, type: "file" })));
 FileInput.displayName = 'FileInput';

package/dist/FileInput/FileInput.test.d.ts

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

package/dist/FileInput/FileInput.test.js

@@ -1,4 +1,8 @@
 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 { FileInput } from './FileInput';
@@ -15,7 +19,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/FileInput/index.d.ts

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

package/dist/FileInput/index.js

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

package/dist/FileList/FileList.d.ts

@@ -7,6 +7,9 @@ export type FileListProps = {} & PropsWithChildren<HTMLAttributes<HTMLUListEleme
 export declare const FileListRoot: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLOListElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-file-list--docs File List docs at Amsterdam Design System}
+ */
 export declare const FileList: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLOListElement>> & {

package/dist/FileList/FileList.js

@@ -8,6 +8,9 @@ import { forwardRef } from 'react';
 import { FileListItem } from './FileListItem';
 export const FileListRoot = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("ul", { ...restProps, className: clsx('ams-file-list', className), ref: ref, children: children })));
 FileListRoot.displayName = 'FileList';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-file-list--docs File List docs at Amsterdam Design System}
+ */
 export const FileList = Object.assign(FileListRoot, {
     Item: FileListItem,
 });

package/dist/FileList/FileList.test.d.ts

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

package/dist/FileList/FileList.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 { FileList } from './FileList';
@@ -15,7 +19,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.d.ts

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

package/dist/FileList/FileListItem.test.js

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

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

package/dist/FileList/index.js

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

package/dist/Grid/Grid.d.ts

@@ -9,28 +9,34 @@ 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>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-grid--docs Grid docs at Amsterdam Design System}
+ */
 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,7 +7,12 @@ 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';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-grid--docs Grid docs at Amsterdam Design System}
+ */
 export const Grid = Object.assign(GridRoot, { Cell: GridCell });

package/dist/Grid/Grid.test.d.ts

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

package/dist/Grid/Grid.test.js

@@ -1,10 +1,13 @@
 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 { 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 +20,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 +56,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.d.ts

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

package/dist/Grid/GridCell.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 { Grid } from './Grid';
@@ -17,7 +21,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 +71,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/index.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { Grid } from './Grid';
 export type { GridColumnNumber, GridColumnNumbers, GridProps } from './Grid';
 export type { GridCellProps } from './GridCell';

package/dist/Grid/index.js

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

package/dist/Grid/paddingClasses.d.ts

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

package/dist/Grid/paddingClasses.js

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export const paddingClasses = (componentName, paddingBottom, paddingTop, paddingVertical) => {
     const classes = [];
     if (paddingVertical) {

package/dist/Heading/Heading.d.ts

@@ -1,6 +1,5 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2021 Robbert Broersma
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
@@ -12,6 +11,9 @@ export type HeadingProps = {
     /** Uses larger or smaller text without changing its position in the heading hierarchy. */
     size?: 'level-1' | 'level-2' | 'level-3' | 'level-4' | 'level-5' | 'level-6';
 } & PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-heading--docs Heading docs at Amsterdam Design System}
+ */
 export declare const Heading: import("react").ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";

package/dist/Heading/Heading.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 /**
  * @license EUPL-1.2+
  * Copyright (c) 2021 Robbert Broersma
@@ -7,6 +11,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { getHeadingTag } from './getHeadingTag';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-heading--docs Heading docs at Amsterdam Design System}
+ */
 export const Heading = forwardRef(({ children, className, color, level, size, ...restProps }, ref) => {
     const Tag = getHeadingTag(level);
     const visualLevel = size ? size.slice(-1) : level;

package/dist/Heading/Heading.test.d.ts

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

package/dist/Heading/Heading.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 { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
 import { Heading } from './Heading';
@@ -12,16 +16,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 +63,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/Heading/getHeadingTag.d.ts

@@ -1,2 +1,6 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import type { HeadingProps } from './Heading';
 export declare function getHeadingTag(level: HeadingProps['level'] | null): "h2" | "h3" | "h4" | "h1";

package/dist/Heading/getHeadingTag.js

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export function getHeadingTag(level) {
     switch (level) {
         case 2:

package/dist/Heading/index.d.ts

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

package/dist/Heading/index.js

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