Revert "Revert "feat: New route ladder action dropdown (#2623)" (#2626)…

…" (#2627) This reverts commit 60647af.
mbta · May 29, 2024 · 89567a0 · 89567a0
1 parent 224edc2
commit 89567a0
Show file tree

Hide file tree

Showing 4 changed files with 197 additions and 14 deletions.
diff --git a/assets/css/_route_ladder.scss b/assets/css/_route_ladder.scss
@@ -49,16 +49,14 @@
 
   .card-body {
     display: inline-grid;
-    padding: 0;
+    grid-template-columns: 1fr 1fr auto 1fr 1fr;
+    padding: 6px 8px;
     align-items: center;
   }
 
-  .c-new-route-ladder__fake-dropdown {
-    height: 36px;
-    width: 36px;
-    border-radius: 4px;
-    background-color: $color-eggplant-500;
-    margin: 6px 8px;
+  .c-route-ladder__dropdown-button {
+    height: 2.25rem;
+    width: 2.25rem;
   }
 
   .c-route-ladder__alert-icon {
@@ -82,8 +80,7 @@
 
   .c-route-ladder__close-button-container {
     grid-column: 5/6;
-    margin-right: 8px;
-    margin-left: auto;
+    margin: 2px 0 2px auto;
   }
 }
 

diff --git a/assets/src/components/routeLadder.tsx b/assets/src/components/routeLadder.tsx
@@ -29,9 +29,9 @@ import { CloseButton as OldCloseButton } from "./closeButton"
 import Tippy from "@tippyjs/react"
 import { tagManagerEvent } from "../helpers/googleTagManager"
 import inTestGroup, { TestGroups } from "../userInTestGroup"
-import { ExclamationTriangleFill } from "../helpers/bsIcons"
+import { ExclamationTriangleFill, PlusSquare } from "../helpers/bsIcons"
 import { RoutePill } from "./routePill"
-import { Card, CloseButton } from "react-bootstrap"
+import { Card, CloseButton, Dropdown } from "react-bootstrap"
 
 interface Props {
   route: Route
@@ -91,7 +91,17 @@ export const NewHeader = ({
   return (
     <Card className="c-new-route-ladder__header">
       <Card.Body>
-        <div className="c-new-route-ladder__fake-dropdown" />
+        {inTestGroup(TestGroups.DetoursPilot) && (
+          <Dropdown className="border-box inherit-box">
+            <Dropdown.Toggle className="c-route-ladder__dropdown-button" />
+            <Dropdown.Menu>
+              <Dropdown.Item className="icon-link">
+                <PlusSquare />
+                Add detour
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+        )}
         {hasAlert && (
           <Tippy
             content="Active detour"

diff --git a/assets/tests/components/__snapshots__/routeLadder.test.tsx.snap b/assets/tests/components/__snapshots__/routeLadder.test.tsx.snap
@@ -1321,7 +1321,7 @@ exports[`routeLadder renders a route ladder with laying over vehicles 1`] = `
 </DocumentFragment>
 `;
 
-exports[`routeLadder renders a route ladder with the new header format 1`] = `
+exports[`routeLadder renders a route ladder with the new header and detour dropdown 1`] = `
 <div>
   <div
     class="c-new-route-ladder__header card"
@@ -1330,8 +1330,148 @@ exports[`routeLadder renders a route ladder with the new header format 1`] = `
       class="card-body"
     >
       <div
-        class="c-new-route-ladder__fake-dropdown"
+        class="border-box inherit-box dropdown"
+      >
+        <button
+          aria-expanded="false"
+          class="c-route-ladder__dropdown-button dropdown-toggle btn btn-primary"
+          id="react-aria-:r0:"
+          type="button"
+        />
+      </div>
+      <div
+        class="c-route-pill c-route-pill--bus c-route-ladder__route-pill c-route-pill--large-format"
+      >
+        28
+      </div>
+      <div
+        class="c-route-ladder__close-button-container"
+      >
+        <button
+          aria-label="Close"
+          class="btn-close p-2"
+          type="button"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="c-route-ladder__controls"
+  >
+    <button
+      class="c-route-ladder__reverse"
+    >
+      <span
+        class="c-route-ladder__reverse-icon"
+      >
+        <svg />
+      </span>
+      Reverse
+    </button>
+  </div>
+  <div
+    class="c-ladder"
+    style="width: 184px;"
+  >
+    <svg
+      class="c-ladder__svg"
+      height="0"
+      viewBox="-92 -55 184 0"
+      width="184"
+    >
+      <line
+        class="c-ladder__line"
+        x1="-40"
+        x2="-40"
+        y1="0"
+        y2="-110"
+      />
+      <line
+        class="c-ladder__line"
+        x1="40"
+        x2="40"
+        y1="0"
+        y2="-110"
+      />
+      <circle
+        class="c-ladder__stop-circle"
+        cx="-40"
+        cy="0"
+        r="3"
+      />
+      <circle
+        class="c-ladder__stop-circle"
+        cx="40"
+        cy="0"
+        r="3"
+      />
+      <text
+        class="c-ladder__timepoint-name"
+        dominant-baseline="middle"
+        text-anchor="middle"
+        x="0"
+        y="0"
+      >
+        MATPN
+      </text>
+      <circle
+        class="c-ladder__stop-circle"
+        cx="-40"
+        cy="-55"
+        r="3"
       />
+      <circle
+        class="c-ladder__stop-circle"
+        cx="40"
+        cy="-55"
+        r="3"
+      />
+      <text
+        class="c-ladder__timepoint-name"
+        dominant-baseline="middle"
+        text-anchor="middle"
+        x="0"
+        y="-55"
+      >
+        WELLH
+      </text>
+      <circle
+        class="c-ladder__stop-circle"
+        cx="-40"
+        cy="-110"
+        r="3"
+      />
+      <circle
+        class="c-ladder__stop-circle"
+        cx="40"
+        cy="-110"
+        r="3"
+      />
+      <text
+        class="c-ladder__timepoint-name"
+        dominant-baseline="middle"
+        text-anchor="middle"
+        x="0"
+        y="-110"
+      >
+        MORTN
+      </text>
+    </svg>
+  </div>
+  <div
+    class="c-incoming-box"
+  />
+</div>
+`;
+
+exports[`routeLadder renders a route ladder with the new header format 1`] = `
+<div>
+  <div
+    class="c-new-route-ladder__header card"
+  >
+    <div
+      class="card-body"
+    >
       <div
         class="c-route-pill c-route-pill--bus c-route-ladder__route-pill c-route-pill--large-format"
       >

diff --git a/assets/tests/components/routeLadder.test.tsx b/assets/tests/components/routeLadder.test.tsx
@@ -228,6 +228,42 @@ describe("routeLadder", () => {
     expect(tree).toMatchSnapshot()
   })
 
+  test("renders a route ladder with the new header and detour dropdown", () => {
+    jest
+      .mocked(getTestGroups)
+      .mockReturnValue([
+        TestGroups.RouteLadderHeaderUpdate,
+        TestGroups.DetoursPilot,
+      ])
+
+    const route: Route = routeFactory.build({
+      id: "28",
+      name: "28",
+    })
+    const timepoints = [
+      { id: "MATPN", name: "MATPN Name" },
+      { id: "WELLH", name: "WELLH Name" },
+      { id: "MORTN", name: "MORTN Name" },
+    ]
+
+    const { container: tree } = render(
+      <RouteLadder
+        route={route}
+        timepoints={timepoints}
+        vehiclesAndGhosts={undefined}
+        selectedVehicleId={undefined}
+        deselectRoute={() => {}}
+        reverseLadder={() => {}}
+        toggleCrowding={() => {}}
+        ladderDirections={{}}
+        ladderCrowdingToggles={{}}
+        hasAlert={false}
+      />
+    )
+
+    expect(tree).toMatchSnapshot()
+  })
+
   test("renders a route ladder with vehicles", () => {
     const route: Route = routeFactory.build({
       id: "28",