feat: Add stubbed "Active Detour" detour panel (#2715)

assets/src/components/detours/activeDetourPanel.tsx

@@ -0,0 +1,12 @@
+import React from "react"
+import { Panel } from "./diversionPage"
+
+export const ActiveDetourPanel = () => (
+  <Panel as="article">
+    <Panel.Header className="">
+      <h1 className="c-diversion-panel__h1 my-3">Active Detour</h1>
+    </Panel.Header>
+
+    <Panel.Body className="d-flex flex-column"></Panel.Body>
+  </Panel>
+)

assets/src/components/detours/diversionPage.tsx

@@ -20,6 +20,7 @@ import { Route, RoutePattern } from "../../schedule"
 import RoutesContext from "../../contexts/routesContext"
 import { Snapshot } from "xstate"
 import inTestGroup, { TestGroups } from "../../userInTestGroup"
+import { ActiveDetourPanel } from "./activeDetourPanel"
 
 const displayFieldsFromRouteAndPattern = (
   route: Route,
@@ -241,6 +242,8 @@ export const DiversionPage = ({
                   : undefined
               }
             />
+          ) : snapshot.matches({ "Detour Drawing": "Active" }) ? (
+            <ActiveDetourPanel />
           ) : null}
         </div>
         <div className="l-diversion-page__map position-relative">

assets/stories/skate-components/detours/activeDetourPanel.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import React from "react"
+import { ActiveDetourPanel } from "../../../src/components/detours/activeDetourPanel"
+
+const meta = {
+  component: ActiveDetourPanel,
+  parameters: {
+    layout: "fullscreen",
+    stretch: true,
+  },
+  args: {},
+  // The bootstrap CSS reset is supposed to set box-sizing: border-box by
+  // default, we should be able to remove this after that is added
+  decorators: [
+    (StoryFn) => (
+      <div className="border-box inherit-box h-100">
+        <StoryFn />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ActiveDetourPanel>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Story: Story = {}

assets/tests/components/detours/diversionPageActivate.test.tsx

@@ -90,5 +90,6 @@ describe("DiversionPage activate workflow", () => {
     expect(
       screen.queryByRole("heading", { name: "Share Detour Details" })
     ).not.toBeInTheDocument()
+    expect(screen.getByRole("heading", { name: "Active Detour" })).toBeVisible()
   })
 })