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;

client/src/pages/cejst.tsx

@@ -3,8 +3,8 @@ import Layout from '../components/layout';
 // import MapWrapper from '../components/map';
 import MapWrapper from '../components/mapWrapper';
 import HowYouCanHelp from '../components/HowYouCanHelp';
-import {Alert} from '@trussworks/react-uswds';
 import * as styles from './cejst.module.scss';
+import MapLegend from '../components/MapLegend';
 
 
 interface IMapPageProps {
@@ -17,39 +17,26 @@ const CEJSTPage = ({location}: IMapPageProps) => {
   return (
     <Layout location={location}>
       <main id="main-content" role="main">
+        <h2>Just Progress communities</h2>
         <p className={styles.disclaimer}>
-          The Climate and Economic Justice Screening Tool helps
-          identify and prioritize communities across the United
-          States and US territories that have been historically
-          overburdened and underserved so that they may receive
-          40% of the benefits from investments in six key areas as
-          outlined in the <a
+          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
+          <a
             href={'https://www.whitehouse.gov/briefing-room/' +
-                    'presidential-actions/2021/01/27/' +
-                    'executive-order-on-tackling-the-climate-' +
-                    'crisis-at-home-and-abroad/'}
+            '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>.
-          Explore the map below or learn
-          more about the methodology and data indicators used to
-          prioritize Justice40 communities.
+            Executive Order on Tackling the Climate Crisis at Home and
+            Abroad</a>.
         </p>
-        <Alert
-          type="warning"
-          heading="Limited Data Sources">
-          <p>
-            In this tool, we are using data sources that our
-            combined by our cumulative impact methodology.
-            Our sources were selected because sit amet,
-            consectetur adipiscing. See all the sources we
-            are investigating on our data roadmap.
-          </p>
-        </Alert>
         <h2>Explore the Tool</h2>
         <MapWrapper/>
-        <HowYouCanHelp />
+        <MapLegend/>
+        <HowYouCanHelp/>
       </main>
     </Layout>
   );

client/src/pages/contact.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import Layout from '../components/layout';
+
+interface ContactPageProps {
+  location: Location;
+}
+
+const ContactPage = ({location}: ContactPageProps) => {
+  return (<Layout location={location}>
+    <section className={'usa-prose'}>
+      <h1>Contact</h1>
+      <p>
+        <i>Information pending</i>
+      </p>
+    </section>
+  </Layout>
+  );
+};
+
+export default ContactPage;

client/src/pages/index.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import Layout from '../components/layout';
 
-// import {GridContainer, Grid} from '@trussworks/react-uswds';
 
 // this section seems too verbose? must be a more readable way to do this.
 // this inlines the svg as data:image/svg+xml For larger images this
@@ -18,7 +17,8 @@ import pollutionIcon // @ts-ignore
   from '/node_modules/uswds/dist/img/usa-icons/severe_weather.svg';
 // @ts-ignore
 import washIcon from '/node_modules/uswds/dist/img/usa-icons/wash.svg';
-
+// @ts-ignore
+import publicIcon from '/node_modules/uswds/dist/img/usa-icons/public.svg';
 
 interface IndexPageProps {
   location: Location;
@@ -27,6 +27,7 @@ interface IndexPageProps {
 // markup
 const IndexPage = ({location}: IndexPageProps) => {
   const readMoreList: (any | string)[][] = [
+    [publicIcon, 'Climate change'],
     [ecoIcon, 'Clean energy and energy efficiency'],
     [busIcon, 'Clean transit'],
     [homeIcon, 'Affordable and sustainable housing'],

client/src/pages/methodology.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import Layout from '../components/layout';
+
+interface MethodPageProps {
+  location: Location;
+}
+
+// markup
+const IndexPage = ({location}: MethodPageProps) => {
+  return (<Layout location={location}>
+    <section className={'usa-prose'}>
+      <h1>Methodology</h1>
+      <p>
+        The Just Progress tool combines demographic, environmental, and
+        socio-economic data to generate a cumulative index score, referred to
+        as the Just Progress Index. The tool currently utilizes national,
+        publically-available data from the United States Census Bureau’s
+        American Community Survey (ACS) and the EPA’s EJScreen tool.
+      </p>
+      <p>
+        The various inputs into the Just Progress Index are averaged into 2
+        categories: Pollution Burden and Demographics.
+      </p>
+      <p>
+        Pollution Burden: health risks arising from proximity and potential
+        exposures to pollution and other adverse environmental conditions
+      </p>
+      <p>
+        Demographics: sensitive populations and socioeconomic factors that
+        make a community more vulnerable
+      </p>
+      <p>
+        <b>Pollution Burden average x Demographics average = Just Progress
+          Index</b>
+      </p>
+
+      <h2>Just Progress Index datasets</h2>
+
+      <p><i>Data pending</i></p>
+
+    </section>
+  </Layout>
+  );
+};
+
+export default IndexPage;

client/src/styles/global.scss

@@ -45,7 +45,7 @@ $j40-max-width: 80ex;
 .j40-two-column > * {
   display: inline-flex;
   width: 90%;
-  padding-bottom: 1.5em;
+  padding-bottom: 1.2em; /* space between items */
   padding-left: 1em;
 }
 
@@ -69,8 +69,7 @@ $j40-max-width: 80ex;
 .j40-header,
 .j40-primary-nav,
 .j40-header > li > a {
-  background-color: #112f4e; /* todo: move color to theme */
-  color: white !important;
+  color: #112f4e !important;
   z-index: 5;
 
   .usa-nav-container {
@@ -79,7 +78,7 @@ $j40-max-width: 80ex;
 
   span {
     // make sure the open close chevron is colored correctly
-    color: white;
+    color: #112f4e;
   }
 
   // this is the title
@@ -88,25 +87,14 @@ $j40-max-width: 80ex;
     font-family: "serif";
   }
 
-  .usa-current::after,
-  :hover::after {
-    background-color: #2491ff !important;
-  }
-
   // menu item font
   .usa-nav__primary {
     font-size: 1.2em;
   }
 
-  // invert the hover color so contrast stays good enough for accessibility
-  .usa-nav__primary a:not(.usa-button):hover {
-    background-color: #2491ff !important;
-  }
-
-  // this is the closebox, it's not easy to change the X color, so we change
-  // the background to keep it's contrast high
-  .usa-nav__close {
-    background-color: white;
+  .byline {
+    font-size: .4em;
+    font-weight: normal;
   }
 }
 
@@ -195,10 +183,44 @@ $j40-max-width: 80ex;
     margin: 0;
   }
 
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  min-height: 4em;
 
-  .usa-alert:before {
-    margin-top: 12px !important;
+  * + .usa-alert {
+    margin: 0 !important;
+  }
+}
+
+.j40-maplegend {
+  dt {
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    overflow: hidden;
+    border: 1px solid #282828;
+  }
+
+  dd {
+    vertical-align: top;
+    padding-top: 0.1em;
+
+    display: inline-block;
+    width: 12em;
+    margin: 0 0 0 1em;
+  }
+
+  .mapsquare-a {
+    background-color: #1A4480;
+    color: #1A4480;
+  }
+  .mapsquare-b {
+    background-color: #a9a9aa;
+    color: #a9a9aa;
+  }
+
+  .mapsquare-c {
+    background-color: #ecececff;
+    color: #ecececff;
   }
 }