Add routing library support to FooterLink, NavLink & Navbar

Author: VictoriaBeilsten-Edmands

changelog.md

@@ -13,6 +13,7 @@ SciReactUI Changelog
 
 ### Changed
 - 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.
 
 [v0.1.0] - 2025-04-10
 ---------------------

readme.md

@@ -32,8 +32,34 @@ root.render(
 
 There are currently two themes, `GenericTheme` or `DiamondTheme`, but you can - and should - adapt your own.
 
-The Breadcrumbs supports either static links or the use of a routing library.
-To use static links, omit the linkComponent prop and Breadcrumbs will use a Link component with standard href attributes.
+Navigation components support either static links (with href) or the use of a routing library (with linkComponent and to).
+For NavLink and FooterLink, if both linkComponent and to are provided, it will use linkComponent. If not, it falls back to using href.
+
+An example with static links
+
+```js
+<Navbar>
+  <NavLinks>
+    <NavLink href="/about">About</NavLink>
+  </NavLinks>
+</Navbar>
+```
+
+An example using react-router:
+
+```js
+import { NavLink } from "react-router-dom";
+
+<Navbar linkComponent={NavLink}>
+  <NavLinks>
+    <NavLink linkComponent={NavLink} to="/about">
+      About
+    </NavLink>
+  </NavLinks>
+</Navbar>
+```
+
+For Breadcrumbs, to use static links, omit the linkComponent prop and Breadcrumbs will use a Link component with standard href attributes.
 
 ```js
 import { Breadcrumbs } from "@diamondlightsource/sci-react-ui";
@@ -71,11 +97,11 @@ root.render(
 Then pass your library's corresponding Link component to Breadcrumbs in the linkComponent prop, for example:
 
 ```js
-import { Link } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 import { Breadcrumbs } from "@diamondlightsource/sci-react-ui";
 
 function App() {
-  return <Breadcrumbs path={window.location.pathname} linkComponent={Link} />;
+  return <Breadcrumbs path={window.location.pathname} linkComponent={NavLink} />;
 }
 export default App;
 ```

src/components/navigation/Breadcrumbs.stories.tsx

@@ -1,31 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { Breadcrumbs } from "./Breadcrumbs";
-import { Link as MuiLink } from "@mui/material";
-
-interface MockLinkProps extends React.HTMLAttributes<HTMLAnchorElement> {
-  to: string;
-  children: React.ReactNode;
-  [key: string]: unknown;
-}
-
-const MockLink: React.FC<MockLinkProps> = ({ to, children, ...props }) => {
-  const handleClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-    console.log(`Mock navigation to: ${to}`);
-  };
-
-  return (
-    <MuiLink
-      href={typeof to === "string" ? to : "#"}
-      onClick={handleClick}
-      underline="hover"
-      color="inherit"
-      {...props}
-    >
-      {children}
-    </MuiLink>
-  );
-};
+import { MockLink } from "../../utils/MockLink";
 
 const meta: Meta<typeof Breadcrumbs> = {
   title: "SciReactUI/Navigation/Breadcrumbs",

src/components/navigation/Footer.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react/*";
 import { Footer, FooterLink, FooterLinks } from "./Footer";
+import { MockLink } from "../../utils/MockLink";
 
 const meta: Meta<typeof Footer> = {
   title: "SciReactUI/Navigation/Footer",
@@ -11,7 +12,24 @@ const meta: Meta<typeof Footer> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const footerLinks = [
+const routerFooterLinks = [
+  <FooterLinks key="footer-links">
+    <FooterLink to="home/TheMoon" key="the-moon" linkComponent={MockLink}>
+      The Moon
+    </FooterLink>
+    <FooterLink to="home/Phobos" key="phobos" linkComponent={MockLink}>
+      Phobos
+    </FooterLink>
+    <FooterLink to="home/Ganymede" key="ganymede" linkComponent={MockLink}>
+      Ganymede
+    </FooterLink>
+    <FooterLink to="home/Titan" key="titan" linkComponent={MockLink}>
+      Titan
+    </FooterLink>
+  </FooterLinks>,
+];
+
+const staticFooterLinks = [
   <FooterLinks key="footer-links">
     <FooterLink href="#TheMoon" key="the-moon">
       The Moon
@@ -32,7 +50,15 @@ export const All: Story = {
   args: {
     logo: "theme",
     copyright: "Company",
-    children: footerLinks,
+    children: staticFooterLinks,
+  },
+};
+
+export const RouterLinks: Story = {
+  args: {
+    logo: "theme",
+    copyright: "Company",
+    children: routerFooterLinks,
   },
 };
 
@@ -59,13 +85,13 @@ export const CopyrightAndLogo: Story = {
 export const LinksAndCopyright: Story = {
   args: {
     copyright: "Company",
-    children: footerLinks,
+    children: staticFooterLinks,
   },
 };
 
 export const LinksOnly: Story = {
   args: {
-    children: footerLinks,
+    children: staticFooterLinks,
   },
 };
 

src/components/navigation/Footer.test.tsx

@@ -16,6 +16,7 @@ import "@testing-library/jest-dom";
 import dlsLogo from "../public/generic/logo-short.svg";
 import { Footer, FooterLink, FooterLinks } from "./Footer";
 import { renderWithProviders } from "../../__test-utils__/helpers";
+import { MemoryRouter, Link } from "react-router-dom";
 
 describe("Footer logo and copyright", () => {
   test("Should render", async () => {
@@ -99,3 +100,88 @@ describe("Footer Links", () => {
     expect(link).toHaveAttribute("href", "link-two-href");
   });
 });
+
+test("Should render FooterLink with linkComponent and 'to' prop", async () => {
+  renderWithProviders(
+    <MemoryRouter initialEntries={["/"]}>
+      <Footer>
+        <FooterLinks>
+          <FooterLink linkComponent={Link} to="/about">
+            About
+          </FooterLink>
+        </FooterLinks>
+      </Footer>
+    </MemoryRouter>,
+  );
+
+  const link = await screen.findByText("About");
+  expect(link).toBeInTheDocument();
+  expect(link).toHaveAttribute("href", "/about");
+});
+
+test("Should not render a valid link when only 'to' is provided without linkComponent", () => {
+  renderWithProviders(
+    <Footer>
+      <FooterLinks>
+        <FooterLink to="/about">About</FooterLink>
+      </FooterLinks>
+    </Footer>,
+  );
+
+  const link = screen.getByText("About");
+  expect(link).toBeInTheDocument();
+  expect(link).not.toHaveAttribute("href", "/about");
+});
+
+test("Should fall back to href when linkComponent is provided without 'to'", () => {
+  renderWithProviders(
+    <MemoryRouter>
+      <Footer>
+        <FooterLinks>
+          <FooterLink linkComponent={Link} href="/about">
+            About
+          </FooterLink>
+        </FooterLinks>
+      </Footer>
+    </MemoryRouter>,
+  );
+
+  const link = screen.getByText("About");
+  expect(link).toBeInTheDocument();
+  expect(link.tagName).toBe("A");
+  expect(link).toHaveAttribute("href", "/about");
+});
+
+test("Should use href when both 'href' and 'to' are provided without linkComponent", () => {
+  renderWithProviders(
+    <Footer>
+      <FooterLinks>
+        <FooterLink href="/about" to="/somewhereElse">
+          About
+        </FooterLink>
+      </FooterLinks>
+    </Footer>,
+  );
+
+  const link = screen.getByText("About");
+  expect(link).toBeInTheDocument();
+  expect(link).toHaveAttribute("href", "/about");
+});
+
+test("Should use 'to' when both 'href' and 'to' are provided with linkComponent", () => {
+  renderWithProviders(
+    <MemoryRouter>
+      <Footer>
+        <FooterLinks>
+          <FooterLink linkComponent={Link} href="/somewhereElse" to="/about">
+            About
+          </FooterLink>
+        </FooterLinks>
+      </Footer>
+    </MemoryRouter>,
+  );
+
+  const link = screen.getByText("About");
+  expect(link).toBeInTheDocument();
+  expect(link).toHaveAttribute("href", "/about");
+});

src/components/navigation/Footer.tsx

@@ -42,15 +42,36 @@ const FooterLinks = ({ children, ...props }: FooterLinksProps) => {
   );
 };
 
-const FooterLink = ({ children, ...props }: LinkProps) => {
+interface FooterLinkProps extends LinkProps {
+  children: React.ReactNode;
+  linkComponent?: React.ElementType;
+  to?: string;
+  href?: string;
+}
+
+const FooterLink = ({
+  children,
+  linkComponent,
+  to,
+  href,
+  ...props
+}: FooterLinkProps) => {
   const theme = useTheme();
 
+  const shouldUseLinkComponent = linkComponent && to;
+
+  const linkProps = shouldUseLinkComponent
+    ? { component: linkComponent, to }
+    : { href };
+
   return (
     <Link
+      {...linkProps}
       sx={{
         "&:hover": {
           color: theme.vars.palette.secondary.main,
           borderBottom: "solid 4px",
+          textDecoration: "none",
         },
         textDecoration: "none",
         color: theme.palette.primary.contrastText,

src/components/navigation/Navbar.stories.tsx

@@ -6,6 +6,7 @@ import logoImageDark from "../../public/generic/logo-dark.svg";
 import logoImageLight from "../../public/generic/logo-light.svg";
 import { ColourSchemeButton } from "../controls/ColourSchemeButton";
 import { User } from "../controls/User";
+import { MockLink } from "../../utils/MockLink";
 
 const meta: Meta<typeof Navbar> = {
   title: "SciReactUI/Navigation/Navbar",
@@ -81,6 +82,21 @@ export const Links: Story = {
   },
 };
 
+export const RouterLinks: Story = {
+  args: {
+    children: (
+      <NavLinks key="links">
+        <NavLink to="/home/first" key="first" linkComponent={MockLink}>
+          First
+        </NavLink>
+        <NavLink to="/home/second" key="second" linkComponent={MockLink}>
+          Second
+        </NavLink>
+      </NavLinks>
+    ),
+  },
+};
+
 export const LinksAndUser: Story = {
   args: {
     children: [