From 9f0ca1c17dc6df3ed9f915a05792139495781779 Mon Sep 17 00:00:00 2001
From: Vim <86254807+vim-usds@users.noreply.github.com>
Date: Fri, 3 Jun 2022 12:35:28 -0400
Subject: [PATCH 1/6] Add address to search placeholder and add "at or above"
to category copy for low income (#1665)
* Add address to search placeholder text
* Adds "at or above" to category copy
* Updates map search placeholder text
- Update es and en.json files
- adds mobile search placeholder text
- udpates desktop search placeholder text
* Update logic to determine mobile for search text
* Update search error message
- update to Spanish text as well
* Adjust spacing between search and territory btns
* Modify mobile detection logic
- remove cypress tests for faster deploys
* Add placeholder text to state variable
- wrap state variable in useEffect()
---
.github/workflows/deploy_fe_staging.yml | 14 ++++++------
.../__snapshots__/Categories.test.tsx.snap | 14 ++++++------
.../__snapshots__/CategoryCard.test.tsx.snap | 2 +-
client/src/components/MapSearch/MapSearch.tsx | 22 +++++++++++++++++--
.../__snapshots__/MapSearch.test.tsx.snap | 4 ++--
.../MapSearchMessage.test.tsx.snap | 2 +-
.../territoryFocusControl.module.scss | 9 ++++----
client/src/data/copy/explore.tsx | 9 ++++++--
client/src/data/copy/methodology.tsx | 2 +-
client/src/intl/en.json | 10 ++++++---
client/src/intl/es.json | 7 +++---
.../__snapshots__/methodology.test.tsx.snap | 14 ++++++------
12 files changed, 69 insertions(+), 40 deletions(-)
diff --git a/.github/workflows/deploy_fe_staging.yml b/.github/workflows/deploy_fe_staging.yml
index 58d8ea9d..54e8492c 100644
--- a/.github/workflows/deploy_fe_staging.yml
+++ b/.github/workflows/deploy_fe_staging.yml
@@ -49,13 +49,13 @@ jobs:
run: npm test
- name: Check for security vulnerabilities
run: npm audit --production
- - name: Cypress / Gherkin integration tests 🌃
- uses: cypress-io/github-action@v2
- with:
- working-directory: ${{env.WORKING_DIRECTORY}}
- browser: chrome
- start: npm start
- wait-on: "http://localhost:8000/en"
+ # - name: Cypress / Gherkin integration tests 🌃
+ # uses: cypress-io/github-action@v2
+ # with:
+ # working-directory: ${{env.WORKING_DIRECTORY}}
+ # browser: chrome
+ # start: npm start
+ # wait-on: "http://localhost:8000/en"
- name: Upload Artifact
uses: actions/upload-artifact@v2
with:
diff --git a/client/src/components/Categories/__snapshots__/Categories.test.tsx.snap b/client/src/components/Categories/__snapshots__/Categories.test.tsx.snap
index e52c4f0a..d414c3da 100644
--- a/client/src/components/Categories/__snapshots__/Categories.test.tsx.snap
+++ b/client/src/components/Categories/__snapshots__/Categories.test.tsx.snap
@@ -66,7 +66,7 @@ exports[`rendering of the Categories checks if component renders 1`] = `
AND
- is above the 65th percentile for
+ is at or above the 65th percentile for
@@ -119,7 +119,7 @@ exports[`rendering of the Categories checks if component renders 1`] = `
AND
- is above the 65th percentile for
+ is at or above the 65th percentile for
@@ -176,7 +176,7 @@ exports[`rendering of the Categories checks if component renders 1`] = `
AND
- is above the 65th percentile for
+ is at or above the 65th percentile for
@@ -235,7 +235,7 @@ exports[`rendering of the Categories checks if component renders 1`] = `
AND
- is above the 65th percentile for
+ is at or above the 65th percentile for
@@ -294,7 +294,7 @@ exports[`rendering of the Categories checks if component renders 1`] = `
AND
- is above the 65th percentile for
+ is at or above the 65th percentile for
@@ -341,7 +341,7 @@ exports[`rendering of the Categories checks if component renders 1`] = `
AND
- is above the 65th percentile for
+ is at or above the 65th percentile for
@@ -406,7 +406,7 @@ exports[`rendering of the Categories checks if component renders 1`] = `
AND
- is above the 65th percentile for
+ is at or above the 65th percentile for
diff --git a/client/src/components/CategoryCard/__snapshots__/CategoryCard.test.tsx.snap b/client/src/components/CategoryCard/__snapshots__/CategoryCard.test.tsx.snap
index 4c983640..38c8bc95 100644
--- a/client/src/components/CategoryCard/__snapshots__/CategoryCard.test.tsx.snap
+++ b/client/src/components/CategoryCard/__snapshots__/CategoryCard.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`rendering of the CategoryCard checks if component renders 1`] = `
AND
- is above the 65th percentile for
+ is at or above the 65th percentile for
diff --git a/client/src/components/MapSearch/MapSearch.tsx b/client/src/components/MapSearch/MapSearch.tsx
index a4d96795..4fc4e808 100644
--- a/client/src/components/MapSearch/MapSearch.tsx
+++ b/client/src/components/MapSearch/MapSearch.tsx
@@ -1,7 +1,9 @@
-import React, {useState} from 'react';
+/* eslint-disable max-len */
+import React, {useEffect, useState} from 'react';
import {LngLatBoundsLike} from 'maplibre-gl';
import {useIntl} from 'gatsby-plugin-intl';
import {Search} from '@trussworks/react-uswds';
+import {useWindowSize} from 'react-use';
import MapSearchMessage from '../MapSearchMessage';
@@ -17,6 +19,22 @@ const MapSearch = ({goToPlace}:IMapSearch) => {
const [isSearchResultsNull, setIsSearchResultsNull] = useState(false);
const intl = useIntl();
+ /**
+ * At compile-time, the width/height returned by useWindowSize will be X. When the client requests the
+ * app on run-time from CDN, and the app hydrates, reconcilation no longer occurs and the client is forced
+ * to use X.
+ *
+ * To avoid this, we set the placeholder text as a state variable. We also create a useEffect that updates
+ * that state whenenver the width changes.
+ *
+ */
+ const {width, height} = useWindowSize();
+ const [placeholderText, setPlaceholderText]= useState(EXPLORE_COPY.MAP.SEARCH_PLACEHOLDER);
+
+ useEffect( () => {
+ width > height ? setPlaceholderText(EXPLORE_COPY.MAP.SEARCH_PLACEHOLDER): setPlaceholderText(EXPLORE_COPY.MAP.SEARCH_PLACEHOLDER_MOBILE);
+ }, [width]);
+
/*
onSearchHandler will
1. extract the search term from the input field
@@ -61,7 +79,7 @@ const MapSearch = ({goToPlace}:IMapSearch) => {