feat: green dot cursor for existing route shape (#2372)

* feat: green dot cursor for existing route shape * fix: improve cursor SVG to look better near edges
mbta · Jan 31, 2024 · 60e74f7 · 60e74f7
1 parent b65aee6
commit 60e74f7
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 2 deletions.
diff --git a/assets/css/detours/_detour_map.scss b/assets/css/detours/_detour_map.scss
@@ -2,6 +2,12 @@
   stroke: $color-kiwi-500;
 }
 
+.c-detour_map--original-route-shape__unstarted {
+  cursor: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E .color %7B fill: %2303A900; %7D %3C/style%3E%3Ccircle cx='11' cy='11' r='10' class='color' style='filter: opacity(0.5) blur(0.5px)'/%3E%3Ccircle cx='11' cy='11' r='7' class='color' stroke='white' stroke-width='2'/%3E%3C/svg%3E")
+      11 11,
+    pointer;
+}
+
 .c-detour_map--detour-route-shape {
   stroke: $color-lemon-500;
 }

diff --git a/assets/src/components/detours/detourMap.tsx b/assets/src/components/detours/detourMap.tsx
@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useId } from "react"
 import { LatLngLiteral } from "leaflet"
 import { Polyline, useMapEvents } from "react-leaflet"
 import Leaflet from "leaflet"
@@ -13,6 +13,7 @@ import {
   shapePointToLatLngLiteral,
 } from "../../util/pointLiterals"
 import { MapTooltip } from "../map/tooltip"
+import { joinClasses } from "../../helpers/dom"
 
 interface DetourMapProps {
   /**
@@ -111,7 +112,14 @@ export const DetourMap = ({
 
     <Polyline
       positions={originalShape.map(shapePointToLatLngLiteral)}
-      className="c-detour_map--original-route-shape"
+      className={joinClasses([
+        "c-detour_map--original-route-shape",
+        startPoint === undefined &&
+          "c-detour_map--original-route-shape__unstarted",
+      ])}
+      key={`detour-map-original-route-shape-${useId()}-${
+        startPoint === undefined
+      }`}
       bubblingMouseEvents={false}
       eventHandlers={{
         click: (e) => {

diff --git a/assets/tests/components/detours/detourMap.test.tsx b/assets/tests/components/detours/detourMap.test.tsx
@@ -44,6 +44,41 @@ describe("DetourMap", () => {
     expect(onClickOriginalShape).toHaveBeenNthCalledWith(1, shapePoint)
   })
 
+  test("`originalShape` has unstarted class before being clicked", async () => {
+    const onClickOriginalShape = jest.fn()
+    const shapePoint = { lat: 0, lon: 0 }
+    const { container } = render(
+      <DetourMapWithDefaults
+        originalShape={[shapePoint]}
+        onClickOriginalShape={onClickOriginalShape}
+      />
+    )
+
+    expect(
+      container.querySelector(
+        ".c-detour_map--original-route-shape.c-detour_map--original-route-shape__unstarted"
+      )!
+    ).toBeInTheDocument()
+  })
+
+  test("`originalShape` no longer has unstarted class after detour is started", async () => {
+    const onClickOriginalShape = jest.fn()
+    const shapePoint = { lat: 0, lon: 0 }
+    const { container } = render(
+      <DetourMapWithDefaults
+        originalShape={[shapePoint]}
+        startPoint={shapePoint}
+        onClickOriginalShape={onClickOriginalShape}
+      />
+    )
+
+    expect(
+      container.querySelector(
+        ".c-detour_map--original-route-shape.c-detour_map--original-route-shape__unstarted"
+      )
+    ).toBeNull()
+  })
+
   test("when map is clicked, fires `onClickMap`", async () => {
     const onClickMap = jest.fn()
     const { container } = render(