feat: Active detour panel button / icons (#2782)

* tweak: Updated ui-alert color (only used in one other place) * feat: Updated "Return to route button" and added active alert icon * tweak: Standardize icon-link gap of .5rem
mbta · Sep 12, 2024 · c332225 · c332225
1 parent 9b24f18
commit c332225
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 19 deletions.
diff --git a/assets/css/_diversion_page.scss b/assets/css/_diversion_page.scss
@@ -107,3 +107,8 @@
 .c-diversion-panel__help-text {
   line-height: 1.5;
 }
+
+.c-active-detour__alert-icon {
+  height: 1.5rem;
+  width: 1.5rem;
+}
diff --git a/assets/css/bootstrap/_variable_overrides.scss b/assets/css/bootstrap/_variable_overrides.scss
@@ -34,3 +34,5 @@ $grid-breakpoints: (
   // lg - Breakpoint between desktop and wide-screen desktop
   lg: 1340px,
 );
+
+$icon-link-gap: 0.5rem;
diff --git a/assets/css/color/_definitions.scss b/assets/css/color/_definitions.scss
@@ -18,7 +18,7 @@
 $primary: tokens.$eggplant-500;
 $secondary: tokens.$gray-500;
 $info: tokens.$kiwi-500;
-$ui-alert: tokens.$strawberry-500;
+$ui-alert: new_tokens.$strawberry-500;
 $service-alert: tokens.$lemon-500;
 $light: tokens.$gray-100;
 $dark: tokens.$gray-900;

diff --git a/assets/src/components/detours/activeDetourPanel.tsx b/assets/src/components/detours/activeDetourPanel.tsx
@@ -3,7 +3,11 @@ import { DetourDirection } from "../../models/detour"
 import { Button, ListGroup } from "react-bootstrap"
 import { Panel } from "./diversionPage"
 import { Stop } from "../../schedule"
-import { ArrowLeft } from "../../helpers/bsIcons"
+import {
+  ArrowLeft,
+  ExclamationTriangleFill,
+  StopCircle,
+} from "../../helpers/bsIcons"
 import { AffectedRoute, MissedStops } from "./detourPanelComponents"
 
 export interface ActiveDetourPanelProps {
@@ -36,17 +40,19 @@ export const ActiveDetourPanel = ({
 
     <Panel.Body className="d-flex flex-column">
       <Panel.Body.ScrollArea>
-        {onNavigateBack && (
-          <Button
-            className="icon-link my-3"
-            variant="outline-primary"
-            onClick={onNavigateBack}
-          >
-            <ArrowLeft />
-            Back
-          </Button>
-        )}
-
+        <div className="d-flex justify-content-between align-items-center">
+          {onNavigateBack && (
+            <Button
+              className="icon-link my-3"
+              variant="outline-primary"
+              onClick={onNavigateBack}
+            >
+              <ArrowLeft />
+              Back
+            </Button>
+          )}
+          <ExclamationTriangleFill className="c-active-detour__alert-icon" />
+        </div>
         <AffectedRoute
           routeName={routeName}
           routeDescription={routeDescription}
@@ -85,8 +91,13 @@ export const ActiveDetourPanel = ({
       </Panel.Body.ScrollArea>
 
       <Panel.Body.Footer>
-        <Button className="flex-grow-1 m-3" onClick={onDeactivateDetour}>
-          Deactivate Detour
+        <Button
+          variant="ui-alert"
+          className="flex-grow-1 m-3 icon-link text-light"
+          onClick={onDeactivateDetour}
+        >
+          <StopCircle />
+          Return to regular route
         </Button>
       </Panel.Body.Footer>
     </Panel.Body>

diff --git a/assets/src/helpers/bsIcons.tsx b/assets/src/helpers/bsIcons.tsx
@@ -285,6 +285,25 @@ export const QuestionFill = (props: SvgProps) => (
   </svg>
 )
 
+/**
+ * @returns https://icons.getbootstrap.com/icons/stop-circle/
+ */
+export const StopCircle = (props: SvgProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    className="bi bi-stop-circle"
+    viewBox="0 0 16 16"
+    aria-hidden
+    {...props}
+  >
+    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
+    <path d="M5 6.5A1.5 1.5 0 0 1 6.5 5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5z" />
+  </svg>
+)
+
 /**
  * @returns https://icons.getbootstrap.com/icons/x-square/
  */

diff --git a/assets/tests/components/detours/diversionPageActivate.test.tsx b/assets/tests/components/detours/diversionPageActivate.test.tsx
@@ -96,23 +96,23 @@ describe("DiversionPage activate workflow", () => {
     expect(screen.getByRole("heading", { name: "Active Detour" })).toBeVisible()
   })
 
-  test("'Active Detour' screen has a 'Deactivate Detour' button", async () => {
+  test("'Active Detour' screen has a 'Return to regular route' button", async () => {
     await diversionPageOnReviewScreen()
 
     await userEvent.click(activateDetourButton.get())
 
     expect(
-      screen.getByRole("button", { name: "Deactivate Detour" })
+      screen.getByRole("button", { name: "Return to regular route" })
     ).toBeVisible()
   })
 
-  test("clicking the 'Deactivate Detour' button shows the 'Past Detour' screen", async () => {
+  test("clicking the 'Return to regular route' button shows the 'Past Detour' screen", async () => {
     await diversionPageOnReviewScreen()
 
     await userEvent.click(activateDetourButton.get())
 
     await userEvent.click(
-      screen.getByRole("button", { name: "Deactivate Detour" })
+      screen.getByRole("button", { name: "Return to regular route" })
     )
     expect(
       screen.queryByRole("heading", { name: "Active Detour" })