From 2dee1e00c9f2f549121e5573e6c8275984795806 Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Thu, 5 Sep 2024 15:05:06 -0400
Subject: [PATCH] feat: Add new nav icon for the detours page (#2771)

Co-authored-by: Kayla Firestack <kfirestack@mbta.com>
---
 assets/src/helpers/navIcons.tsx               | 27 ++++++++++++++
 .../src/{navLinkData.ts => navLinkData.tsx}   | 26 +++++++------
 .../icons/detourNavIcon.stories.tsx           | 37 +++++++++++++++++++
 3 files changed, 79 insertions(+), 11 deletions(-)
 create mode 100644 assets/src/helpers/navIcons.tsx
 rename assets/src/{navLinkData.ts => navLinkData.tsx} (61%)
 create mode 100644 assets/stories/skate-components/icons/detourNavIcon.stories.tsx

diff --git a/assets/src/helpers/navIcons.tsx b/assets/src/helpers/navIcons.tsx
new file mode 100644
index 000000000..1a17d8d65
--- /dev/null
+++ b/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>
+)
diff --git a/assets/src/navLinkData.ts b/assets/src/navLinkData.tsx
similarity index 61%
rename from assets/src/navLinkData.ts
rename to assets/src/navLinkData.tsx
index 3af137a78..70a0f59d9 100644
--- a/assets/src/navLinkData.ts
+++ b/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)
 }
diff --git a/assets/stories/skate-components/icons/detourNavIcon.stories.tsx b/assets/stories/skate-components/icons/detourNavIcon.stories.tsx
new file mode 100644
index 000000000..9d13bf687
--- /dev/null
+++ b/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>
+    ),
+  ],
+}