From 160cac1002e20c3a1c78c0b86f3c94d44b1749a5 Mon Sep 17 00:00:00 2001 From: Vim <86254807+vim-usds@users.noreply.github.com> Date: Thu, 9 Feb 2023 11:32:59 -0800 Subject: [PATCH] Replace mail with launch icon, replace public eng btn with data source btn, copy update on Census, add census disclaimer text (#2161) * update UI - closes #2159 * replace pub eng btn with data source btn - closes #2158 * update to US Census - closes #2157 * add census disclaimer - closes #2156 --- .../src/components/AreaDetail/AreaDetail.tsx | 4 +- .../__snapshots__/datasetCard.test.tsx.snap | 2 +- .../DatasetContainer/dsContainer.module.scss | 4 ++ .../dsContainer.module.scss.d.ts | 1 + .../src/components/DatasetContainer/index.tsx | 5 ++- .../datasetContainer.test.tsx.snap | 7 ++- .../DatasetsButton/DatasetsButton.module.scss | 1 - client/src/data/copy/methodology.tsx | 9 +++- client/src/intl/en.json | 4 ++ client/src/pages/about.tsx | 4 +- client/src/pages/contact.tsx | 4 +- client/src/pages/downloads.tsx | 4 +- .../src/pages/frequently-asked-questions.tsx | 4 +- client/src/pages/index.tsx | 4 +- client/src/pages/methodology.tsx | 4 +- client/src/pages/previous-versions.tsx | 4 +- .../tests/__snapshots__/about.test.tsx.snap | 36 +++++++--------- .../tests/__snapshots__/contact.test.tsx.snap | 36 +++++++--------- .../__snapshots__/downloads.test.tsx.snap | 36 +++++++--------- .../freqAskedQuestions.test.tsx.snap | 36 +++++++--------- .../__snapshots__/methodology.test.tsx.snap | 43 ++++++++++--------- client/src/styles/global.scss | 1 + 22 files changed, 130 insertions(+), 123 deletions(-) diff --git a/client/src/components/AreaDetail/AreaDetail.tsx b/client/src/components/AreaDetail/AreaDetail.tsx index 3d4304d6..82321048 100644 --- a/client/src/components/AreaDetail/AreaDetail.tsx +++ b/client/src/components/AreaDetail/AreaDetail.tsx @@ -20,7 +20,7 @@ import * as constants from '../../data/constants'; import * as EXPLORE_COPY from '../../data/copy/explore'; // @ts-ignore -import mailIcon from '/node_modules/uswds/dist/img/usa-icons/mail_outline.svg'; +import launchIcon from '/node_modules/uswds/dist/img/usa-icons/launch.svg'; interface IAreaDetailProps { properties: constants.J40Properties, @@ -886,7 +886,7 @@ const AreaDetail = ({properties}: IAreaDetailProps) => { {intl.formatMessage(EXPLORE_COPY.COMMUNITY.SEND_FEEDBACK.IMG_ICON.ALT_TAG)} diff --git a/client/src/components/DatasetCard/tests/__snapshots__/datasetCard.test.tsx.snap b/client/src/components/DatasetCard/tests/__snapshots__/datasetCard.test.tsx.snap index b4c915f4..fb738d35 100644 --- a/client/src/components/DatasetCard/tests/__snapshots__/datasetCard.test.tsx.snap +++ b/client/src/components/DatasetCard/tests/__snapshots__/datasetCard.test.tsx.snap @@ -45,7 +45,7 @@ exports[`rendering of indicator dataset card checks if component renders 1`] = ` Responsible party: - Census + U.S. Census
  • diff --git a/client/src/components/DatasetContainer/dsContainer.module.scss b/client/src/components/DatasetContainer/dsContainer.module.scss index 003a4f90..4633d8bd 100644 --- a/client/src/components/DatasetContainer/dsContainer.module.scss +++ b/client/src/components/DatasetContainer/dsContainer.module.scss @@ -11,4 +11,8 @@ display: flex; justify-content: flex-end; @include u-margin-bottom(4); +} + +.alignItemsCenter { + align-items: center; } \ No newline at end of file diff --git a/client/src/components/DatasetContainer/dsContainer.module.scss.d.ts b/client/src/components/DatasetContainer/dsContainer.module.scss.d.ts index 37156d1a..b1cacda7 100644 --- a/client/src/components/DatasetContainer/dsContainer.module.scss.d.ts +++ b/client/src/components/DatasetContainer/dsContainer.module.scss.d.ts @@ -2,6 +2,7 @@ declare namespace DatasetContainerScssNamespace { export interface IDatasetContainerScss { datasetCardsContainer: string; returnToTop: string; + alignItemsCenter: string; } } diff --git a/client/src/components/DatasetContainer/index.tsx b/client/src/components/DatasetContainer/index.tsx index dcab0794..f4c4bd78 100644 --- a/client/src/components/DatasetContainer/index.tsx +++ b/client/src/components/DatasetContainer/index.tsx @@ -27,14 +27,15 @@ const DatasetContainer = () => { - +

    {intl.formatMessage(METHODOLOGY_COPY.DATASETS.INFO)}

    +

    {intl.formatMessage(METHODOLOGY_COPY.DATASETS.CENSUS_DISCLAIMER)}

     - +     diff --git a/client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap b/client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap index aa7bc368..1d8b7c39 100644 --- a/client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap +++ b/client/src/components/DatasetContainer/tests/__snapshots__/datasetContainer.test.tsx.snap @@ -35,6 +35,11 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis The tool's datasets are public and consistent nationwide. They come from different sources and are high quality. The Council on Environmental Quality (CEQ) chose them based on relevance, availability, and quality. They identify climate, environmental, and other burdens on communities. +

    +

    + + This product uses the Census Bureau Data API but is not endorsed or certified by the Census Bureau. +

    Responsible party: - Census + U.S. Census
  • diff --git a/client/src/components/DatasetsButton/DatasetsButton.module.scss b/client/src/components/DatasetsButton/DatasetsButton.module.scss index b2cdf9ab..26e1c8a1 100644 --- a/client/src/components/DatasetsButton/DatasetsButton.module.scss +++ b/client/src/components/DatasetsButton/DatasetsButton.module.scss @@ -1,7 +1,6 @@ @use '../../styles/design-system.scss' as *; .datasetsButtonContainer{ - @include u-margin-top(3); @include u-height(6); z-index: 2; diff --git a/client/src/data/copy/methodology.tsx b/client/src/data/copy/methodology.tsx index d01112a4..7053b84d 100644 --- a/client/src/data/copy/methodology.tsx +++ b/client/src/data/copy/methodology.tsx @@ -403,6 +403,13 @@ export const DATASETS = defineMessages({ `, description: 'Navigate to the Methodology page. This is the description of the dataset section', }, + CENSUS_DISCLAIMER: { + id: 'methodology.page.datasetContainer.census.disclaimer', + defaultMessage: ` + This product uses the Census Bureau Data API but is not endorsed or certified by the Census Bureau. + `, + description: 'Navigate to the Methodology page. This is the disclaimer when using census data', + }, ADDITIONAL_HEADING: { id: 'methodology.page.datasetContainer.additional.heading', defaultMessage: 'Additional Indicators', @@ -857,7 +864,7 @@ export const INDICATORS = [ }} />, usedIn: CATEGORIES.ALL, - responsibleParty: RESPONSIBLE_PARTIES.CEN, + responsibleParty: RESPONSIBLE_PARTIES.CENSUS, sources: [ { source: SOURCE_LINKS.CENSUS_ACS_15_19, diff --git a/client/src/intl/en.json b/client/src/intl/en.json index 926bafa1..9d921cbf 100644 --- a/client/src/intl/en.json +++ b/client/src/intl/en.json @@ -2395,6 +2395,10 @@ "defaultMessage": "Share data sources with CEQ", "description": "Navigate to the Methodology page. This is the section heading of which datasets are used in cumulative score with a button labeled: Share data sources with CEQ" }, + "methodology.page.datasetContainer.census.disclaimer": { + "defaultMessage": "This product uses the Census Bureau Data API but is not endorsed or certified by the Census Bureau.", + "description": "Navigate to the Methodology page. This is the disclaimer when using census data" + }, "methodology.page.datasetContainer.heading": { "defaultMessage": "Datasets used in beta methodology", "description": "Navigate to the Methodology page. This is the section heading of which datasets are used in cumulative score" diff --git a/client/src/pages/about.tsx b/client/src/pages/about.tsx index 7978e0bf..57651f4e 100644 --- a/client/src/pages/about.tsx +++ b/client/src/pages/about.tsx @@ -8,7 +8,7 @@ import {Grid} from '@trussworks/react-uswds'; import HowYouCanHelp from '../components/HowYouCanHelp'; import J40MainGridContainer from '../components/J40MainGridContainer'; import Layout from '../components/layout'; -import PublicEngageButton from '../components/PublicEngageButton'; +import DatasetsButton from '../components/DatasetsButton'; import SubPageNav from '../components/SubPageNav'; import * as ABOUT_COPY from '../data/copy/about'; @@ -43,7 +43,7 @@ const AboutPage = ({location}: IAboutPageProps) => {

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

    - +
    diff --git a/client/src/pages/contact.tsx b/client/src/pages/contact.tsx index f4221d51..657cf189 100644 --- a/client/src/pages/contact.tsx +++ b/client/src/pages/contact.tsx @@ -5,7 +5,7 @@ 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 DatasetsButton from '../components/DatasetsButton'; import * as CONTACT_COPY from '../data/copy/contact'; import {FEEDBACK_EMAIL} from '../data/copy/common'; @@ -24,7 +24,7 @@ const ContactPage = ({location}: IContactPageProps) => {

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

    - +
    diff --git a/client/src/pages/downloads.tsx b/client/src/pages/downloads.tsx index 4db85fa6..df90fa53 100644 --- a/client/src/pages/downloads.tsx +++ b/client/src/pages/downloads.tsx @@ -5,7 +5,7 @@ import {useWindowSize} from 'react-use'; import J40MainGridContainer from '../components/J40MainGridContainer'; import Layout from '../components/layout'; -import PublicEngageButton from '../components/PublicEngageButton'; +import DatasetsButton from '../components/DatasetsButton'; import ReleaseUpdate from '../components/ReleaseUpdate'; import SubPageNav from '../components/SubPageNav'; @@ -26,7 +26,7 @@ const DownloadsPage = ({location}: IDownloadsPageProps) => {

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

    - +
    diff --git a/client/src/pages/frequently-asked-questions.tsx b/client/src/pages/frequently-asked-questions.tsx index 91b2e40e..6e64550f 100644 --- a/client/src/pages/frequently-asked-questions.tsx +++ b/client/src/pages/frequently-asked-questions.tsx @@ -6,7 +6,7 @@ import {useWindowSize} from 'react-use'; import J40MainGridContainer from '../components/J40MainGridContainer'; import Layout from '../components/layout'; -import PublicEngageButton from '../components/PublicEngageButton'; +import DatasetsButton from '../components/DatasetsButton'; import SubPageNav from '../components/SubPageNav'; import {USWDS_BREAKPOINTS} from '../data/constants'; @@ -237,7 +237,7 @@ const FAQPage = ({location}: IFAQPageProps) => {

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

    - +
    diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx index b8d034e7..c97e87ee 100644 --- a/client/src/pages/index.tsx +++ b/client/src/pages/index.tsx @@ -6,7 +6,7 @@ import ExploreDataBox from '../components/ExploreDataBox'; import J40Map from '../components/J40Map'; import J40MainGridContainer from '../components/J40MainGridContainer'; import Layout from '../components/layout'; -import PublicEngageButton from '../components/PublicEngageButton'; +import DatasetsButton from '../components/DatasetsButton'; import * as EXPLORE_COPY from '../data/copy/explore'; @@ -26,7 +26,7 @@ const ExporeToolPage = ({location}: IMapPageProps) => {

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

    - +
    diff --git a/client/src/pages/methodology.tsx b/client/src/pages/methodology.tsx index 8b8ea32a..e1d37f38 100644 --- a/client/src/pages/methodology.tsx +++ b/client/src/pages/methodology.tsx @@ -8,7 +8,7 @@ import DatasetContainer from '../components/DatasetContainer'; import J40MainGridContainer from '../components/J40MainGridContainer'; import Layout from '../components/layout'; import SubPageNav from '../components/SubPageNav'; -import PublicEngageButton from '../components/PublicEngageButton'; +import DatasetsButton from '../components/DatasetsButton'; import {USWDS_BREAKPOINTS} from '../data/constants'; import * as METHODOLOGY_COPY from '../data/copy/methodology'; @@ -29,7 +29,7 @@ const IndexPage = ({location}: MethodPageProps) => {

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

    - +
    diff --git a/client/src/pages/previous-versions.tsx b/client/src/pages/previous-versions.tsx index 10bae9b7..89d7144e 100644 --- a/client/src/pages/previous-versions.tsx +++ b/client/src/pages/previous-versions.tsx @@ -6,7 +6,7 @@ import {Card, CardBody, CardFooter, CardHeader, Grid} from '@trussworks/react-us import DownloadButton from '../components/DownloadButton'; import J40MainGridContainer from '../components/J40MainGridContainer'; import Layout from '../components/layout'; -import PublicEngageButton from '../components/PublicEngageButton'; +import DatasetsButton from '../components/DatasetsButton'; import SubPageNav from '../components/SubPageNav'; import * as PREV_VER_COPY from '../data/copy/previousVer'; @@ -33,7 +33,7 @@ const PreviousVersions = ({location}: IPreviousVersionsProps) => {

    {intl.formatMessage(PREV_VER_COPY.PAGE.TITLE)}

    - +
    diff --git a/client/src/pages/tests/__snapshots__/about.test.tsx.snap b/client/src/pages/tests/__snapshots__/about.test.tsx.snap index 28c9da7f..8813dfec 100644 --- a/client/src/pages/tests/__snapshots__/about.test.tsx.snap +++ b/client/src/pages/tests/__snapshots__/about.test.tsx.snap @@ -392,27 +392,23 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis > About - + Share data sources with CEQ + launch icon + +
    Contact - + Share data sources with CEQ + launch icon + +
    Downloads - + Share data sources with CEQ + launch icon + +
    Frequently asked questions - + Share data sources with CEQ + launch icon + +
    Methodology - + Share data sources with CEQ + launch icon + +
    +

    + + This product uses the Census Bureau Data API but is not endorsed or certified by the Census Bureau. +

    Responsible party: - Census + U.S. Census
  • diff --git a/client/src/styles/global.scss b/client/src/styles/global.scss index 4d942b8b..335ac24c 100644 --- a/client/src/styles/global.scss +++ b/client/src/styles/global.scss @@ -166,6 +166,7 @@ li.usa-nav__primary-item a:hover::after{ .page-heading { display: flex; justify-content: space-between; + align-items: flex-end; @include at-media-max("tablet"){ flex-direction: column;