Add back public engagement button to all pages

- add send button in area detail alt tag to i18n
- modify public engagement button to have same CSS as send feedback button
- update snapshots

client/src/components/AreaDetail/AreaDetail.tsx

@@ -617,7 +617,7 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
               <img
                 className={styles.buttonImage}
                 src={mailIcon}
-                alt={'tbd'}
+                alt={intl.formatMessage(EXPLORE_COPY.COMMUNITY.SEND_FEEDBACK.IMG_ICON.ALT_TAG)}
               />
             </div>
           </Button>

client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap

@@ -76,7 +76,7 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p
               Send feedback
             </div>
             <img
-              alt="tbd"
+              alt="Send feedback"
               src="test-file-stub"
             />
           </div>
@@ -429,7 +429,7 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
               Send feedback
             </div>
             <img
-              alt="tbd"
+              alt="Send feedback"
               src="test-file-stub"
             />
           </div>
@@ -2133,7 +2133,7 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
               Send feedback
             </div>
             <img
-              alt="tbd"
+              alt="Send feedback"
               src="test-file-stub"
             />
           </div>

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

@@ -20,6 +20,29 @@
     .link, .link:visited {
         color:white;
         text-decoration: none;
+
+        .engagementButton{
+            // @include u-text("blue-70v");
+            // @include u-bg("yellow-20v");
+            height: 40px; 
+            
+            // &:hover {
+            //   @include u-bg("yellow-20");
+            //   @include u-text("gray-90");
+            // }
+      
+            .buttonContainer{
+              display: flex;
+            
+            .buttonImage{
+                @include u-margin-right(1);
+                width: 21px;
+                margin-top: -3px;
+      
+                filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(119deg) brightness(105%) contrast(101%);
+              }
+            }
+          }
     }
 
 }

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

@@ -4,6 +4,10 @@ declare namespace PublicEngagementButton {
         tagContainer: string;
         container: string;
         link: string;
+        engagementButton: string;
+        buttonContainer: string;
+        buttonImage: string;
+
     }
   }
 

client/src/components/PublicEngageButton/PublicEngageButton.tsx

@@ -5,6 +5,9 @@ import {Button, Tag} from '@trussworks/react-uswds';
 import * as styles from './PublicEngageButton.module.scss';
 import * as PUBLIC_ENG_COPY from '../../data/copy/publicEngage';
 
+// @ts-ignore
+import eventIcon from '/node_modules/uswds/dist/img/usa-icons/event.svg';
+
 const PublicEngageButton = () => {
   const intl = useIntl();
 
@@ -16,8 +19,20 @@ const PublicEngageButton = () => {
         </Tag>
       </div>
       <Link className={styles.link} to={'/public-engagement'}>
-        <Button type={'button'} icon={true}>
-          {intl.formatMessage(PUBLIC_ENG_COPY.PUBLIC_ENG_BUTTON.LABEL)}
+        <Button
+          type="button"
+          className={styles.engagementButton}
+        >
+          <div className={styles.buttonContainer}>
+            <img
+              className={styles.buttonImage}
+              src={eventIcon}
+              alt={intl.formatMessage(PUBLIC_ENG_COPY.PUBLIC_ENG_BUTTON.IMG_ICON_ALT_TAG)}
+            />
+            <div>
+              {intl.formatMessage(PUBLIC_ENG_COPY.PUBLIC_ENG_BUTTON.LABEL)}
+            </div>
+          </div>
         </Button>
       </Link>
     </div>

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

@@ -15,11 +15,19 @@ exports[`rendering of the PublicEngageButton checks if component renders 1`] = `
       href="/en/public-engagement"
     >
       <button
-        class="usa-button usa-button--icon"
+        class="usa-button"
         data-testid="button"
         type="button"
       >
-        Public Engagement
+        <div>
+          <img
+            alt="an icon that represents a calendar"
+            src="test-file-stub"
+          />
+          <div>
+            Public engagement
+          </div>
+        </div>
       </button>
     </a>
   </div>

client/src/data/copy/explore.tsx

@@ -290,6 +290,13 @@ export const COMMUNITY = {
       defaultMessage={ 'Send feedback'}
       description={`Navigate to the explore the tool page. When the map is in view, click on the map. The side panel will show link to send feedback`}
     />,
+    IMG_ICON: defineMessages({
+      ALT_TAG: {
+        id: 'explore.tool.page.side.panel.send.feedback.alt.img',
+        defaultMessage: 'Send feedback',
+        description: `Navigate to the explore the tool page. When the map is in view, click on the map. The side panel will show a send feedback icon, this is the images alt tag`,
+      },
+    }),
   },
 };
 

client/src/data/copy/publicEngage.tsx

@@ -90,7 +90,7 @@ export const PUBLIC_ENG_VIDEO = defineMessages({
 export const PUBLIC_ENG_BUTTON = defineMessages({
   LABEL: {
     id: 'public.eng.page.button.label',
-    defaultMessage: `Public Engagement`,
+    defaultMessage: `Public engagement`,
     description: 'Navigate to the the public engagement page, this will be the public engagement button label',
   },
   TAG_LABEL: {
@@ -98,6 +98,11 @@ export const PUBLIC_ENG_BUTTON = defineMessages({
     defaultMessage: `UPDATED`,
     description: 'Navigate to the the public engagement page, this will be the public engagement tag label',
   },
+  IMG_ICON_ALT_TAG: {
+    id: 'public.eng.page.button.img.alt.tag',
+    defaultMessage: `an icon that represents a calendar`,
+    description: 'Navigate to the the public engagement page, this will be the public engagement button icon alt tag text',
+  },
 });
 
 export const EVENT_TYPES = {

client/src/intl/en.json

@@ -723,6 +723,10 @@
     "defaultMessage": "At or above {numberOfThresholdExceed} thresholds",
     "description": "Navigate to the explore the tool page. When the map is in view, click on the map. The side panel will show how many thresholds are exceeded"
   },
+  "explore.tool.page.side.panel.send.feedback.alt.img": {
+    "defaultMessage": "Send feedback",
+    "description": "Navigate to the explore the tool page. When the map is in view, click on the map. The side panel will show a send feedback icon, this is the images alt tag"
+  },
   "explore.tool.page.side.panel.send.feedback.email.body": {
     "defaultMessage": "Please provide feedback about this census tract, including about the datasets, the data categories provided for this census tract, the communities who live in this census tract, and anything else relevant that CEQ should know about this census tract.",
     "description": "Navigate to the explore the tool page. When the map is in view, click on the map. The side panel will show link to send feedback\n"
@@ -1287,8 +1291,12 @@
     "defaultMessage": "Page not found",
     "description": "page not found title text"
   },
+  "public.eng.page.button.img.alt.tag": {
+    "defaultMessage": "an icon that represents a calendar",
+    "description": "Navigate to the the public engagement page, this will be the public engagement button icon alt tag text"
+  },
   "public.eng.page.button.label": {
-    "defaultMessage": "Public Engagement",
+    "defaultMessage": "Public engagement",
     "description": "Navigate to the the public engagement page, this will be the public engagement button label"
   },
   "public.eng.page.description1.text": {

client/src/pages/about.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 COMMON_COPY from '../data/copy/common';
@@ -38,7 +39,11 @@ const AboutPage = ({location}: IAboutPageProps) => {
     <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/contact.tsx

@@ -6,6 +6,7 @@ import J40MainGridContainer from '../components/J40MainGridContainer';
 import Layout from '../components/layout';
 import LinkTypeWrapper from '../components/LinkTypeWrapper';
 import RequestForInfo from '../components/RequestForInfo';
+import PublicEngageButton from '../components/PublicEngageButton';
 
 import * as CONTACT_COPY from '../data/copy/contact';
 import * as COMMON_COPY from '../data/copy/common';
@@ -21,7 +22,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 gap={6}>
 

client/src/pages/index.tsx

@@ -6,6 +6,7 @@ import HowYouCanHelp from '../components/HowYouCanHelp';
 import J40MainGridContainer from '../components/J40MainGridContainer';
 import Layout from '../components/layout';
 import MapWrapper from '../components/MapWrapper';
+import PublicEngageButton from '../components/PublicEngageButton';
 
 import * as EXPLORE_COPY from '../data/copy/explore';
 
@@ -23,7 +24,10 @@ const ExporeToolPage = ({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 gap className={'j40-mb5-mt3'}>
 

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,7 +24,10 @@ 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>
 
         <Grid row gap className={'j40-mb5-mt3'}>
 

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

@@ -310,11 +310,44 @@ 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"
+            >
+              UPDATED
+            </span>
+          </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-lg j40-aboutcard-container "
         data-testid="grid"

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

@@ -310,9 +310,42 @@ 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"
+            >
+              UPDATED
+            </span>
+          </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-6"
         data-testid="grid"

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

@@ -310,9 +310,42 @@ 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"
+            >
+              UPDATED
+            </span>
+          </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/styles/global.scss

@@ -124,6 +124,15 @@ components include:
   border-top: 0; // The main content has border this removes it
   min-height: 60vh; // Contact page's content is not enough to fill page so this keeps the footer low
 
+  .page-heading {
+    display: flex;
+    justify-content: space-between;
+
+    @include at-media-max("tablet"){
+      flex-direction: column;
+    }
+  }
+  
   .j40-mb5-mt3 {
     @include u-margin-bottom(5);
     @include u-margin-top(3);