From 92501e4715f07f4f7730666ae4baa24d58655e58 Mon Sep 17 00:00:00 2001 From: Vim <86254807+vim-usds@users.noreply.github.com> Date: Thu, 7 Apr 2022 13:14:54 -0400 Subject: [PATCH] Re-order nav links, update download box to include shapefiles, squish pages (#1538) * Re-order nav links, update download box to include shapefiles, squishy pages (#1536) * Add dropdown to navigation links - add download page - move main pages tests to their own folder - add download and public eng snapshot test - remove public engagement button on each page - swap index with cejst - update cypress ENDPOINTS - upate gatsby-config sitemap - update snapshots - cypress tests are failing * Make all page endpoints constants - fix all cypress tests - refactor all test to use LegacyTests/constants/PAGES_ENDPOINTS - gatsby-config to use PAGES_ENDPOINTS - remove ScoreStepList component - update J40Header to use constants.PAGES_ENDPOINTS - update snapshots - there are 3 locations to update PAGES_ENDPOINTS, namely 1. LegacyTests/constants.tsx 2. constants.tsx 3. gatsby-config * Add two placeholder pages - FAQs - TSD * remove dropdown from navigation menu - remove dropdown from gherkin tests - update snapshots * Add back public engagement button to all pages - add send button in area detail alt tag to i18n - modify public engagement button to have same CSS as send feedback button - update snapshots * Update download box to include shapefile downloads - refator download packet scss - add shapefile URL to .env files - update tests - index forwarding pattern - update snapshots * Add FAQ link to About page * Update footer - add PEC - add RFI - add github link * Update the staging link URL and title * Update download Box to match design sync - update FAQ link copy * Add comment for reason of commented code --- .github/workflows/deploy_fe_staging.yml | 4 +- client/.env.development | 2 + client/.env.production | 1 + client/cypress/integration/About.feature | 5 +- client/cypress/integration/Contact.feature | 8 +- .../LegacyTests/accessibility.test.js | 13 +- .../integration/LegacyTests/allLinks.spec.js | 10 +- .../integration/LegacyTests/constants.js | 15 +- .../LegacyTests/downloadPacket.spec.js | 40 +- .../integration/LegacyTests/language.spec.js | 15 +- .../LegacyTests/mapInfoPanel.spec.js | 4 +- .../LegacyTests/mapZoomLatLong.spec.js | 6 +- .../LegacyTests/mapZoomTerritories.spec.js | 4 +- .../cypress/integration/Methodology.feature | 5 +- .../support/step_definitions/commonSteps.js | 9 +- client/gatsby-config.js | 5 +- client/src/components/AboutCard/AboutCard.tsx | 6 +- .../src/components/AreaDetail/AreaDetail.tsx | 2 +- .../__snapshots__/areaDetail.test.tsx.snap | 6 +- .../src/components/DatasetContainer/index.tsx | 3 +- .../DownloadPacket/DownloadPacket.tsx | 73 ++ .../downloadPacket.test.tsx.snap | 85 ++ .../DownloadPacket/downloadPacket.module.scss | 103 +- .../downloadPacket.module.scss.d.ts | 12 +- .../DownloadPacket/downloadPacket.test.tsx | 12 +- .../src/components/DownloadPacket/index.tsx | 44 +- client/src/components/J40Footer/J40Footer.tsx | 35 +- .../__snapshots__/J40Footer.spec.tsx.snap | 46 +- client/src/components/J40Header/J40Header.tsx | 149 ++- .../__snapshots__/J40Header.test.tsx.snap | 22 +- .../LinkTypeWrapper/LinkTypeWrapper.tsx | 4 +- .../LinkTypeWrapper/linkTypeWrapper.test.tsx | 3 +- .../PublicEngageButton.module.scss | 23 + .../PublicEngageButton.module.scss.d.ts | 4 + .../PublicEngageButton/PublicEngageButton.tsx | 19 +- .../PublicEngageButton.test.tsx.snap | 12 +- client/src/components/scoreStepsList.tsx | 91 -- client/src/data/constants.tsx | 12 + client/src/data/copy/404.tsx | 11 +- client/src/data/copy/about.tsx | 19 + client/src/data/copy/common.tsx | 56 +- client/src/data/copy/contact.tsx | 6 +- client/src/data/copy/downloads.tsx | 79 ++ client/src/data/copy/explore.tsx | 16 +- client/src/data/copy/faqs.tsx | 16 + client/src/data/copy/methodology.tsx | 53 +- client/src/data/copy/publicEngage.tsx | 7 +- client/src/data/copy/tsd.tsx | 16 + client/src/intl/en.json | 119 +- client/src/pages/about.tsx | 166 +++ client/src/pages/cejst.tsx | 77 -- client/src/pages/contact.tsx | 2 +- client/src/pages/downloads.tsx | 45 + .../src/pages/frequently-asked-questions.tsx | 32 + client/src/pages/index.tsx | 180 +-- .../src/pages/technical-support-document.tsx | 32 + .../__snapshots__/about.test.tsx.snap} | 131 ++- .../__snapshots__/contact.test.tsx.snap | 82 +- .../__snapshots__/downloads.test.tsx.snap | 594 ++++++++++ .../freqAskedQuestions.test.tsx.snap | 556 +++++++++ .../__snapshots__/methodology.test.tsx.snap | 131 ++- .../__snapshots__/publicEng.test.tsx.snap | 1031 +++++++++++++++++ .../techSupportDoc.test.tsx.snap | 556 +++++++++ .../{index.test.tsx => tests/about.test.tsx} | 6 +- client/src/pages/{ => tests}/contact.test.tsx | 4 +- client/src/pages/tests/downloads.test.tsx | 16 + .../pages/tests/freqAskedQuestions.test.tsx | 16 + .../pages/{ => tests}/methodology.test.tsx | 4 +- client/src/pages/tests/publicEng.test.tsx | 16 + .../src/pages/tests/techSupportDoc.test.tsx | 16 + client/src/styles/global.scss | 2 +- 71 files changed, 4400 insertions(+), 605 deletions(-) create mode 100644 client/src/components/DownloadPacket/DownloadPacket.tsx create mode 100644 client/src/components/DownloadPacket/__snapshots__/downloadPacket.test.tsx.snap delete mode 100644 client/src/components/scoreStepsList.tsx create mode 100644 client/src/data/copy/downloads.tsx create mode 100644 client/src/data/copy/faqs.tsx create mode 100644 client/src/data/copy/tsd.tsx create mode 100644 client/src/pages/about.tsx delete mode 100644 client/src/pages/cejst.tsx create mode 100644 client/src/pages/downloads.tsx create mode 100644 client/src/pages/frequently-asked-questions.tsx create mode 100644 client/src/pages/technical-support-document.tsx rename client/src/pages/{__snapshots__/index.test.tsx.snap => tests/__snapshots__/about.test.tsx.snap} (90%) rename client/src/pages/{ => tests}/__snapshots__/contact.test.tsx.snap (92%) create mode 100644 client/src/pages/tests/__snapshots__/downloads.test.tsx.snap create mode 100644 client/src/pages/tests/__snapshots__/freqAskedQuestions.test.tsx.snap rename client/src/pages/{ => tests}/__snapshots__/methodology.test.tsx.snap (95%) create mode 100644 client/src/pages/tests/__snapshots__/publicEng.test.tsx.snap create mode 100644 client/src/pages/tests/__snapshots__/techSupportDoc.test.tsx.snap rename client/src/pages/{index.test.tsx => tests/about.test.tsx} (70%) rename client/src/pages/{ => tests}/contact.test.tsx (80%) create mode 100644 client/src/pages/tests/downloads.test.tsx create mode 100644 client/src/pages/tests/freqAskedQuestions.test.tsx rename client/src/pages/{ => tests}/methodology.test.tsx (80%) create mode 100644 client/src/pages/tests/publicEng.test.tsx create mode 100644 client/src/pages/tests/techSupportDoc.test.tsx diff --git a/.github/workflows/deploy_fe_staging.yml b/.github/workflows/deploy_fe_staging.yml index 6ae9b308..f723ae07 100644 --- a/.github/workflows/deploy_fe_staging.yml +++ b/.github/workflows/deploy_fe_staging.yml @@ -90,8 +90,8 @@ jobs: with: # Deploy to S3 for the staging URL message: | - **🚢 PR Deployed! 🚢** - Find it here: http://usds-geoplatform-justice40-website.s3-website-us-east-1.amazonaws.com/justice40-tool/${{env.DESTINATION_FOLDER}}/en/cejst/ ! + **🚢 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/ ! 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 diff --git a/client/.env.development b/client/.env.development index 74560b49..3b16e65c 100644 --- a/client/.env.development +++ b/client/.env.development @@ -10,6 +10,8 @@ GATSBY_DATA_PIPELINE_SCORE_PATH_LOCAL=data_pipeline/data/score GATSBY_DATA_PIPELINE_SCORE_PATH=data-pipeline/data/score GATSBY_SCORE_DOWNLOAD_FILE_PATH=downloadable/Screening_Tool_Data.zip +GATSBY_SHAPE_FILE_PATH=shapefile/usa.zip + GATSBY_MAP_TILES_PATH=tiles # If you want the map to render a MapBox base map (as opposed to the diff --git a/client/.env.production b/client/.env.production index fea22c57..304cafad 100644 --- a/client/.env.production +++ b/client/.env.production @@ -7,4 +7,5 @@ GATSBY_CDN_TILES_BASE_URL=https://static-data-screeningtool.geoplatform.gov GATSBY_DATA_PIPELINE_SCORE_PATH=data-pipeline/data/score GATSBY_SCORE_DOWNLOAD_FILE_PATH=downloadable/Screening_Tool_Data.zip +GATSBY_SHAPE_FILE_PATH=shapefile/usa.zip GATSBY_MAP_TILES_PATH=tiles diff --git a/client/cypress/integration/About.feature b/client/cypress/integration/About.feature index 4b682e63..cc4063b0 100644 --- a/client/cypress/integration/About.feature +++ b/client/cypress/integration/About.feature @@ -2,15 +2,18 @@ Feature: The About page will open from all other pages Scenario: About page open when navigating from Methodology page Given I am on the "Methodology" page + # When I click on the "About" dropdown in the navigation When I click on the "About" page in the navigation Then I see "About" in the title Scenario: About page open when navigating from Explore the Tool page - Given I am on the "Explore the tool" page + Given I am on the "Explore" page + # When I click on the "About" dropdown in the navigation When I click on the "About" page in the navigation Then I see "About" in the title Scenario: About page open when navigating from Contact page Given I am on the "Contact" page + # When I click on the "About" dropdown in the navigation When I click on the "About" page in the navigation Then I see "About" in the title diff --git a/client/cypress/integration/Contact.feature b/client/cypress/integration/Contact.feature index db39d5bc..da47e0c3 100644 --- a/client/cypress/integration/Contact.feature +++ b/client/cypress/integration/Contact.feature @@ -5,10 +5,10 @@ Feature: The Contact page will open from all other pages When I click on the "Contact" page in the navigation Then I see "Contact" in the title - # Scenario: Contact page open when navigating from Explore the tool page - # Given I am on the "Explore the tool" page - # When I click on the "Contact" page in the navigation - # Then I see "Contact" in the title + Scenario: Contact page open when navigating from Explore the tool page + Given I am on the "Explore" page + When I click on the "Contact" page in the navigation + Then I see "Contact" in the title Scenario: Contact page open when navigating from Methodology page Given I am on the "Methodology" page diff --git a/client/cypress/integration/LegacyTests/accessibility.test.js b/client/cypress/integration/LegacyTests/accessibility.test.js index ad37379d..8b51e833 100644 --- a/client/cypress/integration/LegacyTests/accessibility.test.js +++ b/client/cypress/integration/LegacyTests/accessibility.test.js @@ -12,14 +12,11 @@ * */ -const endpoints = [ - 'en/', - 'en/cejst', - 'en/methodology', - 'en/contact', - 'en/404', - 'en/public-engagement', -]; +import {PAGES_ENDPOINTS} from './constants'; + +const rawEndpoints = Object.values(PAGES_ENDPOINTS); + +const endpoints = rawEndpoints.map((endpoint) => `en${endpoint}`); // The violation callback will post the violations into the terminal // eslint-disable-next-line require-jsdoc diff --git a/client/cypress/integration/LegacyTests/allLinks.spec.js b/client/cypress/integration/LegacyTests/allLinks.spec.js index f0868b2f..c6b85f85 100644 --- a/client/cypress/integration/LegacyTests/allLinks.spec.js +++ b/client/cypress/integration/LegacyTests/allLinks.spec.js @@ -1,13 +1,9 @@ // / +import {PAGES_ENDPOINTS} from '../LegacyTests/constants'; + describe('Do all the English pages have all links with a defined href attribute?', () => { - const pages = [ - '/', - 'cejst', - 'methodology', - 'contact', - 'public-engagement', - ]; + const pages = Object.values(PAGES_ENDPOINTS); pages.forEach((page) => { it(`test all href attr on ${page} page`, () => { diff --git a/client/cypress/integration/LegacyTests/constants.js b/client/cypress/integration/LegacyTests/constants.js index ee5d77c4..b0e45f6d 100644 --- a/client/cypress/integration/LegacyTests/constants.js +++ b/client/cypress/integration/LegacyTests/constants.js @@ -1,7 +1,10 @@ -export const ENDPOINTS = { - ABOUT: 'en/', - EXPLORE_THE_TOOL: '/en/cejst', - METHODOLOGY: '/en/methodology', - CONTACT: 'en/contact', - PUBLIC: 'en/public-engagement', +export const PAGES_ENDPOINTS = { + EXPLORE: '/', + METHODOLOGY: '/methodology', + DOWNLOADS: '/downloads', + TSD: '/technical-support-document', + ABOUT: '/about', + FAQS: '/frequently-asked-questions', + PUBLIC_ENG: '/public-engagement', + CONTACT: '/contact', }; diff --git a/client/cypress/integration/LegacyTests/downloadPacket.spec.js b/client/cypress/integration/LegacyTests/downloadPacket.spec.js index 18973032..d1566613 100644 --- a/client/cypress/integration/LegacyTests/downloadPacket.spec.js +++ b/client/cypress/integration/LegacyTests/downloadPacket.spec.js @@ -1,23 +1,23 @@ // / -describe('Does the Census Block Group packet download?', () => { - const filename = `Screening_Tool_Data.zip`; - it('validate file download', () => { - cy.visit('localhost:8000/en/methodology'); +// describe('Does the Census Block Group packet download?', () => { +// const filename = `Screening_Tool_Data.zip`; +// it('validate file download', () => { +// cy.visit('localhost:8000/en/methodology'); - cy.get('[data-cy="download-link"]').invoke('attr', 'target', '_blank'); - cy.intercept('GET', '/data-pipeline/data/score/downloadable/Screening_Tool_Data.zip', - { - hostname: 'https://d3jqyw10j8e7p9.cloudfront.net', - 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'); - }); -}); +// cy.get('[data-cy="download-link"]').invoke('attr', 'target', '_blank').invoke('attr', 'download'); +// cy.intercept('GET', '/data-pipeline/data/score/downloadable/Screening_Tool_Data.zip', +// { +// hostname: 'https://d3jqyw10j8e7p9.cloudfront.net', +// 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/integration/LegacyTests/language.spec.js b/client/cypress/integration/LegacyTests/language.spec.js index a5162727..1950a3e0 100644 --- a/client/cypress/integration/LegacyTests/language.spec.js +++ b/client/cypress/integration/LegacyTests/language.spec.js @@ -1,11 +1,14 @@ // / -describe('Translation Test', () => { - it('Sets default language to /en and redirects', () => { - cy.visit('http://localhost:8000'); - cy.url().should('include', '/en/'); - cy.get('[data-cy=about-page-heading]').contains('About'); - }); +import {PAGES_ENDPOINTS} from './constants'; + +describe('Navigate to each endpoint', () => { + Object.values(PAGES_ENDPOINTS).map((endpoint) => + it(`for the ${endpoint} page, it adds /en and redirects`, () => { + cy.visit(endpoint); + cy.url().should('include', '/en/'); + }), + ); // Todo VS: Understand how to create es content // it('Sets page content to spanish when visiting Spanish URL', () => { diff --git a/client/cypress/integration/LegacyTests/mapInfoPanel.spec.js b/client/cypress/integration/LegacyTests/mapInfoPanel.spec.js index 564cff64..9e272410 100644 --- a/client/cypress/integration/LegacyTests/mapInfoPanel.spec.js +++ b/client/cypress/integration/LegacyTests/mapInfoPanel.spec.js @@ -4,7 +4,7 @@ A risk with this test is that if the feature/area that is currently being selected become non-prioritized, then this test will fail. However it would be a major win for that area! */ -import {ENDPOINTS} from './constants'; +import {PAGES_ENDPOINTS} from './constants'; const devices = [ [1024, 720], @@ -15,7 +15,7 @@ const devices = [ describe('tests that the map side panel renders MapIntroduction component', () => { devices.forEach((device) => { it(`should render MapIntroduction component on ${device[0]} x ${device[1]}`, () => { - cy.visit(ENDPOINTS.EXPLORE_THE_TOOL); + cy.visit(PAGES_ENDPOINTS.EXPLORE); cy.viewport(device[0], device[1]); cy.get('aside').should('be.visible'); }); diff --git a/client/cypress/integration/LegacyTests/mapZoomLatLong.spec.js b/client/cypress/integration/LegacyTests/mapZoomLatLong.spec.js index 5ff04760..19743444 100644 --- a/client/cypress/integration/LegacyTests/mapZoomLatLong.spec.js +++ b/client/cypress/integration/LegacyTests/mapZoomLatLong.spec.js @@ -1,8 +1,9 @@ // / +import {PAGES_ENDPOINTS} from '../LegacyTests/constants'; describe('Does the map zoom and adjust to lat/long correctly?', () => { it('should start at zoom level 3', () => { - cy.visit('http://localhost:8000/en/cejst'); + cy.visit(PAGES_ENDPOINTS.EXPLORE); cy.url().should('include', '#3'); }); it('should change to level 4 when you hit the zoom button', () => { @@ -10,7 +11,7 @@ describe('Does the map zoom and adjust to lat/long correctly?', () => { cy.url().should('include', '#4'); }); - // Intermittent failure still exist + // Intermittent failure still exist ticket #886 // it('should show the correct lat/lng coordinates in the URL', // { // retries: { @@ -47,6 +48,7 @@ describe('Does the map zoom and adjust to lat/long correctly?', () => { // }, // () => { // const [expectedZoom, expectedLat, expectedLng] = [12.05, 41.40965, -75.65978]; + // //This could be where the issue is: // const expectedURL = `http://localhost:8000/en/cejst/#${expectedZoom}/${expectedLat}/${expectedLng}`; // cy.visit(expectedURL); // cy.getMap().then((map) => { diff --git a/client/cypress/integration/LegacyTests/mapZoomTerritories.spec.js b/client/cypress/integration/LegacyTests/mapZoomTerritories.spec.js index dba8a48d..937c8302 100644 --- a/client/cypress/integration/LegacyTests/mapZoomTerritories.spec.js +++ b/client/cypress/integration/LegacyTests/mapZoomTerritories.spec.js @@ -1,5 +1,7 @@ // / +import {PAGES_ENDPOINTS} from './constants'; + describe('Will it zoom into territories correctly?', { retries: { @@ -16,7 +18,7 @@ describe('Will it zoom into territories correctly?', () => { beforeEach(() => { cy.viewport('macbook-13'); - cy.visit('http://localhost:8000/en/cejst'); + cy.visit(PAGES_ENDPOINTS.EXPLORE); }); // The below values all assume a 13-inch MB as set in viewport above. diff --git a/client/cypress/integration/Methodology.feature b/client/cypress/integration/Methodology.feature index 17589eb4..973ac151 100644 --- a/client/cypress/integration/Methodology.feature +++ b/client/cypress/integration/Methodology.feature @@ -2,15 +2,18 @@ Feature: The Methodology page will open from all other pages Scenario: Methodology page open when navigating from About page Given I am on the "About" page + # When I click on the "Methodology" dropdown in the navigation When I click on the "Methodology" page in the navigation Then I see "Methodology" in the title Scenario: Methodology page open when navigating from Explore the tool page - Given I am on the "Explore the tool" page + Given I am on the "Explore" page + # When I click on the "Methodology" dropdown in the navigation When I click on the "Methodology" page in the navigation Then I see "Methodology" in the title Scenario: Methodology page open when navigating from Contact page Given I am on the "Contact" page + # When I click on the "Methodology" dropdown in the navigation When I click on the "Methodology" page in the navigation Then I see "Methodology" in the title \ No newline at end of file diff --git a/client/cypress/support/step_definitions/commonSteps.js b/client/cypress/support/step_definitions/commonSteps.js index 8bd0be33..d2a198ba 100644 --- a/client/cypress/support/step_definitions/commonSteps.js +++ b/client/cypress/support/step_definitions/commonSteps.js @@ -2,17 +2,22 @@ // Common step definitions for Gherkin -import {ENDPOINTS} from '../../integration/LegacyTests/constants'; +import {PAGES_ENDPOINTS} from '../../integration/LegacyTests/constants'; import {hyphenizeString} from '../../integration/common/helpers'; // Common Givens: Given('I am on the {string} page', (page) => { const pageArray = page.split(' '); cy.viewport(1060, 800); - cy.visit(ENDPOINTS[pageArray.join('_').toUpperCase()]); + cy.visit(PAGES_ENDPOINTS[pageArray.join('_').toUpperCase()]); }); // Common Whens: +When(`I click on the {string} dropdown in the navigation`, (page) => { + const pageHyphenCase = hyphenizeString(page); + cy.get(`[data-cy="nav-dropdown-${pageHyphenCase}"]`).click(); +}); + When(`I click on the {string} page in the navigation`, (page) => { const pageHyphenCase = hyphenizeString(page); cy.get(`[data-cy="nav-link-${pageHyphenCase}"]`).click(); diff --git a/client/gatsby-config.js b/client/gatsby-config.js index d852e981..f1536616 100644 --- a/client/gatsby-config.js +++ b/client/gatsby-config.js @@ -83,11 +83,12 @@ module.exports = { options: { excludes: [ '/', - '/cejst', + '/about', '/contact', '/methodology', '/404', - 'public-engagement', + '/public-engagement', + '/downloads', ], }, }, diff --git a/client/src/components/AboutCard/AboutCard.tsx b/client/src/components/AboutCard/AboutCard.tsx index 8860e351..21886650 100644 --- a/client/src/components/AboutCard/AboutCard.tsx +++ b/client/src/components/AboutCard/AboutCard.tsx @@ -6,7 +6,7 @@ import {hyphenizeString} from '../../../cypress/integration/common/helpers'; // the "body" section is the child object to allow for html versus just text interface AboutCardProps { - imgSrc: string; + imgSrc?: string; header: string; size: 'small' | 'large'; linkText?: string; @@ -25,10 +25,10 @@ const AboutCard = (props: React.PropsWithChildren) => { - {props.header} + src={props.imgSrc}/>} diff --git a/client/src/components/AreaDetail/AreaDetail.tsx b/client/src/components/AreaDetail/AreaDetail.tsx index a72f47f2..9215d267 100644 --- a/client/src/components/AreaDetail/AreaDetail.tsx +++ b/client/src/components/AreaDetail/AreaDetail.tsx @@ -617,7 +617,7 @@ const AreaDetail = ({properties}:IAreaDetailProps) => { {'tbd'} diff --git a/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap b/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap index 44408c9a..a61e2473 100644 --- a/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap +++ b/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap @@ -76,7 +76,7 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p Send feedback tbd @@ -429,7 +429,7 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present Send feedback tbd @@ -2133,7 +2133,7 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr Send feedback tbd diff --git a/client/src/components/DatasetContainer/index.tsx b/client/src/components/DatasetContainer/index.tsx index a0ea1e1c..f5954e71 100644 --- a/client/src/components/DatasetContainer/index.tsx +++ b/client/src/components/DatasetContainer/index.tsx @@ -8,6 +8,7 @@ import {hyphenizeString} from '../../../cypress/integration/common/helpers'; import * as styles from './dsContainer.module.scss'; import * as METHODOLOGY_COPY from '../../data/copy/methodology'; +import {PAGES_ENDPOINTS} from '../../data/constants'; const DatasetContainer = () => { @@ -43,7 +44,7 @@ const DatasetContainer = () => {
- + {METHODOLOGY_COPY.RETURN_TO_TOP.LINK}
diff --git a/client/src/components/DownloadPacket/DownloadPacket.tsx b/client/src/components/DownloadPacket/DownloadPacket.tsx new file mode 100644 index 00000000..7eddc3b7 --- /dev/null +++ b/client/src/components/DownloadPacket/DownloadPacket.tsx @@ -0,0 +1,73 @@ +import React from 'react'; +import {Button, Grid, Tag} from '@trussworks/react-uswds'; + +import * as styles from './downloadPacket.module.scss'; +import * as METHODOLOGY_COPY from '../../data/copy/methodology'; + +// @ts-ignore +import downloadIcon from '/node_modules/uswds/dist/img/usa-icons/file_download.svg'; + +const DownloadPacket = () => { + return ( + +
+
+
+ + {/* Download box title */} +
+ {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.TITLE} +
+ + {/* Download box description 1 */} +
+ {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.DESCRIPTION1} +
+ + {/* Download box button 1 */} + +
+ {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.LAST_UPDATED} +
+ + + {/* Download box button 2 */} +
+
+ {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.NEW_TAG} +
+ + + +
+
+ {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.LAST_UPDATED} +
+ + +
+
+
+
+ ); +}; + +export default DownloadPacket; diff --git a/client/src/components/DownloadPacket/__snapshots__/downloadPacket.test.tsx.snap b/client/src/components/DownloadPacket/__snapshots__/downloadPacket.test.tsx.snap new file mode 100644 index 00000000..7fd8c6f5 --- /dev/null +++ b/client/src/components/DownloadPacket/__snapshots__/downloadPacket.test.tsx.snap @@ -0,0 +1,85 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`download packet component defined checks if component renders 1`] = ` + +
+
+
+
+
+ Files available for download +
+
+ Download the data sources used in the CEJST (.csv and .xlsx, 52MB unzipped) or the shapefile, along with a codebook (.zip, 742MB unzipped). +
+ +
+ Last updated: 04/06/22 +
+ +
+ Last updated: 04/06/22 +
+
+
+
+
+
+`; diff --git a/client/src/components/DownloadPacket/downloadPacket.module.scss b/client/src/components/DownloadPacket/downloadPacket.module.scss index 1b9b00d2..74770b8d 100644 --- a/client/src/components/DownloadPacket/downloadPacket.module.scss +++ b/client/src/components/DownloadPacket/downloadPacket.module.scss @@ -1,7 +1,33 @@ @use '../../styles/design-system.scss' as *; -.downloadBoxContainer { +@mixin baseButtonContainerStyles { + align-self: center; + @include u-margin-top(2); + a { + text-decoration: none; + } + + img { + // This should be a global css-filter value as it's generated + // from the primary color. + filter: invert(15%) sepia(9%) saturate(5666%) hue-rotate(175deg) brightness(96%) contrast(95%); + } +} + +@mixin baseTextStyle { + @include typeset('sans', 'xs', 3); + @include u-margin-top(2); + @include u-margin-bottom(2); + +}; + +@mixin baseButtonTextStyle { + padding-top: 4px; + padding-left: 5px; +} + +.downloadBoxContainer { color: whitesmoke; margin: auto; @include u-margin-top(2.5); @@ -19,44 +45,63 @@ .downloadBoxTitle { @include typeset('sans', 'xs', 3); @include u-text('semibold'); - @include u-margin-bottom(2); } - .downloadBoxText { - @include typeset('sans', 'xs', 3); - @include u-margin-bottom(4); - - span { - font-style: italic; - } + // Data source text + .dataSourceText { + @include baseTextStyle(); } - .downloadBoxButtonContainer { - margin-top: 20px 0 0 0; + // Last updated + .lastUpdated { + font-style: italic; align-self: center; - - a { - text-decoration: none; - } - - img { - // This should be a global css-filter value as it's generated - // from the primary color. - filter: invert(15%) sepia(9%) saturate(5666%) hue-rotate(175deg) brightness(96%) contrast(95%); - } + @include u-margin-top(1); } - .downloadBoxButton{ - @include u-bg('white'); - @include u-color('blue-80v'); - display: flex; + // Data source button + .dataSourceButtonContainer { + @include baseButtonContainerStyles(); - .downloadPacketText { - padding-top: 4px; - padding-left: 5px; + .dataSourceButtonText { + @include baseButtonTextStyle(); + } + } + + // Shapefile text + .shapeFileText { + @include baseTextStyle(); + @include u-margin-top(7); + } + // Shapefile button + .shapefileButtonContainer{ + display: flex; + flex-direction: column; + @include baseButtonContainerStyles(); + + .shapeFileButtonText { + @include baseButtonTextStyle(); + @include u-margin-right(3); } } } } - } \ No newline at end of file + } + + .downloadBoxButton{ + @include u-bg('white'); + @include u-color('blue-80v'); + display: flex; + } + + .newTagContainer { + align-self: end; + @include u-margin-bottom(-1); + z-index: 2; + } + + .newtag { + @include u-text("blue-70v"); + @include u-bg("yellow-20v"); + } diff --git a/client/src/components/DownloadPacket/downloadPacket.module.scss.d.ts b/client/src/components/DownloadPacket/downloadPacket.module.scss.d.ts index df634604..da10a178 100644 --- a/client/src/components/DownloadPacket/downloadPacket.module.scss.d.ts +++ b/client/src/components/DownloadPacket/downloadPacket.module.scss.d.ts @@ -4,10 +4,16 @@ declare namespace DownloadPacketModuleScssNamespace { downloadBox: string; downloadBoxTextBox: string; downloadBoxTitle: string; - downloadBoxText: string; - downloadBoxButtonContainer: string; + dataSourceText: string; + dataSourceButtonContainer: string; + shapefileButtonContainer: string; downloadBoxButton: string; - downloadPacketText: string; + dataSourceButtonText: string; + shapeFileText: string; + shapeFileButtonText: string; + newTagContainer: string; + newtag: string; + lastUpdated:string; } } diff --git a/client/src/components/DownloadPacket/downloadPacket.test.tsx b/client/src/components/DownloadPacket/downloadPacket.test.tsx index aa7ad233..62fde8c7 100644 --- a/client/src/components/DownloadPacket/downloadPacket.test.tsx +++ b/client/src/components/DownloadPacket/downloadPacket.test.tsx @@ -1,15 +1,17 @@ import * as React from 'react'; -import {render, screen} from '@testing-library/react'; +import {render} from '@testing-library/react'; import {LocalizedComponent} from '../../test/testHelpers'; -import DownloadPacket from '.'; +import DownloadPacket from './DownloadPacket'; -test('download packet component defined', () => { - render( +describe('download packet component defined', () => { + const {asFragment} = render( , ); - screen.getByRole('button', {name: /download package/i}); + it('checks if component renders', () => { + expect(asFragment()).toMatchSnapshot(); + }); }); diff --git a/client/src/components/DownloadPacket/index.tsx b/client/src/components/DownloadPacket/index.tsx index fc6486d9..54609c0c 100644 --- a/client/src/components/DownloadPacket/index.tsx +++ b/client/src/components/DownloadPacket/index.tsx @@ -1,45 +1,3 @@ -import React from 'react'; -import {Button, Grid} from '@trussworks/react-uswds'; - -import * as styles from './downloadPacket.module.scss'; -import * as METHODOLOGY_COPY from '../../data/copy/methodology'; - -// @ts-ignore -import downloadIcon from '/node_modules/uswds/dist/img/usa-icons/file_download.svg'; - -const DownloadPacket = () => { - return ( - -
-
-
-
- {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.TITLE} -
-
- {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.DESCRIPTION} - {' '} - - {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.LAST_UPDATED} - -
- -
-
-
-
- ); -}; +import DownloadPacket from './DownloadPacket'; export default DownloadPacket; diff --git a/client/src/components/J40Footer/J40Footer.tsx b/client/src/components/J40Footer/J40Footer.tsx index 45c892ed..03c69ec2 100644 --- a/client/src/components/J40Footer/J40Footer.tsx +++ b/client/src/components/J40Footer/J40Footer.tsx @@ -13,6 +13,7 @@ import SurveyButton from '../SurveyButton'; // @ts-ignore import whitehouseIcon from '../../images/eop-seal.svg'; +import {PAGES_ENDPOINTS} from '../../data/constants'; import * as COMMON_COPY from '../../data/copy/common'; const J40Footer = () => { @@ -35,12 +36,28 @@ const J40Footer = () => { ], [ intl.formatMessage(COMMON_COPY.FOOTER.MORE_INFO), + , + , , @@ -60,19 +77,27 @@ const J40Footer = () => { key={'privacylink'} dataCy={hyphenizeString(COMMON_COPY.FOOTER.PRIVACY.defaultMessage)} />, - ], - [ - intl.formatMessage(COMMON_COPY.FOOTER.QUESTIONS), , ], + [ + intl.formatMessage(COMMON_COPY.FOOTER.CONTRIBUTE), + , + ], ]; // see https://designsystem.digital.gov/components/footer/ diff --git a/client/src/components/J40Footer/__snapshots__/J40Footer.spec.tsx.snap b/client/src/components/J40Footer/__snapshots__/J40Footer.spec.tsx.snap index 352c69ae..55acbd91 100644 --- a/client/src/components/J40Footer/__snapshots__/J40Footer.spec.tsx.snap +++ b/client/src/components/J40Footer/__snapshots__/J40Footer.spec.tsx.snap @@ -79,7 +79,30 @@ exports[`J40Footer renders correctly 1`] = ` class="usa-footer__secondary-link" > + Engagement calender + + + + + @@ -124,7 +160,7 @@ exports[`J40Footer renders correctly 1`] = `
- Have a question about government services? + Want to contribute?
diff --git a/client/src/components/J40Header/J40Header.tsx b/client/src/components/J40Header/J40Header.tsx index 5d378fda..b4895ad2 100644 --- a/client/src/components/J40Header/J40Header.tsx +++ b/client/src/components/J40Header/J40Header.tsx @@ -6,6 +6,8 @@ import { PrimaryNav, Grid, Alert, + // NavDropDownButton, + // Menu, } from '@trussworks/react-uswds'; import BetaBanner from '../BetaBanner'; import J40MainGridContainer from '../J40MainGridContainer'; @@ -16,43 +18,162 @@ import Language from '../Language'; import siteLogo from '../../images/j40-logo-v2.png'; import * as styles from './J40Header.module.scss'; import * as COMMON_COPY from '../../data/copy/common'; +import {PAGES_ENDPOINTS} from '../../data/constants'; const isAlertValid = new Date < COMMON_COPY.ALERTS.EXPIRATION_DATE; const J40Header = () => { const intl = useIntl(); - const [mobileNavOpen, setMobileNavOpen] = useState(false); const titleL1 = intl.formatMessage(COMMON_COPY.HEADER.TITLE_LINE_1); const titleL2 = intl.formatMessage(COMMON_COPY.HEADER.TITLE_LINE_2); + /** + * State variable to control the mobile menu toggle + */ + const [mobileNavOpen, setMobileNavOpen] = useState(false); const toggleMobileNav = (): void => setMobileNavOpen((prevOpen) => !prevOpen); + + /** + * The original work of this release called for creating a download page, a FAQ page and TSD page. These + * were to be embedded in dropdown menus in the navigation bar of the header. These were all completed. + * After discovering that the dropdown component from USWDS was not operating as expected, we decided to + * revert to another design. + * + * It was also decided that some more design was needed and that these pages along with their designs will + * be used in the near future. Rather than deleted the code or moving it to another branch, the assumption + * was made that since this will be added back in the near term, let's comment it out for now. + * + * If for some reason we haven't integrated this logic in the near future, this code will be deleted. + */ + + /** + * State variable to hold the open/close state of each nav dropdown. There are currently two + * dropdowns that are being used, each corresponding to an index in the state array: + * + * index 0 = Data & Methodology dropdown + * index 1 = About dropdown + */ + // const [isOpen, setIsOpen] = useState([false, false]); + // const onToggle = (index: number): void => { + // setIsOpen((prevIsOpen) => { + // const newIsOpen = [false, false]; + // newIsOpen[index] = !prevIsOpen[index]; + // return newIsOpen; + // }); + // }; + + // const methPageSubNavLinks = [ + // + // {intl.formatMessage(COMMON_COPY.HEADER.METHODOLOGY)} + // , + // + // {intl.formatMessage(COMMON_COPY.HEADER.DOWNLOADS)} + // , + // + // {intl.formatMessage(COMMON_COPY.HEADER.TSD)} + // , + // ]; + + // const aboutSubNavLinks = [ + // + // {intl.formatMessage(COMMON_COPY.HEADER.ABOUT)} + // , + // + // {intl.formatMessage(COMMON_COPY.HEADER.FAQs)} + // , + // + // {intl.formatMessage(COMMON_COPY.HEADER.PUBLIC_ENG)} + // , + // ]; + const navLinks = [ - {intl.formatMessage(COMMON_COPY.HEADER.ABOUT)} - , - {intl.formatMessage(COMMON_COPY.HEADER.EXPLORE)} , {intl.formatMessage(COMMON_COPY.HEADER.METHODOLOGY)} , + {intl.formatMessage(COMMON_COPY.HEADER.ABOUT)} + , + // <> + // onToggle(0)} + // data-cy={'nav-dropdown-methodology'} + // className={styles.navDropDownBtn} + // > + // + // + // + // , + // <> + // onToggle(1)} + // data-cy={'nav-dropdown-about'} + // > + // + // + // + // , + @@ -93,6 +214,7 @@ const J40Header = () => { {/* Nav links */} + { items={navLinks} mobileExpanded={mobileNavOpen} onToggleMobileNav={toggleMobileNav} - /> + > +
diff --git a/client/src/components/J40Header/__snapshots__/J40Header.test.tsx.snap b/client/src/components/J40Header/__snapshots__/J40Header.test.tsx.snap index be6ed794..a62dc1ce 100644 --- a/client/src/components/J40Header/__snapshots__/J40Header.test.tsx.snap +++ b/client/src/components/J40Header/__snapshots__/J40Header.test.tsx.snap @@ -218,22 +218,12 @@ exports[`rendering of the J40Header checks if component renders 1`] = `
    -
  • - - About - -
  • Explore the tool @@ -248,6 +238,16 @@ exports[`rendering of the J40Header checks if component renders 1`] = ` Methodology & data
  • +
  • + + About + +
  • diff --git a/client/src/components/LinkTypeWrapper/LinkTypeWrapper.tsx b/client/src/components/LinkTypeWrapper/LinkTypeWrapper.tsx index b1da3369..83e2b0bc 100644 --- a/client/src/components/LinkTypeWrapper/LinkTypeWrapper.tsx +++ b/client/src/components/LinkTypeWrapper/LinkTypeWrapper.tsx @@ -31,7 +31,9 @@ interface ILinkTypeWrapper { const LinkTypeWrapper = (props:ILinkTypeWrapper) => { if (props.internal) { return ( - + {props.linkText} ); diff --git a/client/src/components/LinkTypeWrapper/linkTypeWrapper.test.tsx b/client/src/components/LinkTypeWrapper/linkTypeWrapper.test.tsx index ad89e68b..60c15d26 100644 --- a/client/src/components/LinkTypeWrapper/linkTypeWrapper.test.tsx +++ b/client/src/components/LinkTypeWrapper/linkTypeWrapper.test.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import {render} from '@testing-library/react'; import LinkTypeWrapper from './index'; import {LocalizedComponent} from '../../test/testHelpers'; +import {PAGES_ENDPOINTS} from '../../data/constants'; describe('testing all link types', () => { it('tests internal links', () => { @@ -10,7 +11,7 @@ describe('testing all link types', () => { , diff --git a/client/src/components/PublicEngageButton/PublicEngageButton.module.scss b/client/src/components/PublicEngageButton/PublicEngageButton.module.scss index 642f9801..950c73ca 100644 --- a/client/src/components/PublicEngageButton/PublicEngageButton.module.scss +++ b/client/src/components/PublicEngageButton/PublicEngageButton.module.scss @@ -20,6 +20,29 @@ .link, .link:visited { color:white; text-decoration: none; + + .engagementButton{ + // @include u-text("blue-70v"); + // @include u-bg("yellow-20v"); + height: 40px; + + // &:hover { + // @include u-bg("yellow-20"); + // @include u-text("gray-90"); + // } + + .buttonContainer{ + display: flex; + + .buttonImage{ + @include u-margin-right(1); + width: 21px; + margin-top: -3px; + + filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(119deg) brightness(105%) contrast(101%); + } + } + } } } \ No newline at end of file diff --git a/client/src/components/PublicEngageButton/PublicEngageButton.module.scss.d.ts b/client/src/components/PublicEngageButton/PublicEngageButton.module.scss.d.ts index 7e3a3c81..39ef4b86 100644 --- a/client/src/components/PublicEngageButton/PublicEngageButton.module.scss.d.ts +++ b/client/src/components/PublicEngageButton/PublicEngageButton.module.scss.d.ts @@ -4,6 +4,10 @@ declare namespace PublicEngagementButton { tagContainer: string; container: string; link: string; + engagementButton: string; + buttonContainer: string; + buttonImage: string; + } } diff --git a/client/src/components/PublicEngageButton/PublicEngageButton.tsx b/client/src/components/PublicEngageButton/PublicEngageButton.tsx index 7a93b6c9..f30ff5d6 100644 --- a/client/src/components/PublicEngageButton/PublicEngageButton.tsx +++ b/client/src/components/PublicEngageButton/PublicEngageButton.tsx @@ -5,6 +5,9 @@ import {Button, Tag} from '@trussworks/react-uswds'; import * as styles from './PublicEngageButton.module.scss'; import * as PUBLIC_ENG_COPY from '../../data/copy/publicEngage'; +// @ts-ignore +import eventIcon from '/node_modules/uswds/dist/img/usa-icons/event.svg'; + const PublicEngageButton = () => { const intl = useIntl(); @@ -16,8 +19,20 @@ const PublicEngageButton = () => { - diff --git a/client/src/components/PublicEngageButton/__snapshots__/PublicEngageButton.test.tsx.snap b/client/src/components/PublicEngageButton/__snapshots__/PublicEngageButton.test.tsx.snap index bc6a88d8..7d572f0e 100644 --- a/client/src/components/PublicEngageButton/__snapshots__/PublicEngageButton.test.tsx.snap +++ b/client/src/components/PublicEngageButton/__snapshots__/PublicEngageButton.test.tsx.snap @@ -15,11 +15,19 @@ exports[`rendering of the PublicEngageButton checks if component renders 1`] = ` href="/en/public-engagement" > diff --git a/client/src/components/scoreStepsList.tsx b/client/src/components/scoreStepsList.tsx deleted file mode 100644 index 408369c9..00000000 --- a/client/src/components/scoreStepsList.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import React from 'react'; -import { - ProcessList, - ProcessListItem, - ProcessListHeading, - Grid, -} from '@trussworks/react-uswds'; -import {useIntl} from 'gatsby-plugin-intl'; - -import * as METHODOLOGY_COPY from '../data/copy/methodology'; - -const ScoreStepsList = () => { - const intl = useIntl(); - - return ( - <> -

    - {intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.HEADING)} -

    - - -

    - {intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.DESCRIPTION_1)} -

    -

    - {intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.DESCRIPTION_2)} -

    -
    -
    - - - - {/* Step 1 */} - - - - {intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_HEADING)} - -

    {' '}

    -

    - {intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_INFO)} -

    - - {/* Step 1 A */} -

    - {intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_A_HEADING)} -

    -

    - {intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_A_INFO_1)} -

    -

    - {intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_A_INFO_2)} -

    - - {/* Step 1 B */} -

    - {intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_B_HEADING)} -

    - {METHODOLOGY_COPY.COMPLEX_METH_STEPS.STEP_2_B_INFO} - - {/* Step 1 C */} -

    - {intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_C_HEADING)} -

    -

    - {intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_C_INFO)} -

    -
    - - {/* Step 2 */} - - - - {intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_2_HEADING)} - - -

    {' '}

    -

    - {intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_2_INFO)} -

    - - {METHODOLOGY_COPY.COMPLEX_METH_STEPS.FORMULA} - -
    - -
    - - ); -}; - -export default ScoreStepsList; diff --git a/client/src/data/constants.tsx b/client/src/data/constants.tsx index e1a9d632..91bf7d4d 100644 --- a/client/src/data/constants.tsx +++ b/client/src/data/constants.tsx @@ -4,6 +4,18 @@ import {isMobile as isMobileReactDeviceDetect} from 'react-device-detect'; export const isMobile = isMobileReactDeviceDetect; +// Pages URL +export const PAGES_ENDPOINTS = { + EXPLORE: '/', + METHODOLOGY: '/methodology', + DOWNLOADS: '/downloads', + TSD: '/technical-support-document', + ABOUT: '/about', + FAQS: '/frequently-asked-questions', + PUBLIC_ENG: '/public-engagement', + CONTACT: '/contact', +}; + // Performance markers export const PERFORMANCE_MARKER_MAP_IDLE = 'MAP_IDLE'; diff --git a/client/src/data/copy/404.tsx b/client/src/data/copy/404.tsx index 24aca94c..cb7265bf 100644 --- a/client/src/data/copy/404.tsx +++ b/client/src/data/copy/404.tsx @@ -1,6 +1,8 @@ import React from 'react'; import {defineMessages} from 'react-intl'; -import {FormattedMessage, Link} from 'gatsby-plugin-intl'; +import {FormattedMessage} from 'gatsby-plugin-intl'; +import {linkFn} from './common'; +import {PAGES_ENDPOINTS} from '../constants'; export const PAGE = defineMessages({ TITLE: { @@ -24,11 +26,10 @@ export const ERROR_MSG = home to go home. `} - description={'page description'} + description={'main error message'} values={{ - home: here, - homeEs: aqui, + link1: linkFn(PAGES_ENDPOINTS.METHODOLOGY, true, false), }} />; diff --git a/client/src/data/copy/about.tsx b/client/src/data/copy/about.tsx index 2f717f5c..d8c761c0 100644 --- a/client/src/data/copy/about.tsx +++ b/client/src/data/copy/about.tsx @@ -5,6 +5,7 @@ import {FormattedMessage} from 'gatsby-plugin-intl'; import {italicFn, linkFn} from './common'; export const EXEC_ORDER_LINK = 'https://www.federalregister.gov/documents/2021/02/01/2021-02177/tackling-the-climate-crisis-at-home-and-abroad#:~:text=Sec.%20223.%20Justice40,40-percent%20goal.'; +export const FAQS_LINK = 'https://www.whitehouse.gov/wp-content/uploads/2022/02/CEQ-CEJST-QandA.pdf'; export const PAGE = defineMessages({ TILE: { @@ -45,6 +46,12 @@ export const PAGE = defineMessages({ `, description: 'Navigate to the About page. This is the third heading description', }, + HEADING_3: { + id: 'about.page.sub.header.3.text', + defaultMessage: 'Still have questions?', + description: 'Navigate to the About page. This is the fourth heading', + }, + }); export const HEADING_1 = { @@ -66,6 +73,18 @@ export const HEADING_1 = { }} />, }; +export const HEADING_3 = { + DESCRIPTION_1: + Frequently Asked Questions. + `} + description={'Navigate to the About page. This is the second heading description'} + values={{ + link1: linkFn(FAQS_LINK, false, true), + }} + />, +}; export const HEADING_2 = { DESCRIPTION_2: diff --git a/client/src/data/copy/common.tsx b/client/src/data/copy/common.tsx index d237c63b..4db276dc 100644 --- a/client/src/data/copy/common.tsx +++ b/client/src/data/copy/common.tsx @@ -17,6 +17,7 @@ export const simpleLink = (href:string) => (str:string) => {str}< // eslint-disable-next-line max-len export const linkFn = (to:string, isInternal:boolean, isOpenNewTab:boolean) => (str:string) => ; +export const RFI_LINK = `https://www.federalregister.gov/d/2022-03920`; export const FEEDBACK_EMAIL = 'Screeningtool-Support@omb.eop.gov'; @@ -89,6 +90,26 @@ export const HEADER = defineMessages({ defaultMessage: 'Contact', description: 'Navigate to the about page. This is Header navigate item to the Contact page', }, + DOWNLOADS: { + id: 'common.pages.header.downloads', + defaultMessage: 'Downloads', + description: 'Navigate to the about page. This is Header navigate item to the downloads page', + }, + FAQs: { + id: 'common.pages.header.faqs', + defaultMessage: 'Frequently asked questions', + description: 'Navigate to the about page. This is Header navigate item to the faqs page', + }, + PUBLIC_ENG: { + id: 'common.pages.header.public.eng', + defaultMessage: 'Engagement calendar', + description: 'Navigate to the about page. This is Header navigate item to the public eng page', + }, + TSD: { + id: 'common.pages.header.tsd', + defaultMessage: 'Technical Support Document', + description: 'Navigate to the about page. This is Header navigate item to the technical support document page', + }, }); // Footer @@ -108,6 +129,21 @@ export const FOOTER = defineMessages({ defaultMessage: 'More information', description: 'Navigate to the about page. This is Footer column header', }, + ENG_CAL: { + id: 'common.pages.footer.eng.cal.text', + defaultMessage: 'Engagement calender', + description: 'Navigate to the about page. This is Footer eng.cal.gov link text', + }, + RFI: { + id: 'common.pages.footer.rfi.text', + defaultMessage: 'Request for Infomation', + description: 'Navigate to the about page. This is Footer rfi link text', + }, + RFI_LINK: { + id: 'common.pages.footer.rfi.link', + defaultMessage: RFI_LINK, + description: 'Navigate to the about page. This is Footer rfi link', + }, WHITEHOUSE: { id: 'common.pages.footer.whitehouse.text', defaultMessage: 'Whitehouse.gov', @@ -138,11 +174,6 @@ export const FOOTER = defineMessages({ defaultMessage: 'Whitehouse logo', description: 'Navigate to the about page. This is Footer Whitehouse logo alt text', }, - QUESTIONS: { - id: 'common.pages.footer.questionsheader', - defaultMessage: 'Have a question about government services?', - description: 'Navigate to the about page. This is Footer column header', - }, FIND_CONTACT: { id: 'common.pages.footer.findcontact', defaultMessage: 'Find a contact at USA.gov', @@ -153,6 +184,21 @@ export const FOOTER = defineMessages({ defaultMessage: 'https://www.usa.gov/', description: 'Navigate to the about page. This is Footer find contact link text', }, + CONTRIBUTE: { + id: 'common.pages.footer.contribute.header', + defaultMessage: 'Want to contribute?', + description: 'Navigate to the about page. This is third Footer column header', + }, + GITHUB_LINK_TEXT: { + id: 'common.pages.footer.github.link.text', + defaultMessage: 'Check out the code on GitHub', + description: 'Navigate to the about page. This is Footer github link text', + }, + GITHUB_LINK: { + id: 'common.pages.footer.findcontact.link', + defaultMessage: 'https://github.com/usds/justice40-tool', + description: 'Navigate to the about page. This is Footer find contact link text', + }, CONTACT: { id: 'common.pages.footer.contactheader', defaultMessage: 'Contact', diff --git a/client/src/data/copy/contact.tsx b/client/src/data/copy/contact.tsx index db6b0bf2..b59eaccd 100644 --- a/client/src/data/copy/contact.tsx +++ b/client/src/data/copy/contact.tsx @@ -3,6 +3,8 @@ import React from 'react'; import {defineMessages} from 'react-intl'; import {FormattedMessage} from 'gatsby-plugin-intl'; import * as COMMON_COPY from './common'; +import {PAGES_ENDPOINTS} from '../constants'; + export const PAGE_INTRO = defineMessages({ PAGE_TILE: { @@ -45,7 +47,7 @@ export const RFI_BOX_BODY = federalregister.gov.`} description={'Navigate to the contact page, this is the body of the request for information box'} values={{ - link1: COMMON_COPY.linkFn(`https://www.federalregister.gov/d/2022-03920`, false, true), + link1: COMMON_COPY.linkFn(COMMON_COPY.RFI_LINK, false, true), }} />; @@ -63,7 +65,7 @@ export const CENSUS_TRACT_FEEDBACK = { `} description={'Navigate to the contact page, this is the census tract feedback section'} values={{ - link1: COMMON_COPY.linkFn('/cejst', true, false), + link1: COMMON_COPY.linkFn(PAGES_ENDPOINTS.EXPLORE, true, false), }} />, PARAGRAPH2: Excel file (.xlxs {excelFileSize} unzipped) + `} + description={'On the downloads page, the description of the excel link'} + values={{ + link1: (str:string) => {str}, + excelFileSize: , + }} + />, + CSV: CSV file (.csv {csvFileSize} unzipped) + `} + description={'On the downloads page, the description of the csv link'} + values={{ + link1: simpleLink('/csv'), + csvFileSize: , + }} + />, + SHAPE: Shapefiles (Codebook included with geojson {shapeFileSize} unzipped) + `} + description={'On the downloads page, the description of the shapefiles link'} + values={{ + link1: simpleLink('/shape'), + shapeFileSize: , + }} + />, +}; diff --git a/client/src/data/copy/explore.tsx b/client/src/data/copy/explore.tsx index 5d6d1280..2ae29cbc 100644 --- a/client/src/data/copy/explore.tsx +++ b/client/src/data/copy/explore.tsx @@ -7,6 +7,7 @@ import {FormattedDate, FormattedMessage, FormattedNumber} from 'gatsby-plugin-in import * as COMMON_COPY from './common'; import * as METHODOLOGY_COPY from './methodology'; import {simpleLink, linkFn} from './common'; +import {PAGES_ENDPOINTS} from '../constants'; export const PAGE_INTRO = defineMessages({ PAGE_TILE: { @@ -31,7 +32,7 @@ export const PAGE_DESCRIPTION = ; @@ -289,6 +290,13 @@ export const COMMUNITY = { defaultMessage={ 'Send feedback'} description={`Navigate to the explore the tool page. When the map is in view, click on the map. The side panel will show link to send feedback`} />, + IMG_ICON: defineMessages({ + ALT_TAG: { + id: 'explore.tool.page.side.panel.send.feedback.alt.img', + defaultMessage: 'Send feedback', + description: `Navigate to the explore the tool page. When the map is in view, click on the map. The side panel will show a send feedback icon, this is the images alt tag`, + }, + }), }, }; @@ -795,7 +803,7 @@ export const NOTE_ON_TERRITORIES = { `} description={`Navigate to the explore the tool page. Under the map, you will see territories paragraph 1`} values={{ - link1: linkFn('/methodology', true, false), + link1: linkFn(PAGES_ENDPOINTS.METHODOLOGY, true, false), }} />, PARA_2: Methodology & data page and send feedback.`} values={{ - link1: linkFn('/methodology', true, false), + link1: linkFn(PAGES_ENDPOINTS.METHODOLOGY, true, false), }} />, LIST_ITEM_2: , + DESCRIPTION1: , downloadFileSize: , - }} - />, - DESCRIPTION: , + shapefileSize: , }} />, LAST_UPDATED: , }} />, - BUTTON_TEXT: , + BUTTON_TEXT2: , + NEW_TAG: NEW`} + description= {'Navigate to the methodology page. This is the new tag text'} + values={{ + boldtag: boldFn, + }} + />, }; export const CATEGORY= { diff --git a/client/src/data/copy/publicEngage.tsx b/client/src/data/copy/publicEngage.tsx index a0682c7e..f223d980 100644 --- a/client/src/data/copy/publicEngage.tsx +++ b/client/src/data/copy/publicEngage.tsx @@ -90,7 +90,7 @@ export const PUBLIC_ENG_VIDEO = defineMessages({ export const PUBLIC_ENG_BUTTON = defineMessages({ LABEL: { id: 'public.eng.page.button.label', - defaultMessage: `Public Engagement`, + defaultMessage: `Public engagement`, description: 'Navigate to the the public engagement page, this will be the public engagement button label', }, TAG_LABEL: { @@ -98,6 +98,11 @@ export const PUBLIC_ENG_BUTTON = defineMessages({ defaultMessage: `UPDATED`, description: 'Navigate to the the public engagement page, this will be the public engagement tag label', }, + IMG_ICON_ALT_TAG: { + id: 'public.eng.page.button.img.alt.tag', + defaultMessage: `an icon that represents a calendar`, + description: 'Navigate to the the public engagement page, this will be the public engagement button icon alt tag text', + }, }); export const EVENT_TYPES = { diff --git a/client/src/data/copy/tsd.tsx b/client/src/data/copy/tsd.tsx new file mode 100644 index 00000000..0f344cc0 --- /dev/null +++ b/client/src/data/copy/tsd.tsx @@ -0,0 +1,16 @@ +/* eslint-disable max-len */ +import {defineMessages} from 'react-intl'; + + +export const PAGE_INTRO = defineMessages({ + PAGE_TILE: { + id: 'technical.support.doc.page.title.text', + defaultMessage: 'Technical Support Document', + description: 'Navigate to the the Technical Support Doc page, this will be the page title text', + }, + COMING_SOON: { + id: 'technical.support.doc.page.coming.soon.text', + defaultMessage: 'Coming Soon!', + description: 'Navigate to the the Technical Support Doc page, this will be the page coming soon text', + }, +}); diff --git a/client/src/intl/en.json b/client/src/intl/en.json index 51ec3d2d..ed79a95a 100644 --- a/client/src/intl/en.json +++ b/client/src/intl/en.json @@ -79,6 +79,14 @@ "defaultMessage": "Read more about the Justice40 Initiative in President Biden’s Executive Order 14008 on Tackling the Climate Crisis at Home and Abroad.", "description": "about page sub header text" }, + "about.page.sub.header.3.text": { + "defaultMessage": "Still have questions?", + "description": "Navigate to the About page. This is the fourth heading" + }, + "about.page.sub.header.3.text.1": { + "defaultMessage": "Find answers on the Climate and Economic Justice Screening Tool's Frequently Asked Questions.", + "description": "Navigate to the About page. This is the second heading description" + }, "about.page.title.text": { "defaultMessage": "About", "description": "Navigate to the About page. This is the about page title text" @@ -111,18 +119,30 @@ "defaultMessage": "Contact", "description": "Navigate to the about page. This is Footer column header" }, + "common.pages.footer.contribute.header": { + "defaultMessage": "Want to contribute?", + "description": "Navigate to the about page. This is third Footer column header" + }, + "common.pages.footer.eng.cal.text": { + "defaultMessage": "Engagement calender", + "description": "Navigate to the about page. This is Footer eng.cal.gov link text" + }, "common.pages.footer.findcontact": { "defaultMessage": "Find a contact at USA.gov", "description": "Navigate to the about page. This is Footer find contact link text" }, "common.pages.footer.findcontact.link": { - "defaultMessage": "https://www.usa.gov/", + "defaultMessage": "https://github.com/usds/justice40-tool", "description": "Navigate to the about page. This is Footer find contact link text" }, "common.pages.footer.foia.text": { "defaultMessage": "Freedom of Information Act (FOIA)", "description": "Navigate to the about page. This is Footer FOIA link text" }, + "common.pages.footer.github.link.text": { + "defaultMessage": "Check out the code on GitHub", + "description": "Navigate to the about page. This is Footer github link text" + }, "common.pages.footer.logo.title": { "defaultMessage": "Council on Environmental Quality", "description": "Navigate to the about page. This is Footer under logo" @@ -139,9 +159,12 @@ "defaultMessage": "Privacy Policy", "description": "Navigate to the about page. This is Footer privacy policy link text" }, - "common.pages.footer.questionsheader": { - "defaultMessage": "Have a question about government services?", - "description": "Navigate to the about page. This is Footer column header" + "common.pages.footer.rfi.link": { + "description": "Navigate to the about page. This is Footer rfi link" + }, + "common.pages.footer.rfi.text": { + "defaultMessage": "Request for Infomation", + "description": "Navigate to the about page. This is Footer rfi link text" }, "common.pages.footer.whitehouse.link": { "defaultMessage": "https://www.whitehouse.gov/", @@ -163,14 +186,26 @@ "defaultMessage": "Contact", "description": "Navigate to the about page. This is Header navigate item to the Contact page" }, + "common.pages.header.downloads": { + "defaultMessage": "Downloads", + "description": "Navigate to the about page. This is Header navigate item to the downloads page" + }, "common.pages.header.explore": { "defaultMessage": "Explore the tool", "description": "Navigate to the about page. This is Header navigate item to the Explore the tool page" }, + "common.pages.header.faqs": { + "defaultMessage": "Frequently asked questions", + "description": "Navigate to the about page. This is Header navigate item to the faqs page" + }, "common.pages.header.methodology": { "defaultMessage": "Methodology & data", "description": "Navigate to the about page. This is Header navigate item to the Methodology page" }, + "common.pages.header.public.eng": { + "defaultMessage": "Engagement calendar", + "description": "Navigate to the about page. This is Header navigate item to the public eng page" + }, "common.pages.header.title.line1": { "defaultMessage": "Climate and Economic Justice", "description": "Navigate to the about page. This is Title in nav header line 1 of 2" @@ -179,6 +214,10 @@ "defaultMessage": "Screening Tool", "description": "Navigate to the about page. This is Title in nav header line 2 of 2" }, + "common.pages.header.tsd": { + "defaultMessage": "Technical Support Document", + "description": "Navigate to the about page. This is Header navigate item to the technical support document page" + }, "contact.page.census.tract.feedback.para1": { "defaultMessage": "To provide feedback about a specific census tract, either select the send feedback button after selecting a census tract on the Explore the tool page or use the email address provided above. Please include the census tract ID, county, and state or territory information, in addition to your feedback.", "description": "Navigate to the contact page, this is the census tract feedback section" @@ -219,6 +258,30 @@ "defaultMessage": "Contact", "description": "Navigate to the contact page, this is the contact page title text" }, + "downloads.page.csv.link": { + "defaultMessage": "CSV file (.csv {csvFileSize} unzipped)", + "description": "On the downloads page, the description of the csv link" + }, + "downloads.page.excel.link": { + "defaultMessage": "Excel file (.xlxs {excelFileSize} unzipped)", + "description": "On the downloads page, the description of the excel link" + }, + "downloads.page.heading1.text": { + "defaultMessage": "The dataset used in the tool, along with a data dictionary and information about how to use the list of communities (.pdf) are available in the following file formats:", + "description": "Navigate to the the Downloads page, this will be the page heading1 text" + }, + "downloads.page.heading2.text": { + "defaultMessage": "File formats", + "description": "Navigate to the the Downloads page, this will be the page heading2 text" + }, + "downloads.page.shape.link": { + "defaultMessage": "Shapefiles (Codebook included with geojson {shapeFileSize} unzipped)", + "description": "On the downloads page, the description of the shapefiles link" + }, + "downloads.page.title.text": { + "defaultMessage": "Downloads", + "description": "Navigate to the the Downloads page, this will be the page title text" + }, "explore.page.side.panel.at.or.above.at.least.one": { "defaultMessage": "At or above at least one threshold?", "description": "Navigate to the explore the tool page. When the map is in view, click on the map. Click on a category to expand. This is the first question text around thresholds." @@ -683,6 +746,10 @@ "defaultMessage": "At or above {numberOfThresholdExceed} thresholds", "description": "Navigate to the explore the tool page. When the map is in view, click on the map. The side panel will show how many thresholds are exceeded" }, + "explore.tool.page.side.panel.send.feedback.alt.img": { + "defaultMessage": "Send feedback", + "description": "Navigate to the explore the tool page. When the map is in view, click on the map. The side panel will show a send feedback icon, this is the images alt tag" + }, "explore.tool.page.side.panel.send.feedback.email.body": { "defaultMessage": "Please provide feedback about this census tract, including about the datasets, the data categories provided for this census tract, the communities who live in this census tract, and anything else relevant that CEQ should know about this census tract.", "description": "Navigate to the explore the tool page. When the map is in view, click on the map. The side panel will show link to send feedback\n" @@ -751,6 +818,14 @@ "defaultMessage": "Help improve the site & data", "description": "Navigate to the the public engagement page, this will be the text for floating action button" }, + "faqs.page.coming.soon.text": { + "defaultMessage": "Coming Soon!", + "description": "Navigate to the the FAQs page, this will be the page coming soon text" + }, + "faqs.page.title.text": { + "defaultMessage": "Frequently asked questions", + "description": "Navigate to the the FAQs page, this will be the page title text" + }, "indicator.categories.afford.house.title": { "defaultMessage": "Affordable and sustainable housing", "description": "Navigate to the methodology page. Navigate to the category section. This will set the category title" @@ -1107,22 +1182,30 @@ "defaultMessage": "All categories", "description": "Navigate to the methodology page. Navigate to the dataset section. This is the portion of the dataset card Used In text for all methodologies" }, - "methodology.page.downloadPacket.button.text": { - "defaultMessage": "Download package", + "methodology.page.downloadPacket.button1.text": { + "defaultMessage": "Download data sources", "description": "Navigate to the methodology page. This is the download packet button text" }, + "methodology.page.downloadPacket.button2.text": { + "defaultMessage": "Download shapefile", + "description": "Navigate to the methodology page. This is the download shapefiles text" + }, "methodology.page.downloadPacket.header.text": { - "defaultMessage": "Draft communities list v{version} ({downloadFileSize} unzipped)", + "defaultMessage": "Files available for download", "description": "Navigate to the methodology page. This is the download packet header text" }, "methodology.page.downloadPacket.info.last.updated": { "defaultMessage": "Last updated: {downloadLastUpdated}", "description": "Navigate to the methodology page. This is the download packet info last updated" }, - "methodology.page.downloadPacket.info.text": { - "defaultMessage": "The download package includes draft v{version} of the list of disadvantaged communities (.csv and .xlsx).", + "methodology.page.downloadPacket.info.text1": { + "defaultMessage": "Download the data sources used in the CEJST (.csv and .xlsx, {downloadFileSize} unzipped) or the shapefile, along with a codebook (.zip, {shapefileSize} unzipped).", "description": "Navigate to the methodology page. This is the download packet info text" }, + "methodology.page.downloadPacket.new.tag.text": { + "defaultMessage": "NEW", + "description": "Navigate to the methodology page. This is the new tag text" + }, "methodology.page.formula.first": { "defaultMessage": "IF the census tract is above the threshold for one or more environmental or climate indicators", "description": "Navigate to the methodology page. This is the first part of the formula used in the methodology" @@ -1228,8 +1311,8 @@ "description": "page not found guidance text" }, "pageNotFound.apology.text": { - "defaultMessage": "Sorry, the page you were looking for was not found. Click {home} to go home.", - "description": "page description" + "defaultMessage": "Sorry, the page you were looking for was not found. Click home to go home.", + "description": "main error message" }, "pageNotFound.heading.text": { "defaultMessage": "Page not found", @@ -1239,8 +1322,12 @@ "defaultMessage": "Page not found", "description": "page not found title text" }, + "public.eng.page.button.img.alt.tag": { + "defaultMessage": "an icon that represents a calendar", + "description": "Navigate to the the public engagement page, this will be the public engagement button icon alt tag text" + }, "public.eng.page.button.label": { - "defaultMessage": "Public Engagement", + "defaultMessage": "Public engagement", "description": "Navigate to the the public engagement page, this will be the public engagement button label" }, "public.eng.page.description1.text": { @@ -1350,5 +1437,13 @@ "public.eng.page.whejac.meeting.day.1.info": { "defaultMessage": "March 31th (3:00 - 7:30 PM EST)", "description": "public engagement page event WHEJAC" + }, + "technical.support.doc.page.coming.soon.text": { + "defaultMessage": "Coming Soon!", + "description": "Navigate to the the Technical Support Doc page, this will be the page coming soon text" + }, + "technical.support.doc.page.title.text": { + "defaultMessage": "Technical Support Document", + "description": "Navigate to the the Technical Support Doc page, this will be the page title text" } } diff --git a/client/src/pages/about.tsx b/client/src/pages/about.tsx new file mode 100644 index 00000000..59b77dd1 --- /dev/null +++ b/client/src/pages/about.tsx @@ -0,0 +1,166 @@ +import * as React from 'react'; +import {useIntl} from 'gatsby-plugin-intl'; + +import AboutCard from '../components/AboutCard/AboutCard'; +import AboutCardsContainer from '../components/AboutCard/AboutCardsContainer'; +import J40MainGridContainer from '../components/J40MainGridContainer'; +import Layout from '../components/layout'; +import PublicEngageButton from '../components/PublicEngageButton'; + +import * as ABOUT_COPY from '../data/copy/about'; +import * as COMMON_COPY from '../data/copy/common'; +import {PAGES_ENDPOINTS} from '../data/constants'; + +// @ts-ignore +import aboutUSMapImg from '../images/about-usmap-1.svg'; +// @ts-ignore +import aboutJ40Img from '../images/about-j40-1.svg'; +import accountBalanceIcon // @ts-ignore + from '/node_modules/uswds/dist/img/usa-icons/account_balance.svg'; + +import groupsIcon from // @ts-ignore + '/node_modules/uswds/dist/img/usa-icons/groups.svg'; + +import commentIcon from // @ts-ignore + '/node_modules/uswds/dist/img/usa-icons/comment.svg'; + +import githubIcon from // @ts-ignore + '/node_modules/uswds/dist/img/usa-icons/github.svg'; + +interface IAboutPageProps { + location: Location; +} + +// markup +const AboutPage = ({location}: IAboutPageProps) => { + const intl = useIntl(); + + return ( + + + + +
    +

    {intl.formatMessage(ABOUT_COPY.PAGE.HEADING)}

    + +
    + + {/* Section 1 */} + + + <> +

    + {ABOUT_COPY.HEADING_1.DESCRIPTION_1} +

    +

    + {intl.formatMessage(ABOUT_COPY.PAGE.HEADING1_DESCRIPTION2)} +

    + +
    +
    + + + {/* Section 2 */} + + + <> +

    + {intl.formatMessage(ABOUT_COPY.PAGE.HEADING2_DESCRIPTION1)} +

    +

    + {ABOUT_COPY.HEADING_2.DESCRIPTION_2} +

    + +
    +
    + + {/* Section 3 */} + + + <> +

    + {ABOUT_COPY.HEADING_3.DESCRIPTION_1} +

    + +
    +
    + +
    + + + +

    + {intl.formatMessage(ABOUT_COPY.HOW_TO_GET_STARTED.TITLE)} +

    + + +

    + {intl.formatMessage(ABOUT_COPY.HOW_TO_GET_STARTED.FEDERAL_PM_INFO)} +

    +
    + + +

    + {intl.formatMessage(ABOUT_COPY.HOW_TO_GET_STARTED.COMMUNITY_MEMBERS_INFO)} +

    +
    +
    +
    +
    + + +

    {intl.formatMessage(ABOUT_COPY.GET_INVOLVED.TITLE)}

    + + +

    + {intl.formatMessage(ABOUT_COPY.GET_INVOLVED.SEND_FEEDBACK_INFO)} +

    +
    + + +

    + {intl.formatMessage(ABOUT_COPY.GET_INVOLVED.JOIN_OSC_INFO)} +

    +
    +
    +
    +
    ); +}; + +export default AboutPage; diff --git a/client/src/pages/cejst.tsx b/client/src/pages/cejst.tsx deleted file mode 100644 index b1a62976..00000000 --- a/client/src/pages/cejst.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import React from 'react'; -import {useIntl} from 'gatsby-plugin-intl'; -import {Grid} from '@trussworks/react-uswds'; - -import HowYouCanHelp from '../components/HowYouCanHelp'; -import J40MainGridContainer from '../components/J40MainGridContainer'; -import Layout from '../components/layout'; -import MapWrapper from '../components/MapWrapper'; -import PublicEngageButton from '../components/PublicEngageButton'; - -import * as EXPLORE_COPY from '../data/copy/explore'; - -interface IMapPageProps { - location: Location; -} - -const CEJSTPage = ({location}: IMapPageProps) => { - // We temporarily removed MapControls, which would enable you to `setFeatures` also, for now - // We will bring back later when we have interactive controls. - const intl = useIntl(); - - - return ( - - - -
    -

    {intl.formatMessage(EXPLORE_COPY.PAGE_INTRO.PAGE_HEADING)}

    - -
    - - - - {/* Gradually increase width of the Grid as the width decreases from desktop to mobile*/} - {/* desktop = 7 columns, tablet = 10 columns and mobile = 12 columns (full width) */} - -
    -

    - {EXPLORE_COPY.PAGE_DESCRIPTION} -

    -
    -
    -
    -
    - - - - - - - -

    {EXPLORE_COPY.NOTE_ON_TERRITORIES.INTRO}

    -

    {EXPLORE_COPY.NOTE_ON_TERRITORIES.PARA_1}

    -

    {EXPLORE_COPY.NOTE_ON_TERRITORIES.PARA_2}

    -

    {EXPLORE_COPY.NOTE_ON_TERRITORIES.PARA_3}

    -

    {EXPLORE_COPY.NOTE_ON_TERRITORIES.PARA_4}

    -
    - - -

    {EXPLORE_COPY.NOTE_ON_TRIBAL_NATIONS.INTRO}

    -

    {EXPLORE_COPY.NOTE_ON_TRIBAL_NATIONS.PARA_1}

    -
    -
    - - - - -
    - -
    -
    -
    -
    -
    ); -}; - -export default CEJSTPage; diff --git a/client/src/pages/contact.tsx b/client/src/pages/contact.tsx index 42d7260c..9929e9f0 100644 --- a/client/src/pages/contact.tsx +++ b/client/src/pages/contact.tsx @@ -5,8 +5,8 @@ import {useIntl, FormattedMessage} from 'gatsby-plugin-intl'; import J40MainGridContainer from '../components/J40MainGridContainer'; import Layout from '../components/layout'; import LinkTypeWrapper from '../components/LinkTypeWrapper'; -import PublicEngageButton from '../components/PublicEngageButton'; import RequestForInfo from '../components/RequestForInfo'; +import PublicEngageButton from '../components/PublicEngageButton'; import * as CONTACT_COPY from '../data/copy/contact'; import * as COMMON_COPY from '../data/copy/common'; diff --git a/client/src/pages/downloads.tsx b/client/src/pages/downloads.tsx new file mode 100644 index 00000000..fbd5b3f7 --- /dev/null +++ b/client/src/pages/downloads.tsx @@ -0,0 +1,45 @@ +import * as React from 'react'; +import {Grid} from '@trussworks/react-uswds'; +import {useIntl} from 'gatsby-plugin-intl'; + +import J40MainGridContainer from '../components/J40MainGridContainer'; +import Layout from '../components/layout'; + +import * as DOWNLOADS_COPY from '../data/copy/downloads'; + +interface IDownloadsPageProps { + location: Location; +} + +const DownloadsPage = ({location}: IDownloadsPageProps) => { + const intl = useIntl(); + + return ( + + + + +

    {intl.formatMessage(DOWNLOADS_COPY.PAGE_INTRO.PAGE_HEADING1)}

    + + +

    {intl.formatMessage(DOWNLOADS_COPY.PAGE_INTRO.PAGE_HEADING2)}

    +

    + {intl.formatMessage(DOWNLOADS_COPY.PAGE_INTRO.PAGE_DESCRIPTION1)} +

    +

    + {DOWNLOADS_COPY.DOWNLOAD_LINKS.EXCEL} +

    +

    + {DOWNLOADS_COPY.DOWNLOAD_LINKS.CSV} +

    +

    + {DOWNLOADS_COPY.DOWNLOAD_LINKS.SHAPE} +

    +
    + +
    +
    + ); +}; + +export default DownloadsPage; diff --git a/client/src/pages/frequently-asked-questions.tsx b/client/src/pages/frequently-asked-questions.tsx new file mode 100644 index 00000000..00a234f7 --- /dev/null +++ b/client/src/pages/frequently-asked-questions.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import {Grid} from '@trussworks/react-uswds'; +import {useIntl} from 'gatsby-plugin-intl'; + +import J40MainGridContainer from '../components/J40MainGridContainer'; +import Layout from '../components/layout'; + +import * as FAQS_COPY from '../data/copy/faqs'; + +interface IFAQPageProps { + location: Location; +} + +const FAQPage = ({location}: IFAQPageProps) => { + const intl = useIntl(); + + return ( + + + + +

    {intl.formatMessage(FAQS_COPY.PAGE_INTRO.PAGE_TILE)}

    + + + {intl.formatMessage(FAQS_COPY.PAGE_INTRO.COMING_SOON)} + +
    +
    + ); +}; + +export default FAQPage; diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx index 10563d40..7388238a 100644 --- a/client/src/pages/index.tsx +++ b/client/src/pages/index.tsx @@ -1,147 +1,77 @@ -import * as React from 'react'; +import React from 'react'; import {useIntl} from 'gatsby-plugin-intl'; +import {Grid} from '@trussworks/react-uswds'; -import AboutCard from '../components/AboutCard/AboutCard'; -import AboutCardsContainer from '../components/AboutCard/AboutCardsContainer'; +import HowYouCanHelp from '../components/HowYouCanHelp'; import J40MainGridContainer from '../components/J40MainGridContainer'; import Layout from '../components/layout'; +import MapWrapper from '../components/MapWrapper'; import PublicEngageButton from '../components/PublicEngageButton'; -import * as ABOUT_COPY from '../data/copy/about'; -import * as COMMON_COPY from '../data/copy/common'; +import * as EXPLORE_COPY from '../data/copy/explore'; -// @ts-ignore -import aboutUSMapImg from '../images/about-usmap-1.svg'; -// @ts-ignore -import aboutJ40Img from '../images/about-j40-1.svg'; -import accountBalanceIcon // @ts-ignore - from '/node_modules/uswds/dist/img/usa-icons/account_balance.svg'; - -import groupsIcon from // @ts-ignore - '/node_modules/uswds/dist/img/usa-icons/groups.svg'; - -import commentIcon from // @ts-ignore - '/node_modules/uswds/dist/img/usa-icons/comment.svg'; - -import githubIcon from // @ts-ignore - '/node_modules/uswds/dist/img/usa-icons/github.svg'; - -interface IndexPageProps { +interface IMapPageProps { location: Location; } -// markup -const IndexPage = ({location}: IndexPageProps) => { +const ExporeToolPage = ({location}: IMapPageProps) => { + // We temporarily removed MapControls, which would enable you to `setFeatures` also, for now + // We will bring back later when we have interactive controls. const intl = useIntl(); - return ( - - -
    -

    {intl.formatMessage(ABOUT_COPY.PAGE.HEADING)}

    - -
    + return ( - - - <> -

    - {ABOUT_COPY.HEADING_1.DESCRIPTION_1} -

    -

    - {intl.formatMessage(ABOUT_COPY.PAGE.HEADING1_DESCRIPTION2)} -

    - -
    -
    + - - - <> -

    - {intl.formatMessage(ABOUT_COPY.PAGE.HEADING2_DESCRIPTION1)} -

    -

    - {ABOUT_COPY.HEADING_2.DESCRIPTION_2} -

    - -
    -
    -
    +
    +

    {intl.formatMessage(EXPLORE_COPY.PAGE_INTRO.PAGE_HEADING)}

    + +
    - - -

    - {intl.formatMessage(ABOUT_COPY.HOW_TO_GET_STARTED.TITLE)} -

    - - -

    - {intl.formatMessage(ABOUT_COPY.HOW_TO_GET_STARTED.FEDERAL_PM_INFO)} -

    -
    + - -

    - {intl.formatMessage(ABOUT_COPY.HOW_TO_GET_STARTED.COMMUNITY_MEMBERS_INFO)} -

    -
    -
    -
    -
    - - -

    {intl.formatMessage(ABOUT_COPY.GET_INVOLVED.TITLE)}

    - - + {/* Gradually increase width of the Grid as the width decreases from desktop to mobile*/} + {/* desktop = 7 columns, tablet = 10 columns and mobile = 12 columns (full width) */} + +

    - {intl.formatMessage(ABOUT_COPY.GET_INVOLVED.SEND_FEEDBACK_INFO)} + {EXPLORE_COPY.PAGE_DESCRIPTION}

    - +
    +
    + +
    - -

    - {intl.formatMessage(ABOUT_COPY.GET_INVOLVED.JOIN_OSC_INFO)} -

    -
    - -
    -
    ); + + + + + + +

    {EXPLORE_COPY.NOTE_ON_TERRITORIES.INTRO}

    +

    {EXPLORE_COPY.NOTE_ON_TERRITORIES.PARA_1}

    +

    {EXPLORE_COPY.NOTE_ON_TERRITORIES.PARA_2}

    +

    {EXPLORE_COPY.NOTE_ON_TERRITORIES.PARA_3}

    +

    {EXPLORE_COPY.NOTE_ON_TERRITORIES.PARA_4}

    +
    + + +

    {EXPLORE_COPY.NOTE_ON_TRIBAL_NATIONS.INTRO}

    +

    {EXPLORE_COPY.NOTE_ON_TRIBAL_NATIONS.PARA_1}

    +
    +
    + + + + +
    + +
    +
    +
    +
    + ); }; -export default IndexPage; +export default ExporeToolPage; diff --git a/client/src/pages/technical-support-document.tsx b/client/src/pages/technical-support-document.tsx new file mode 100644 index 00000000..7e8b1f29 --- /dev/null +++ b/client/src/pages/technical-support-document.tsx @@ -0,0 +1,32 @@ +import * as React from 'react'; +import {Grid} from '@trussworks/react-uswds'; +import {useIntl} from 'gatsby-plugin-intl'; + +import J40MainGridContainer from '../components/J40MainGridContainer'; +import Layout from '../components/layout'; + +import * as TSD_COPY from '../data/copy/tsd'; + +interface ITSDPageProps { + location: Location; +} + +const TSDPage = ({location}: ITSDPageProps) => { + const intl = useIntl(); + + return ( + + + + +

    {intl.formatMessage(TSD_COPY.PAGE_INTRO.PAGE_TILE)}

    + + + {intl.formatMessage(TSD_COPY.PAGE_INTRO.COMING_SOON)} + +
    +
    + ); +}; + +export default TSDPage; diff --git a/client/src/pages/__snapshots__/index.test.tsx.snap b/client/src/pages/tests/__snapshots__/about.test.tsx.snap similarity index 90% rename from client/src/pages/__snapshots__/index.test.tsx.snap rename to client/src/pages/tests/__snapshots__/about.test.tsx.snap index a4438c61..f5a35251 100644 --- a/client/src/pages/__snapshots__/index.test.tsx.snap +++ b/client/src/pages/tests/__snapshots__/about.test.tsx.snap @@ -218,22 +218,12 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis @@ -854,7 +947,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
    - Have a question about government services? + Want to contribute?
    diff --git a/client/src/pages/__snapshots__/contact.test.tsx.snap b/client/src/pages/tests/__snapshots__/contact.test.tsx.snap similarity index 92% rename from client/src/pages/__snapshots__/contact.test.tsx.snap rename to client/src/pages/tests/__snapshots__/contact.test.tsx.snap index 4cb7b151..07d27f8d 100644 --- a/client/src/pages/__snapshots__/contact.test.tsx.snap +++ b/client/src/pages/tests/__snapshots__/contact.test.tsx.snap @@ -218,22 +218,12 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
      -
    • - - About - -
    • Explore the tool @@ -248,6 +238,16 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis Methodology & data
    • +
    • + + About + +
    • @@ -329,11 +329,19 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis href="/en/public-engagement" > @@ -370,7 +378,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis To provide feedback about a specific census tract, either select the send feedback button after selecting a census tract on the Explore the tool @@ -513,7 +521,30 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis class="usa-footer__secondary-link" > + Engagement calender + +
    • + + +
    @@ -558,7 +602,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
    - Have a question about government services? + Want to contribute?
    diff --git a/client/src/pages/tests/__snapshots__/downloads.test.tsx.snap b/client/src/pages/tests/__snapshots__/downloads.test.tsx.snap new file mode 100644 index 00000000..8f192e13 --- /dev/null +++ b/client/src/pages/tests/__snapshots__/downloads.test.tsx.snap @@ -0,0 +1,594 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`rendering of the DatasetContainer checks if various text fields are visible 1`] = ` + + +
    +
    +

    + Downloads +

    +
    +

    + File formats +

    +

    + The dataset used in the tool, along with a data dictionary and information about how to use the list of communities (.pdf) are available in the following file formats: +

    +

    + + + + Excel file + + (.xlxs 54MB unzipped) + +

    +

    + + + + CSV file + + (.csv 52MB unzipped) + +

    +

    + + + + Shapefiles + + (Codebook included with geojson 110MB unzipped) + +

    +
    +
    +
    + +
    +`; diff --git a/client/src/pages/tests/__snapshots__/freqAskedQuestions.test.tsx.snap b/client/src/pages/tests/__snapshots__/freqAskedQuestions.test.tsx.snap new file mode 100644 index 00000000..7e2aa01d --- /dev/null +++ b/client/src/pages/tests/__snapshots__/freqAskedQuestions.test.tsx.snap @@ -0,0 +1,556 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`rendering of the DatasetContainer checks if various text fields are visible 1`] = ` + + +
    +
    +

    + Frequently asked questions +

    +
    + Coming Soon! +
    +
    +
    + +
    +`; diff --git a/client/src/pages/__snapshots__/methodology.test.tsx.snap b/client/src/pages/tests/__snapshots__/methodology.test.tsx.snap similarity index 95% rename from client/src/pages/__snapshots__/methodology.test.tsx.snap rename to client/src/pages/tests/__snapshots__/methodology.test.tsx.snap index 810971eb..884ee262 100644 --- a/client/src/pages/__snapshots__/methodology.test.tsx.snap +++ b/client/src/pages/tests/__snapshots__/methodology.test.tsx.snap @@ -218,22 +218,12 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
      -
    • - - About - -
    • Explore the tool @@ -248,6 +238,16 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis Methodology & data
    • +
    • + + About + +
    • @@ -329,11 +329,19 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis href="/en/public-engagement" > @@ -406,16 +414,10 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
      - Draft communities list v0.1 (52MB unzipped) + Files available for download
      - - The download package includes draft v0.1 of the list of disadvantaged communities - (.csv and .xlsx). - - - Last updated: 02/18/22 - + Download the data sources used in the CEJST (.csv and .xlsx, 52MB unzipped) or the shapefile, along with a codebook (.zip, 742MB unzipped).
      - Download package + Download data sources
      +
      + Last updated: 04/06/22 +
      + +
      + Last updated: 04/06/22 +
      @@ -2394,7 +2435,30 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis class="usa-footer__secondary-link" > + Engagement calender + +
    • + + +
    @@ -2439,7 +2516,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
    - Have a question about government services? + Want to contribute?
    diff --git a/client/src/pages/tests/__snapshots__/publicEng.test.tsx.snap b/client/src/pages/tests/__snapshots__/publicEng.test.tsx.snap new file mode 100644 index 00000000..dc947a8a --- /dev/null +++ b/client/src/pages/tests/__snapshots__/publicEng.test.tsx.snap @@ -0,0 +1,1031 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`rendering of the DatasetContainer checks if various text fields are visible 1`] = ` + + +
    +
    +

    + Public engagement opportunities +

    +
    +
    +

    + + CEQ is hosting engagement opportunities to connect with the public about the current version of the + tool. These sessions are an opportunity to obtain training on the tool or to provide feedback on the + beta version of the tool. CEQ hopes that members of the public will join these engagements to learn + about the tool, have their questions answered, and share feedback. + +

    +

    + + Pre-registration is required to participate and speak at the sessions. + +

    +

    + + As they become available, additional public trainings and engagement opportunities on the Climate + and Economic Justice Screening Tool will also be posted on this page. + +

    +
    +
    +
    +

    + Find an event +

    +
    +
    +
    +
      +
    • + Alt text +
      +

      + CEJST training session #1 +

      +

      + + The White House Council on Environmental Quality (CEQ), in partnership with the U.S. Digital + Service, is hosting a series of 'Training Webinars' for users of the Climate and Economic + Justice Screening Tool. These webinars are an opportunity for members of the public to learn how to + use the current version of the tool. The presenters at these webinars will be available to + provide technical support and address issues related to accessing and using the tool. + +

      +

      + + Event info + + : March 9th (4:00 - 5:00 PM EST) +

      +

      + + + +

      +
      +
    • +
    • + Alt text +
      +

      + CEJST training session #2 +

      +

      + + The White House Council on Environmental Quality (CEQ), in partnership with the U.S. Digital + Service, is hosting a series of 'Training Webinars' for users of the Climate and Economic + Justice Screening Tool. These webinars are an opportunity for members of the public to learn how to + use the current version of the tool. The presenters at these webinars will be available to + provide technical support and address issues related to accessing and using the tool. + +

      +

      + + Event info + + : March 10th (4:00 - 5:00 PM EST) +

      +

      + + + +

      +
      +
    • +
    • + Alt text +
      +

      + CEJST training session #3 +

      +

      + + The White House Council on Environmental Quality (CEQ), in partnership with the U.S. Digital + Service, is hosting a series of 'Training Webinars' for users of the Climate and Economic + Justice Screening Tool. These webinars are an opportunity for members of the public to learn how to + use the current version of the tool. The presenters at these webinars will be available to + provide technical support and address issues related to accessing and using the tool. + +

      +

      + + Event info + + : March 16th (4:00 - 5:00 PM EST) +

      +

      + + + +

      +
      +
    • +
    • + Alt text +
      +

      + CEJST listening session #1 +

      +

      + + CEQ is hosting public listening sessions to seek input and feedback on the beta version of the + tool, including on the datasets it includes and the methodology it uses. This feedback is critical + to the development and enhancement of the tool. This feedback will help CEQ update and refine the + tool to ensure that it reflects the environmental, climate and other challenges that communities + are experiencing. + +

      +

      + + Event info + + : March 22nd (4:00 - 5:00 PM EST) +

      +

      + + + +

      +
      +
    • +
    • + Alt text +
      +

      + CEJST Public WHEJAC meeting day one +

      +

      + + The White House Environmental Justice Advisory Council is also soliciting feedback on the beta version of the Climate and Economic Justice Screening Tool at its public meeting. The link above has additional details. + +

      +

      + + Event info + + : March 30th (3:00 - 7:00 PM EST) +

      +

      + + + +

      +
      +
    • +
    • + Alt text +
      +

      + CEJST Public WHEJAC meeting day two +

      +

      + + The White House Environmental Justice Advisory Council is also soliciting feedback on the beta version of the Climate and Economic Justice Screening Tool at its public meeting. The link above has additional details. + +

      +

      + + Event info + + : March 31th (3:00 - 7:30 PM EST) +

      +

      + + + +

      +
      +
    • +
    • + Alt text +
      +

      + + CEJST listening session #2 + +

      +

      + + CEQ is hosting public listening sessions to seek input and feedback on the beta version of the + tool, including on the datasets it includes and the methodology it uses. This feedback is critical + to the development and enhancement of the tool. This feedback will help CEQ update and refine the + tool to ensure that it reflects the environmental, climate and other challenges that communities + are experiencing. + +

      +

      + + Event info + + : April 15th (4:00 - 5:00 PM EST) +

      +

      + + + +

      +
      +
    • +
    +
    +
    +
    +
    +

    + Can't make an upcoming session? +

    +
    + Watch a recorded version of the CEJST training on YouTube. + + + +
    +
    +
    +
    +
    +
    +
    + +
    +`; diff --git a/client/src/pages/tests/__snapshots__/techSupportDoc.test.tsx.snap b/client/src/pages/tests/__snapshots__/techSupportDoc.test.tsx.snap new file mode 100644 index 00000000..edfa2d47 --- /dev/null +++ b/client/src/pages/tests/__snapshots__/techSupportDoc.test.tsx.snap @@ -0,0 +1,556 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`rendering of the DatasetContainer checks if various text fields are visible 1`] = ` + + +
    +
    +

    + Technical Support Document +

    +
    + Coming Soon! +
    +
    +
    + +
    +`; diff --git a/client/src/pages/index.test.tsx b/client/src/pages/tests/about.test.tsx similarity index 70% rename from client/src/pages/index.test.tsx rename to client/src/pages/tests/about.test.tsx index 6919daaf..599b0c24 100644 --- a/client/src/pages/index.test.tsx +++ b/client/src/pages/tests/about.test.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import {render} from '@testing-library/react'; -import {LocalizedComponent} from '../test/testHelpers'; -import Index from './index'; +import {LocalizedComponent} from '../../test/testHelpers'; +import AboutPage from '../about'; describe('rendering of the DatasetContainer', () => { const {asFragment} = render( - + , ); diff --git a/client/src/pages/contact.test.tsx b/client/src/pages/tests/contact.test.tsx similarity index 80% rename from client/src/pages/contact.test.tsx rename to client/src/pages/tests/contact.test.tsx index b952ed9e..913e9ab4 100644 --- a/client/src/pages/contact.test.tsx +++ b/client/src/pages/tests/contact.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import {render} from '@testing-library/react'; -import {LocalizedComponent} from '../test/testHelpers'; -import Contact from './contact'; +import {LocalizedComponent} from '../../test/testHelpers'; +import Contact from '../contact'; describe('rendering of the DatasetContainer', () => { const {asFragment} = render( diff --git a/client/src/pages/tests/downloads.test.tsx b/client/src/pages/tests/downloads.test.tsx new file mode 100644 index 00000000..37e60201 --- /dev/null +++ b/client/src/pages/tests/downloads.test.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import {render} from '@testing-library/react'; +import {LocalizedComponent} from '../../test/testHelpers'; +import DownloadsPage from '../downloads'; + +describe('rendering of the DatasetContainer', () => { + const {asFragment} = render( + + + , + ); + + it('checks if various text fields are visible', () => { + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/client/src/pages/tests/freqAskedQuestions.test.tsx b/client/src/pages/tests/freqAskedQuestions.test.tsx new file mode 100644 index 00000000..4c83184b --- /dev/null +++ b/client/src/pages/tests/freqAskedQuestions.test.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import {render} from '@testing-library/react'; +import {LocalizedComponent} from '../../test/testHelpers'; +import FAQPage from '../frequently-asked-questions'; + +describe('rendering of the DatasetContainer', () => { + const {asFragment} = render( + + + , + ); + + it('checks if various text fields are visible', () => { + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/client/src/pages/methodology.test.tsx b/client/src/pages/tests/methodology.test.tsx similarity index 80% rename from client/src/pages/methodology.test.tsx rename to client/src/pages/tests/methodology.test.tsx index eca356a7..331123d6 100644 --- a/client/src/pages/methodology.test.tsx +++ b/client/src/pages/tests/methodology.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import {render} from '@testing-library/react'; -import {LocalizedComponent} from '../test/testHelpers'; -import Meth from './methodology'; +import {LocalizedComponent} from '../../test/testHelpers'; +import Meth from '../methodology'; describe('rendering of the DatasetContainer', () => { const {asFragment} = render( diff --git a/client/src/pages/tests/publicEng.test.tsx b/client/src/pages/tests/publicEng.test.tsx new file mode 100644 index 00000000..7f4da05c --- /dev/null +++ b/client/src/pages/tests/publicEng.test.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import {render} from '@testing-library/react'; +import {LocalizedComponent} from '../../test/testHelpers'; +import PublicEngagementPage from '../public-engagement'; + +describe('rendering of the DatasetContainer', () => { + const {asFragment} = render( + + + , + ); + + it('checks if various text fields are visible', () => { + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/client/src/pages/tests/techSupportDoc.test.tsx b/client/src/pages/tests/techSupportDoc.test.tsx new file mode 100644 index 00000000..5f05be32 --- /dev/null +++ b/client/src/pages/tests/techSupportDoc.test.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import {render} from '@testing-library/react'; +import {LocalizedComponent} from '../../test/testHelpers'; +import TSDPage from '../technical-support-document'; + +describe('rendering of the DatasetContainer', () => { + const {asFragment} = render( + + + , + ); + + it('checks if various text fields are visible', () => { + expect(asFragment()).toMatchSnapshot(); + }); +}); diff --git a/client/src/styles/global.scss b/client/src/styles/global.scss index a2c34061..96b703e9 100644 --- a/client/src/styles/global.scss +++ b/client/src/styles/global.scss @@ -132,7 +132,7 @@ components include: flex-direction: column; } } - + .j40-mb5-mt3 { @include u-margin-bottom(5); @include u-margin-top(3);