From b321b267fc71b8570e7d5b850d3b325e59f53de2 Mon Sep 17 00:00:00 2001 From: Vim <86254807+vim-usds@users.noreply.github.com> Date: Fri, 14 Oct 2022 16:23:42 -0700 Subject: [PATCH] Previous versions page narwal (#2018) * Add Previous Version page - Create a new DownloadButton component - Add PreviousVersion link to main nav - Extract out download button from PublicVideo component - Update SidePageNav to render PrevVersion - Add Beta start date - Create previous-version page - Add public eng to all pages - update snapshots * Update cypress test to test prev version page - Add
  • { setGeolocationInProgress(true); }; - const mapBoxBaseLayer = `mapbox://styles/justice40/cl2qimpi2000014qeb1egpox8`; + const mapBoxBaseLayer = { + streetsWithTribal: `mapbox://styles/justice40/cl2qimpi2000014qeb1egpox8`, + streetsWithUpdatedTribal: `mapbox://styles/justice40/cl98rlidr002c14obpsvz6zzs`, + }; + return ( <> @@ -343,7 +347,8 @@ const J40Map = ({location}: IJ40Interface) => { // ****** Map state props: ****** // http://visgl.github.io/react-map-gl/docs/api-reference/interactive-map#map-state {...viewport} - mapStyle={process.env.MAPBOX_STYLES_READ_TOKEN ? mapBoxBaseLayer : getOSBaseMap()} + mapStyle={process.env.MAPBOX_STYLES_READ_TOKEN ? + mapBoxBaseLayer.streetsWithUpdatedTribal : getOSBaseMap()} width="100%" // Ajusting this height with a conditional statement will not render the map on staging. // The reason for this issue is unknown. Consider styling the parent container via SASS. diff --git a/client/src/components/PublicVideoBox/PublicVideoBox.tsx b/client/src/components/PublicVideoBox/PublicVideoBox.tsx index a0f82bf8..212b83e4 100644 --- a/client/src/components/PublicVideoBox/PublicVideoBox.tsx +++ b/client/src/components/PublicVideoBox/PublicVideoBox.tsx @@ -2,13 +2,14 @@ import React from 'react'; import {Button, SummaryBox, SummaryBoxContent, SummaryBoxHeading} from '@trussworks/react-uswds'; import {useIntl} from 'gatsby-plugin-intl'; -import * as PUBLIC_COPY from '../../data/copy/publicEngage'; +import DownloadButton from '../DownloadButton'; + import * as styles from './PublicVideoBox.module.scss'; +import * as PUBLIC_COPY from '../../data/copy/publicEngage'; // @ts-ignore import launchIcon from '/node_modules/uswds/dist/img/usa-icons/launch.svg'; -// @ts-ignore -import fileDownloadIcon from '/node_modules/uswds/dist/img/usa-icons/file_download.svg'; + const PublicVideoBox = () => { const intl = useIntl(); @@ -45,27 +46,12 @@ const PublicVideoBox = () => { - - - + ); diff --git a/client/src/components/SubPageNav/SubPageNav.tsx b/client/src/components/SubPageNav/SubPageNav.tsx index c3625d03..97806d56 100644 --- a/client/src/components/SubPageNav/SubPageNav.tsx +++ b/client/src/components/SubPageNav/SubPageNav.tsx @@ -24,21 +24,23 @@ const getPageConstant = (endPoint:string) => { const intl = useIntl(); if (endPoint === PAGES_ENDPOINTS.EXPLORE) { - return intl.formatMessage(COMMON_COPY.HEADER['EXPLORE']); + return intl.formatMessage(COMMON_COPY.HEADER.EXPLORE); } else if (endPoint === PAGES_ENDPOINTS.METHODOLOGY) { - return intl.formatMessage(COMMON_COPY.HEADER['METHODOLOGY']); + return intl.formatMessage(COMMON_COPY.HEADER.METHODOLOGY); } else if (endPoint == PAGES_ENDPOINTS.DOWNLOADS) { - return intl.formatMessage(COMMON_COPY.HEADER['DOWNLOADS']); + return intl.formatMessage(COMMON_COPY.HEADER.DOWNLOADS); } else if (endPoint == PAGES_ENDPOINTS.TSD) { - return intl.formatMessage(COMMON_COPY.HEADER['TSD']); + return intl.formatMessage(COMMON_COPY.HEADER.TSD); } else if (endPoint == PAGES_ENDPOINTS.ABOUT) { - return intl.formatMessage(COMMON_COPY.HEADER['ABOUT']); + return intl.formatMessage(COMMON_COPY.HEADER.ABOUT); } else if (endPoint === PAGES_ENDPOINTS.FAQS) { - return intl.formatMessage(COMMON_COPY.HEADER['FAQS']); + return intl.formatMessage(COMMON_COPY.HEADER.FAQS); } else if (endPoint == PAGES_ENDPOINTS.PUBLIC_ENG) { - return intl.formatMessage(COMMON_COPY.HEADER['PUBLIC_ENG']); + return intl.formatMessage(COMMON_COPY.HEADER.PUBLIC_ENG); } else if (endPoint == PAGES_ENDPOINTS.CONTACT) { - return intl.formatMessage(COMMON_COPY.HEADER['CONTACT']); + return intl.formatMessage(COMMON_COPY.HEADER.CONTACT); + } else if (endPoint == PAGES_ENDPOINTS.PREVIOUS_VERSIONS) { + return intl.formatMessage(COMMON_COPY.HEADER.PREVIOUS_VERSIONS); }; }; /** diff --git a/client/src/data/constants.tsx b/client/src/data/constants.tsx index 34bb9899..b4ef875e 100644 --- a/client/src/data/constants.tsx +++ b/client/src/data/constants.tsx @@ -14,6 +14,7 @@ export const PAGES_ENDPOINTS = { FAQS: '/frequently-asked-questions', PUBLIC_ENG: '/public-engagement', CONTACT: '/contact', + PREVIOUS_VERSIONS: '/previous-versions', }; // Performance markers diff --git a/client/src/data/copy/common.tsx b/client/src/data/copy/common.tsx index 6eba4a59..05ee9fb6 100644 --- a/client/src/data/copy/common.tsx +++ b/client/src/data/copy/common.tsx @@ -28,7 +28,8 @@ export const linkFn = (to:string | IDefineMessage, isInternal:boolean, isOpenNew export const FEEDBACK_EMAIL = 'Screeningtool-Support@omb.eop.gov'; -export const METH_1_0_RELEASE_DATE = new Date(2022, 9, 25, 11, 59, 59); // Oct 25 +export const METH_1_0_RELEASE_DATE = new Date(2022, 9, 25, 11, 59, 59); // Oct 25 2022 +export const METH_BETA_RELEASE_DATE = new Date(2022, 1, 18, 11, 59, 59); // Feb 18 2022 // Beta Banner @@ -147,6 +148,11 @@ export const HEADER = defineMessages({ defaultMessage: 'Technical Support Document', description: 'Navigate to the about page. This is Header navigate item to the technical support document page', }, + PREVIOUS_VERSIONS: { + id: 'common.pages.header.tsd', + defaultMessage: 'Previous versions', + description: 'Navigate to the about page. This is Header navigate item to the technical support document page', + }, }); // Footer diff --git a/client/src/data/copy/previousVer.tsx b/client/src/data/copy/previousVer.tsx new file mode 100644 index 00000000..b85b7756 --- /dev/null +++ b/client/src/data/copy/previousVer.tsx @@ -0,0 +1,83 @@ +import React from 'react'; +import {FormattedDate, FormattedMessage, defineMessages} from 'gatsby-plugin-intl'; +import {METH_1_0_RELEASE_DATE, METH_BETA_RELEASE_DATE} from './common'; + +export const PAGE = defineMessages({ + TITLE: { + id: 'previous.versions.page.title.text', + defaultMessage: 'Previous versions', + description: 'Navigate to the previous version page. This is the page title text', + }, +}); + +export const CARD = { + TITLE: , + BODY: , + releaseDate: , + }} + />, + BUTTON1: , + BUTTON1_ALT_TAG: , + BUTTON2: , + BUTTON2_ALT_TAG: , +}; + +export const BUTTON = defineMessages({ + TITLE1: { + id: 'previous.versions.page.button1.text', + defaultMessage: 'Data & documentation', + description: 'Navigate to the previous version page. This is the Cards button1 text', + }, + TITLE2: { + id: 'previous.versions.page.button2.text', + defaultMessage: 'Shapefile & codebook', + description: 'Navigate to the previous version page. This is the Cards button2 text', + }, + BUTTON1_ALT_TAG: { + id: 'previous.versions.page.button1.alt.tag.text', + defaultMessage: 'a button that allows to download the data and documentation to the tool', + description: 'Navigate to the previous version page. This is the Cards button1.alt.tag text', + }, + BUTTON2_ALT_TAG: { + id: 'previous.versions.page.button2.alt.tag.text', + defaultMessage: 'a button that allows to download the shapefile and codebook to the tool', + description: 'Navigate to the previous version page. This is the Cards button2.alt.tag text', + }, + +}); diff --git a/client/src/intl/en.json b/client/src/intl/en.json index 241e25c7..bccd49d0 100644 --- a/client/src/intl/en.json +++ b/client/src/intl/en.json @@ -228,7 +228,7 @@ "description": "Navigate to the about page. This is Title in nav header" }, "common.pages.header.tsd": { - "defaultMessage": "Technical Support Document", + "defaultMessage": "Previous versions", "description": "Navigate to the about page. This is Header navigate item to the technical support document page" }, "common.pages.tsd.url": { @@ -2131,6 +2131,30 @@ "defaultMessage": "Page not found", "description": "page not found title text" }, + "previous.versions.page.body.text": { + "defaultMessage": "The beta version of the methodology and data was used during the public beta period to get feedback on the tool from {betaDate} - {releaseDate}", + "description": "Navigate to the previous version page. This is the Cards body text" + }, + "previous.versions.page.button1.alt.tag.text": { + "defaultMessage": "a button that allows to download the data and documentation to the tool", + "description": "Navigate to the previous version page. This is the Cards button1.alt.tag text" + }, + "previous.versions.page.button1.text": { + "defaultMessage": "Data & documentation", + "description": "Navigate to the previous version page. This is the Cards button1 text" + }, + "previous.versions.page.button2.alt.tag.text": { + "defaultMessage": "a button that allows to download the shapefile and codebook to the tool", + "description": "Navigate to the previous version page. This is the Cards button2.alt.tag text" + }, + "previous.versions.page.button2.text": { + "defaultMessage": "Shapefile & codebook", + "description": "Navigate to the previous version page. This is the Cards button2 text" + }, + "previous.versions.page.title.text": { + "defaultMessage": "Beta version", + "description": "Navigate to the previous version page. This is the Cards title text" + }, "public.eng.page.button.img.alt.tag": { "defaultMessage": "an icon that represents a calendar", "description": "Navigate to the public engagement page, this will be the public engagement button icon alt tag text" diff --git a/client/src/pages/downloads.tsx b/client/src/pages/downloads.tsx index f93a00c0..9182f80e 100644 --- a/client/src/pages/downloads.tsx +++ b/client/src/pages/downloads.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; -import {Grid} from '@trussworks/react-uswds'; import {useIntl} from 'gatsby-plugin-intl'; +import {Grid} from '@trussworks/react-uswds'; +import {useWindowSize} from 'react-use'; import J40MainGridContainer from '../components/J40MainGridContainer'; import Layout from '../components/layout'; +import PublicEngageButton from '../components/PublicEngageButton'; import SubPageNav from '../components/SubPageNav'; -import {useWindowSize} from 'react-use'; import * as DOWNLOADS_COPY from '../data/copy/downloads'; import * as CONSTANTS from '../data/constants'; @@ -24,6 +25,7 @@ const DownloadsPage = ({location}: IDownloadsPageProps) => {

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

    +
    @@ -63,6 +65,7 @@ const DownloadsPage = ({location}: IDownloadsPageProps) => { endPoints={[ CONSTANTS.PAGES_ENDPOINTS.METHODOLOGY, CONSTANTS.PAGES_ENDPOINTS.DOWNLOADS, + CONSTANTS.PAGES_ENDPOINTS.PREVIOUS_VERSIONS, ]} /> : ''} diff --git a/client/src/pages/frequently-asked-questions.tsx b/client/src/pages/frequently-asked-questions.tsx index 0741727d..07fd18de 100644 --- a/client/src/pages/frequently-asked-questions.tsx +++ b/client/src/pages/frequently-asked-questions.tsx @@ -6,6 +6,7 @@ import {useWindowSize} from 'react-use'; import J40MainGridContainer from '../components/J40MainGridContainer'; import Layout from '../components/layout'; +import PublicEngageButton from '../components/PublicEngageButton'; import SubPageNav from '../components/SubPageNav'; import * as CONSTANTS from '../data/constants'; @@ -223,7 +224,11 @@ const FAQPage = ({location}: IFAQPageProps) => { -

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

    + +
    +

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

    + +
    diff --git a/client/src/pages/methodology.tsx b/client/src/pages/methodology.tsx index b9970f22..697f6101 100644 --- a/client/src/pages/methodology.tsx +++ b/client/src/pages/methodology.tsx @@ -66,6 +66,7 @@ const IndexPage = ({location}: MethodPageProps) => { endPoints={[ PAGES_ENDPOINTS.METHODOLOGY, PAGES_ENDPOINTS.DOWNLOADS, + PAGES_ENDPOINTS.PREVIOUS_VERSIONS, ]} /> : ''} diff --git a/client/src/pages/previous-versions.tsx b/client/src/pages/previous-versions.tsx new file mode 100644 index 00000000..9dca3be1 --- /dev/null +++ b/client/src/pages/previous-versions.tsx @@ -0,0 +1,92 @@ +import * as React from 'react'; +import {useIntl} from 'gatsby-plugin-intl'; +import {useWindowSize} from 'react-use'; + +import {Card, CardBody, CardFooter, CardHeader, Grid} from '@trussworks/react-uswds'; +import DownloadButton from '../components/DownloadButton'; +import J40MainGridContainer from '../components/J40MainGridContainer'; +import Layout from '../components/layout'; +import PublicEngageButton from '../components/PublicEngageButton'; +import SubPageNav from '../components/SubPageNav'; + +import * as PREV_VER_COPY from '../data/copy/previousVer'; +import * as CONSTANTS from '../data/constants'; +import {PAGES_ENDPOINTS} from '../data/constants'; + +interface IPreviousVersionsProps { + location: Location; +} + +const containerStyle = { + marginTop: `1.2rem`, +}; + +// markup +const PreviousVersions = ({location}: IPreviousVersionsProps) => { + const intl = useIntl(); + const {width} = useWindowSize(); + + return ( + + + + +
    +

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

    + +
    + + + + {/* First column */} + +
    +
      + + +

      {PREV_VER_COPY.CARD.TITLE}

      +       + +

      {PREV_VER_COPY.CARD.BODY}

      +       + + + + +       +
    +
    +     + + {/* Second column */} + + {/* Spacer column */} + + + {/* Third column */} + {width > CONSTANTS.USWDS_BREAKPOINTS.DESKTOP ? + + + : ''} +     + +     +     ); +}; + +export default PreviousVersions; diff --git a/client/src/pages/tests/__snapshots__/about.test.tsx.snap b/client/src/pages/tests/__snapshots__/about.test.tsx.snap index eaf9720a..ee130de8 100644 --- a/client/src/pages/tests/__snapshots__/about.test.tsx.snap +++ b/client/src/pages/tests/__snapshots__/about.test.tsx.snap @@ -270,6 +270,16 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis Downloads
    • +
  • + + Previous versions + +
    • +
  • + + Previous versions + +
    • +
  • + + Previous versions + +
  • Downloads +
    + + + +
    • +
  • + + Previous versions + +
  • -

    - Frequently asked questions -

    +
    +

    + Frequently asked questions +

    +
    + + + +
    +
    • +
  • + + Previous versions + +
    • +
  • + + Previous versions + +
    • +
  • + + Previous versions + +