feat: Add new nav icon for the detours page (#2771)

Co-authored-by: Kayla Firestack <kfirestack@mbta.com>

assets/src/helpers/navIcons.tsx

@@ -0,0 +1,27 @@
+import React, { ComponentPropsWithoutRef } from "react"
+
+export type NavIconProps = ComponentPropsWithoutRef<"svg">
+
+export const DetourNavIcon = (props: NavIconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="100%"
+    width="100%"
+    viewBox="0 0 30 30"
+    aria-hidden
+    {...props}
+  >
+    <path
+      d="M3.29289 25.2929C2.90237 25.6834 2.90237 26.3166 3.29289 26.7071C3.68342 27.0976 4.31658 27.0976 4.70711 26.7071L3.29289 25.2929ZM7.5 22.5L8.20711 23.2071C8.39464 23.0196 8.5 22.7652 8.5 22.5H7.5ZM7.5 12L6.83564 11.2526C6.62215 11.4424 6.5 11.7144 6.5 12H7.5ZM12 8L12.3162 7.05132C11.9769 6.9382 11.603 7.01495 11.3356 7.25259L12 8ZM19.5 10.5L19.1838 11.4487C19.5431 11.5685 19.9393 11.4749 20.2071 11.2071L19.5 10.5ZM27 4C27 3.44772 26.5523 3 26 3H17C16.4477 3 16 3.44772 16 4C16 4.55228 16.4477 5 17 5H25V13C25 13.5523 25.4477 14 26 14C26.5523 14 27 13.5523 27 13V4ZM4.70711 26.7071L8.20711 23.2071L6.79289 21.7929L3.29289 25.2929L4.70711 26.7071ZM8.5 22.5V12H6.5V22.5H8.5ZM8.16436 12.7474L12.6644 8.74741L11.3356 7.25259L6.83564 11.2526L8.16436 12.7474ZM11.6838 8.94868L19.1838 11.4487L19.8162 9.55132L12.3162 7.05132L11.6838 8.94868ZM20.2071 11.2071L26.7071 4.70711L25.2929 3.29289L18.7929 9.79289L20.2071 11.2071Z"
+      fill="currentColor"
+    />
+    <path
+      d="M7 23L20 10"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeDasharray="2 3"
+      stroke="currentColor"
+    />
+  </svg>
+)

assets/src/navLinkData.ts → assets/src/navLinkData.tsx

@@ -1,19 +1,17 @@
-import React from "react"
+import React, { ComponentProps } from "react"
 import { fullStoryEvent } from "./helpers/fullStory"
-import {
-  DiamondTurnRightIcon,
-  LadderIcon,
-  MapIcon,
-  SearchMapIcon,
-} from "./helpers/icon"
+import { LadderIcon, MapIcon, SearchMapIcon } from "./helpers/icon"
 import inTestGroup, { TestGroups } from "./userInTestGroup"
+import { DetourNavIcon, NavIconProps } from "./helpers/navIcons"
 
 type HTMLElementProps = React.PropsWithoutRef<React.HTMLAttributes<HTMLElement>>
 
 export interface LinkData {
   title: string
   path: string
-  navIcon: React.JSXElementConstructor<HTMLElementProps>
+  navIcon:
+    | React.JSXElementConstructor<HTMLElementProps>
+    | ((props: NavIconProps) => React.JSX.Element)
   onClick?: () => void
   hideOnMobile?: boolean
 }
@@ -24,12 +22,16 @@ export const getNavLinkData: () => LinkData[] = () => {
         {
           title: "Detours",
           path: "/detours",
-          navIcon: DiamondTurnRightIcon,
+          navIcon: (props: ComponentProps<"span">) => (
+            <span {...props}>
+              <DetourNavIcon />
+            </span>
+          ),
         },
       ]
     : []
 
-  return [
+  const alwaysPresentItems: LinkData[] = [
     {
       title: "Route Ladders",
       path: "/",
@@ -46,5 +48,7 @@ export const getNavLinkData: () => LinkData[] = () => {
       navIcon: SearchMapIcon,
       onClick: () => fullStoryEvent("Search Map nav entry clicked", {}),
     },
-  ].concat(maybeDetours)
+  ]
+
+  return alwaysPresentItems.concat(maybeDetours)
 }

assets/stories/skate-components/icons/detourNavIcon.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+
+import type { Meta, StoryObj } from "@storybook/react"
+import { DetourNavIcon } from "../../../src/helpers/navIcons"
+
+const meta = {
+  component: DetourNavIcon,
+  parameters: {
+    layout: "centered",
+    stretch: false,
+  },
+} satisfies Meta<typeof DetourNavIcon>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const UnselectedInContext: Story = {
+  decorators: [
+    (StoryFn) => (
+      <div className="c-left-nav__link">
+        <StoryFn className="c-left-nav__icon" />
+      </div>
+    ),
+  ],
+}
+
+export const SelectedInContext: Story = {
+  decorators: [
+    (StoryFn) => (
+      <div className="c-left-nav__link c-left-nav__link--active">
+        <StoryFn className="c-left-nav__icon" />
+      </div>
+    ),
+  ],
+}