Fix territory shortcuts on mobile (#1145)

* Fix territory shortcuts on mobile

- remove zoom controls on mobile
- center search on mobile
- move up the territoriy shortcuts on mobile
- increase height of map on mobile in portrait mode
- update tests

* Reduce map height

- troubleshooting staging map height

* Removes null render in map

* Comment out conditional render of NavControls

* Revert height changes

* Remove MapSearch component

* Remove territory styling

* Console.log the device width

* Add logging width/mobile onLoad()

* Add isMobile to map height prop

* Swap conditional order of map height

* Add isMobileMapState to map height

* Add back all changes and force height to non-100%

- staging mobile seems to have height at 100% regardless of conditional. This will test this.
- this will break desktop on staging and is purposeful

* Remove API key for mapbox

* Add height as 90% to check conditional

* trying isMobile and windowWidth

* is not mobile and width > 1024

* use a function instead of a conditional

* Modify getHeight function

- remove Cypress tests from GHA to speed up build / deplot to staging

* Console.log windowWidth and constants.desktop

* Add boolean console.log

* Place values in DOM itself

* add height to div

* log out types

* add types nicely formatted

* Move height styling on map from inline to parent

- use a media query to detect mobile and set the map parents height via SASS

* Add back cypress tests

client/src/components/J40Map.module.scss

@@ -26,3 +26,11 @@
   overflow-y: auto;
   height: 90vh;
 }
+
+// This will control the height of the map when the device 
+// width is less than desktop (1024px)
+.j40Map {
+  @include at-media-max("desktop") {
+    height: 55vh;
+  }
+}

client/src/components/J40Map.module.scss.d.ts

@@ -8,6 +8,7 @@ declare namespace J40MapModuleScssNamespace {
     geolocateControl: string;
     detailView: string;
     mapInfoPanel: string;
+    j40Map: string;
   }
 }
 

client/src/components/J40Map.tsx

@@ -229,7 +229,7 @@ const J40Map = ({location}: IJ40Interface) => {
 
   return (
     <>
-      <Grid col={12} desktop={{col: 9}}>
+      <Grid desktop={{col: 9}} className={styles.j40Map}>
 
         {/**
          * This will render the MapSearch component
@@ -256,25 +256,28 @@ const J40Map = ({location}: IJ40Interface) => {
          * some children.
          */}
         <ReactMapGL
-          // Initialization props:
+          // ****** Initialization props: ******
           // access token is j40StylesReadToken
           mapboxApiAccessToken={
             process.env.MAPBOX_STYLES_READ_TOKEN ?
             process.env.MAPBOX_STYLES_READ_TOKEN : ''}
 
-          // Map state props:
+
+          // ****** Map state props: ******
           // http://visgl.github.io/react-map-gl/docs/api-reference/interactive-map#map-state
           {...viewport}
           mapStyle={
             process.env.MAPBOX_STYLES_READ_TOKEN ? `mapbox://styles/mapbox/streets-v11` :
             getOSBaseMap()
           }
-          // This styles will need to be enabled in some way when adding back the free map - #1133
           width="100%"
-          height={windowWidth < 1024 ? '44vh' : '100%'}
+          // Ajusting this height with a conditional statement will not render the map on staging.
+          // The reason for this issue is unknown. Consider styling the parent container via SASS.
+          height="100%"
           mapOptions={{hash: true}}
 
-          // Interaction option props:
+
+          // ****** Interaction option props: ******
           // http://visgl.github.io/react-map-gl/docs/api-reference/interactive-map#interaction-options
           maxZoom={constants.GLOBAL_MAX_ZOOM}
           minZoom={constants.GLOBAL_MIN_ZOOM}
@@ -282,7 +285,8 @@ const J40Map = ({location}: IJ40Interface) => {
           touchRotate={false}
           interactiveLayerIds={[constants.HIGH_ZOOM_LAYER_ID, constants.PRIORITIZED_HIGH_ZOOM_LAYER_ID]}
 
-          // Callback props:
+
+          // ****** Callback props: ******
           // http://visgl.github.io/react-map-gl/docs/api-reference/interactive-map#callbacks
           onViewportChange={setViewport}
           onClick={onClick}
@@ -401,10 +405,10 @@ const J40Map = ({location}: IJ40Interface) => {
           )}
 
           {/* This will add the navigation controls of the zoom in and zoom out buttons */}
-          <NavigationControl
+          { windowWidth > constants.USWDS_BREAKPOINTS.MOBILE_LG && <NavigationControl
             showCompass={false}
             className={styles.navigationControl}
-          />
+          /> }
 
           {/* This places Geolocation behind a feature flag */}
           {'gl' in flags ? <GeolocateControl
@@ -424,7 +428,7 @@ const J40Map = ({location}: IJ40Interface) => {
         </ReactMapGL>
       </Grid>
 
-      <Grid col={12} desktop={{col: 3}} className={styles.mapInfoPanel}>
+      <Grid desktop={{col: 3}}>
         <MapInfoPanel
           className={styles.mapInfoPanel}
           featureProperties={detailViewData?.properties}

client/src/components/MapSearch/MapSearch.module.scss

@@ -1,9 +1,20 @@
 @use '../../styles/design-system.scss' as *;
 
 .mapSearchContainer {
+
+    // styles for mobile-lg (480px) and greater widths,
+    @include at-media('mobile-lg') {
+        position: absolute;
+        // top: units(4);
+        left: units(1.5);
+        width: 50%;
+        z-index: 1;
+    }
+    
+    // styles for less than mobile-lg (480px)
     position: absolute;
-    top: units(4);
     left: units(1.5);
-    width: 50%;
+    width: 90%;
     z-index: 1;
 }
+

client/src/components/MapSearch/__snapshots__/MapSearch.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`rendering of the MapSearch checks if component renders 1`] = `
 <DocumentFragment>
   <div>
     <div>
-      No location found. Please try another location.
+      No location found. Please try again.
     </div>
     <form
       class="usa-search usa-search--small"

client/src/components/MapSearchMessage/MapSearchMessage.module.scss

@@ -4,6 +4,7 @@
     color: red;
     background-color: white;
     @include u-margin-bottom(.5);
+    @include u-margin-top(.5);
     @include u-padding-left(1);
 }
 

client/src/components/MapSearchMessage/__snapshots__/MapSearchMessage.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`rendering of the MapSearchMessage when search results are empty checks if component renders 1`] = `
 <DocumentFragment>
   <div>
-    No location found. Please try another location.
+    No location found. Please try again.
   </div>
 </DocumentFragment>
 `;

client/src/components/territoryFocusControl.module.scss

@@ -1,10 +1,20 @@
 @use '../styles/design-system.scss' as *;
 
 .territoryFocusContainer {
-  display: flex;
+  // styles for mobile-lg (480px) and greater widths
-  flex-direction: column;
+  @include at-media('mobile-lg') {
+    position: absolute;
+    left: .75em;
+    top: units(card-lg);
+    z-index: 10;
+  }
+
   position: absolute;
   left: .75em;
-  top: units(card-lg);
+  top: units(9);
   z-index: 10;
+
 }
+
+
+

client/src/data/constants.tsx

@@ -209,3 +209,10 @@ export const US_VIRGIN_ISLANDS_BOUNDS: LngLatBoundsLike = [
 ];
 
 export const DEFAULT_CENTER = [33.4687126, -97.502136];
+
+
+// USWDS Breakpoints
+export const USWDS_BREAKPOINTS = {
+  MOBILE_LG: 480,
+  DESKTOP: 1024,
+};

client/src/data/copy/explore.tsx

@@ -69,7 +69,7 @@ export const MAP = defineMessages({
   },
   SEARCH_RESULTS_EMPTY_MESSAGE: {
     id: 'map.search.results.empty.text',
-    defaultMessage: 'No location found. Please try another location.',
+    defaultMessage: 'No location found. Please try again.',
     description: 'text displaying message for no search results found',
   },
   LOWER48_SHORT: {