Keep static link behaviour on Breadcrumbs when no linkComponent passed

Author: VictoriaBeilsten-Edmands

changelog.md

@@ -12,7 +12,7 @@ SciReactUI Changelog
 - Styles added to Navbar and Footer incorrectly remove built in styles.
 
 ### Changed
-- Breaking change Breadcrumbs component requires linkComponent prop for page routing. 
+- Breadcrumbs component takes optional linkComponent prop for page routing. 
 
 [v0.1.0] - 2025-04-10
 ---------------------

readme.md

@@ -8,7 +8,6 @@ A theme and component library to make websites at scientific installations simpl
 
 Using
 -----
-
 ### Installing
 
 Install as usual:
@@ -33,7 +32,19 @@ root.render(
 
 There are currently two themes, `GenericTheme` or `DiamondTheme`, but you can - and should - adapt your own.
 
-To use the Breadcrumbs component, use a route provider from your preferred library. For example, to use react-router's BrowserRouter, install react-router-dom:
+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.
+
+```js
+import { Breadcrumbs } from "@diamondlightsource/sci-react-ui";
+
+function App() {
+  return <Breadcrumbs path={window.location.pathname} />;
+}
+export default App;
+```
+
+To use the Breadcrumbs component with your routing library, use a route provider from your preferred library. For example, to use react-router's BrowserRouter, install react-router-dom:
 
 ```sh
 npm i react-router-dom
@@ -57,7 +68,7 @@ root.render(
 )
 ```
 
-Then pass your library's corresponding Link component to Breadcrumbs, for example:
+Then pass your library's corresponding Link component to Breadcrumbs in the linkComponent prop, for example:
 
 ```js
 import { Link } from "react-router-dom";

src/components/navigation/Breadcrumbs.stories.tsx

@@ -75,6 +75,22 @@ export const Empty: Story = {
   },
 };
 
+export const NoLinkComponent: Story = {
+  args: {
+    path: "/first/second/third/last/",
+  },
+};
+
+export const NoLinkComponentWithCustomPath: Story = {
+  args: {
+    path: [
+      { name: "first", href: "link" },
+      { name: "second", href: "other link" },
+      { name: "last", href: "/" },
+    ],
+  },
+};
+
 export const ColorChange: Story = {
   args: {
     path: ["first", "second", "third", "last"],

src/components/navigation/Breadcrumbs.test.tsx

@@ -251,3 +251,27 @@ describe("getCrumbs", () => {
     ).toStrictEqual(objectArrayCrumbs);
   });
 });
+
+it("should render Link with href when linkComponent is not provided", () => {
+  const { getByRole, getByText } = render(
+    <Breadcrumbs path={defaultArrayObject} />,
+  );
+
+  expect(getByRole("link", { name: crumbFirstTitle })).toHaveAttribute(
+    "href",
+    `/${crumbFirst}`,
+  );
+  expect(getByRole("link", { name: crumbSecondTitle })).toHaveAttribute(
+    "href",
+    `/${crumbSecond}`,
+  );
+  expect(getByText(crumbLastTitle)).toBeInTheDocument();
+});
+
+it("should render home link with href when linkComponent is not provided", () => {
+  const { getByTestId } = render(<Breadcrumbs path={defaultArrayObject} />);
+  const homeIcon = getByTestId("HomeIcon");
+
+  expect(homeIcon).toBeInTheDocument();
+  expect(homeIcon.parentElement).toHaveAttribute("href", "/");
+});

src/components/navigation/Breadcrumbs.tsx

@@ -15,7 +15,7 @@ import { CustomLink } from "types/links";
 
 interface BreadcrumbsProps {
   path: string | string[] | CustomLink[];
-  linkComponent: React.ElementType;
+  linkComponent?: React.ElementType;
   rootProps?: PaperProps;
   muiBreadcrumbsProps?: Mui_BreadcrumbsProps;
 }
@@ -83,10 +83,19 @@ const Breadcrumbs = ({
             key={"crumb-0"}
             underline="hover"
             color="inherit"
-            component={linkComponent}
-            to="/"
+            {...(linkComponent
+              ? {
+                  component: linkComponent,
+                  to: "/",
+                }
+              : {
+                  href: "/",
+                })}
           >
-            <HomeIcon sx={{ pt: 0.5, fontSize: "1.7em" }} />
+            <HomeIcon
+              data-testid="HomeIcon"
+              sx={{ pt: 0.5, fontSize: "1.7em" }}
+            />
           </Mui_Link>
 
           {crumbs.map((crumb, i, all) => {
@@ -97,8 +106,9 @@ const Breadcrumbs = ({
                   sx={{ fontSize: "smaller" }}
                   underline="hover"
                   color="inherit"
-                  component={linkComponent}
-                  to={crumb.href}
+                  {...(linkComponent
+                    ? { component: linkComponent, to: crumb.href }
+                    : { href: crumb.href })}
                 >
                   {crumb.name}
                 </Mui_Link>