Multi-level Navbar Menu

changelog.md

@@ -7,6 +7,8 @@ SciReactUI Changelog
 ### Added
 - New *Progress* component based on Diamond Light added.
 - New *ProgressDelayed* component so that the progress isn't shown at all when it's a small wait.
+- *NavMenu* component added for creating dropdown menus in the NavBar
+  - *NavMenuLink* component extends NavLink to work in the NavMenu
 
 ### Fixed
 - Hovering over a slot caused a popup with the slot title in. This has been removed.

package.json

@@ -67,6 +67,7 @@
     "@storybook/test": "^8.4.4",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^20.19.21",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",

src/components/navigation/NavMenu.stories.tsx

@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { NavMenu, NavMenuLink } from "./NavMenu";
+import { Button, Divider, Typography } from "@mui/material";
+import { Autorenew } from "@mui/icons-material";
+import { MockLink } from "../../utils/MockLink";
+
+const meta: Meta<typeof NavMenu> = {
+  title: "Components/Navigation/NavMenu",
+  component: NavMenu,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A dropdown menu for the Navbar. Can contain multiple `NavMenuLink`s that can be navigated between using the mouse or the keyboard.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const BasicMenu: Story = {
+  args: {
+    label: "NavMenu",
+    children: (
+      <>
+        <NavMenuLink href="#Link1">First Link</NavMenuLink>
+        <NavMenuLink href="#Link2">Second Link</NavMenuLink>
+        <NavMenuLink href="#Link3">Third Link</NavMenuLink>
+      </>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A `NavMenu` populated with `NavMenuLink`s. The menu text is set using `label: "NavMenu"`.',
+      },
+    },
+  },
+};
+
+export const RouterMenu: Story = {
+  args: {
+    label: "NavMenu",
+    children: (
+      <>
+        <NavMenuLink to="/home/first" linkComponent={MockLink}>
+          First Route
+        </NavMenuLink>
+        <NavMenuLink to="/home/second" linkComponent={MockLink}>
+          Second Route
+        </NavMenuLink>
+      </>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Like `NavLink`s, `NavMenuLink`s can use routing links too.",
+      },
+    },
+  },
+};
+
+export const CustomChildren: Story = {
+  args: {
+    label: "NavMenu",
+    children: (
+      <>
+        <Typography
+          sx={{
+            padding: "4px 4px 4px",
+            color: "white",
+          }}
+        >
+          Section Header
+        </Typography>
+        <Divider />
+        <Button sx={{ color: "white" }} startIcon={<Autorenew />}>
+          Button
+        </Button>
+      </>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "A `NavMenu` may contain components other than `NavMenuLink`s. This one has a section header (made using a `Typography` and a `Divider`) and a button.",
+      },
+    },
+  },
+};

src/components/navigation/NavMenu.test.tsx

@@ -0,0 +1,128 @@
+import { screen, act } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import { renderWithProviders } from "../../__test-utils__/helpers";
+import { NavMenu, NavMenuLink } from "./NavMenu";
+import { Link, MemoryRouter, Route, Routes } from "react-router-dom";
+const user = userEvent.setup();
+
+describe("NavMenu", () => {
+  it("should render with a label", () => {
+    renderWithProviders(<NavMenu label="Navmenu" />);
+    expect(screen.getByText("Navmenu")).toBeInTheDocument();
+  });
+
+  it("should open when clicked", async () => {
+    renderWithProviders(
+      <NavMenu label="Navmenu">
+        <NavMenuLink href="#test">Link 1</NavMenuLink>
+        <NavMenuLink href="#test2">Link 2</NavMenuLink>
+      </NavMenu>,
+    );
+    const menuButton = screen.getByRole("button");
+    expect(screen.queryByText("Link 1")).not.toBeInTheDocument();
+    expect(menuButton).toHaveAttribute("aria-expanded", "false");
+    await user.click(menuButton);
+    expect(screen.getByText("Link 1")).toBeVisible();
+    expect(screen.getByText("Link 2")).toBeVisible();
+    expect(menuButton).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("should open when selected using keyboard", async () => {
+    renderWithProviders(
+      <NavMenu label="Navmenu">
+        <NavMenuLink href="">Link 1</NavMenuLink>
+      </NavMenu>,
+    );
+
+    expect(screen.queryByText("Link 1")).not.toBeInTheDocument();
+    await user.keyboard("[Tab][Enter]");
+    expect(screen.getByText("Link 1")).toBeVisible();
+  });
+
+  it("should be possible to access the contents using the keyboard", async () => {
+    renderWithProviders(
+      <NavMenu label="Navmenu">
+        <NavMenuLink href="">Link 1</NavMenuLink>
+        <NavMenuLink href="">Link 2</NavMenuLink>
+      </NavMenu>,
+    );
+
+    await user.keyboard("[Tab][Enter][ArrowDown]");
+    const link1 = screen.getByRole("menuitem", { name: "Link 1" });
+    expect(document.activeElement).toBe(link1);
+    await user.keyboard("[ArrowDown]");
+    const link2 = screen.getByRole("menuitem", { name: "Link 2" });
+    expect(document.activeElement).toBe(link2);
+  });
+
+  it("should render with accessibility props", async () => {
+    renderWithProviders(<NavMenu label="Navmenu" />);
+
+    const menuButton = screen.getByRole("button");
+    const buttonControlsId = menuButton.getAttribute("aria-controls");
+    expect(menuButton).toHaveAttribute("aria-haspopup", "menu");
+    await user.click(menuButton);
+    const menuId = screen.getByRole("presentation").getAttribute("id");
+    expect(buttonControlsId).toEqual(menuId);
+  });
+});
+
+describe("NavMenuLink", () => {
+  it("should function as a link", () => {
+    renderWithProviders(<NavMenuLink href="/test">Link</NavMenuLink>);
+    expect(screen.getByRole("menuitem")).toHaveAttribute("href", "/test");
+  });
+
+  it("should accept router link props", () => {
+    renderWithProviders(
+      <MemoryRouter>
+        <NavMenuLink to="/test" linkComponent={Link}>
+          Link
+        </NavMenuLink>
+      </MemoryRouter>,
+    );
+    expect(screen.getByRole("menuitem")).toHaveAttribute("href", "/test");
+  });
+
+  it("should use routing when clicked", async () => {
+    renderWithProviders(
+      <MemoryRouter>
+        <Routes>
+          <Route
+            path="/"
+            element={
+              <NavMenuLink to="/test" linkComponent={Link}>
+                Link
+              </NavMenuLink>
+            }
+          />
+          <Route path="/test" element={<p>Second page</p>} />
+        </Routes>
+      </MemoryRouter>,
+    );
+    await user.click(screen.getByRole("menuitem"));
+    expect(screen.getByText("Second page")).toBeInTheDocument();
+  });
+
+  it("should use routing on enter key press", async () => {
+    renderWithProviders(
+      <MemoryRouter>
+        <Routes>
+          <Route
+            path="/"
+            element={
+              <NavMenuLink to="/test" linkComponent={Link}>
+                Link
+              </NavMenuLink>
+            }
+          />
+          <Route path="/test" element={<p>Second page</p>} />
+        </Routes>
+      </MemoryRouter>,
+    );
+    const link = screen.getByRole("menuitem");
+    act(() => link.focus());
+    await user.keyboard("[enter]");
+    expect(screen.getByText("Second page")).toBeInTheDocument();
+  });
+});