@amsterdam/design-system-react 0.15.0 → 0.16.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.15.0",
+  "version": "0.16.0",
   "author": "Design System Team, City of Amsterdam <designsystem@amsterdam.nl>",
   "description": "All React components from the Amsterdam Design System. Use it to compose pages in your website or application.",
   "homepage": "https://designsystem.amsterdam",
@@ -29,9 +29,9 @@
     "dist/"
   ],
   "dependencies": {
-    "@babel/runtime": "7.26.10",
+    "@babel/runtime": "7.27.0",
     "clsx": "2.1.1",
-    "@amsterdam/design-system-react-icons": "0.1.13"
+    "@amsterdam/design-system-react-icons": "0.1.14"
   },
   "devDependencies": {
     "@babel/core": "7.26.10",
@@ -44,32 +44,32 @@
     "@rollup/pluginutils": "5.1.4",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "16.2.0",
+    "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
     "@types/jest": "29.5.14",
     "@types/lodash": "4.17.16",
-    "@types/react": "18.3.18",
+    "@types/react": "18.3.20",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "next": "15.2.3",
+    "next": "15.3.1",
     "npm-run-all": "4.1.5",
     "postcss": "8.5.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "rollup": "4.37.0",
+    "rollup": "4.40.0",
     "rollup-plugin-dts": "6.2.1",
     "rollup-plugin-filesize": "10.0.0",
-    "rollup-plugin-node-externals": "7.1.3",
+    "rollup-plugin-node-externals": "8.0.0",
     "rollup-plugin-node-polyfills": "0.2.1",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-typescript2": "0.36.0",
-    "sass": "1.86.0",
+    "sass": "1.86.3",
     "tslib": "2.8.1"
   },
   "peerDependencies": {
     "react": "16 - 19",
     "react-dom": "16 - 19",
-    "@amsterdam/design-system-css": "0.15.0"
+    "@amsterdam/design-system-css": "0.16.0"
   },
   "scripts": {
     "build": "tsc && rollup -c",

package/dist/Footer/Footer.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
-import { forwardRef } from 'react';
-import { FooterMenu } from './FooterMenu';
-import { FooterMenuLink } from './FooterMenuLink';
-import { FooterSpotlight } from './FooterSpotlight';
-const FooterRoot = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("footer", { ...restProps, className: clsx('ams-footer', className), ref: ref, children: children })));
-FooterRoot.displayName = 'Footer';
-export const Footer = Object.assign(FooterRoot, {
-    Menu: FooterMenu,
-    MenuLink: FooterMenuLink,
-    Spotlight: FooterSpotlight,
-});

package/dist/Footer/FooterMenu.js

@@ -1,9 +0,0 @@
-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/FooterMenuLink.js

@@ -1,9 +0,0 @@
-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/FooterSpotlight.js

@@ -1,9 +0,0 @@
-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/index.d.ts

@@ -1,5 +0,0 @@
-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

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

package/dist/Header/Header.js

@@ -1,31 +0,0 @@
-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/HeaderGridCellNarrowWindowOnly.d.ts

@@ -1,2 +0,0 @@
-import { GridCellProps } from '../Grid';
-export declare const HeaderGridCellNarrowWindowOnly: import("react").ForwardRefExoticComponent<GridCellProps & import("react").RefAttributes<HTMLElement>>;

package/dist/Header/HeaderGridCellNarrowWindowOnly.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { forwardRef } from 'react';
-import { Grid } from '../Grid';
-export const HeaderGridCellNarrowWindowOnly = forwardRef(({ children, className, ...restProps }, ref) => (_jsx(Grid.Cell, { ...restProps, className: clsx('ams-header__grid-cell-narrow-window-only', className), ref: ref, children: children })));
-HeaderGridCellNarrowWindowOnly.displayName = 'Header.GridCellNarrowWindowOnly';

package/dist/Header/HeaderMenuIcon.d.ts

@@ -1,2 +0,0 @@
-import type { SVGProps } from 'react';
-export declare const HeaderMenuIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/Header/HeaderMenuIcon.js

@@ -1,2 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const HeaderMenuIcon = (props) => (_jsxs("svg", { "aria-hidden": "true", focusable: "false", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("line", { className: "ams-header__menu-icon-top", x1: "0", x2: "100%", y1: "50%", y2: "50%" }), _jsx("line", { className: "ams-header__menu-icon-middle", x1: "0", x2: "100%", y1: "50%", y2: "50%" }), _jsx("line", { className: "ams-header__menu-icon-bottom", x1: "0", x2: "100%", y1: "50%", y2: "50%" })] }));

package/dist/Header/HeaderMenuLink.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { forwardRef } from 'react';
-export const HeaderMenuLink = forwardRef(({ children, className, fixed, ...restProps }, ref) => (_jsx("li", { className: clsx('ams-header__menu-item', fixed && 'ams-header__menu-item--fixed'), children: _jsx("a", { ...restProps, className: clsx('ams-header__menu-link', className), ref: ref, children: children }) })));
-HeaderMenuLink.displayName = 'Header.MenuLink';

package/dist/Header/index.d.ts

@@ -1,3 +0,0 @@
-export { Header } from './Header';
-export type { HeaderProps } from './Header';
-export type { HeaderMenuLinkProps } from './HeaderMenuLink';

package/dist/Header/index.js

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

package/dist/MegaMenu/MegaMenu.d.ts

@@ -1,14 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type MegaMenuProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
-/** @deprecated Use child components in Header instead. */
-export declare const MegaMenu: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDivElement>> & {
-    ListCategory: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-        children?: import("react").ReactNode | undefined;
-    } & import("react").RefAttributes<HTMLDivElement>>;
-};

package/dist/MegaMenu/MegaMenu.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
-import { forwardRef } from 'react';
-import { MegaMenuListCategory } from './MegaMenuListCategory';
-const MegaMenuRoot = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("div", { ...restProps, className: clsx('ams-mega-menu', className), ref: ref, children: children })));
-MegaMenuRoot.displayName = 'MegaMenu';
-/** @deprecated Use child components in Header instead. */
-export const MegaMenu = Object.assign(MegaMenuRoot, { ListCategory: MegaMenuListCategory });

package/dist/MegaMenu/MegaMenuListCategory.d.ts

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

package/dist/MegaMenu/MegaMenuListCategory.js

@@ -1,9 +0,0 @@
-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 MegaMenuListCategory = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("div", { ...restProps, className: clsx('ams-mega-menu__list-category', className), ref: ref, children: children })));
-MegaMenuListCategory.displayName = 'MegaMenu.ListCategory';

package/dist/MegaMenu/index.d.ts

@@ -1,3 +0,0 @@
-export { MegaMenu } from './MegaMenu';
-export type { MegaMenuProps } from './MegaMenu';
-export type { MegaMenuListCategoryProps } from './MegaMenuListCategory';

package/dist/MegaMenu/index.js

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

package/dist/PageMenu/PageMenu.d.ts

@@ -1,25 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type PageMenuProps = {
-    /** Whether the items align to the end margin. Set to `true` if the Page Menu itself does so. */
-    alignEnd?: boolean;
-    /** Whether menu items should wrap if they don’t fit on a single row. */
-    wrap?: boolean;
-} & PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
-export declare const PageMenu: import("react").ForwardRefExoticComponent<{
-    /** Whether the items align to the end margin. Set to `true` if the Page Menu itself does so. */
-    alignEnd?: boolean;
-    /** Whether menu items should wrap if they don’t fit on a single row. */
-    wrap?: boolean;
-} & HTMLAttributes<HTMLUListElement> & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLUListElement>> & {
-    Link: import("react").ForwardRefExoticComponent<{
-        icon?: Function;
-    } & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & {
-        children?: import("react").ReactNode | undefined;
-    } & import("react").RefAttributes<HTMLAnchorElement>>;
-};

package/dist/PageMenu/PageMenu.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
-import { forwardRef } from 'react';
-import { PageMenuLink } from './PageMenuLink';
-/** @deprecated Use the menuItems prop of Header or the Footer.Menu subcomponent instead. */
-const PageMenuRoot = forwardRef(({ alignEnd, children, className, wrap = true, ...restProps }, ref) => (_jsx("ul", { ...restProps, className: clsx('ams-page-menu', alignEnd && `ams-page-menu--align-end`, !wrap && `ams-page-menu--no-wrap`, className), ref: ref, children: children })));
-PageMenuRoot.displayName = 'PageMenu';
-export const PageMenu = Object.assign(PageMenuRoot, { Link: PageMenuLink });

package/dist/PageMenu/PageMenu.test.js

@@ -1,45 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LoginIcon } from '@amsterdam/design-system-react-icons';
-import { render } from '@testing-library/react';
-import { createRef } from 'react';
-import { PageMenu } from './PageMenu';
-import '@testing-library/jest-dom';
-describe('Page menu', () => {
-    it('renders a page menu with children', () => {
-        const { container } = render(_jsxs(PageMenu, { children: [_jsx(PageMenu.Link, { href: "#", lang: "en", children: "English" }), _jsx(PageMenu.Link, { href: "#", icon: LoginIcon, children: "Mijn Amsterdam" })] }));
-        const component = container.querySelector(':only-child');
-        const children = container.querySelectorAll('li');
-        const icons = container.querySelectorAll('svg');
-        expect(component).toBeInTheDocument();
-        expect(component).toBeVisible();
-        expect(children.length).toBe(2);
-        expect(icons.length).toBe(1);
-    });
-    it('renders a design system BEM class name', () => {
-        const { container } = render(_jsx(PageMenu, {}));
-        const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('ams-page-menu');
-    });
-    it('renders a class name for end alignment', () => {
-        const { container } = render(_jsx(PageMenu, { alignEnd: true }));
-        const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('ams-page-menu--align-end');
-    });
-    it('renders a class name to prevent wrapping', () => {
-        const { container } = render(_jsx(PageMenu, { wrap: false }));
-        const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('ams-page-menu--no-wrap');
-    });
-    it('is able to pass a React ref', () => {
-        const ref = createRef();
-        const { container } = render(_jsx(PageMenu, { ref: ref, children: _jsx(PageMenu.Link, { href: "#", lang: "en", children: "English" }) }));
-        const component = container.querySelector(':only-child');
-        expect(ref.current).toBe(component);
-    });
-    it('renders an additional class name', () => {
-        const { container } = render(_jsx(PageMenu, { className: "intro" }));
-        const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('intro');
-        expect(component).toHaveClass('ams-page-menu');
-    });
-});

package/dist/PageMenu/PageMenuLink.d.ts

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

package/dist/PageMenu/PageMenuLink.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
-import { forwardRef } from 'react';
-import { Icon } from '../Icon';
-export const PageMenuLink = forwardRef(({ children, className, icon, ...restProps }, ref) => (_jsx("li", { children: _jsxs("a", { ...restProps, className: clsx('ams-page-menu__link', className), ref: ref, children: [children, icon && _jsx(Icon, { size: "small", svg: icon })] }) })));
-PageMenuLink.displayName = 'PageMenu.Link';

package/dist/PageMenu/PageMenuLink.test.js

@@ -1,40 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ChevronRightIcon } from '@amsterdam/design-system-react-icons';
-import { render, screen } from '@testing-library/react';
-import { createRef } from 'react';
-import { PageMenuLink } from './PageMenuLink';
-import '@testing-library/jest-dom';
-describe('Page menu link', () => {
-    it('renders with href attribute', () => {
-        render(_jsx(PageMenuLink, { 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(PageMenuLink, { href: "#", children: "Link" }));
-        const component = screen.getByRole('link');
-        expect(component).toHaveClass('ams-page-menu__link');
-    });
-    it('renders an additional class name', () => {
-        render(_jsx(PageMenuLink, { className: "extra", href: "#", children: "Link" }));
-        const component = screen.getByRole('link');
-        expect(component).toHaveClass('ams-page-menu__link extra');
-    });
-    it('does not render an icon by default', () => {
-        const { container } = render(_jsx(PageMenuLink, { href: "#", children: "Link" }));
-        const svg = container.querySelector('.ams-icon');
-        expect(svg).not.toBeInTheDocument();
-    });
-    it('renders an icon when specified', () => {
-        const { container } = render(_jsx(PageMenuLink, { href: "#", icon: ChevronRightIcon, children: "Link" }));
-        const svg = container.querySelector('.ams-icon');
-        expect(svg).toBeInTheDocument();
-    });
-    it('supports ForwardRef in React', () => {
-        const ref = createRef();
-        render(_jsx(PageMenuLink, { className: "extra", href: "#", ref: ref, children: "Link" }));
-        const component = screen.getByRole('link');
-        expect(ref.current).toBe(component);
-    });
-});

package/dist/PageMenu/index.d.ts

@@ -1,3 +0,0 @@
-export { PageMenu } from './PageMenu';
-export type { PageMenuProps } from './PageMenu';
-export type { PageMenuLinkProps } from './PageMenuLink';

package/dist/PageMenu/index.js

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

package/dist/Screen/Screen.d.ts

@@ -1,21 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import type { HTMLAttributes, PropsWithChildren } from 'react';
-type ScreenMaxWidth = 'wide' | 'x-wide';
-export type ScreenProps = {
-    /** Whether the screen should stretch to the full height of the viewport. */
-    fullHeight?: boolean;
-    /** The maximum width of the screen. */
-    maxWidth?: ScreenMaxWidth;
-} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
-export declare const Screen: import("react").ForwardRefExoticComponent<{
-    /** Whether the screen should stretch to the full height of the viewport. */
-    fullHeight?: boolean;
-    /** The maximum width of the screen. */
-    maxWidth?: ScreenMaxWidth;
-} & HTMLAttributes<HTMLDivElement> & {
-    children?: import("react").ReactNode | undefined;
-} & import("react").RefAttributes<HTMLDivElement>>;
-export {};

package/dist/Screen/Screen.js

@@ -1,9 +0,0 @@
-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 Screen = forwardRef(({ children, className, fullHeight, maxWidth = 'wide', ...restProps }, ref) => (_jsx("div", { ...restProps, className: clsx('ams-screen', fullHeight && 'ams-screen--full-height', `ams-screen--${maxWidth}`, className), ref: ref, children: children })));
-Screen.displayName = 'Screen';

package/dist/Screen/Screen.test.d.ts

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

package/dist/Screen/Screen.test.js

@@ -1,40 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render } from '@testing-library/react';
-import { createRef } from 'react';
-import { Screen } from './Screen';
-import '@testing-library/jest-dom';
-describe('Screen', () => {
-    it('renders', () => {
-        const { container } = render(_jsx(Screen, {}));
-        const component = container.querySelector(':only-child');
-        expect(component).toBeInTheDocument();
-        expect(component).toBeVisible();
-    });
-    it('renders a design system BEM class name', () => {
-        const { container } = render(_jsx(Screen, {}));
-        const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('ams-screen');
-    });
-    it('renders the max-width class name', () => {
-        const { container } = render(_jsx(Screen, { maxWidth: "x-wide" }));
-        const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('ams-screen--x-wide');
-    });
-    it('renders the full-height class name', () => {
-        const { container } = render(_jsx(Screen, { fullHeight: true }));
-        const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('ams-screen--full-height');
-    });
-    it('renders an additional class name', () => {
-        const { container } = render(_jsx(Screen, { className: "extra" }));
-        const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('extra');
-        expect(component).toHaveClass('ams-screen');
-    });
-    it('supports ForwardRef in React', () => {
-        const ref = createRef();
-        const { container } = render(_jsx(Screen, { ref: ref }));
-        const component = container.querySelector(':only-child');
-        expect(ref.current).toBe(component);
-    });
-});

package/dist/Screen/index.d.ts

@@ -1,2 +0,0 @@
-export { Screen } from './Screen';
-export type { ScreenProps } from './Screen';

package/dist/Screen/index.js

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

package/dist/TopTaskLink/TopTaskLink.d.ts

@@ -1,17 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import type { AnchorHTMLAttributes } from 'react';
-export type TopTaskLinkProps = {
-    /** The text content. */
-    description: string;
-    /** The title. */
-    label: string;
-} & AnchorHTMLAttributes<HTMLAnchorElement>;
-export declare const TopTaskLink: import("react").ForwardRefExoticComponent<{
-    /** The text content. */
-    description: string;
-    /** The title. */
-    label: string;
-} & AnchorHTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/TopTaskLink/TopTaskLink.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-import clsx from 'clsx';
-import { forwardRef } from 'react';
-export const TopTaskLink = forwardRef(({ className, description, label, ...restProps }, ref) => (_jsxs("a", { ...restProps, className: clsx('ams-top-task-link', className), ref: ref, children: [_jsx("span", { className: "ams-top-task-link__label", children: label }), _jsx("span", { className: "ams-visually-hidden", children: "," }), _jsx("span", { className: "ams-top-task-link__description", children: description })] })));
-TopTaskLink.displayName = 'TopTaskLink';

package/dist/TopTaskLink/TopTaskLink.test.d.ts

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

package/dist/TopTaskLink/TopTaskLink.test.js

@@ -1,42 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render, screen } from '@testing-library/react';
-import { createRef } from 'react';
-import { TopTaskLink } from './TopTaskLink';
-import '@testing-library/jest-dom';
-describe('Top task link', () => {
-    it('renders a link role element', () => {
-        render(_jsx(TopTaskLink, { description: "Description", href: "/", label: "Label" }));
-        const link = screen.getByRole('link', {
-            name: 'Label , Description',
-        });
-        expect(link).toBeInTheDocument();
-        expect(link).toBeVisible();
-    });
-    it('renders a design system BEM class name', () => {
-        render(_jsx(TopTaskLink, { description: "Description", href: "/", label: "Label" }));
-        const link = screen.getByRole('link', {
-            name: 'Label , Description',
-        });
-        const label = screen.getByText('Label');
-        const description = screen.getByText('Description');
-        expect(link).toHaveClass('ams-top-task-link');
-        expect(label).toHaveClass('ams-top-task-link__label');
-        expect(description).toHaveClass('ams-top-task-link__description');
-    });
-    it('renders an additional class name', () => {
-        render(_jsx(TopTaskLink, { className: "extra", description: "Description", href: "/", label: "Label" }));
-        const link = screen.getByRole('link', {
-            name: 'Label , Description',
-        });
-        expect(link).toHaveClass('extra');
-        expect(link).toHaveClass('ams-top-task-link');
-    });
-    it('supports ForwardRef in React', () => {
-        const ref = createRef();
-        render(_jsx(TopTaskLink, { description: "Description", href: "/", label: "Label", ref: ref }));
-        const link = screen.getByRole('link', {
-            name: 'Label , Description',
-        });
-        expect(ref.current).toBe(link);
-    });
-});

package/dist/TopTaskLink/index.d.ts

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

package/dist/TopTaskLink/index.js

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