@amsterdam/design-system-react 0.15.0 → 1.0.0

package/dist/Logo/index.js

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

package/dist/Mark/Mark.d.ts

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

package/dist/Mark/Mark.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-text-mark--docs Mark docs at Amsterdam Design System}
+ */
 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

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

package/dist/Mark/Mark.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 { Mark } from './Mark';
@@ -15,7 +19,7 @@ describe('Mark', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-mark');
     });
-    it('renders an additional class name', () => {
+    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');

package/dist/Mark/index.d.ts

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

package/dist/Mark/index.js

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

package/dist/OrderedList/OrderedList.d.ts

@@ -11,6 +11,9 @@ export type OrderedListProps = {
     /** The size of the text. */
     size?: 'small';
 } & PropsWithChildren<OlHTMLAttributes<HTMLOListElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-ordered-list--docs Ordered List docs at Amsterdam Design System}
+ */
 export declare const OrderedList: import("react").ForwardRefExoticComponent<{
     /** Changes the text colour for readability on a dark background. */
     color?: "inverse";

package/dist/OrderedList/OrderedList.js

@@ -8,4 +8,7 @@ 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';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-text-ordered-list--docs Ordered List docs at Amsterdam Design System}
+ */
 export const OrderedList = Object.assign(OrderedListRoot, { Item: OrderedListItem });

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

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

package/dist/OrderedList/OrderedList.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 { OrderedList } from './OrderedList';
@@ -24,7 +28,7 @@ describe('Ordered list', () => {
         const component = screen.getByRole('list');
         expect(component).toHaveClass('ams-ordered-list--inverse');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(OrderedList, { className: "extra" }));
         const component = screen.getByRole('list');
         expect(component).toHaveClass('ams-ordered-list extra');

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

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

package/dist/OrderedList/OrderedListItem.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 { OrderedListItem } from './OrderedListItem';
@@ -14,7 +18,7 @@ describe('Ordered list item', () => {
         const component = screen.getByRole('listitem');
         expect(component).toHaveClass('ams-ordered-list__item');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(OrderedListItem, { className: "extra" }));
         const component = screen.getByRole('listitem');
         expect(component).toHaveClass('ams-ordered-list__item extra');

package/dist/OrderedList/index.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { OrderedList } from './OrderedList';
 export type { OrderedListProps } from './OrderedList';
 export type { OrderedListItemProps } from './OrderedListItem';

package/dist/OrderedList/index.js

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

package/dist/Overlap/Overlap.d.ts

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

package/dist/Overlap/Overlap.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-layout-overlap--docs Overlap docs at Amsterdam Design System}
+ */
 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

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

package/dist/Overlap/Overlap.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 { Overlap } from './Overlap';
@@ -15,7 +19,7 @@ describe('Overlap', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-overlap');
     });
-    it('renders an additional class name', () => {
+    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');

package/dist/Overlap/index.d.ts

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

package/dist/Overlap/index.js

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

package/dist/Page/Page.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type PageProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-page--docs Page docs at Amsterdam Design System}
+ */
+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,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-page--docs Page docs at Amsterdam Design System}
+ */
+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,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import '@testing-library/jest-dom';

package/dist/{MegaMenu/MegaMenu.test.js → Page/Page.test.js}

@@ -1,28 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { render } from '@testing-library/react';
 import { createRef } from 'react';
-import { MegaMenu } from './MegaMenu';
+import { Page } from './Page';
 import '@testing-library/jest-dom';
-describe('Mega menu', () => {
+describe('Page', () => {
     it('renders', () => {
-        const { container } = render(_jsx(MegaMenu, {}));
+        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(MegaMenu, {}));
+        const { container } = render(_jsx(Page, {}));
         const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('ams-mega-menu');
+        expect(component).toHaveClass('ams-page');
     });
-    it('renders an additional class name', () => {
-        const { container } = render(_jsx(MegaMenu, { className: "extra" }));
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(Page, { className: "extra" }));
         const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('ams-mega-menu extra');
+        expect(component).toHaveClass('ams-page extra');
     });
     it('supports ForwardRef in React', () => {
         const ref = createRef();
-        const { container } = render(_jsx(MegaMenu, { ref: ref }));
+        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,6 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+export { Page } from './Page';
+export type { PageProps } from './Page';

package/dist/Page/index.js

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

package/dist/{Footer/Footer.d.ts → PageFooter/PageFooter.d.ts}

@@ -3,8 +3,11 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type FooterProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
-export declare const Footer: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+export type PageFooterProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-page-footer--docs Page Footer docs at Amsterdam Design System}
+ */
+export declare const PageFooter: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLElement>> & {
     Menu: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {

package/dist/PageFooter/PageFooter.js

@@ -0,0 +1,20 @@
+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';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-page-footer--docs Page Footer docs at Amsterdam Design System}
+ */
+export const PageFooter = Object.assign(PageFooterRoot, {
+    Menu: PageFooterMenu,
+    MenuLink: PageFooterMenuLink,
+    Spotlight: PageFooterSpotlight,
+});

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

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

package/dist/{Footer/Footer.test.js → PageFooter/PageFooter.test.js}

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

package/dist/{Footer/FooterMenu.d.ts → PageFooter/PageFooterMenu.d.ts}

@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type FooterMenuProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
-export declare const FooterMenu: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
+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,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import '@testing-library/jest-dom';

package/dist/{Footer/FooterMenu.test.js → PageFooter/PageFooterMenu.test.js}

@@ -1,11 +1,15 @@
 import { jsx as _jsx, 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 { Footer } from './Footer';
+import { PageFooter } from './PageFooter';
 import '@testing-library/jest-dom';
-describe('Footer menu', () => {
+describe('Page 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" })] }));
+        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();
@@ -13,19 +17,19 @@ describe('Footer menu', () => {
         expect(children).toHaveLength(2);
     });
     it('renders a design system BEM class name', () => {
-        render(_jsx(Footer.Menu, {}));
+        render(_jsx(PageFooter.Menu, {}));
         const component = screen.getByRole('list');
-        expect(component).toHaveClass('ams-footer__menu');
+        expect(component).toHaveClass('ams-page-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" }) }));
+        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 additional class name', () => {
-        render(_jsx(Footer.Menu, { className: "intro" }));
+    it('renders an extra class name', () => {
+        render(_jsx(PageFooter.Menu, { className: "intro" }));
         const component = screen.getByRole('list');
-        expect(component).toHaveClass('ams-footer__menu intro');
+        expect(component).toHaveClass('ams-page-footer__menu intro');
     });
 });

package/dist/{Footer/FooterMenuLink.d.ts → PageFooter/PageFooterMenuLink.d.ts}

@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 import type { AnchorHTMLAttributes, PropsWithChildren } from 'react';
-export type FooterMenuLinkProps = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
-export declare const FooterMenuLink: import("react").ForwardRefExoticComponent<AnchorHTMLAttributes<HTMLAnchorElement> & {
+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,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import '@testing-library/jest-dom';

package/dist/{Footer/FooterMenuLink.test.js → PageFooter/PageFooterMenuLink.test.js}

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

package/dist/{Footer/FooterSpotlight.d.ts → PageFooter/PageFooterSpotlight.d.ts}

@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
-export type FooterSpotlightProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
-export declare const FooterSpotlight: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+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,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import '@testing-library/jest-dom';

package/dist/{MegaMenu/MegaMenuListCategory.test.js → PageFooter/PageFooterSpotlight.test.js}

@@ -1,28 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { render } from '@testing-library/react';
 import { createRef } from 'react';
-import { MegaMenuListCategory } from './MegaMenuListCategory';
+import { PageFooter } from './PageFooter';
 import '@testing-library/jest-dom';
-describe('Mega menu category', () => {
+describe('Page Footer Spotlight', () => {
     it('renders', () => {
-        const { container } = render(_jsx(MegaMenuListCategory, {}));
+        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(MegaMenuListCategory, {}));
+        const { container } = render(_jsx(PageFooter.Spotlight, {}));
         const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('ams-mega-menu__list-category');
+        expect(component).toHaveClass('ams-page-footer__spotlight');
     });
-    it('renders an additional class name', () => {
-        const { container } = render(_jsx(MegaMenuListCategory, { className: "extra" }));
+    it('renders an extra class name', () => {
+        const { container } = render(_jsx(PageFooter.Spotlight, { className: "extra" }));
         const component = container.querySelector(':only-child');
-        expect(component).toHaveClass('ams-mega-menu__list-category extra');
+        expect(component).toHaveClass('ams-page-footer__spotlight extra');
     });
     it('supports ForwardRef in React', () => {
         const ref = createRef();
-        const { container } = render(_jsx(MegaMenuListCategory, { ref: ref }));
+        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,9 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+export { PageFooter } from './PageFooter';
+export type { PageFooterProps } from './PageFooter';
+export type { PageFooterMenuProps } from './PageFooterMenu';
+export type { PageFooterMenuLinkProps } from './PageFooterMenuLink';
+export type { PageFooterSpotlightProps } from './PageFooterSpotlight';