publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-02-22 09:41:26 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Tomn usds/template8 (#118)

Browse source 
* 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
This commit is contained in:
TomNUSDS 2021-06-14 11:06:23 -07:00 • committed by GitHub
parent 96fb0e8805
commit 3837538e51
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 403 additions and 279 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
client/gatsby-config.js
View file

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

71
client/src/components/J40Aside.tsx
View file

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

4
client/src/components/J40Footer.tsx
View file

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

89
client/src/components/J40Header.tsx
View file

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

6
client/src/components/__snapshots__/J40Footer.spec.tsx.snap
View file

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

22
client/src/components/layout.tsx
View file

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

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

@ -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,126 +34,109 @@ const IndexPage = ({location}: IndexPageProps) => {
[washIcon, 'Clean water infrastructure'],
];
return (
<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,
President Biden created the Justice40 Initiative on January
27, 2021. The Justice40 Initiative directs 40% of the
benefits from federal investments in seven key areas to
overburdened and underserved communities.
</p>
return (<Layout location={location}>
<h2>About Justice40</h2>
<p>
In an effort to address historical environmental injustices,
President Biden created the Justice40 Initiative on January
27, 2021. The Justice40 Initiative directs 40% of the
benefits from federal investments in seven key areas to
overburdened and underserved communities.
</p>
<p>
Federal agencies will prioritize benefits using a new
climate and economic justice screening tool. This screening
tool will be a map that visualizes data to compare the
cumulative impacts of environmental, climate, and economic
factors. It is being developed by the Council on
Environmental Quality (CEQ) with guidance from environmental
justice leaders and communities affected by environmental
injustices. The first version of the screening tool will be
released in July 2021. However, the screening tool and data
being used will be continuously updated to better reflect
the lived experiences of community members.
</p>
<p>
Federal agencies will prioritize benefits using a new
climate and economic justice screening tool. This screening
tool will be a map that visualizes data to compare the
cumulative impacts of environmental, climate, and economic
factors. It is being developed by the Council on
Environmental Quality (CEQ) with guidance from environmental
justice leaders and communities affected by environmental
injustices. The first version of the screening tool will be
released in July 2021. However, the screening tool and data
being used will be continuously updated to better reflect
the lived experiences of community members.
</p>
<p>
Read more about the Justice40 Initiative in President
Biden’s <a
href={'https://www.whitehouse.gov/briefing-room/' +
'presidential-actions/2021/01/27/' +
'executive-order-on-tackling-the-climate-' +
'crisis-at-home-and-abroad/'}
target={'_blank'}
rel={'noreferrer'}>
Executive Order on Tackling the Climate Crisis at Home and
Abroad.</a>
</p>
<p>
Read more about the Justice40 Initiative in President
Biden’s <a
href={'https://www.whitehouse.gov/briefing-room/' +
'presidential-actions/2021/01/27/' +
'executive-order-on-tackling-the-climate-' +
'crisis-at-home-and-abroad/'}
target={'_blank'}
rel={'noreferrer'}>
Executive Order on Tackling the Climate Crisis at Home and
Abroad.</a>
</p>
<h3>Areas of Focus</h3>
<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 (
<li
key={`readmore_li_${index}`}
className={'usa-icon-list__item'}>
<div className={'usa-icon-list__icon'}>
<img
className={'j40-two-column-icons-spacing'}
key={`readmore_img_${index}`}
src={item[0]} alt={item[1] + ' icon'}/>
</div>
</div>
<div className={'grid-gap j40-two-column-confine'}>
<h4>Areas of Focus</h4>
<ul className={'usa-icon-list j40-two-column'}>
{readMoreList.map((item, index) => {
return (
<li
key={`readmore_li_${index}`}
className={'usa-icon-list__item'}>
<div className={'usa-icon-list__icon'}>
<img
className={'j40-two-column-icons-spacing'}
key={`readmore_img_${index}`}
src={item[0]} alt={item[1] + ' icon'}/>
</div>
<div
className={'usa-icon-list__content'}> {item[1]} </div>
</li>
);
})
}
</ul>
</div>
<div className={'grid-row grid-gap'}>
<div
className={'usa-prose text-asset-container'}>
<h4>A Transparent, Community-First Approach</h4>
className={'usa-icon-list__content'}> {item[1]} </div>
</li>
);
})
}
</ul>
</div>
</div>
<p>
Successful initiatives are guided by direct input from the
communities they are serving. CEQ commits to transparency,
inclusivity, and iteration in building this screening tool.
</p>
<p>
<i>Transparent:</i> The code and data behind the screening
tool are open source, meaning it is available for the public
to review and contribute to. This tool is being developed
publicly so that communities, academic experts, and anyone
who’s interested can be involved in the tool-building
process.
</p>
<h3>A Transparent, Community-First Approach</h3>
<p>
<i>Inclusive:</i> Many areas which lack investments also
lack environmental data and would be overlooked using
available environmental data. CEQ is actively reaching out
to groups that have historically been excluded from
decision-making, such as groups in rural and tribal areas,
to understand their needs and ask for their input.
</p>
<p>
Successful initiatives are guided by direct input from the
communities they are serving. CEQ commits to transparency,
inclusivity, and iteration in building this screening tool.
</p>
<p>
<i>Iterative:</i> The initial community prioritization list
provided by the screening tool is the beginning of a
collaborative process in score refinement, rather than a
final answer. CEQ has received recommendations on data sets
from community interviews, the White House Environmental
Justice Advisory Council, and through public comment, but
establishing a score that is truly representative will be a
long-term, ongoing process. As communities submit feedback
and recommendations, CEQ will continue to improve the tools
being built and the processes for stakeholder and public
engagement.
</p>
</div>
</div>
</div>
</section>
<J40Aside/>
</div>
<p>
<i>Transparent:</i> The code and data behind the screening
tool are open source, meaning it is available for the public
to review and contribute to. This tool is being developed
publicly so that communities, academic experts, and anyone
who’s interested can be involved in the tool-building
process.
</p>
</main>
</Layout>
<p>
<i>Inclusive:</i> Many areas which lack investments also
lack environmental data and would be overlooked using
available environmental data. CEQ is actively reaching out
to groups that have historically been excluded from
decision-making, such as groups in rural and tribal areas,
to understand their needs and ask for their input.
</p>
<p>
<i>Iterative:</i> The initial community prioritization list
provided by the screening tool is the beginning of a
collaborative process in score refinement, rather than a
final answer. CEQ has received recommendations on data sets
from community interviews, the White House Environmental
Justice Advisory Council, and through public comment, but
establishing a score that is truly representative will be a
long-term, ongoing process. As communities submit feedback
and recommendations, CEQ will continue to improve the tools
being built and the processes for stakeholder and public
engagement.
</p>
</Layout>
);
};

120
client/src/pages/timeline.tsx
View file

@ -1,81 +1,67 @@
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">
<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/>
<h2>Timeline</h2>
<h3>Throughout the Process</h3>
<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>
</main>
</div>
<h3>Milestones</h3>
<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>
</Layout>
);
};

155
client/src/styles/global.scss
View file

@ -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 {
background-color: #112f4e; /* todo: move color to theme */
color: white;
@include at-media("mobile-lg") {
.j40-grid-container {
padding-right: 0;
}
}
.j40-title {
font-size: xx-large;
.j40-header, .j40-primary-nav, .j40-header > li > a{
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 {
padding-bottom: 1em;
.j40-footer {
.usa-footer__contact-info {
justify-content: center;
line-height: 1.5;
text-align: center;
}
.j40-footer-logo {
display: inline-block;
text-align: center;
}
}
.j40-footer-logo {
display: inline-block;
text-align: center;
}
.j40-footer-logo-heading {
}
.j40-address-readability {
display: inline-block;
line-height: 1.5 !important; // trussworks issue
text-align: center;
// spacing top & bottom around main content
@include at-media("mobile-lg") {
.j40-main-content {
margin-bottom: 2rem;
margin-top: 2.5rem;
}
}
// 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;
}
}