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 <ul> around card as it fails a11y without it.

* Add updated tribal base map

- this removes the LAR suffix in MapBox studio

client/cypress/integration/LegacyTests/constants.js

@@ -7,4 +7,5 @@ export const PAGES_ENDPOINTS = {
   FAQS: '/frequently-asked-questions',
   PUBLIC_ENG: '/public-engagement',
   CONTACT: '/contact',
+  PREVIOUS_VERSIONS: '/previous-versions',
 };

client/src/components/DownloadButton/DownloadButton.module.scss

@@ -0,0 +1,49 @@
+@use '../../styles/design-system.scss' as *;
+
+@mixin buttonImageBase {
+    width: 21px;
+    margin-top: -3px;
+};
+
+@mixin downloadButtonBase {
+    height: 40px;
+    @include u-margin-top(3);
+    
+    .buttonContainer {
+        display: flex;
+
+        .buttonText {
+            @include u-margin-right(1);
+            }
+        
+        .buttonImageYellow {
+            @include buttonImageBase();
+            filter: invert(13%) sepia(76%) saturate(5142%) hue-rotate(192deg) brightness(80%) contrast(106%);
+        }
+
+        .buttonImageBlue {
+            @include buttonImageBase();
+            filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(137deg) brightness(103%) contrast(101%);
+        }
+    }
+}
+
+.downloadButtonLink{
+    display: flex;
+    text-decoration: none;
+    justify-content: center;
+
+    .buttonComponentYellow {
+        @include downloadButtonBase;
+        @include u-text("blue-70v");
+        @include u-bg("yellow-20v");
+        &:hover {
+            @include u-bg("yellow-20");
+            @include u-text("gray-90");
+            }
+    }
+    
+    .buttonComponent {
+       @include downloadButtonBase;
+    }
+}

client/src/components/DownloadButton/DownloadButton.module.scss.d.ts

@@ -0,0 +1,18 @@
+declare namespace DownloadButtonNamespace {
+    export interface IDownloadButtonScss {
+      downloadButtonLink: string;
+      buttonComponent: string;
+      buttonComponentYellow: string;
+      buttonContainer: string;
+      buttonText: string;
+      buttonImageBlue: string;
+      buttonImageYellow: string;
+    }
+  }
+
+declare const DownloadButtonScssModule: DownloadButtonNamespace.IDownloadButtonScss & {
+    /** WARNING: Only available when "css-loader" is used without "style-loader" or "mini-css-extract-plugin" */
+    locals: DownloadButtonNamespace.IDownloadButtonScss;
+  };
+
+  export = DownloadButtonScssModule;

client/src/components/DownloadButton/DownloadButton.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import {render} from '@testing-library/react';
+import {LocalizedComponent} from '../../test/testHelpers';
+import DownloadButton from './DownloadButton';
+
+describe('rendering of DownloadButton Component', () => {
+  const {asFragment} = render(
+      <LocalizedComponent>
+        <DownloadButton
+          downloadLink='https://google.com'
+          buttonText='Hello'
+          imageAltTagText='download button'
+        />
+      </LocalizedComponent>,
+  );
+  it('checks if component renders', () => {
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

client/src/components/DownloadButton/DownloadButton.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import {Button} from '@trussworks/react-uswds';
+
+import * as styles from './DownloadButton.module.scss';
+// @ts-ignore
+import fileDownloadIcon from '/node_modules/uswds/dist/img/usa-icons/file_download.svg';
+
+export interface IDownloadButtonProps {
+  downloadLink: string,
+  buttonText: string
+  imageAltTagText: string,
+  isYellow?: boolean
+}
+
+const DownloadButton = ({downloadLink, buttonText, imageAltTagText, isYellow = false}: IDownloadButtonProps) => {
+  return (
+    <a className={styles.downloadButtonLink} href={downloadLink} download>
+      <Button type="button" className={isYellow ? styles.buttonComponentYellow : styles.buttonComponent}>
+        <div className={styles.buttonContainer}>
+          <div className={styles.buttonText}>
+            {buttonText}
+          </div>
+          <img
+            className={isYellow ? styles.buttonImageYellow : styles.buttonImageBlue}
+            src={fileDownloadIcon}
+            alt={imageAltTagText}
+          />
+        </div>
+      </Button>
+    </a>
+  );
+};
+
+export default DownloadButton;

client/src/components/DownloadButton/__snapshots__/DownloadButton.test.tsx.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering of DownloadButton Component checks if component renders 1`] = `
+<DocumentFragment>
+  <a
+    download=""
+    href="https://google.com"
+  >
+    <button
+      class="usa-button"
+      data-testid="button"
+      type="button"
+    >
+      <div>
+        <div>
+          Hello
+        </div>
+        <img
+          alt="download button"
+          src="test-file-stub"
+        />
+      </div>
+    </button>
+  </a>
+</DocumentFragment>
+`;

client/src/components/DownloadButton/index.ts

@@ -0,0 +1,2 @@
+import DownloadButton from './DownloadButton';
+export default DownloadButton;

client/src/components/J40Header/J40Header.tsx

@@ -120,13 +120,13 @@ const J40Header = ({location}:IJ40Header) => {
       data-cy={'nav-link-downloads'}>
       {intl.formatMessage(COMMON_COPY.HEADER.DOWNLOADS)}
     </Link>,
-    // <Link
-    //   to={PAGES_ENDPOINTS.TSD}
-    //   key={'tsd'}
-    //   activeClassName="usa-current"
-    //   data-cy={'nav-link-technical-support-docs'}>
-    //   {intl.formatMessage(COMMON_COPY.HEADER.TSD)}
-    // </Link>,
+    <Link
+      to={PAGES_ENDPOINTS.PREVIOUS_VERSIONS}
+      key={'previous-versions'}
+      activeClassName="usa-current"
+      data-cy={'nav-link-previous-versions'}>
+      {intl.formatMessage(COMMON_COPY.HEADER.PREVIOUS_VERSIONS)}
+    </Link>,
   ];
 
   /**

client/src/components/J40Header/__snapshots__/J40Header.test.tsx.snap

@@ -270,6 +270,16 @@ exports[`rendering of the J40Header checks if component renders 1`] = `
                       Downloads
                     </a>
                   </li>
+                  <li
+                    class="usa-nav__submenu-item"
+                  >
+                    <a
+                      data-cy="nav-link-previous-versions"
+                      href="/en/previous-versions"
+                    >
+                      Previous versions
+                    </a>
+                  </li>
                 </ul>
               </li>
               <li

client/src/components/J40Map.tsx

@@ -303,7 +303,11 @@ const J40Map = ({location}: IJ40Interface) => {
     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.

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 = () => {
             </div>
           </Button>
         </a>
-        <a
-          className={styles.publicVideoLink}
-          href={`https://static-data-screeningtool.geoplatform.gov/data-pipeline/data/score/downloadable/technical-training-slides.pptx`}
-          download
-        >
-          <Button
-            type="button"
-            className={styles.youTubeBtn}
-          >
-            <div className={styles.buttonContainer}>
-              <div className={styles.buttonText}>
-                {intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.BUTTON2_TEXT)}
-              </div>
-              <img
-                className={styles.buttonImage}
-                src={fileDownloadIcon}
-                alt={intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.IMG_ALT_TEXT2)}
-              />
-            </div>
-          </Button>
-        </a>
+        <DownloadButton
+          downloadLink={`https://static-data-screeningtool.geoplatform.gov/data-pipeline/data/score/downloadable/technical-training-slides.pptx`}
+          buttonText={intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.BUTTON2_TEXT)}
+          imageAltTagText={intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.IMG_ALT_TEXT2)}
+          isYellow={true}
+        />
       </SummaryBoxContent>
     </SummaryBox>
   );

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);
   };
 };
 /**

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

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

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: <FormattedMessage
+    id={'previous.versions.page.title.text'}
+    defaultMessage={'Beta version'}
+    description={'Navigate to the previous version page. This is the Cards title text'}
+  />,
+  BODY: <FormattedMessage
+    id={'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'}
+    values={{
+      betaDate: <FormattedDate
+        value={METH_BETA_RELEASE_DATE}
+        year="numeric"
+        month="short"
+        day="numeric"
+      />,
+      releaseDate: <FormattedDate
+        value={METH_1_0_RELEASE_DATE}
+        year="numeric"
+        month="short"
+        day="numeric"
+      />,
+    }}
+  />,
+  BUTTON1: <FormattedMessage
+    id={'previous.versions.page.button1.text'}
+    defaultMessage={'Data & documentation'}
+    description={'Navigate to the previous version page. This is the Cards button1 text'}
+  />,
+  BUTTON1_ALT_TAG: <FormattedMessage
+    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: <FormattedMessage
+    id={'previous.versions.page.button2.text'}
+    defaultMessage={'Shapefile & codebook'}
+    description={'Navigate to the previous version page. This is the Cards button2 text'}
+  />,
+  BUTTON2_ALT_TAG: <FormattedMessage
+    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'}
+  />,
+};
+
+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',
+  },
+
+});

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"

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) => {
 
         <section className={'page-heading'}>
           <h1>{intl.formatMessage(DOWNLOADS_COPY.PAGE_INTRO.PAGE_HEADING1)}</h1>
+          <PublicEngageButton />
         </section>
 
         <Grid row gap className={'j40-mb5-mt3'}>
@@ -63,6 +65,7 @@ const DownloadsPage = ({location}: IDownloadsPageProps) => {
               endPoints={[
                 CONSTANTS.PAGES_ENDPOINTS.METHODOLOGY,
                 CONSTANTS.PAGES_ENDPOINTS.DOWNLOADS,
+                CONSTANTS.PAGES_ENDPOINTS.PREVIOUS_VERSIONS,
               ]}
             />
           </Grid> : ''}

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) => {
     <Layout location={location} title={intl.formatMessage(FAQS_COPY.PAGE_INTRO.PAGE_TILE)}>
 
       <J40MainGridContainer>
-        <h1>{intl.formatMessage(FAQS_COPY.PAGE_INTRO.PAGE_TILE)}</h1>
+
+        <section className={'page-heading'}>
+          <h1>{intl.formatMessage(FAQS_COPY.PAGE_INTRO.PAGE_TILE)}</h1>
+          <PublicEngageButton />
+        </section>
 
         <Grid row gap className={'j40-mb5-mt3'}>
 

client/src/pages/methodology.tsx

@@ -66,6 +66,7 @@ const IndexPage = ({location}: MethodPageProps) => {
               endPoints={[
                 PAGES_ENDPOINTS.METHODOLOGY,
                 PAGES_ENDPOINTS.DOWNLOADS,
+                PAGES_ENDPOINTS.PREVIOUS_VERSIONS,
               ]}
             />
           </Grid> : ''}

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 (
+    <Layout location={location} title={intl.formatMessage(PREV_VER_COPY.PAGE.TITLE)}>
+
+      <J40MainGridContainer>
+
+        <section className={'page-heading'}>
+          <h1 data-cy={'about-page-heading'}>{intl.formatMessage(PREV_VER_COPY.PAGE.TITLE)}</h1>
+          <PublicEngageButton />
+        </section>
+
+        <Grid row gap className={'j40-mb5-mt3'}>
+
+          {/* First column */}
+          <Grid col={12} tablet={{col: 8}}>
+            <section style={containerStyle}>
+              <ul>
+                <Card className={'previous-versions-container'} gridLayout={{tablet: {col: 6}}}>
+                  <CardHeader>
+                    <h2 className="usa-card__heading">{PREV_VER_COPY.CARD.TITLE}</h2>
+                  </CardHeader>
+                  <CardBody>
+                    <p> {PREV_VER_COPY.CARD.BODY}</p>
+                  </CardBody>
+                  <CardFooter>
+                    <DownloadButton
+                      downloadLink=''
+                      buttonText={intl.formatMessage(PREV_VER_COPY.BUTTON.TITLE1)}
+                      imageAltTagText={intl.formatMessage(PREV_VER_COPY.BUTTON.BUTTON1_ALT_TAG)}
+                    />
+                    <DownloadButton
+                      downloadLink=''
+                      buttonText={intl.formatMessage(PREV_VER_COPY.BUTTON.TITLE2)}
+                      imageAltTagText={intl.formatMessage(PREV_VER_COPY.BUTTON.BUTTON2_ALT_TAG)}
+                    />
+                  </CardFooter>
+                </Card>
+              </ul>
+            </section>
+          </Grid>
+
+          {/* Second column */}
+          <Grid col={12} tablet={{col: 1}}>
+            {/* Spacer column */}
+          </Grid>
+
+          {/* Third column */}
+          {width > CONSTANTS.USWDS_BREAKPOINTS.DESKTOP ?
+          <Grid col={12} tablet={{col: 3}}>
+            <SubPageNav
+              activeSubPageIndex={2}
+              endPoints={[
+                PAGES_ENDPOINTS.METHODOLOGY,
+                PAGES_ENDPOINTS.DOWNLOADS,
+                PAGES_ENDPOINTS.PREVIOUS_VERSIONS,
+              ]}
+            />
+          </Grid> : ''}
+        </Grid>
+
+      </J40MainGridContainer>
+    </Layout>);
+};
+
+export default PreviousVersions;

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
                     </a>
                   </li>
+                  <li
+                    class="usa-nav__submenu-item"
+                  >
+                    <a
+                      data-cy="nav-link-previous-versions"
+                      href="/en/previous-versions"
+                    >
+                      Previous versions
+                    </a>
+                  </li>
                 </ul>
               </li>
               <li

client/src/pages/tests/__snapshots__/contact.test.tsx.snap

@@ -270,6 +270,16 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                       Downloads
                     </a>
                   </li>
+                  <li
+                    class="usa-nav__submenu-item"
+                  >
+                    <a
+                      data-cy="nav-link-previous-versions"
+                      href="/en/previous-versions"
+                    >
+                      Previous versions
+                    </a>
+                  </li>
                 </ul>
               </li>
               <li

client/src/pages/tests/__snapshots__/downloads.test.tsx.snap

@@ -270,6 +270,16 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                       Downloads
                     </a>
                   </li>
+                  <li
+                    class="usa-nav__submenu-item"
+                  >
+                    <a
+                      data-cy="nav-link-previous-versions"
+                      href="/en/previous-versions"
+                    >
+                      Previous versions
+                    </a>
+                  </li>
                 </ul>
               </li>
               <li
@@ -377,6 +387,27 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
         <h1>
           Downloads
         </h1>
+        <div>
+          <a
+            href="/en/public-engagement"
+          >
+            <button
+              class="usa-button"
+              data-testid="button"
+              type="button"
+            >
+              <div>
+                <img
+                  alt="an icon that represents a calendar"
+                  src="test-file-stub"
+                />
+                <div>
+                  Public engagement
+                </div>
+              </div>
+            </button>
+          </a>
+        </div>
       </section>
       <div
         class="grid-row grid-gap j40-mb5-mt3"

client/src/pages/tests/__snapshots__/freqAskedQuestions.test.tsx.snap

@@ -270,6 +270,16 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                       Downloads
                     </a>
                   </li>
+                  <li
+                    class="usa-nav__submenu-item"
+                  >
+                    <a
+                      data-cy="nav-link-previous-versions"
+                      href="/en/previous-versions"
+                    >
+                      Previous versions
+                    </a>
+                  </li>
                 </ul>
               </li>
               <li
@@ -371,9 +381,34 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       class="grid-container-desktop-lg"
       data-testid="gridContainer"
     >
-      <h1>
-        Frequently asked questions
-      </h1>
+      <section
+        class="page-heading"
+      >
+        <h1>
+          Frequently asked questions
+        </h1>
+        <div>
+          <a
+            href="/en/public-engagement"
+          >
+            <button
+              class="usa-button"
+              data-testid="button"
+              type="button"
+            >
+              <div>
+                <img
+                  alt="an icon that represents a calendar"
+                  src="test-file-stub"
+                />
+                <div>
+                  Public engagement
+                </div>
+              </div>
+            </button>
+          </a>
+        </div>
+      </section>
       <div
         class="grid-row grid-gap j40-mb5-mt3"
         data-testid="grid"

client/src/pages/tests/__snapshots__/methodology.test.tsx.snap

@@ -270,6 +270,16 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                       Downloads
                     </a>
                   </li>
+                  <li
+                    class="usa-nav__submenu-item"
+                  >
+                    <a
+                      data-cy="nav-link-previous-versions"
+                      href="/en/previous-versions"
+                    >
+                      Previous versions
+                    </a>
+                  </li>
                 </ul>
               </li>
               <li

client/src/pages/tests/__snapshots__/publicEng.test.tsx.snap

@@ -270,6 +270,16 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                       Downloads
                     </a>
                   </li>
+                  <li
+                    class="usa-nav__submenu-item"
+                  >
+                    <a
+                      data-cy="nav-link-previous-versions"
+                      href="/en/previous-versions"
+                    >
+                      Previous versions
+                    </a>
+                  </li>
                 </ul>
               </li>
               <li

client/src/pages/tests/__snapshots__/techSupportDoc.test.tsx.snap

@@ -270,6 +270,16 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
                       Downloads
                     </a>
                   </li>
+                  <li
+                    class="usa-nav__submenu-item"
+                  >
+                    <a
+                      data-cy="nav-link-previous-versions"
+                      href="/en/previous-versions"
+                    >
+                      Previous versions
+                    </a>
+                  </li>
                 </ul>
               </li>
               <li

client/src/styles/global.scss

@@ -32,6 +32,7 @@ There are 3 things that should be included in this file:
   - PUBLIC EVENT STYLES
   - ABOUT CARD STYLES
   - SUMMARY BOX STYLES
+  - PREVIOUS VERSIONS STYLES
 */
 
 
@@ -507,3 +508,17 @@ button.usa-accordion__button[aria-expanded=true]:has(div[class*="disCategoryCont
 .usa-summary-box__heading {
   @include u-margin-bottom(2);
 }
+
+/* 
+******************************
+*      PREVIOUS VERSIONS STYLES
+****************************** 
+*/
+
+.previous-versions-container {
+  list-style: none;
+}
+
+.previous-versions-container .usa-card__header, .usa-card__heading, .usa-card__body, .usa-card__footer {
+  font-family: "Source Sans Pro Web", "Helvetica Neue", "Helvetica", "Roboto", "Arial", "sans-serif" !important;
+}