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/gatsby-config.js

@@ -7,6 +7,11 @@ module.exports = {
     {
       resolve: 'gatsby-plugin-sass',
       options: {
+        sassOptions: {
+          includePaths: [
+            './node_modules/uswds',
+          ],
+        },
         cssLoaderOptions: {
           modules: {
             exportLocalsConvention: 'camelCaseOnly',
@@ -15,7 +20,7 @@ module.exports = {
       },
     },
     {
-      resolve: `gatsby-plugin-intl`,
+      resolve: 'gatsby-plugin-intl',
       options: {
         // language JSON resource path
         path: `${__dirname}/src/intl`,

client/src/components/J40Aside.tsx

@@ -9,31 +9,25 @@ const J40Aside = () => {
   return (
     <>
       <aside
-        aria-labelledby="left-sidebar"
+        aria-labelledby="right-sidebar"
-        className={'j40-aside desktop:grid-col-3'}
+        className={'j40-aside desktop:grid-col-3 usa-prose usa-section'}
-        id="left-sidebar">
+        id="right-sidebar">
-        <section
+        <h1>Get Involved</h1>
-          className={'usa-prose grid-gap grid-container usa-section'}>
+        <h2><img
-          <h3 className={'j40-aside-title'}>Get Involved</h3>
+          className={'flex-align-self-center width-4 j40-aside-icon'}
-          <h5>
+          src={chatIcon} alt={'chat icon'}/>
-            <img
+        Send Feedback</h2>
-              className={'flex-align-self-center width-4'} src={chatIcon}
+        <p className={'usa-prose site-prose'}>Have ideas about how to
-              alt={'chat icon'}/>
+        acknowledge the on-the-ground experiences of your community?
-            <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>
+        <h2>
           <img
-              className={'flex-align-self-center width-4'}
+            className={'flex-align-self-center width-4 j40-aside-icon'}
             src={githubIcon} alt={'github icon'}/>
-            <br/>
+        Join the open source community</h2>
-          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
@@ -47,7 +41,6 @@ const J40Aside = () => {
             rel={'noreferrer'}
             key={'github3'}>Check it out on GitHub</a>
         </p>
-        </section>
       </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 React, {useState} from 'react';
-import {GovBanner,
+import {Link, useIntl} from 'gatsby-plugin-intl';
+import {
   Header,
-  Title,
+  NavMenuButton,
   PrimaryNav,
-  SiteAlert} from '@trussworks/react-uswds';
+  SiteAlert,
-import {useIntl, Link} from 'gatsby-plugin-intl';
+  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">
+        className={'j40-sitealert'}>
-        <p>
+        <b>Welcome to Justice40&apos;s Temporary Home</b> While Justice40 gets
-        While Justice40 gets up and running,
+        up and running, we are using GitHub Pages as a temporary website
-        we are using GitHub Pages as a temporary website host. <br/>
+        host. To learn more about GitHub Pages, click <a href="https://pages.github.com/">here</a>.
-        To learn more about GitHub Pages, click &nbsp;
-          <a href="https://pages.github.com/">here</a>.
-        </p>
       </SiteAlert>
-      <GovBanner/>
+      <Header
-      <Header className={'j40-header'} basic={true} role={'banner'}>
+        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/>
-        <J40Header />
+      <GridContainer containerSize={'desktop-lg'}
-        <div className={styles.siteContent}>{children}</div>
+        className={'j40-grid-container'}>
-        <J40Footer />
+        <Grid row>
-      </div>
+          <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>
   );
 };

client/src/pages/index.tsx

@@ -18,11 +18,10 @@ 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';
-import J40Aside from '../components/J40Aside';
 
 interface IndexPageProps {
   location: Location;
-};
+}
 
 // markup
 const IndexPage = ({location}: IndexPageProps) => {
@@ -35,14 +34,7 @@ const IndexPage = ({location}: IndexPageProps) => {
     [washIcon, 'Clean water infrastructure'],
   ];
 
-  return (
+  return (<Layout location={location}>
-    <Layout location={location}>
-      <main id="main-content" role="main">
-        <div className={'grid-row grid-gap-2'}>
-          <section className={'grid-container usa-section'}>
-            <div className={'desktop:grid-col'}>
-              <div className={'grid-row grid-gap'}>
-                <div className={'usa-prose text-asset-container'}>
     <h2>About Justice40</h2>
     <p>
         In an effort to address historical environmental injustices,
@@ -78,11 +70,10 @@ const IndexPage = ({location}: IndexPageProps) => {
         Executive Order on Tackling the Climate Crisis at Home and
         Abroad.</a>
     </p>
-                </div>
-              </div>
 
-              <div className={'grid-gap j40-two-column-confine'}>
+    <h3>Areas of Focus</h3>
-                <h4>Areas of Focus</h4>
+    <div className={'grid-row grid-gap'}>
+      <div className={'j40-two-column-confine'}>
         <ul className={'usa-icon-list j40-two-column'}>
           {readMoreList.map((item, index) => {
             return (
@@ -103,11 +94,10 @@ const IndexPage = ({location}: IndexPageProps) => {
           }
         </ul>
       </div>
+    </div>
 
-              <div className={'grid-row grid-gap'}>
+
-                <div
+    <h3>A Transparent, Community-First Approach</h3>
-                  className={'usa-prose text-asset-container'}>
-                  <h4>A Transparent, Community-First Approach</h4>
 
     <p>
     Successful initiatives are guided by direct input from the
@@ -146,14 +136,6 @@ const IndexPage = ({location}: IndexPageProps) => {
     being built and the processes for stakeholder and public
     engagement.
     </p>
-                </div>
-              </div>
-            </div>
-          </section>
-          <J40Aside/>
-        </div>
-
-      </main>
   </Layout>
   );
 };

client/src/pages/timeline.tsx

@@ -1,24 +1,17 @@
 import * as React from 'react';
 import Layout from '../components/layout';
-import J40Aside from '../components/J40Aside';
 
 // @ts-ignore
 import renewIcon from '/node_modules/uswds/dist/img/usa-icons/autorenew.svg';
 
 interface TimelinePageProps {
-  location: URL;
+  location: Location;
-};
+}
 
 const TimelinePage = ({location}: TimelinePageProps) => {
   return (<Layout location={location}>
-    <main id="main-content" role="main">
+    <h2>Timeline</h2>
-      <div className={'grid-row grid-gap-2'}>
+    <h3>Throughout the Process</h3>
-        <section className={'grid-container usa-section'}>
-          <div className={'desktop:grid-col'}>
-            <div className={'grid-row grid-gap-lg'}>
-              <div className={'grid-gap-lg'}>
-                <h1>Timeline</h1>
-                <h2>Throughout the Process</h2>
     <div className="grid-col">
       <div className="grid-row grid-gap-lg">
         <div className="grid-col-1">
@@ -37,7 +30,7 @@ const TimelinePage = ({location}: TimelinePageProps) => {
       </div>
     </div>
 
-                <h2>Milestones</h2>
+    <h3>Milestones</h3>
     <ol className={'usa-process-list'}>
       <li
         className={'j40-usa-process-list__item--complete ' +
@@ -69,13 +62,6 @@ const TimelinePage = ({location}: TimelinePageProps) => {
             investments by February 2022.</p>
       </li>
     </ol>
-              </div>
-            </div>
-          </div>
-        </section>
-        <J40Aside/>
-      </div>
-    </main>
   </Layout>
   );
 };

client/src/styles/global.scss

@@ -1,15 +1,42 @@
+/*
+  These are necessary for the image and font urls referenced in the source
+  files to resolve correctly.
+*/
+$theme-image-path: '../../node_modules/uswds/src/img';
+$theme-font-path: '../../node_modules/uswds/src/fonts';
+
+/*
+  Example:
+
+  The url for the hero image in the source file is not currently prefixed by
+  the $theme-image-path above.
+
+  $theme-hero-image: '#{$theme-image-path}/hero.png';
+*/
+
+// Custom USWDS changes to variables go here
+// see https://designsystem.digital.gov/documentation/settings/
+$theme-show-compile-warnings: false;
+$theme-show-notifications: false;
+
+$theme-font-role-heading: "sans";
+
+@import '../../node_modules/uswds';
+
 @import "~@trussworks/react-uswds/lib/index.css";
-@import "~@trussworks/react-uswds/lib/uswds.css";
+
+// Custom SASS/CSS goes here
+$j40-max-width: 80ex;
 
 .j40-two-column {
   overflow: hidden;
   padding: 0;
 
-  @media (min-width: 768px) {
+  @media (min-width: 40em) {
     column-count: 2;
     column-gap: 1em;
   }
-  @media (max-width: 768px) {
+  @media (max-width: 40em) {
     column-count: 1;
     column-gap: 0;
   }
@@ -29,47 +56,129 @@
 }
 
 .j40-two-column-confine {
+  display: inline-flex;
   max-width: fit-content;
 }
 
-.j40-header {
+@include at-media("mobile-lg") {
-  background-color: #112f4e; /* todo: move color to theme */
+  .j40-grid-container {
-  color: white;
+    padding-right: 0;
+  }
 }
 
-.j40-title {
+.j40-header, .j40-primary-nav, .j40-header > li > a{
-  font-size: xx-large;
+  background-color: #112f4e; /* todo: move color to theme */
+  color: white !important;
+  z-index: 5;
+
+  .usa-nav-container {
+    max-width: ($j40-max-width*2);
+  }
+
+  span {
+    // make sure the open close cheveron is colored correctly
+    color: white;
+  }
+
+  // this is the title
+  .usa-logo__text {
+    font-size: 1.8em;
+    font-family: "serif";
+  }
+
+  .usa-current::after, :hover::after {
+    background-color: #2491ff !important;
+  }
+
+  // menu item font
+  .usa-nav__primary {
+    font-size: 1.2em;
+  }
+
+  //media (max-width: 63.99em)
+  //.usa-nav__primary a:not(.usa-button):hover {}
 }
 
 .j40-aside {
   background-color: #eff6fb;
+  padding-right: 1em;
+  padding-left: 1em;
+
+  h1 {
+    font-weight: 100;
+    font-size: 2em;
+  }
+
+  h2 {
+    font-weight: 100;
+    font-size: 1.4em;
+  }
+
+  h3 {
+    font-weight: 100;
+    font-size: 1.3em;
+  }
+
+  .j40-aside-icon {
+    display: flex;
+    margin-top: 3px;
+    margin-bottom: 12px;
+  }
 }
 
-.j40-aside-title {
+.j40-footer {
-  padding-bottom: 1em;
+  .usa-footer__contact-info {
-}
+    justify-content: center;
+    line-height: 1.5;
+    text-align: center;
+  }
 
-.j40-footer-logo {
+  .j40-footer-logo {
     display: inline-block;
     text-align: center;
+  }
 }
 
-.j40-footer-logo-heading {
+// spacing top & bottom around main content
-}
+@include at-media("mobile-lg") {
-
+  .j40-main-content {
-.j40-address-readability {
+    margin-bottom: 2rem;
-  display: inline-block;
+    margin-top: 2.5rem;
-  line-height: 1.5 !important; // trussworks issue
+  }
-  text-align: center;
 }
 
 // This should really be part of uswds and use $theme-step-indicator-segment-color-complete
+// The Progress element doesn't really support color changing the line connecting progress
+// (like the Steps element does) and the checkbox.
+// The border-left-color required an !important to make work. Maybe add a feature request
+// to have the process list officially support a more Steps-like behavior
 .j40-usa-process-list__item--complete {
   &::before {
     color: white;
     background-color: #00a91c;
-    content: "✓";
   }
 
   border-left-color: #005ea2 !important; // todo: fix
 }
+
+// NOTE: uswds `.usa-prose` defines these all as Merriweather Web via $theme-font-role-heading
+.usa-prose {
+  h1, h2, h3, h4 {
+    font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
+  }
+  p, div {
+    max-width: $j40-max-width;
+  }
+}
+
+.j40-sitealert {
+  p {
+    margin: 0;
+  }
+  padding-top: 0;
+  padding-bottom: 0;
+  .usa-alert:before {
+    margin-top: 12px !important;
+  }
+}
+