feat: Restore wrapping of items in Page Menu (#1145)

Amsterdam · Mar 27, 2024 · 4068e52 · 4068e52
1 parent 848223b
commit 4068e52
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 14 deletions.
diff --git a/packages/css/src/components/page-menu/page-menu.scss b/packages/css/src/components/page-menu/page-menu.scss
@@ -20,6 +20,7 @@
   column-gap: var(--ams-page-menu-column-gap);
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   list-style: none;
   row-gap: var(--ams-page-menu-row-gap);
 
@@ -30,6 +31,10 @@
   justify-content: end;
 }
 
+.ams-page-menu--no-wrap {
+  flex-wrap: nowrap;
+}
+
 @mixin page-menu-item {
   color: var(--ams-page-menu-item-color);
   display: inline-flex;

diff --git a/packages/react/src/PageMenu/PageMenu.tsx b/packages/react/src/PageMenu/PageMenu.tsx
@@ -14,11 +14,27 @@ export type PageMenuProps = {
    * If the menu itself aligns to the end of its container, you should set this to `true`.
    */
   alignEnd?: boolean
+  /**
+   * Whether menu items should wrap if they don’t fit on a single row.
+   */
+  wrap?: boolean
 } & PropsWithChildren<HTMLAttributes<HTMLUListElement>>
 
 const PageMenuRoot = forwardRef(
-  ({ alignEnd, children, className, ...restProps }: PageMenuProps, ref: ForwardedRef<HTMLUListElement>) => (
-    <ul {...restProps} className={clsx('ams-page-menu', alignEnd && `ams-page-menu--align-end`, className)} ref={ref}>
+  (
+    { alignEnd, children, className, wrap = true, ...restProps }: PageMenuProps,
+    ref: ForwardedRef<HTMLUListElement>,
+  ) => (
+    <ul
+      {...restProps}
+      className={clsx(
+        'ams-page-menu',
+        alignEnd && `ams-page-menu--align-end`,
+        !wrap && `ams-page-menu--no-wrap`,
+        className,
+      )}
+      ref={ref}
+    >
       {children}
     </ul>
   ),

diff --git a/storybook/src/components/Header/Header.docs.mdx b/storybook/src/components/Header/Header.docs.mdx
@@ -22,6 +22,9 @@ import README from "../../../../packages/css/src/components/header/README.md?raw
 
 ## With links
 
+Use a [Page Menu](?path=/docs/components-navigation-page-menu--docs) to add links.
+A Page Menu in the Header should not wrap.
+
 <Canvas of={HeaderStories.WithLinks} />
 
 ## With links and menu

diff --git a/storybook/src/components/Header/Header.stories.tsx b/storybook/src/components/Header/Header.stories.tsx
@@ -43,7 +43,7 @@ export const WithTitle: Story = {
 export const WithLinks: Story = {
   args: {
     links: (
-      <PageMenu alignEnd>
+      <PageMenu alignEnd wrap={false}>
         <PageMenu.Link href="#">Contact</PageMenu.Link>
         <PageMenu.Link href="#">Mijn Amsterdam</PageMenu.Link>
         <PageMenu.Link href="#" icon={SearchIcon}>
@@ -64,7 +64,7 @@ export const WithLinksAndMenu: Story = {
   args: {
     menu: <button className="ams-header__menu-button">Menu</button>,
     links: (
-      <PageMenu alignEnd>
+      <PageMenu alignEnd wrap={false}>
         <PageMenu.Link href="#">Contact</PageMenu.Link>
         <PageMenu.Link href="#">Mijn Amsterdam</PageMenu.Link>
         <PageMenu.Link href="#" icon={SearchIcon}>
@@ -86,7 +86,7 @@ export const WithTitleLinksAndMenu: Story = {
   args: {
     title: 'Aan de Amsterdamse grachten',
     links: (
-      <PageMenu alignEnd>
+      <PageMenu alignEnd wrap={false}>
         <PageMenu.Link href="#">Contact</PageMenu.Link>
         <PageMenu.Link href="#">Mijn Amsterdam</PageMenu.Link>
         <PageMenu.Link href="#" icon={SearchIcon}>

diff --git a/storybook/src/components/PageMenu/PageMenu.docs.mdx b/storybook/src/components/PageMenu/PageMenu.docs.mdx
@@ -1,20 +1,27 @@
-import { Canvas, Markdown, Meta, Primary } from "@storybook/blocks";
+import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks";
 import * as PageMenuStories from "./PageMenu.stories.tsx";
 import README from "../../../../packages/css/src/components/page-menu/README.md?raw";
 
 <Meta of={PageMenuStories} />
 
 <Markdown>{README}</Markdown>
 
+<Primary />
+
+<Controls />
+
 ## Examples
 
-### Default
+### Alignment
 
-<Primary />
+In the [Header](?path=/docs/components-containers-header--docs), the menu aligns to the end of the line.
+
+<Canvas of={PageMenuStories.Alignment} />
 
-## Right Alignment
+### Wrapping
 
-It may happen that all menu items do not fit on a single line, for example, in a medium-width window or with zoomed-in text.
-If the menu itself is right-aligned, as is often the case in headers, then you should also right-align the items within it.
+If all menu items do not fit on a single line, e.g. on a narrow screen or with zoomed-in text, they wrap to new lines.
+This is often useful in the [Footer](?path=/docs/components-containers-footer--docs).
+The Header has its own responsive behaviour; its Page Menu should be configured not to wrap.
 
-<Canvas of={PageMenuStories.AlignEnd} />
+<Canvas of={PageMenuStories.Wrapping} />
diff --git a/storybook/src/components/PageMenu/PageMenu.stories.tsx b/storybook/src/components/PageMenu/PageMenu.stories.tsx
@@ -4,12 +4,24 @@
  */
 
 import { PageMenu } from '@amsterdam/design-system-react'
-import { LoginIcon } from '@amsterdam/design-system-react-icons'
+import { LoginIcon, SearchIcon } from '@amsterdam/design-system-react-icons'
 import { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
   title: 'Components/Navigation/Page Menu',
   component: PageMenu,
+  args: {
+    alignEnd: false,
+    wrap: true,
+  },
+  argTypes: {
+    alignEnd: {
+      control: 'boolean',
+    },
+    wrap: {
+      control: 'boolean',
+    },
+  },
 } satisfies Meta<typeof PageMenu>
 
 export default meta
@@ -29,9 +41,26 @@ export const Default: Story = {
   },
 }
 
-export const AlignEnd: Story = {
+export const Alignment: Story = {
   args: {
     alignEnd: true,
+    children: [
+      <PageMenu.Link href="#" key={1}>
+        Contact
+      </PageMenu.Link>,
+      <PageMenu.Link href="#" key={2}>
+        Mijn Amsterdam
+      </PageMenu.Link>,
+      <PageMenu.Link href="#" icon={SearchIcon} key={3}>
+        Zoeken
+      </PageMenu.Link>,
+    ],
+    wrap: false,
+  },
+}
+
+export const Wrapping: Story = {
+  args: {
     children: [
       <PageMenu.Link href="#" key={1}>
         Onderzoeken