mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-02-22 17:44:20 -08:00
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
This commit is contained in:
TomNUSDS
GitHub
parent
96fb0e8805
commit
3837538e51
9 changed files with 403 additions and 279 deletions
|
|
@ -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`,
|
||||
|
|
|
|||
|
|
@ -9,31 +9,25 @@ 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?
|
||||
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> </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</h5>
|
||||
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
|
||||
|
|
@ -47,7 +41,6 @@ const J40Aside = () => {
|
|||
rel={'noreferrer'}
|
||||
key={'github3'}>Check it out on GitHub</a>
|
||||
</p>
|
||||
</section>
|
||||
</aside>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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
|
||||
<a href="https://pages.github.com/">here</a>.
|
||||
</p>
|
||||
className={'j40-sitealert'}>
|
||||
<b>Welcome to Justice40'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>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<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'}>
|
||||
return (<Layout location={location}>
|
||||
<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'}>
|
||||
<h4>Areas of Focus</h4>
|
||||
<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 (
|
||||
|
|
@ -103,11 +94,10 @@ const IndexPage = ({location}: IndexPageProps) => {
|
|||
}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={'grid-row grid-gap'}>
|
||||
<div
|
||||
className={'usa-prose text-asset-container'}>
|
||||
<h4>A Transparent, Community-First Approach</h4>
|
||||
|
||||
<h3>A Transparent, Community-First Approach</h3>
|
||||
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<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>
|
||||
<h2>Timeline</h2>
|
||||
<h3>Throughout the Process</h3>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue