Public Engagement Page (#1372)

* Add public engagement page

- modifies sitemap config
- creates PublicEvent component
- adds SVGs for dates
- all copy is in intl

* Add Public Engagement button to each page

- create new PublicEng component
- add to each page
- update snapshots
- modify CEJST and Meth page to give button more space

* Make mobile compliant and fix DOM validation error

- transform each <p>'s descendent into a <CollectionDescription>
- fix a mobile rendering issue with <Collection> library
- format registration links so they render on mobile
- update snapshots

* Add spacing to descriptions and fix links

* Add Gherkin tests for testing links

- all zoom links should be functional
- ensure all legacy tests, test the new page
- add data-cy tag for cypress
- update snapshots

* Refactor to pass accessibility on all pages

- update snapshots

* Correct registration links

* Make registration links into buttons

* Make new tag bold

* Update copy based on feedback from Corey

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

@@ -276,9 +276,34 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       class="grid-container-desktop-lg"
       data-testid="gridContainer"
     >
-      <h1>
-        Contact
-      </h1>
+      <section
+        class="page-heading"
+      >
+        <h1>
+          Contact
+        </h1>
+        <div>
+          <div>
+            <span
+              class="usa-tag"
+              data-testid="tag"
+            >
+              NEW
+            </span>
+          </div>
+          <a
+            href="/public-engagement"
+          >
+            <button
+              class="usa-button usa-button--icon"
+              data-testid="button"
+              type="button"
+            >
+              Public Engagement
+            </button>
+          </a>
+        </div>
+      </section>
       <div
         class="grid-row"
         data-testid="grid"

client/src/pages/__snapshots__/index.test.tsx.snap

@@ -276,11 +276,36 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       class="grid-container-desktop-lg"
       data-testid="gridContainer"
     >
-      <h1
-        data-cy="about-page-heading"
+      <section
+        class="page-heading"
       >
-        About
-      </h1>
+        <h1
+          data-cy="about-page-heading"
+        >
+          About
+        </h1>
+        <div>
+          <div>
+            <span
+              class="usa-tag"
+              data-testid="tag"
+            >
+              NEW
+            </span>
+          </div>
+          <a
+            href="/public-engagement"
+          >
+            <button
+              class="usa-button usa-button--icon"
+              data-testid="button"
+              type="button"
+            >
+              Public Engagement
+            </button>
+          </a>
+        </div>
+      </section>
       <div
         class="grid-row grid-gap-lg j40-aboutcard-container "
         data-testid="grid"

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

@@ -276,11 +276,36 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       class="grid-container-desktop-lg"
       data-testid="gridContainer"
     >
-      <h1>
-        Methodology
-      </h1>
+      <section
+        class="page-heading"
+      >
+        <h1>
+          Methodology
+        </h1>
+        <div>
+          <div>
+            <span
+              class="usa-tag"
+              data-testid="tag"
+            >
+              NEW
+            </span>
+          </div>
+          <a
+            href="/public-engagement"
+          >
+            <button
+              class="usa-button usa-button--icon"
+              data-testid="button"
+              type="button"
+            >
+              Public Engagement
+            </button>
+          </a>
+        </div>
+      </section>
       <div
-        class="grid-row grid-gap j40-mb-5"
+        class="grid-row grid-gap j40-mb5-mt3"
         data-testid="grid"
       >
         <div

client/src/pages/cejst.tsx

@@ -7,6 +7,7 @@ import J40MainGridContainer from '../components/J40MainGridContainer';
 import Layout from '../components/layout';
 import MapWrapper from '../components/MapWrapper';
 import MapLegend from '../components/MapLegend';
+import PublicEngageButton from '../components/PublicEngageButton';
 
 import * as EXPLORE_COPY from '../data/copy/explore';
 
@@ -24,9 +25,12 @@ const CEJSTPage = ({location}: IMapPageProps) => {
 
     <J40MainGridContainer>
 
-      <h1>{intl.formatMessage(EXPLORE_COPY.PAGE_INTRO.PAGE_HEADING)}</h1>
+      <section className={'page-heading'}>
+        <h1>{intl.formatMessage(EXPLORE_COPY.PAGE_INTRO.PAGE_HEADING)}</h1>
+        <PublicEngageButton />
+      </section>
 
-      <Grid row className={'j40-mb-5'}>
+      <Grid row gap className={'j40-mb5-mt3'}>
         <Grid col={12} tablet={{col: 6}}>
           <section>
             <p>

client/src/pages/contact.tsx

@@ -5,6 +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 * as CONTACT_COPY from '../data/copy/contact';
 interface IContactPageProps {
@@ -19,7 +20,10 @@ const ContactPage = ({location}: IContactPageProps) => {
 
       <J40MainGridContainer>
 
-        <h1>{intl.formatMessage(CONTACT_COPY.PAGE_INTRO.PAGE_HEADING)}</h1>
+        <section className={'page-heading'}>
+          <h1>{intl.formatMessage(CONTACT_COPY.PAGE_INTRO.PAGE_HEADING)}</h1>
+          <PublicEngageButton />
+        </section>
 
         <Grid row>
           <Grid col>

client/src/pages/index.tsx

@@ -5,6 +5,7 @@ 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 CONTACT_COPY from '../data/copy/contact';
@@ -37,8 +38,10 @@ const IndexPage = ({location}: IndexPageProps) => {
     <Layout location={location} title={intl.formatMessage(ABOUT_COPY.PAGE.TILE)}>
 
       <J40MainGridContainer>
-
-        <h1 data-cy={'about-page-heading'}>{intl.formatMessage(ABOUT_COPY.PAGE.HEADING)}</h1>
+        <section className={'page-heading'}>
+          <h1 data-cy={'about-page-heading'}>{intl.formatMessage(ABOUT_COPY.PAGE.HEADING)}</h1>
+          <PublicEngageButton />
+        </section>
 
         <AboutCardsContainer>
           <AboutCard

client/src/pages/methodology.tsx

@@ -8,6 +8,7 @@ import DownloadPacket from '../components/DownloadPacket';
 import J40MainGridContainer from '../components/J40MainGridContainer';
 import MethodologyFormula from '../components/MethodologyFormula';
 import Layout from '../components/layout';
+import PublicEngageButton from '../components/PublicEngageButton';
 
 import * as METHODOLOGY_COPY from '../data/copy/methodology';
 
@@ -23,10 +24,14 @@ const IndexPage = ({location}: MethodPageProps) => {
 
       <J40MainGridContainer>
 
-        <h1>{intl.formatMessage(METHODOLOGY_COPY.PAGE.HEADING)}</h1>
+        <section className={'page-heading'}>
+          <h1>{intl.formatMessage(METHODOLOGY_COPY.PAGE.HEADING)}</h1>
+          <PublicEngageButton />
+        </section>
 
-        {/* First column */}
-        <Grid row gap className={'j40-mb-5'}>
+        <Grid row gap className={'j40-mb5-mt3'}>
+
+          {/* First column */}
           <Grid col={12} tablet={{col: 8}}>
             <section>
               <p>

client/src/pages/public-engagement.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import {Grid, Collection} from '@trussworks/react-uswds';
+import {useIntl} from 'gatsby-plugin-intl';
+
+import J40MainGridContainer from '../components/J40MainGridContainer';
+import Layout from '../components/layout';
+import PublicEvent from '../components/PublicEvent';
+
+import * as PUBLIC_ENG_COPY from '../data/copy/publicEngage';
+
+interface IPublicEngagementPageProps {
+  location: Location;
+}
+
+const PublicEngagementPage = ({location}: IPublicEngagementPageProps) => {
+  const intl = useIntl();
+
+  // TODO: filter events by date
+  const futureEvents = PUBLIC_ENG_COPY.EVENTS;
+  // const pastEvents
+
+  return (
+    <Layout location={location} title={intl.formatMessage(PUBLIC_ENG_COPY.PAGE_INTRO.PAGE_TILE)}>
+
+      <J40MainGridContainer>
+
+        <h1>{intl.formatMessage(PUBLIC_ENG_COPY.PAGE_INTRO.PAGE_HEADING1)}</h1>
+
+        <Grid row tablet={{col: 8}} desktop={{col: 7}}>
+          <p>
+            {intl.formatMessage(PUBLIC_ENG_COPY.PAGE_INTRO.PAGE_DESCRIPTION1)}
+          </p>
+          <p>
+            {intl.formatMessage(PUBLIC_ENG_COPY.PAGE_INTRO.PAGE_DESCRIPTION2)}
+          </p>
+          <p>
+            {intl.formatMessage(PUBLIC_ENG_COPY.PAGE_INTRO.PAGE_DESCRIPTION3)}
+          </p>
+        </Grid>
+
+        <Grid row>
+          <h2>
+            {intl.formatMessage(PUBLIC_ENG_COPY.PAGE_INTRO.PAGE_HEADING2)}
+          </h2>
+        </Grid>
+
+        <Collection>
+          {futureEvents.map((event, index) => <PublicEvent key={index} event={event} />)}
+        </Collection>
+
+        <Grid row>
+          {/* Empty Spacer */}
+        </Grid>
+      </J40MainGridContainer>
+    </Layout>
+  );
+};
+
+export default PublicEngagementPage;