fix #249 header 2 (#425)

* Header updates
* More pixel alignment for nav
* Update unit test snapshots
I removed a stray `,` from `testHelpers.tsx` which changed the output of several snapshots.
* Fixes from PR review
* Forgot to update snapshots after merge with main
* Removed unused (and outdated) timeline page
* Updated some translation descriptions.

client/src/components/J40Header.tsx

@@ -1,59 +1,58 @@
 import React, {useState} from 'react';
-import {Link, useIntl} from 'gatsby-plugin-intl';
+import {FormattedMessage, Link, useIntl} from 'gatsby-plugin-intl';
 import {
   Alert,
   Header,
   NavMenuButton,
   PrimaryNav,
   GovBanner,
-  Title,
 } from '@trussworks/react-uswds';
-import {Helmet} from 'react-helmet';
-import {useFlags} from '../contexts/FlagContext';
 import {defineMessages} from 'react-intl';
+// @ts-ignore
+import siteLogo from '../../src/images/icon.png';
 
 const J40Header = () => {
-  const flags = useFlags();
   const intl = useIntl();
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
   const messages = defineMessages({
-    title: {
-      id: 'header.title',
-      defaultMessage: 'Justice40',
-      description: 'Title in header',
+    titleLine1: {
+      id: 'header.title.line1',
+      defaultMessage: `Climate and Economic Justice`,
+      description: 'Title in nav header line 1 of 2',
+    },
+    titleLine2: {
+      id: 'header.title.line2',
+      defaultMessage: `Screening Tool`,
+      description: 'Title in nav header line 2 of 2',
     },
     about: {
       id: 'header.about',
       defaultMessage: 'About',
-      description: 'Navigate to the about page',
+      description: 'Header navigate item to the about page',
     },
     explore: {
       id: 'header.explore',
       defaultMessage: 'Explore the tool',
-      description: 'Navigate to the Explore the tool page',
+      description: 'Header navigate item to the Explore the tool page',
     },
     methodology: {
       id: 'header.methodology',
-      defaultMessage: 'Methodology',
-      description: 'Navigate to the Methodology page',
+      defaultMessage: 'Data & methodology',
+      description: 'Header navigate item to the Methodology page',
     },
     contact: {
       id: 'header.contact',
       defaultMessage: 'Contact',
-      description: 'Navigate to the Contact page',
-    },
-    timeline: {
-      id: 'header.timeline',
-      defaultMessage: 'Timeline',
-      description: 'Navigate to the Timeline page',
+      description: 'Header navigate item to the Contact page',
     },
   });
-  const title = intl.formatMessage(messages.title);
+  const titleL1 = intl.formatMessage(messages.titleLine1);
+  const titleL2 = intl.formatMessage(messages.titleLine2);
 
   const toggleMobileNav = (): void =>
     setMobileNavOpen((prevOpen) => !prevOpen);
 
-  const headerLinks = (flags: {[key: string] : any} | undefined) => {
+  const headerLinks = () => {
     // static map of all possible menu items. Originally, it was all strings,
     // but we need to handle both onsite and offsite links.
     const menuData = new Map<string, JSX.Element>([
@@ -81,49 +80,34 @@ const J40Header = () => {
           key={'contact'}
           activeClassName="usa-current"
           className={'j40-header'}>{intl.formatMessage(messages.contact)}</Link>],
-      ['timeline',
-        <Link
-          to={'/timeline'}
-          key={'timline'}
-          activeClassName="usa-current"
-          className={'j40-header'}>{intl.formatMessage(messages.timeline)}</Link>],
     ]);
 
-    // select which items from the above map to show, right now it's only two
-    // possibilities so it's simple. Note: strings are used as react keys
-    const menu =
-      ('sprint3' in flags!) ?
-        ['about', 'cejst', 'methodology', 'contact'] :
-        ['about', 'cejst', 'methodology', 'contact'];
-    // TODO: make feature flags flags work.
+    const menu =['about', 'cejst', 'methodology', 'contact'];
     return menu.map((key) => menuData.get(key));
   };
 
   return (
     <>
-      <Helmet htmlAttributes={{lang: intl.locale}}>
-        <meta charSet="utf-8"/>
-        <title>{title}</title>
-      </Helmet>
       <GovBanner/>
       <Header
         basic={true} role={'banner'}
         className={'usa-header j40-header'}>
         <div className="usa-nav-container">
           <div className="usa-navbar">
-            <Title>{title}
-              <div className={'byline'}>
-                A climate and economic justice screening tool
-              </div>
-            </Title>
-
+            <h1 className="usa-logo">
+              <img className="j40-sitelogo" src={siteLogo} alt={`${titleL1} ${titleL2}`} />
+              <span className={'usa-logo__text j40-title'}>
+                <span className={'j40-title-line1'}>{titleL1}</span><br/>
+                <span className={'j40-title-line2'}>{titleL2}</span>
+              </span>
+            </h1>
             <NavMenuButton
               key={'mobileMenuButton'}
               onClick={toggleMobileNav}
               label="Menu"/>
           </div>
           <PrimaryNav
-            items={headerLinks(flags)}
+            items={headerLinks()}
             mobileExpanded={mobileNavOpen}
             onToggleMobileNav={toggleMobileNav}
             className={'j40-header'}
@@ -131,25 +115,19 @@ const J40Header = () => {
           </PrimaryNav>
         </div>
       </Header>
-      <Alert
-        className={'j40-sitealert'}
-        type="info">
-        <b>Public beta — </b>
-        Welcome to the public beta of the Just Progress Map, a climate and
-        economic justice screening tool. The tool will be continuously updated.
-        Please submit feedback.
+      <Alert className={'j40-sitealert'} type="info">
+        <span className={'j40-sitealert-title'}><FormattedMessage
+          id='header.alertTitleBeta'
+          description={'Alerts that appear on every page - title'}
+          defaultMessage={`Public beta`}/> - </span>
+        <span className={'j40-sitealert-body'}>
+          <FormattedMessage
+            id='header.alertBodyBeta'
+            description={'Alerts that appear on every page'}
+            defaultMessage={`This website will be continuously updated`}/>
+        </span>
         <br/>
       </Alert>
-      <Alert
-        className={'j40-sitealert'}
-        type="warning">
-        <b>Limited data sources — </b>
-        This tool currently includes 16 datasets. Over time, datasets could be
-        added, updated, or removed. The datasets come from a variety of sources
-        based on availability, quality, and relevance to environmental, energy,
-        and climate issues. Each dataset has limitations, such as how recently
-        the data was updated.
-      </Alert>
     </>
   );
 };

client/src/components/__snapshots__/J40Footer.spec.tsx.snap

@@ -164,6 +164,5 @@ exports[`J40Footer renders correctly 1`] = `
       </div>
     </div>
   </footer>
-  ,
 </DocumentFragment>
 `;

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

@@ -154,6 +154,5 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
       </div>
     </li>
   </aside>
-  ,
 </DocumentFragment>
 `;

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

@@ -26,6 +26,5 @@ exports[`simulate app starting up, no click on map should match the snapshot of
       </div>
     </aside>
   </div>
-  ,
 </DocumentFragment>
 `;

client/src/components/layout.tsx

@@ -2,9 +2,9 @@ import React, {ReactNode} from 'react';
 import {GridContainer, Grid} from '@trussworks/react-uswds';
 import J40Header from './J40Header';
 import J40Footer from './J40Footer';
-import J40Aside from '../components/J40Aside';
 import {URLFlagProvider} from '../contexts/FlagContext';
-// this has to be wrong
+import {Helmet} from 'react-helmet';
+import {useIntl} from 'gatsby-plugin-intl';
 
 interface ILayoutProps {
   children: ReactNode,
@@ -12,23 +12,23 @@ interface ILayoutProps {
 }
 
 const Layout = ({children, location}: ILayoutProps) => {
-  const isWidthFullPage = location.pathname.match(/cejst\/?/);
-  const conditionalAside = isWidthFullPage ? <></> : <J40Aside/>;
-  const gridCssClass = isWidthFullPage ? ' desktop:grid-col-12' :
-    'desktop:grid-col-9';
+  const intl = useIntl();
 
   // @ts-ignore
   return (
     <URLFlagProvider location={location}>
+      <Helmet htmlAttributes={{lang: intl.locale}}>
+        <meta charSet="utf-8"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+      </Helmet>
       <J40Header/>
       <GridContainer containerSize={'desktop-lg'}
         className={'j40-grid-container'}>
         <Grid row>
           <main id={'main-content'}
-            className={'usa-layout-docs j40-main-content ' + gridCssClass}>
+            className={'usa-layout-docs j40-main-content desktop:grid-col-12'}>
             {children}
           </main>
-          {conditionalAside}
         </Grid>
       </GridContainer>
       <J40Footer/>