Fix the Navigation types when generating links. (#786)

* Fix the Navigation types when generating links.

.babelrc

@@ -12,6 +12,7 @@
       {
         "root": ["./src"],
         "alias": {
+          "enums": "./src/enums",
           "components": "./src/components",
           "hooks": "./src/hooks",
           "types": "./src/types",

src/components/Navigation/Navigation.stories.mdx

@@ -1,6 +1,6 @@
 import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs/blocks";
 import Navigation from "./Navigation";
-import { Theme } from "../../types";
+import { Theme } from "../../enums";
 
 <Meta title="Navigation" component={Navigation} />
 

src/components/Navigation/Navigation.test.tsx

@@ -4,7 +4,8 @@ import { fireEvent, render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import Navigation from "./Navigation";
-import { Theme } from "../../types";
+import { Theme } from "../../enums";
+import { isNavigationAnchor } from "../../utils";
 
 /* eslint-disable testing-library/no-node-access */
 it("displays light theme", () => {
@@ -75,11 +76,17 @@ it("can display a standard logo", () => {
 it("can display a standard logo with a generated link", () => {
   render(
     <Navigation
-      generateLink={({ url, label, isSelected, ...props }) => (
-        <a {...props} aria-current="page" href={url}>
-          {label}
-        </a>
-      )}
+      generateLink={(link) => {
+        if (isNavigationAnchor(link)) {
+          const { url, label, isSelected, ...props } = link;
+          return (
+            <a {...props} aria-current="page" href={url}>
+              {label}
+            </a>
+          );
+        }
+        return null;
+      }}
       logo={{
         "aria-label": "Homepage",
         src: "http://this.is.the.logo.svg",

src/components/Navigation/Navigation.tsx

@@ -6,9 +6,10 @@ import classNames from "classnames";
 import NavigationLink from "./NavigationLink";
 import NavigationMenu from "./NavigationMenu";
 import type { GenerateLink, NavItem, NavMenu, LogoProps } from "./types";
-import { PropsWithSpread, SubComponentProps, Theme } from "types";
+import { PropsWithSpread, SubComponentProps } from "types";
 import SearchBox, { SearchBoxProps } from "components/SearchBox";
 import { useOnEscapePressed } from "hooks";
+import { Theme } from "enums";
 
 export type Props = PropsWithSpread<
   {
@@ -102,12 +103,14 @@ const generateLogo = (logo: Props["logo"], generateLink: GenerateLink) => {
     return (
       <div className="p-navigation__tagged-logo" {...logoProps}>
         <NavigationLink
-          className="p-navigation__link"
-          url={url}
-          label={content}
-          aria-label={ariaLabel}
           generateLink={generateLink}
-          isSelected={!!ariaCurrent}
+          link={{
+            "aria-label": ariaLabel,
+            className: "p-navigation__link",
+            isSelected: !!ariaCurrent,
+            label: content,
+            url: url,
+          }}
         />
       </div>
     );
@@ -139,13 +142,15 @@ const generateItems = (
         key={i}
       >
         <NavigationLink
-          {...item}
-          onClick={(evt) => {
-            item.onClick?.(evt);
-            closeMobileMenu();
-          }}
           generateLink={generateLink}
-          className={classNames("p-navigation__link", item.className)}
+          link={{
+            ...item,
+            className: classNames("p-navigation__link", item.className),
+            onClick: (evt) => {
+              item.onClick?.(evt);
+              closeMobileMenu();
+            },
+          }}
         />
       </li>
     )

src/components/Navigation/NavigationLink/NavigationLink.test.tsx

@@ -5,16 +5,29 @@ import { render, screen } from "@testing-library/react";
 import NavigationLink from "./NavigationLink";
 
 it("generates a standard anchor", () => {
-  render(<NavigationLink label="Go here" url="/to/here" />);
+  render(<NavigationLink link={{ label: "Go here", url: "/to/here" }} />);
   expect(
     screen.getByRole("link", {
       name: "Go here",
     })
   ).toBeInTheDocument();
 });
 
+it("generates a button", () => {
+  render(<NavigationLink link={{ label: "Go here" }} />);
+  expect(
+    screen.getByRole("button", {
+      name: "Go here",
+    })
+  ).toBeInTheDocument();
+});
+
 it("can select an anchor", () => {
-  render(<NavigationLink isSelected label="Go here" url="/to/here" />);
+  render(
+    <NavigationLink
+      link={{ isSelected: true, label: "Go here", url: "/to/here" }}
+    />
+  );
   expect(
     screen.getByRole("link", {
       name: "Go here",
@@ -26,8 +39,7 @@ it("generates a custom link", () => {
   render(
     <NavigationLink
       generateLink={({ label }) => <button>{label}</button>}
-      label="Go here"
-      url="/to/here"
+      link={{ label: "Go here", url: "/to/here" }}
     />
   );
   expect(
@@ -43,9 +55,7 @@ it("can select a custom link", () => {
       generateLink={({ label, ...props }) => (
         <button aria-current={props["aria-current"]}>{label}</button>
       )}
-      isSelected
-      label="Go here"
-      url="/to/here"
+      link={{ isSelected: true, label: "Go here", url: "/to/here" }}
     />
   );
   expect(

src/components/Navigation/NavigationLink/NavigationLink.tsx

@@ -1,48 +1,50 @@
-import type { HTMLProps } from "react";
 import React from "react";
-import { PropsWithSpread } from "types";
+import { isNavigationAnchor, isNavigationButton } from "utils";
 
 import type { GenerateLink, NavLink } from "../types";
 
-type Props = PropsWithSpread<
-  NavLink & {
-    generateLink?: GenerateLink;
-  },
-  HTMLProps<HTMLAnchorElement>
->;
+type Props = {
+  generateLink?: GenerateLink;
+  link: NavLink;
+};
 
 /**
  * This component is used internally to display links inside the Navigation component.
  */
-const NavigationLink = ({
-  generateLink,
-  isSelected,
-  label,
-  url,
-  ...props
-}: Props): JSX.Element => {
-  const ariaCurrent = isSelected ? "page" : undefined;
+const NavigationLink = ({ generateLink, link }: Props): JSX.Element | null => {
+  // const ariaCurrent = isSelected ? "page" : undefined;
   if (generateLink) {
+    const { isSelected, ...linkProps } = link;
     // If a function has been provided then use it to generate the link element.
     return (
       <>
         {generateLink({
           isSelected,
-          label,
-          url,
-          "aria-current": ariaCurrent,
-          ...props,
+          "aria-current": isSelected ? "page" : undefined,
+          ...linkProps,
         })}
       </>
     );
-  } else {
-    // If a function has not been provided then use a standard anchor element.
+  } else if (isNavigationAnchor(link)) {
+    const { isSelected, label, url, ...linkProps } = link;
     return (
-      <a href={url} {...props} aria-current={ariaCurrent}>
+      <a
+        {...linkProps}
+        href={url}
+        aria-current={isSelected ? "page" : undefined}
+      >
         {label}
       </a>
     );
+  } else if (isNavigationButton(link)) {
+    const { isSelected, label, url, ...linkProps } = link;
+    return (
+      <button {...linkProps} aria-current={isSelected ? "page" : undefined}>
+        {label}
+      </button>
+    );
   }
+  return null;
 };
 
 export default NavigationLink;

src/components/Navigation/NavigationMenu/NavigationMenu.tsx

@@ -60,12 +60,14 @@ const NavigationMenu = ({
         {items.map((item, i) => (
           <li key={i}>
             <NavigationLink
-              {...item}
               generateLink={generateLink}
-              className={classNames(
-                "p-navigation__dropdown-item",
-                item.className
-              )}
+              link={{
+                ...item,
+                className: classNames(
+                  "p-navigation__dropdown-item",
+                  item.className
+                ),
+              }}
             />
           </li>
         ))}

src/components/Navigation/index.ts

@@ -4,6 +4,9 @@ export type {
   GenerateLink,
   LogoProps,
   NavLink,
+  NavLinkAnchor,
+  NavLinkBase,
+  NavLinkButton,
   NavMenu,
   NavItem,
 } from "./types";

src/components/Navigation/types.ts

@@ -1,24 +1,37 @@
-import type { HTMLProps, ReactNode } from "react";
+import type { HTMLAttributes, HTMLProps, ReactNode } from "react";
 import { PropsWithSpread } from "types";
 
-export type NavLink = PropsWithSpread<
-  {
-    /**
-     * Whether this nav item is currently selected.
-     */
-    isSelected?: boolean;
-    /**
-     * The label of the link.
-     */
-    label: ReactNode;
-    /**
-     * The URL of the link.
-     */
-    url?: string;
+export type NavLinkBase = {
+  /**
+   * Whether this nav item is currently selected.
+   */
+  isSelected?: boolean;
+  /**
+   * The label of the link.
+   */
+  label: ReactNode;
+  /**
+   * The URL of the link.
+   */
+  url?: string;
+};
+
+export type NavLinkAnchor = PropsWithSpread<
+  NavLinkBase & {
+    url: string;
   },
-  HTMLProps<HTMLAnchorElement>
+  HTMLAttributes<HTMLAnchorElement>
 >;
 
+export type NavLinkButton = PropsWithSpread<
+  NavLinkBase & {
+    url?: never;
+  },
+  HTMLAttributes<HTMLButtonElement>
+>;
+
+export type NavLink = NavLinkAnchor | NavLinkButton;
+
 export type NavMenu = {
   /**
    * Whether to align the dropdown to the right edge of the navigation item.

src/enums.ts

@@ -0,0 +1,13 @@
+/**
+ * The Vanilla theme types.
+ */
+export enum Theme {
+  /**
+   * The dark Vanilla theme.
+   */
+  DARK = "dark",
+  /**
+   * The light Vanilla theme.
+   */
+  LIGHT = "light",
+}

src/index.ts

@@ -93,6 +93,9 @@ export type {
   NavigationProps,
   NavItem,
   NavLink,
+  NavLinkAnchor,
+  NavLinkBase,
+  NavLinkButton,
 } from "./components/Navigation";
 export type { NotificationProps } from "./components/Notification";
 export type { PaginationProps } from "./components/Pagination";
@@ -125,13 +128,15 @@ export {
 } from "hooks";
 export type { WindowFitment } from "hooks";
 
+export { isNavigationAnchor, isNavigationButton } from "utils";
+
 export type {
   ClassName,
   Headings,
   PropsWithSpread,
   SortDirection,
   SubComponentProps,
-  Theme,
   TSFixMe,
   ValueOf,
 } from "./types";
+export { Theme } from "./enums";

src/types/index.ts

@@ -39,17 +39,3 @@ export type TSFixMe = any; // eslint-disable-line @typescript-eslint/no-explicit
  * defined in EnumLike.
  */
 export type ValueOf<T> = T[keyof T];
-
-/**
- * The Vanilla theme types.
- */
-export enum Theme {
-  /**
-   * The dark Vanilla theme.
-   */
-  DARK = "dark",
-  /**
-   * The light Vanilla theme.
-   */
-  LIGHT = "light",
-}

src/utils.ts

@@ -1,3 +1,5 @@
+import { NavLink, NavLinkAnchor, NavLinkButton } from "components/Navigation";
+
 export const IS_DEV = process.env.NODE_ENV === "development";
 
 /**
@@ -27,3 +29,17 @@ export const highlightSubString = (
     match: newStr !== str,
   };
 };
+
+/**
+ * Whether a navigation item is an anchor.
+ * @param link - The navigation item.
+ */
+export const isNavigationAnchor = (link: NavLink): link is NavLinkAnchor =>
+  !!link.url;
+
+/**
+ * Whether a navigation item is a button.
+ * @param link - The navigation item.
+ */
+export const isNavigationButton = (link: NavLink): link is NavLinkButton =>
+  !link.url;