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