Tomn usds/template8 (#118)

* Fix issues from #120
* Include USWDS scss into build.
  Allows us to do theme things. Compile time slower... Not sure if it's worth it since most items can be overridden in css and we can't theme the Navbar (e.g. invert colors).
* Update J40Footer.spec.tsx.snap
* Update gatsby-config.js

client/src/components/J40Aside.tsx

@@ -9,45 +9,38 @@ const J40Aside = () => {
   return (
     <>
       <aside
-        aria-labelledby="left-sidebar"
-        className={'j40-aside desktop:grid-col-3'}
-        id="left-sidebar">
-        <section
-          className={'usa-prose grid-gap grid-container usa-section'}>
-          <h3 className={'j40-aside-title'}>Get Involved</h3>
-          <h5>
-            <img
-              className={'flex-align-self-center width-4'} src={chatIcon}
-              alt={'chat icon'}/>
-            <br/>
-          Send Feedback
-          </h5>
-          <p>Have ideas about how to acknowledge the on-the-ground
-          experiences of your community?
-          </p>
-        Email: <a href="mailto: justice40open@usds.gov">
-        justice40open@usds.gov</a>
-          <p>&nbsp;</p>
-          <h5>
-            <img
-              className={'flex-align-self-center width-4'}
-              src={githubIcon} alt={'github icon'}/>
-            <br/>
-          Join the open source community</h5>
-          <p>
-          Justice40’s code is open source, which means it is available for
-          the public to view and contribute. Anyone can view and
-          contribute on GitHub.
-          </p>
-          <p>
-            <a
-              href={'https://github.com/usds/justice40-tool/' +
-            'crisis-at-home-and-abroad/'}
-              target={'_blank'}
-              rel={'noreferrer'}
-              key={'github3'}>Check it out on GitHub</a>
-          </p>
-        </section>
+        aria-labelledby="right-sidebar"
+        className={'j40-aside desktop:grid-col-3 usa-prose usa-section'}
+        id="right-sidebar">
+        <h1>Get Involved</h1>
+        <h2><img
+          className={'flex-align-self-center width-4 j40-aside-icon'}
+          src={chatIcon} alt={'chat icon'}/>
+        Send Feedback</h2>
+        <p className={'usa-prose site-prose'}>Have ideas about how to
+        acknowledge the on-the-ground experiences of your community?
+        </p>
+      Email: <a href="mailto: justice40open@usds.gov">
+      justice40open@usds.gov</a>
+        <p>&nbsp;</p>
+        <h2>
+          <img
+            className={'flex-align-self-center width-4 j40-aside-icon'}
+            src={githubIcon} alt={'github icon'}/>
+        Join the open source community</h2>
+        <p>
+        Justice40’s code is open source, which means it is available for
+        the public to view and contribute. Anyone can view and
+        contribute on GitHub.
+        </p>
+        <p>
+          <a
+            href={'https://github.com/usds/justice40-tool/' +
+          'crisis-at-home-and-abroad/'}
+            target={'_blank'}
+            rel={'noreferrer'}
+            key={'github3'}>Check it out on GitHub</a>
+        </p>
       </aside>
     </>
   );

client/src/components/J40Footer.tsx

@@ -8,6 +8,7 @@ const J40Footer = () => {
     <>
       <Footer
         size="big"
+        className={'j40-footer'}
         primary={<></>}
         secondary={<FooterNav
           aria-label="Footer navigation"
@@ -66,13 +67,12 @@ const J40Footer = () => {
                       alt={'Whitehouse logo'}/>
                   }
                   heading={<p
-                    className={' j40-footer-logo-heading'}>
+                    className={'j40-footer-logo-heading'}>
                     Council on Environmental Quality</p>}
                 />
               </>,
               <>
                 <Address
-                  className={'j40-address-readability'}
                   key={'footeraddress'}
                   items={[
                     '730 Jackson Pl NW',

client/src/components/J40Header.tsx

@@ -1,22 +1,15 @@
-import React from 'react';
-import {GovBanner,
+import React, {useState} from 'react';
+import {Link, useIntl} from 'gatsby-plugin-intl';
+import {
   Header,
-  Title,
+  NavMenuButton,
   PrimaryNav,
-  SiteAlert} from '@trussworks/react-uswds';
-import {useIntl, Link} from 'gatsby-plugin-intl';
+  SiteAlert,
+  Title,
+} from '@trussworks/react-uswds';
 import {Helmet} from 'react-helmet';
 import {useFlags} from '../contexts/FlagContext';
 
-const headerLinks = (flags: string[] | undefined) => {
-  const timelineLink = <Link key="/timeline" to="/timeline"> Timeline </Link>;
-  const links = [];
-  if (flags && flags.includes('timeline')) {
-    links.push(timelineLink);
-  }
-  return links;
-};
-
 const J40Header = () => {
   const flags = useFlags();
   const intl = useIntl();
@@ -25,29 +18,75 @@ const J40Header = () => {
     defaultMessage: 'Justice40',
     description: 'Title of the project',
   });
+
+  const [mobileNavOpen, setMobileNavOpen] = useState(false);
+
+  const toggleMobileNav = (): void =>
+    setMobileNavOpen((prevOpen) => !prevOpen);
+
+  const headerLinks = (flags: string[] | undefined) => {
+    // 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>([
+      ['about',
+        <Link
+          key={'about'} className={'j40-header'}
+          to={'/'}>About</Link>],
+      ['timeline',
+        <Link
+          to={'/timeline'}
+          key={'timline'}
+          className={'j40-header'}>Timeline</Link>],
+      ['cejst',
+        <Link
+          to={'/#cejst'}
+          key={'cejst'}
+          target={'_blank'}
+          className={'j40-header'}>CEJST</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'];
+    // TODO: make feature flags flags work.
+    return menu.map((key) => menuData.get(key));
+  };
+
   return (
     <>
       <Helmet>
         <meta charSet="utf-8"/>
         <title>{title}</title>
       </Helmet>
+      {/* <GovBanner/> */}
       <SiteAlert
         variant="info"
-        heading="Welcome to Justice40's Temporary Home">
-        <p>
-        While Justice40 gets up and running,
-        we are using GitHub Pages as a temporary website host. <br/>
-        To learn more about GitHub Pages, click &nbsp;
-          <a href="https://pages.github.com/">here</a>.
-        </p>
+        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 className={'j40-header'} basic={true} role={'banner'}>
+      <Header
+        basic={true} role={'banner'}
+        className={'usa-header j40-header'}>
         <div className="usa-nav-container">
           <div className="usa-navbar">
-            <Title className={'j40-title'}>{title}</Title>
+            <Title>{title}</Title>
+            <NavMenuButton
+              key={'mobileMenuButton'}
+              onClick={toggleMobileNav}
+              label="Menu"/>
           </div>
-          <PrimaryNav items={headerLinks(flags)} />
+          <PrimaryNav
+            items={headerLinks(flags)}
+            mobileExpanded={mobileNavOpen}
+            onToggleMobileNav={toggleMobileNav}
+            className={'j40-header'}
+          >
+          </PrimaryNav>
         </div>
       </Header>
     </>

client/src/components/__snapshots__/J40Footer.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`J40Footer renders correctly 1`] = `
 <DocumentFragment>
   <footer
-    class="usa-footer usa-footer--big"
+    class="usa-footer usa-footer--big j40-footer"
   >
     <div
       class="usa-footer__primary-section"
@@ -180,7 +180,7 @@ exports[`J40Footer renders correctly 1`] = `
                       class="grid-col-auto"
                     >
                       <p
-                        class=" j40-footer-logo-heading"
+                        class="j40-footer-logo-heading"
                       >
                         Council on Environmental Quality
                       </p>
@@ -194,7 +194,7 @@ exports[`J40Footer renders correctly 1`] = `
                     class="usa-footer__secondary-link"
                   >
                     <address
-                      class="usa-footer__address j40-address-readability"
+                      class="usa-footer__address"
                     >
                       <div
                         class="usa-footer__contact-info grid-row grid-gap"

client/src/components/layout.tsx

@@ -1,7 +1,8 @@
 import React, {ReactNode} from 'react';
-import * as styles from './layout.module.scss';
+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';
 
 interface ILayoutProps {
@@ -12,11 +13,20 @@ interface ILayoutProps {
 const Layout = ({children, location}: ILayoutProps) => {
   return (
     <URLFlagProvider location={location}>
-      <div className={styles.site}>
-        <J40Header />
-        <div className={styles.siteContent}>{children}</div>
-        <J40Footer />
-      </div>
+      <J40Header/>
+      <GridContainer containerSize={'desktop-lg'}
+        className={'j40-grid-container'}>
+        <Grid row>
+          <main id={'main-content'}
+            className={'usa-layout-docs desktop:grid-col-9 j40-main-content'}>
+            <section className={'usa-prose'}>
+              {children}
+            </section>
+          </main>
+          <J40Aside/>
+        </Grid>
+      </GridContainer>
+      <J40Footer/>
     </URLFlagProvider>
   );
 };