Re-order nav links, update download box to include shapefiles, squish pages (#1538)

* Re-order nav links, update download box to include shapefiles, squishy pages (#1536)

* Add dropdown to navigation links

- add download page
- move main pages tests to their own folder
- add download and public eng snapshot test
- remove public engagement button on each page
- swap index with cejst
- update cypress ENDPOINTS
- upate gatsby-config sitemap
- update snapshots
- cypress tests are failing

* Make all page endpoints constants

- fix all cypress tests
- refactor all test to use LegacyTests/constants/PAGES_ENDPOINTS
- gatsby-config to use PAGES_ENDPOINTS
- remove ScoreStepList component
- update J40Header to use constants.PAGES_ENDPOINTS
- update snapshots
- there are 3 locations to update PAGES_ENDPOINTS, namely

1. LegacyTests/constants.tsx
2. constants.tsx
3. gatsby-config

* Add two placeholder pages

- FAQs
- TSD

* remove dropdown from navigation menu

- remove dropdown from gherkin tests
- update snapshots

* 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

* Update download box to include shapefile downloads

- refator download packet scss
- add shapefile URL to .env files
- update tests
- index forwarding pattern
- update snapshots

* Add FAQ link to About page

* Update footer

- add PEC
- add RFI
- add github link

* Update the staging link URL and title

* Update download Box to match design sync

- update FAQ link copy

* Add comment for reason of commented code

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>