refactor: update comps to use Nav helpers,classNames

src/components/Navigation/Anchor.tsx

@@ -1,16 +1,17 @@
 import { forwardRef } from "react";
 import { styled } from "@mui/material/styles";
-import { useMaybeRef, type MaybeRef } from "@hooks/useMaybeRef";
-import { defaultLinkStyles } from "./styles";
+import { useMaybeRef } from "@/hooks/useMaybeRef";
+import { getDefaultLinkStyles } from "./styles";
+import type { Simplify } from "type-fest";
 
 /**
  * A styled anchor element with ref forwarding.
  *
- * - If an external URL is provided to `href`, the attributes `target="_blank"`
+ * > If an external URL is provided to `href`, the attributes `target="_blank"`
  *   and `rel="noreferrer"` are set automatically, and the `textDecoration` style
  *   defaults to "underline".
  */
-export const Anchor = forwardRef<MaybeRef<HTMLAnchorElement>, AnchorProps>(function Anchor(
+export const Anchor = forwardRef<HTMLAnchorElement, AnchorProps>(function Anchor(
   { href, children, ...props },
   ref
 ) {
@@ -33,8 +34,10 @@ export const Anchor = forwardRef<MaybeRef<HTMLAnchorElement>, AnchorProps>(funct
   );
 });
 
-export const StyledAnchor = styled("a")(defaultLinkStyles);
+export const StyledAnchor = styled("a")(getDefaultLinkStyles);
 
-export type AnchorProps = Omit<React.ComponentProps<typeof StyledAnchor>, "children"> & {
-  children?: React.ReactNode;
-};
+export type AnchorProps = Simplify<
+  Omit<React.ComponentProps<typeof StyledAnchor>, "children"> & {
+    children?: React.ReactNode;
+  }
+>;

src/components/Navigation/BackButton.tsx

@@ -11,19 +11,19 @@ import ArrowBackIcon from "@mui/icons-material/ArrowBackIosNew";
  *   history.
  */
 export const BackButton = ({
-  to,
+  to = "-1",
   label,
   children = "Back",
   icon = false,
   tooltip = "Go back to the previous page",
   tooltipProps = {},
   ...props
 }: BackButtonProps) => {
-  const navigate = useNavigate();
+  const nav = useNavigate();
 
   const handleClick: React.MouseEventHandler<HTMLButtonElement> = (event) => {
     event.preventDefault();
-    navigate(to ?? (-1 as To));
+    nav(to);
   };
 
   return (

src/components/Navigation/LegalLinks.tsx

@@ -1,9 +1,10 @@
 import { styled, alpha } from "@mui/material/styles";
-import Box from "@mui/material/Box";
 import Divider, { dividerClasses } from "@mui/material/Divider";
 import Tooltip from "@mui/material/Tooltip";
-import { StripeBadge, stripeBadgeClassNames } from "@components/StripeBadge";
+import { StripeBadge, brandingClassNames } from "@/components/Branding";
+import { APP_PATHS } from "@/routes/appPaths";
 import { Link } from "./Link";
+import { navigationClassNames } from "./classNames";
 
 /**
  * Legal links:
@@ -17,15 +18,22 @@ import { Link } from "./Link";
  * When provided, the anchor wrapping the StripeBadge will have an href linking to
  * the Stripe Connected Account Agreement page, rather than Stripe's landing page.
  */
-export const LegalLinks = ({ includeStripeBadge = false, ...containerProps }: LegalLinksProps) => (
-  <StyledDiv className={legalLinksClassNames.container} {...containerProps}>
+export const LegalLinks = ({
+  includeStripeBadge = false,
+  tabIndex = -1,
+  ...containerProps
+}: LegalLinksProps) => (
+  <StyledDiv
+    className={navigationClassNames.legalLinksContainer}
+    tabIndex={tabIndex}
+    {...containerProps}
+  >
     {includeStripeBadge && (
       <>
-        <Tooltip title="View Stripe Connected Account Agreement">
-          <Box className={legalLinksClassNames.stripeBadgeContainer}>
-            <StripeBadge href="https://stripe.com/connect-account/legal/full" />
-          </Box>
-        </Tooltip>
+        <StripeBadge
+          href="https://stripe.com/connect-account/legal/full"
+          tooltipProps={{ title: "View Stripe Connected Account Agreement" }}
+        />
         <Divider
           orientation="vertical"
           variant="middle"
@@ -34,32 +42,30 @@ export const LegalLinks = ({ includeStripeBadge = false, ...containerProps }: Le
       </>
     )}
     <Tooltip title="Fixit Terms of Service">
-      <Link to="/ToS">Terms</Link>
+      <Link to={APP_PATHS.ToS} tabIndex={tabIndex}>
+        Terms {/* <-- Don't rm the \s after Privacy, it elongates the underline */}
+      </Link>
     </Tooltip>
     {!includeStripeBadge && <Divider orientation="vertical" variant="middle" />}
     <Tooltip title="Fixit Privacy Policy">
-      <Link to="/privacy">Privacy</Link>
+      <Link to={APP_PATHS.PRIVACY} tabIndex={tabIndex}>
+        Privacy {/* <-- Don't rm the \s after Privacy, it elongates the underline */}
+      </Link>
     </Tooltip>
   </StyledDiv>
 );
 
-export const legalLinksClassNames = {
-  container: "legal-links-container",
-  stripeBadgeContainer: "legal-links-stripe-badge-container",
-};
-
 const StyledDiv = styled("div")(({ theme: { palette } }) => ({
-  padding: "0.1rem",
   display: "flex",
   flexDirection: "row",
   alignItems: "center",
-  justifyContent: "space-evenly",
+  justifyContent: "center",
   verticalAlign: "middle",
 
-  [`& > .${legalLinksClassNames.stripeBadgeContainer}`]: {
+  [`& > .${brandingClassNames.stripeBadgeRoot}`]: {
     height: "2rem",
     margin: "0 0.5rem",
-    [`& .${stripeBadgeClassNames.img}`]: {
+    [`& .${brandingClassNames.stripeBadgeImg}`]: {
       height: "100%",
     },
   },
@@ -72,10 +78,12 @@ const StyledDiv = styled("div")(({ theme: { palette } }) => ({
     backgroundColor: alpha(palette.mode === "dark" ? palette.grey[600] : palette.grey[800], 0.5),
   },
 
-  '& > a[href="/ToS"],a[href="/privacy"]': {
+  [`& > a[href="${APP_PATHS.ToS}"],a[href="${APP_PATHS.PRIVACY}"]`]: {
     color: palette.mode === "dark" ? palette.grey[500] : palette.grey[700],
-    textDecorationStyle: "dotted",
+    textDecoration: "underline dotted",
+    textUnderlinePosition: "under",
     margin: "0 0.5rem",
+    whiteSpace: "pre", // preserve whitespace, text includes ending space to elongate underline
   },
 }));
 

src/components/Navigation/Link.tsx

@@ -1,25 +1,25 @@
 import { forwardRef } from "react";
-import { Link as RRDomLink } from "react-router-dom";
+import { Link as ReactRouterDomLink } from "react-router-dom";
 import { styled } from "@mui/material/styles";
-import { useMaybeRef, type MaybeRef } from "@hooks/useMaybeRef";
-import { defaultLinkStyles } from "./styles";
+import { useMaybeRef } from "@/hooks/useMaybeRef";
+import { getDefaultLinkStyles } from "./styles";
 
 /**
- * A styled react-router-dom Link with ref forwarding.
+ * A styled react-router-dom `Link` with ref forwarding.
  */
-export const Link = forwardRef<MaybeRef<HTMLAnchorElement>, LinkProps>(function Link(
-  { to, children, ...props },
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
+  { to, children, ...linkProps },
   ref
 ) {
   const anchorRef = useMaybeRef(ref);
 
   return (
-    <StyledLink ref={anchorRef} to={to} {...props}>
+    <StyledReactRouterDomLink ref={anchorRef} to={to} {...linkProps}>
       {children}
-    </StyledLink>
+    </StyledReactRouterDomLink>
   );
 });
 
-export const StyledLink = styled(RRDomLink)(defaultLinkStyles);
+export const StyledReactRouterDomLink = styled(ReactRouterDomLink)(getDefaultLinkStyles);
 
-export type LinkProps = React.ComponentProps<typeof StyledLink>;
+export type LinkProps = React.ComponentProps<typeof StyledReactRouterDomLink>;

src/components/Navigation/LinkToWorkOrder.tsx

@@ -1,7 +1,8 @@
 import { forwardRef } from "react";
 import Text from "@mui/material/Typography";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-import { useMaybeRef, type MaybeRef } from "@hooks/useMaybeRef";
+import { useMaybeRef } from "@/hooks/useMaybeRef";
+import { getItemViewPath } from "@/routes/helpers";
 import { Link, type LinkProps } from "./Link";
 
 /**
@@ -10,15 +11,15 @@ import { Link, type LinkProps } from "./Link";
  * If no `children` are provided, a default text node is rendered
  * with `"View Work Order"` and a right-facing chevron icon.
  */
-export const LinkToWorkOrder = forwardRef<MaybeRef<HTMLAnchorElement>, LinkToWorkOrderProps>(
+export const LinkToWorkOrder = forwardRef<HTMLAnchorElement, LinkToWorkOrderProps>(
   function LinkToWorkOrder({ workOrderID, children, ...props }, ref) {
     const anchorRef = useMaybeRef(ref);
 
     return (
       <Link
         ref={anchorRef}
-        to={`/home/workorders/${encodeURIComponent(workOrderID)}`}
-        sx={(theme) => ({ color: theme.palette.secondary.main })}
+        to={getItemViewPath("workorders", workOrderID)}
+        sx={({ palette }) => ({ color: palette.secondary.main })}
         {...props}
       >
         {children ?? (

src/components/Navigation/classNames.ts

@@ -0,0 +1,8 @@
+/**
+ * Class names for `Navigation` components (src/components/Navigation/).
+ */
+export const navigationClassNames = {
+  legalLinksContainer: "legal-links-container",
+
+  navLinkPending: "rrd-nav-link-pending",
+} as const;