Site content and style update for sprint2/3 (#279)

* add legend and styling for map page
* update header to latest style/content
* add contact page
* add methodology page
#199 and #200

client/src/components/HowYouCanHelp.tsx

@@ -5,7 +5,7 @@ const HowYouCanHelp = () => {
   return (
     <div className={styles.howYouCanHelpContainer}>
       <h2>How You Can Help Improve the Tool</h2>
-      <ul>
+      <ul className={'usa-list'}>
         <li>If you have information that could help, we’d love to hear from you.</li>
         <li>View our full set of data sources and methodology
             where you can add or download sources and check statuses on our data roadmap.</li>

client/src/components/J40Header.tsx

@@ -1,10 +1,11 @@
 import React, {useState} from 'react';
 import {Link, useIntl} from 'gatsby-plugin-intl';
 import {
+  Alert,
   Header,
   NavMenuButton,
   PrimaryNav,
-  SiteAlert,
+  GovBanner,
   Title,
 } from '@trussworks/react-uswds';
 import {Helmet} from 'react-helmet';
@@ -30,26 +31,42 @@ const J40Header = () => {
     const menuData = new Map<string, JSX.Element>([
       ['about',
         <Link
-          key={'about'} className={'j40-header'}
-          to={'/'}>About</Link>],
-      ['timeline',
-        <Link
-          to={'/timeline'}
-          key={'timline'}
-          className={'j40-header'}>Timeline</Link>],
+          to={'/'}
+          key={'about'}
+          activeClassName="usa-current"
+          className={'j40-header'}>About</Link>],
       ['cejst',
         <Link
           to={'/cejst'}
           key={'cejst'}
-          className={'j40-header'}>CEJST</Link>],
+          activeClassName="usa-current"
+          className={'j40-header'}>Explore the tool</Link>],
+      ['methodology',
+        <Link
+          to={'/methodology'}
+          key={'methodology'}
+          activeClassName="usa-current"
+          className={'j40-header'}>Methodology</Link>],
+      ['contact',
+        <Link
+          to={'/contact'}
+          key={'contact'}
+          activeClassName="usa-current"
+          className={'j40-header'}>Contact</Link>],
+      ['timeline',
+        <Link
+          to={'/timeline'}
+          key={'timline'}
+          activeClassName="usa-current"
+          className={'j40-header'}>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 =
-      flags?.includes('timeline') ?
-        ['about', 'timeline', 'cejst'] :
-        ['about', 'timeline', 'cejst']; // ['about', 'cejst'];
+      flags?.includes('sprint3') ?
+        ['about', 'cejst', 'methodology', 'contact'] :
+        ['about', 'cejst', 'methodology', 'contact'];
     // TODO: make feature flags flags work.
     return menu.map((key) => menuData.get(key));
   };
@@ -60,21 +77,18 @@ const J40Header = () => {
         <meta charSet="utf-8"/>
         <title>{title}</title>
       </Helmet>
-      {/* <GovBanner/> */}
-      <SiteAlert
-        variant="info"
-        className={'j40-sitealert'}>
-        <b>Welcome to Justice40&apos;s Temporary Home</b> While Justice40 gets
-        up and running, we are using GitHub Pages as a temporary website
-        host. To learn more about GitHub Pages, click
-        <a href="https://pages.github.com/">here</a>.
-      </SiteAlert>
+      <GovBanner/>
       <Header
         basic={true} role={'banner'}
         className={'usa-header j40-header'}>
         <div className="usa-nav-container">
           <div className="usa-navbar">
-            <Title>{title}</Title>
+            <Title>{title}
+              <div className={'byline'}>
+                A climate and economic justice screening tool
+              </div>
+            </Title>
+
             <NavMenuButton
               key={'mobileMenuButton'}
               onClick={toggleMobileNav}
@@ -89,6 +103,25 @@ 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.
+        <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/MapLegend.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+const MapLegend = () => {
+  return (
+    <>
+      <dl className={'j40-maplegend'}>
+        <h4>Color Key</h4>
+        <dt className={'mapsquare-a'}>&nbsp;</dt>
+        <dd>Prioritized community</dd>
+        <dt className={'mapsquare-b'}>&nbsp;</dt>
+        <dd>Threshold community</dd>
+        <dt className={'mapsquare-c'}>$nbsp;</dt>
+        <dd>Non-Prioritized community</dd>
+      </dl>
+    </>
+  );
+};
+
+export default MapLegend;