@amsterdam/design-system-react 0.14.0 → 0.15.0

package/dist/Footer/Footer.test.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Footer } from './Footer';
+import '@testing-library/jest-dom';
+describe('Footer', () => {
+    it('renders an HTML footer element', () => {
+        render(_jsx(Footer, {}));
+        const component = screen.getByRole('contentinfo');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(Footer, {}));
+        const component = screen.getByRole('contentinfo');
+        expect(component).toHaveClass('ams-footer');
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(Footer, { className: "extra" }));
+        const component = screen.getByRole('contentinfo');
+        expect(component).toHaveClass('ams-footer extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(Footer, { ref: ref }));
+        const component = screen.getByRole('contentinfo');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Footer/FooterMenu.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type FooterMenuProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
+export declare const FooterMenu: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLUListElement>>;

package/dist/Footer/FooterMenu.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+export const FooterMenu = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("ul", { ...restProps, className: clsx('ams-footer__menu', className), ref: ref, children: children })));
+FooterMenu.displayName = 'Footer.Menu';

package/dist/Footer/FooterMenu.test.d.ts

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

package/dist/Footer/FooterMenu.test.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Footer } from './Footer';
+import '@testing-library/jest-dom';
+describe('Footer menu', () => {
+    it('renders a footer menu with children', () => {
+        render(_jsxs(Footer.Menu, { children: [_jsx(Footer.MenuLink, { href: "#", lang: "en", children: "English" }), _jsx(Footer.MenuLink, { href: "#", children: "Mijn Amsterdam" })] }));
+        const component = screen.getByRole('list');
+        const children = screen.getAllByRole('listitem');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+        expect(children).toHaveLength(2);
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(Footer.Menu, {}));
+        const component = screen.getByRole('list');
+        expect(component).toHaveClass('ams-footer__menu');
+    });
+    it('is able to pass a React ref', () => {
+        const ref = createRef();
+        render(_jsx(Footer.Menu, { ref: ref, children: _jsx(Footer.MenuLink, { href: "#", lang: "en", children: "English" }) }));
+        const component = screen.getByRole('list');
+        expect(ref.current).toBe(component);
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(Footer.Menu, { className: "intro" }));
+        const component = screen.getByRole('list');
+        expect(component).toHaveClass('ams-footer__menu intro');
+    });
+});

package/dist/Footer/FooterMenuLink.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { AnchorHTMLAttributes, PropsWithChildren } from 'react';
+export type FooterMenuLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
+export declare const FooterMenuLink: import("react").ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/Footer/FooterMenuLink.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+export const FooterMenuLink = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("li", { className: "ams-footer__menu-item", children: _jsx("a", { ...restProps, className: clsx('ams-footer__menu-link', className), ref: ref, children: children }) })));
+FooterMenuLink.displayName = 'Footer.MenuLink';

package/dist/Footer/FooterMenuLink.test.d.ts

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

package/dist/Footer/FooterMenuLink.test.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Footer } from './Footer';
+import '@testing-library/jest-dom';
+describe('Page menu link', () => {
+    it('renders with href attribute', () => {
+        render(_jsx(Footer.MenuLink, { href: "#", children: "Link" }));
+        const component = screen.getByRole('link');
+        expect(component).toBeInTheDocument();
+        expect(component).toHaveAttribute('href', '#');
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(Footer.MenuLink, { href: "#", children: "Link" }));
+        const component = screen.getByRole('link');
+        expect(component).toHaveClass('ams-footer__menu-link');
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(Footer.MenuLink, { className: "extra", href: "#", children: "Link" }));
+        const component = screen.getByRole('link');
+        expect(component).toHaveClass('ams-footer__menu-link extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(Footer.MenuLink, { className: "extra", href: "#", ref: ref, children: "Link" }));
+        const component = screen.getByRole('link');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Footer/FooterSpotlight.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type FooterSpotlightProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+export declare const FooterSpotlight: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Footer/FooterSpotlight.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+export const FooterSpotlight = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("div", { ...restProps, className: clsx('ams-footer__spotlight', className), ref: ref, children: children })));
+FooterSpotlight.displayName = 'Footer.Spotlight';

package/dist/Footer/FooterSpotlight.test.d.ts

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

package/dist/Footer/FooterSpotlight.test.js

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

package/dist/Footer/index.d.ts

@@ -0,0 +1,5 @@
+export { Footer } from './Footer';
+export type { FooterProps } from './Footer';
+export type { FooterMenuProps } from './FooterMenu';
+export type { FooterMenuLinkProps } from './FooterMenuLink';
+export type { FooterSpotlightProps } from './FooterSpotlight';

package/dist/Footer/index.js

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

package/dist/Grid/Grid.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type GridColumnNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export type GridColumnNumbers = {
+    narrow: 1 | 2 | 3 | 4;
+    medium: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    wide: GridColumnNumber;
+};
+export type GridPaddingSize = 'small' | 'medium' | 'large';
+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;
+};
+type GridPaddingTopAndBottomProps = {
+    /** The amount of space below. */
+    paddingBottom?: GridPaddingSize;
+    /** The amount of space above. */
+    paddingTop?: GridPaddingSize;
+    paddingVertical?: never;
+};
+export type GridProps = {
+    /** The HTML tag to use. */
+    as?: GridTag;
+    /** The amount of space between rows. */
+    gapVertical?: 'none' | 'small' | 'large';
+} & (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>>;
+};
+export {};

package/dist/Grid/Grid.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { GridCell } from './GridCell';
+import { paddingClasses } from './paddingClasses';
+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';
+export const Grid = Object.assign(GridRoot, { Cell: GridCell });

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

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

package/dist/Grid/Grid.test.js

@@ -0,0 +1,81 @@
+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 { ariaRoleForTag } from '../common/accessibility';
+import '@testing-library/jest-dom';
+const paddingSizes = ['small', 'medium', 'large'];
+describe('Grid', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(Grid, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(Grid, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-grid');
+    });
+    it('renders an additional 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');
+    });
+    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');
+    });
+    paddingSizes.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) => {
+        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) => {
+        it(`renders the correct class name for a ${size} vertical padding`, () => {
+            const { container } = render(_jsx(Grid, { paddingVertical: size }));
+            const component = container.querySelector(':only-child');
+            expect(component).toHaveClass(`ams-grid--padding-vertical--${size}`);
+        });
+    });
+    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]);
+            }
+            expect(component).toBeInTheDocument();
+        });
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(Grid, { ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Grid/GridCell.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+import type { GridColumnNumber, GridColumnNumbers } from './Grid';
+export declare const gridCellTags: readonly ["article", "aside", "div", "footer", "header", "main", "nav", "section"];
+export type GridCellTag = (typeof gridCellTags)[number];
+type GridCellSpanAllProp = {
+    /** Lets the cell span the full width of all grid variants. */
+    span: 'all';
+    start?: never;
+};
+type GridCellSpanAndStartProps = {
+    /** The amount of grid columns the cell spans. */
+    span?: GridColumnNumber | GridColumnNumbers;
+    /** The index of the grid column the cell starts at. */
+    start?: GridColumnNumber | GridColumnNumbers;
+};
+export type GridCellProps = {
+    /** The HTML tag to use. */
+    as?: GridCellTag;
+} & (GridCellSpanAllProp | GridCellSpanAndStartProps) & PropsWithChildren<HTMLAttributes<HTMLElement>>;
+export declare const GridCell: import("react").ForwardRefExoticComponent<GridCellProps & import("react").RefAttributes<unknown>>;
+export {};

package/dist/Grid/GridCell.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { gridCellClasses } from './gridCellClasses';
+export const gridCellTags = ['article', 'aside', 'div', 'footer', 'header', 'main', 'nav', 'section'];
+export const GridCell = forwardRef(({ as: Tag = 'div', children, className, span, start, ...restProps }, ref) => (_jsx(Tag, { ...restProps, className: clsx('ams-grid__cell', gridCellClasses(span, start), className), ref: ref, children: children })));
+GridCell.displayName = 'Grid.Cell';

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

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

package/dist/Grid/GridCell.test.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Grid } from './Grid';
+import { gridCellTags } from './GridCell';
+import { ariaRoleForTag } from '../common/accessibility';
+import '@testing-library/jest-dom';
+describe('Grid cell', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(Grid.Cell, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(Grid.Cell, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-grid__cell');
+    });
+    it('renders an additional class name', () => {
+        const { container } = render(_jsx(Grid.Cell, { className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-grid__cell extra');
+    });
+    it('renders no class names for undefined values for start and span', () => {
+        const { container } = render(_jsx(Grid.Cell, {}));
+        const elementWithSpanClass = container.querySelector('[class*="ams-grid__cell--span"]');
+        const elementWithStartClass = container.querySelector('[class*="ams-grid__cell--start"]');
+        expect(elementWithSpanClass).not.toBeInTheDocument();
+        expect(elementWithStartClass).not.toBeInTheDocument();
+    });
+    it('renders class names for single number values for start and span', () => {
+        const { container } = render(_jsx(Grid.Cell, { span: 4, start: 2 }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-grid__cell--span-4 ams-grid__cell--start-2');
+    });
+    it('renders class names for a single number value for start', () => {
+        const { container } = render(_jsx(Grid.Cell, { span: 8 }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-grid__cell--span-8');
+    });
+    it('renders class names for a single number value for span', () => {
+        const { container } = render(_jsx(Grid.Cell, { start: 6 }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-grid__cell--start-6');
+    });
+    it('renders class names for a single number for span and an object for start', () => {
+        const { container } = render(_jsx(Grid.Cell, { span: 8, start: { narrow: 2, medium: 4, wide: 6 } }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-grid__cell--span-8 ams-grid__cell--start-2 ams-grid__cell--start-4-medium ams-grid__cell--start-6-wide');
+    });
+    it('renders class names for an object for span and a single number for start', () => {
+        const { container } = render(_jsx(Grid.Cell, { span: { narrow: 3, medium: 5, wide: 7 }, start: 2 }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-grid__cell--span-3 ams-grid__cell--span-5-medium ams-grid__cell--span-7-wide ams-grid__cell--start-2');
+    });
+    it('renders class names for an object for both start and span', () => {
+        const { container } = render(_jsx(Grid.Cell, { span: { narrow: 2, medium: 4, wide: 6 }, start: { narrow: 1, medium: 3, wide: 5 } }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-grid__cell--span-2 ams-grid__cell--span-4-medium ams-grid__cell--span-6-wide ams-grid__cell--start-1 ams-grid__cell--start-3-medium ams-grid__cell--start-5-wide');
+    });
+    it('renders the correct class name for the “all” value of span', () => {
+        const { container } = render(_jsx(Grid.Cell, { span: "all" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-grid__cell--span-all');
+    });
+    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]);
+            }
+            expect(component).toBeInTheDocument();
+        });
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(Grid.Cell, { ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Grid/gridCellClasses.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { GridColumnNumber, GridColumnNumbers } from './Grid';
+import type { GridCellProps } from './GridCell';
+export declare const addGridClass: (prefix: string, value?: GridColumnNumber | GridColumnNumbers | "all") => string[];
+export declare const gridCellClasses: (colSpan?: GridCellProps["span"], colStart?: GridCellProps["start"]) => string[];

package/dist/Grid/gridCellClasses.js

@@ -0,0 +1,18 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+export const addGridClass = (prefix, value) => {
+    if (value === 'all' || typeof value === 'number') {
+        return [`${prefix}${value}`];
+    }
+    else if (value) {
+        const { narrow, medium, wide } = value;
+        return [`${prefix}${narrow}`, `${prefix}${medium}-medium`, `${prefix}${wide}-wide`];
+    }
+    return [];
+};
+export const gridCellClasses = (colSpan, colStart) => [
+    ...addGridClass('ams-grid__cell--span-', colSpan),
+    ...addGridClass('ams-grid__cell--start-', colStart),
+];

package/dist/Grid/index.d.ts

@@ -0,0 +1,3 @@
+export { Grid } from './Grid';
+export type { GridColumnNumber, GridColumnNumbers, GridProps } from './Grid';
+export type { GridCellProps } from './GridCell';

package/dist/Grid/index.js

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

package/dist/Grid/paddingClasses.d.ts

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

package/dist/Grid/paddingClasses.js

@@ -0,0 +1,13 @@
+export const paddingClasses = (componentName, paddingBottom, paddingTop, paddingVertical) => {
+    const classes = [];
+    if (paddingVertical) {
+        return [`ams-${componentName}--padding-vertical--${paddingVertical}`];
+    }
+    if (paddingBottom) {
+        classes.push(`ams-${componentName}--padding-bottom--${paddingBottom}`);
+    }
+    if (paddingTop) {
+        classes.push(`ams-${componentName}--padding-top--${paddingTop}`);
+    }
+    return classes;
+};

package/dist/Header/Header.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { LogoBrand } from '../Logo';
+export type HeaderProps = {
+    /** The name of the application. */
+    brandName?: string;
+    /** The name of the brand for which to display the logo. */
+    logoBrand?: LogoBrand;
+    /** The url for the link on the logo. */
+    logoLink?: string;
+    /** The accessible text for the link on the logo. */
+    logoLinkTitle?: string;
+    /** The text for the menu button. */
+    menuButtonText?: string;
+    /** A slot for the menu items. Use Header.MenuLink here. */
+    menuItems?: ReactNode;
+    /** The accessible label for the navigation section. */
+    navigationLabel?: string;
+    /** Whether the menu button is visible on wide screens.  */
+    noMenuButtonOnWideWindow?: boolean;
+} & HTMLAttributes<HTMLElement>;
+export declare const Header: import("react").ForwardRefExoticComponent<{
+    /** The name of the application. */
+    brandName?: string;
+    /** The name of the brand for which to display the logo. */
+    logoBrand?: LogoBrand;
+    /** The url for the link on the logo. */
+    logoLink?: string;
+    /** The accessible text for the link on the logo. */
+    logoLinkTitle?: string;
+    /** The text for the menu button. */
+    menuButtonText?: string;
+    /** A slot for the menu items. Use Header.MenuLink here. */
+    menuItems?: ReactNode;
+    /** The accessible label for the navigation section. */
+    navigationLabel?: string;
+    /** Whether the menu button is visible on wide screens.  */
+    noMenuButtonOnWideWindow?: boolean;
+} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>> & {
+    GridCellNarrowWindowOnly: import("react").ForwardRefExoticComponent<import("..").GridCellProps & import("react").RefAttributes<HTMLElement>>;
+    MenuLink: import("react").ForwardRefExoticComponent<{
+        fixed?: boolean;
+    } & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & {
+        children?: ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLAnchorElement>>;
+};

package/dist/Header/Header.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef, useEffect, useState } from 'react';
+import { Icon } from '../Icon';
+import { Logo } from '../Logo';
+import { HeaderGridCellNarrowWindowOnly } from './HeaderGridCellNarrowWindowOnly';
+import { HeaderMenuIcon } from './HeaderMenuIcon';
+import { HeaderMenuLink } from './HeaderMenuLink';
+import useIsAfterBreakpoint from '../common/useIsAfterBreakpoint';
+const LogoLinkContent = ({ brandName, logoBrand }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: clsx(logoBrand === 'amsterdam' && Boolean(brandName) && 'ams-header__logo-container'), children: _jsx(Logo, { brand: logoBrand }) }), brandName && (_jsx("span", { "aria-hidden": "true", className: "ams-header__brand-name", children: brandName }))] }));
+const HeaderRoot = forwardRef(({ brandName, children, className, logoBrand = 'amsterdam', logoLink = '/', logoLinkTitle = 'Ga naar de homepage', menuButtonText = 'Menu', menuItems, navigationLabel = 'Hoofdnavigatie', noMenuButtonOnWideWindow, ...restProps }, ref) => {
+    const [open, setOpen] = useState(false);
+    const hasMegaMenu = Boolean(children);
+    const isWideWindow = hasMegaMenu && useIsAfterBreakpoint('wide');
+    useEffect(() => {
+        // Close the menu when the menu button disappears
+        if (noMenuButtonOnWideWindow && isWideWindow) {
+            setOpen(false);
+        }
+    }, [isWideWindow]);
+    return (_jsxs("header", { ...restProps, className: clsx('ams-header', className), ref: ref, children: [_jsxs("a", { className: "ams-header__logo-link", href: logoLink, children: [_jsx("span", { className: "ams-visually-hidden", children: logoLinkTitle }), _jsx(LogoLinkContent, { brandName: brandName, logoBrand: logoBrand })] }), (hasMegaMenu || menuItems) && (_jsxs("nav", { "aria-labelledby": "primary-navigation", className: "ams-header__navigation", children: [_jsx("h2", { className: "ams-visually-hidden", id: "primary-navigation", children: navigationLabel }), _jsx("div", { className: "ams-header__logo-link ams-header__logo-link--hidden", children: _jsx(LogoLinkContent, { brandName: brandName, logoBrand: logoBrand }) }), _jsxs("ul", { className: "ams-header__menu", children: [menuItems, hasMegaMenu && (_jsx("li", { className: clsx(noMenuButtonOnWideWindow && 'ams-header__mega-menu-button-item--hide-on-wide-window'), children: _jsxs("button", { ...restProps, "aria-controls": "ams-mega-menu", "aria-expanded": open, className: "ams-header__mega-menu-button", onClick: () => setOpen(!open), type: "button", children: [_jsx("span", { className: "ams-header__mega-menu-button-label", children: menuButtonText }), _jsx("span", { "aria-hidden": "true", className: "ams-header__mega-menu-button-hidden-label", children: menuButtonText }), _jsx(Icon, { svg: _jsx(HeaderMenuIcon, { className: clsx('ams-header__menu-icon', open && 'ams-header__menu-icon--open') }) })] }) }))] }), hasMegaMenu && (_jsx("div", { className: clsx('ams-header__mega-menu', !open && 'ams-header__mega-menu--closed'), id: "ams-mega-menu", children: children }))] }))] }));
+});
+HeaderRoot.displayName = 'Header';
+export const Header = Object.assign(HeaderRoot, {
+    GridCellNarrowWindowOnly: HeaderGridCellNarrowWindowOnly,
+    MenuLink: HeaderMenuLink,
+});

package/dist/Header/Header.test.d.ts

@@ -0,0 +1,2 @@
+import './matchMedia.mock';
+import '@testing-library/jest-dom';