feat(ts/ActiveDetourPanel): add detour properties to activated panel

assets/css/_diversion_page.scss

@@ -169,3 +169,24 @@
   height: 1.5rem;
   width: 1.5rem;
 }
+
+// A layout component which makes a `<dl/>` layout it's terms and definitions
+// on the same line
+.l-inline-dl {
+  // Display `<dt/>`'s and `<dd/>`'s on the same line
+  dt,
+  dd {
+    display: inline;
+  }
+
+  // But display each `<dt/>` on it's own line
+  dt::before {
+    content: "";
+    display: block;
+  }
+
+  // Remove leading margin from `<dd/>`'s
+  dd {
+    margin: 0;
+  }
+}

assets/src/components/detours/detourPanels/activeDetourPanel.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from "react"
+import React, { PropsWithChildren, useId } from "react"
 import { DetourDirection } from "../../../models/detour"
 import { Button, ListGroup } from "react-bootstrap"
 import { Panel } from "../diversionPage"
@@ -15,6 +15,8 @@ import {
   MissedStops,
 } from "../detourPanelComponents"
 import inTestGroup, { TestGroups } from "../../../userInTestGroup"
+import { timeAgoLabelFromDate } from "../../../util/dateTime"
+import useCurrentTime from "../../../hooks/useCurrentTime"
 
 export interface ActiveDetourPanelProps extends PropsWithChildren {
   copyableDetourText: string
@@ -27,6 +29,10 @@ export interface ActiveDetourPanelProps extends PropsWithChildren {
   routeDirection: string
   onOpenDeactivateModal?: () => void
   onNavigateBack: () => void
+
+  detourReason: string
+  detourDuration: string
+  activatedAt: Date
 }
 
 export const ActiveDetourPanel = ({
@@ -41,6 +47,9 @@ export const ActiveDetourPanel = ({
   onOpenDeactivateModal,
   onNavigateBack,
   children,
+  activatedAt,
+  detourDuration,
+  detourReason,
 }: ActiveDetourPanelProps) => {
   const backButton = (
     <Button
@@ -54,6 +63,13 @@ export const ActiveDetourPanel = ({
     </Button>
   )
 
+  const currentTime = useCurrentTime()
+
+  const idSuffix = useId()
+  const dlReasonId = "dl-reason" + idSuffix
+  const dlActiveSinceId = "dl-active-since" + idSuffix
+  const dlDurationId = "dl-duration" + idSuffix
+
   return (
     <Panel as="article" className="c-diversion-panel">
       <Panel.Header>
@@ -80,6 +96,25 @@ export const ActiveDetourPanel = ({
             routeDirection={routeDirection}
           />
 
+          <dl className="l-inline-dl m-0">
+            <dt id={dlReasonId} className="fw-bold me-2">
+              Reason
+            </dt>
+            <dd aria-labelledby={dlReasonId}>{detourReason}</dd>
+
+            <dt id={dlActiveSinceId} className="fw-bold me-2">
+              On detour since
+            </dt>
+            <dd aria-labelledby={dlActiveSinceId}>
+              {timeAgoLabelFromDate(currentTime, activatedAt)}
+            </dd>
+
+            <dt id={dlDurationId} className="fw-bold me-2">
+              Est. Duration
+            </dt>
+            <dd aria-labelledby={dlDurationId}>{detourDuration}</dd>
+          </dl>
+
           <section className="pb-3">
             <h2 className="c-diversion-panel__h2">Detour Directions</h2>
             {directions ? (

assets/src/components/detours/diversionPage.tsx

@@ -398,7 +398,12 @@ export const DiversionPage = ({
           ) : null}
         </DetourFinishedPanel>
       )
-    } else if (snapshot.matches({ "Detour Drawing": "Active" })) {
+    } else if (
+      snapshot.matches({ "Detour Drawing": "Active" }) &&
+      snapshot.context.activatedAt &&
+      snapshot.context.selectedDuration &&
+      snapshot.context.selectedReason
+    ) {
       return (
         <ActiveDetourPanel
           copyableDetourText={copyableDetourText}
@@ -425,6 +430,9 @@ export const DiversionPage = ({
                 }
               : undefined
           }
+          activatedAt={snapshot.context.activatedAt}
+          detourDuration={snapshot.context.selectedDuration}
+          detourReason={snapshot.context.selectedReason}
         >
           {snapshot.matches({
             "Detour Drawing": { Active: "Deactivating" },

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

@@ -39,6 +39,9 @@ const meta = {
     routeDirection: "Outbound",
     onOpenDeactivateModal: undefined,
     onNavigateBack: undefined,
+    activatedAt: new Date(),
+    detourDuration: "3 hours",
+    detourReason: "Construction",
   },
   // 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

assets/tests/components/detours/diversionPage.activate.test.tsx

@@ -370,3 +370,19 @@ describe("DiversionPage activate workflow", () => {
     })
   })
 })
+
+describe("DiversionPage Activate Screen", () => {
+  test("has list of detour activation properties", async () => {
+    await diversionPageOnActiveDetourScreen()
+
+    expect(
+      screen.getByRole("definition", { name: "Reason" })
+    ).toHaveTextContent("Construction")
+    expect(
+      screen.getByRole("definition", { name: "On detour since" })
+    ).toHaveTextContent("Just now")
+    expect(
+      screen.getByRole("definition", { name: "Est. Duration" })
+    ).toHaveTextContent("3 hours")
+  })
+})