feat: Update route ladder dropdown (#2802)

* feat: Route ladder dropdown includes text if there's an external detour --------- Co-authored-by: Josh Larson <jlarson@mbta.com>
mbta · Sep 27, 2024 · 3eb545e · 3eb545e
1 parent 824e0ab
commit 3eb545e
Show file tree

Hide file tree

Showing 8 changed files with 206 additions and 41 deletions.
diff --git a/assets/css/_route_ladder.scss b/assets/css/_route_ladder.scss
@@ -1,3 +1,5 @@
+@use "./color/tokens_2024" as new_tokens;
+
 .c-route-ladder__header,
 .c-route-ladder__controls {
   margin: 0 0.5rem;
@@ -12,24 +14,54 @@
     padding: 6px 8px;
   }
 
-  .c-route-ladder__header__action-container {
+  .c-route-ladder__dropdown {
     display: inline-flex;
     .dropdown,
     .c-route-ladder__alert-icon {
       padding-right: 0.5rem;
     }
+
+    &.c-route-ladder__dropdown--non-skate-alert .dropdown-menu {
+      width: 20.5rem;
+    }
+
+    .dropdown-menu {
+      border-radius: 0.25rem;
+      max-width: 20.5rem;
+    }
+
+    .dropdown-divider {
+      border-color: $color-gray-300;
+    }
   }
 
   .c-route-ladder__dropdown-button {
     height: 2.25rem;
-    width: 2.25rem;
+    width: 1.8125rem;
+    padding: 0;
+    justify-content: center;
+    align-items: center;
+    background-color: white;
+    color: black;
+    border-radius: 0.25rem;
+
+    &:active {
+      background-color: unset;
+      color: unset;
+    }
 
     &.dropdown-toggle::after {
-      // Force bootstrap carat to center even with hidden text
-      margin-left: 0;
+      // Hide bootstrap carat
+      display: none;
     }
   }
 
+  .c-route-ladder__dropdown-header-text {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: new_tokens.$gray-800;
+  }
+
   .c-route-ladder__alert-icon {
     display: flex;
     align-items: center;

diff --git a/assets/src/components/routeLadder.tsx b/assets/src/components/routeLadder.tsx
@@ -23,10 +23,14 @@ import Loading from "./loading"
 import Tippy from "@tippyjs/react"
 import { tagManagerEvent } from "../helpers/googleTagManager"
 import inTestGroup, { TestGroups } from "../userInTestGroup"
-import { ExclamationTriangleFill, PlusSquare } from "../helpers/bsIcons"
+import {
+  ExclamationTriangleFill,
+  PlusSquare,
+  ThreeDotsVertical,
+} from "../helpers/bsIcons"
 import { RoutePill } from "./routePill"
 import { Card, CloseButton, Dropdown } from "react-bootstrap"
-import { joinTruthy } from "../helpers/dom"
+import { joinClasses, joinTruthy } from "../helpers/dom"
 
 interface Props {
   route: Route
@@ -63,25 +67,49 @@ export const Header = ({
   return (
     <Card className="c-route-ladder__header">
       <Card.Body>
-        <div className="c-route-ladder__header__action-container">
+        <div
+          className={joinClasses([
+            "c-route-ladder__dropdown",
+            hasAlert && "c-route-ladder__dropdown--non-skate-alert",
+          ])}
+        >
           {showDropdown && (
             <Dropdown className="border-box inherit-box">
               <Dropdown.Toggle
-                className="c-route-ladder__dropdown-button d-none d-sm-block"
+                className="c-route-ladder__dropdown-button d-none d-sm-flex"
                 aria-labelledby={joinTruthy([
                   routePillId,
                   routeOptionsToggleId,
                 ])}
               >
+                <ThreeDotsVertical />
                 <span className="visually-hidden" id={routeOptionsToggleId}>
                   Route Options
                 </span>
               </Dropdown.Toggle>
               <Dropdown.Menu>
+                <Dropdown.Header>
+                  <div className="c-route-ladder__dropdown-header-text">
+                    Adjustments
+                  </div>
+                </Dropdown.Header>
                 <Dropdown.Item className="icon-link" onClick={onClickAddDetour}>
-                  <PlusSquare />
-                  Add detour
+                  <PlusSquare /> Add detour
                 </Dropdown.Item>
+                {hasAlert && (
+                  <>
+                    <Dropdown.Divider className="border-top-0" />
+                    <Dropdown.Header>
+                      <div className="c-route-ladder__dropdown-header-text">
+                        Active detours
+                      </div>
+                    </Dropdown.Header>
+                    <Dropdown.ItemText className="lh-base pb-4">
+                      This route has an active detour. View detour details on{" "}
+                      <a href="https://www.mbta.com/">mbta.com</a> or in IRIS.
+                    </Dropdown.ItemText>
+                  </>
+                )}
               </Dropdown.Menu>
             </Dropdown>
           )}

diff --git a/assets/src/helpers/bsIcons.tsx b/assets/src/helpers/bsIcons.tsx
@@ -358,6 +358,24 @@ export const StopCircle = (props: SvgProps) => (
   </svg>
 )
 
+/**
+ * @returns https://icons.getbootstrap.com/icons/three-dots-vertical/
+ */
+export const ThreeDotsVertical = (props: SvgProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    className="bi bi-three-dots-vertical"
+    viewBox="0 0 16 16"
+    aria-hidden
+    {...props}
+  >
+    <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0" />
+  </svg>
+)
+
 /**
  * @returns https://icons.getbootstrap.com/icons/x-square/
  */

diff --git a/assets/tests/components/__snapshots__/ladderPage.test.tsx.snap b/assets/tests/components/__snapshots__/ladderPage.test.tsx.snap
@@ -296,7 +296,7 @@ exports[`LadderPage renders with alerts 1`] = `
             class="card-body"
           >
             <div
-              class="c-route-ladder__header__action-container"
+              class="c-route-ladder__dropdown"
             />
             <div
               class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
@@ -337,7 +337,7 @@ exports[`LadderPage renders with alerts 1`] = `
             class="card-body"
           >
             <div
-              class="c-route-ladder__header__action-container"
+              class="c-route-ladder__dropdown c-route-ladder__dropdown--non-skate-alert"
             >
               <div
                 class="mock-tippy"
@@ -606,7 +606,7 @@ exports[`LadderPage renders with route tabs 1`] = `
             class="card-body"
           >
             <div
-              class="c-route-ladder__header__action-container"
+              class="c-route-ladder__dropdown"
             />
             <div
               class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
@@ -826,7 +826,7 @@ exports[`LadderPage renders with selectedRoutes in different order than routes d
             class="card-body"
           >
             <div
-              class="c-route-ladder__header__action-container"
+              class="c-route-ladder__dropdown"
             />
             <div
               class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
@@ -867,7 +867,7 @@ exports[`LadderPage renders with selectedRoutes in different order than routes d
             class="card-body"
           >
             <div
-              class="c-route-ladder__header__action-container"
+              class="c-route-ladder__dropdown"
             />
             <div
               class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
@@ -1087,7 +1087,7 @@ exports[`LadderPage renders with timepoints 1`] = `
             class="card-body"
           >
             <div
-              class="c-route-ladder__header__action-container"
+              class="c-route-ladder__dropdown"
             />
             <div
               class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
@@ -1246,7 +1246,7 @@ exports[`LadderPage renders with timepoints 1`] = `
             class="card-body"
           >
             <div
-              class="c-route-ladder__header__action-container"
+              class="c-route-ladder__dropdown"
             />
             <div
               class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"

diff --git a/assets/tests/components/__snapshots__/minimalLadder.test.tsx.snap b/assets/tests/components/__snapshots__/minimalLadder.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`MinimalLadders renders route ladders 1`] = `
           class="card-body"
         >
           <div
-            class="c-route-ladder__header__action-container"
+            class="c-route-ladder__dropdown"
           />
           <div
             class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"
@@ -175,7 +175,7 @@ exports[`MinimalLadders renders route ladders 1`] = `
           class="card-body"
         >
           <div
-            class="c-route-ladder__header__action-container"
+            class="c-route-ladder__dropdown"
           />
           <div
             class="c-route-pill c-route-pill--bus c-route-pill--large-format c-route-ladder__route-pill c-route-pill"