Multi-level Navbar Menu

changelog.md

@@ -1,105 +1,109 @@
-SciReactUI Changelog
-====================
+# SciReactUI Changelog
 
-[v0.3.1alpha] - 2025-?-?
-------------------------
+## [v0.3.1alpha] - 2025-?-?
 
 ### 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.
+
+- 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.
 - Stopped Bar-based components (e.g. Navbar, Footer) from expanding when a parent component has a set height
-- The base *Bar* component was not being exported.
 
 ### Changed
-- Remove first-child css selector as it causes problems with server-side rendering.
 
+- Remove first-child css selector as it causes problems with server-side rendering.
 
-[v0.3.0] - 2025-09-04
----------------------
+## [v0.3.0] - 2025-09-04
 
 ### Added
-- *Logo* component, to easily add the theme logo to anywhere
-- *ImageColourSchemeSwitch* takes a parameter *interchange* to swap image based on the opposite 
-of the colour scheme switch - for use with alternative background colours.
-- *BaseBar* component is the base for all the bars used in SciReactUI. Can also be used itself.
-- *AppBar* is a bar to show the main title of your App.
+
+- _Logo_ component, to easily add the theme logo to anywhere
+- _ImageColourSchemeSwitch_ takes a parameter _interchange_ to swap image based on the opposite
+  of the colour scheme switch - for use with alternative background colours.
+- _BaseBar_ component is the base for all the bars used in SciReactUI. Can also be used itself.
+- _AppBar_ is a bar to show the main title of your App.
 - JsonForms renderers have been added for use with readonly mode in JsonForms.
 - Support for TIFFs in ScrollableImages component
 
 ### Fixed
+
 - Themes were not inheriting all details from their parents.
 - Fixed alt text on logos.
 - Fixed Footer was not adhering to Container width. (Can be turned off with containerWidth setting)
 - Fixed bug in Footer Links where alignment was out on first link.
 - Ordering of StoryBook now more intuitive.
 
 ### Changed
-- Breaking change: The use of *color* has been replaced with *colour* throughout. 
-  - *ImageColorSchemeSwitch*, *ImageColorSchemeSwitchType* and *ImageColorSchemeSwitchProps* 
-  renamed to *ImageColourSchemeSwitch*, ImageColourSchemeSwitchType and ImageColourSchemeSwitchProps respectively 
-  - *User* component color prop renamed to colour.
-- RootProps on *Breadcrumbs* has been removed. There props can be passed in directly. 
-e.g. `<Breadcrumbs sx={{color:"red"}} />` instead of `<Breadcrumbs rootProps={{sx: { color: "red" } }}/>` 
 
+- Breaking change: The use of _color_ has been replaced with _colour_ throughout.
+  - _ImageColorSchemeSwitch_, _ImageColorSchemeSwitchType_ and _ImageColorSchemeSwitchProps_
+    renamed to _ImageColourSchemeSwitch_, ImageColourSchemeSwitchType and ImageColourSchemeSwitchProps respectively
+  - _User_ component color prop renamed to colour.
+- RootProps on _Breadcrumbs_ has been removed. There props can be passed in directly.
+  e.g. `<Breadcrumbs sx={{color:"red"}} />` instead of `<Breadcrumbs rootProps={{sx: { color: "red" } }}/>`
 
-[v0.2.0] - 2025-06-11
----------------------
+## [v0.2.0] - 2025-06-11
 
 ### Fixed
+
 - Styles added to Navbar and Footer incorrectly remove built in styles.
 - Logo not appearing when no dark src set in dark mode.
 
 ### Changed
-- Breadcrumbs component takes optional linkComponent prop for page routing. 
+
+- Breadcrumbs component takes optional linkComponent prop for page routing.
 - Navbar, NavLink and FooterLink will use routing library for links if provided with linkComponent and to props.
 - Navbar uses slots for positioning elements. Breaking change: elements must now use rightSlot for positioning to the far right.
 - User can take additional menu items through the menuItems prop.
 - Footer uses slots for positioning elements. Breaking change: elements must now use rightSlot for positioning to the far right.
 
 ### Added
-- ScrollableImages component to scroll through multiple images.
 
+- ScrollableImages component to scroll through multiple images.
 
-[v0.1.0] - 2025-04-10
----------------------
+## [v0.1.0] - 2025-04-10
 
 ### Added
+
 - Breadcrumbs take object array (CustomLink) for total control over names and links.
 
 ### Fixed
+
 - Stopped flicker between colour modes when starting an app in dark mode.
 - Footer links stopped from moving on hover when only showing links.
 - Footer links now correctly center horizontally, if needed.
 - NavBar positions items correctly in multiple screen widths.
 - User hides id and name when on very small screens
 
 ### Changed
-- Footer links now align with copyright when there is no logo.
 
+- Footer links now align with copyright when there is no logo.
 
-[v0.0.3] - 2025-01-27
---------------------
+## [v0.0.3] - 2025-01-27
 
 ### Fixed
+
 - Moved unnecessary build dependencies to devDependencies
 
 ### Changed
-- Return key now submits VisitInput (but that can be turned off).
 
+- Return key now submits VisitInput (but that can be turned off).
 
-[v0.0.2] - 2025-01-20
---------------------
+## [v0.0.2] - 2025-01-20
 
 ### Fixed
+
 - Not importing correctly in some external projects.
 
+## [v0.0.1] - 2024-12-19
 
-[v0.0.1] - 2024-12-19
---------------------
 ### Added
+
 - Components added:
   - Breadcrumbs - Highlight position of page in hierarchy
   - ColourSchemeButton - Switch between light and dark schemes.
@@ -117,15 +121,16 @@ e.g. `<Breadcrumbs sx={{color:"red"}} />` instead of `<Breadcrumbs rootProps={{s
   - Diamond
   - Generic
 
-
-[v0.0.0] - 2024-06-04
---------------------
+## [v0.0.0] - 2024-06-04
 
 ### Added
-- 
+
+-
 
 ### Fixed
-- 
+
+-
 
 ### Changed
--
+
+-

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.",
+      },
+    },
+  },
+};