diff --git a/.github/workflows/build_deploy.yml b/.github/workflows/build_deploy.yml index 0ca9d7c1..c06b7c8a 100644 --- a/.github/workflows/build_deploy.yml +++ b/.github/workflows/build_deploy.yml @@ -101,7 +101,7 @@ jobs: run: aws s3 sync ./public/ s3://usds-geoplatform-justice40-website/justice40-tool/${{env.DESTINATION_FOLDER}} --acl public-read --delete - name: Update PR with deployed URL uses: mshick/add-pr-comment@v1 - if: github.event_name == 'pull_request' && github.event.action == 'opened' || github.event_name == 'push' # Only comment if the PR has been opened or a push has updated it + if: (github.event_name == 'pull_request' && github.event.action == 'opened') || github.event_name == 'push' # Only comment if the PR has been opened or a push has updated it with: message: | **🚢 PR Deployed! 🚢** diff --git a/client/src/components/areaDetail.module.scss b/client/src/components/AreaDetail/areaDetail.module.scss similarity index 99% rename from client/src/components/areaDetail.module.scss rename to client/src/components/AreaDetail/areaDetail.module.scss index 94b2024f..811759c1 100644 --- a/client/src/components/areaDetail.module.scss +++ b/client/src/components/AreaDetail/areaDetail.module.scss @@ -1,4 +1,4 @@ -@import "./utils.scss"; +@import "../utils.scss"; $sidePanelLabelFontColor: #171716; $featureSelectBorderColor: #00bde3; diff --git a/client/src/components/areaDetail.module.scss.d.ts b/client/src/components/AreaDetail/areaDetail.module.scss.d.ts similarity index 97% rename from client/src/components/areaDetail.module.scss.d.ts rename to client/src/components/AreaDetail/areaDetail.module.scss.d.ts index 060bcaac..e18a1518 100644 --- a/client/src/components/areaDetail.module.scss.d.ts +++ b/client/src/components/AreaDetail/areaDetail.module.scss.d.ts @@ -17,7 +17,6 @@ declare namespace MapModuleScssNamespace { censusLabel:string; divider:string; indicatorBox:string; - indicatorInfo:string; indicatorTitle:string; indicatorDescription:string; indicatorValue:string; diff --git a/client/src/components/areaDetail.tsx b/client/src/components/AreaDetail/index.tsx similarity index 96% rename from client/src/components/areaDetail.tsx rename to client/src/components/AreaDetail/index.tsx index eb57fcb7..128edd83 100644 --- a/client/src/components/areaDetail.tsx +++ b/client/src/components/AreaDetail/index.tsx @@ -7,7 +7,7 @@ import {defineMessages} from 'react-intl'; // Styles and constants import * as styles from './areaDetail.module.scss'; -import * as constants from '../data/constants'; +import * as constants from '../../data/constants'; export const readablePercent = (percent: number) => { return `${(percent * 100).toFixed(1)}`; @@ -113,6 +113,8 @@ const AreaDetail = ({properties}:IAreaDetailProps) => { const score = properties[constants.SCORE_PROPERTY_HIGH] as number; const blockGroup = properties[constants.GEOID_PROPERTY]; const population = properties[constants.TOTAL_POPULATION]; + const countyName = properties[constants.COUNTY_NAME]; + const stateName = properties[constants.STATE_NAME]; interface indicatorInfo { label: string, @@ -176,11 +178,11 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
  • {intl.formatMessage(messages.county)} - {'Washington County*'} + {countyName}
  • {intl.formatMessage(messages.state)} - {'District of Columbia*'} + {stateName}
  • {intl.formatMessage(messages.population)} @@ -194,7 +196,7 @@ const AreaDetail = ({properties}:IAreaDetailProps) => { {indicators.map((indicator, index) => (
  • -
    +
    {indicator.label}
    {indicator.description} diff --git a/client/src/components/__snapshots__/areaDetail.test.tsx.snap b/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap similarity index 95% rename from client/src/components/__snapshots__/areaDetail.test.tsx.snap rename to client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap index 8c79de21..7bcc6bab 100644 --- a/client/src/components/__snapshots__/areaDetail.test.tsx.snap +++ b/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap @@ -49,17 +49,13 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1 County: - - Washington County* - +
  • State: - - District of Columbia* - +
  • diff --git a/client/src/components/areaDetail.test.tsx b/client/src/components/AreaDetail/tests/areaDetail.test.tsx similarity index 89% rename from client/src/components/areaDetail.test.tsx rename to client/src/components/AreaDetail/tests/areaDetail.test.tsx index f2f2f8d5..e130b158 100644 --- a/client/src/components/areaDetail.test.tsx +++ b/client/src/components/AreaDetail/tests/areaDetail.test.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import {render} from '@testing-library/react'; -import AreaDetail, {getCategorization, readablePercent} from './areaDetail'; -import {LocalizedComponent} from '../test/testHelpers'; -import * as constants from '../data/constants'; +import AreaDetail, {getCategorization, readablePercent} from '..'; +import {LocalizedComponent} from '../../../test/testHelpers'; +import * as constants from '../../../data/constants'; describe('rendering of the AreaDetail', () => { const properties = { diff --git a/client/src/components/DatasetContainer/index.tsx b/client/src/components/DatasetContainer/index.tsx index 20631227..55f00152 100644 --- a/client/src/components/DatasetContainer/index.tsx +++ b/client/src/components/DatasetContainer/index.tsx @@ -76,7 +76,7 @@ const DatasetContainer = () => {
    - +
    diff --git a/client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap b/client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap index 215712dc..4fe3cf5b 100644 --- a/client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap +++ b/client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap @@ -11,7 +11,9 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
    -
    +
    Limited data sources — Datasets may be added, updated, or removed.
    diff --git a/client/src/components/J40Alert/index.tsx b/client/src/components/J40Alert/index.tsx index d529c034..1c67f3fc 100644 --- a/client/src/components/J40Alert/index.tsx +++ b/client/src/components/J40Alert/index.tsx @@ -1,25 +1,28 @@ import React from 'react'; import {useIntl} from 'gatsby-plugin-intl'; import {defineMessages} from 'react-intl'; + import * as styles from './j40Alert.module.scss'; // This prop follows an inversion of control pattern allowing the user of this component to specify // how it's rendered. See more here: https://kentcdodds.com/blog/inversion-of-control interface IJ40AlertProps { - alertStyle?: {[key:string]: string}; + isPaddedLeft: boolean; } -const J40Alert = ({alertStyle}:IJ40AlertProps) => { +const J40Alert = ({isPaddedLeft}: IJ40AlertProps) => { const intl = useIntl(); const messages = defineMessages({ alertMsg: { id: 'datasetAlert.header.alertMsg', - defaultMessage: 'Limited data sources — Datasets may be added, updated, or removed.', + defaultMessage: + 'Limited data sources — Datasets may be added, updated, or removed.', description: 'an alert message to inform users that datasets may change', }, }); + return ( -
    +
    {intl.formatMessage(messages.alertMsg)}
    ); diff --git a/client/src/components/J40Alert/j40Alert.module.scss b/client/src/components/J40Alert/j40Alert.module.scss index fbd2589c..1bc320e1 100644 --- a/client/src/components/J40Alert/j40Alert.module.scss +++ b/client/src/components/J40Alert/j40Alert.module.scss @@ -11,3 +11,11 @@ .j40Alert { @include j40AlertBase; } + +.j40AlertPaddedLeft { + padding-left: 1rem; +} + +.j40AlertNoPaddingLeft { + padding-left: 0; +} diff --git a/client/src/components/J40Alert/j40Alert.module.scss.d.ts b/client/src/components/J40Alert/j40Alert.module.scss.d.ts index 2a46ae2b..4594230b 100644 --- a/client/src/components/J40Alert/j40Alert.module.scss.d.ts +++ b/client/src/components/J40Alert/j40Alert.module.scss.d.ts @@ -1,7 +1,8 @@ declare namespace J40AlertScssNamespace { export interface IJ40AlertScss { - j40Alert: string; - j40AlertLeftPad: string; + j40Alert: string; + j40AlertPaddedLeft: string; + j40AlertNoPaddingLeft: string; } } diff --git a/client/src/components/J40Alert/tests/__snapshots__/j40Alert.test.tsx.snap b/client/src/components/J40Alert/tests/__snapshots__/j40Alert.test.tsx.snap index 069a9776..0a4716fe 100644 --- a/client/src/components/J40Alert/tests/__snapshots__/j40Alert.test.tsx.snap +++ b/client/src/components/J40Alert/tests/__snapshots__/j40Alert.test.tsx.snap @@ -1,8 +1,20 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`rendering of the J40Alert tests the rendering of J40Alert 1`] = ` +exports[`rendering of the J40Alert tests the rendering of J40Alert with padding 1`] = ` -
    +
    + Limited data sources — Datasets may be added, updated, or removed. +
    + +`; + +exports[`rendering of the J40Alert tests the rendering of J40Alert without padding 1`] = ` + +
    Limited data sources — Datasets may be added, updated, or removed.
    diff --git a/client/src/components/J40Alert/tests/j40Alert.test.tsx b/client/src/components/J40Alert/tests/j40Alert.test.tsx index 497b09a4..0c5ab660 100644 --- a/client/src/components/J40Alert/tests/j40Alert.test.tsx +++ b/client/src/components/J40Alert/tests/j40Alert.test.tsx @@ -4,10 +4,20 @@ import {LocalizedComponent} from '../../../test/testHelpers'; import J40Alert from '../index'; describe('rendering of the J40Alert', () => { - it('tests the rendering of J40Alert', () => { + it('tests the rendering of J40Alert without padding', () => { const {asFragment} = render( - + + , + ); + + expect(asFragment()).toMatchSnapshot(); + }); + + it('tests the rendering of J40Alert with padding', () => { + const {asFragment} = render( + + , ); diff --git a/client/src/components/J40Map.tsx b/client/src/components/J40Map.tsx index f3d89b9d..e90a00ec 100644 --- a/client/src/components/J40Map.tsx +++ b/client/src/components/J40Map.tsx @@ -22,7 +22,7 @@ import {useFlags} from '../contexts/FlagContext'; // Components: import TerritoryFocusControl from './territoryFocusControl'; import MapInfoPanel from './mapInfoPanel'; -import AreaDetail from './areaDetail'; +import AreaDetail from './AreaDetail'; // Styles and constants import {makeMapStyle} from '../data/mapStyle'; @@ -104,7 +104,6 @@ const J40Map = ({location}: IJ40Interface) => { } }; - const onLoad = () => { if (typeof window !== 'undefined' && window.Cypress && mapRef.current) { window.underlyingMap = mapRef.current.getMap(); diff --git a/client/src/components/MapWrapper/index.tsx b/client/src/components/MapWrapper/index.tsx index ec90d656..5f7c8c13 100644 --- a/client/src/components/MapWrapper/index.tsx +++ b/client/src/components/MapWrapper/index.tsx @@ -28,7 +28,7 @@ const MapWrapper = ({location}: IMapWrapperProps) => { }); return ( <> - +
    diff --git a/client/src/components/mapInfoPanel.tsx b/client/src/components/mapInfoPanel.tsx index 19e9874b..11578375 100644 --- a/client/src/components/mapInfoPanel.tsx +++ b/client/src/components/mapInfoPanel.tsx @@ -1,6 +1,6 @@ import React from 'react'; import MapIntroduction from './mapIntroduction'; -import AreaDetail from './areaDetail'; +import AreaDetail from './AreaDetail'; interface IMapInfoPanelProps { className: string, diff --git a/client/src/data/constants.tsx b/client/src/data/constants.tsx index ed641674..60ed28ac 100644 --- a/client/src/data/constants.tsx +++ b/client/src/data/constants.tsx @@ -4,21 +4,31 @@ import {defineMessages} from 'react-intl'; // URLS export const DOWNLOAD_ZIP_URL = 'https://justice40-data.s3.amazonaws.com/data-pipeline/data/score/downloadable/Screening+Tool+Data.zip'; -export const FEATURE_TILE_BASE_URL = 'https://d2zjid6n5ja2pt.cloudfront.net'; + +// This is the URL for the origin S3 bucket: +// export const ORIGIN_BASE_URL = 'https://justice40-data.s3.amazonaws.com'; + +// This is the URL for the CDN that delivers the tile data +export const FEATURE_TILE_BASE_URL = 'https://d3jqyw10j8e7p9.cloudfront.net'; +const FEATURE_TILE_PATH = 'data-pipeline/data/score/tiles'; + +// This is the URL for the CDN that delivers the application +// const APP_BASE_URL = 'https://d2zjid6n5ja2pt.cloudfront.net'; const XYZ_SUFFIX = '{z}/{x}/{y}.pbf'; + export const featureURLForTilesetName = (tilesetName :string ) : string => { - return `${FEATURE_TILE_BASE_URL}/${tilesetName}/${XYZ_SUFFIX}`; + return `${FEATURE_TILE_BASE_URL}/${FEATURE_TILE_PATH}/${tilesetName}/${XYZ_SUFFIX}`; }; -export const FEATURE_TILE_HIGH_ZOOM_URL = featureURLForTilesetName('0714_high'); -export const FEATURE_TILE_LOW_ZOOM_URL = featureURLForTilesetName('tiles_low'); +export const FEATURE_TILE_HIGH_ZOOM_URL = featureURLForTilesetName('high'); +export const FEATURE_TILE_LOW_ZOOM_URL = featureURLForTilesetName('low'); // Performance markers export const PERFORMANCE_MARKER_MAP_IDLE = 'MAP_IDLE'; // Properties -export const SCORE_PROPERTY_HIGH = 'Score D (percentile)'; -export const SCORE_PROPERTY_LOW = 'D_SCORE'; +export const SCORE_PROPERTY_HIGH = 'Score E (percentile)'; +export const SCORE_PROPERTY_LOW = 'E_SCORE'; export const GEOID_PROPERTY = 'GEOID10'; export const HIGH_SCORE_SOURCE_NAME = 'score-high'; export const HIGH_SCORE_LAYER_NAME = 'score-high-layer'; @@ -35,8 +45,11 @@ export const HOUSING_BURDEN_PROPERTY_PERCENTILE = 'Housing burden (percent) (per export const LINGUISTIC_ISOLATION_PROPERTY_PERCENTILE = 'Linguistic isolation (percent) (percentile)'; export const UNEMPLOYMENT_PROPERTY_PERCENTILE = 'Unemployed civilians (percent) (percentile)'; export const TOTAL_POPULATION = 'Total population'; -export const EDUCATION_PROPERTY_PERCENTILE = 'Percent individuals age 25 or over ' + -'with less than high school degree (percentile)'; +export const EDUCATION_PROPERTY_PERCENTILE = +`Percent individuals age 25 or over with less than high school degree (percentile)`; +export const COUNTY_NAME = 'County Name'; +export const STATE_NAME = 'State Name'; + // The name of the layer within the tiles that contains the score export const SCORE_SOURCE_LAYER = 'blocks';