From acfcf523a7e14bb812aca26356ddb02ab4f0d9f8 Mon Sep 17 00:00:00 2001
From: TomNUSDS <74203452+TomNUSDS@users.noreply.github.com>
Date: Mon, 7 Jun 2021 09:22:07 -0700
Subject: [PATCH] Add timeline page (#105)

* Add timeline page
* Factor out common aside into component.
* Update J40Footer.spec.tsx.snap
TODO: Get nav menu working.
---
 client/src/components/J40Aside.tsx            | 56 +++++++++++++
 client/src/components/J40Footer.tsx           |  3 +-
 .../__snapshots__/J40Footer.spec.tsx.snap     |  2 +-
 client/src/pages/index.tsx                    | 53 +------------
 client/src/pages/timeline.tsx                 | 79 +++++++++++++++++++
 client/src/styles/global.scss                 | 14 +++-
 6 files changed, 152 insertions(+), 55 deletions(-)
 create mode 100644 client/src/components/J40Aside.tsx
 create mode 100644 client/src/pages/timeline.tsx

diff --git a/client/src/components/J40Aside.tsx b/client/src/components/J40Aside.tsx
new file mode 100644
index 00000000..8f97a2d1
--- /dev/null
+++ b/client/src/components/J40Aside.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+// @ts-ignore
+import chatIcon from '/node_modules/uswds/dist/img/usa-icons/chat.svg';
+// @ts-ignore
+import githubIcon from '/node_modules/uswds/dist/img/usa-icons/github.svg';
+
+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>
+      </aside>
+    </>
+  );
+};
+
+export default J40Aside;
diff --git a/client/src/components/J40Footer.tsx b/client/src/components/J40Footer.tsx
index c6b0a46c..6210597c 100644
--- a/client/src/components/J40Footer.tsx
+++ b/client/src/components/J40Footer.tsx
@@ -11,8 +11,7 @@ const J40Footer = () => {
         primary={<></>}
         secondary={<FooterNav
           aria-label="Footer navigation"
-          size="big" // fyi you leave this off and it silently fails... lovely
-          className={'nobreak'}
+          size="big" // fyi you leave this off and it silently fails...
           links={[
             [
               'Agency Partners',
diff --git a/client/src/components/__snapshots__/J40Footer.spec.tsx.snap b/client/src/components/__snapshots__/J40Footer.spec.tsx.snap
index 1ced4458..0fe22eb8 100644
--- a/client/src/components/__snapshots__/J40Footer.spec.tsx.snap
+++ b/client/src/components/__snapshots__/J40Footer.spec.tsx.snap
@@ -16,7 +16,7 @@ exports[`J40Footer renders correctly 1`] = `
       >
         <nav
           aria-label="Footer navigation"
-          class="usa-footer__nav nobreak"
+          class="usa-footer__nav"
         >
           <div
             class="grid-row grid-gap-4"
diff --git a/client/src/pages/index.tsx b/client/src/pages/index.tsx
index 2d2e7258..6637e50b 100644
--- a/client/src/pages/index.tsx
+++ b/client/src/pages/index.tsx
@@ -7,10 +7,6 @@ import Layout from '../components/layout';
 // this inlines the svg as data:image/svg+xml For larger images this
 // can cause page bloat, but it should be fine here.
 // @ts-ignore
-import chatIcon from '/node_modules/uswds/dist/img/usa-icons/chat.svg';
-// @ts-ignore
-import githubIcon from '/node_modules/uswds/dist/img/usa-icons/github.svg';
-// @ts-ignore
 import ecoIcon from '/node_modules/uswds/dist/img/usa-icons/eco.svg';
 // @ts-ignore
 import busIcon from '/node_modules/uswds/dist/img/usa-icons/directions_bus.svg';
@@ -22,6 +18,7 @@ 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';
 
 
 // markup
@@ -41,10 +38,8 @@ const IndexPage = () => {
         <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'}>
+                <div className={'usa-prose text-asset-container'}>
                   <h2>About Justice40</h2>
                   <p>
                     In an effort to address historical environmental injustices,
@@ -152,49 +147,7 @@ const IndexPage = () => {
               </div>
             </div>
           </section>
-
-          {/* aside */}
-          <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>
-          </aside>
+          <J40Aside/>
         </div>
 
       </main>
diff --git a/client/src/pages/timeline.tsx b/client/src/pages/timeline.tsx
new file mode 100644
index 00000000..987e5cd3
--- /dev/null
+++ b/client/src/pages/timeline.tsx
@@ -0,0 +1,79 @@
+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';
+
+const TimelinePage = () => {
+  return (<Layout>
+    <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-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">
+                      <img
+                        className={'flex-align-self-center width-4'}
+                        src={renewIcon} alt={'renew icon'}/>
+                    </div>
+                    <div className={'usa-prose text-asset-container ' +
+                    'grid-col-fill'}>
+                      <p>Continuously engage with stakeholders and community
+                        members to get feedback on the screening tool, scoring,
+                        and overall process.</p>
+                      <p>Continuously source data that meets data principles as
+                        defined through community input.</p>
+                    </div>
+                  </div>
+                </div>
+
+                <h2>Milestones</h2>
+                <ol className={'usa-process-list'}>
+                  <li
+                    className={'j40-usa-process-list__item--complete ' +
+                      'usa-process-list__item padding-bottom-4 '}
+                    aria-details={'milestone 1 done'}>
+                    <h4
+                      className={'usa-process-list__heading'}
+                    >Milestone 1</h4>
+                    <p className={'margin-top-05'}>
+                        Publish data principles on this site by June 2021.</p>
+                  </li>
+                  <li
+                    className={'usa-process-list__item padding-bottom-4'}
+                    aria-details={'milestone 2 next'}>
+                    <h4
+                      className={'usa-process-list__heading'}
+                    >Milestone 2</h4>
+                    <p>Make the first version of a screening tool available
+                        by
+                        July 2021.</p>
+                  </li>
+                  <li
+                    className={'usa-process-list__item padding-bottom-4'}
+                    aria-details={'milestone 3'}>
+                    <h4
+                      className={'usa-process-list__heading'}
+                    >Milestone 3</h4>
+                    <p>Create a public scorecard to ensure accountability of
+                        investments by February 2022.</p>
+                  </li>
+                </ol>
+              </div>
+            </div>
+          </div>
+        </section>
+        <J40Aside/>
+      </div>
+    </main>
+  </Layout>
+  );
+};
+
+export default TimelinePage;
diff --git a/client/src/styles/global.scss b/client/src/styles/global.scss
index 15f2fa23..c7897e98 100644
--- a/client/src/styles/global.scss
+++ b/client/src/styles/global.scss
@@ -39,7 +39,6 @@
 
 .j40-title {
   font-size: xx-large;
-  font-family: "Merriweather Web";
 }
 
 .j40-aside {
@@ -60,6 +59,17 @@
 
 .j40-address-readability {
   display: inline-block;
-  line-height: 1.5 !important;
+  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
+.j40-usa-process-list__item--complete {
+  &::before {
+    color: white;
+    background-color: #00a91c;
+    content: '✓'
+  }
+
+  border-left-color: #005ea2 !important;  // todo: fix
+}