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] 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) => {
onSearchHandler(e)} /> diff --git a/client/src/components/MapSearch/__snapshots__/MapSearch.test.tsx.snap b/client/src/components/MapSearch/__snapshots__/MapSearch.test.tsx.snap index b8b4dc9c..6a56e2de 100644 --- a/client/src/components/MapSearch/__snapshots__/MapSearch.test.tsx.snap +++ b/client/src/components/MapSearch/__snapshots__/MapSearch.test.tsx.snap @@ -4,7 +4,7 @@ exports[`rendering of the MapSearch checks if component renders 1`] = `
- No location found. Please try again. + Location not found or unknown. Please try a different search.