diff --git a/client/cypress/e2e/downloadPacket.spec.js b/client/cypress/e2e/downloadPacket.spec.js index e00188c4..2873ad67 100644 --- a/client/cypress/e2e/downloadPacket.spec.js +++ b/client/cypress/e2e/downloadPacket.spec.js @@ -2,20 +2,22 @@ describe('Census Block Group download', () => { it('validate file download', () => { - const filename = `usa.zip`; + // const filename = `usa.zip`; cy.visit('localhost:8000/en/cejst'); - cy.get('#download-link').invoke('attr', 'target', '_blank'); - cy.intercept(`https://justice40-data.s3.amazonaws.com/Score/${filename}`, - { - body: 'success', - headers: { - 'Content-Type': 'text/html; charset=utf-8', - 'Content-Disposition': 'attachment', - }, - }, - ).as('downloadRequest'); - cy.get('button[class*="downloadPacket"]').click(); - cy.wait('@downloadRequest'); - cy.readFile(`cypress/downloads/${filename}`).should('exist'); + + // Todo VS: Download packet component is being moved. Will be re-enabled with + // cy.get('#download-link').invoke('attr', 'target', '_blank'); + // cy.intercept(`https://justice40-data.s3.amazonaws.com/Score/${filename}`, + // { + // body: 'success', + // headers: { + // 'Content-Type': 'text/html; charset=utf-8', + // 'Content-Disposition': 'attachment', + // }, + // }, + // ).as('downloadRequest'); + // cy.get('button[class*="downloadPacket"]').click(); + // cy.wait('@downloadRequest'); + // cy.readFile(`cypress/downloads/${filename}`).should('exist'); }); }); diff --git a/client/cypress/e2e/exploreToolPage.spec.js b/client/cypress/e2e/exploreToolPage.spec.js new file mode 100644 index 00000000..96921d05 --- /dev/null +++ b/client/cypress/e2e/exploreToolPage.spec.js @@ -0,0 +1,13 @@ +// / + +describe('tests links on Explore Tool Page', () => { + it('validate file download', () => { + cy.visit('localhost:8000/en/cejst'); + + // Checks to make sure all a tags have an href: + cy.get('a').each(($a) => { + const message = $a.text(); + expect($a, message).to.have.attr('href').not.contain('undefined'); + }); + }); +}); diff --git a/client/package.json b/client/package.json index f736d091..7fb14a20 100644 --- a/client/package.json +++ b/client/package.json @@ -24,7 +24,7 @@ "deploy": "gatsby build --prefix-paths && gh-pages -d public", "lint": "eslint './src/**/*.{ts,tsx}' --ignore-pattern node_modules/ --ignore-pattern public --ignore-pattern *scss.d.ts", "lint:fix": "npm run lint -- --quiet --fix", - "intl:extract": "formatjs extract 'src/(pages|components)/*.tsx' --out-file src/intl/en.json", + "intl:extract": "formatjs extract 'src/**/*.tsx' --out-file src/intl/en.json", "intl:compile-en": "formatjs compile src/intl/en.json --ast --out-file compiled-lang/en.json" }, "devDependencies": { diff --git a/client/src/components/AlertWrapper/alertWrapper.module.scss b/client/src/components/AlertWrapper/alertWrapper.module.scss new file mode 100644 index 00000000..8aab663a --- /dev/null +++ b/client/src/components/AlertWrapper/alertWrapper.module.scss @@ -0,0 +1,11 @@ +.alertWrapper { + margin-bottom: 0; +} + +.alertHide { + display: none; +} + +.alertWarning { + margin-top: 0; +} diff --git a/client/src/components/AlertWrapper/alertWrapper.module.scss.d.ts b/client/src/components/AlertWrapper/alertWrapper.module.scss.d.ts new file mode 100644 index 00000000..91daf3be --- /dev/null +++ b/client/src/components/AlertWrapper/alertWrapper.module.scss.d.ts @@ -0,0 +1,14 @@ +declare namespace AlertWrapperScssNamespace { + export interface IAlertWrapperScss { + alertWrapper: string; + alertHide: string; + alertWarning: string; + } + } + +declare const AlertWrapperScssModule: AlertWrapperScssNamespace.IAlertWrapperScss & { + /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */ + locals: AlertWrapperScssNamespace.IAlertWrapperScss; + }; + + export = AlertWrapperScssModule; diff --git a/client/src/components/AlertWrapper/index.tsx b/client/src/components/AlertWrapper/index.tsx new file mode 100644 index 00000000..7297574d --- /dev/null +++ b/client/src/components/AlertWrapper/index.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import {Alert} from '@trussworks/react-uswds'; +import {FormattedMessage} from 'gatsby-plugin-intl'; + +import * as styles from './alertWrapper.module.scss'; + +interface IAlertWrapperProps { + hideWarningAlert?: boolean +} + +const AlertWrapper = ({hideWarningAlert}:IAlertWrapperProps) => { + return ( +
+ + - + + + +
+ + + Limited data sources — + This tool currently includes 16 datasets. Over time, datasets could be + added, updated, or removed. The datasets come from a variety of sources + based on availability, quality, and relevance to environmental, energy, + and climate issues. Each dataset has limitations, such as how recently + the data was updated. + +
+ ); +}; ; + +export default AlertWrapper; diff --git a/client/src/components/DatasetCard/index.tsx b/client/src/components/DatasetCard/index.tsx index 2c29830a..0b7a9980 100644 --- a/client/src/components/DatasetCard/index.tsx +++ b/client/src/components/DatasetCard/index.tsx @@ -4,11 +4,10 @@ import {defineMessages} from 'react-intl'; import * as styles from './datasetCard.module.scss'; interface IDatasetCardProps { - key: number, datasetCardProps: { [key:string]: string } } -const DatasetCard = ({key, datasetCardProps}:IDatasetCardProps) => { +const DatasetCard = ({datasetCardProps}:IDatasetCardProps) => { const intl = useIntl(); const messages = defineMessages({ whatIsIt: { @@ -33,11 +32,6 @@ const DatasetCard = ({key, datasetCardProps}:IDatasetCardProps) => { }, }); - // Todo VS: figure out how to ignore unused variables such as keys - // tried tsconfig, no-unused-vars, @typescript-eslint/no-unused-vars - // Also check associated unit test warning. - console.log(key); - return (

{datasetCardProps.indicator}

diff --git a/client/src/components/DatasetContainer/dsContainer.module.scss b/client/src/components/DatasetContainer/dsContainer.module.scss index ab0abb17..64b04235 100644 --- a/client/src/components/DatasetContainer/dsContainer.module.scss +++ b/client/src/components/DatasetContainer/dsContainer.module.scss @@ -1,7 +1,5 @@ @import "../utils.scss"; -$headingFontColor: #122e51; - .datasetContainer { background-color: #eef6fb; } @@ -30,5 +28,5 @@ $headingFontColor: #122e51; } .j40AlertContainer { - background-color: #faf3d1; + background-color: $j40AlertWarningColor; } diff --git a/client/src/components/DatasetContainer/index.tsx b/client/src/components/DatasetContainer/index.tsx index c8d8436b..20631227 100644 --- a/client/src/components/DatasetContainer/index.tsx +++ b/client/src/components/DatasetContainer/index.tsx @@ -83,7 +83,7 @@ const DatasetContainer = () => {

{intl.formatMessage(messages.cumulativeScore)}

{intl.formatMessage(messages.subTitle)}

- {cards.map((card, index) => )} + {cards.map((card) => )}
diff --git a/client/src/components/HowYouCanHelp.module.scss b/client/src/components/HowYouCanHelp.module.scss deleted file mode 100644 index 2f9857d4..00000000 --- a/client/src/components/HowYouCanHelp.module.scss +++ /dev/null @@ -1,3 +0,0 @@ -.howYouCanHelpContainer { - margin: 29px 24px 49px 42px; -} diff --git a/client/src/components/HowYouCanHelp.tsx b/client/src/components/HowYouCanHelp.tsx deleted file mode 100644 index c6c8168a..00000000 --- a/client/src/components/HowYouCanHelp.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from 'react'; -import * as styles from './HowYouCanHelp.module.scss'; - -const HowYouCanHelp = () => { - return ( -
-

How You Can Help Improve the Tool

- -
- ); -}; - -export default HowYouCanHelp; diff --git a/client/src/components/HowYouCanHelp/howYouCanHelp.module.scss b/client/src/components/HowYouCanHelp/howYouCanHelp.module.scss new file mode 100644 index 00000000..babb35c7 --- /dev/null +++ b/client/src/components/HowYouCanHelp/howYouCanHelp.module.scss @@ -0,0 +1,24 @@ +@import "../utils.scss"; + +.howYouCanHelpContainer { + margin: 2rem 0; + + .howYouCanHelpText { + color: $headingFontColor; + padding-left: 1rem; + } +} + +.howYouCanHelpHeader { + color: $headingFontColor; + font-weight: normal; +} + +.howYouCanHelpList { + list-style-type: disc; + padding-bottom: 1rem; +} + +.howYouCanHelpListWrapper { + padding-left: 2rem; +} diff --git a/client/src/components/HowYouCanHelp.module.scss.d.ts b/client/src/components/HowYouCanHelp/howYouCanHelp.module.scss.d.ts similarity index 71% rename from client/src/components/HowYouCanHelp.module.scss.d.ts rename to client/src/components/HowYouCanHelp/howYouCanHelp.module.scss.d.ts index 73e57ea6..fac8ff61 100644 --- a/client/src/components/HowYouCanHelp.module.scss.d.ts +++ b/client/src/components/HowYouCanHelp/howYouCanHelp.module.scss.d.ts @@ -1,6 +1,12 @@ declare namespace HowYouCanHelpModuleScssNamespace { export interface IHowYouCanHelpModuleScss { howYouCanHelpContainer: string; + howYouCanHelpHeader: string; + howYouCanHelpBullet: string, + listWrapper: string; + howYouCanHelpText: string; + howYouCanHelpList: string; + howYouCanHelpListWrapper: string; } } diff --git a/client/src/components/HowYouCanHelp/index.tsx b/client/src/components/HowYouCanHelp/index.tsx new file mode 100644 index 00000000..eb190741 --- /dev/null +++ b/client/src/components/HowYouCanHelp/index.tsx @@ -0,0 +1,95 @@ +import React from 'react'; +import {Link} from 'gatsby-plugin-intl'; +import {useIntl} from 'gatsby-plugin-intl'; +import {defineMessages} from 'react-intl'; + +import * as styles from './howYouCanHelp.module.scss'; + +const HowYouCanHelp = () => { + const intl = useIntl(); + const messages = defineMessages({ + youCanHelpHeader: { + id: 'howYouCanHelp.header.text', + defaultMessage: 'How You Can Help Improve the Tool', + description: 'the header of the how you can help section', + }, + youCanHelpInfoText: { + id: 'youCanHelpInfoText.list.element.prefix', + defaultMessage: 'If you have helpful information, we’d love to', + description: 'you can help info text ', + }, + youCanHelpInfoLinkText: { + id: 'youCanHelpInfoLink.link.text', + defaultMessage: 'get an email from you', + description: 'you can help info text ', + }, + youCanHelpDataMethPrefixText: { + id: 'youCanHelpDataMethPrefixText.link.prefix.text', + defaultMessage: 'View our', + description: 'view our', + }, + youCanHelpDataMethLinkText: { + id: 'youCanHelpDataMethLinkText.link.text', + defaultMessage: 'Data & methodology', + description: 'Data & methodology link', + }, + youCanHelpDataMethSuffixText: { + id: 'youCanHelpDataMethSuffixText.link.suffix.text', + defaultMessage: 'and send us feedback', + description: 'send us feedbackv via email', + }, + youCanHelpSharingPrefixText: { + id: 'youCanHelpSharingPrefixText.link.prefix.text', + defaultMessage: 'Find your community and', + description: 'find your community', + }, + youCanHelpSharingLinkText: { + id: 'youCanHelpSharingLinkText.link.text', + defaultMessage: 'share your feedback', + description: 'sharing link to email', + }, + }); + + return ( +
+

+ {intl.formatMessage(messages.youCanHelpHeader)} +

+ +
+ ); +}; + +export default HowYouCanHelp; diff --git a/client/src/components/HowYouCanHelp/tests/__snapshots__/howYouCanHelp.test.tsx.snap b/client/src/components/HowYouCanHelp/tests/__snapshots__/howYouCanHelp.test.tsx.snap new file mode 100644 index 00000000..7cb884d1 --- /dev/null +++ b/client/src/components/HowYouCanHelp/tests/__snapshots__/howYouCanHelp.test.tsx.snap @@ -0,0 +1,46 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`rendering of the HowYouCanHelp checks if various text fields are visible 1`] = ` + +
+

+ How You Can Help Improve the Tool +

+ +
+ +`; diff --git a/client/src/components/HowYouCanHelp/tests/howYouCanHelp.test.tsx b/client/src/components/HowYouCanHelp/tests/howYouCanHelp.test.tsx new file mode 100644 index 00000000..d77f8fa7 --- /dev/null +++ b/client/src/components/HowYouCanHelp/tests/howYouCanHelp.test.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import {render} from '@testing-library/react'; +import {LocalizedComponent} from '../../../test/testHelpers'; +import HowYouCanHelp from '../index'; + +describe('rendering of the HowYouCanHelp', () => { + const {asFragment} = render( + + + , + ); + + it('checks if various text fields are visible', () => { + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/client/src/components/J40Alert/index.tsx b/client/src/components/J40Alert/index.tsx index d4d43b61..d529c034 100644 --- a/client/src/components/J40Alert/index.tsx +++ b/client/src/components/J40Alert/index.tsx @@ -3,7 +3,13 @@ import {useIntl} from 'gatsby-plugin-intl'; import {defineMessages} from 'react-intl'; import * as styles from './j40Alert.module.scss'; -const J40Alert = () => { +// 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}; +} + +const J40Alert = ({alertStyle}:IJ40AlertProps) => { const intl = useIntl(); const messages = defineMessages({ alertMsg: { @@ -13,7 +19,7 @@ const J40Alert = () => { }, }); return ( -
+
{intl.formatMessage(messages.alertMsg)}
); diff --git a/client/src/components/J40Alert/j40Alert.module.scss b/client/src/components/J40Alert/j40Alert.module.scss index 9e057e0c..fbd2589c 100644 --- a/client/src/components/J40Alert/j40Alert.module.scss +++ b/client/src/components/J40Alert/j40Alert.module.scss @@ -1,5 +1,13 @@ -.j40Alert { +@import "../utils.scss"; + +@mixin j40AlertBase { font-size: large; - font-weight: 600; - padding: 1rem 0; + background-color: $j40AlertWarningColor; + margin-top: 2rem; + padding-top: 1rem; + padding-bottom: 1rem; +} + +.j40Alert { + @include j40AlertBase; } diff --git a/client/src/components/J40Alert/j40Alert.module.scss.d.ts b/client/src/components/J40Alert/j40Alert.module.scss.d.ts index 6de09e5c..2a46ae2b 100644 --- a/client/src/components/J40Alert/j40Alert.module.scss.d.ts +++ b/client/src/components/J40Alert/j40Alert.module.scss.d.ts @@ -1,6 +1,7 @@ declare namespace J40AlertScssNamespace { export interface IJ40AlertScss { j40Alert: string; + j40AlertLeftPad: 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 4cdcea95..069a9776 100644 --- a/client/src/components/J40Alert/tests/__snapshots__/j40Alert.test.tsx.snap +++ b/client/src/components/J40Alert/tests/__snapshots__/j40Alert.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`rendering of the J40Alert checks if various text fields are visible 1`] = ` +exports[`rendering of the J40Alert tests the rendering of J40Alert 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 96506b63..497b09a4 100644 --- a/client/src/components/J40Alert/tests/j40Alert.test.tsx +++ b/client/src/components/J40Alert/tests/j40Alert.test.tsx @@ -1,16 +1,16 @@ import * as React from 'react'; import {render} from '@testing-library/react'; import {LocalizedComponent} from '../../../test/testHelpers'; -import J40Alert from '../../J40Alert'; +import J40Alert from '../index'; describe('rendering of the J40Alert', () => { - const {asFragment} = render( - - - , - ); + it('tests the rendering of J40Alert', () => { + const {asFragment} = render( + + + , + ); - it('checks if various text fields are visible', () => { expect(asFragment()).toMatchSnapshot(); }); }); diff --git a/client/src/components/J40Header.tsx b/client/src/components/J40Header.tsx index f082f06f..ec1d6c59 100644 --- a/client/src/components/J40Header.tsx +++ b/client/src/components/J40Header.tsx @@ -1,7 +1,6 @@ import React, {useState} from 'react'; -import {FormattedMessage, Link, useIntl} from 'gatsby-plugin-intl'; +import {Link, useIntl} from 'gatsby-plugin-intl'; import { - Alert, Header, NavMenuButton, PrimaryNav, @@ -11,11 +10,7 @@ import {defineMessages} from 'react-intl'; // @ts-ignore import siteLogo from '../../src/images/icon.png'; -interface IJ40HeaderProps { - location: Location -} -const J40Header = ({location}:IJ40HeaderProps) => { - const isMethodologyPage = location.pathname.match(/methodology\/?/); +const J40Header = () => { const intl = useIntl(); const [mobileNavOpen, setMobileNavOpen] = useState(false); const messages = defineMessages({ @@ -119,29 +114,6 @@ const J40Header = ({location}:IJ40HeaderProps) => {
- - - - - - -
- - {!isMethodologyPage && - Limited data sources — - This tool currently includes 16 datasets. Over time, datasets could be - added, updated, or removed. The datasets come from a variety of sources - based on availability, quality, and relevance to environmental, energy, - and climate issues. Each dataset has limitations, such as how recently - the data was updated. - } ); }; diff --git a/client/src/components/MapLegend/index.tsx b/client/src/components/MapLegend/index.tsx new file mode 100644 index 00000000..ac0221a8 --- /dev/null +++ b/client/src/components/MapLegend/index.tsx @@ -0,0 +1,117 @@ +import React from 'react'; +import {useIntl} from 'gatsby-plugin-intl'; +import {Tooltip} from '@trussworks/react-uswds'; + +import * as styles from './mapLegend.module.scss'; +import * as constants from '../../data/constants'; + +// @ts-ignore +import infoIcon from '/node_modules/uswds/dist/img/usa-icons/info_outline.svg'; + +// Todo VS: This information will be used in the re-design of the tool-tip +// const getToolTipContent = (type:string) => { +// const intl = useIntl(); +// const messages = defineMessages({ +// priorityHeader: { +// id: 'tooltip.info.priority.header', +// defaultMessage: constants.PRIORITIZED_COMMUNITY, +// description: 'the header of the prioritized community tooltip', +// }, +// thresholdHeader: { +// id: 'tooltip.info.threshold.header', +// defaultMessage: constants.THRESHOLD_COMMUNITY, +// description: 'the header of the threshold community tooltip', +// }, +// priorityText: { +// id: 'tooltip.info.priority.text', +// defaultMessage: 'A prioritized community is one that has a cumulative index score of Xth ' + +// 'percentile and above. 40% of the benefits from investments outlined by the ' + +// 'Justice40 Initiative should go to prioritized communities.', +// description: 'the text of the prioritized community tooltip', +// }, +// thresholdText: { +// id: 'tooltip.info.threshold.text', +// defaultMessage: 'Communities with a cumulative index score between Y - X.99th percentile are ' + +// 'considered threshold communities. While these communities are currently not considered a ' + +// 'prioritized community, this may change based on updates to the scoring method.', +// description: 'the text of the threshold community tooltip', +// }, +// }); + +// return (type === 'prioritized') ? +// ( +//
+//

{intl.formatMessage(messages.priorityHeader)}

+//

{intl.formatMessage(messages.priorityText)}

+//
+// ) : +// ( +//
+//

{intl.formatMessage(messages.thresholdHeader)}

+//

{intl.formatMessage(messages.thresholdText)}

+//
+// ); +// }; + +const MapLegend = () => { + const intl = useIntl(); + + // Type definitions required for @trussworks tooltip. This type defines the div that wraps the icon. + // This allows to pass children and other attributes. + type IconWrapperProps = React.PropsWithChildren<{ + className?: string + }> & + JSX.IntrinsicElements['div'] & + React.RefAttributes + const IconWrapper: React.ForwardRefExoticComponent = React.forwardRef( + ({className, children, ...tooltipProps}: IconWrapperProps, ref) => ( +
+ {children} +
+ ), + ); + IconWrapper.displayName = 'custom info wrapper'; + + return ( +
+

{intl.formatMessage(constants.EXPLORE_TOOL_PAGE_TEXT.LEGEND_LABEL)}

+
+
+
+ {intl.formatMessage(constants.EXPLORE_TOOL_PAGE_TEXT.PRIORITY_LABEL)} + + {/* Using @trussworks tooltip */} + + label={` + Communities that have cumulative + index score of Xth percentile + and above + `} + position='left' + asCustom={IconWrapper}> + + + +
+
+
+ {intl.formatMessage(constants.EXPLORE_TOOL_PAGE_TEXT.THRESHOLD_LABEL)} + + {/* Using @trussworks tooltip */} + + label={` + Communities with a cumulative + index score between Y - X.99th + percentile + `} + position='left' + asCustom={IconWrapper}> + + +
+
+
+ ); +}; + +export default MapLegend; diff --git a/client/src/components/MapLegend/mapLegend.module.scss b/client/src/components/MapLegend/mapLegend.module.scss new file mode 100644 index 00000000..fdc28565 --- /dev/null +++ b/client/src/components/MapLegend/mapLegend.module.scss @@ -0,0 +1,96 @@ +@import "../utils.scss"; + +$min-color: #fafaf8; +$med-color: rgba(26, 68, 128, 0.2); +$max-color: rgba(26, 68, 128, 0.6); +$alertInfoColor: #e7f6f8; + +.legendContainer { + margin: 1rem 1.2rem 1rem 2.5rem; + font-size: 0.8em; + border: 1px solid #8c9297; + padding: 0 1.8rem; + flex: 1; + color: $headingFontColor; + + .legendTooltipText { + max-width: 14rem; + font-size: medium; + } + + @media screen and (max-width: $mobileBreakpoint) { + margin: 1rem 0; + } +} + +.legendHeader { + margin-bottom: 0; +} + +.swatchContainer { + display: flex; + flex-direction: row; + justify-content: space-between; + + @media screen and (max-width: $mobileBreakpoint) { + flex-wrap: wrap; + } +} + +.legendItem { + display: flex; + flex-direction: row; + align-items: center; + + span { + font-size: medium; + } + + .infoIconWrapper { + margin-left: 0.8rem; + .infoIcon { + width: 2rem; + height: 2rem; + margin-top: 0.4rem; + } + } + + @media screen and (max-width: $mobileBreakpoint) { + padding-left: 3rem; + } +} + +.colorSwatch { + box-sizing: border-box; + height: 1.7rem; + width: 1.7rem; + margin-right: 10px; + border-radius: 50%; +} + +#prioritized { + background-color: $max-color; +} + +#threshold { + background-color: $med-color; +} + +#nonPrioritized { + background-color: $min-color; +} + +.legendTooltipTheme { + color: $headingFontColor !important; + background-color: white !important; + opacity: 1 !important; + border: $sidePanelBorder !important; + box-shadow: 0 0 11px rgba(33, 33, 33, 0.2) !important; + &.place-top { + &:after { + border-top-color: white !important; + border-top-style: solid !important; + border-top-width: 6px !important; + } + } +} diff --git a/client/src/components/mapLegend.module.scss.d.ts b/client/src/components/MapLegend/mapLegend.module.scss.d.ts similarity index 81% rename from client/src/components/mapLegend.module.scss.d.ts rename to client/src/components/MapLegend/mapLegend.module.scss.d.ts index 852606f9..9ab2f103 100644 --- a/client/src/components/mapLegend.module.scss.d.ts +++ b/client/src/components/MapLegend/mapLegend.module.scss.d.ts @@ -7,7 +7,11 @@ declare namespace HowYouCanHelpModuleScssNamespace { prioritized: string, threshold: string, nonPrioritized: string, - legendItem: string + legendItem: string, + infoIcon: string, + legendTooltipText: string, + legendTooltipTheme: string, + infoIconWrapper: string, } } diff --git a/client/src/components/MapLegend/tests/mapLegend.test.tsx b/client/src/components/MapLegend/tests/mapLegend.test.tsx new file mode 100644 index 00000000..f537736e --- /dev/null +++ b/client/src/components/MapLegend/tests/mapLegend.test.tsx @@ -0,0 +1,25 @@ +import * as React from 'react'; +import {render} from '@testing-library/react'; + +import {LocalizedComponent} from '../../../test/testHelpers'; +import MapLegend from '../index'; +import * as constants from '../../../data/constants'; + +describe('rendering of the MapLegend', () => { + const {getAllByText} = render( + + + , + ); + + // Snapshot testing was unusable as the Tooltip lib rendered hash based class + // names on each render + + const intlPriorityLabel = constants.EXPLORE_TOOL_PAGE_TEXT.PRIORITY_LABEL.defaultMessage; + const intlThresholdLabel = constants.EXPLORE_TOOL_PAGE_TEXT.THRESHOLD_LABEL.defaultMessage; + + it('checks if various objects in the component rendered', () => { + expect(getAllByText(intlPriorityLabel)[0]).toHaveTextContent(intlPriorityLabel); + expect(getAllByText(intlThresholdLabel)[0]).toHaveTextContent(intlThresholdLabel); + }); +}); diff --git a/client/src/components/MapWrapper/index.tsx b/client/src/components/MapWrapper/index.tsx new file mode 100644 index 00000000..ec90d656 --- /dev/null +++ b/client/src/components/MapWrapper/index.tsx @@ -0,0 +1,44 @@ +import * as React from 'react'; +import {useIntl} from 'gatsby-plugin-intl'; +import {defineMessages} from 'react-intl'; + +import J40Alert from '../J40Alert'; +import J40Map from '../J40Map'; + +import * as styles from './mapWrapper.module.scss'; +import * as constants from '../../data/constants'; + +interface IMapWrapperProps { + location: Location +} + +const MapWrapper = ({location}: IMapWrapperProps) => { + const intl = useIntl(); + const messages = defineMessages({ + downloadLinkText: { + id: 'mapwrapper.download.link', + defaultMessage: 'Download the draft list of prioritized communities (pre-decisional) and datasets used', + description: 'download link for datasets', + }, + downloadContents: { + id: 'mapwrapper.download.contents', + defaultMessage: 'ZIP file will contain one .xlsx, one .csv and one .pdf (30 MB).', + description: 'download link contents', + }, + }); + return ( + <> + + + +
{intl.formatMessage(messages.downloadContents)}
+ + ); +}; + + +export default MapWrapper; diff --git a/client/src/components/MapWrapper/mapWrapper.module.scss b/client/src/components/MapWrapper/mapWrapper.module.scss new file mode 100644 index 00000000..6f48f73d --- /dev/null +++ b/client/src/components/MapWrapper/mapWrapper.module.scss @@ -0,0 +1,4 @@ +.mapCaptionTextLink { + padding-top: 1rem; + padding-bottom: 0.4rem; +} diff --git a/client/src/components/MapWrapper/mapWrapper.module.scss.d.ts b/client/src/components/MapWrapper/mapWrapper.module.scss.d.ts new file mode 100644 index 00000000..03b0ab9f --- /dev/null +++ b/client/src/components/MapWrapper/mapWrapper.module.scss.d.ts @@ -0,0 +1,13 @@ +declare namespace MapWrapperScssNamespace { + export interface IMapWrapperScss { + mapCaptionTextLink: string; + + } + } + +declare const MapWrapperScssModule: MapWrapperScssNamespace.IMapWrapperScss & { + /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */ + locals: MapWrapperScssNamespace.IMapWrapperScss; + }; + + export = MapWrapperScssModule; diff --git a/client/src/components/downloadPacket.tsx b/client/src/components/downloadPacket.tsx index a9c72da9..74746ffa 100644 --- a/client/src/components/downloadPacket.tsx +++ b/client/src/components/downloadPacket.tsx @@ -1,10 +1,9 @@ import React from 'react'; import {Button} from '@trussworks/react-uswds'; -import * as styles from './downloadPacket.module.scss'; // @ts-ignore import downloadIcon from '/node_modules/uswds/dist/img/usa-icons/file_download.svg'; - -export const cbgFileURL = 'https://justice40-data.s3.amazonaws.com/Score/usa.zip'; +import * as styles from './downloadPacket.module.scss'; +import * as constants from '../data/constants'; const DownloadPacket = () => { return ( @@ -16,7 +15,7 @@ const DownloadPacket = () => { prioritized communities (30,021 census block groups) and 18 datasets.
- +