publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-08-08 19:54:19 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add timeline page (#105)

Browse source 
* Add timeline page
* Factor out common aside into component.
* Update J40Footer.spec.tsx.snap
TODO: Get nav menu working.
This commit is contained in:
TomNUSDS 2021-06-07 09:22:07 -07:00 • committed by GitHub
commit acfcf523a7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 152 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

53
client/src/pages/index.tsx
View file

@ -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>

79
client/src/pages/timeline.tsx Normal file
View file

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