diff --git a/assets/src/components/app.tsx b/assets/src/components/app.tsx index 3d9c9cf16..ed83bff93 100644 --- a/assets/src/components/app.tsx +++ b/assets/src/components/app.tsx @@ -77,12 +77,12 @@ export const AppRoutes = () => { element={} /> } /> - {mapMode.title === "Search" ? ( + {mapMode.supportsRightPanel ? ( ) : null} - {mapMode.title === "Map" ? ( + {!mapMode.supportsRightPanel ? ( ) : null} diff --git a/assets/src/components/mapMarkers.tsx b/assets/src/components/mapMarkers.tsx index 7202801e8..6991f403e 100644 --- a/assets/src/components/mapMarkers.tsx +++ b/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 = ({ diff --git a/assets/src/components/nav/bottomNavMobile.tsx b/assets/src/components/nav/bottomNavMobile.tsx index 68d9e2654..2515a948f 100644 --- a/assets/src/components/nav/bottomNavMobile.tsx +++ b/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 = ({ title={mapMode.title} to={mapMode.path} > - + diff --git a/assets/src/components/nav/leftNav.tsx b/assets/src/components/nav/leftNav.tsx index da7bf8649..47ff83414 100644 --- a/assets/src/components/nav/leftNav.tsx +++ b/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} > - + {collapsed ? null : mapMode.title} diff --git a/assets/src/components/nav/topNavMobile.tsx b/assets/src/components/nav/topNavMobile.tsx index 483a43ec0..2d39e5e26 100644 --- a/assets/src/components/nav/topNavMobile.tsx +++ b/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 { diff --git a/assets/src/helpers/icon.tsx b/assets/src/helpers/icon.tsx index 01e631503..915549d93 100644 --- a/assets/src/helpers/icon.tsx +++ b/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) diff --git a/assets/src/util/mapMode.tsx b/assets/src/util/mapMode.tsx index 1665280e6..a206d140f 100644 --- a/assets/src/util/mapMode.tsx +++ b/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: , + navIcon: SearchIcon, + supportsRightPanel: true, +} + +export const searchMapConfig = { + path: "/map", + title: "Search Map", + element: , + navIcon: SearchMapIcon, + supportsRightPanel: false, } export const mapModeForUser = (): NavMode => - inTestGroup(MAP_BETA_GROUP_NAME) - ? { path: "/map", title: "Map", element: } - : { path: "/search", title: "Search", element: } + inTestGroup(MAP_BETA_GROUP_NAME) ? searchMapConfig : legacyMapConfig diff --git a/assets/static/images/icon-search-map.svg b/assets/static/images/icon-search-map.svg new file mode 100644 index 000000000..7681844be --- /dev/null +++ b/assets/static/images/icon-search-map.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/svgo.yml b/assets/svgo.yml deleted file mode 100644 index a21e01278..000000000 --- a/assets/svgo.yml +++ /dev/null @@ -1,5 +0,0 @@ -plugins: - - removeTitle: true - - removeAttrs: - attrs: - - "id" diff --git a/assets/tests/components/nav.test.tsx b/assets/tests/components/nav.test.tsx index bd4b17ad1..e245e7c0c 100644 --- a/assets/tests/components/nav.test.tsx +++ b/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", () => { diff --git a/assets/tests/components/nav/bottomNavMobile.test.tsx b/assets/tests/components/nav/bottomNavMobile.test.tsx index 55cb9d24a..fa2a4f437 100644 --- a/assets/tests/components/nav/bottomNavMobile.test.tsx +++ b/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() }) }) diff --git a/assets/tests/components/nav/leftNav.test.tsx b/assets/tests/components/nav/leftNav.test.tsx index eda71ef30..f8ae0ee1c 100644 --- a/assets/tests/components/nav/leftNav.test.tsx +++ b/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 () => { diff --git a/assets/tests/components/nav/topNavMobile.test.tsx b/assets/tests/components/nav/topNavMobile.test.tsx index bd76415f1..922a79a42 100644 --- a/assets/tests/components/nav/topNavMobile.test.tsx +++ b/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") + }) }) diff --git a/assets/tests/helpers/icon.test.tsx b/assets/tests/helpers/icon.test.tsx index 6e996a919..fa4ccee9d 100644 --- a/assets/tests/helpers/icon.test.tsx +++ b/assets/tests/helpers/icon.test.tsx @@ -30,6 +30,7 @@ import { RedLineIcon, ReverseIcon, SearchIcon, + SearchMapIcon, TriangleDownIcon, TriangleUpIcon, UpDownIcon, @@ -66,6 +67,7 @@ describe.each([ ["RedLineIcon", RedLineIcon], ["ReverseIcon", ReverseIcon], ["SearchIcon", SearchIcon], + ["SearchMapIcon", SearchMapIcon], ["TriangleDownIcon", TriangleDownIcon], ["TriangleUpIcon", TriangleUpIcon], ["UpDownIcon", UpDownIcon], diff --git a/assets/tests/util/mapMode.test.tsx b/assets/tests/util/mapMode.test.tsx index ff72fe413..503396ea4 100644 --- a/assets/tests/util/mapMode.test.tsx +++ b/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: , + navIcon: SearchMapIcon, + supportsRightPanel: false, }) }) @@ -27,6 +30,8 @@ describe("mapModeForUser", () => { path: "/search", title: "Search", element: , + navIcon: SearchIcon, + supportsRightPanel: true, }) }) }) diff --git a/assets/webpack.config.js b/assets/webpack.config.js index c148ad7cc..ef483e132 100644 --- a/assets/webpack.config.js +++ b/assets/webpack.config.js @@ -2,18 +2,18 @@ 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: [ @@ -21,7 +21,7 @@ module.exports = (env, options) => { 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, - }) + } }