fix(ts/components/vehicleMarker): move vehicle marker classes onto svg

Right now if you were to pull out the icons into their own components, they wouldn't render correctly, so this fixes that the styling doesn't care if it's in a leaflet map or not.

assets/css/map/markers/_vehicle_marker.scss

@@ -1,53 +1,48 @@
 .c-vehicle-map__icon {
-  path {
-    fill: $color-primary-legacy;
-    stroke: $color-bg-base;
-    stroke-width: 2;
+  // Vehicle doesn't fit in marker as is.
+  overflow: visible;
 
-    &.on-time {
-      fill: $color-vehicle-ontime;
-    }
+  fill: $color-primary-legacy;
+  stroke: $color-bg-base;
+  stroke-width: 2;
 
-    &.early.early-red {
-      fill: $color-vehicle-red;
-    }
-    &.early.early-blue {
-      fill: $color-vehicle-blue;
-    }
+  .on-time {
+    fill: $color-vehicle-ontime;
+  }
 
-    &.late.early-red {
-      fill: $color-vehicle-blue;
-    }
-    &.late.early-blue {
-      fill: $color-vehicle-red;
-    }
+  .early.early-red {
+    fill: $color-vehicle-red;
+  }
+  .early.early-blue {
+    fill: $color-vehicle-blue;
+  }
 
-    &.off-course {
-      fill: $color-vehicle-off-course;
-    }
+  .late.early-red {
+    fill: $color-vehicle-blue;
+  }
+  .late.early-blue {
+    fill: $color-vehicle-red;
+  }
 
-    &.logged-out {
-      fill: $color-gray-300;
-      stroke: $color-gray-600;
-      stroke-width: 1px;
-    }
+  .off-course {
+    fill: $color-vehicle-off-course;
+  }
 
-    &.selected {
-      stroke: $color-eggplant-600;
-      stroke-width: 1.5;
-      filter: drop-shadow(1px 1px 4px $color-eggplant-400);
-    }
+  .logged-out {
+    fill: $color-gray-300;
+    stroke: $color-gray-600;
+    stroke-width: 1px;
   }
 
-  svg {
-    overflow: visible;
+  .selected {
+    stroke: $color-eggplant-600;
+    stroke-width: 1.5;
+    filter: drop-shadow(1px 1px 4px $color-eggplant-400);
   }
 }
 
 .c-vehicle-map__label {
-  svg {
-    overflow: visible;
-  }
+  overflow: visible;
 
   &.primary {
     font-size: var(--font-size-s);

assets/src/components/map/markers/vehicleMarker.tsx

@@ -90,10 +90,12 @@ export const VehicleMarker = ({
         ref={markerRef}
         divIconSettings={{
           iconAnchor: [0, 0],
-          className: "c-vehicle-map__icon",
+          // Disable default leaflet marker class
+          className: "",
         }}
         icon={
           <svg
+            className="c-vehicle-map__icon"
             height="24"
             viewBox="0 0 24 24"
             width="24"
@@ -124,14 +126,16 @@ export const VehicleMarker = ({
         position={position}
         divIconSettings={{
           iconAnchor: [labelBackgroundWidth / 2, isPrimary ? -16 : -10],
-          className: joinClasses([
-            "c-vehicle-map__label",
-            isPrimary ? "primary" : "secondary",
-            isSelected && "selected",
-          ]),
+          // Disable default leaflet marker class
+          className: "",
         }}
         icon={
           <svg
+            className={joinClasses([
+              "c-vehicle-map__label",
+              isPrimary ? "primary" : "secondary",
+              isSelected && "selected",
+            ])}
             viewBox={`0 0 ${labelBackgroundWidth} ${labelBackgroundHeight}`}
             width={labelBackgroundWidth}
             height={labelBackgroundHeight}

assets/tests/components/__snapshots__/mapPage.test.tsx.snap

@@ -1739,12 +1739,13 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
               </div>
             </div>
             <div
-              class="leaflet-marker-icon c-vehicle-map__icon leaflet-zoom-hide leaflet-interactive"
+              class="leaflet-marker-icon leaflet-zoom-hide leaflet-interactive"
               role="button"
               style="margin-left: 0px; margin-top: 0px; width: 12px; height: 12px; left: 223px; top: 27px; z-index: 1027;"
               tabindex="0"
             >
               <svg
+                class="c-vehicle-map__icon"
                 height="24"
                 viewBox="0 0 24 24"
                 width="24"
@@ -1758,12 +1759,13 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
               </svg>
             </div>
             <div
-              class="leaflet-marker-icon c-vehicle-map__label primary selected leaflet-zoom-hide leaflet-interactive"
+              class="leaflet-marker-icon leaflet-zoom-hide leaflet-interactive"
               role="button"
               style="margin-left: -20px; margin-top: 16px; width: 12px; height: 12px; left: 223px; top: 27px; z-index: 1027;"
               tabindex="0"
             >
               <svg
+                class="c-vehicle-map__label primary selected"
                 height="16"
                 viewBox="0 0 40 16"
                 width="40"
@@ -1787,12 +1789,13 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
               </svg>
             </div>
             <div
-              class="leaflet-marker-icon c-vehicle-map__icon leaflet-zoom-hide leaflet-interactive"
+              class="leaflet-marker-icon leaflet-zoom-hide leaflet-interactive"
               role="button"
               style="margin-left: 0px; margin-top: 0px; width: 12px; height: 12px; left: 223px; top: 27px; z-index: 27; z-index: 27;"
               tabindex="0"
             >
               <svg
+                class="c-vehicle-map__icon"
                 height="24"
                 viewBox="0 0 24 24"
                 width="24"
@@ -1806,12 +1809,13 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
               </svg>
             </div>
             <div
-              class="leaflet-marker-icon c-vehicle-map__label secondary leaflet-zoom-hide leaflet-interactive"
+              class="leaflet-marker-icon leaflet-zoom-hide leaflet-interactive"
               role="button"
               style="margin-left: -15px; margin-top: 10px; width: 12px; height: 12px; left: 223px; top: 27px; z-index: 27; z-index: 27;"
               tabindex="0"
             >
               <svg
+                class="c-vehicle-map__label secondary"
                 height="12"
                 viewBox="0 0 30 12"
                 width="30"

assets/tests/components/__snapshots__/shuttleMapPage.test.tsx.snap

@@ -208,12 +208,13 @@ exports[`Shuttle Map Page renders 1`] = `
               style="z-index: 499;"
             >
               <div
-                class="leaflet-marker-icon c-vehicle-map__icon leaflet-zoom-hide leaflet-interactive"
+                class="leaflet-marker-icon leaflet-zoom-hide leaflet-interactive"
                 role="button"
                 style="margin-left: 0px; margin-top: 0px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
                 <svg
+                  class="c-vehicle-map__icon"
                   height="24"
                   viewBox="0 0 24 24"
                   width="24"
@@ -227,12 +228,13 @@ exports[`Shuttle Map Page renders 1`] = `
                 </svg>
               </div>
               <div
-                class="leaflet-marker-icon c-vehicle-map__label primary leaflet-zoom-hide leaflet-interactive"
+                class="leaflet-marker-icon leaflet-zoom-hide leaflet-interactive"
                 role="button"
                 style="margin-left: -20px; margin-top: 16px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
                 <svg
+                  class="c-vehicle-map__label primary"
                   height="16"
                   viewBox="0 0 40 16"
                   width="40"
@@ -915,12 +917,13 @@ exports[`Shuttle Map Page renders selected shuttle routes 1`] = `
               style="z-index: 499;"
             >
               <div
-                class="leaflet-marker-icon c-vehicle-map__icon leaflet-zoom-hide leaflet-interactive"
+                class="leaflet-marker-icon leaflet-zoom-hide leaflet-interactive"
                 role="button"
                 style="margin-left: 0px; margin-top: 0px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
                 <svg
+                  class="c-vehicle-map__icon"
                   height="24"
                   viewBox="0 0 24 24"
                   width="24"
@@ -934,12 +937,13 @@ exports[`Shuttle Map Page renders selected shuttle routes 1`] = `
                 </svg>
               </div>
               <div
-                class="leaflet-marker-icon c-vehicle-map__label primary leaflet-zoom-hide leaflet-interactive"
+                class="leaflet-marker-icon leaflet-zoom-hide leaflet-interactive"
                 role="button"
                 style="margin-left: -20px; margin-top: 16px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
                 <svg
+                  class="c-vehicle-map__label primary"
                   height="16"
                   viewBox="0 0 40 16"
                   width="40"
@@ -1622,12 +1626,13 @@ exports[`Shuttle Map Page renders with all shuttles selected 1`] = `
               style="z-index: 499;"
             >
               <div
-                class="leaflet-marker-icon c-vehicle-map__icon leaflet-zoom-hide leaflet-interactive"
+                class="leaflet-marker-icon leaflet-zoom-hide leaflet-interactive"
                 role="button"
                 style="margin-left: 0px; margin-top: 0px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
                 <svg
+                  class="c-vehicle-map__icon"
                   height="24"
                   viewBox="0 0 24 24"
                   width="24"
@@ -1641,12 +1646,13 @@ exports[`Shuttle Map Page renders with all shuttles selected 1`] = `
                 </svg>
               </div>
               <div
-                class="leaflet-marker-icon c-vehicle-map__label primary leaflet-zoom-hide leaflet-interactive"
+                class="leaflet-marker-icon leaflet-zoom-hide leaflet-interactive"
                 role="button"
                 style="margin-left: -20px; margin-top: 16px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
                 <svg
+                  class="c-vehicle-map__label primary"
                   height="16"
                   viewBox="0 0 40 16"
                   width="40"
@@ -2638,12 +2644,13 @@ exports[`Shuttle Map Page renders with train vehicles 1`] = `
               style="z-index: 499;"
             >
               <div
-                class="leaflet-marker-icon c-vehicle-map__icon leaflet-zoom-hide leaflet-interactive"
+                class="leaflet-marker-icon leaflet-zoom-hide leaflet-interactive"
                 role="button"
                 style="margin-left: 0px; margin-top: 0px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
                 <svg
+                  class="c-vehicle-map__icon"
                   height="24"
                   viewBox="0 0 24 24"
                   width="24"
@@ -2657,12 +2664,13 @@ exports[`Shuttle Map Page renders with train vehicles 1`] = `
                 </svg>
               </div>
               <div
-                class="leaflet-marker-icon c-vehicle-map__label primary leaflet-zoom-hide leaflet-interactive"
+                class="leaflet-marker-icon leaflet-zoom-hide leaflet-interactive"
                 role="button"
                 style="margin-left: -20px; margin-top: 16px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
                 <svg
+                  class="c-vehicle-map__label primary"
                   height="16"
                   viewBox="0 0 40 16"
                   width="40"

assets/tests/components/mapPage.test.tsx

@@ -1587,7 +1587,7 @@ describe("<MapPage />", () => {
           })
           expect(selectedVehicleLabel).toBeInTheDocument()
           // this should be expressed via some accessibility property
-          expect(selectedVehicleLabel).toHaveClass("selected")
+          expect(selectedVehicleLabel.querySelector(".selected")).toBeVisible()
 
           expect(
             container.querySelectorAll(".c-vehicle-map__stop")

assets/tests/components/mapPage/mapDisplay.test.tsx

@@ -624,7 +624,7 @@ describe("<MapDisplay />", () => {
           })
           expect(selectedVehicleLabel).toBeInTheDocument()
           // this should be expressed via some accessibility property
-          expect(selectedVehicleLabel).toHaveClass("selected")
+          expect(selectedVehicleLabel.querySelector(".selected")).toBeVisible()
 
           expect(
             container.querySelectorAll(".c-vehicle-map__stop")