@amsterdam/design-system-react 0.14.1 → 0.16.0

package/dist/Mark/Mark.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 Mark = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("mark", { ...restProps, className: clsx('ams-mark', className), ref: ref, children: children })));
+Mark.displayName = 'Mark';

package/dist/Mark/Mark.test.d.ts

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

package/dist/Mark/Mark.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 { Mark } from './Mark';
+import '@testing-library/jest-dom';
+describe('Mark', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(Mark, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(Mark, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-mark');
+    });
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(Mark, { className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-mark extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(Mark, { ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Mark/index.d.ts

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

package/dist/Mark/index.js

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

package/dist/OrderedList/OrderedList.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { OlHTMLAttributes, PropsWithChildren } from 'react';
+export type OrderedListProps = {
+    /** Changes the text colour for readability on a dark background. */
+    color?: 'inverse';
+    /** Whether the list items show a marker. */
+    markers?: boolean;
+    /** The size of the text. */
+    size?: 'small';
+} & PropsWithChildren<OlHTMLAttributes<HTMLOListElement>>;
+export declare const OrderedList: import("react").ForwardRefExoticComponent<{
+    /** Changes the text colour for readability on a dark background. */
+    color?: "inverse";
+    /** Whether the list items show a marker. */
+    markers?: boolean;
+    /** The size of the text. */
+    size?: "small";
+} & OlHTMLAttributes<HTMLOListElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLOListElement>> & {
+    Item: import("react").ForwardRefExoticComponent<import("react").LiHTMLAttributes<HTMLLIElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLLIElement>>;
+};

package/dist/OrderedList/OrderedList.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 { OrderedListItem } from './OrderedListItem';
+const OrderedListRoot = forwardRef(({ children, className, color, markers = true, size, ...restProps }, ref) => (_jsx("ol", { className: clsx('ams-ordered-list', color && `ams-ordered-list--${color}`, !markers && 'ams-ordered-list--no-markers', size && `ams-ordered-list--${size}`, className), ref: ref, ...restProps, children: children })));
+OrderedListRoot.displayName = 'OrderedList';
+export const OrderedList = Object.assign(OrderedListRoot, { Item: OrderedListItem });

package/dist/OrderedList/OrderedList.test.d.ts

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

package/dist/OrderedList/OrderedList.test.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { OrderedList } from './OrderedList';
+import '@testing-library/jest-dom';
+describe('Ordered list', () => {
+    it('renders an HTML ol element', () => {
+        const { container } = render(_jsx(OrderedList, {}));
+        const list = container.querySelector('ol:only-child');
+        expect(list).toBeInTheDocument();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(OrderedList, {}));
+        const component = screen.getByRole('list');
+        expect(component).toHaveClass('ams-ordered-list');
+    });
+    it('renders a no markers class', () => {
+        render(_jsx(OrderedList, { markers: false }));
+        const component = screen.getByRole('list');
+        expect(component).toHaveClass('ams-ordered-list--no-markers');
+    });
+    it('renders the class name for inverse color', () => {
+        render(_jsx(OrderedList, { color: "inverse" }));
+        const component = screen.getByRole('list');
+        expect(component).toHaveClass('ams-ordered-list--inverse');
+    });
+    it('renders an extra class name', () => {
+        render(_jsx(OrderedList, { className: "extra" }));
+        const component = screen.getByRole('list');
+        expect(component).toHaveClass('ams-ordered-list extra');
+    });
+    it('renders its subcomponent', () => {
+        const listItems = ['Item 1', 'Item 2', 'Item 3'];
+        const { container } = render(_jsx(OrderedList, { children: listItems.map((item, index) => (_jsx(OrderedList.Item, { children: item }, index))) }));
+        const list = screen.getByRole('list');
+        const items = container.querySelectorAll('.ams-ordered-list__item');
+        expect(list).toBeInTheDocument();
+        expect(items.length).toBe(3);
+    });
+    it('renders the small size class', () => {
+        render(_jsx(OrderedList, { size: "small" }));
+        const component = screen.getByRole('list');
+        expect(component).toHaveClass('ams-ordered-list--small');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(OrderedList, { ref: ref }));
+        const component = screen.getByRole('list');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/OrderedList/OrderedListItem.d.ts

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

package/dist/OrderedList/OrderedListItem.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 OrderedListItem = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("li", { className: clsx('ams-ordered-list__item', className), ref: ref, ...restProps, children: children })));
+OrderedListItem.displayName = 'OrderedList.Item';

package/dist/OrderedList/OrderedListItem.test.d.ts

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

package/dist/OrderedList/OrderedListItem.test.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { OrderedListItem } from './OrderedListItem';
+import '@testing-library/jest-dom';
+describe('Ordered list item', () => {
+    it('renders', () => {
+        render(_jsx(OrderedListItem, {}));
+        const component = screen.getByRole('listitem');
+        expect(component).toBeInTheDocument();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(OrderedListItem, {}));
+        const component = screen.getByRole('listitem');
+        expect(component).toHaveClass('ams-ordered-list__item');
+    });
+    it('renders an extra class name', () => {
+        render(_jsx(OrderedListItem, { className: "extra" }));
+        const component = screen.getByRole('listitem');
+        expect(component).toHaveClass('ams-ordered-list__item extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(OrderedListItem, { ref: ref }));
+        const component = screen.getByRole('listitem');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/OrderedList/index.d.ts

@@ -0,0 +1,3 @@
+export { OrderedList } from './OrderedList';
+export type { OrderedListProps } from './OrderedList';
+export type { OrderedListItemProps } from './OrderedListItem';

package/dist/OrderedList/index.js

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

package/dist/Overlap/Overlap.d.ts

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

package/dist/Overlap/Overlap.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 Overlap = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("div", { ...restProps, className: clsx('ams-overlap', className), ref: ref, children: children })));
+Overlap.displayName = 'Overlap';

package/dist/Overlap/Overlap.test.d.ts

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

package/dist/Overlap/Overlap.test.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { Overlap } from './Overlap';
+import '@testing-library/jest-dom';
+describe('Overlap', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(Overlap, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(Overlap, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-overlap');
+    });
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(Overlap, { className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-overlap extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(Overlap, { ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+    it('renders children', () => {
+        render(_jsx(Overlap, { children: _jsx("p", { children: "Test Child" }) }));
+        const testChild = screen.getByText('Test Child');
+        expect(testChild).toBeTruthy();
+    });
+});

package/dist/Overlap/index.d.ts

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

package/dist/Overlap/index.js

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

package/dist/Page/Page.d.ts

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

package/dist/Page/Page.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 Page = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("div", { ...restProps, className: clsx('ams-page', className), ref: ref, children: children })));
+Page.displayName = 'Page';

package/dist/Page/Page.test.d.ts

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

package/dist/Page/Page.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 { Page } from './Page';
+import '@testing-library/jest-dom';
+describe('Page', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(Page, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(Page, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-page');
+    });
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(Page, { className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-page extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(Page, { ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Page/index.d.ts

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

package/dist/Page/index.js

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

package/dist/PageFooter/PageFooter.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type PageFooterProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+export declare const PageFooter: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLElement>> & {
+    Menu: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLUListElement>>;
+    MenuLink: import("react").ForwardRefExoticComponent<import("react").AnchorHTMLAttributes<HTMLAnchorElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLAnchorElement>>;
+    Spotlight: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/PageFooter/PageFooter.js

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

package/dist/PageFooter/PageFooter.test.d.ts

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

package/dist/PageFooter/PageFooter.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 { PageFooter } from './PageFooter';
+import '@testing-library/jest-dom';
+describe('Page Footer', () => {
+    it('renders an HTML footer element', () => {
+        render(_jsx(PageFooter, {}));
+        const component = screen.getByRole('contentinfo');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(PageFooter, {}));
+        const component = screen.getByRole('contentinfo');
+        expect(component).toHaveClass('ams-page-footer');
+    });
+    it('renders an extra class name', () => {
+        render(_jsx(PageFooter, { className: "extra" }));
+        const component = screen.getByRole('contentinfo');
+        expect(component).toHaveClass('ams-page-footer extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(PageFooter, { ref: ref }));
+        const component = screen.getByRole('contentinfo');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/PageFooter/PageFooterMenu.d.ts

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

package/dist/PageFooter/PageFooterMenu.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 PageFooterMenu = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("ul", { ...restProps, className: clsx('ams-page-footer__menu', className), ref: ref, children: children })));
+PageFooterMenu.displayName = 'PageFooter.Menu';

package/dist/PageFooter/PageFooterMenu.test.d.ts

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

package/dist/PageFooter/PageFooterMenu.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 { PageFooter } from './PageFooter';
+import '@testing-library/jest-dom';
+describe('Page Footer Menu', () => {
+    it('renders a footer menu with children', () => {
+        render(_jsxs(PageFooter.Menu, { children: [_jsx(PageFooter.MenuLink, { href: "#", lang: "en", children: "English" }), _jsx(PageFooter.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(PageFooter.Menu, {}));
+        const component = screen.getByRole('list');
+        expect(component).toHaveClass('ams-page-footer__menu');
+    });
+    it('is able to pass a React ref', () => {
+        const ref = createRef();
+        render(_jsx(PageFooter.Menu, { ref: ref, children: _jsx(PageFooter.MenuLink, { href: "#", lang: "en", children: "English" }) }));
+        const component = screen.getByRole('list');
+        expect(ref.current).toBe(component);
+    });
+    it('renders an extra class name', () => {
+        render(_jsx(PageFooter.Menu, { className: "intro" }));
+        const component = screen.getByRole('list');
+        expect(component).toHaveClass('ams-page-footer__menu intro');
+    });
+});

package/dist/PageFooter/PageFooterMenuLink.d.ts

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

package/dist/PageFooter/PageFooterMenuLink.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 PageFooterMenuLink = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("li", { className: "ams-page-footer__menu-item", children: _jsx("a", { ...restProps, className: clsx('ams-page-footer__menu-link', className), ref: ref, children: children }) })));
+PageFooterMenuLink.displayName = 'PageFooter.MenuLink';

package/dist/PageFooter/PageFooterMenuLink.test.d.ts

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

package/dist/PageFooter/PageFooterMenuLink.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 { PageFooter } from './PageFooter';
+import '@testing-library/jest-dom';
+describe('Page Footer Menu Link', () => {
+    it('renders with href attribute', () => {
+        render(_jsx(PageFooter.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(PageFooter.MenuLink, { href: "#", children: "Link" }));
+        const component = screen.getByRole('link');
+        expect(component).toHaveClass('ams-page-footer__menu-link');
+    });
+    it('renders an extra class name', () => {
+        render(_jsx(PageFooter.MenuLink, { className: "extra", href: "#", children: "Link" }));
+        const component = screen.getByRole('link');
+        expect(component).toHaveClass('ams-page-footer__menu-link extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(PageFooter.MenuLink, { className: "extra", href: "#", ref: ref, children: "Link" }));
+        const component = screen.getByRole('link');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/PageFooter/PageFooterSpotlight.d.ts

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

package/dist/PageFooter/PageFooterSpotlight.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 PageFooterSpotlight = forwardRef(({ children, className, ...restProps }, ref) => (_jsx("div", { ...restProps, className: clsx('ams-page-footer__spotlight', className), ref: ref, children: children })));
+PageFooterSpotlight.displayName = 'PageFooter.Spotlight';

package/dist/PageFooter/PageFooterSpotlight.test.d.ts

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

package/dist/PageFooter/PageFooterSpotlight.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 { PageFooter } from './PageFooter';
+import '@testing-library/jest-dom';
+describe('Page Footer Spotlight', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(PageFooter.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(PageFooter.Spotlight, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-page-footer__spotlight');
+    });
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(PageFooter.Spotlight, { className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-page-footer__spotlight extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(PageFooter.Spotlight, { ref: ref }));
+        const component = container.querySelector(':only-child');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/PageFooter/index.d.ts

@@ -0,0 +1,5 @@
+export { PageFooter } from './PageFooter';
+export type { PageFooterProps } from './PageFooter';
+export type { PageFooterMenuProps } from './PageFooterMenu';
+export type { PageFooterMenuLinkProps } from './PageFooterMenuLink';
+export type { PageFooterSpotlightProps } from './PageFooterSpotlight';

package/dist/PageFooter/index.js

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