publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-02-23 10:04:18 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'vimusds/1694-add-geolocate' into vimusds/release/frontend-narwhal-2

Browse source
This commit is contained in:
Vim USDS 2022-08-16 14:54:59 -07:00
commit 6ca50c299b
20 changed files with 348 additions and 246 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.github/workflows/deploy_fe_staging.yml vendored
View file

@ -36,7 +36,7 @@ jobs:
# https://github.com/usds/justice40-tool/blob/main/client/README.md # https://github.com/usds/justice40-tool/blob/main/client/README.md
DATA_SOURCE: cdn DATA_SOURCE: cdn
SITE_URL: "${{ secrets.STAGE_SITE_URL }}" 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 }}" MAPBOX_STYLES_READ_TOKEN: "${{ secrets.MAPBOX_STYLES_READ_TOKEN }}"
- name: Get directory contents - name: Get directory contents
run: ls -la public run: ls -la public
@ -94,7 +94,7 @@ jobs:
# Deploy to S3 for the staging URL # Deploy to S3 for the staging URL
message: | message: |
**🚢 Here is the frontend staging link: 🚢** **🚢 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: ${{ secrets.GITHUB_TOKEN }}
repo-token-user-login: "github-actions[bot]" # The user.login for temporary GitHub tokens repo-token-user-login: "github-actions[bot]" # The user.login for temporary GitHub tokens
allow-repeats: false # This is the default allow-repeats: false # This is the default

4
client/README.md
View file

@ -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 | 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.| | 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 | | 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| | uswds | 2.13.3 | 3.0.2 | No | Needs to stay at 2.13.3 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 | | trussworks | 3.1.0 | 3.1.0 | No | latest! |

138
client/package-lock.json generated
View file

@ -11,7 +11,7 @@
"dependencies": { "dependencies": {
"-": "^0.0.1", "-": "^0.0.1",
"@sentry/gatsby": "^7.7.0", "@sentry/gatsby": "^7.7.0",
"@trussworks/react-uswds": "^2.9.0", "@trussworks/react-uswds": "^3.1.0",
"@turf/bbox": "^6.5.0", "@turf/bbox": "^6.5.0",
"d3-ease": "^3.0.1", "d3-ease": "^3.0.1",
"gatsby-plugin-env-variables": "^2.2.0", "gatsby-plugin-env-variables": "^2.2.0",
@ -27,7 +27,7 @@
"react-intl": "^5.24.7", "react-intl": "^5.24.7",
"react-map-gl": "^6.1.19", "react-map-gl": "^6.1.19",
"react-use": "^17.3.2", "react-use": "^17.3.2",
"uswds": "^2.11.2" "uswds": "^2.13.3"
}, },
"devDependencies": { "devDependencies": {
"@formatjs/cli": "^4.8.2", "@formatjs/cli": "^4.8.2",
@ -3579,16 +3579,16 @@
} }
}, },
"node_modules/@trussworks/react-uswds": { "node_modules/@trussworks/react-uswds": {
"version": "2.9.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/@trussworks/react-uswds/-/react-uswds-2.9.0.tgz", "resolved": "https://registry.npmjs.org/@trussworks/react-uswds/-/react-uswds-3.1.0.tgz",
"integrity": "sha512-qv5twPgzLJulWsZew3No3W45FTp3WrYGwG/3B+w/mPFuAMHmAX7VAiigmg+k2kHFvrpjyAiKZHREpHyhkZIbig==", "integrity": "sha512-4krdLn8LGgr3EwOsizUF6cBLnwDS6x0WgJjjGk59kNBpgH4qiv8YGzic3HYaVr8xWBq36VpEEfGeQZnjYGMegw==",
"engines": { "engines": {
"node": "10.x - 16.x" "node": "10.x - 18.x"
}, },
"peerDependencies": { "peerDependencies": {
"react": "^16.x || ^17.x", "react": "^16.x || ^17.x",
"react-dom": "^16.x || ^17.x", "react-dom": "^16.x || ^17.x",
"uswds": "2.11.2" "uswds": "2.13.3"
} }
}, },
"node_modules/@trysound/sax": { "node_modules/@trysound/sax": {
@ -6622,9 +6622,9 @@
} }
}, },
"node_modules/classlist-polyfill": { "node_modules/classlist-polyfill": {
"version": "1.2.0", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz", "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.0.3.tgz",
"integrity": "sha1-k1vC39lFiodrJ5YXUUY4vKqWSi4=" "integrity": "sha512-bDLDUsSg5LYFWsc2hphtG6ulyaCFSupdEBU3wxNECKWHnyPVvY8EB9Wbt9DzWkstWclFZhDaZK/VnEK/DmqE/Q=="
}, },
"node_modules/clean-stack": { "node_modules/clean-stack": {
"version": "2.2.0", "version": "2.2.0",
@ -8877,11 +8877,6 @@
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.89.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.89.tgz",
"integrity": "sha512-z1Axg0Fu54fse8wN4fd+GAINdU5mJmLtcl6bqIcYyzNVGONcfHAeeJi88KYMQVKalhXlYuVPzKkFIU5VD0raUw==" "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": { "node_modules/element-closest": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/element-closest/-/element-closest-2.0.2.tgz", "resolved": "https://registry.npmjs.org/element-closest/-/element-closest-2.0.2.tgz",
@ -25238,57 +25233,20 @@
} }
}, },
"node_modules/uswds": { "node_modules/uswds": {
"version": "2.11.2", "version": "2.13.3",
"resolved": "https://registry.npmjs.org/uswds/-/uswds-2.11.2.tgz", "resolved": "https://registry.npmjs.org/uswds/-/uswds-2.13.3.tgz",
"integrity": "sha512-JISTXCjPIlrufbObIifjrMDn5jF9bbLu7UYhGWmEs9iqB6Z2KDCXHVoBUyzMmIrIjW/UWWYHZzPqOOHO6/IMCQ==", "integrity": "sha512-qCblljeaRvS3+PrSxoHqQwmMnp746+Y1YZA34BkTzJknvo2bhhdzGE21yJaInumzIqV3glLD13TFdRwrwikMMQ==",
"dependencies": { "dependencies": {
"classlist-polyfill": "^1.0.3", "classlist-polyfill": "1.0.3",
"del": "^6.0.0", "domready": "1.0.8",
"domready": "^1.0.8", "object-assign": "4.1.1",
"elem-dataset": "^2.0.0", "receptor": "1.0.0",
"object-assign": "^4.1.1", "resolve-id-refs": "0.1.0"
"receptor": "^1.0.0",
"resolve-id-refs": "^0.1.0"
}, },
"engines": { "engines": {
"node": ">= 4" "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": { "node_modules/util": {
"version": "0.10.4", "version": "0.10.4",
"resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz", "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
@ -29128,9 +29086,9 @@
"dev": true "dev": true
}, },
"@trussworks/react-uswds": { "@trussworks/react-uswds": {
"version": "2.9.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/@trussworks/react-uswds/-/react-uswds-2.9.0.tgz", "resolved": "https://registry.npmjs.org/@trussworks/react-uswds/-/react-uswds-3.1.0.tgz",
"integrity": "sha512-qv5twPgzLJulWsZew3No3W45FTp3WrYGwG/3B+w/mPFuAMHmAX7VAiigmg+k2kHFvrpjyAiKZHREpHyhkZIbig==", "integrity": "sha512-4krdLn8LGgr3EwOsizUF6cBLnwDS6x0WgJjjGk59kNBpgH4qiv8YGzic3HYaVr8xWBq36VpEEfGeQZnjYGMegw==",
"requires": {} "requires": {}
}, },
"@trysound/sax": { "@trysound/sax": {
@ -31616,9 +31574,9 @@
} }
}, },
"classlist-polyfill": { "classlist-polyfill": {
"version": "1.2.0", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz", "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.0.3.tgz",
"integrity": "sha1-k1vC39lFiodrJ5YXUUY4vKqWSi4=" "integrity": "sha512-bDLDUsSg5LYFWsc2hphtG6ulyaCFSupdEBU3wxNECKWHnyPVvY8EB9Wbt9DzWkstWclFZhDaZK/VnEK/DmqE/Q=="
}, },
"clean-stack": { "clean-stack": {
"version": "2.2.0", "version": "2.2.0",
@ -33405,11 +33363,6 @@
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.89.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.89.tgz",
"integrity": "sha512-z1Axg0Fu54fse8wN4fd+GAINdU5mJmLtcl6bqIcYyzNVGONcfHAeeJi88KYMQVKalhXlYuVPzKkFIU5VD0raUw==" "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": { "element-closest": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/element-closest/-/element-closest-2.0.2.tgz", "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==" "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
}, },
"uswds": { "uswds": {
"version": "2.11.2", "version": "2.13.3",
"resolved": "https://registry.npmjs.org/uswds/-/uswds-2.11.2.tgz", "resolved": "https://registry.npmjs.org/uswds/-/uswds-2.13.3.tgz",
"integrity": "sha512-JISTXCjPIlrufbObIifjrMDn5jF9bbLu7UYhGWmEs9iqB6Z2KDCXHVoBUyzMmIrIjW/UWWYHZzPqOOHO6/IMCQ==", "integrity": "sha512-qCblljeaRvS3+PrSxoHqQwmMnp746+Y1YZA34BkTzJknvo2bhhdzGE21yJaInumzIqV3glLD13TFdRwrwikMMQ==",
"requires": { "requires": {
"classlist-polyfill": "^1.0.3", "classlist-polyfill": "1.0.3",
"del": "^6.0.0", "domready": "1.0.8",
"domready": "^1.0.8", "object-assign": "4.1.1",
"elem-dataset": "^2.0.0", "receptor": "1.0.0",
"object-assign": "^4.1.1", "resolve-id-refs": "0.1.0"
"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"
}
}
} }
}, },
"util": { "util": {

4
client/package.json
View file

@ -77,7 +77,7 @@
"dependencies": { "dependencies": {
"-": "^0.0.1", "-": "^0.0.1",
"@sentry/gatsby": "^7.7.0", "@sentry/gatsby": "^7.7.0",
"@trussworks/react-uswds": "^2.9.0", "@trussworks/react-uswds": "^3.1.0",
"@turf/bbox": "^6.5.0", "@turf/bbox": "^6.5.0",
"d3-ease": "^3.0.1", "d3-ease": "^3.0.1",
"gatsby-plugin-env-variables": "^2.2.0", "gatsby-plugin-env-variables": "^2.2.0",
@ -93,7 +93,7 @@
"react-intl": "^5.24.7", "react-intl": "^5.24.7",
"react-map-gl": "^6.1.19", "react-map-gl": "^6.1.19",
"react-use": "^17.3.2", "react-use": "^17.3.2",
"uswds": "^2.11.2" "uswds": "^2.13.3"
}, },
"cypress-cucumber-preprocessor": { "cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": false "nonGlobalStepDefinitions": false

2
client/src/components/AboutCard/AboutCard.tsx
View file

@ -64,7 +64,7 @@ const AboutCard = (props: React.PropsWithChildren<AboutCardProps>) => {
internal={props.internal} internal={props.internal}
url={props.url ? props.url : ''} url={props.url ? props.url : ''}
openUrlNewTab={props.openUrlNewTab} openUrlNewTab={props.openUrlNewTab}
className={'j40-aboutcard-link'} // className={'j40-aboutcard-link'}
/> />
</div> </div>
</Grid> </Grid>

1
client/src/components/AboutCard/__snapshots__/AboutCard.test.tsx.snap
View file

@ -77,7 +77,6 @@ exports[`rendering of the AboutCard checks if small cards component renders 1`]
class="j40-aboutcard-sm-link" class="j40-aboutcard-sm-link"
> >
<a <a
class="j40-aboutcard-link"
data-cy="" data-cy=""
href="#" href="#"
> >

11
client/src/components/AreaDetail/AreaDetail.tsx
View file

@ -288,7 +288,7 @@ const AreaDetail = ({properties, hash}: IAreaDetailProps) => {
// description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.MED_HOME_VAL), // description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.MED_HOME_VAL),
// value: properties[constants.MEDIAN_HOME_VALUE_PERCENTILE] ? // value: properties[constants.MEDIAN_HOME_VALUE_PERCENTILE] ?
// properties[constants.MEDIAN_HOME_VALUE_PERCENTILE] : null, // properties[constants.MEDIAN_HOME_VALUE_PERCENTILE] : null,
// isDisadvagtaged: false, // TODO // isDisadvagtaged: false,
// }; // };
const proxHaz: indicatorInfo = { const proxHaz: indicatorInfo = {
@ -531,6 +531,15 @@ const AreaDetail = ({properties, hash}: IAreaDetailProps) => {
// component to render the actual Indicator // component to render the actual Indicator
const categoryItems = categories.map((category) => ({ const categoryItems = categories.map((category) => ({
id: category.id, 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: <Category name={category.titleText} isDisadvantaged={category.isDisadvagtaged} />, title: <Category name={category.titleText} isDisadvantaged={category.isDisadvagtaged} />,
content: ( content: (
<> <>

71
client/src/components/J40Map.module.scss
View file

@ -1,24 +1,57 @@
@use '../styles/design-system.scss' as *; @use '../styles/design-system.scss' as *;
@import "./utils.scss"; @import "./utils.scss";
.j40Popup {
width: 375px;
}
.navigationControl { .j40Map {
left: .75em; // width < 1024
top: units(15); @include at-media-max("desktop") {
// width: 2.5em; height: 55vh;
} }
.fullscreenControl { .mapHeaderRow{
right: 1.25em; @include u-display("flex");
top: 2.5em; @include u-padding-left(1.5);
} justify-content: flex-start;
.geolocateBox {
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;
}
.geolocateIcon{
align-self: flex-end;
}
}
}
.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 { .mapInfoPanel {
@ -26,11 +59,3 @@
overflow-y: auto; overflow-y: auto;
height: 90vh; 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;
}
}

25
client/src/components/J40Map.module.scss.d.ts vendored
View file

@ -1,14 +1,23 @@
declare namespace J40MapModuleScssNamespace { declare namespace J40MapModuleScssNamespace {
export interface IJ40MapModuleScss { export interface IJ40MapModuleScss {
j40Popup: string; // main J40 map style
territoryFocusButton: string;
territoryFocusContainer: string;
navigationControl: string;
fullscreenControl: string;
geolocateControl: string;
detailView: string;
mapInfoPanel: string;
j40Map: string; 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;
} }
} }

66
client/src/components/J40Map.tsx
View file

@ -13,6 +13,7 @@ import ReactMapGL, {
FlyToInterpolator, FlyToInterpolator,
FullscreenControl, FullscreenControl,
MapRef, Source, Layer} from 'react-map-gl'; MapRef, Source, Layer} from 'react-map-gl';
import {useIntl} from 'gatsby-plugin-intl';
import bbox from '@turf/bbox'; import bbox from '@turf/bbox';
import * as d3 from 'd3-ease'; import * as d3 from 'd3-ease';
import {isMobile} from 'react-device-detect'; 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 constants from '../data/constants';
import * as styles from './J40Map.module.scss'; import * as styles from './J40Map.module.scss';
import * as COMMON_COPY from '../data/copy/common'; import * as COMMON_COPY from '../data/copy/common';
import * as EXPLORE_COPY from '../data/copy/explore';
declare global { declare global {
@ -98,7 +100,12 @@ export const featureURLForTilesetName = (tilesetName: string): string => {
} }
}; };
/**
* This the main map component
*
* @param {IJ40Interface} location
* @returns {ReactElement}
*/
const J40Map = ({location}: IJ40Interface) => { const J40Map = ({location}: IJ40Interface) => {
/** /**
* Initializes the zoom, and the map's center point (lat, lng) via the URL hash #{z}/{lat}/{long} * Initializes the zoom, and the map's center point (lat, lng) via the URL hash #{z}/{lat}/{long}
@ -131,6 +138,7 @@ const J40Map = ({location}: IJ40Interface) => {
const mapRef = useRef<MapRef>(null); const mapRef = useRef<MapRef>(null);
const flags = useFlags(); const flags = useFlags();
const intl = useIntl();
const selectedFeatureId = (selectedFeature && selectedFeature.id) || ''; const selectedFeatureId = (selectedFeature && selectedFeature.id) || '';
const filter = useMemo(() => ['in', constants.GEOID_PROPERTY, selectedFeatureId], [selectedFeature]); const filter = useMemo(() => ['in', constants.GEOID_PROPERTY, selectedFeatureId], [selectedFeature]);
@ -329,12 +337,12 @@ const J40Map = ({location}: IJ40Interface) => {
return ( return (
<> <>
<Grid desktop={{col: 9}} className={styles.j40Map}> <Grid desktop={{col: 9}} className={styles.j40Map}>
{/** {/**
* // * This will render the MapSearch component
*
* Note: * 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
* <ReactMapGL> 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 * 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 * correctly in a production build. Leaving this comment here in case future flags are
* needed in this component. * needed in this component.
@ -346,9 +354,9 @@ const J40Map = ({location}: IJ40Interface) => {
* - npm run clean && npm run build && npm run serve * - npm run clean && npm run build && npm run serve
* *
* to ensure the production build works and that MapSearch and the map (ReactMapGL) render correctly. * to ensure the production build works and that MapSearch and the map (ReactMapGL) render correctly.
*
* Any component declarations outside the <ReactMapGL> component may be susceptible to this bug.
*/} */}
<MapSearch goToPlace={goToPlace}/>
{/** {/**
* The ReactMapGL component's props are grouped by the API's documentation. The component also has * The ReactMapGL component's props are grouped by the API's documentation. The component also has
@ -393,7 +401,9 @@ const J40Map = ({location}: IJ40Interface) => {
data-cy={'reactMapGL'} data-cy={'reactMapGL'}
> >
{/** {/**
* The low zoom source * Load all data sources and layers
*
* First the low zoom:
*/} */}
<Source <Source
id={constants.LOW_ZOOM_SOURCE_NAME} id={constants.LOW_ZOOM_SOURCE_NAME}
@ -483,25 +493,41 @@ const J40Map = ({location}: IJ40Interface) => {
/> />
</Source> </Source>
{/* 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 */}
<div className={styles.mapHeaderRow}>
<MapSearch goToPlace={goToPlace}/>
<div className={styles.geolocateBox}>
{windowWidth > constants.USWDS_BREAKPOINTS.MOBILE_LG && <div
className={
geolocationInProgress ? styles.geolocateMessage : styles.geolocateMessageHide}>
{intl.formatMessage(EXPLORE_COPY.MAP.GEOLOC_MSG_LOCATING)}
</div>}
<div className={styles.geolocateIcon}>
<GeolocateControl
positionOptions={{enableHighAccuracy: true}}
onGeolocate={onGeolocate}
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)}
/>
</div>
</div>
</div>
{/* 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 && <NavigationControl { windowWidth > constants.USWDS_BREAKPOINTS.MOBILE_LG && <NavigationControl
showCompass={false} showCompass={false}
className={styles.navigationControl} className={styles.navigationControl}
/> } /> }
{/* 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 */}
<TerritoryFocusControl onClick={onClick}/> <TerritoryFocusControl onClick={onClick}/>
{/* This places Geolocation behind a feature flag */}
{'gl' in flags ? <GeolocateControl
className={styles.geolocateControl}
positionOptions={{enableHighAccuracy: true}}
onGeolocate={onGeolocate}
// @ts-ignore
onClick={onClickGeolocate}
/> : ''}
{geolocationInProgress ? <div>Geolocation in progress...</div> : ''}
{/* Enable fullscreen pop-up behind a feature flag */} {/* Enable fullscreen pop-up behind a feature flag */}
{('fs' in flags && detailViewData && !transitionInProgress) && ( {('fs' in flags && detailViewData && !transitionInProgress) && (
<Popup <Popup

31
client/src/components/MapSearch/MapSearch.module.scss
View file

@ -1,20 +1,27 @@
@use '../../styles/design-system.scss' as *; @use '../../styles/design-system.scss' as *;
.mapSearchContainer { .mapSearchContainer {
/**
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.
*/
// styles for mobile-lg (480px) and greater widths, // width < 660
@include at-media('mobile-lg') { @include at-media-max("tablet") {
position: absolute; flex: 1 1 100%;
// top: units(4); }
left: units(1.5);
width: 50%; // 660 < width < 1024
z-index: 1; @include at-media-max("desktop") {
@include at-media("tablet"){
flex: 1 1 56%;
} }
}
// styles for less than mobile-lg (480px) // > 1024
position: absolute; @include at-media("desktop") {
left: units(1.5); flex: 1 1 72%;
width: 90%; }
z-index: 1;
} }

10
client/src/components/MapSearch/__snapshots__/MapSearch.test.tsx.snap
View file

@ -31,11 +31,11 @@ exports[`rendering of the MapSearch checks if component renders 1`] = `
data-testid="button" data-testid="button"
type="submit" type="submit"
> >
<span <img
class="usa-sr-only" alt="Search"
> class="usa-search__submit-icon"
Search src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTE1LjUgMTRoLS43OWwtLjI4LS4yN0MxNS40MSAxMi41OSAxNiAxMS4xMSAxNiA5LjUgMTYgNS45MSAxMy4wOSAzIDkuNSAzUzMgNS45MSAzIDkuNSA1LjkxIDE2IDkuNSAxNmMxLjYxIDAgMy4wOS0uNTkgNC4yMy0xLjU3bC4yNy4yOHYuNzlsNSA0Ljk5TDIwLjQ5IDE5bC00Ljk5LTV6bS02IDBDNy4wMSAxNCA1IDExLjk5IDUgOS41UzcuMDEgNSA5LjUgNSAxNCA3LjAxIDE0IDkuNSAxMS45OSAxNCA5LjUgMTR6Ii8+PC9zdmc+"
</span> />
</button> </button>
</form> </form>
</div> </div>

1
client/src/components/MapSearchMessage/MapSearchMessage.module.scss
View file

@ -11,6 +11,7 @@
.showMessage { .showMessage {
@include searchMessageLayout; @include searchMessageLayout;
display: block; display: block;
width: fit-content;
} }
.hideMessage { .hideMessage {

2
client/src/components/PublicEvent/PublicEvent.tsx
View file

@ -43,7 +43,7 @@ const PublicEvent = ({event}:IPublicEvent) => {
}> }>
{/* Heading */} {/* Heading */}
<CollectionHeading> <CollectionHeading headingLevel='h3'>
{isEventExpired ? eventName : <LinkTypeWrapper {isEventExpired ? eventName : <LinkTypeWrapper
linkText={eventName} linkText={eventName}
internal={false} internal={false}

92
client/src/components/PublicVideoBox/PublicVideoBox.tsx
View file

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import {Button, SummaryBox} from '@trussworks/react-uswds'; import {Button, SummaryBox, SummaryBoxContent, SummaryBoxHeading} from '@trussworks/react-uswds';
import {useIntl} from 'gatsby-plugin-intl'; import {useIntl} from 'gatsby-plugin-intl';
import * as PUBLIC_COPY from '../../data/copy/publicEngage'; import * as PUBLIC_COPY from '../../data/copy/publicEngage';
@ -15,52 +15,58 @@ const PublicVideoBox = () => {
return ( return (
<SummaryBox <SummaryBox
className={styles.publicVideoContainer} className={styles.publicVideoContainer}>
heading={intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.TITLE)}>
{intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.BODY)} <SummaryBoxHeading headingLevel='h3'>
<a {intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.TITLE)}
className={styles.publicVideoLink} </SummaryBoxHeading>
href={`https://www.youtube.com/watch?v=QwHWcXbhw28`}
target={'_blank'} <SummaryBoxContent>
rel="noreferrer" {intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.BODY)}
> <a
<Button className={styles.publicVideoLink}
type="button" href={`https://www.youtube.com/watch?v=QwHWcXbhw28`}
className={styles.youTubeBtn} target={'_blank'}
rel="noreferrer"
> >
<div className={styles.buttonContainer}> <Button
<div className={styles.buttonText}> type="button"
{intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.BUTTON1_TEXT)} className={styles.youTubeBtn}
>
<div className={styles.buttonContainer}>
<div className={styles.buttonText}>
{intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.BUTTON1_TEXT)}
</div>
<img
className={styles.buttonImage}
src={launchIcon}
alt={intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.IMG_ALT_TEXT1)}
/>
</div> </div>
<img </Button>
className={styles.buttonImage} </a>
src={launchIcon} <a
alt={intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.IMG_ALT_TEXT1)} className={styles.publicVideoLink}
/> href={`https://static-data-screeningtool.geoplatform.gov/data-pipeline/data/score/downloadable/technical-training-slides.pptx`}
</div> download
</Button>
</a>
<a
className={styles.publicVideoLink}
href={`https://static-data-screeningtool.geoplatform.gov/data-pipeline/data/score/downloadable/technical-training-slides.pptx`}
download
>
<Button
type="button"
className={styles.youTubeBtn}
> >
<div className={styles.buttonContainer}> <Button
<div className={styles.buttonText}> type="button"
{intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.BUTTON2_TEXT)} className={styles.youTubeBtn}
>
<div className={styles.buttonContainer}>
<div className={styles.buttonText}>
{intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.BUTTON2_TEXT)}
</div>
<img
className={styles.buttonImage}
src={fileDownloadIcon}
alt={intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.IMG_ALT_TEXT2)}
/>
</div> </div>
<img </Button>
className={styles.buttonImage} </a>
src={fileDownloadIcon} </SummaryBoxContent>
alt={intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.IMG_ALT_TEXT2)}
/>
</div>
</Button>
</a>
</SummaryBox> </SummaryBox>
); );
}; };

14
client/src/components/RequestForInfo/RequestForInfo.tsx
View file

@ -1,5 +1,5 @@
import React from 'react'; 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 {useIntl} from 'gatsby-plugin-intl';
import * as CONTACT_COPY from '../../data/copy/contact'; import * as CONTACT_COPY from '../../data/copy/contact';
@ -9,8 +9,16 @@ const RequestForInfo = () => {
const intl = useIntl(); const intl = useIntl();
return ( return (
<SummaryBox className={styles.rfiBox} heading={intl.formatMessage(CONTACT_COPY.RFI_BOX.TITLE)}> <SummaryBox className={styles.rfiBox}>
<p>{CONTACT_COPY.RFI_BOX_BODY}</p>
<SummaryBoxHeading headingLevel='h3'>
{intl.formatMessage(CONTACT_COPY.RFI_BOX.TITLE)}
</SummaryBoxHeading>
<SummaryBoxContent>
<p>{CONTACT_COPY.RFI_BOX_BODY}</p>
</SummaryBoxContent>
</SummaryBox> </SummaryBox>
); );
}; };

36
client/src/data/copy/explore.tsx
View file

@ -9,6 +9,12 @@ import * as DOWNLOADS_COPY from './downloads';
import * as METHODOLOGY_COPY from './methodology'; import * as METHODOLOGY_COPY from './methodology';
import {PAGES_ENDPOINTS} from '../constants'; 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({ export const PAGE_INTRO = defineMessages({
PAGE_TILE: { PAGE_TILE: {
id: 'explore.map.page.title.text', id: 'explore.map.page.title.text',
@ -158,6 +164,26 @@ export const MAP = defineMessages({
defaultMessage: 'US Virgin Islands', defaultMessage: 'US Virgin Islands',
description: 'On the explore the map page, on the map, the full name indicating the bounds of US Virgin Islands', description: 'On the explore the map page, on the map, the full name indicating the bounds of US Virgin Islands',
}, },
GEOLOC_MSG_LOCATING: {
id: '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.',
},
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',
// description: 'On the explore the map page, on the map, this is the message above the gelocation icon that geolocation is off.',
// },
// GEOLOC_MSG_LOCKED: {
// id: 'explore.map.page.map.geolocation.locked',
// defaultMessage: 'Geolocation locked',
// description: 'On the explore the map page, on the map, this is the message above the gelocation icon that geolocation is locked.',
// },
}); });
@ -868,16 +894,16 @@ export const NOTE_ON_TRIBAL_NATIONS = {
is engaging in consultation and coordination with Tribal Nations on the beta version of the map 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 <link2> to provide Tribal Nations with meaningful opportunities for input, consistent with CEQ’s <link2>
Action Plan for Consultation and Coordination with Tribal Nations</link2>, Action Plan for Consultation and Coordination with Tribal Nations</link2>,
<link3>President Biden’s Memorandum on Tribal Consultation and Strengthening President Biden’s <link3>Memorandum on Tribal Consultation and Strengthening
Nation-to-Nation Consultation</link3>, and Executive Order 13175 on <link4>Consultation and Nation-to-Nation Consultation</link3>, and <link4>Executive Order 13175 on Consultation and
Coordination With Indian Tribal Governments</link4>. Coordination With Indian Tribal Governments</link4>.
`} `}
description={`Navigate to the explore the map page. Under the map, you will see tribal nations paragraph 1`} description={`Navigate to the explore the map page. Under the map, you will see tribal nations paragraph 1`}
values={{ values={{
link1: COMMON_COPY.linkFn(PAGES_ENDPOINTS.METHODOLOGY, true, false), 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), link2: COMMON_COPY.linkFn(EXPLORE_PAGE_LINKS.TRIBAL_ACTION_PLAN, 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), link3: COMMON_COPY.linkFn(EXPLORE_PAGE_LINKS.TRIBAL_WHITEHOUSE, 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), link4: COMMON_COPY.linkFn(EXPLORE_PAGE_LINKS.TRIBAL_FED_REGISTER, false, true),
}} }}
/>, />,
}; };

10
client/src/intl/en.json
View file

@ -343,6 +343,14 @@
"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.", "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" "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."
},
"explore.map.page.map.search.placeholder.mobile.text": { "explore.map.page.map.search.placeholder.mobile.text": {
"defaultMessage": "Search locations", "defaultMessage": "Search locations",
"description": "On the explore the map page, on the map, the placeholder text for search" "description": "On the explore the map page, on the map, the placeholder text for search"
@ -868,7 +876,7 @@
"description": "Navigate to the explore the map page. Under the map, you will see tribal nations intro text" "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": { "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 <link1>Methodology & data</link1> 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 <link2> Action Plan for Consultation and Coordination with Tribal Nations</link2>, <link3>President Biden’s Memorandum on Tribal Consultation and Strengthening Nation-to-Nation Consultation</link3>, and Executive Order 13175 on <link4>Consultation and Coordination With Indian Tribal Governments</link4>.", "defaultMessage": "The map covers all U.S. census tracts, including those located within Tribal Nations, to the extent that data is available (see our <link1>Methodology & data</link1> 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 <link2> Action Plan for Consultation and Coordination with Tribal Nations</link2>, President Biden’s <link3>Memorandum on Tribal Consultation and Strengthening Nation-to-Nation Consultation</link3>, and <link4>Executive Order 13175 on Consultation and Coordination With Indian Tribal Governments</link4>.",
"description": "Navigate to the explore the map page. Under the map, you will see tribal nations paragraph 1" "description": "Navigate to the explore the map page. Under the map, you will see tribal nations paragraph 1"
}, },
"fab.survey.text": { "fab.survey.text": {

6
client/src/pages/tests/__snapshots__/about.test.tsx.snap
View file

@ -607,7 +607,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="j40-aboutcard-sm-link" class="j40-aboutcard-sm-link"
> >
<a <a
class="j40-aboutcard-link"
href="/en/methodology" href="/en/methodology"
> >
Methodology & data Methodology & data
@ -662,7 +661,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="j40-aboutcard-sm-link" class="j40-aboutcard-sm-link"
> >
<a <a
class="j40-aboutcard-link"
href="/en/" href="/en/"
> >
Explore the map Explore the map
@ -731,7 +729,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="j40-aboutcard-sm-link" class="j40-aboutcard-sm-link"
> >
<a <a
class="usa-link usa-link--external j40-aboutcard-link" class="usa-link usa-link--external"
data-cy="" data-cy=""
href="mailto:Screeningtool-Support@omb.eop.gov" href="mailto:Screeningtool-Support@omb.eop.gov"
rel="noreferrer" rel="noreferrer"
@ -791,7 +789,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
class="j40-aboutcard-sm-link" class="j40-aboutcard-sm-link"
> >
<a <a
class="usa-link usa-link--external j40-aboutcard-link" class="usa-link usa-link--external"
data-cy="" data-cy=""
href="https://github.com/usds/justice40-tool" href="https://github.com/usds/justice40-tool"
rel="noreferrer" rel="noreferrer"

64
client/src/styles/global.scss
View file

@ -140,6 +140,18 @@ components include:
} }
} }
// all external links
.usa-link--external::after {
margin-top: .5ex !important;
}
// external links in the dataset Cards
li[class*='datasetCard-module'] .usa-link--external::after {
margin-top: .2ex !important;
}
/* /*
****************************** ******************************
* FOOTER STYLES * FOOTER STYLES
@ -164,8 +176,12 @@ components include:
@include u-display('inline-block'); @include u-display('inline-block');
@include u-margin-top(1.5) @include u-margin-top(1.5)
} }
}
// external links in the footer only
.usa-link--external::after {
margin-top: .2ex !important;
}
}
@ -185,12 +201,50 @@ This section will outline styles that are component specific
// Maplibre overrides // Maplibre overrides
// Note that these need to be here to properly override defaults // Note that these need to be here to properly override defaults
/**
Geolocate Icon Styling:
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='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='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), 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: #0076d6 !important;
}
.mapboxgl-user-location-dot::after {
border: 4px solid #FFF !important;
}
// Overide mapbox popup styles
.mapboxgl-popup-close-button { .mapboxgl-popup-close-button {
font-size: 3em; font-size: 3em;
margin-right: 12px; margin-right: 12px;
margin-top: 15px; margin-top: 15px;
} }
.mapboxgl-popup-content { .mapboxgl-popup-content {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5) !important; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5) !important;
border-radius: 8px !important; border-radius: 8px !important;
@ -371,9 +425,9 @@ a.mapboxgl-ctrl-logo {
@include u-margin-top(5); @include u-margin-top(5);
} }
.j40-aboutcard-link { // .j40-aboutcard-link {
font-weight: bold; // font-weight: bold;
} // }
} }
.j40-aboutcard-sm-card { .j40-aboutcard-sm-card {