Refactor layout (#486)

* Refactor to move `<DatasetContainer>` out of layout
* `<DatasetContainer>` is now in the methodology page. Starting the review there will help understand the motive for this change.
* Fixed 404 page which seems way out of date.
* Use row/col grid syntax

client/src/components/J40MainGridContainer.tsx

@@ -0,0 +1,30 @@
+// Trussworks GridContainer won't allow it to span 100% of the page, so
+// this works around it and tries to hide the complexity in component
+import React, {ReactNode} from 'react';
+import {GridContainer} from '@trussworks/react-uswds';
+
+interface ILayoutProps {
+  children: ReactNode,
+  fullWidth?: boolean,
+  className?: string
+}
+
+const J40MainGridContainer = ({
+  children,
+  fullWidth = false,
+  className = 'j40-grid-container'}: ILayoutProps) => {
+  return fullWidth ? (
+    <div
+      className={'j40-grid-container ' + className}>
+      {children}
+    </div>
+  ) : (
+    <GridContainer
+      containerSize={'desktop-lg'}
+      className={'j40-grid-container ' + className}>
+      {children}
+    </GridContainer>
+  );
+};
+
+export default J40MainGridContainer;

client/src/components/layout.tsx

@@ -1,10 +1,7 @@
 import React, {ReactNode} from 'react';
-import {GridContainer, Grid} from '@trussworks/react-uswds';
 import J40Header from './J40Header';
 import J40Footer from './J40Footer';
 import {URLFlagProvider} from '../contexts/FlagContext';
-import DatasetContainer from '../components/DatasetContainer';
-// this has to be wrong
 
 interface ILayoutProps {
   children: ReactNode,
@@ -12,22 +9,13 @@ interface ILayoutProps {
 }
 
 const Layout = ({children, location}: ILayoutProps) => {
-  const isMethodologyPage = location.pathname.match(/methodology\/?/);
-
   // @ts-ignore
   return (
     <URLFlagProvider location={location}>
       <J40Header location={location}/>
-      <GridContainer containerSize={'desktop-lg'}
-        className={'j40-grid-container'}>
-        <Grid row>
-          <main id={'main-content'}
-            className={'usa-layout-docs j40-main-content desktop:grid-col-12'}>
+      <main id={'main-content'}>
         {children}
       </main>
-        </Grid>
-      </GridContainer>
-      {isMethodologyPage ? <DatasetContainer />: null}
       <J40Footer/>
     </URLFlagProvider>
   );

client/src/pages/404.tsx

@@ -1,14 +1,12 @@
 import * as React from 'react';
+import Layout from '../components/layout';
+import J40MainGridContainer from '../components/J40MainGridContainer';
 import {Link} from 'gatsby-plugin-intl';
+import {Grid} from '@trussworks/react-uswds';
 
 // styles
-const pageStyles = {
-  color: '#232129',
-  padding: '96px',
-  fontFamily: '-apple-system, Roboto, sans-serif, serif',
-};
 const headingStyles = {
-  marginTop: 0,
+  marginTop: 32,
   marginBottom: 64,
   maxWidth: 320,
 };
@@ -16,6 +14,7 @@ const headingStyles = {
 const paragraphStyles = {
   marginBottom: 48,
 };
+
 const codeStyles = {
   color: '#8A6534',
   padding: 4,
@@ -24,30 +23,39 @@ const codeStyles = {
   borderRadius: 4,
 };
 
+interface I404PageProps {
+  location: Location;
+}
+
 // markup
-const NotFoundPage = () => {
-  return (
-    <main style={pageStyles}>
-      <title>Not found</title>
+const NotFoundPage =({location}: I404PageProps) => {
+  return (<Layout location={location}>
+    <J40MainGridContainer>
+      <Grid row><Grid col>
         <h1 style={headingStyles}>Page not found</h1>
+      </Grid></Grid>
+      <Grid row><Grid col>
         <p style={paragraphStyles}>
             Sorry{' '}
           <span role="img" aria-label="Pensive emoji">
             😔
           </span>{' '}
             we couldn’t find what you were looking for.
-        <br />
+          <br/>
           {process.env.NODE_ENV === 'development' ? (
               <>
-            <br />
-            Try creating a page in <code style={codeStyles}>src/pages/</code>.
-            <br />
+                <br/>
+                Try creating a page
+                in <code style={codeStyles}>src/pages/</code>.
+                <br/>
               </>
             ) : null}
-        <br />
+          <br/>
           <Link to="/">Go home</Link>.
         </p>
-    </main>
+      </Grid></Grid>
+    </J40MainGridContainer>
+  </Layout>
   );
 };
 

client/src/pages/cejst.tsx

@@ -3,27 +3,30 @@ import Layout from '../components/layout';
 import MapWrapper from '../components/mapWrapper';
 import HowYouCanHelp from '../components/HowYouCanHelp';
 import DownloadPacket from '../components/downloadPacket';
+import J40MainGridContainer from '../components/J40MainGridContainer';
 import * as styles from './cejst.module.scss';
+import {Grid} from '@trussworks/react-uswds';
+
 
 interface IMapPageProps {
   location: Location;
 }
 
-
 const CEJSTPage = ({location}: IMapPageProps) => {
   // We temporarily removed MapControls, which would enable you to `setFeatures` also, for now
   //   We will bring back later when we have interactive controls.
-  return (
-    <Layout location={location}>
+  return (<Layout location={location}>
+    <J40MainGridContainer>
+      <Grid row><Grid col>
         <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
+                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
@@ -38,10 +41,10 @@ const CEJSTPage = ({location}: IMapPageProps) => {
                 </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
+                Download the Just Progress packet or explore the map below to
+                see the list of prioritized communities. To learn more about
+                how
+                these communities were prioritized check out the
                 &nbsp;
                 <a
                   href={'./methodology'}>
@@ -54,13 +57,21 @@ const CEJSTPage = ({location}: IMapPageProps) => {
             <DownloadPacket/>
           </div>
         </section>
+      </Grid></Grid>
 
+      <Grid row><Grid col>
+        <section>
+          <MapWrapper location={location}/>
+        </section>
+      </Grid></Grid>
+
+      <Grid row><Grid col>
         <section>
-        <MapWrapper location={location} />
           <HowYouCanHelp/>
         </section>
-    </Layout>
-  );
+      </Grid></Grid>
+    </J40MainGridContainer>
+  </Layout>);
 };
 
 export default CEJSTPage;

client/src/pages/contact.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import Layout from '../components/layout';
+import J40MainGridContainer from '../components/J40MainGridContainer';
 import {FormattedMessage} from 'gatsby-plugin-intl';
+import {Grid} from '@trussworks/react-uswds';
 
 interface ContactPageProps {
   location: Location;
@@ -11,6 +13,8 @@ const ContactPage = ({location}: ContactPageProps) => {
   const techemail = 'screeningtool.support@usds.gov';
 
   return (<Layout location={location}>
+    <J40MainGridContainer>
+      <Grid row><Grid col>
         <section className={'usa-prose'}>
           <h2><FormattedMessage
             id={'contact.pageheader'}
@@ -29,7 +33,8 @@ const ContactPage = ({location}: ContactPageProps) => {
               For general feedback, email {general_email_address}
           `}
               values={{
-            general_email_address: <a href={`mailto:${generalemail}`}>{generalemail}</a>,
+                general_email_address:
+                    <a href={`mailto:${generalemail}`}>{generalemail}</a>,
               }}/>
           </p>
           <p>
@@ -40,10 +45,13 @@ const ContactPage = ({location}: ContactPageProps) => {
               For technical support, email {tech_email_address}
           `}
               values={{
-            tech_email_address: <a href={`mailto:${techemail}`}>{techemail}</a>,
+                tech_email_address:
+                    <a href={`mailto:${techemail}`}>{techemail}</a>,
               }}/>
           </p>
         </section>
+      </Grid></Grid>
+    </J40MainGridContainer>
   </Layout>
   );
 };

client/src/pages/index.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react';
 import Layout from '../components/layout';
 import AreasOfFocusList from '../components/areasOfFocusList';
+import J40MainGridContainer from '../components/J40MainGridContainer';
 import {FormattedMessage, useIntl} from 'gatsby-plugin-intl';
 import {defineMessages} from 'react-intl';
+import {Grid} from '@trussworks/react-uswds';
 
 interface IndexPageProps {
   location: Location;
@@ -48,6 +50,8 @@ const IndexPage = ({location}: IndexPageProps) => {
   });
 
   return (<Layout location={location}>
+    <J40MainGridContainer>
+      <Grid row><Grid col>
         <section className={'usa-prose'}>
           <h1>{intl.formatMessage(messages.aboutHeader)}</h1>
 
@@ -63,7 +67,7 @@ const IndexPage = ({location}: IndexPageProps) => {
           `}/></p>
 
           <p><FormattedMessage
-        id='index.aboutContent.p2'
+            id="index.aboutContent.p2"
             description={'paragraph 2 of main content on index page'}
             defaultMessage={`
             Federal agencies will prioritize benefits using a new
@@ -86,11 +90,14 @@ const IndexPage = ({location}: IndexPageProps) => {
           Read more about the Justice40 Initiative in President Biden’s 
           {presidentLink}
           `}
-        values={{presidentLink:
-              <a href={intl.formatMessage(messages.presidentalLinkUri)}
-                target='_blank'
-                rel='noreferrer'>{intl.formatMessage(messages.presidentalLinkLabel)}
-              </a>}}/>
+            values={{
+              presidentLink:
+                <a
+                  href={intl.formatMessage(messages.presidentalLinkUri)}
+                  target="_blank"
+                  rel="noreferrer">{intl.formatMessage(messages.presidentalLinkLabel)}
+                </a>,
+            }}/>
           </p>
 
           <h2><FormattedMessage
@@ -98,7 +105,7 @@ const IndexPage = ({location}: IndexPageProps) => {
             description={'section 2 header'}
             defaultMessage={'Areas of Focus'}/></h2>
 
-      <AreasOfFocusList />
+          <AreasOfFocusList/>
 
           <h2><FormattedMessage
             id={'index.section3.header'}
@@ -126,7 +133,8 @@ const IndexPage = ({location}: IndexPageProps) => {
               who’s interested can be involved in the tool-building
               process.`}
               values={{
-            inlineHeader: <i>{intl.formatMessage(messages.transparentLabel)}</i>,
+                inlineHeader:
+                  <i>{intl.formatMessage(messages.transparentLabel)}</i>,
               }}/>
           </p>
 
@@ -143,7 +151,8 @@ const IndexPage = ({location}: IndexPageProps) => {
               to understand their needs and ask for their input.
           `}
               values={{
-            inlineHeader: <i>{intl.formatMessage(messages.inclusiveLabel)}</i>,
+                inlineHeader:
+                  <i>{intl.formatMessage(messages.inclusiveLabel)}</i>,
               }}/>
           </p>
 
@@ -165,12 +174,14 @@ const IndexPage = ({location}: IndexPageProps) => {
               engagement.
           `}
               values={{
-            inlineHeader: <i>{intl.formatMessage(messages.iterativeLabel)}</i>,
+                inlineHeader:
+                  <i>{intl.formatMessage(messages.iterativeLabel)}</i>,
               }}/>
           </p>
         </section>
-  </Layout>
-  );
+      </Grid></Grid>
+    </J40MainGridContainer>
+  </Layout>);
 };
 
 export default IndexPage;

client/src/pages/methodology.tsx

@@ -1,5 +1,8 @@
 import * as React from 'react';
 import Layout from '../components/layout';
+import DatasetContainer from '../components/DatasetContainer';
+import J40MainGridContainer from '../components/J40MainGridContainer';
+import {Grid} from '@trussworks/react-uswds';
 
 interface MethodPageProps {
   location: Location;
@@ -7,24 +10,27 @@ interface MethodPageProps {
 
 // markup
 const IndexPage = ({location}: MethodPageProps) => {
-  return (
-    <Layout location={location}>
+  return (<Layout location={location}>
+    <J40MainGridContainer>
+      <Grid row><Grid col>
         <section>
           <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,
+            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.
+            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
+            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
@@ -35,8 +41,15 @@ const IndexPage = ({location}: MethodPageProps) => {
               Index</b>
           </p>
         </section>
-    </Layout>
-  );
+      </Grid></Grid>
+    </J40MainGridContainer>
+
+    <J40MainGridContainer fullWidth={true}>
+      <Grid row><Grid col>
+        <DatasetContainer/>
+      </Grid></Grid>
+    </J40MainGridContainer>
+  </Layout>);
 };
 
 export default IndexPage;