From b21c3e8717d422de0c44ce3cc37de56ff32eea0e Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Tue, 28 Nov 2023 14:41:45 +0100
Subject: [PATCH] Allow end-alignment on page menu

---
 packages/css/src/page-menu/page-menu.scss     |  4 ++
 packages/react/src/PageMenu/PageMenu.test.tsx | 18 ++++-----
 packages/react/src/PageMenu/PageMenu.tsx      | 16 ++++++--
 .../src/PageMenu/PageMenu.docs.mdx            | 14 ++++++-
 .../src/PageMenu/PageMenu.stories.tsx         | 37 +++++++++++++++++++
 5 files changed, 73 insertions(+), 16 deletions(-)

diff --git a/packages/css/src/page-menu/page-menu.scss b/packages/css/src/page-menu/page-menu.scss
index 9781286a1a..0c609584c6 100644
--- a/packages/css/src/page-menu/page-menu.scss
+++ b/packages/css/src/page-menu/page-menu.scss
@@ -35,6 +35,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;
diff --git a/packages/react/src/PageMenu/PageMenu.test.tsx b/packages/react/src/PageMenu/PageMenu.test.tsx
index 4b232dc215..d198d4df35 100644
--- a/packages/react/src/PageMenu/PageMenu.test.tsx
+++ b/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')
   })
 })
diff --git a/packages/react/src/PageMenu/PageMenu.tsx b/packages/react/src/PageMenu/PageMenu.tsx
index e21067df5f..55377fa152 100644
--- a/packages/react/src/PageMenu/PageMenu.tsx
+++ b/packages/react/src/PageMenu/PageMenu.tsx
@@ -16,7 +16,13 @@ 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
@@ -24,9 +30,13 @@ interface PageMenuComponent extends ForwardRefExoticComponent<PageMenuProps & Re
 }
 
 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>
     )
diff --git a/storybook/storybook-react/src/PageMenu/PageMenu.docs.mdx b/storybook/storybook-react/src/PageMenu/PageMenu.docs.mdx
index a4e440a733..894abfa331 100644
--- a/storybook/storybook-react/src/PageMenu/PageMenu.docs.mdx
+++ b/storybook/storybook-react/src/PageMenu/PageMenu.docs.mdx
@@ -1,4 +1,4 @@
-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";
 
@@ -6,6 +6,16 @@ import README from "../../../../packages/css/src/page-menu/README.md?raw";
 
 <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} />
diff --git a/storybook/storybook-react/src/PageMenu/PageMenu.stories.tsx b/storybook/storybook-react/src/PageMenu/PageMenu.stories.tsx
index 434c88c0bf..b0b98d77b6 100644
--- a/storybook/storybook-react/src/PageMenu/PageMenu.stories.tsx
+++ b/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>
+  ),
+}