feat(nav): Updated search map title & icon

assets/src/components/app.tsx

@@ -77,12 +77,12 @@ export const AppRoutes = () => {
                   element={<ShuttleMapPage />}
                 />
                 <BrowserRoute path="/settings" element={<SettingsPage />} />
-                {mapMode.title === "Search" ? (
+                {mapMode.supportsRightPanel ? (
                   <BrowserRoute path={mapMode.path} element={mapMode.element} />
                 ) : null}
               </Route>
               <Route>
-                {mapMode.title === "Map" ? (
+                {!mapMode.supportsRightPanel ? (
                   <BrowserRoute path={mapMode.path} element={mapMode.element} />
                 ) : null}
               </Route>

assets/src/components/mapMarkers.tsx

@@ -332,6 +332,7 @@ const garageLeafletIcon = Leaflet.divIcon({
   html: garageIcon,
   className: "m-garage-icon",
   iconAnchor: new Leaflet.Point(10, 25),
+  iconSize: [21, 25],
 })
 
 const Garage = ({

assets/src/components/nav/bottomNavMobile.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { LadderIcon, MapIcon, SearchIcon, SwingIcon } from "../../helpers/icon"
+import { LadderIcon, MapIcon, SwingIcon } from "../../helpers/icon"
 import { NavLink } from "react-router-dom"
 import { tagManagerEvent } from "../../helpers/googleTagManager"
 import { mapModeForUser } from "../../util/mapMode"
@@ -57,7 +57,7 @@ const BottomNavMobile: React.FC<Props> = ({
             title={mapMode.title}
             to={mapMode.path}
           >
-            <SearchIcon className="m-bottom-nav-mobile__icon" />
+            <mapMode.navIcon className="m-bottom-nav-mobile__icon" />
           </NavLink>
         </li>
 

assets/src/components/nav/leftNav.tsx

@@ -8,7 +8,6 @@ import NotificationBellIcon from "../notificationBellIcon"
 import {
   LadderIcon,
   MapIcon,
-  SearchIcon,
   LateIcon,
   SwingIcon,
   DoubleChevronRightIcon,
@@ -111,7 +110,7 @@ const LeftNav = ({
               title={mapMode.title}
               to={mapMode.path}
             >
-              <SearchIcon className="m-left-nav__icon" />
+              <mapMode.navIcon className="m-left-nav__icon" />
               {collapsed ? null : mapMode.title}
             </NavLink>
           </li>

assets/src/components/nav/topNavMobile.tsx

@@ -5,6 +5,7 @@ import NotificationBellIcon from "../notificationBellIcon"
 import { currentTabName, RouteTab } from "../../models/routeTab"
 import NavMenu from "./navMenu"
 import { tagManagerEvent } from "../../helpers/googleTagManager"
+import { searchMapConfig } from "../../util/mapMode"
 
 export const toTitleCase = (str: string): string => {
   return str.replace(
@@ -18,12 +19,9 @@ export const pageOrTabName = (
   pathname: string,
   routeTabs: RouteTab[]
 ): string => {
-  let tabName = "Skate"
-
-  if (pathname === "/") tabName = currentTabName(routeTabs)
-  else tabName = toTitleCase(pathname.replace("/", "").replace("-", " "))
-
-  return tabName
+  if (pathname === "/") return currentTabName(routeTabs)
+  if (pathname === searchMapConfig.path) return searchMapConfig.title
+  else return toTitleCase(pathname.replace("/", "").replace("-", " "))
 }
 
 interface Props {

assets/src/helpers/icon.tsx

@@ -92,6 +92,8 @@ import saveIconSvg from "../../static/images/icon-save.svg"
 // @ts-ignore
 import searchIconSvg from "../../static/images/icon-search.svg"
 // @ts-ignore
+import searchMapIconSvg from "../../static/images/icon-search-map.svg"
+// @ts-ignore
 import settingsIconSvg from "../../static/images/icon-settings.svg"
 // @ts-ignore
 import speechBubbleIconSvg from "../../static/images/icon-speech-bubble.svg"
@@ -215,6 +217,8 @@ export const SaveIcon = svgIcon(saveIconSvg)
 
 export const SearchIcon = svgIcon(searchIconSvg)
 
+export const SearchMapIcon = svgIcon(searchMapIconSvg)
+
 export const SettingsIcon = svgIcon(settingsIconSvg)
 
 export const SpeechBubbleIcon = svgIcon(speechBubbleIconSvg)

assets/src/util/mapMode.tsx

@@ -2,15 +2,32 @@ import React from "react"
 import { ReactElement } from "react"
 import MapPage from "../components/mapPage"
 import SearchPage from "../components/searchPage"
+import { SearchIcon, SearchMapIcon } from "../helpers/icon"
 import inTestGroup, { MAP_BETA_GROUP_NAME } from "../userInTestGroup"
 
 export interface NavMode {
   path: string
   title: string
   element: ReactElement
+  navIcon: (props: any) => ReactElement
+  supportsRightPanel: boolean
+}
+
+const legacyMapConfig = {
+  path: "/search",
+  title: "Search",
+  element: <SearchPage />,
+  navIcon: SearchIcon,
+  supportsRightPanel: true,
+}
+
+export const searchMapConfig = {
+  path: "/map",
+  title: "Search Map",
+  element: <MapPage />,
+  navIcon: SearchMapIcon,
+  supportsRightPanel: false,
 }
 
 export const mapModeForUser = (): NavMode =>
-  inTestGroup(MAP_BETA_GROUP_NAME)
-    ? { path: "/map", title: "Map", element: <MapPage /> }
-    : { path: "/search", title: "Search", element: <SearchPage /> }
+  inTestGroup(MAP_BETA_GROUP_NAME) ? searchMapConfig : legacyMapConfig

assets/tests/components/nav.test.tsx

@@ -71,7 +71,7 @@ describe("Nav", () => {
     expect(result.queryByText("Route Ladders")).toBeNull()
   })
 
-  test("renders nav item with title 'Map' if in map test group", () => {
+  test("renders nav item with title 'Search Map' if in map test group", () => {
     ;(getTestGroups as jest.Mock).mockReturnValue([MAP_BETA_GROUP_NAME])
 
     render(
@@ -83,7 +83,7 @@ describe("Nav", () => {
     )
 
     expect(screen.queryByTitle("Search")).toBeNull()
-    expect(screen.queryByTitle("Map")).toBeInTheDocument()
+    expect(screen.queryByTitle("Search Map")).toBeInTheDocument()
   })
 
   test("renders desktop nav content", () => {

assets/tests/components/nav/bottomNavMobile.test.tsx

@@ -37,7 +37,7 @@ describe("BottomNavMobile", () => {
     expect(tagManagerEvent).toHaveBeenCalledWith("swings_view_toggled")
   })
 
-  test("renders nav item with title 'Map' if in map test group", () => {
+  test("renders nav item with title 'Search Map' if in map test group", () => {
     ;(getTestGroups as jest.Mock).mockReturnValue([MAP_BETA_GROUP_NAME])
 
     render(
@@ -50,6 +50,6 @@ describe("BottomNavMobile", () => {
     )
 
     expect(screen.queryByTitle("Search")).toBeNull()
-    expect(screen.queryByTitle("Map")).toBeInTheDocument()
+    expect(screen.queryByTitle("Search Map")).toBeInTheDocument()
   })
 })

assets/tests/components/nav/leftNav.test.tsx

@@ -84,7 +84,7 @@ describe("LeftNav", () => {
     expect(result.queryByTitle("Expand")).not.toBeNull()
   })
 
-  test("renders nav item with title 'Map' if in map test group", () => {
+  test("renders nav item with title 'Search Map' if in map test group", () => {
     ;(getTestGroups as jest.Mock).mockReturnValueOnce([MAP_BETA_GROUP_NAME])
 
     render(
@@ -94,7 +94,7 @@ describe("LeftNav", () => {
     )
 
     expect(screen.queryByTitle("Search")).toBeNull()
-    expect(screen.getByTitle("Map")).toBeInTheDocument()
+    expect(screen.getByTitle("Search Map")).toBeInTheDocument()
   })
 
   test("can toggle nav menu on tablet layout", async () => {

assets/tests/components/nav/topNavMobile.test.tsx

@@ -75,4 +75,8 @@ describe("pageOrTabName", () => {
   test("returns page name for shuttle map", () => {
     expect(pageOrTabName("/shuttle-map", [])).toEqual("Shuttle Map")
   })
+
+  test("returns the custom title for the search map page", () => {
+    expect(pageOrTabName("/map", [])).toEqual("Search Map")
+  })
 })

assets/tests/util/mapMode.test.tsx

@@ -1,6 +1,7 @@
 import React from "react"
 import MapPage from "../../src/components/mapPage"
 import SearchPage from "../../src/components/searchPage"
+import { SearchIcon, SearchMapIcon } from "../../src/helpers/icon"
 import { MAP_BETA_GROUP_NAME } from "../../src/userInTestGroup"
 import getTestGroups from "../../src/userTestGroups"
 import { mapModeForUser } from "../../src/util/mapMode"
@@ -15,8 +16,10 @@ describe("mapModeForUser", () => {
     ;(getTestGroups as jest.Mock).mockReturnValueOnce([MAP_BETA_GROUP_NAME])
     expect(mapModeForUser()).toEqual({
       path: "/map",
-      title: "Map",
+      title: "Search Map",
       element: <MapPage />,
+      navIcon: SearchMapIcon,
+      supportsRightPanel: false,
     })
   })
 
@@ -27,6 +30,8 @@ describe("mapModeForUser", () => {
       path: "/search",
       title: "Search",
       element: <SearchPage />,
+      navIcon: SearchIcon,
+      supportsRightPanel: true,
     })
   })
 })

assets/webpack.config.js

@@ -2,26 +2,26 @@ const path = require("path")
 const glob = require("glob")
 const MiniCssExtractPlugin = require("mini-css-extract-plugin")
 const TerserPlugin = require("terser-webpack-plugin")
-const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
 const CopyWebpackPlugin = require("copy-webpack-plugin")
 
 module.exports = (env, options) => {
   const plugins = [
     new MiniCssExtractPlugin({ filename: "../css/app.css" }),
-    new CopyWebpackPlugin({ patterns: [{ from: "static/", to: "../" }] })
+    new CopyWebpackPlugin({ patterns: [{ from: "static/", to: "../" }] }),
   ]
 
-  const useMinimization = options.mode === "production";
+  const useMinimization = options.mode === "production"
 
-  return({
+  return {
     optimization: {
       minimize: useMinimization,
       minimizer: [
         new TerserPlugin({ parallel: true }),
         new CssMinimizerPlugin(),
       ],
     },
-    devtool: 'source-map',
+    devtool: "source-map",
     entry: {
       "./js/app.tsx": ["./src/app.tsx"].concat(glob.sync("./vendor/**/*.js")),
     },
@@ -59,7 +59,28 @@ module.exports = (env, options) => {
             {
               loader: "svgo-loader",
               options: {
-                externalConfig: "svgo.yml",
+                plugins: [
+                  {
+                    name: "preset-default",
+                    params: {
+                      overrides: {
+                        // viewBox is required to resize SVGs with CSS.
+                        // @see https://github.com/svg/svgo/issues/1128
+                        removeViewBox: false,
+                      },
+                    },
+                  },
+                  {
+                    name: "removeTitle",
+                    active: true,
+                  },
+                  {
+                    name: "removeAttrs",
+                    params: {
+                      attrs: ["id"],
+                    },
+                  },
+                ],
               },
             },
           ],
@@ -75,5 +96,5 @@ module.exports = (env, options) => {
       modules: ["deps", "node_modules"],
     },
     plugins: plugins,
-  })
+  }
 }