From e1f4df8e510f1531c41f1bc48c27fe8757fd47ac Mon Sep 17 00:00:00 2001 From: Vim USDS Date: Wed, 13 Jul 2022 23:04:48 -0700 Subject: [PATCH 01/13] Add Geolocation from behind feature flag --- .../src/components/AreaDetail/AreaDetail.tsx | 2 +- client/src/components/J40Map.module.scss | 85 ++++++++++++++----- client/src/components/J40Map.module.scss.d.ts | 25 ++++-- client/src/components/J40Map.tsx | 57 ++++++++----- .../MapSearch/MapSearch.module.scss | 22 ++--- 5 files changed, 124 insertions(+), 67 deletions(-) diff --git a/client/src/components/AreaDetail/AreaDetail.tsx b/client/src/components/AreaDetail/AreaDetail.tsx index 82bacb05..6230de48 100644 --- a/client/src/components/AreaDetail/AreaDetail.tsx +++ b/client/src/components/AreaDetail/AreaDetail.tsx @@ -267,7 +267,7 @@ const AreaDetail = ({properties, hash}: IAreaDetailProps) => { // description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.MED_HOME_VAL), // value: properties[constants.MEDIAN_HOME_VALUE_PERCENTILE] ? // properties[constants.MEDIAN_HOME_VALUE_PERCENTILE] : null, - // isDisadvagtaged: false, // TODO + // isDisadvagtaged: false, // }; const proxHaz: indicatorInfo = { diff --git a/client/src/components/J40Map.module.scss b/client/src/components/J40Map.module.scss index 926f2f58..0cc4e3cb 100644 --- a/client/src/components/J40Map.module.scss +++ b/client/src/components/J40Map.module.scss @@ -1,24 +1,71 @@ @use '../styles/design-system.scss' as *; @import "./utils.scss"; -.j40Popup { - width: 375px; -} -.navigationControl { - left: .75em; - top: units(15); - // width: 2.5em; -} +.j40Map { + @include at-media-max("desktop") { + // < 1024 + height: 55vh; + } -.fullscreenControl { - right: 1.25em; - top: 2.5em; -} + .mapHeaderRow{ + @include u-display("flex"); + @include u-padding-left(1.5); + + justify-content: space-between; + + /* + This width is set to prevent this row from + overflowing. Using justify-content: space-between + will allow the geolocation button to be right + ajusted. Without the width property constraint + of 98%, the space-between property forces the + geolocation icon out of the parent container. + + Since the geolocation control is absolutely + positioned, attempts were made to set the + parent to be relative to avoid this, however + it seems that we haven't found a cleaner + solution (yet). + */ + width: 98%; + + + .geolocateBox { + @include u-margin-top(3); + + .geolocateIcon{ + align-self: flex-end; + @include u-margin-right(4); + @include u-margin-top(.5); + + @include at-media-max("tablet") { + // < 640 + @include u-margin-top(3); + } + + @media (max-width: 362px){ + @include u-margin-top(5); + + } + } + } + } + + .navigationControl { + left: .75em; + top: units(15); + } + + //These classes are behind feature flags: + .fullscreenControl { + right: 1.25em; + top: 2.5em; + } + .j40Popup { + width: 375px; + } -.geolocateControl { - right: 1.25em; - top: 5em; } .mapInfoPanel { @@ -26,11 +73,3 @@ 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; - } -} \ No newline at end of file diff --git a/client/src/components/J40Map.module.scss.d.ts b/client/src/components/J40Map.module.scss.d.ts index 502b1205..60fea2cc 100644 --- a/client/src/components/J40Map.module.scss.d.ts +++ b/client/src/components/J40Map.module.scss.d.ts @@ -1,14 +1,23 @@ declare namespace J40MapModuleScssNamespace { export interface IJ40MapModuleScss { - j40Popup: string; - territoryFocusButton: string; - territoryFocusContainer: string; - navigationControl: string; - fullscreenControl: string; - geolocateControl: string; - detailView: string; - mapInfoPanel: string; + // main J40 map style j40Map: string; + + // map header row + mapHeaderRow: string; + geolocateBox: string; + geolocateMessage: string; + geolocateMessageHide: string; + geolocateIcon: string; + + // nav control + navigationControl: string; + + // feature flags + fullscreenControl: string; + j40Popup: string; + + mapInfoPanel: string; } } diff --git a/client/src/components/J40Map.tsx b/client/src/components/J40Map.tsx index c0f10ba3..e4fba0dd 100644 --- a/client/src/components/J40Map.tsx +++ b/client/src/components/J40Map.tsx @@ -98,7 +98,12 @@ export const featureURLForTilesetName = (tilesetName: string): string => { } }; - +/** + * This the main map component + * + * @param {IJ40Interface} location + * @returns {ReactElement} + */ const J40Map = ({location}: IJ40Interface) => { /** * Initializes the zoom, and the map's center point (lat, lng) via the URL hash #{z}/{lat}/{long} @@ -329,12 +334,12 @@ const J40Map = ({location}: IJ40Interface) => { return ( <> - {/** - * This will render the MapSearch component - * * Note: - * The MapSearch component is no longer wrapped in a div in order to allow this feature + * The MapSearch component is no longer used in this location. It has been moved inside the + * component itself. + * + * It was originally wrapped in a div in order to allow this feature * to be behind a feature flag. This was causing a bug for MapSearch to render * correctly in a production build. Leaving this comment here in case future flags are * needed in this component. @@ -346,9 +351,10 @@ const J40Map = ({location}: IJ40Interface) => { * - npm run clean && npm run build && npm run serve * * to ensure the production build works and that MapSearch and the map (ReactMapGL) render correctly. + * + * Any component declrations outside the component may be susceptible to this bug. */} - - + {/* */} {/** * The ReactMapGL component's props are grouped by the API's documentation. The component also has @@ -393,7 +399,9 @@ const J40Map = ({location}: IJ40Interface) => { data-cy={'reactMapGL'} > {/** - * The low zoom source + * Load all data sources and layers + * + * First the low zoom: */} { /> - {/* This will add the navigation controls of the zoom in and zoom out buttons */} + {/* This is the first overlayed row on the map: Search and Geolocation */} +
+ + +
+
+ +
+
+ +
+ + {/* This is the second row overlayed on the map, it will add the navigation controls + of the zoom in and zoom out buttons */} { windowWidth > constants.USWDS_BREAKPOINTS.MOBILE_LG && } - {/* This will show shortcut buttons to pan/zoom to US territories */} + {/* This is the third row overlayed on the map, it will show shortcut buttons to + pan/zoom to US territories */} - {/* This places Geolocation behind a feature flag */} - {'gl' in flags ? : ''} - {geolocationInProgress ?
Geolocation in progress...
: ''} - {/* Enable fullscreen pop-up behind a feature flag */} {('fs' in flags && detailViewData && !transitionInProgress) && ( Date: Thu, 14 Jul 2022 16:21:41 -0700 Subject: [PATCH 02/13] Comment updates from PR feedback --- client/src/components/J40Map.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/client/src/components/J40Map.tsx b/client/src/components/J40Map.tsx index e4fba0dd..17480924 100644 --- a/client/src/components/J40Map.tsx +++ b/client/src/components/J40Map.tsx @@ -352,9 +352,8 @@ const J40Map = ({location}: IJ40Interface) => { * * to ensure the production build works and that MapSearch and the map (ReactMapGL) render correctly. * - * Any component declrations outside the component may be susceptible to this bug. + * Any component declarations outside the component may be susceptible to this bug. */} - {/* */} {/** * The ReactMapGL component's props are grouped by the API's documentation. The component also has From 8d2f3d26b1222adb42faacaa2a45f167da097d64 Mon Sep 17 00:00:00 2001 From: Vim USDS Date: Mon, 18 Jul 2022 11:38:59 -0700 Subject: [PATCH 03/13] Modify geolocate icon and beacon to be black --- client/src/components/J40Map.module.scss | 32 +++++++++++------- client/src/components/J40Map.tsx | 26 +++++++++++++-- client/src/data/copy/explore.tsx | 15 +++++++++ client/src/intl/en.json | 4 +++ client/src/styles/global.scss | 41 +++++++++++++++++++++++- 5 files changed, 103 insertions(+), 15 deletions(-) diff --git a/client/src/components/J40Map.module.scss b/client/src/components/J40Map.module.scss index 0cc4e3cb..01827a3c 100644 --- a/client/src/components/J40Map.module.scss +++ b/client/src/components/J40Map.module.scss @@ -32,22 +32,32 @@ .geolocateBox { - @include u-margin-top(3); + margin-top: 6px; + + .geolocateMessage { + visibility: visible; + background-color: white; + margin-bottom: 3px; + } + .geolocateMessageHide { + visibility: hidden; + margin-bottom: 3px; + } + + @include at-media-max("tablet") { + // < 640 + margin-top: 28px; + } + + @media (max-width: 365px){ + margin-top: 46px; + + } .geolocateIcon{ align-self: flex-end; @include u-margin-right(4); - @include u-margin-top(.5); - @include at-media-max("tablet") { - // < 640 - @include u-margin-top(3); - } - - @media (max-width: 362px){ - @include u-margin-top(5); - - } } } } diff --git a/client/src/components/J40Map.tsx b/client/src/components/J40Map.tsx index 17480924..3009d139 100644 --- a/client/src/components/J40Map.tsx +++ b/client/src/components/J40Map.tsx @@ -13,6 +13,7 @@ import ReactMapGL, { FlyToInterpolator, FullscreenControl, MapRef, Source, Layer} from 'react-map-gl'; +import {useIntl} from 'gatsby-plugin-intl'; import bbox from '@turf/bbox'; import * as d3 from 'd3-ease'; import {isMobile} from 'react-device-detect'; @@ -34,6 +35,7 @@ import 'maplibre-gl/dist/maplibre-gl.css'; import * as constants from '../data/constants'; import * as styles from './J40Map.module.scss'; import * as COMMON_COPY from '../data/copy/common'; +import * as EXPLORE_COPY from '../data/copy/explore'; declare global { @@ -55,6 +57,11 @@ export interface IDetailViewInterface { properties: constants.J40Properties, }; +export const GEOLOCATION_STATES = { + OFF: 'OFF', + LOCATING: 'LOCATING', + LOCKED: 'LOCKED', +}; /** * This function will determine the URL for the map tiles. It will read in a string that will designate either * high or low tiles. It will allow to overide the URL to the pipeline staging tile URL via feature flag. @@ -130,12 +137,13 @@ const J40Map = ({location}: IJ40Interface) => { const [selectedFeature, setSelectedFeature] = useState(); const [detailViewData, setDetailViewData] = useState(); const [transitionInProgress, setTransitionInProgress] = useState(false); - const [geolocationInProgress, setGeolocationInProgress] = useState(false); + const [geolocationState, setGeolocationState] = useState(GEOLOCATION_STATES.OFF); const [isMobileMapState, setIsMobileMapState] = useState(false); const {width: windowWidth} = useWindowSize(); const mapRef = useRef(null); const flags = useFlags(); + const intl = useIntl(); const selectedFeatureId = (selectedFeature && selectedFeature.id) || ''; const filter = useMemo(() => ['in', constants.GEOID_PROPERTY, selectedFeatureId], [selectedFeature]); @@ -322,11 +330,17 @@ const J40Map = ({location}: IJ40Interface) => { }; const onGeolocate = () => { - setGeolocationInProgress(false); + setGeolocationState(GEOLOCATION_STATES.LOCKED); }; const onClickGeolocate = () => { - setGeolocationInProgress(true); + if (geolocationState === GEOLOCATION_STATES.LOCKED) { + setGeolocationState(GEOLOCATION_STATES.OFF); + } + + if (geolocationState === GEOLOCATION_STATES.OFF) { + setGeolocationState(GEOLOCATION_STATES.LOCATING); + } }; const mapBoxBaseLayer = 'tl' in flags ? `mapbox://styles/justice40/cl2qimpi2000014qeb1egpox8` : `mapbox://styles/mapbox/streets-v11`; @@ -495,6 +509,12 @@ const J40Map = ({location}: IJ40Interface) => {
+
+ {intl.formatMessage(EXPLORE_COPY.MAP.GEOLOC_MSG_LOCATING)} +
Date: Tue, 19 Jul 2022 09:29:30 -0700 Subject: [PATCH 04/13] Upgrade lb dependencies - upgrade uswds to 2.13.3 - upgrade trussworks to 3.1.0 - fix breaking changes on Accordion, Search, SummaryBox, Collections, --- client/README.md | 4 +- client/package-lock.json | 138 ++++-------------- client/package.json | 4 +- .../src/components/AreaDetail/AreaDetail.tsx | 9 ++ .../__snapshots__/MapSearch.test.tsx.snap | 10 +- .../components/PublicEvent/PublicEvent.tsx | 2 +- .../PublicVideoBox/PublicVideoBox.tsx | 92 ++++++------ .../RequestForInfo/RequestForInfo.tsx | 14 +- 8 files changed, 111 insertions(+), 162 deletions(-) diff --git a/client/README.md b/client/README.md index 42b468cd..78fe76fd 100644 --- a/client/README.md +++ b/client/README.md @@ -222,5 +222,5 @@ The following attemps to explain why certain packages versions have been chosen | gatsby | 3.14.6 | 4.14.2 | No | when attempting to update - breaks all unit tests. Compatibility warning come up with all plugins but this doesn't seems to effect functionality. This is the latest version we can release without investigating unit tests. | | gatsby-cli | 3.14.2 | 4.15.2 | No | when attempting to update - breaks all unit tests. Compatibility warning come up with all plugins but this doesn't seems to effect functionality. This is the latest version we can release without investigating unit tests.| | sass | 1.32.12 | 1.52.3 | No | This version is needed to surpress the dart warnings on / as division for each component. See [here](https://github.com/twbs/bootstrap/issues/34051#issuecomment-845884423) for more information | -| uswds | 2.11.2 | 3.0.2 | No | Needs to stay at 2.11 for peer dependency on trussworks| -| trussworks | 2.9.0 | 3.0.2 | No | Needs to stay at 2.9 as 3.0 is breaking change | \ No newline at end of file +| uswds | 2.13.3 | 3.0.2 | No | Needs to stay at 2.13.3 for peer dependency on trussworks| +| trussworks | 3.1.0 | 3.1.0 | No | latest! | \ No newline at end of file diff --git a/client/package-lock.json b/client/package-lock.json index 98a13bc7..f4a654cb 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -11,7 +11,7 @@ "dependencies": { "-": "^0.0.1", "@sentry/gatsby": "^7.7.0", - "@trussworks/react-uswds": "^2.9.0", + "@trussworks/react-uswds": "^3.1.0", "@turf/bbox": "^6.5.0", "d3-ease": "^3.0.1", "gatsby-plugin-env-variables": "^2.2.0", @@ -27,7 +27,7 @@ "react-intl": "^5.24.7", "react-map-gl": "^6.1.19", "react-use": "^17.3.2", - "uswds": "^2.11.2" + "uswds": "^2.13.3" }, "devDependencies": { "@formatjs/cli": "^4.8.2", @@ -3579,16 +3579,16 @@ } }, "node_modules/@trussworks/react-uswds": { - "version": "2.9.0", - "resolved": "https://registry.npmjs.org/@trussworks/react-uswds/-/react-uswds-2.9.0.tgz", - "integrity": "sha512-qv5twPgzLJulWsZew3No3W45FTp3WrYGwG/3B+w/mPFuAMHmAX7VAiigmg+k2kHFvrpjyAiKZHREpHyhkZIbig==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@trussworks/react-uswds/-/react-uswds-3.1.0.tgz", + "integrity": "sha512-4krdLn8LGgr3EwOsizUF6cBLnwDS6x0WgJjjGk59kNBpgH4qiv8YGzic3HYaVr8xWBq36VpEEfGeQZnjYGMegw==", "engines": { - "node": "10.x - 16.x" + "node": "10.x - 18.x" }, "peerDependencies": { "react": "^16.x || ^17.x", "react-dom": "^16.x || ^17.x", - "uswds": "2.11.2" + "uswds": "2.13.3" } }, "node_modules/@trysound/sax": { @@ -6622,9 +6622,9 @@ } }, "node_modules/classlist-polyfill": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz", - "integrity": "sha1-k1vC39lFiodrJ5YXUUY4vKqWSi4=" + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.0.3.tgz", + "integrity": "sha512-bDLDUsSg5LYFWsc2hphtG6ulyaCFSupdEBU3wxNECKWHnyPVvY8EB9Wbt9DzWkstWclFZhDaZK/VnEK/DmqE/Q==" }, "node_modules/clean-stack": { "version": "2.2.0", @@ -8877,11 +8877,6 @@ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.89.tgz", "integrity": "sha512-z1Axg0Fu54fse8wN4fd+GAINdU5mJmLtcl6bqIcYyzNVGONcfHAeeJi88KYMQVKalhXlYuVPzKkFIU5VD0raUw==" }, - "node_modules/elem-dataset": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/elem-dataset/-/elem-dataset-2.0.0.tgz", - "integrity": "sha512-e7gieGopWw5dMdEgythH3lUS7nMizutPDTtkzfQW/q2gCvFnACyNnK3ytCncAXKxdBXQWcXeKaYTTODiMnp8mw==" - }, "node_modules/element-closest": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/element-closest/-/element-closest-2.0.2.tgz", @@ -25238,57 +25233,20 @@ } }, "node_modules/uswds": { - "version": "2.11.2", - "resolved": "https://registry.npmjs.org/uswds/-/uswds-2.11.2.tgz", - "integrity": "sha512-JISTXCjPIlrufbObIifjrMDn5jF9bbLu7UYhGWmEs9iqB6Z2KDCXHVoBUyzMmIrIjW/UWWYHZzPqOOHO6/IMCQ==", + "version": "2.13.3", + "resolved": "https://registry.npmjs.org/uswds/-/uswds-2.13.3.tgz", + "integrity": "sha512-qCblljeaRvS3+PrSxoHqQwmMnp746+Y1YZA34BkTzJknvo2bhhdzGE21yJaInumzIqV3glLD13TFdRwrwikMMQ==", "dependencies": { - "classlist-polyfill": "^1.0.3", - "del": "^6.0.0", - "domready": "^1.0.8", - "elem-dataset": "^2.0.0", - "object-assign": "^4.1.1", - "receptor": "^1.0.0", - "resolve-id-refs": "^0.1.0" + "classlist-polyfill": "1.0.3", + "domready": "1.0.8", + "object-assign": "4.1.1", + "receptor": "1.0.0", + "resolve-id-refs": "0.1.0" }, "engines": { "node": ">= 4" } }, - "node_modules/uswds/node_modules/del": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/del/-/del-6.0.0.tgz", - "integrity": "sha512-1shh9DQ23L16oXSZKB2JxpL7iMy2E0S9d517ptA1P8iw0alkPtQcrKH7ru31rYtKwF499HkTu+DRzq3TCKDFRQ==", - "dependencies": { - "globby": "^11.0.1", - "graceful-fs": "^4.2.4", - "is-glob": "^4.0.1", - "is-path-cwd": "^2.2.0", - "is-path-inside": "^3.0.2", - "p-map": "^4.0.0", - "rimraf": "^3.0.2", - "slash": "^3.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/uswds/node_modules/p-map": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz", - "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==", - "dependencies": { - "aggregate-error": "^3.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/util": { "version": "0.10.4", "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz", @@ -29128,9 +29086,9 @@ "dev": true }, "@trussworks/react-uswds": { - "version": "2.9.0", - "resolved": "https://registry.npmjs.org/@trussworks/react-uswds/-/react-uswds-2.9.0.tgz", - "integrity": "sha512-qv5twPgzLJulWsZew3No3W45FTp3WrYGwG/3B+w/mPFuAMHmAX7VAiigmg+k2kHFvrpjyAiKZHREpHyhkZIbig==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@trussworks/react-uswds/-/react-uswds-3.1.0.tgz", + "integrity": "sha512-4krdLn8LGgr3EwOsizUF6cBLnwDS6x0WgJjjGk59kNBpgH4qiv8YGzic3HYaVr8xWBq36VpEEfGeQZnjYGMegw==", "requires": {} }, "@trysound/sax": { @@ -31616,9 +31574,9 @@ } }, "classlist-polyfill": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz", - "integrity": "sha1-k1vC39lFiodrJ5YXUUY4vKqWSi4=" + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.0.3.tgz", + "integrity": "sha512-bDLDUsSg5LYFWsc2hphtG6ulyaCFSupdEBU3wxNECKWHnyPVvY8EB9Wbt9DzWkstWclFZhDaZK/VnEK/DmqE/Q==" }, "clean-stack": { "version": "2.2.0", @@ -33405,11 +33363,6 @@ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.89.tgz", "integrity": "sha512-z1Axg0Fu54fse8wN4fd+GAINdU5mJmLtcl6bqIcYyzNVGONcfHAeeJi88KYMQVKalhXlYuVPzKkFIU5VD0raUw==" }, - "elem-dataset": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/elem-dataset/-/elem-dataset-2.0.0.tgz", - "integrity": "sha512-e7gieGopWw5dMdEgythH3lUS7nMizutPDTtkzfQW/q2gCvFnACyNnK3ytCncAXKxdBXQWcXeKaYTTODiMnp8mw==" - }, "element-closest": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/element-closest/-/element-closest-2.0.2.tgz", @@ -45704,42 +45657,15 @@ "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==" }, "uswds": { - "version": "2.11.2", - "resolved": "https://registry.npmjs.org/uswds/-/uswds-2.11.2.tgz", - "integrity": "sha512-JISTXCjPIlrufbObIifjrMDn5jF9bbLu7UYhGWmEs9iqB6Z2KDCXHVoBUyzMmIrIjW/UWWYHZzPqOOHO6/IMCQ==", + "version": "2.13.3", + "resolved": "https://registry.npmjs.org/uswds/-/uswds-2.13.3.tgz", + "integrity": "sha512-qCblljeaRvS3+PrSxoHqQwmMnp746+Y1YZA34BkTzJknvo2bhhdzGE21yJaInumzIqV3glLD13TFdRwrwikMMQ==", "requires": { - "classlist-polyfill": "^1.0.3", - "del": "^6.0.0", - "domready": "^1.0.8", - "elem-dataset": "^2.0.0", - "object-assign": "^4.1.1", - "receptor": "^1.0.0", - "resolve-id-refs": "^0.1.0" - }, - "dependencies": { - "del": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/del/-/del-6.0.0.tgz", - "integrity": "sha512-1shh9DQ23L16oXSZKB2JxpL7iMy2E0S9d517ptA1P8iw0alkPtQcrKH7ru31rYtKwF499HkTu+DRzq3TCKDFRQ==", - "requires": { - "globby": "^11.0.1", - "graceful-fs": "^4.2.4", - "is-glob": "^4.0.1", - "is-path-cwd": "^2.2.0", - "is-path-inside": "^3.0.2", - "p-map": "^4.0.0", - "rimraf": "^3.0.2", - "slash": "^3.0.0" - } - }, - "p-map": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz", - "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==", - "requires": { - "aggregate-error": "^3.0.0" - } - } + "classlist-polyfill": "1.0.3", + "domready": "1.0.8", + "object-assign": "4.1.1", + "receptor": "1.0.0", + "resolve-id-refs": "0.1.0" } }, "util": { diff --git a/client/package.json b/client/package.json index b4de4d1a..7b643cbb 100644 --- a/client/package.json +++ b/client/package.json @@ -77,7 +77,7 @@ "dependencies": { "-": "^0.0.1", "@sentry/gatsby": "^7.7.0", - "@trussworks/react-uswds": "^2.9.0", + "@trussworks/react-uswds": "^3.1.0", "@turf/bbox": "^6.5.0", "d3-ease": "^3.0.1", "gatsby-plugin-env-variables": "^2.2.0", @@ -93,7 +93,7 @@ "react-intl": "^5.24.7", "react-map-gl": "^6.1.19", "react-use": "^17.3.2", - "uswds": "^2.11.2" + "uswds": "^2.13.3" }, "cypress-cucumber-preprocessor": { "nonGlobalStepDefinitions": false diff --git a/client/src/components/AreaDetail/AreaDetail.tsx b/client/src/components/AreaDetail/AreaDetail.tsx index 6230de48..2cfc0f55 100644 --- a/client/src/components/AreaDetail/AreaDetail.tsx +++ b/client/src/components/AreaDetail/AreaDetail.tsx @@ -500,6 +500,15 @@ const AreaDetail = ({properties, hash}: IAreaDetailProps) => { // component to render the actual Indicator const categoryItems = categories.map((category) => ({ id: category.id, + + /* + As of trussworks 3.0.0, there were some breaking changes. This new prop of headingLevel + is required, however, the title prop is already defining the category styling, so this + is placed here to satisfy the requirement of the AccordionItems API, however it's not + being used. + */ + headingLevel: 'h4', + title: , content: ( <> diff --git a/client/src/components/MapSearch/__snapshots__/MapSearch.test.tsx.snap b/client/src/components/MapSearch/__snapshots__/MapSearch.test.tsx.snap index 6a56e2de..9d1c383c 100644 --- a/client/src/components/MapSearch/__snapshots__/MapSearch.test.tsx.snap +++ b/client/src/components/MapSearch/__snapshots__/MapSearch.test.tsx.snap @@ -31,11 +31,11 @@ exports[`rendering of the MapSearch checks if component renders 1`] = ` data-testid="button" type="submit" > - - Search - + Search
diff --git a/client/src/components/PublicEvent/PublicEvent.tsx b/client/src/components/PublicEvent/PublicEvent.tsx index 6a9c8b65..39408b3c 100644 --- a/client/src/components/PublicEvent/PublicEvent.tsx +++ b/client/src/components/PublicEvent/PublicEvent.tsx @@ -43,7 +43,7 @@ const PublicEvent = ({event}:IPublicEvent) => { }> {/* Heading */} - + {isEventExpired ? eventName : { return ( - {intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.BODY)} - -
- - - - - + + + ); }; diff --git a/client/src/components/RequestForInfo/RequestForInfo.tsx b/client/src/components/RequestForInfo/RequestForInfo.tsx index bb8324b8..9ef6a7b8 100644 --- a/client/src/components/RequestForInfo/RequestForInfo.tsx +++ b/client/src/components/RequestForInfo/RequestForInfo.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import {SummaryBox} from '@trussworks/react-uswds'; +import {SummaryBox, SummaryBoxContent, SummaryBoxHeading} from '@trussworks/react-uswds'; import {useIntl} from 'gatsby-plugin-intl'; import * as CONTACT_COPY from '../../data/copy/contact'; @@ -9,8 +9,16 @@ const RequestForInfo = () => { const intl = useIntl(); return ( - -

{CONTACT_COPY.RFI_BOX_BODY}

+ + + + {intl.formatMessage(CONTACT_COPY.RFI_BOX.TITLE)} + + + +

{CONTACT_COPY.RFI_BOX_BODY}

+ + ); }; From 6b37e5dc491a4d9214223ef7ffe64ea7e724ec86 Mon Sep 17 00:00:00 2001 From: Vim USDS Date: Mon, 25 Jul 2022 12:05:50 -0700 Subject: [PATCH 05/13] Fixes links that were off center --- client/src/components/AboutCard/AboutCard.tsx | 2 +- .../__snapshots__/AboutCard.test.tsx.snap | 1 - client/src/data/copy/explore.tsx | 16 +++++++++---- client/src/intl/en.json | 2 +- .../tests/__snapshots__/about.test.tsx.snap | 6 ++--- client/src/styles/global.scss | 24 +++++++++++++++---- 6 files changed, 35 insertions(+), 16 deletions(-) diff --git a/client/src/components/AboutCard/AboutCard.tsx b/client/src/components/AboutCard/AboutCard.tsx index 84b20742..88aeb96a 100644 --- a/client/src/components/AboutCard/AboutCard.tsx +++ b/client/src/components/AboutCard/AboutCard.tsx @@ -64,7 +64,7 @@ const AboutCard = (props: React.PropsWithChildren) => { internal={props.internal} url={props.url ? props.url : ''} openUrlNewTab={props.openUrlNewTab} - className={'j40-aboutcard-link'} + // className={'j40-aboutcard-link'} /> diff --git a/client/src/components/AboutCard/__snapshots__/AboutCard.test.tsx.snap b/client/src/components/AboutCard/__snapshots__/AboutCard.test.tsx.snap index 27af5591..d2101d46 100644 --- a/client/src/components/AboutCard/__snapshots__/AboutCard.test.tsx.snap +++ b/client/src/components/AboutCard/__snapshots__/AboutCard.test.tsx.snap @@ -77,7 +77,6 @@ exports[`rendering of the AboutCard checks if small cards component renders 1`] class="j40-aboutcard-sm-link" > diff --git a/client/src/data/copy/explore.tsx b/client/src/data/copy/explore.tsx index e9863453..eec9c5f6 100644 --- a/client/src/data/copy/explore.tsx +++ b/client/src/data/copy/explore.tsx @@ -9,6 +9,12 @@ import * as DOWNLOADS_COPY from './downloads'; import * as METHODOLOGY_COPY from './methodology'; import {PAGES_ENDPOINTS} from '../constants'; +export const EXPLORE_PAGE_LINKS = { + TRIBAL_ACTION_PLAN: `https://www.whitehouse.gov/wp-content/uploads/2022/01/CEQ-Tribal-Consultation-Plan-04.26.2021.pdf`, + TRIBAL_WHITEHOUSE: `https://www.whitehouse.gov/briefing-room/presidential-actions/2021/01/26/memorandum-on-tribal-consultation-and-strengthening-nation-to-nation-relationships/`, + TRIBAL_FED_REGISTER: `https://www.federalregister.gov/documents/2000/11/09/00-29003/consultation-and-coordination-with-indian-tribal-governments`, +}; + export const PAGE_INTRO = defineMessages({ PAGE_TILE: { id: 'explore.map.page.title.text', @@ -878,16 +884,16 @@ export const NOTE_ON_TRIBAL_NATIONS = { is engaging in consultation and coordination with Tribal Nations on the beta version of the map to provide Tribal Nations with meaningful opportunities for input, consistent with CEQ’s Action Plan for Consultation and Coordination with Tribal Nations, - President Biden’s Memorandum on Tribal Consultation and Strengthening - Nation-to-Nation Consultation, and Executive Order 13175 on Consultation and + President Biden’s Memorandum on Tribal Consultation and Strengthening + Nation-to-Nation Consultation, and Executive Order 13175 on Consultation and Coordination With Indian Tribal Governments. `} description={`Navigate to the explore the map page. Under the map, you will see tribal nations paragraph 1`} values={{ link1: COMMON_COPY.linkFn(PAGES_ENDPOINTS.METHODOLOGY, true, false), - link2: COMMON_COPY.linkFn(`https://www.whitehouse.gov/wp-content/uploads/2022/01/CEQ-Tribal-Consultation-Plan-04.26.2021.pdf`, false, true), - link3: COMMON_COPY.linkFn(`https://www.whitehouse.gov/briefing-room/presidential-actions/2021/01/26/memorandum-on-tribal-consultation-and-strengthening-nation-to-nation-relationships/`, false, true), - link4: COMMON_COPY.linkFn(`https://www.federalregister.gov/documents/2000/11/09/00-29003/consultation-and-coordination-with-indian-tribal-governments`, false, true), + link2: COMMON_COPY.linkFn(EXPLORE_PAGE_LINKS.TRIBAL_ACTION_PLAN, false, true), + link3: COMMON_COPY.linkFn(EXPLORE_PAGE_LINKS.TRIBAL_WHITEHOUSE, false, true), + link4: COMMON_COPY.linkFn(EXPLORE_PAGE_LINKS.TRIBAL_FED_REGISTER, false, true), }} />, }; diff --git a/client/src/intl/en.json b/client/src/intl/en.json index cf14693e..755b3631 100644 --- a/client/src/intl/en.json +++ b/client/src/intl/en.json @@ -868,7 +868,7 @@ "description": "Navigate to the explore the map page. Under the map, you will see tribal nations intro text" }, "explore.map.page.under.map.note.on.tribal.nations.para.1": { - "defaultMessage": "The map covers all U.S. census tracts, including those located within Tribal Nations, to the extent that data is available (see our Methodology & data page for more information). CEQ is engaging in consultation and coordination with Tribal Nations on the beta version of the map to provide Tribal Nations with meaningful opportunities for input, consistent with CEQ’s Action Plan for Consultation and Coordination with Tribal Nations, President Biden’s Memorandum on Tribal Consultation and Strengthening Nation-to-Nation Consultation, and Executive Order 13175 on Consultation and Coordination With Indian Tribal Governments.", + "defaultMessage": "The map covers all U.S. census tracts, including those located within Tribal Nations, to the extent that data is available (see our Methodology & data page for more information). CEQ is engaging in consultation and coordination with Tribal Nations on the beta version of the map to provide Tribal Nations with meaningful opportunities for input, consistent with CEQ’s Action Plan for Consultation and Coordination with Tribal Nations, President Biden’s Memorandum on Tribal Consultation and Strengthening Nation-to-Nation Consultation, and Executive Order 13175 on Consultation and Coordination With Indian Tribal Governments.", "description": "Navigate to the explore the map page. Under the map, you will see tribal nations paragraph 1" }, "fab.survey.text": { diff --git a/client/src/pages/tests/__snapshots__/about.test.tsx.snap b/client/src/pages/tests/__snapshots__/about.test.tsx.snap index e028de3e..0734b65a 100644 --- a/client/src/pages/tests/__snapshots__/about.test.tsx.snap +++ b/client/src/pages/tests/__snapshots__/about.test.tsx.snap @@ -607,7 +607,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis class="j40-aboutcard-sm-link" > Methodology & data @@ -662,7 +661,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis class="j40-aboutcard-sm-link" > Explore the map @@ -731,7 +729,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis class="j40-aboutcard-sm-link" > Date: Mon, 25 Jul 2022 16:19:27 -0700 Subject: [PATCH 06/13] Modify styling for geolocation --- client/src/intl/en.json | 2 +- client/src/styles/global.scss | 33 ++++++++++++++++----------------- 2 files changed, 17 insertions(+), 18 deletions(-) diff --git a/client/src/intl/en.json b/client/src/intl/en.json index 755b3631..e4c97f99 100644 --- a/client/src/intl/en.json +++ b/client/src/intl/en.json @@ -344,7 +344,7 @@ "description": "On the explore the map page, the description of the legend" }, "explore.map.page.map.geolocation.locating": { - "defaultMessage": "Geolocating...", + "defaultMessage": "Finding location...", "description": "On the explore the map page, on the map, this is the message above the gelocation icon that geolocation is locating." }, "explore.map.page.map.search.placeholder.mobile.text": { diff --git a/client/src/styles/global.scss b/client/src/styles/global.scss index 56bff45b..db8456c2 100644 --- a/client/src/styles/global.scss +++ b/client/src/styles/global.scss @@ -203,42 +203,41 @@ This section will outline styles that are component specific /** Geolocate Icon Styling: -The icon as 4 states; off, geolocating, locked and off-center. The icon is an SVG made of an 'active' layer and a 'background' layer. The standard styling allows for a clear distinction between the 4 states: - - off = black active and black for background - - geolocating = blue for active and blue for background (with circular animation) - - locked = blue for active and blue for background (no animation) - - off-center = blue for background only - - These states were changed to the following: - - off = black active and black for background - - geolocating = black for active and black for background (with circular animation) - - locked = black for active and black for background - - off-center = black for background only - - The reason the Icon was changed was to match the other overlayed icons - such as territory shortcuts. These other icons don't have multiple states embedded in them. This new color scheme creates ambiguity among two states, namely (off and locked) as they have the same exact style. +In mobile, the icon has 4 states; default, locating (class = *-waiting), locked (class = *-active) and panning (class = *-background). + +These overides change the active and background classes + +We are using #0076d6 or hsl(207, 100%, 42%) for all colors in relation to Geolocation. + +The reason the Icon was changed was to match the other overlayed icons - such as territory shortcuts. These other icons don't have multiple states embedded in them. This new color scheme creates ambiguity among two states, namely (off and locked) as they have the same exact style. */ .mapboxgl-ctrl { button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active { .mapboxgl-ctrl-icon { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 005.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 009 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 003.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0011 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 110 7 3.5 3.5 0 110-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E") !important; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='hsl(207, 100%, 42%)'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 005.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 009 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 003.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0011 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 110 7 3.5 3.5 0 110-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E") !important; } } } .mapboxgl-ctrl { button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background { .mapboxgl-ctrl-icon { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%2333'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 005.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 009 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 003.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0011 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 110 7 3.5 3.5 0 110-7z'/%3E%3C/svg%3E") !important; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='hsl(207, 100%, 42%)'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 005.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 009 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 003.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0011 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 110 7 3.5 3.5 0 110-7z'/%3E%3C/svg%3E") !important; } } } /** -Beacon - the beacon's color (*-location-dot) and proximity animation (::before) was changed to black. The reason the beacon was changed was to increase the contrast between the beacon and the census tract layers +Beacon - the beacon's color (*-location-dot) and proximity animation (::before), inner radius (::after) was changed and . The reason the beacon was changed was to increase the contrast between the beacon and the census tract layers */ .mapboxgl-user-location-dot, .mapboxgl-user-location-dot::before { - background-color: #000 !important; + background-color: #0076d6 !important; } +.mapboxgl-user-location-dot::after { + border: 4px solid #FFF !important; +} + + // Overide mapbox popup styles .mapboxgl-popup-close-button { font-size: 3em; From afc399c80be5108ed8ff4ae593fad750698ac095 Mon Sep 17 00:00:00 2001 From: Vim USDS Date: Mon, 25 Jul 2022 16:19:47 -0700 Subject: [PATCH 07/13] Modify geolocation message --- client/src/data/copy/explore.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/data/copy/explore.tsx b/client/src/data/copy/explore.tsx index eec9c5f6..129bd7b4 100644 --- a/client/src/data/copy/explore.tsx +++ b/client/src/data/copy/explore.tsx @@ -166,7 +166,7 @@ export const MAP = defineMessages({ }, GEOLOC_MSG_LOCATING: { id: 'explore.map.page.map.geolocation.locating', - defaultMessage: 'Geolocating...', + defaultMessage: 'Finding location...', description: 'On the explore the map page, on the map, this is the message above the gelocation icon that geolocation is locating.', }, // GEOLOC_MSG_OFF: { From 2282620bc73751effb291b04675d8934ac9d95ab Mon Sep 17 00:00:00 2001 From: Vim USDS Date: Mon, 25 Jul 2022 16:20:12 -0700 Subject: [PATCH 08/13] Add mobile and desktop geolocating --- client/src/components/J40Map.tsx | 23 ++++++----------------- 1 file changed, 6 insertions(+), 17 deletions(-) diff --git a/client/src/components/J40Map.tsx b/client/src/components/J40Map.tsx index 3009d139..9aa8b24b 100644 --- a/client/src/components/J40Map.tsx +++ b/client/src/components/J40Map.tsx @@ -57,11 +57,6 @@ export interface IDetailViewInterface { properties: constants.J40Properties, }; -export const GEOLOCATION_STATES = { - OFF: 'OFF', - LOCATING: 'LOCATING', - LOCKED: 'LOCKED', -}; /** * This function will determine the URL for the map tiles. It will read in a string that will designate either * high or low tiles. It will allow to overide the URL to the pipeline staging tile URL via feature flag. @@ -137,7 +132,7 @@ const J40Map = ({location}: IJ40Interface) => { const [selectedFeature, setSelectedFeature] = useState(); const [detailViewData, setDetailViewData] = useState(); const [transitionInProgress, setTransitionInProgress] = useState(false); - const [geolocationState, setGeolocationState] = useState(GEOLOCATION_STATES.OFF); + const [geolocationInProgress, setGeolocationInProgress] = useState(false); const [isMobileMapState, setIsMobileMapState] = useState(false); const {width: windowWidth} = useWindowSize(); @@ -330,17 +325,11 @@ const J40Map = ({location}: IJ40Interface) => { }; const onGeolocate = () => { - setGeolocationState(GEOLOCATION_STATES.LOCKED); + setGeolocationInProgress(false); }; const onClickGeolocate = () => { - if (geolocationState === GEOLOCATION_STATES.LOCKED) { - setGeolocationState(GEOLOCATION_STATES.OFF); - } - - if (geolocationState === GEOLOCATION_STATES.OFF) { - setGeolocationState(GEOLOCATION_STATES.LOCATING); - } + setGeolocationInProgress(true); }; const mapBoxBaseLayer = 'tl' in flags ? `mapbox://styles/justice40/cl2qimpi2000014qeb1egpox8` : `mapbox://styles/mapbox/streets-v11`; @@ -511,8 +500,7 @@ const J40Map = ({location}: IJ40Interface) => {
+ geolocationInProgress ? styles.geolocateMessage : styles.geolocateMessageHide}> {intl.formatMessage(EXPLORE_COPY.MAP.GEOLOC_MSG_LOCATING)}
@@ -520,7 +508,8 @@ const J40Map = ({location}: IJ40Interface) => { positionOptions={{enableHighAccuracy: true}} onGeolocate={onGeolocate} onClick={onClickGeolocate} - trackUserLocation={true} + trackUserLocation={windowWidth < constants.USWDS_BREAKPOINTS.MOBILE_LG} + showUserHeading={windowWidth < constants.USWDS_BREAKPOINTS.MOBILE_LG} />
From 32814a71e36817a69b8a78a6ed2e25936e4cdc56 Mon Sep 17 00:00:00 2001 From: Vim USDS Date: Tue, 26 Jul 2022 11:03:36 -0700 Subject: [PATCH 09/13] Modify disabled label tooltip message --- client/src/components/J40Map.tsx | 1 + client/src/data/copy/explore.tsx | 5 +++++ client/src/intl/en.json | 4 ++++ 3 files changed, 10 insertions(+) diff --git a/client/src/components/J40Map.tsx b/client/src/components/J40Map.tsx index 9aa8b24b..d639efbc 100644 --- a/client/src/components/J40Map.tsx +++ b/client/src/components/J40Map.tsx @@ -510,6 +510,7 @@ const J40Map = ({location}: IJ40Interface) => { onClick={onClickGeolocate} trackUserLocation={windowWidth < constants.USWDS_BREAKPOINTS.MOBILE_LG} showUserHeading={windowWidth < constants.USWDS_BREAKPOINTS.MOBILE_LG} + disabledLabel={intl.formatMessage(EXPLORE_COPY.MAP.GEOLOC_MSG_DISABLED)} /> diff --git a/client/src/data/copy/explore.tsx b/client/src/data/copy/explore.tsx index 129bd7b4..a22a868c 100644 --- a/client/src/data/copy/explore.tsx +++ b/client/src/data/copy/explore.tsx @@ -169,6 +169,11 @@ export const MAP = defineMessages({ defaultMessage: 'Finding location...', description: 'On the explore the map page, on the map, this is the message above the gelocation icon that geolocation is locating.', }, + GEOLOC_MSG_DISABLED: { + id: 'explore.map.page.map.geolocation.disabled', + defaultMessage: 'Geolocation disabled', + description: 'On the explore the map page, on the map, this is the message above the gelocation icon that geolocation is disabled.', + }, // GEOLOC_MSG_OFF: { // id: 'explore.map.page.map.geolocation.off', // defaultMessage: 'Geolocation off', diff --git a/client/src/intl/en.json b/client/src/intl/en.json index e4c97f99..792f0db3 100644 --- a/client/src/intl/en.json +++ b/client/src/intl/en.json @@ -343,6 +343,10 @@ "defaultMessage": "Communities identified as disadvantaged by the map are those that are marginalized, underserved, and overburdened by pollution. These communities are at or above the thresholds in one or more of eight categories of criteria.", "description": "On the explore the map page, the description of the legend" }, + "explore.map.page.map.geolocation.disabled": { + "defaultMessage": "Geolocation disabled", + "description": "On the explore the map page, on the map, this is the message above the gelocation icon that geolocation is disabled." + }, "explore.map.page.map.geolocation.locating": { "defaultMessage": "Finding location...", "description": "On the explore the map page, on the map, this is the message above the gelocation icon that geolocation is locating." From b69959867a568e743f6250bf913fb27f56521e03 Mon Sep 17 00:00:00 2001 From: Vim USDS Date: Fri, 29 Jul 2022 15:20:23 -0700 Subject: [PATCH 10/13] Remove justice40-tool from prefix-path --- .github/workflows/deploy_fe_staging.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/deploy_fe_staging.yml b/.github/workflows/deploy_fe_staging.yml index 58d8ea9d..efd4877c 100644 --- a/.github/workflows/deploy_fe_staging.yml +++ b/.github/workflows/deploy_fe_staging.yml @@ -36,7 +36,7 @@ jobs: # https://github.com/usds/justice40-tool/blob/main/client/README.md DATA_SOURCE: cdn SITE_URL: "${{ secrets.STAGE_SITE_URL }}" - PATH_PREFIX: "/justice40-tool/${{env.DESTINATION_FOLDER}}" + PATH_PREFIX: "/${{env.DESTINATION_FOLDER}}" MAPBOX_STYLES_READ_TOKEN: "${{ secrets.MAPBOX_STYLES_READ_TOKEN }}" - name: Get directory contents run: ls -la public From 73f502452de217508fd193f01b5c04c556b8013b Mon Sep 17 00:00:00 2001 From: Vim USDS Date: Fri, 29 Jul 2022 15:21:41 -0700 Subject: [PATCH 11/13] Update staging link to new CDN link --- .github/workflows/deploy_fe_staging.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/deploy_fe_staging.yml b/.github/workflows/deploy_fe_staging.yml index efd4877c..5a42c170 100644 --- a/.github/workflows/deploy_fe_staging.yml +++ b/.github/workflows/deploy_fe_staging.yml @@ -94,7 +94,7 @@ jobs: # Deploy to S3 for the staging URL message: | **🚢 Here is the frontend staging link: 🚢** - Find it here: http://usds-geoplatform-justice40-website.s3-website-us-east-1.amazonaws.com/justice40-tool/${{env.DESTINATION_FOLDER}}/en/ ! + Find it here: https://screeningtool-staging.geoplatform.gov/${{env.DESTINATION_FOLDER}}/en/ ! repo-token: ${{ secrets.GITHUB_TOKEN }} repo-token-user-login: "github-actions[bot]" # The user.login for temporary GitHub tokens allow-repeats: false # This is the default From 9f2fe1a81044bac1bbdb9746ade9d42084ccaaeb Mon Sep 17 00:00:00 2001 From: Vim USDS Date: Fri, 29 Jul 2022 16:09:55 -0700 Subject: [PATCH 12/13] Remove messaging on mobile --- client/src/components/J40Map.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/components/J40Map.tsx b/client/src/components/J40Map.tsx index d639efbc..f4e57fc3 100644 --- a/client/src/components/J40Map.tsx +++ b/client/src/components/J40Map.tsx @@ -498,11 +498,11 @@ const J40Map = ({location}: IJ40Interface) => {
-
constants.USWDS_BREAKPOINTS.MOBILE_LG &&
{intl.formatMessage(EXPLORE_COPY.MAP.GEOLOC_MSG_LOCATING)} -
+
}
Date: Mon, 1 Aug 2022 23:40:59 -0700 Subject: [PATCH 13/13] Align Geolocate icon and Search - align geolocate and search according to mock for desktop and mobile --- client/src/components/J40Map.module.scss | 38 ++++--------------- .../MapSearch/MapSearch.module.scss | 29 ++++++++++---- .../MapSearchMessage.module.scss | 1 + 3 files changed, 30 insertions(+), 38 deletions(-) diff --git a/client/src/components/J40Map.module.scss b/client/src/components/J40Map.module.scss index 01827a3c..f1d83333 100644 --- a/client/src/components/J40Map.module.scss +++ b/client/src/components/J40Map.module.scss @@ -3,61 +3,37 @@ .j40Map { + // width < 1024 @include at-media-max("desktop") { - // < 1024 height: 55vh; } .mapHeaderRow{ @include u-display("flex"); @include u-padding-left(1.5); + justify-content: flex-start; - justify-content: space-between; - /* - This width is set to prevent this row from - overflowing. Using justify-content: space-between - will allow the geolocation button to be right - ajusted. Without the width property constraint - of 98%, the space-between property forces the - geolocation icon out of the parent container. - - Since the geolocation control is absolutely - positioned, attempts were made to set the - parent to be relative to avoid this, however - it seems that we haven't found a cleaner - solution (yet). - */ - width: 98%; - - .geolocateBox { - margin-top: 6px; + flex: 1 2 47%; + align-self: flex-end; + margin-bottom: 30px; + margin-left: 1rem; .geolocateMessage { visibility: visible; background-color: white; margin-bottom: 3px; + max-width: fit-content; } .geolocateMessageHide { visibility: hidden; margin-bottom: 3px; } - - @include at-media-max("tablet") { - // < 640 - margin-top: 28px; - } - - @media (max-width: 365px){ - margin-top: 46px; - } .geolocateIcon{ align-self: flex-end; - @include u-margin-right(4); - } } } diff --git a/client/src/components/MapSearch/MapSearch.module.scss b/client/src/components/MapSearch/MapSearch.module.scss index 3010fa31..ea9f6e73 100644 --- a/client/src/components/MapSearch/MapSearch.module.scss +++ b/client/src/components/MapSearch/MapSearch.module.scss @@ -1,12 +1,27 @@ @use '../../styles/design-system.scss' as *; .mapSearchContainer { - /* - The width of the container is being limited so that - as the device width decreases, the geolocation - button has enough space between the Search - component - */ - width: 71%; + /** + Various breakpoint are being used to allow a consistent ratio + of screen width between the search component and the geolocation + component across all device sizes. + */ + + // width < 660 + @include at-media-max("tablet") { + flex: 1 1 100%; + } + + // 660 < width < 1024 + @include at-media-max("desktop") { + @include at-media("tablet"){ + flex: 1 1 56%; + } + } + + // > 1024 + @include at-media("desktop") { + flex: 1 1 72%; + } } diff --git a/client/src/components/MapSearchMessage/MapSearchMessage.module.scss b/client/src/components/MapSearchMessage/MapSearchMessage.module.scss index 646b8116..6d0e6e23 100644 --- a/client/src/components/MapSearchMessage/MapSearchMessage.module.scss +++ b/client/src/components/MapSearchMessage/MapSearchMessage.module.scss @@ -11,6 +11,7 @@ .showMessage { @include searchMessageLayout; display: block; + width: fit-content; } .hideMessage {