feat: Button icons for detour creation (#2849)

* feat: Add icons to buttons in create detour workflow
mbta · Oct 16, 2024 · 493e088 · 493e088
1 parent 829201a
commit 493e088
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 19 deletions.
diff --git a/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx b/assets/src/components/detours/detourPanels/detourFinishedPanel.tsx
@@ -65,11 +65,11 @@ export const DetourFinishedPanel = ({
         </OverlayTrigger>
         {onActivateDetour && (
           <Button
-            className="m-3 flex-grow-1"
-            variant="missed-stop"
+            className="m-3 flex-grow-1 icon-link justify-content-center"
             onClick={onActivateDetour}
           >
-            Activate Detour
+            <BsIcons.Power />
+            Start Detour
           </Button>
         )}
       </Panel.Body.Footer>

diff --git a/assets/src/components/detours/detourPanels/detourRouteSelectionPanel.tsx b/assets/src/components/detours/detourPanels/detourRouteSelectionPanel.tsx
@@ -8,6 +8,7 @@ import {
   RoutePatternId,
 } from "../../../schedule"
 import RoutePropertiesCard from "../../mapPage/routePropertiesCard"
+import { Brush } from "../../../helpers/bsIcons"
 
 interface SelectedRouteInfoWithRoutePatterns {
   selectedRoute: Route
@@ -142,7 +143,11 @@ export const DetourRouteSelectionPanel = ({
         </Panel.Body.ScrollArea>
 
         <Panel.Body.Footer className="d-flex">
-          <Button className="m-3 flex-grow-1" onClick={onConfirm}>
+          <Button
+            className="m-3 flex-grow-1 icon-link justify-content-center"
+            onClick={onConfirm}
+          >
+            <Brush />
             Start drawing detour
           </Button>
         </Panel.Body.Footer>

diff --git a/assets/src/components/detours/detourPanels/drawDetourPanel.tsx b/assets/src/components/detours/detourPanels/drawDetourPanel.tsx
@@ -3,7 +3,7 @@ import { DetourShape } from "../../../models/detour"
 import { Button, ListGroup } from "react-bootstrap"
 import { Panel } from "../diversionPage"
 import { Stop } from "../../../schedule"
-import { ArrowLeft } from "../../../helpers/bsIcons"
+import { ArrowLeft, CardChecklist } from "../../../helpers/bsIcons"
 import { AffectedRoute, MissedStops } from "../detourPanelComponents"
 
 export interface DrawDetourPanelProps {
@@ -77,8 +77,12 @@ export const DrawDetourPanel = ({
       </Panel.Body.ScrollArea>
 
       <Panel.Body.Footer hidden={!detourFinished}>
-        <Button className="flex-grow-1 m-3" onClick={onReviewDetour}>
-          Review Detour
+        <Button
+          className="flex-grow-1 m-3 icon-link justify-content-center"
+          onClick={onReviewDetour}
+        >
+          <CardChecklist />
+          Review
         </Button>
       </Panel.Body.Footer>
     </Panel.Body>

diff --git a/assets/src/helpers/bsIcons.tsx b/assets/src/helpers/bsIcons.tsx
@@ -105,6 +105,43 @@ export const BoxArrowRight = (props: SvgProps) => (
   </svg>
 )
 
+/**
+ * @returns https://icons.getbootstrap.com/icons/brush/
+ */
+export const Brush = (props: SvgProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    className="bi bi-brush"
+    viewBox="0 0 16 16"
+    aria-hidden
+    {...props}
+  >
+    <path d="M15.825.12a.5.5 0 0 1 .132.584c-1.53 3.43-4.743 8.17-7.095 10.64a6.1 6.1 0 0 1-2.373 1.534c-.018.227-.06.538-.16.868-.201.659-.667 1.479-1.708 1.74a8.1 8.1 0 0 1-3.078.132 4 4 0 0 1-.562-.135 1.4 1.4 0 0 1-.466-.247.7.7 0 0 1-.204-.288.62.62 0 0 1 .004-.443c.095-.245.316-.38.461-.452.394-.197.625-.453.867-.826.095-.144.184-.297.287-.472l.117-.198c.151-.255.326-.54.546-.848.528-.739 1.201-.925 1.746-.896q.19.012.348.048c.062-.172.142-.38.238-.608.261-.619.658-1.419 1.187-2.069 2.176-2.67 6.18-6.206 9.117-8.104a.5.5 0 0 1 .596.04M4.705 11.912a1.2 1.2 0 0 0-.419-.1c-.246-.013-.573.05-.879.479-.197.275-.355.532-.5.777l-.105.177c-.106.181-.213.362-.32.528a3.4 3.4 0 0 1-.76.861c.69.112 1.736.111 2.657-.12.559-.139.843-.569.993-1.06a3 3 0 0 0 .126-.75zm1.44.026c.12-.04.277-.1.458-.183a5.1 5.1 0 0 0 1.535-1.1c1.9-1.996 4.412-5.57 6.052-8.631-2.59 1.927-5.566 4.66-7.302 6.792-.442.543-.795 1.243-1.042 1.826-.121.288-.214.54-.275.72v.001l.575.575zm-4.973 3.04.007-.005zm3.582-3.043.002.001h-.002z" />
+  </svg>
+)
+
+/**
+ * @returns https://icons.getbootstrap.com/icons/card-checklist/
+ */
+export const CardChecklist = (props: SvgProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    className="bi bi-card-checklist"
+    viewBox="0 0 16 16"
+    aria-hidden
+    {...props}
+  >
+    <path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2z" />
+    <path d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0M7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0" />
+  </svg>
+)
+
 /**
  * @returns https://icons.getbootstrap.com/icons/chat-fill/
  */
@@ -321,6 +358,25 @@ export const PlusSquare = (props: SvgProps) => (
   </svg>
 )
 
+/**
+ * @returns https://icons.getbootstrap.com/icons/power/
+ */
+export const Power = (props: SvgProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    fill="currentColor"
+    className="bi bi-power"
+    viewBox="0 0 16 16"
+    aria-hidden
+    {...props}
+  >
+    <path d="M7.5 1v7h1V1z" />
+    <path d="M3 8.812a5 5 0 0 1 2.578-4.375l-.485-.874A6 6 0 1 0 11 3.616l-.501.865A5 5 0 1 1 3 8.812" />
+  </svg>
+)
+
 /**
  * @returns https://icons.getbootstrap.com/icons/question-circle-fill/
  */

diff --git a/assets/tests/components/detours/diversionPage.test.tsx b/assets/tests/components/detours/diversionPage.test.tsx
@@ -377,15 +377,13 @@ describe("DiversionPage", () => {
       fireEvent.click(originalRouteShape.get(container))
     })
 
-    expect(
-      screen.getByRole("button", { name: "Review Detour", hidden: true })
-    ).not.toBeVisible()
+    expect(reviewDetourButton.query()).not.toBeInTheDocument()
 
     act(() => {
       fireEvent.click(originalRouteShape.get(container))
     })
 
-    expect(screen.getByRole("button", { name: "Review Detour" })).toBeVisible()
+    expect(reviewDetourButton.get()).toBeVisible()
   })
 
   test.each<{
@@ -1074,7 +1072,7 @@ describe("DiversionPage", () => {
     })
   })
 
-  test("When 'Review Detour' button is clicked, shows 'View Draft Detour' screen", async () => {
+  test("When 'Review' button is clicked, shows 'View Draft Detour' screen", async () => {
     const { container } = render(<DiversionPage />)
 
     act(() => {
@@ -1091,7 +1089,7 @@ describe("DiversionPage", () => {
     expect(viewDraftDetourHeading.get()).toBeVisible()
   })
 
-  test("When the finished-detour API call errors and 'Review Detour' button is clicked, shows 'View Draft Detour' screen", async () => {
+  test("When the finished-detour API call errors and 'Review' button is clicked, shows 'View Draft Detour' screen", async () => {
     jest.mocked(fetchFinishedDetour).mockRejectedValue("NOPE")
 
     const { container } = render(<DiversionPage />)
@@ -1110,7 +1108,7 @@ describe("DiversionPage", () => {
     expect(viewDraftDetourHeading.get()).toBeVisible()
   })
 
-  test("When the detour-directions API call errors and 'Review Detour' button is clicked, shows 'View Draft Detour' screen", async () => {
+  test("When the detour-directions API call errors and 'Review' button is clicked, shows 'View Draft Detour' screen", async () => {
     jest.mocked(fetchDetourDirections).mockRejectedValue("NOPE")
 
     const { container } = render(<DiversionPage />)
@@ -1199,9 +1197,7 @@ describe("DiversionPage", () => {
 
     await waitFor(() => {
       expect(editDetourButton.query()).not.toBeInTheDocument()
-      expect(
-        screen.getByRole("button", { name: "Review Detour" })
-      ).toBeVisible()
+      expect(reviewDetourButton.get()).toBeVisible()
 
       expect(screen.getByRole("button", { name: "Undo" })).not.toBeDisabled()
       expect(screen.getByRole("button", { name: "Clear" })).not.toBeDisabled()

diff --git a/assets/tests/testHelpers/selectors/components/detours/diversionPage.tsx b/assets/tests/testHelpers/selectors/components/detours/diversionPage.tsx
@@ -1,9 +1,9 @@
 import { expect } from "@jest/globals"
 import { byRole } from "testing-library-selector"
 
-export const reviewDetourButton = byRole("button", { name: "Review Detour" })
+export const reviewDetourButton = byRole("button", { name: "Review" })
 export const activateDetourButton = byRole("button", {
-  name: "Activate Detour",
+  name: "Start Detour",
 })
 export const editDetourButton = byRole("button", { name: "Edit" })