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/>

client/src/intl/en.json

@@ -24,7 +24,7 @@
     "description": "Households that are low income and spend more than 30% of their income to housing costs"
   },
   "areaDetail.indicator.linguisticIsolation": {
-    "defaultMessage": "Linguistic Isolation",
+    "defaultMessage": "Linguistic isolation",
     "description": "Households in which all members speak a non-English language and speak English less than \"very well\""
   },
   "areaDetail.indicator.poverty": {
@@ -32,7 +32,7 @@
     "description": "Household income is less than or equal to twice the federal \"poverty level\""
   },
   "areaDetail.indicator.unemployment": {
-    "defaultMessage": "Unemployment",
+    "defaultMessage": "Unemployment rate",
     "description": "Number of unemployed people as a percentage of the labor force"
   },
   "areaDetail.indicators.indicatorColumnHeader": {
@@ -83,6 +83,18 @@
     "defaultMessage": "Clean water infrastructure",
     "description": "item in areasOfInterest list"
   },
+  "contact.general": {
+    "defaultMessage": "For technical support, email {tech_email_address}",
+    "description": "Contact page body text"
+  },
+  "contact.pageheader": {
+    "defaultMessage": "Contact",
+    "description": "H2 header for contact page"
+  },
+  "contact.sectionheader": {
+    "defaultMessage": "Email us",
+    "description": "Heading for page to allow users to contact project maintainers"
+  },
   "footer.arialabel": {
     "defaultMessage": "Footer navigation",
     "description": "aria-label text for whole footer"
@@ -119,6 +131,14 @@
     "defaultMessage": "About",
     "description": "Navigate to the about page"
   },
+  "header.alertBodyBeta": {
+    "defaultMessage": "This website will be continuously updated",
+    "description": "Alerts that appear on every page"
+  },
+  "header.alertTitleBeta": {
+    "defaultMessage": "Public beta",
+    "description": "Alerts that appear on every page - title"
+  },
   "header.contact": {
     "defaultMessage": "Contact",
     "description": "Navigate to the Contact page"
@@ -128,16 +148,20 @@
     "description": "Navigate to the Explore the tool page"
   },
   "header.methodology": {
-    "defaultMessage": "Methodology",
+    "defaultMessage": "Data & methodology",
     "description": "Navigate to the Methodology page"
   },
   "header.timeline": {
     "defaultMessage": "Timeline",
     "description": "Navigate to the Timeline page"
   },
-  "header.title": {
-    "defaultMessage": "Justice40",
-    "description": "Title in header"
+  "header.title.line1": {
+    "defaultMessage": "Climate and Economic Justice",
+    "description": "Title in header line 1 of 2"
+  },
+  "header.title.line2": {
+    "defaultMessage": "Screening Tool",
+    "description": "Title in header line 2 of 2"
   },
   "index.aboutContent.header": {
     "defaultMessage": "About Justice40",
@@ -234,5 +258,17 @@
   "map.territoryFocus.puerto_rico.short": {
     "defaultMessage": "PR",
     "description": "The abbreviated name indicating the bounds of Puerto Rico"
+  },
+  "mapIntro.censusBlockGroupDefinition": {
+    "defaultMessage": "A census block group is generally between 600 and 3,000 people. It is the smallest geographical unit for which the U.S. Census Bureau publishes sample data.",
+    "description": "cites the definition and helpful information about census groups"
+  },
+  "mapIntro.didYouKnow": {
+    "defaultMessage": "Did you know?",
+    "description": "text prompting a cite paragraph"
+  },
+  "mapIntro.mapIntroHeader": {
+    "defaultMessage": "Zoom and select a census block group to view data",
+    "description": "introductory text of ways to use the map"
   }
 }

client/src/pages/cejst.tsx

@@ -15,45 +15,51 @@ const CEJSTPage = ({location}: IMapPageProps) => {
   //   We will bring back later when we have interactive controls.
   return (
     <Layout location={location}>
-      <main id="main-content" role="main">
-
-        <section>
-          <h2>Just Progress communities</h2>
-          <div className={styles.disclaimer}>
-            <div className={styles.textBox}>
-              <p>
-                Just Progress helps identify and prioritize communities across the United States and U.S. territories
-                that have been historically overburdened and underserved. These communities will receive 40% of
-                the benefits from investments in key areas outlined by the
-                &nbsp;
-                <a
-                  href={'https://www.whitehouse.gov/briefing-room/' +
-                    'presidential-actions/2021/01/27/' +
-                    'executive-order-on-tackling-the-climate-' +
-                    'crisis-at-home-and-abroad/'}
-                  target={'_blank'}
-                  rel={'noreferrer'}>
-                  Executive Order on Tackling the Climate Crisis at Home and Abroad
-                </a>.
-              </p>
-              <p>
-                Download the Just Progress packet or explore the map below to see the list of prioritized communites. To
-                learn more about how these communities were prioritized check out the
-                &nbsp;
-                <a
-                  href={'./methodology'}>
-                  Methodology
-                </a>
-                &nbsp;
-                page.
-              </p>
-            </div>
-            <DownloadPacket />
+      <section>
+        <h2>Just Progress communities</h2>
+        <div className={styles.disclaimer}>
+          <div className={styles.textBox}>
+            <p>
+              Just Progress helps identify and prioritize communities across the
+              United States and U.S. territories
+              that have been historically overburdened and underserved. These
+              communities will receive 40% of
+              the benefits from investments in key areas outlined by the
+              &nbsp;
+              <a
+                href={'https://www.whitehouse.gov/briefing-room/' +
+                'presidential-actions/2021/01/27/' +
+                'executive-order-on-tackling-the-climate-' +
+                'crisis-at-home-and-abroad/'}
+                target={'_blank'}
+                rel={'noreferrer'}>
+                Executive Order on Tackling the Climate Crisis at Home and
+                Abroad
+              </a>.
+            </p>
+            <p>
+              Download the Just Progress packet or explore the map below to see
+              the list of prioritized communites. To
+              learn more about how these communities were prioritized check out
+              the
+              &nbsp;
+              <a
+                href={'./methodology'}>
+                Methodology
+              </a>
+              &nbsp;
+              page.
+            </p>
           </div>
-        </section>
+          <DownloadPacket/>
+        </div>
+      </section>
+
+      <section>
+        <h2>Explore the Tool</h2>
         <MapWrapper location={location} />
-        <HowYouCanHelp />
-      </main>
+        <HowYouCanHelp/>
+      </section>
     </Layout>
   );
 };

client/src/pages/contact.tsx

@@ -1,16 +1,47 @@
 import * as React from 'react';
 import Layout from '../components/layout';
+import {FormattedMessage} from 'gatsby-plugin-intl';
 
 interface ContactPageProps {
   location: Location;
 }
 
 const ContactPage = ({location}: ContactPageProps) => {
+  const generalemail = 'screeningtool.feedback@usds.gov';
+  const techemail = 'screeningtool.support@usds.gov';
+
   return (<Layout location={location}>
     <section className={'usa-prose'}>
-      <h1>Contact</h1>
+      <h2><FormattedMessage
+        id={'contact.pageheader'}
+        description={'H2 header for contact page'}
+        defaultMessage={'Contact'}/></h2>
+      <h3><FormattedMessage
+        id={'contact.sectionheader'}
+        description={'Heading for page to allow users to contact project maintainers'}
+        defaultMessage={'Email us'}/></h3>
+
       <p>
-        <i>Information pending</i>
+        <FormattedMessage
+          id={'contact.general'}
+          description={'Contact page body text'}
+          defaultMessage={`
+              For general feedback, email {general_email_address}
+          `}
+          values={{
+            general_email_address: <a href={`mailto:${generalemail}`}>{generalemail}</a>,
+          }}/>
+      </p>
+      <p>
+        <FormattedMessage
+          id={'contact.general'}
+          description={'Contact page body text'}
+          defaultMessage={`
+              For technical support, email {tech_email_address}
+          `}
+          values={{
+            tech_email_address: <a href={`mailto:${techemail}`}>{techemail}</a>,
+          }}/>
       </p>
     </section>
   </Layout>

client/src/styles/global.scss

@@ -84,19 +84,60 @@ $primary-color: #112f4e;
   }
 
   // this is the title
-  .usa-logo__text {
-    font-size: 1.8em;
-    font-family: "serif";
+  @include at-media("desktop") {
+    .j40-title {
+      font-size: 0.9em;
+      padding-bottom: 0; // allows vertical centering on logo and text
+      font-weight: normal;
+    }
+
+    .usa-navbar {
+      width: 100%;
+    }
+
+    // this actual site logo
+    .sitelogo {
+      float: left; // allows vertical centering on logo and text
+      margin-right: 0.5em; // space between logo and text
+      width: 4em;
+      padding: 0.5em; // this will change the size of the logo too
+    }
+
+    // nav menu item font
+    .usa-nav__primary {
+      .usa-nav__primary-item {
+        a {
+          margin-bottom: 0.5em; // how far menu is from bottom edge of nav
+          font-weight: 600;
+        }
+      }
+    }
+
+    // this is forcing the whole toolbar much taller
+    .usa-logo {
+      margin-top: 1.2rem;
+      margin-bottom: 1.2rem;
+    }
   }
 
-  // menu item font
-  .usa-nav__primary {
-    font-size: 1.2em;
-  }
+  @include at-media("mobile") {
+    .usa-logo__text {
+      padding-top: 3px; // allows vertical centering on logo and text
+      padding-bottom: 0; // allows vertical centering on logo and text
+      font-weight: normal;
+    }
+
+    .usa-navbar {
+      width: 100%;
+    }
+
+    .j40-sitelogo {
+      float: left; // allows vertical centering on logo and text
+      margin-right: 0.5em; // space between logo and text
+      width: 3em;
+      padding: 0.4em;  // this will change the size of the logo too
+    }
 
-  .byline {
-    font-size: 0.3em;
-    font-weight: normal;
   }
 }
 
@@ -138,7 +179,7 @@ $primary-color: #112f4e;
 // spacing top & bottom around main content
 .j40-main-content {
   @include at-media("mobile-lg") {
-    margin-bottom: 2rem;
+    margin-bottom: 0;
     margin-top: 2.5rem;
   }
 
@@ -185,12 +226,32 @@ $primary-color: #112f4e;
     margin: 0;
   }
 
-  padding-top: 7px;
-  padding-bottom: 7px;
-  min-height: 4em;
+  min-height: 2.5em;
+  margin: 0;
 
-  * + .usa-alert {
-    margin: 0 !important;
+  .j40-sitealert-title {
+    font-weight: bold;
+  }
+
+  .j40-sitealert-body {
+  }
+
+  .usa-alert {
+    margin: 0;
+    padding-bottom: 0;
+    padding-top: 0;
+  }
+
+  .usa-alert__body {
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-bottom: 0;
+  }
+
+  .usa-alert__text {
+    padding-top: 0;
+    padding-bottom: 0;
+    margin-bottom: 0;
   }
 }
 
@@ -227,7 +288,7 @@ $primary-color: #112f4e;
 }
 
 .mapboxgl-ctrl-group {
-  border-radius: 0px;
+  border-radius: 0;
 }
 
 .mapboxgl-ctrl {
@@ -236,7 +297,7 @@ $primary-color: #112f4e;
   }
 
   button {
-    border-radius: 0px;
+    border-radius: 0;
     height: 1.66em;
     width: 1.66em;
     box-sizing: border-box;

client/src/test/testHelpers.tsx

@@ -21,7 +21,7 @@ export const LocalizedComponent = ({children}: ILocalizedComponentProps) => {
         <IntlProvider locale={'en'}>
           {children}
         </IntlProvider>
-      </IntlContextProvider>,
+      </IntlContextProvider>
     </>
   );
 };