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
2025-08-12 05:24:19 -07:00 · 2022-04-07 13:14:54 -04:00 · 2022-04-07 13:14:54 -04:00 · 92501e4715
commit 92501e4715
parent 69edbe520e
71 changed files with 4400 additions and 605 deletions
--- a/client/src/components/AboutCard/AboutCard.tsx
+++ b/client/src/components/AboutCard/AboutCard.tsx
@ -6,7 +6,7 @@ import {hyphenizeString} from '../../../cypress/integration/common/helpers';

 // the "body" section is the child object to allow for html versus just text
 interface AboutCardProps {
-  imgSrc: string;
+  imgSrc?: string;
  header: string;
  size: 'small' | 'large';
  linkText?: string;
@ -25,10 +25,10 @@ const AboutCard = (props: React.PropsWithChildren<AboutCardProps>) => {
      <Grid tablet={{col: true}} gap={'lg'} className={(props.className || '')}>
        <Grid row className={'j40-aboutcard-lg-card'}>
          <Grid tablet={{col: 3}} className={'j40-aboutpage-image-container'}>
-            <img
+            {props.imgSrc && <img
              className={'j40-aboutcard-image'}
              alt={props.header}
-              src={props.imgSrc}/>
+              src={props.imgSrc}/>}
          </Grid>

          <Grid tablet={{col: 9}} data-cy={`${hyphenizeString(props.header)}-block`}>
--- a/client/src/components/AreaDetail/AreaDetail.tsx
+++ b/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>
--- a/client/src/components/AreaDetail/tests/snapshots/areaDetail.test.tsx.snap
+++ b/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>
--- a/client/src/components/DatasetContainer/index.tsx
+++ b/client/src/components/DatasetContainer/index.tsx
@ -8,6 +8,7 @@ import {hyphenizeString} from '../../../cypress/integration/common/helpers';

 import * as styles from './dsContainer.module.scss';
 import * as METHODOLOGY_COPY from '../../data/copy/methodology';
+import {PAGES_ENDPOINTS} from '../../data/constants';


 const DatasetContainer = () => {
@ -43,7 +44,7 @@ const DatasetContainer = () => {
          </Grid>

          <div className={styles.returnToTop}>
-            <Link to={`/methodology`}>
+            <Link to={PAGES_ENDPOINTS.METHODOLOGY}>
              {METHODOLOGY_COPY.RETURN_TO_TOP.LINK}
            </Link>
          </div>
--- a/client/src/components/DownloadPacket/DownloadPacket.tsx
+++ b/client/src/components/DownloadPacket/DownloadPacket.tsx
@ -0,0 +1,73 @@
+import React from 'react';
+import {Button, Grid, Tag} from '@trussworks/react-uswds';
+
+import * as styles from './downloadPacket.module.scss';
+import * as METHODOLOGY_COPY from '../../data/copy/methodology';
+
+// @ts-ignore
+import downloadIcon from '/node_modules/uswds/dist/img/usa-icons/file_download.svg';
+
+const DownloadPacket = () => {
+  return (
+    <Grid>
+      <div className={styles.downloadBoxContainer}>
+        <div className={styles.downloadBox}>
+          <div className={styles.downloadBoxTextBox}>
+
+            {/* Download box title */}
+            <div className={styles.downloadBoxTitle}>
+              {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.TITLE}
+            </div>
+
+            {/* Download box description 1 */}
+            <div className={styles.dataSourceText}>
+              {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.DESCRIPTION1}
+            </div>
+
+            {/* Download box button 1 */}
+            <div className={styles.dataSourceButtonContainer}>
+              <a data-cy={'download-link'} download href={METHODOLOGY_COPY.DOWNLOAD_ZIP_URL}>
+                <Button className={styles.downloadBoxButton} type="button">
+                  <div>
+                    <img src={downloadIcon} alt={'download icon for download package'}/>
+                  </div>
+                  <div className={styles.dataSourceButtonText}>
+                    {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.BUTTON_TEXT1}
+                  </div>
+                </Button>
+              </a>
+            </div>
+            <div className={styles.lastUpdated}>
+              {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.LAST_UPDATED}
+            </div>
+
+
+            {/* Download box button 2 */}
+            <div className={styles.shapefileButtonContainer}>
+              <div className={styles.newTagContainer}>
+                <Tag className={styles.newtag}>{METHODOLOGY_COPY.DOWNLOAD_PACKAGE.NEW_TAG}</Tag>
+              </div>
+              <a data-cy={'shapefile-link'} download href={METHODOLOGY_COPY.DOWNLOAD_SHAPEFILE_URL}>
+                <Button className={styles.downloadBoxButton} type="button">
+                  <div>
+                    <img src={downloadIcon} alt={'download icon for download package'}/>
+                  </div>
+                  <div className={styles.shapeFileButtonText}>
+                    {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.BUTTON_TEXT2}
+                  </div>
+                </Button>
+              </a>
+            </div>
+            <div className={styles.lastUpdated}>
+              {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.LAST_UPDATED}
+            </div>
+
+
+          </div>
+        </div>
+      </div>
+    </Grid>
+  );
+};
+
+export default DownloadPacket;
--- a/client/src/components/DownloadPacket/snapshots/downloadPacket.test.tsx.snap
+++ b/client/src/components/DownloadPacket/snapshots/downloadPacket.test.tsx.snap
@ -0,0 +1,85 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`download packet component defined checks if component renders 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+    data-testid="grid"
+  >
+    <div>
+      <div>
+        <div>
+          <div>
+            Files available for download
+          </div>
+          <div>
+            Download the data sources used in the CEJST (.csv and .xlsx, 52MB unzipped) or the shapefile, along with a codebook (.zip, 742MB unzipped).
+          </div>
+          <div>
+            <a
+              data-cy="download-link"
+              download=""
+              href="//"
+            >
+              <button
+                class="usa-button"
+                data-testid="button"
+                type="button"
+              >
+                <div>
+                  <img
+                    alt="download icon for download package"
+                    src="test-file-stub"
+                  />
+                </div>
+                <div>
+                  Download data sources
+                </div>
+              </button>
+            </a>
+          </div>
+          <div>
+            Last updated: 04/06/22 
+          </div>
+          <div>
+            <div>
+              <span
+                class="usa-tag"
+                data-testid="tag"
+              >
+                <strong>
+                  NEW
+                </strong>
+              </span>
+            </div>
+            <a
+              data-cy="shapefile-link"
+              download=""
+              href="//"
+            >
+              <button
+                class="usa-button"
+                data-testid="button"
+                type="button"
+              >
+                <div>
+                  <img
+                    alt="download icon for download package"
+                    src="test-file-stub"
+                  />
+                </div>
+                <div>
+                  Download shapefile
+                </div>
+              </button>
+            </a>
+          </div>
+          <div>
+            Last updated: 04/06/22 
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
--- a/client/src/components/DownloadPacket/downloadPacket.module.scss
+++ b/client/src/components/DownloadPacket/downloadPacket.module.scss
@ -1,7 +1,33 @@
@use '../../styles/design-system.scss' as *;

-.downloadBoxContainer {
+@mixin baseButtonContainerStyles {
+  align-self: center;
+  @include u-margin-top(2);

+  a {
+    text-decoration: none;
+  }
+
+  img {
+    // This should be a global css-filter value as it's generated
+    // from the primary color.
+    filter: invert(15%) sepia(9%) saturate(5666%) hue-rotate(175deg) brightness(96%) contrast(95%);
+  }
+}
+
+@mixin baseTextStyle {
+  @include typeset('sans', 'xs', 3);
+  @include u-margin-top(2);
+  @include u-margin-bottom(2);
+  
+};
+
+@mixin baseButtonTextStyle {
+  padding-top: 4px;
+  padding-left: 5px;
+}
+
+.downloadBoxContainer {
    color: whitesmoke;
    margin: auto;
    @include u-margin-top(2.5);
@ -19,44 +45,63 @@
        .downloadBoxTitle {
          @include typeset('sans', 'xs', 3);
          @include u-text('semibold');
-          @include u-margin-bottom(2);
        }
        
-        .downloadBoxText {
-          @include typeset('sans', 'xs', 3);
-          @include u-margin-bottom(4);
-          
-          span {
-            font-style: italic;
-          }
+        // Data source text
+        .dataSourceText {
+          @include baseTextStyle();
        }

-        .downloadBoxButtonContainer {
-          margin-top: 20px 0 0 0;
+        // Last updated
+        .lastUpdated {
+          font-style: italic;
          align-self: center;
-
-          a {
-            text-decoration: none;
-          }
-
-          img {
-            // This should be a global css-filter value as it's generated
-            // from the primary color.
-            filter: invert(15%) sepia(9%) saturate(5666%) hue-rotate(175deg) brightness(96%) contrast(95%);
-          }
+          @include u-margin-top(1);
        }

-        .downloadBoxButton{
-          @include u-bg('white');
-          @include u-color('blue-80v');
-          display: flex;
+        // Data source button
+        .dataSourceButtonContainer {
+          @include baseButtonContainerStyles();

-          .downloadPacketText {
-            padding-top: 4px;
-            padding-left: 5px;
+          .dataSourceButtonText {
+            @include baseButtonTextStyle();
+          }
+        }
+        
+        // Shapefile text
+        .shapeFileText {
+          @include baseTextStyle();
+          @include u-margin-top(7);
+        }
+        // Shapefile button
+        .shapefileButtonContainer{
+          display: flex;
+          flex-direction: column;
+          @include baseButtonContainerStyles();
+
+          .shapeFileButtonText {
+            @include baseButtonTextStyle();
+            @include u-margin-right(3);
          }
        }

      }
    }
-  }
+  }
+
+  .downloadBoxButton{
+    @include u-bg('white');
+    @include u-color('blue-80v');
+    display: flex;
+  }
+
+  .newTagContainer {
+    align-self: end;
+    @include u-margin-bottom(-1);
+    z-index: 2;
+  }
+
+  .newtag {
+    @include u-text("blue-70v");
+    @include u-bg("yellow-20v");
+  }
--- a/client/src/components/DownloadPacket/downloadPacket.module.scss.d.ts
+++ b/client/src/components/DownloadPacket/downloadPacket.module.scss.d.ts
@ -4,10 +4,16 @@ declare namespace DownloadPacketModuleScssNamespace {
        downloadBox: string;
        downloadBoxTextBox: string;
        downloadBoxTitle: string;
-        downloadBoxText: string;
-        downloadBoxButtonContainer: string;
+        dataSourceText: string;
+        dataSourceButtonContainer: string;
+        shapefileButtonContainer: string;
        downloadBoxButton: string;
-        downloadPacketText: string;
+        dataSourceButtonText: string;
+        shapeFileText: string;
+        shapeFileButtonText: string;
+        newTagContainer: string;
+        newtag: string;
+        lastUpdated:string;
    }
  }

--- a/client/src/components/DownloadPacket/downloadPacket.test.tsx
+++ b/client/src/components/DownloadPacket/downloadPacket.test.tsx
@ -1,15 +1,17 @@
 import * as React from 'react';
-import {render, screen} from '@testing-library/react';
+import {render} from '@testing-library/react';
 import {LocalizedComponent} from '../../test/testHelpers';
-import DownloadPacket from '.';
+import DownloadPacket from './DownloadPacket';

-test('download packet component defined', () => {
-  render(
+describe('download packet component defined', () => {
+  const {asFragment} = render(
      <LocalizedComponent>
        <DownloadPacket />
      </LocalizedComponent>,
  );

-  screen.getByRole('button', {name: /download package/i});
+  it('checks if component renders', () => {
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

--- a/client/src/components/DownloadPacket/index.tsx
+++ b/client/src/components/DownloadPacket/index.tsx
@ -1,45 +1,3 @@
-import React from 'react';
-import {Button, Grid} from '@trussworks/react-uswds';
-
-import * as styles from './downloadPacket.module.scss';
-import * as METHODOLOGY_COPY from '../../data/copy/methodology';
-
-// @ts-ignore
-import downloadIcon from '/node_modules/uswds/dist/img/usa-icons/file_download.svg';
-
-const DownloadPacket = () => {
-  return (
-    <Grid>
-      <div className={styles.downloadBoxContainer}>
-        <div className={styles.downloadBox}>
-          <div className={styles.downloadBoxTextBox}>
-            <div className={styles.downloadBoxTitle}>
-              {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.TITLE}
-            </div>
-            <div className={styles.downloadBoxText}>
-              {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.DESCRIPTION}
-              {' '}
-              <span>
-                {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.LAST_UPDATED}
-              </span>
-            </div>
-            <div className={styles.downloadBoxButtonContainer}>
-              <a data-cy={'download-link'} download href={METHODOLOGY_COPY.DOWNLOAD_ZIP_URL}>
-                <Button className={styles.downloadBoxButton} type="button">
-                  <div>
-                    <img src={downloadIcon} alt={'download icon for download package'}/>
-                  </div>
-                  <div className={styles.downloadPacketText}>
-                    {METHODOLOGY_COPY.DOWNLOAD_PACKAGE.BUTTON_TEXT}
-                  </div>
-                </Button>
-              </a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Grid>
-  );
-};
+import DownloadPacket from './DownloadPacket';

 export default DownloadPacket;
--- a/client/src/components/J40Footer/J40Footer.tsx
+++ b/client/src/components/J40Footer/J40Footer.tsx
@ -13,6 +13,7 @@ import SurveyButton from '../SurveyButton';

 // @ts-ignore
 import whitehouseIcon from '../../images/eop-seal.svg';
+import {PAGES_ENDPOINTS} from '../../data/constants';
 import * as COMMON_COPY from '../../data/copy/common';

 const J40Footer = () => {
@ -35,12 +36,28 @@ const J40Footer = () => {
    ],
    [
      intl.formatMessage(COMMON_COPY.FOOTER.MORE_INFO),
+      <LinkTypeWrapper
+        linkText={intl.formatMessage(COMMON_COPY.FOOTER.ENG_CAL)}
+        internal={true}
+        url={PAGES_ENDPOINTS.PUBLIC_ENG}
+        openUrlNewTab={false}
+        className={'footer-link-first-child'}
+        key={'publiceng'}
+        dataCy={hyphenizeString(COMMON_COPY.FOOTER.ENG_CAL.defaultMessage)}
+      />,
+      <LinkTypeWrapper
+        linkText={intl.formatMessage(COMMON_COPY.FOOTER.RFI)}
+        internal={false}
+        url={intl.formatMessage(COMMON_COPY.FOOTER.RFI_LINK)}
+        openUrlNewTab={true}
+        key={'rfilink'}
+        dataCy={hyphenizeString(COMMON_COPY.FOOTER.RFI.defaultMessage)}
+      />,
      <LinkTypeWrapper
        linkText={intl.formatMessage(COMMON_COPY.FOOTER.WHITEHOUSE)}
        internal={false}
        url={intl.formatMessage(COMMON_COPY.FOOTER.WHITEHOUSE_LINK)}
        openUrlNewTab={true}
-        className={'footer-link-first-child'}
        key={'whitehouselink2'}
        dataCy={hyphenizeString(COMMON_COPY.FOOTER.WHITEHOUSE.defaultMessage)}
      />,
@ -60,19 +77,27 @@ const J40Footer = () => {
        key={'privacylink'}
        dataCy={hyphenizeString(COMMON_COPY.FOOTER.PRIVACY.defaultMessage)}
      />,
-    ],
-    [
-      intl.formatMessage(COMMON_COPY.FOOTER.QUESTIONS),
      <LinkTypeWrapper
        linkText={intl.formatMessage(COMMON_COPY.FOOTER.FIND_CONTACT)}
        internal={false}
        url={intl.formatMessage(COMMON_COPY.FOOTER.FIND_CONTACT_LINK)}
        openUrlNewTab={true}
-        className={'footer-link-first-child'}
        key={'contactlink'}
        dataCy={hyphenizeString(COMMON_COPY.FOOTER.FIND_CONTACT.defaultMessage)}
      />,
    ],
+    [
+      intl.formatMessage(COMMON_COPY.FOOTER.CONTRIBUTE),
+      <LinkTypeWrapper
+        linkText={intl.formatMessage(COMMON_COPY.FOOTER.GITHUB_LINK_TEXT)}
+        internal={false}
+        url={intl.formatMessage(COMMON_COPY.FOOTER.GITHUB_LINK)}
+        openUrlNewTab={true}
+        className={'footer-link-first-child'}
+        key={'contactlink'}
+        dataCy={hyphenizeString(COMMON_COPY.FOOTER.GITHUB_LINK_TEXT.defaultMessage)}
+      />,
+    ],
  ];

  // see https://designsystem.digital.gov/components/footer/
--- a/client/src/components/J40Footer/snapshots/J40Footer.spec.tsx.snap
+++ b/client/src/components/J40Footer/snapshots/J40Footer.spec.tsx.snap
@ -79,7 +79,30 @@ exports[`J40Footer renders correctly 1`] = `
                  class="usa-footer__secondary-link"
                >
                  <a
-                    class="usa-link usa-link--external footer-link-first-child"
+                    class="footer-link-first-child"
+                    href="/en/public-engagement"
+                  >
+                    Engagement calender
+                  </a>
+                </li>
+                <li
+                  class="usa-footer__secondary-link"
+                >
+                  <a
+                    class="usa-link usa-link--external"
+                    data-cy="request-for-infomation"
+                    href="https://www.federalregister.gov/d/2022-03920"
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    Request for Infomation
+                  </a>
+                </li>
+                <li
+                  class="usa-footer__secondary-link"
+                >
+                  <a
+                    class="usa-link usa-link--external"
                    data-cy="whitehouse-gov"
                    href="https://www.whitehouse.gov/"
                    rel="noreferrer"
@ -114,6 +137,19 @@ exports[`J40Footer renders correctly 1`] = `
                    Privacy Policy
                  </a>
                </li>
+                <li
+                  class="usa-footer__secondary-link"
+                >
+                  <a
+                    class="usa-link usa-link--external"
+                    data-cy="find-a-contact-at-usa-gov"
+                    href="https://www.usa.gov/"
+                    rel="noreferrer"
+                    target="_blank"
+                  >
+                    Find a contact at USA.gov
+                  </a>
+                </li>
              </ul>
            </section>
          </div>
@ -124,7 +160,7 @@ exports[`J40Footer renders correctly 1`] = `
              <div
                class="j40-h4"
              >
-                Have a question about government services?
+                Want to contribute?
              </div>
              <ul
                class="usa-list usa-list--unstyled"
@ -134,12 +170,12 @@ exports[`J40Footer renders correctly 1`] = `
                >
                  <a
                    class="usa-link usa-link--external footer-link-first-child"
-                    data-cy="find-a-contact-at-usa-gov"
-                    href="https://www.usa.gov/"
+                    data-cy="check-out-the-code-on-github"
+                    href="https://github.com/usds/justice40-tool"
                    rel="noreferrer"
                    target="_blank"
                  >
-                    Find a contact at USA.gov
+                    Check out the code on GitHub
                  </a>
                </li>
              </ul>
--- a/client/src/components/J40Header/J40Header.tsx
+++ b/client/src/components/J40Header/J40Header.tsx
@ -6,6 +6,8 @@ import {
  PrimaryNav,
  Grid,
  Alert,
+  // NavDropDownButton,
+  // Menu,
 } from '@trussworks/react-uswds';
 import BetaBanner from '../BetaBanner';
 import J40MainGridContainer from '../J40MainGridContainer';
@ -16,43 +18,162 @@ import Language from '../Language';
 import siteLogo from '../../images/j40-logo-v2.png';
 import * as styles from './J40Header.module.scss';
 import * as COMMON_COPY from '../../data/copy/common';
+import {PAGES_ENDPOINTS} from '../../data/constants';

 const isAlertValid = new Date < COMMON_COPY.ALERTS.EXPIRATION_DATE;

 const J40Header = () => {
  const intl = useIntl();
-  const [mobileNavOpen, setMobileNavOpen] = useState(false);

  const titleL1 = intl.formatMessage(COMMON_COPY.HEADER.TITLE_LINE_1);
  const titleL2 = intl.formatMessage(COMMON_COPY.HEADER.TITLE_LINE_2);

+  /**
+   * State variable to control the mobile menu toggle
+   */
+  const [mobileNavOpen, setMobileNavOpen] = useState(false);
  const toggleMobileNav = (): void =>
    setMobileNavOpen((prevOpen) => !prevOpen);

+
+  /**
+   * The original work of this release called for creating a download page, a FAQ page and TSD page. These
+   * were to be embedded in dropdown menus in the navigation bar of the header. These were all completed.
+   * After discovering that the dropdown component from USWDS was not operating as expected, we decided to
+   * revert to another design.
+   *
+   * It was also decided that some more design was needed and that these pages along with their designs will
+   * be used in the near future. Rather than deleted the code or moving it to another branch, the assumption
+   * was made that since this will be added back in the near term, let's comment it out for now.
+   *
+   * If for some reason we haven't integrated this logic in the near future, this code will be deleted.
+   */
+
+  /**
+   * State variable to hold the open/close state of each nav dropdown. There are currently two
+   * dropdowns that are being used, each corresponding to an index in the state array:
+   *
+   * index 0 = Data & Methodology dropdown
+   * index 1 = About dropdown
+   */
+  // const [isOpen, setIsOpen] = useState([false, false]);
+  // const onToggle = (index: number): void => {
+  //   setIsOpen((prevIsOpen) => {
+  //     const newIsOpen = [false, false];
+  //     newIsOpen[index] = !prevIsOpen[index];
+  //     return newIsOpen;
+  //   });
+  // };
+
+  // const methPageSubNavLinks = [
+  //   <Link
+  //     to={PAGES_ENDPOINTS.METHODOLOGY}
+  //     key={'methodology'}
+  //     activeClassName="usa-current"
+  //     data-cy={'nav-link-methodology'}>
+  //     {intl.formatMessage(COMMON_COPY.HEADER.METHODOLOGY)}
+  //   </Link>,
+  //   <Link
+  //     to={PAGES_ENDPOINTS.DOWNLOADS}
+  //     key={'downloads'}
+  //     activeClassName="usa-current"
+  //     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>,
+  // ];
+
+  // const aboutSubNavLinks = [
+  //   <Link
+  //     to={PAGES_ENDPOINTS.ABOUT}
+  //     key={'about'}
+  //     activeClassName="usa-current"
+  //     data-cy={'nav-link-about'}>
+  //     {intl.formatMessage(COMMON_COPY.HEADER.ABOUT)}
+  //   </Link>,
+  //   <Link
+  //     to={PAGES_ENDPOINTS.FAQS}
+  //     key={'faqs'}
+  //     activeClassName="usa-current"
+  //     data-cy={'nav-link-faqs'}>
+  //     {intl.formatMessage(COMMON_COPY.HEADER.FAQs)}
+  //   </Link>,
+  //   <Link
+  //     to={PAGES_ENDPOINTS.PUBLIC_ENG}
+  //     key={'publicEng'}
+  //     activeClassName="usa-current"
+  //     data-cy={'nav-link-public-engagement'}>
+  //     {intl.formatMessage(COMMON_COPY.HEADER.PUBLIC_ENG)}
+  //   </Link>,
+  // ];
+
  const navLinks = [
    <Link
-      to={'/'}
-      key={'about'}
-      activeClassName="usa-current"
-      data-cy={'nav-link-about'}>
-      {intl.formatMessage(COMMON_COPY.HEADER.ABOUT)}
-    </Link>,
-    <Link
-      to={'/cejst'}
-      key={'cejst'}
+      to={PAGES_ENDPOINTS.EXPLORE}
+      key={'explore-tool'}
      activeClassName="usa-current"
      data-cy={'nav-link-explore-the-tool'}>
      {intl.formatMessage(COMMON_COPY.HEADER.EXPLORE)}
    </Link>,
    <Link
-      to={'/methodology'}
+      to={PAGES_ENDPOINTS.METHODOLOGY}
      key={'methodology'}
      activeClassName="usa-current"
      data-cy={'nav-link-methodology'}>
      {intl.formatMessage(COMMON_COPY.HEADER.METHODOLOGY)}
    </Link>,
    <Link
-      to={'/contact'}
+      to={PAGES_ENDPOINTS.ABOUT}
+      key={'about'}
+      activeClassName="usa-current"
+      data-cy={'nav-link-about'}>
+      {intl.formatMessage(COMMON_COPY.HEADER.ABOUT)}
+    </Link>,
+    // <>
+    //   <NavDropDownButton
+    //     key="methDropDown"
+    //     label={intl.formatMessage(COMMON_COPY.HEADER.METHODOLOGY)}
+    //     menuId="methMenu"
+    //     isOpen={isOpen[0]}
+    //     onToggle={(): void => onToggle(0)}
+    //     data-cy={'nav-dropdown-methodology'}
+    //     className={styles.navDropDownBtn}
+    //   >
+    //   </NavDropDownButton>
+    //   <Menu
+    //     id='methMenu'
+    //     type='subnav'
+    //     items={methPageSubNavLinks}
+    //     isOpen={isOpen[0]}
+    //   >
+    //   </Menu>
+    // </>,
+    // <>
+    //   <NavDropDownButton
+    //     key="aboutDropDown"
+    //     label={intl.formatMessage(COMMON_COPY.HEADER.ABOUT)}
+    //     menuId="aboutMenu"
+    //     isOpen={isOpen[1]}
+    //     onToggle={(): void => onToggle(1)}
+    //     data-cy={'nav-dropdown-about'}
+    //   >
+    //   </NavDropDownButton>
+    //   <Menu
+    //     id='aboutMenu'
+    //     type='subnav'
+    //     items={aboutSubNavLinks}
+    //     isOpen={isOpen[1]}
+    //   >
+    //   </Menu>
+    // </>,
+    <Link
+      to={PAGES_ENDPOINTS.CONTACT}
      key={'contact'}
      activeClassName="usa-current"
      data-cy={'nav-link-contact'}>
@ -93,6 +214,7 @@ const J40Header = () => {

          {/* Nav links */}
          <Grid col={'fill'} className={styles.navLinks}>
+
            <NavMenuButton
              key={'mobileMenuButton'}
              onClick={toggleMobileNav}
@ -102,7 +224,8 @@ const J40Header = () => {
              items={navLinks}
              mobileExpanded={mobileNavOpen}
              onToggleMobileNav={toggleMobileNav}
-            />
+            >
+            </PrimaryNav>
          </Grid>

        </Grid>
--- a/client/src/components/J40Header/snapshots/J40Header.test.tsx.snap
+++ b/client/src/components/J40Header/snapshots/J40Header.test.tsx.snap
@ -218,22 +218,12 @@ exports[`rendering of the J40Header checks if component renders 1`] = `
            <ul
              class="usa-nav__primary usa-accordion"
            >
-              <li
-                class="usa-nav__primary-item"
-              >
-                <a
-                  data-cy="nav-link-about"
-                  href="/en/"
-                >
-                  About
-                </a>
-              </li>
              <li
                class="usa-nav__primary-item"
              >
                <a
                  data-cy="nav-link-explore-the-tool"
-                  href="/en/cejst"
+                  href="/en/"
                >
                  Explore the tool
                </a>
@ -248,6 +238,16 @@ exports[`rendering of the J40Header checks if component renders 1`] = `
                  Methodology & data
                </a>
              </li>
+              <li
+                class="usa-nav__primary-item"
+              >
+                <a
+                  data-cy="nav-link-about"
+                  href="/en/about"
+                >
+                  About
+                </a>
+              </li>
              <li
                class="usa-nav__primary-item"
              >
--- a/client/src/components/LinkTypeWrapper/LinkTypeWrapper.tsx
+++ b/client/src/components/LinkTypeWrapper/LinkTypeWrapper.tsx
@ -31,7 +31,9 @@ interface ILinkTypeWrapper {
 const LinkTypeWrapper = (props:ILinkTypeWrapper) => {
  if (props.internal) {
    return (
-      <Link to={`${props.url}`}>
+      <Link to={`${props.url}`}
+        className={props.className}
+      >
        {props.linkText}
      </Link>
    );
--- a/client/src/components/LinkTypeWrapper/linkTypeWrapper.test.tsx
+++ b/client/src/components/LinkTypeWrapper/linkTypeWrapper.test.tsx
@ -2,6 +2,7 @@ import * as React from 'react';
 import {render} from '@testing-library/react';
 import LinkTypeWrapper from './index';
 import {LocalizedComponent} from '../../test/testHelpers';
+import {PAGES_ENDPOINTS} from '../../data/constants';

 describe('testing all link types', () => {
  it('tests internal links', () => {
@ -10,7 +11,7 @@ describe('testing all link types', () => {
          <LinkTypeWrapper
            linkText={'test link text'}
            internal={true}
-            url={'/methodology'}
+            url={PAGES_ENDPOINTS.METHODOLOGY}
            openUrlNewTab={false}
          />
        </LocalizedComponent>,
--- a/client/src/components/PublicEngageButton/PublicEngageButton.module.scss
+++ b/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%);
+              }
+            }
+          }
    }

 }
--- a/client/src/components/PublicEngageButton/PublicEngageButton.module.scss.d.ts
+++ b/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;
+
    }
  }

--- a/client/src/components/PublicEngageButton/PublicEngageButton.tsx
+++ b/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>
--- a/client/src/components/PublicEngageButton/snapshots/PublicEngageButton.test.tsx.snap
+++ b/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>
--- a/client/src/components/scoreStepsList.tsx
+++ b/client/src/components/scoreStepsList.tsx
@ -1,91 +0,0 @@
-import React from 'react';
-import {
-  ProcessList,
-  ProcessListItem,
-  ProcessListHeading,
-  Grid,
-} from '@trussworks/react-uswds';
-import {useIntl} from 'gatsby-plugin-intl';
-
-import * as METHODOLOGY_COPY from '../data/copy/methodology';
-
-const ScoreStepsList = () => {
-  const intl = useIntl();
-
-  return (
-    <>
-      <h2>
-        {intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.HEADING)}
-      </h2>
-      <Grid row>
-        <Grid col={7}>
-          <p>
-            {intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.DESCRIPTION_1)}
-          </p>
-          <p>
-            {intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.DESCRIPTION_2)}
-          </p>
-        </Grid>
-      </Grid>
-
-      <ProcessList>
-
-        {/* Step 1 */}
-        <ProcessListItem>
-
-          <ProcessListHeading type="h3">
-            {intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_HEADING)}
-          </ProcessListHeading>
-          <p>{' '}</p>
-          <p className={'flush'}>
-            {intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_INFO)}
-          </p>
-
-          {/* Step 1 A */}
-          <h4>
-            {intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_A_HEADING)}
-          </h4>
-          <p className={'flush'}>
-            {intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_A_INFO_1)}
-          </p>
-          <p>
-            {intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_A_INFO_2)}
-          </p>
-
-          {/* Step 1 B */}
-          <h4>
-            {intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_B_HEADING)}
-          </h4>
-          {METHODOLOGY_COPY.COMPLEX_METH_STEPS.STEP_2_B_INFO}
-
-          {/* Step 1 C */}
-          <h4>
-            {intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_C_HEADING)}
-          </h4>
-          <p className={'flush'}>
-            {intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_C_INFO)}
-          </p>
-        </ProcessListItem>
-
-        {/* Step 2 */}
-        <ProcessListItem>
-
-          <ProcessListHeading type="h3">
-            {intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_2_HEADING)}
-          </ProcessListHeading>
-
-          <p>{' '}</p>
-          <p className={'flush'}>
-            {intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_2_INFO)}
-          </p>
-
-          {METHODOLOGY_COPY.COMPLEX_METH_STEPS.FORMULA}
-
-        </ProcessListItem>
-
-      </ProcessList>
-    </>
-  );
-};
-
-export default ScoreStepsList;