feat: Allow end-alignment on page menu

packages/css/src/page-menu/page-menu.scss

@@ -33,6 +33,10 @@
   @include reset-list;
 }
 
+.amsterdam-page-menu--align-end {
+  justify-content: end;
+}
+
 @mixin page-menu-item {
   color: var(--amsterdam-page-menu-item-color);
   display: inline-flex;

packages/react/src/PageMenu/PageMenu.test.tsx

@@ -4,7 +4,7 @@ import { createRef } from 'react'
 import { PageMenu } from './PageMenu'
 import '@testing-library/jest-dom'
 
-describe('page menu', () => {
+describe('Page menu', () => {
   it('renders a page menu with children', () => {
     const { container } = render(
       <PageMenu>
@@ -15,11 +15,9 @@ describe('page menu', () => {
         <PageMenu.Button icon={MenuIcon}>Alle onderwerpen</PageMenu.Button>
       </PageMenu>,
     )
-
     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(3)
@@ -28,33 +26,31 @@ describe('page menu', () => {
 
   it('renders a design system BEM class name', () => {
     const { container } = render(<PageMenu />)
-
     const component = container.querySelector(':only-child')
-
     expect(component).toHaveClass('amsterdam-page-menu')
   })
 
+  it('renders a class name for end alignment', () => {
+    const { container } = render(<PageMenu alignEnd />)
+    const component = container.querySelector(':only-child')
+    expect(component).toHaveClass('amsterdam-page-menu--align-end')
+  })
+
   it('is able to pass a React ref', () => {
     const ref = createRef<HTMLElement>()
-
     const { container } = render(
       <PageMenu ref={ref}>
         <PageMenu.Link href="#">English</PageMenu.Link>
       </PageMenu>,
     )
-
     const component = container.querySelector(':only-child')
-
     expect(ref.current).toBe(component)
   })
 
   it('renders an additional class name', () => {
     const { container } = render(<PageMenu className="intro" />)
-
     const component = container.querySelector(':only-child')
-
     expect(component).toHaveClass('intro')
-
     expect(component).toHaveClass('amsterdam-page-menu')
   })
 })

packages/react/src/PageMenu/PageMenu.tsx

@@ -16,17 +16,27 @@ import {
 } from 'react'
 import { Icon } from '../Icon'
 
-type PageMenuProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>
+type PageMenuProps = {
+  /**
+   * Whether the page menu’s items align to its end.
+   * If the menu itself aligns to the end of its container, you should set this to `true`.
+   */
+  alignEnd?: boolean
+} & PropsWithChildren<HTMLAttributes<HTMLUListElement>>
 
 interface PageMenuComponent extends ForwardRefExoticComponent<PageMenuProps & RefAttributes<HTMLElement>> {
   Link: typeof PageMenuLink
   Button: typeof PageMenuButton
 }
 
 export const PageMenu = forwardRef(
-  ({ children, className, ...restProps }: PageMenuProps, ref: ForwardedRef<HTMLUListElement>) => {
+  ({ alignEnd, children, className, ...restProps }: PageMenuProps, ref: ForwardedRef<HTMLUListElement>) => {
     return (
-      <ul {...restProps} className={clsx('amsterdam-page-menu', className)} ref={ref}>
+      <ul
+        {...restProps}
+        className={clsx('amsterdam-page-menu', alignEnd && `amsterdam-page-menu--align-end`, className)}
+        ref={ref}
+      >
         {children}
       </ul>
     )

storybook/storybook-react/src/PageMenu/PageMenu.docs.mdx

@@ -1,11 +1,21 @@
-import { Controls, Markdown, Meta, Primary } from "@storybook/blocks";
+import { Canvas, Markdown, Meta, Primary } from "@storybook/blocks";
 import * as PageMenuStories from "./PageMenu.stories.tsx";
 import README from "../../../../packages/css/src/page-menu/README.md?raw";
 
 <Meta of={PageMenuStories} />
 
 <Markdown>{README}</Markdown>
 
+## Voorbeelden
+
+### Basis
+
 <Primary />
 
-<Controls />
+## Rechts uitlijnen
+
+Het kan gebeuren dat alle menu-items niet op 1 regel passen.
+Bijvoorbeeld op een middelbreed venster of met ingezoomde tekst.
+Als het menu zelf rechts uitgelijnd staat, zoals bijvoorbeeld in de header, dan moet je de items daarbinnen ook rechts uitlijnen.
+
+<Canvas of={PageMenuStories.AlignEnd} />

storybook/storybook-react/src/PageMenu/PageMenu.stories.tsx

@@ -32,3 +32,40 @@ export const Default: Story = {
     },
   },
 }
+
+export const AlignEnd: Story = {
+  args: {
+    alignEnd: true,
+  },
+  render: (args) => (
+    <PageMenu {...args}>
+      <PageMenu.Link href="#" key="onderzoeken">
+        Onderzoeken
+      </PageMenu.Link>
+      <PageMenu.Link href="#" key="bezoeken">
+        Bezoeken
+      </PageMenu.Link>
+      <PageMenu.Link href="#" key="archiveren">
+        Archiveren
+      </PageMenu.Link>
+      <PageMenu.Link href="#" key="nieuws">
+        Nieuws
+      </PageMenu.Link>
+      <PageMenu.Link href="#" key="themasites">
+        Themasites
+      </PageMenu.Link>
+      <PageMenu.Link href="#" key="onderwijs">
+        Onderwijs
+      </PageMenu.Link>
+      <PageMenu.Link href="#" key="steun-ons">
+        Steun ons
+      </PageMenu.Link>
+      <PageMenu.Link href="#" key="organisatie">
+        Organisatie
+      </PageMenu.Link>
+      <PageMenu.Link href="#" key="contact">
+        Contact
+      </PageMenu.Link>
+    </PageMenu>
+  ),
+}