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/components/DownloadPacket/downloadPacket.module.scss

@@ -4,10 +4,12 @@
 
     color: whitesmoke;
     margin: auto;
+    @include u-margin-top(2.5);
 
     .downloadBox {
       @include u-bg('blue-80v');
       border-radius: 6px 6px;
+      // @include u-margin-top(3);
 
       .downloadBoxTextBox {
         padding: 25px 25px;

client/src/components/PublicEngageButton/PublicEngageButton.module.scss

@@ -0,0 +1,22 @@
+@use '../../styles/design-system.scss' as *;
+
+.tagContainer {
+    @include u-margin-bottom(1);
+    @include u-margin-right(1);
+    .tag {
+        @include u-bg("yellow-20v");
+        color: black;
+        border-radius: 5px;
+        @include u-text('bold');
+    }
+}
+
+.container {
+    @include u-padding-top(2.5);
+
+    .link, .link:visited {
+        color:white;
+        text-decoration: none;
+    }
+
+}

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

@@ -0,0 +1,15 @@
+declare namespace PublicEngagementButton {
+    export interface IPublicEventScss {
+        tag: string;
+        tagContainer: string;
+        container: string;
+        link: string;
+    }
+  }
+
+declare const PublicEventScssModule: PublicEngagementButton.IPublicEventScss & {
+    /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+    locals: PublicEngagementButton.IPublicEventScss;
+  };
+
+  export = PublicEventScssModule;

client/src/components/PublicEngageButton/PublicEngageButton.test.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import {render} from '@testing-library/react';
+import {LocalizedComponent} from '../../test/testHelpers';
+import PublicEngageButton from './PublicEngageButton';
+
+describe('rendering of the PublicEngageButton', () => {
+  const {asFragment} = render(
+      <LocalizedComponent>
+        <PublicEngageButton/>
+      </LocalizedComponent>,
+  );
+
+  it('checks if component renders', () => {
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

client/src/components/PublicEngageButton/PublicEngageButton.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {Link} from 'gatsby';
+import {useIntl} from 'gatsby-plugin-intl';
+import {Button, Tag} from '@trussworks/react-uswds';
+
+import * as styles from './PublicEngageButton.module.scss';
+import * as PUBLIC_ENG_COPY from '../../data/copy/publicEngage';
+
+const PublicEngageButton = () => {
+  const intl = useIntl();
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.tagContainer}>
+        <Tag className={styles.tag}>
+          {intl.formatMessage(PUBLIC_ENG_COPY.PUBLIC_ENG_BUTTON.TAG_LABEL)}
+        </Tag>
+      </div>
+      <Link className={styles.link} to={'/public-engagement'}>
+        <Button type={'button'} icon={true}>
+          {intl.formatMessage(PUBLIC_ENG_COPY.PUBLIC_ENG_BUTTON.LABEL)}
+        </Button>
+      </Link>
+    </div>
+  );
+};
+
+export default PublicEngageButton;

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

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering of the PublicEngageButton checks if component renders 1`] = `
+<DocumentFragment>
+  <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>
+</DocumentFragment>
+`;

client/src/components/PublicEngageButton/index.tsx

@@ -0,0 +1,3 @@
+import PublicEngageButton from './PublicEngageButton';
+
+export default PublicEngageButton;

client/src/components/PublicEvent/PublicEvent.module.scss

@@ -0,0 +1,5 @@
+@use '../../styles/design-system.scss' as *;
+
+.description {
+    @include u-margin-top(2);
+}

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

@@ -0,0 +1,12 @@
+declare namespace PublicEventNamespace {
+    export interface IPublicEventScss {
+      description: string;
+    }
+  }
+
+declare const PublicEventScssModule: PublicEventNamespace.IPublicEventScss & {
+    /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+    locals: PublicEventNamespace.IPublicEventScss;
+  };
+
+  export = PublicEventScssModule;

client/src/components/PublicEvent/PublicEvent.test.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import {render} from '@testing-library/react';
+import {LocalizedComponent} from '../../test/testHelpers';
+import PublicEvent from './PublicEvent';
+
+import * as PUBLIC_ENG_COPY from '../../data/copy/publicEngage';
+
+describe('rendering of the PublicEvent', () => {
+  const {asFragment} = render(
+      <LocalizedComponent>
+        <PublicEvent event={PUBLIC_ENG_COPY.EVENTS[0]}/>
+      </LocalizedComponent>,
+  );
+
+  it('checks if component renders', () => {
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

client/src/components/PublicEvent/PublicEvent.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import {useIntl} from 'gatsby-plugin-intl';
+import {
+  CollectionDescription,
+  CollectionHeading,
+  CollectionItem,
+  CollectionThumbnail,
+  Button,
+} from '@trussworks/react-uswds';
+
+import LinkTypeWrapper from '../LinkTypeWrapper';
+import * as PUBLIC_ENGAGE_COPY from '../../data/copy/publicEngage';
+import * as styles from './PublicEvent.module.scss';
+
+export interface IPublicEvent {
+  event: {
+    DATE: Date,
+    NAME: JSX.Element,
+    DESC: JSX.Element,
+    NUMBER: Number,
+    IMAGE: React.ReactElement | string,
+    FIELDS: JSX.Element,
+    REG_LINK: string,
+    DATA_CY: string,
+  }
+}
+
+
+const PublicEvent = ({event}:IPublicEvent) => {
+  const intl = useIntl();
+
+  return (
+    <CollectionItem
+      variantComponent={
+        <CollectionThumbnail src={event.IMAGE} alt="Alt text" />
+      }>
+
+      {/* Heading */}
+      <CollectionHeading>
+        <LinkTypeWrapper
+          linkText={`CEJST 
+            ${intl.formatMessage(event.NAME)} 
+            #${event.NUMBER}
+          `}
+          internal={false}
+          url={event.REG_LINK}
+          openUrlNewTab={true}
+          dataCy={event.DATA_CY}
+        />
+      </CollectionHeading>
+
+      {/* Description */}
+      <CollectionDescription className={styles.description}>
+        {intl.formatMessage(event.DESC)}
+      </CollectionDescription>
+
+      {/* Event info */}
+      <CollectionDescription className={styles.description}>
+        <b>
+          {intl.formatMessage(PUBLIC_ENGAGE_COPY.EVENT_FIELDS.EVENT_INFO)}
+        </b>
+        {`: ${intl.formatMessage(event.FIELDS.INFO)}`}
+      </CollectionDescription>
+
+      {/* Registration Link */}
+      <CollectionDescription className={styles.description}>
+        <a href={event.REG_LINK} target={'_blank'} rel="noreferrer">
+          <Button type='button'>
+            {intl.formatMessage(PUBLIC_ENGAGE_COPY.EVENT_FIELDS.REG_LINK)}
+          </Button>
+        </a>
+      </CollectionDescription>
+    </CollectionItem>
+  );
+};
+
+export default PublicEvent;

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

@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering of the PublicEvent checks if component renders 1`] = `
+<DocumentFragment>
+  <li
+    class="usa-collection__item"
+  >
+    <img
+      alt="Alt text"
+      class="usa-collection__img"
+      src="test-file-stub"
+    />
+    <div
+      class="usa-collection__body"
+    >
+      <h3
+        class="usa-collection__heading"
+      >
+        <a
+          class="usa-link usa-link--external"
+          data-cy="mar-9-reg-link-block"
+          href="https://pitc.zoomgov.com/webinar/register/WN_D-Om_xXhTtiLv71y3Rr1CQ"
+          rel="noreferrer"
+          target="_blank"
+        >
+          CEJST 
+            training session 
+            #1
+          
+        </a>
+      </h3>
+      <p
+        class="usa-collection__description"
+      >
+        
+        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.
+      
+      </p>
+      <p
+        class="usa-collection__description"
+      >
+        <b>
+          Event info
+        </b>
+        : March 9th (4:00 - 5:00 PM EST)
+      </p>
+      <p
+        class="usa-collection__description"
+      >
+        <a
+          href="https://pitc.zoomgov.com/webinar/register/WN_D-Om_xXhTtiLv71y3Rr1CQ"
+          rel="noreferrer"
+          target="_blank"
+        >
+          <button
+            class="usa-button"
+            data-testid="button"
+            type="button"
+          >
+            Registration link
+          </button>
+        </a>
+      </p>
+    </div>
+  </li>
+</DocumentFragment>
+`;

client/src/components/PublicEvent/index.tsx

@@ -0,0 +1,3 @@
+import PublicEvent from './PublicEvent';
+
+export default PublicEvent;