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

Adding consistent h and p tags (#639)

Browse source 
* Revert "dockerize front end (#558)"

This reverts commit 89c23faf7a.

* cleans up global.scss file

* removes all unused styles

* adds h1 and h2 via tokens

* adds design to developer pipeline

* adds headers to about page

* removes heading from logo

* adds headings to HowYouHelp and MapLegend

* adds headers to explore tool page

* updates about page with p tags

* add margin-bottom spacers

* updates areaDetail with p and h tags

* update p.secondary margin-top

* sticky footer on contact page

* fixes spacing in footer

* update designer process
This commit is contained in:
Vim 2021-09-09 10:02:56 -07:00 • committed by GitHub
commit 1b707cbc5c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
36 changed files with 2344 additions and 286 deletions
Download patch file Download diff file Expand all files Collapse all files

10
client/src/components/AboutCard/AboutCard.tsx
View file

@ -28,8 +28,8 @@ const AboutCard = (props: React.PropsWithChildren<AboutCardProps>) => {
<Grid tablet={{col: 9}}>
<Grid row>
<h3 className={'j40-section-header'} data-cy={'about-screen-tool-heading'}>{props.header} </h3>
<div className={'j40-section-body'}>{props.children}</div>
<h2 data-cy={'about-screen-tool-heading'}>{props.header} </h2>
<p>{props.children}</p>
</Grid>
</Grid>
@ -51,9 +51,9 @@ const AboutCard = (props: React.PropsWithChildren<AboutCardProps>) => {
<Grid tablet={{col: 9}}>
<Grid row>
<h3 className={'j40-section-header'} data-cy={'about-justice-40-heading'}>{props.header}</h3>
<div className={'j40-section-body'}>{props.children}</div>
<div className={'j40-section-footer'}>
<h3>{props.header}</h3>
<p>{props.children}</p>
<div className={'j40-aboutcard-sm-link'}>
{props.actionOpenInNewTab ?
<a
className={'j40-aboutcard-link'}

13
client/src/components/AboutCard/__snapshots__/AboutCard.test.tsx.snap
View file

@ -28,19 +28,14 @@ exports[`rendering of the AboutCard checks if component renders 1`] = `
class="grid-row"
data-testid="grid"
>
<h3
class="j40-section-header"
data-cy="about-justice-40-heading"
>
<h3>
Test Header
</h3>
<div
class="j40-section-body"
>
<p>
Content body of the action card.
</div>
</p>
<div
class="j40-section-footer"
class="j40-aboutcard-sm-link"
>
<a
class="j40-aboutcard-link"

10
client/src/components/AreaDetail/areaDetail.module.scss
View file

@ -108,8 +108,7 @@ $featureSelectBorderColor: #00bde3;
padding: 1rem;
}
.censusText,
.indicatorDescription {
.censusText {
font-size: small;
}
@ -126,7 +125,7 @@ $featureSelectBorderColor: #00bde3;
//Indicator box styles
.indicatorBox {
display: flex;
padding: 1.5rem 1rem;
padding: 0 1rem 1.5rem;
border-bottom: $sidePanelBorder;
@media screen and (max-width: $mobileBreakpoint) {
@ -140,11 +139,6 @@ $featureSelectBorderColor: #00bde3;
border-bottom: none;
}
.indicatorTitle {
font-size: large;
font-weight: bolder;
}
.indicatorValue {
flex: 1 0 37%;
align-self: center;

2
client/src/components/AreaDetail/areaDetail.module.scss.d.ts vendored
View file

@ -17,8 +17,6 @@ declare namespace MapModuleScssNamespace {
censusLabel:string;
divider:string;
indicatorBox:string;
indicatorTitle:string;
indicatorDescription:string;
indicatorValue:string;
score:string;
indicatorSuperscript: string;

16
client/src/components/AreaDetail/index.tsx
View file

@ -91,12 +91,12 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
},
indicatorColumnHeader: {
id: 'areaDetail.indicators.indicatorColumnHeader',
defaultMessage: 'INDICATORS',
defaultMessage: 'Indicators',
description: 'the population of the feature selected',
},
percentileColumnHeader: {
id: 'areaDetail.indicators.percentileColumnHeader',
defaultMessage: 'PERCENTILE (0-100)',
defaultMessage: 'Percentile (0-100)',
description: 'the population of the feature selected',
},
poverty: {
@ -181,7 +181,7 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
<div className={styles.topRowSubTitle}>{intl.formatMessage(messages.percentile)}</div>
</div>
<div className={styles.categorization}>
<div className={styles.topRowTitle}>{intl.formatMessage(messages.categorization)}</div>
<h6 className={styles.topRowTitle}>{intl.formatMessage(messages.categorization)}</h6>
<div className={styles.priority}>
<div className={categoryCircleStyle} />
<div className={styles.prioritization}>{categorization}</div>
@ -207,17 +207,17 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
</li>
</ul>
<div className={styles.divider}>
<div>{intl.formatMessage(messages.indicatorColumnHeader)}</div>
<div>{intl.formatMessage(messages.percentileColumnHeader)}</div>
<h6>{intl.formatMessage(messages.indicatorColumnHeader)}</h6>
<h6>{intl.formatMessage(messages.percentileColumnHeader)}</h6>
</div>
{indicators.map((indicator, index) => (
<li key={index} className={styles.indicatorBox} data-cy={'indicatorBox'}>
<div>
<div className={styles.indicatorTitle}>{indicator.label}</div>
<div className={styles.indicatorDescription}>
<h4>{indicator.label}</h4>
<p className={'secondary'}>
{indicator.description}
</div>
</p>
</div>
<div className={styles.indicatorValue}>
{readablePercentile(indicator.value)}

66
client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap
View file

@ -25,9 +25,9 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
</div>
</div>
<div>
<div>
<h6>
Categorization
</div>
</h6>
<div>
<div />
<div>
@ -67,23 +67,25 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
</li>
</ul>
<div>
<div>
INDICATORS
</div>
<div>
PERCENTILE (0-100)
</div>
<h6>
Indicators
</h6>
<h6>
Percentile (0-100)
</h6>
</div>
<li
data-cy="indicatorBox"
>
<div>
<div>
<h4>
Poverty
</div>
<div>
</h4>
<p
class="secondary"
>
Household income is less than or equal to twice the federal "poverty level"
</div>
</p>
</div>
<div>
9900
@ -98,12 +100,14 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
data-cy="indicatorBox"
>
<div>
<div>
<h4>
Education
</div>
<div>
</h4>
<p
class="secondary"
>
Percent of people age 25 or older that didn’t get a high school diploma
</div>
</p>
</div>
<div>
9800
@ -118,12 +122,14 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
data-cy="indicatorBox"
>
<div>
<div>
<h4>
Linguistic isolation
</div>
<div>
</h4>
<p
class="secondary"
>
Households in which all members speak a non-English language and speak English less than "very well"
</div>
</p>
</div>
<div>
9700
@ -138,12 +144,14 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
data-cy="indicatorBox"
>
<div>
<div>
<h4>
Unemployment rate
</div>
<div>
</h4>
<p
class="secondary"
>
Number of unemployed people as a percentage of the labor force
</div>
</p>
</div>
<div>
9600
@ -158,12 +166,14 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
data-cy="indicatorBox"
>
<div>
<div>
<h4>
Housing Burden
</div>
<div>
</h4>
<p
class="secondary"
>
Households that are low income and spend more than 30% of their income to housing costs
</div>
</p>
</div>
<div>
9500

5
client/src/components/HowYouCanHelp/howYouCanHelp.module.scss
View file

@ -9,11 +9,6 @@
}
}
.howYouCanHelpHeader {
color: $headingFontColor;
font-weight: normal;
}
.howYouCanHelpList {
list-style-type: disc;
padding-bottom: 1rem;

1
client/src/components/HowYouCanHelp/howYouCanHelp.module.scss.d.ts vendored
View file

@ -1,7 +1,6 @@
declare namespace HowYouCanHelpModuleScssNamespace {
export interface IHowYouCanHelpModuleScss {
howYouCanHelpContainer: string;
howYouCanHelpHeader: string;
howYouCanHelpBullet: string,
listWrapper: string;
howYouCanHelpText: string;

4
client/src/components/HowYouCanHelp/index.tsx
View file

@ -10,7 +10,7 @@ const HowYouCanHelp = () => {
const messages = defineMessages({
youCanHelpHeader: {
id: 'howYouCanHelp.header.text',
defaultMessage: 'How You Can Help Improve the Tool',
defaultMessage: 'How you can help improve the tool',
description: 'the header of the how you can help section',
},
youCanHelpInfoText: {
@ -52,7 +52,7 @@ const HowYouCanHelp = () => {
return (
<div className={styles.howYouCanHelpContainer}>
<h2 className={styles.howYouCanHelpHeader}>
<h2>
{intl.formatMessage(messages.youCanHelpHeader)}
</h2>
<ul className={styles.howYouCanHelpListWrapper}>

2
client/src/components/HowYouCanHelp/tests/__snapshots__/howYouCanHelp.test.tsx.snap
View file

@ -4,7 +4,7 @@ exports[`rendering of the HowYouCanHelp checks if various text fields are visibl
<DocumentFragment>
<div>
<h2>
How You Can Help Improve the Tool
How you can help improve the tool
</h2>
<ul>
<li>

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

@ -73,6 +73,7 @@ const J40Footer = () => {
[
intl.formatMessage(messages.moreinfoheader),
<a
className={'footer-link-first-child'}
key={'whitehouselink2'}
href={'https://www.whitehouse.gov/'}
target={'_blank'}
@ -95,6 +96,7 @@ const J40Footer = () => {
[
intl.formatMessage(messages.questionsheader),
<a
className={'footer-link-first-child'}
key={'contactlink'}
href={'https://www.usa.gov/'}>
{intl.formatMessage(messages.contactlink)}
@ -109,7 +111,7 @@ const J40Footer = () => {
// `className="mobile-lg:grid-col-6 desktop:grid-col-3">` needs to be
// `className="mobile-lg:grid-col-12 desktop:grid-col-4">` ugh.
<footer className={'j40-footer'}>
<div className="usa-footer__primary-section">
<div className="usa-footer__primary-section pb">
<J40MainGridContainer>
<div className={'grid-row grid-gap-4 padding-bottom-6 tablet-lg:grid-col4'}>
{NAVLINKS.map((links, i) => (
@ -134,9 +136,7 @@ const J40Footer = () => {
src={whitehouseIcon}
alt={intl.formatMessage(messages.whitehouselogoalt)}/>
}
heading={<p
className={'j40-footer-logo-heading'}>
{intl.formatMessage(messages.logotitle)}</p>}
heading={<h5>{intl.formatMessage(messages.logotitle)}</h5>}
/>
</J40MainGridContainer>
</div>

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

@ -93,13 +93,15 @@ const J40Header = () => {
className={'usa-header j40-header'}>
<div className="usa-nav-container">
<div className="usa-navbar">
<h1 className="usa-logo">
{/* Removing h1 from logo ease transition to USWDS tokens in headers */}
{/* https://wehavezeal.com/blog/web-development/2016/01/12/should-i-use-the-h1-tag-for-my-website-logo */}
<div className="usa-logo">
<img className="j40-sitelogo" src={siteLogo} alt={`${titleL1} ${titleL2}`} />
<span className={'usa-logo__text j40-title'}>
<span className={'j40-title-line1'}>{titleL1}</span><br/>
<span className={'j40-title-line2'}>{titleL2}</span>
</span>
</h1>
</div>
<NavMenuButton
key={'mobileMenuButton'}
onClick={toggleMobileNav}

8
client/src/components/J40MainGridContainer.tsx
View file

@ -3,7 +3,7 @@
import React, {ReactNode} from 'react';
import {GridContainer} from '@trussworks/react-uswds';
interface ILayoutProps {
interface IJ40MainGridContainer {
children: ReactNode,
fullWidth?: boolean,
blueBackground?: boolean,
@ -14,19 +14,19 @@ const J40MainGridContainer = ({
children,
fullWidth = false,
blueBackground = false,
className = ''}: ILayoutProps) => {
className = ''}: IJ40MainGridContainer) => {
// is it a blue background strip?
className += (blueBackground ? 'j40-main-grid-blue-bk ' : '');
return fullWidth ? (
<div
className={'j40-grid-container ' + className}>
className={className}>
{children}
</div>
) : (
<GridContainer
containerSize={'desktop-lg'}
className={'j40-grid-container ' + className}>
className={className}>
{children}
</GridContainer>
);

2
client/src/components/MapLegend/index.tsx
View file

@ -74,7 +74,7 @@ const MapLegend = () => {
return (
<div className={styles.legendContainer}>
<h3 className={styles.legendHeader}>{intl.formatMessage(constants.EXPLORE_TOOL_PAGE_TEXT.LEGEND_LABEL)}</h3>
<h6>{intl.formatMessage(constants.EXPLORE_TOOL_PAGE_TEXT.LEGEND_LABEL)}</h6>
<div className={styles.swatchContainer}>
<div className={styles.legendItem}>
<div className={styles.colorSwatch} id={styles.prioritized} />

5
client/src/components/MapLegend/mapLegend.module.scss
View file

@ -9,7 +9,7 @@ $alertInfoColor: #e7f6f8;
margin: 1rem 1.2rem 1rem 2.5rem;
font-size: 0.8em;
border: 1px solid #8c9297;
padding: 0 1.8rem;
padding: 1rem 1.8rem 0;
flex: 1;
color: $headingFontColor;
@ -23,9 +23,6 @@ $alertInfoColor: #e7f6f8;
}
}
.legendHeader {
margin-bottom: 0;
}
.swatchContainer {
display: flex;

1
client/src/components/MapLegend/mapLegend.module.scss.d.ts vendored
View file

@ -1,7 +1,6 @@
declare namespace HowYouCanHelpModuleScssNamespace {
export interface IHowYouCanHelpModuleScss {
legendContainer: string;
legendHeader: string;
swatchContainer: string;
colorSwatch: string;
prioritized: string,

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

@ -6,10 +6,10 @@ exports[`J40Footer renders correctly 1`] = `
class="j40-footer"
>
<div
class="usa-footer__primary-section"
class="usa-footer__primary-section pb"
>
<div
class="grid-container-desktop-lg j40-grid-container "
class="grid-container-desktop-lg"
data-testid="gridContainer"
>
<div
@ -82,6 +82,7 @@ exports[`J40Footer renders correctly 1`] = `
class="usa-footer__secondary-link"
>
<a
class="footer-link-first-child"
href="https://www.whitehouse.gov/"
rel="noreferrer"
target="_blank"
@ -132,6 +133,7 @@ exports[`J40Footer renders correctly 1`] = `
class="usa-footer__secondary-link"
>
<a
class="footer-link-first-child"
href="https://www.usa.gov/"
>
Find a contact at USA.gov
@ -147,7 +149,7 @@ exports[`J40Footer renders correctly 1`] = `
class="usa-footer__secondary-section"
>
<div
class="grid-container-desktop-lg j40-grid-container "
class="grid-container-desktop-lg"
data-testid="gridContainer"
>
<div
@ -166,11 +168,9 @@ exports[`J40Footer renders correctly 1`] = `
<div
class="mobile-lg:grid-col-auto"
>
<p
class="j40-footer-logo-heading"
>
<h5>
Council on Environmental Quality
</p>
</h5>
</div>
</div>
</div>

2
client/src/data/constants.tsx
View file

@ -143,7 +143,7 @@ export const EXPLORE_TOOL_PAGE_TEXT = defineMessages({
},
LEGEND_LABEL: {
id: 'legend.colorkey.label',
defaultMessage: 'COLOR KEY',
defaultMessage: 'Color key',
description: 'the label of the key in the legend',
},
});

8
client/src/pages/cejst.module.scss
View file

@ -1,13 +1,5 @@
@import "../components/utils.scss";
$primary-color: #112f4e;
h1.explorePageHeader {
font-weight: bolder;
margin-bottom: 0;
color: $headingFontColor;
}
.explorePageSubHeader {
display: flex;
flex-wrap: wrap;

56
client/src/pages/cejst.tsx
View file

@ -24,39 +24,45 @@ const CEJSTPage = ({location}: IMapPageProps) => {
<AlertWrapper showBetaAlert={true} showLimitedDataAlert={false}/>
</J40MainGridContainer>
<J40MainGridContainer className={'j40-main-content'}>
<Grid row><Grid col>
<section>
<h1 className={styles.explorePageHeader}>Explore the tool</h1>
<div className={styles.explorePageSubHeader}>
<div className={styles.explorePageHeaderText}>
<p>
<J40MainGridContainer>
<Grid row className={'j40-mb-5'}>
<Grid col>
<section>
<h1 className={styles.explorePageHeader}>Explore the tool</h1>
<div className={styles.explorePageSubHeader}>
<div className={styles.explorePageHeaderText}>
<p>
Zoom into the map to see which communities the tool has currently
identified as prioritized (the top 25% of communities) or on the
threshold. Learn more about the formula and datasets that were
used to prioritize these communities on the
{` `}
<Link to={'/methodology'}>Data & methodology</Link>
{` `}
{` `}
<Link to={'/methodology'}>Data & methodology</Link>
{` `}
page.
</p>
</p>
</div>
<MapLegend />
</div>
<MapLegend />
</div>
</section>
</Grid></Grid>
</section>
</Grid>
</Grid>
<Grid row><Grid col>
<section>
<MapWrapper location={location}/>
</section>
</Grid></Grid>
<Grid row>
<Grid col>
<section>
<MapWrapper location={location}/>
</section>
</Grid>
</Grid>
<Grid row><Grid col>
<section>
<HowYouCanHelp/>
</section>
</Grid></Grid>
<Grid row>
<Grid col>
<section>
<HowYouCanHelp/>
</section>
</Grid>
</Grid>
</J40MainGridContainer>
</Layout>);
};

47
client/src/pages/contact.tsx
View file

@ -20,28 +20,33 @@ const ContactPage = ({location}: ContactPageProps) => {
<AlertWrapper showBetaAlert={true} showLimitedDataAlert={false}/>
</J40MainGridContainer>
<J40MainGridContainer className={'usa-prose'}>
<Grid row><Grid col>
<h2><FormattedMessage
id={'contact.pageheader'}
description={'H2 header for contact page'}
defaultMessage={'Contact'}/></h2>
<h3><FormattedMessage
id={'contact.sectionheader'}
description={'Heading for page to allow users to contact project maintainers'}
defaultMessage={'Email us'}/></h3>
<p>
<FormattedMessage
id={'contact.general'}
description={'Contact page body text'}
defaultMessage={`For general feedback, email {general_email_address}`}
values={{
general_email_address:
<J40MainGridContainer>
<Grid row>
<Grid col>
<h1>
<FormattedMessage
id={'contact.pageheader'}
description={'H2 header for contact page'}
defaultMessage={'Contact'}/>
</h1>
<h2>
<FormattedMessage
id={'contact.sectionheader'}
description={'Heading for page to allow users to contact project maintainers'}
defaultMessage={'Email us'}/>
</h2>
<p>
<FormattedMessage
id={'contact.general'}
description={'Contact page body text'}
defaultMessage={`For general feedback, email {general_email_address}`}
values={{
general_email_address:
<a href={`mailto:${generalEmail}`}>{generalEmail}</a>,
}}/>
</p>
</Grid></Grid>
}}/>
</p>
</Grid>
</Grid>
</J40MainGridContainer>
</Layout>
);

5
client/src/pages/index.test.tsx
View file

@ -7,6 +7,11 @@ import {LocalizedComponent} from '../test/testHelpers';
// See ticket: #550
jest.spyOn(console, 'error').mockImplementation(() => {});
beforeAll(() => {
// Restore mock after all tests are done, so it won't affect other test suites
jest.resetAllMocks();
});
afterAll(() => {
// Restore mock after all tests are done, so it won't affect other test suites
jest.resetAllMocks();

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

@ -2,10 +2,11 @@ import * as React from 'react';
import {defineMessages} from 'react-intl';
import {FormattedMessage, useIntl} from 'gatsby-plugin-intl';
import AboutCard from '../components/AboutCard/AboutCard';
import AboutCardsContainer from '../components/AboutCard/AboutCardsContainer';
import AlertWrapper from '../components/AlertWrapper';
import J40MainGridContainer from '../components/J40MainGridContainer';
import Layout from '../components/layout';
import AboutCard from '../components/AboutCard/AboutCard';
// @ts-ignore
import aboutUSMapImg from '../images/about-usmap.svg';
@ -22,7 +23,6 @@ import commentIcon from // @ts-ignore
import githubIcon from // @ts-ignore
'/node_modules/uswds/dist/img/usa-icons/github.svg';
import AboutCardsContainer from '../components/AboutCard/AboutCardsContainer';
interface IndexPageProps {
@ -79,7 +79,7 @@ const IndexPage = ({location}: IndexPageProps) => {
<AlertWrapper showBetaAlert={true} showLimitedDataAlert={false}/>
</J40MainGridContainer>
<J40MainGridContainer className={'j40-about-page'}>
<J40MainGridContainer>
<AboutCardsContainer>
<AboutCard
@ -123,21 +123,22 @@ const IndexPage = ({location}: IndexPageProps) => {
infrastructure.
`}/>
<p><FormattedMessage
id={'index.aboutContent.p3'}
description={'paragraph 3 of main content on index page'}
defaultMessage={`
<p>
<FormattedMessage
id={'index.aboutContent.p3'}
description={'paragraph 3 of main content on index page'}
defaultMessage={`
Read more about the Justice40 Initiative in President Biden’s
{presidentLink}
`}
values={{
presidentLink:
values={{
presidentLink:
<a
href={intl.formatMessage(messages.presidentalLinkUri)}
target="_blank"
rel="noreferrer">{intl.formatMessage(messages.presidentalLinkLabel)}
</a>,
}}/>
}}/>
</p>
</AboutCard>
@ -147,8 +148,8 @@ const IndexPage = ({location}: IndexPageProps) => {
<J40MainGridContainer
fullWidth={true}
blueBackground={true}>
<J40MainGridContainer
className={'j40-about-page'}>
<J40MainGridContainer>
<h2>How to get started</h2>
<AboutCardsContainer>
<AboutCard
size={'small'}
@ -174,8 +175,8 @@ const IndexPage = ({location}: IndexPageProps) => {
</J40MainGridContainer>
</J40MainGridContainer>
<J40MainGridContainer
className={'j40-about-page'}>
<J40MainGridContainer>
<h2>Get involved</h2>
<AboutCardsContainer>
<AboutCard
size={'small'}

10
client/src/pages/methodology.tsx
View file

@ -47,7 +47,7 @@ const IndexPage = ({location}: MethodPageProps) => {
<AlertWrapper showBetaAlert={true} showLimitedDataAlert={false}/>
</J40MainGridContainer>
<J40MainGridContainer className={'j40-main-content'}>
<J40MainGridContainer>
<h1>{intl.formatMessage(messages.methodologyPageHeader)}</h1>
<Grid row gap>
<Grid col={12} tablet={{col: 6}}>
@ -75,9 +75,11 @@ const IndexPage = ({location}: MethodPageProps) => {
</J40MainGridContainer>
<J40MainGridContainer>
<Grid row><Grid col>
<ScoreStepsList/>
</Grid></Grid>
<Grid row>
<Grid col>
<ScoreStepsList/>
</Grid>
</Grid>
</J40MainGridContainer>
</Layout>
);

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

@ -1,8 +1,11 @@
import * as React from 'react';
import Layout from '../components/layout';
// THIS COMPONENT IS NOT BEING USED
// @ts-ignore
import renewIcon from '/node_modules/uswds/dist/img/usa-icons/autorenew.svg';
// import renewIcon from '/node_modules/uswds/dist/img/usa-icons/autorenew.svg';
interface TimelinePageProps {
location: Location;
@ -10,17 +13,17 @@ interface TimelinePageProps {
const TimelinePage = ({location}: TimelinePageProps) => {
return (<Layout location={location}>
<section className={'usa-prose'}>
<h1>Timeline</h1>
<section>
{/* <h1>Timelin</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'}
className={''}
src={renewIcon} alt={'renew icon'}/>
</div>
<div className={'usa-prose text-asset-container ' +
<div className={'text-asset-container ' +
'grid-col-fill'}>
<p>Continuously engage with stakeholders and community
members to get feedback on the screening tool, scoring,
@ -55,7 +58,7 @@ const TimelinePage = ({location}: TimelinePageProps) => {
<p>Create a public scorecard to ensure accountability of
investments by February 2022.</p>
</li>
</ol>
</ol> */}
</section>
</Layout>
);

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

@ -1,47 +1,109 @@
/*
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";
// other CSS libraries:
@import "~@trussworks/react-uswds/lib/index.css";
@import "../../node_modules/mapbox-gl/dist/mapbox-gl.css";
// Custom SASS/CSS goes here
$j40-max-width: 80ex;
/*
According to the fundamental usage of USWDS:
https://designsystem.digital.gov/documentation/fundamentals/
There are 3 things that should be included in this file:
*/
// 1. Include or point to a USWDS settings file:
@import "./uswds-settings.scss";
// 2. Point to the USWDS source code:
@import "../../node_modules/uswds";
// 3. Include or point to your project's custom Sass
/*
Instead of having a separate file for these styles, all styles are being placed here.
- Global styles
- Layout styles
-- Header styles
-- Main content styles
-- Footer styles
- Component styles
-- Alert styles
-- Map styles
-- Timeline/process list styles
-- About styles
*/
/***************** GLOBAL STYLES **************************************************************/
$primary-color: #112f4e;
$j40-blue-background-color: #EFF6FB;
#main-content {
border-top: 0;
// The j40-element mixin is used to create any font element. E.g. <h1>, <p> tags, etc.
// Arguments to the mixins must be tokens from USWDS
@mixin j40-element($font-size, $line-height, $font-weight, $margin-top, $margin-bottom: 0) {
@include typeset('sans', $font-size, $line-height);
@include u-text($font-weight);
@include u-margin-top($margin-top);
@include u-margin-bottom($margin-bottom);
}
@include at-media("mobile-lg") {
.j40-grid-container {
line-height: 1.5rem;
padding-right: 0;
}
h1 {
@include j40-element('3xl', 2, 'bold', 5 );
}
h2 {
@include j40-element('xl', 2, 'bold', 4 );
}
h3 {
@include j40-element('lg', 2, 'bold', 4 );
}
h4 {
@include j40-element('sm', 1, 'bold', 3 );
}
h5 {
@include j40-element('md', 4, 'bold', 0 );
}
h6 {
@include j40-element('3xs', 1, 'normal', 0);
}
p {
@include j40-element('sm', 4, 'normal', 2.5);
}
p.secondary {
@include j40-element('3xs', 4, 'normal', .5);
}
// 40 pixel margin-bottom
.j40-mb-5 {
@include u-margin-bottom(5)
}
// 24 pixel margin-bottom
.j40-mb-3 {
@include u-margin-bottom(3)
}
/***************** LAYOUT STYLES **************************************************************
This section will outline styles for components that are on each page. These
components include:
- header styles
- main content styles
- footer styles
******************************
* HEADER STYLES
******************************
*/
.j40-header,
.j40-primary-nav,
.j40-header > li > a {
@ -49,7 +111,7 @@ $j40-blue-background-color: #EFF6FB;
z-index: 5;
.usa-nav-container {
max-width: ($j40-max-width * 2);
max-width: 76rem;
}
span {
@ -114,7 +176,38 @@ $j40-blue-background-color: #EFF6FB;
}
}
/*
******************************
* MAIN CONTENT STYLES
******************************
*/
/* this is used by J40MainGridContainer to show a blue background */
.j40-main-grid-blue-bk {
background-color: $j40-blue-background-color;
// This style is to remove the margin collapse occuring
border-top: 1px solid $j40-blue-background-color;
}
#main-content {
border-top: 0;
min-height: 60vh;
}
/*
******************************
* FOOTER STYLES
******************************
*/
.j40-footer {
.usa-footer__primary-section.pb{
@include u-padding-bottom(2);
}
.j40-footer-logo {
font-weight: bold;
}
@ -127,72 +220,29 @@ $j40-blue-background-color: #EFF6FB;
line-height: 1.5;
}
}
}
// spacing top & bottom around main content
.j40-main-content {
@include at-media("mobile-lg") {
margin-bottom: 0;
margin-top: 2.5rem;
}
h1 {
font-size: 2.7rem;
}
h2 {
font-size: 1.46rem;
.footer-link-first-child{
display: inline-block;
@include u-margin-top(1.5)
}
}
// we can use to to make all section headers consistent
.j40-section-sm-header {
font-weight: bold;
padding-bottom: 0.24rem;
padding-right: 0.24rem;
}
.j40-section-sm-body {
line-height: 1.5;
padding-bottom: 1.2rem;
padding-right: 1.2rem;
}
.j40-section-sm-footer {
padding-bottom: 0.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;
}
border-left-color: #005ea2 !important; // todo: fix
}
/***************** COMPONENT STYLES **************************************************************
This section will outline styles that are component specific
// 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;
}
- alert
- map
- timeline
- about
p,
div {
max-width: $j40-max-width;
}
}
/*
******************************
* ALERT STYLES
******************************
*/
.j40-sitealert {
p {
@ -225,6 +275,13 @@ $j40-blue-background-color: #EFF6FB;
}
}
/*
******************************
* MAP STYLES
******************************
*/
// Maplibre overrides
// Note that these need to be here to properly override defaults
@ -324,6 +381,12 @@ $j40-blue-background-color: #EFF6FB;
}
/*
***************************************
* TIMELINE / PROCESS LIST STYLES
***************************************
*/
/* the > is for child only syntax in css. This is required so that lists that are nested under the
list are not affected (e.g. <ul><li><p><ul><li>not styled</li></ul></p></li><ul>*/
.j40-process-list-wrapper > {
@ -417,10 +480,12 @@ ul.j40-process-nested-list {
font-style: italic;
}
/* this is used by J40MainGridContainer to show a blue background */
.j40-main-grid-blue-bk {
background-color: $j40-blue-background-color;
}
/*
******************************
* ABOUT CARD STYLES
******************************
*/
/* about card - based on datasetCard... need to combine */
.j40-aboutcard-container {
@ -438,15 +503,6 @@ ul.j40-process-nested-list {
align-self: flex-start;
}
.j40-aboutcard-header {
}
.j40-aboutcard-body {
}
.j40-aboutcard-footer {
}
.j40-aboutcard-link {
font-weight: bold;
}
@ -463,19 +519,13 @@ ul.j40-process-nested-list {
width: 3rem;
}
.j40-aboutcard-header {
}
.j40-aboutcard-body {
}
.j40-aboutcard-footer {
}
.j40-aboutcard-link {
font-weight: bold;
}
}
div.j40-aboutcard-sm-link {
@include u-margin-top(2);
}
}
}

147
client/src/styles/theme/_uswds-theme-color.scss Normal file
View file

@ -0,0 +1,147 @@
/*
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
========================================
========================================
========================================
----------------------------------------
USWDS 2.10.3
----------------------------------------
COLOR SETTINGS
----------------------------------------
Read more about settings and
USWDS color tokens in the documentation:
https://designsystem.digital.gov/design-tokens/color
----------------------------------------
*/
/*
----------------------------------------
Theme palette colors
----------------------------------------
*/
// Base colors
$theme-color-base-family: "gray-cool";
$theme-color-base-lightest: "gray-5";
$theme-color-base-lighter: "gray-cool-10";
$theme-color-base-light: "gray-cool-30";
$theme-color-base: "gray-cool-50";
$theme-color-base-dark: "gray-cool-60";
$theme-color-base-darker: "gray-cool-70";
$theme-color-base-darkest: "gray-90";
$theme-color-base-ink: "gray-90";
// Primary colors
$theme-color-primary-family: "blue";
$theme-color-primary-lightest: false;
$theme-color-primary-lighter: "blue-10";
$theme-color-primary-light: "blue-30";
$theme-color-primary: "blue-60v";
$theme-color-primary-vivid: "blue-warm-60v";
$theme-color-primary-dark: "blue-warm-70v";
$theme-color-primary-darker: "blue-warm-80v";
$theme-color-primary-darkest: false;
// Secondary colors
$theme-color-secondary-family: "red";
$theme-color-secondary-lightest: false;
$theme-color-secondary-lighter: "red-cool-10";
$theme-color-secondary-light: "red-30";
$theme-color-secondary: "red-50";
$theme-color-secondary-vivid: "red-cool-50v";
$theme-color-secondary-dark: "red-60v";
$theme-color-secondary-darker: "red-70v";
$theme-color-secondary-darkest: false;
// Accent warm colors
$theme-color-accent-warm-family: "orange";
$theme-color-accent-warm-lightest: false;
$theme-color-accent-warm-lighter: "orange-10";
$theme-color-accent-warm-light: "orange-20v";
$theme-color-accent-warm: "orange-30v";
$theme-color-accent-warm-dark: "orange-50v";
$theme-color-accent-warm-darker: "orange-60";
$theme-color-accent-warm-darkest: false;
// Accent cool colors
$theme-color-accent-cool-family: "blue-cool";
$theme-color-accent-cool-lightest: false;
$theme-color-accent-cool-lighter: "blue-cool-5v";
$theme-color-accent-cool-light: "blue-cool-20v";
$theme-color-accent-cool: "cyan-30v";
$theme-color-accent-cool-dark: "blue-cool-40v";
$theme-color-accent-cool-darker: "blue-cool-60v";
$theme-color-accent-cool-darkest: false;
/*
----------------------------------------
State palette colors
----------------------------------------
*/
// Error colors
$theme-color-error-family: "red-warm";
$theme-color-error-lighter: "red-warm-10";
$theme-color-error-light: "red-warm-30v";
$theme-color-error: "red-warm-50v";
$theme-color-error-dark: "red-60v";
$theme-color-error-darker: "red-70";
// Warning colors
$theme-color-warning-family: "gold";
$theme-color-warning-lighter: "yellow-5";
$theme-color-warning-light: "yellow-10v";
$theme-color-warning: "gold-20v";
$theme-color-warning-dark: "gold-30v";
$theme-color-warning-darker: "gold-50v";
// Success colors
$theme-color-success-family: "green-cool";
$theme-color-success-lighter: "green-cool-5";
$theme-color-success-light: "green-cool-20v";
$theme-color-success: "green-cool-40v";
$theme-color-success-dark: "green-cool-50";
$theme-color-success-darker: "green-cool-60";
// Info colors
$theme-color-info-family: "cyan";
$theme-color-info-lighter: "cyan-5";
$theme-color-info-light: "cyan-20";
$theme-color-info: "cyan-30v";
$theme-color-info-dark: "cyan-40v";
$theme-color-info-darker: "blue-cool-60";
// Disabled colors
$theme-color-disabled-family: "gray";
$theme-color-disabled-light: "gray-10";
$theme-color-disabled: "gray-20";
$theme-color-disabled-dark: "gray-30";
// Emergency colors
$theme-color-emergency: "red-warm-60v";
$theme-color-emergency-dark: "red-warm-80";
/*
----------------------------------------
General colors
----------------------------------------
*/
// Body
$theme-body-background-color: "white";
// Text
$theme-text-color: "ink";
$theme-text-reverse-color: "white";
// Links
$theme-link-color: "primary";
$theme-link-visited-color: "violet-70v";
$theme-link-hover-color: "primary-dark";
$theme-link-active-color: "primary-darker";
$theme-link-reverse-color: "base-lighter";
$theme-link-reverse-hover-color: "base-lightest";
$theme-link-reverse-active-color: "white";

181
client/src/styles/theme/_uswds-theme-components.scss Normal file
View file

@ -0,0 +1,181 @@
/*
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
========================================
========================================
========================================
----------------------------------------
USWDS 2.10.3
----------------------------------------
COMPONENT SETTINGS
----------------------------------------
Read more about settings and
USWDS style tokens in the documentation:
https://designsystem.digital.gov/design-tokens
----------------------------------------
*/
// Accordion
$theme-accordion-border-width: 0.5;
$theme-accordion-border-color: "base-lightest";
$theme-accordion-font-family: "body";
// Alert
$theme-alert-bar-width: 1;
$theme-alert-font-family: "ui";
$theme-alert-icon-size: 5;
$theme-alert-padding-x: 2.5;
$theme-alert-text-color: default;
$theme-alert-text-reverse-color: default;
$theme-alert-link-color: default;
$theme-alert-link-reverse-color: default;
// Banner
$theme-banner-background-color: "base-lightest";
$theme-banner-font-family: "ui";
$theme-banner-link-color: default;
$theme-banner-max-width: "desktop";
// Breadcrumb
$theme-breadcrumb-background-color: "default";
$theme-breadcrumb-font-size: "sm";
$theme-breadcrumb-font-family: "body";
$theme-breadcrumb-link-color: default;
$theme-breadcrumb-min-width: "mobile-lg";
$theme-breadcrumb-padding-bottom: 2;
$theme-breadcrumb-padding-top: 2;
$theme-breadcrumb-padding-x: 0;
$theme-breadcrumb-separator-color: "base";
// Button
$theme-button-font-family: "ui";
$theme-button-border-radius: "md";
$theme-button-small-width: 6;
$theme-button-stroke-width: 2px;
// Card
$theme-card-border-color: "base-lighter";
$theme-card-border-radius: "lg";
$theme-card-border-width: 2px;
$theme-card-gap: 2;
$theme-card-flag-min-width: "tablet";
$theme-card-flag-image-width: "card-lg";
$theme-card-font-family: "body";
$theme-card-header-typeset: "heading", "lg", 2;
$theme-card-margin-bottom: 4;
$theme-card-padding-perimeter: 3;
$theme-card-padding-y: 2;
// Collection
$theme-collection-font-family: "ui";
$theme-collection-header-typeset: "ui", "md", 3;
// Footer
$theme-footer-font-family: "body";
$theme-footer-max-width: "desktop";
// Form and input
$theme-checkbox-border-radius: "sm";
$theme-form-font-family: "ui";
$theme-input-line-height: 3;
$theme-input-max-width: "mobile-lg";
$theme-input-select-border-width: 2px;
$theme-input-select-size: 2.5;
$theme-input-state-border-width: 0.5;
$theme-input-tile-background-color-selected: "primary-lighter";
$theme-input-tile-border-radius: "md";
$theme-input-tile-border-width: 2px;
$theme-input-tile-border-color: "base-lighter";
$theme-input-tile-border-color-selected: "primary-light";
// Header
$theme-header-font-family: "ui";
$theme-header-logo-text-width: 33%;
$theme-header-max-width: "desktop";
$theme-header-min-width: "desktop";
// Hero
$theme-hero-image: "#{$theme-image-path}/hero.png";
// Identifier
$theme-identifier-background-color: "base-darkest";
$theme-identifier-font-family: "ui";
$theme-identifier-identity-domain-color: "base-light";
$theme-identifier-max-width: "desktop";
$theme-identifier-primary-link-color: default;
$theme-identifier-secondary-link-color: "base-light";
// Process List
$theme-process-list-counter-background-color: "white";
$theme-process-list-counter-border-color: "ink";
$theme-process-list-counter-border-width: 0.5;
$theme-process-list-counter-font-family: "ui";
$theme-process-list-counter-font-size: "lg";
$theme-process-list-counter-gap-color: "white";
$theme-process-list-counter-gap-width: 0.5;
$theme-process-list-counter-size: 5;
$theme-process-list-counter-text-color: "ink";
$theme-process-list-connector-color: "primary-lighter";
$theme-process-list-connector-width: 1;
$theme-process-list-font-family: "ui";
$theme-process-list-font-size: "sm";
$theme-process-list-heading-color: "ink";
$theme-process-list-heading-font-family: "ui";
$theme-process-list-heading-font-size: "lg";
// Navigation
$theme-navigation-font-family: "ui";
$theme-megamenu-columns: 3;
// Search
$theme-search-font-family: "ui";
$theme-search-min-width: 27ch;
// Sidenav
$theme-sidenav-current-border-width: 0.5;
$theme-sidenav-font-family: "ui";
// Site Alert
$theme-site-alert-max-width: "desktop";
// Step indicator
$step-indicator-background-color: "white";
$theme-step-indicator-counter-gap: 0.5;
$theme-step-indicator-counter-border-width: 0.5;
$theme-step-indicator-font-family: "ui";
$theme-step-indicator-heading-color: "ink";
$theme-step-indicator-heading-font-family: "ui";
$theme-step-indicator-heading-font-size: "lg";
$theme-step-indicator-heading-font-size-small: "md";
$theme-step-indicator-label-font-size: "sm";
$theme-step-indicator-min-width: "tablet";
$theme-step-indicator-segment-color-pending: "base-lighter";
$theme-step-indicator-segment-color-complete: "primary-darker";
$theme-step-indicator-segment-color-current: "primary";
$theme-step-indicator-segment-gap: 2px;
$theme-step-indicator-segment-height: 1;
$theme-step-indicator-text-pending-color: "base-dark";
// Summary box
$theme-summary-box-background-color: "info-lighter";
$theme-summary-box-border-color: "info-light";
$theme-summary-box-border-width: 1px;
$theme-summary-box-border-radius: "md";
$theme-summary-box-font-family: "ui";
$theme-summary-box-link-color: default;
$theme-summary-box-text-color: default;
// Table
$theme-table-border-color: "ink";
$theme-table-header-background-color: "base-lighter";
$theme-table-header-text-color: "ink";
$theme-table-stripe-background-color: "base-lightest";
$theme-table-stripe-text-color: "ink";
$theme-table-text-color: "ink";
// Tooltips
$theme-tooltip-background-color: "ink";
$theme-tooltip-font-color: "base-lightest";
$theme-tooltip-font-size: "xs";

21
client/src/styles/theme/_uswds-theme-custom-styles.scss Normal file
View file

@ -0,0 +1,21 @@
/*
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
========================================
========================================
========================================
----------------------------------------
USWDS THEME CUSTOM STYLES
----------------------------------------
!! Copy this file to your project's
sass root. Don't edit the version
in node_modules.
----------------------------------------
Custom project SASS goes here.
i.e.
@include u-padding-right('05');
----------------------------------------
*/

101
client/src/styles/theme/_uswds-theme-general.scss Normal file
View file

@ -0,0 +1,101 @@
/*
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
========================================
========================================
========================================
----------------------------------------
USWDS 2.10.3
----------------------------------------
GENERAL SETTINGS
----------------------------------------
Read more about settings and
USWDS style tokens in the documentation:
https://designsystem.digital.gov/design-tokens
----------------------------------------
*/
/*
----------------------------------------
Image Path
----------------------------------------
Relative image file path
----------------------------------------
*/
$theme-image-path: "../img";
/*
----------------------------------------
Show compile warnings
----------------------------------------
Show Sass warnings when functions and
mixins use non-standard tokens.
AND
Show updates and notifications.
----------------------------------------
*/
$theme-show-compile-warnings: true;
$theme-show-notifications: true;
/*
----------------------------------------
Namespace
----------------------------------------
*/
$theme-namespace: (
"grid": (
namespace: "grid-",
output: true,
),
"utility": (
namespace: "u-",
output: false,
),
);
/*
----------------------------------------
Layout grid
----------------------------------------
Should the layout grid classes output
with !important
----------------------------------------
*/
$theme-layout-grid-use-important: false !default;
/*
----------------------------------------
Border box sizing
----------------------------------------
When set to true, sets the box-sizing
property of all site elements to
`border-box`.
----------------------------------------
*/
$theme-global-border-box-sizing: true;
/*
----------------------------------------
Focus styles
----------------------------------------
*/
$theme-focus-color: "blue-40v";
$theme-focus-offset: 0;
$theme-focus-style: solid;
$theme-focus-width: 0.5;
/*
----------------------------------------
Icons
----------------------------------------
*/
$theme-icon-image-size: 2;

93
client/src/styles/theme/_uswds-theme-spacing.scss Normal file
View file

@ -0,0 +1,93 @@
/*
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
========================================
========================================
========================================
----------------------------------------
USWDS 2.10.3
----------------------------------------
SPACING SETTINGS
----------------------------------------
Read more about settings and
USWDS spacing units tokens in the
documentation:
https://designsystem.digital.gov/design-tokens/spacing-units
----------------------------------------
*/
/*
----------------------------------------
Border radius
----------------------------------------
2px 2px
0.5 4px
1 8px
1.5 12px
2 16px
2.5 20px
3 24px
4 32px
5 40px
6 48px
7 56px
8 64px
9 72px
----------------------------------------
*/
$theme-border-radius-sm: 2px;
$theme-border-radius-md: 0.5;
$theme-border-radius-lg: 1;
/*
----------------------------------------
Column gap
----------------------------------------
2px 2px
0.5 4px
1 8px
2 16px
3 24px
4 32px
5 40px
6 48px
----------------------------------------
*/
$theme-column-gap-sm: 2px;
$theme-column-gap-md: 2;
$theme-column-gap-lg: 3;
// These determine the responsive gap sizes set with .grid-gap
$theme-column-gap-mobile: 2;
$theme-column-gap-desktop: 4;
/*
----------------------------------------
Grid container max-width
----------------------------------------
mobile
mobile-lg
tablet
tablet-lg
desktop
desktop-lg
widescreen
----------------------------------------
*/
$theme-grid-container-max-width: "desktop";
/*
----------------------------------------
Site
----------------------------------------
*/
$theme-site-max-width: "desktop";
$theme-site-margins-breakpoint: "desktop";
$theme-site-margins-width: 4;
$theme-site-margins-mobile-width: 2;

422
client/src/styles/theme/_uswds-theme-typography.scss Normal file
View file

@ -0,0 +1,422 @@
/*
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
========================================
========================================
========================================
----------------------------------------
USWDS 2.10.3
----------------------------------------
TYPOGRAPHY SETTINGS
----------------------------------------
Read more about settings and
USWDS typography tokens in the documentation:
https://designsystem.digital.gov/design-tokens/typesetting/font-family/
----------------------------------------
*/
/*
----------------------------------------
Root font size
----------------------------------------
Setting $theme-respect-user-font-size to
true sets the root font size to 100% and
uses ems for media queries
----------------------------------------
$theme-root-font-size only applies when
$theme-respect-user-font-size is set to
false.
This will set the root font size
as a specific px value and use px values
for media queries.
Accepts true or false
----------------------------------------
*/
$theme-respect-user-font-size: true;
// $theme-root-font-size only applies when
// $theme-respect-user-font-size is set to
// false.
// This will set the root font size
// as a specific px value and use px values
// for media queries.
// Accepts values in px
$theme-root-font-size: 10px;
/*
----------------------------------------
Global styles
----------------------------------------
Adds basic styling for the following
unclassed elements:
- paragraph: paragraph text
- link: links
- content: paragraph text, links,
headings, lists, and tables
----------------------------------------
*/
$theme-global-paragraph-styles: false;
$theme-global-link-styles: false;
$theme-global-content-styles: false;
/*
----------------------------------------
Font path
----------------------------------------
Relative font file path
----------------------------------------
*/
$theme-font-path: "../fonts";
/*
----------------------------------------
Custom typeface tokens
----------------------------------------
Add a new custom typeface token if
your project uses a typeface not already
defined by USWDS.
----------------------------------------
USWDS defines the following tokens
by default:
----------------------------------------
'georgia'
'helvetica'
'merriweather'
'open-sans'
'public-sans'
'roboto-mono'
'source-sans-pro'
'system'
'tahoma'
'verdana'
----------------------------------------
Add as many new tokens as you have
custom typefaces. Reference your new
token(s) in the type-based font settings
using the quoted name of the token.
For example:
$theme-font-type-cond: 'example-font-token';
display-name:
The display name of your font
cap-height:
The height of a 500px `N` in Sketch
----------------------------------------
You should change `example-[style]-token`
names to something more descriptive.
----------------------------------------
*/
$theme-typeface-tokens: (
example-serif-token: (
display-name: "Example Serif Display Name",
cap-height: 364px,
),
example-sans-token: (
display-name: "Example Sans Display Name",
cap-height: 364px,
),
);
/*
----------------------------------------
Type-based font settings
----------------------------------------
Set the type-based tokens for your
project from the following tokens,
or from any new font tokens you added in
$theme-typeface-tokens.
----------------------------------------
'georgia'
'helvetica'
'merriweather'
'open-sans'
'public-sans'
'roboto-mono'
'source-sans-pro'
'system'
'tahoma'
'verdana'
----------------------------------------
*/
// condensed
$theme-font-type-cond: false;
// icon
$theme-font-type-icon: false;
// language-specific
$theme-font-type-lang: false;
// monospace
$theme-font-type-mono: "roboto-mono";
// sans-serif
$theme-font-type-sans: "source-sans-pro";
// serif
$theme-font-type-serif: "merriweather";
/*
----------------------------------------
Custom font stacks
----------------------------------------
Add custom font stacks to any of the
type-based fonts. Any USWDS typeface
token already has a default stack.
Custom stacks don't need to include the
font's display name. It will
automatically appear at the start of
the stack.
----------------------------------------
Example:
$theme-font-type-sans: 'source-sans-pro';
$theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans;
Output:
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;
----------------------------------------
*/
$theme-font-cond-custom-stack: false;
$theme-font-icon-custom-stack: false;
$theme-font-lang-custom-stack: false;
$theme-font-mono-custom-stack: false;
$theme-font-sans-custom-stack: false;
$theme-font-serif-custom-stack: false;
/*
----------------------------------------
Add any custom font source files
----------------------------------------
If you want USWDS to generate additional
@font-face declarations, add your font
data below, following the example that
follows.
----------------------------------------
USWDS automatically generates @font-face
decalarations for the following
'merriweather'
'public-sans'
'roboto-mono'
'source-sans-pro'
These typefaces not require custom
source files.
----------------------------------------
EXAMPLE
- dir:
Directory relative to $theme-font-path
- This directory should include fonts saved as
.ttf, .woff, and .woff2
ExampleSerif-Normal.ttf
ExampleSerif-Normal.woff
ExampleSerif-Normal.woff2
$theme-font-serif-custom-src: (
dir: 'custom/example-serif',
roman: (
100: false,
200: false,
300: 'ExampleSerif-Light',
400: 'ExampleSerif-Normal',
500: false,
600: false,
700: 'ExampleSerif-Bold',
800: false,
900: false,
),
italic: (
100: false,
200: false,
300: 'ExampleSerif-LightItalic',
400: 'ExampleSerif-Italic',
500: false,
600: false,
700: 'ExampleSerif-BoldItalic',
800: false,
900: false,
),
);
----------------------------------------
*/
$theme-font-cond-custom-src: false;
$theme-font-icon-custom-src: false;
$theme-font-lang-custom-src: false;
$theme-font-mono-custom-src: false;
$theme-font-sans-custom-src: false;
$theme-font-serif-custom-src: false;
/*
----------------------------------------
Role-based font settings
----------------------------------------
Set the role-based tokens for your
project from the following font-type
tokens.
----------------------------------------
'cond'
'icon'
'lang'
'mono'
'sans'
'serif'
----------------------------------------
*/
$theme-font-role-ui: "sans";
$theme-font-role-heading: "serif";
$theme-font-role-body: "sans";
$theme-font-role-code: "mono";
$theme-font-role-alt: "serif";
/*
----------------------------------------
Type scale
----------------------------------------
Define your project's type scale using
values from the USWDS system type scale
1-20
----------------------------------------
*/
$theme-type-scale-3xs: 2;
$theme-type-scale-2xs: 3;
$theme-type-scale-xs: 4;
$theme-type-scale-sm: 5;
$theme-type-scale-md: 6;
$theme-type-scale-lg: 9;
$theme-type-scale-xl: 12;
$theme-type-scale-2xl: 14;
$theme-type-scale-3xl: 15;
/*
----------------------------------------
Font weights
----------------------------------------
Assign weights 100-900
Or use `false` for unneeded weights.
----------------------------------------
*/
$theme-font-weight-thin: false;
$theme-font-weight-light: 300;
$theme-font-weight-normal: 400;
$theme-font-weight-medium: false;
$theme-font-weight-semibold: false;
$theme-font-weight-bold: 700;
$theme-font-weight-heavy: false;
// If USWDS is generating your @font-face rules,
// should we generate all available weights
// regardless of the assignments above?
$theme-generate-all-weights: false;
/*
----------------------------------------
General typography settings
----------------------------------------
Type scale tokens
----------------------------------------
micro: 10px
1: 12px
2: 13px
3: 14px
4: 15px
5: 16px
6: 17px
7: 18px
8: 20px
9: 22px
10: 24px
11: 28px
12: 32px
13: 36px
14: 40px
15: 48px
16: 56px
17: 64px
18: 80px
19: 120px
20: 140px
----------------------------------------
Line height tokens
----------------------------------------
1: 1
2: 1.15
3: 1.35
4: 1.5
5: 1.62
6: 1.75
----------------------------------------
Font role tokens
----------------------------------------
'ui'
'heading'
'body'
'code'
'alt'
----------------------------------------
Measure (max-width) tokens
----------------------------------------
1: 44ex
2: 60ex
3: 64ex
4: 68ex
5: 74ex
6: 88ex
none: none
----------------------------------------
*/
// Body settings are the equivalent of setting the <body> element
$theme-body-font-family: "body";
$theme-body-font-size: "sm";
$theme-body-line-height: 5;
// If true, explicitly style the <body> element with the base styles
$theme-style-body-element: false;
// Headings
$theme-h1-font-size: "2xl";
$theme-h2-font-size: "xl";
$theme-h3-font-size: "lg";
$theme-h4-font-size: "sm";
$theme-h5-font-size: "xs";
$theme-h6-font-size: "3xs";
$theme-heading-line-height: 2;
$theme-small-font-size: "2xs";
$theme-display-font-size: "3xl";
// Text and prose
$theme-text-measure-narrow: 1;
$theme-text-measure: 4;
$theme-text-measure-wide: 6;
$theme-prose-font-family: "body";
// Lead text
$theme-lead-font-family: "heading";
$theme-lead-font-size: "lg";
$theme-lead-line-height: 6;
$theme-lead-measure: 6;

867
client/src/styles/theme/_uswds-theme-utilities.scss Normal file
View file

@ -0,0 +1,867 @@
/*
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
========================================
========================================
========================================
----------------------------------------
USWDS 2.10.3
----------------------------------------
UTILITIES SETTINGS
----------------------------------------
Read more about settings and
USWDS utilities in the documentation:
https://designsystem.digital.gov/utilities
----------------------------------------
*/
$utilities-use-important: false;
$output-all-utilities: true;
/*
----------------------------------------
Utility breakpoints
----------------------------------------
Which breakpoints does your project
need? Select as `true` any breakpoint
used by utilities or layout grid
----------------------------------------
*/
$theme-utility-breakpoints: (
// 160px:
"card": false,
// 240px:
"card-lg": false,
// 320px:
"mobile": false,
// 480px:
"mobile-lg": true,
// 640px:
"tablet": true,
// 800px:
"tablet-lg": false,
// 1024px:
"desktop": true,
// 1200px:
"desktop-lg": false,
// 1400px:
"widescreen": false
);
/*
----------------------------------------
Global colors
----------------------------------------
The following palettes will be added to
- background-color
- border-color
- color
- text-decoration-color
----------------------------------------
*/
$global-color-palettes: ("palette-color-default");
/*
----------------------------------------
Settings
----------------------------------------
*/
$add-aspect-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$add-list-reset-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$align-items-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$align-self-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$background-color-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: true,
visited: false,
);
$border-settings: (
output: true,
responsive: true,
active: false,
focus: false,
hover: true,
visited: false,
);
$border-color-settings: (
output: true,
responsive: true,
active: false,
focus: false,
hover: true,
visited: false,
);
$border-radius-settings: (
output: true,
responsive: true,
active: false,
focus: false,
hover: false,
visited: false,
);
$border-style-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$border-width-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$bottom-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$box-shadow-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: true,
visited: false,
);
$circle-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$clearfix-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$color-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: true,
visited: false,
);
$cursor-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$display-settings: (
output: true,
responsive: true,
active: false,
focus: false,
hover: false,
visited: false,
);
$flex-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$flex-direction-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$flex-wrap-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$float-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$font-settings: (
output: true,
responsive: true,
active: false,
focus: false,
hover: false,
visited: false,
);
$font-family-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$font-feature-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$font-style-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$font-weight-settings: (
output: true,
responsive: true,
active: false,
focus: false,
hover: false,
visited: false,
);
$height-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$justify-content-settings: (
output: true,
responsive: true,
active: false,
focus: false,
hover: false,
visited: false,
);
$left-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$letter-spacing-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$line-height-settings: (
output: true,
responsive: true,
active: false,
focus: false,
hover: false,
visited: false,
);
$margin-settings: (
output: true,
responsive: true,
active: false,
focus: false,
hover: false,
visited: false,
);
$max-height-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$max-width-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$measure-settings: (
output: true,
responsive: true,
active: false,
focus: false,
hover: false,
visited: false,
);
$min-height-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$min-width-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$opacity-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$order-settings: (
output: true,
responsive: true,
active: false,
focus: false,
hover: false,
visited: false,
);
$outline-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$outline-color-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$overflow-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$padding-settings: (
output: true,
responsive: true,
active: false,
focus: false,
hover: false,
visited: false,
);
$pin-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$position-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$right-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$square-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$text-align-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$text-decoration-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: true,
visited: false,
);
$text-decoration-color-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: true,
visited: false,
);
$text-indent-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$text-transform-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$top-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$vertical-align-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$whitespace-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
$width-settings: (
output: true,
responsive: true,
active: false,
focus: false,
hover: false,
visited: false,
);
$z-index-settings: (
output: true,
responsive: false,
active: false,
focus: false,
hover: false,
visited: false,
);
/*
----------------------------------------
Values
----------------------------------------
*/
// .add-aspect
$add-aspect-palettes: ();
$add-aspect-manual-values: ();
// .align-items
$align-items-palettes: ("palette-align-items-default");
$align-items-manual-values: ();
// .align-self
$align-self-palettes: ("palette-align-self-default");
$align-self-manual-values: ();
// .background-color
$background-color-palettes: ();
$background-color-manual-values: ();
// .border
$border-palettes: ("palette-border-default");
$border-manual-values: ();
// .border-color
$border-color-palettes: ();
$border-color-manual-values: ();
// .border-radius
$border-radius-palettes: ("palette-border-radius-default");
$border-radius-manual-values: ();
// .border-style
$border-style-palettes: ("palette-border-style-default");
$border-style-manual-values: ();
// .border-width
$border-width-palettes: ("palette-border-width-default");
$border-width-manual-values: ();
// .bottom
$bottom-palettes: ("palette-bottom-default");
$bottom-manual-values: ();
// .box-shadow
$box-shadow-palettes: ("palette-box-shadow-default");
$box-shadow-manual-values: ();
// .circle
$circle-palettes: ("palette-circle-default");
$circle-manual-values: ();
// .color
$color-palettes: ();
$color-manual-values: ();
// .cursor
$cursor-palettes: ("palette-cursor-default");
$cursor-manual-values: ();
// .display
$display-palettes: ("palette-display-default");
$display-manual-values: ();
// .flex
$flex-palettes: ("palette-flex-default");
$flex-manual-values: ();
// .flex-direction
$flex-direction-palettes: ("palette-flex-direction-default");
$flex-direction-manual-values: ();
// .flex-wrap
$flex-wrap-palettes: ("palette-flex-wrap-default");
$flex-wrap-manual-values: ();
// .float
$float-palettes: ("palette-float-default");
$float-manual-values: ();
// .font
$font-palettes: ("palette-font-default");
$font-manual-values: ();
// .font-family
$font-family-palettes: ("palette-font-family-default");
$font-family-manual-values: ();
// .font-feature-settings
$font-feature-palettes: ("palette-font-feature-settings-default");
$font-feature-manual-values: ();
// .font-style
$font-style-palettes: ("palette-font-style-default");
$font-style-manual-values: ();
// .font-weight
$font-weight-palettes: ("palette-font-weight-default");
$font-weight-manual-values: ();
// .height
$height-palettes: ("palette-height-default");
$height-manual-values: ();
// .justify-content
$justify-content-palettes: ("palette-justify-content-default");
$justify-content-manual-values: ();
// .left
$left-palettes: ("palette-left-default");
$left-manual-values: ();
// .letter-spacing
$letter-spacing-palettes: ("palette-letter-spacing-default");
$letter-spacing-manual-values: ();
// .line-height
$line-height-palettes: ("palette-line-height-default");
$line-height-manual-values: ();
// .margin
$margin-palettes: ("palette-margin-default");
$margin-manual-values: ();
$margin-vertical-palettes: ("palette-margin-vertical-default");
$margin-vertical-manual-values: ();
$margin-horizontal-palettes: ("palette-margin-horizontal-default");
$margin-horizontal-manual-values: ();
// .max-height
$max-height-palettes: ("palette-max-height-default");
$max-height-manual-values: ();
// .max-width
$max-width-palettes: ("palette-max-width-default");
$max-width-manual-values: ();
// .measure
$measure-palettes: ("palette-measure-default");
$measure-manual-values: ();
// .min-height
$min-height-palettes: ("palette-min-height-default");
$min-height-manual-values: ();
// .min-width
$min-width-palettes: ("palette-min-width-default");
$min-width-manual-values: ();
// .opacity
$opacity-palettes: ("palette-opacity-default");
$opacity-manual-values: ();
// .order
$order-palettes: ("palette-order-default");
$order-manual-values: ();
// .outline
$outline-palettes: ("palette-outline-default");
$outline-manual-values: ();
// .outline-color
$outline-color-palettes: ("palette-outline-color-default");
$outline-color-manual-values: ();
// .overflow
$overflow-palettes: ("palette-overflow-default");
$overflow-manual-values: ();
// .padding
$padding-palettes: ("palette-padding-default");
$padding-manual-values: ();
// .position
$position-palettes: ("palette-position-default");
$position-manual-values: ();
// .right
$right-palettes: ("palette-right-default");
$right-manual-values: ();
// .square
$square-palettes: ("palette-square-default");
$square-manual-values: ();
// .text-align
$text-align-palettes: ("palette-text-align-default");
$text-align-manual-values: ();
// .text-decoration
$text-decoration-palettes: ("palette-text-decoration-default");
$text-decoration-manual-values: ();
// .text-decoration-color
$text-decoration-color-palettes: ();
$text-decoration-color-manual-values: ();
// .text-indent
$text-indent-palettes: ("palette-text-indent-default");
$text-indent-manual-values: ();
// .text-transform
$text-transform-palettes: ("palette-text-transform-default");
$text-transform-manual-values: ();
// .top
$top-palettes: ("palette-top-default");
$top-manual-values: ();
// .vertical-align
$vertical-align-palettes: ("palette-vertical-align-default");
$vertical-align-manual-values: ();
// .white-space
$whitespace-palettes: ("palette-white-space-default");
$whitespace-manual-values: ();
// .width
$width-palettes: ("palette-width-default");
$width-manual-values: ();
// .z-index
$z-index-palettes: ("palette-z-index-default");
$z-index-manual-values: ();

76
client/src/styles/theme/styles.scss Normal file
View file

@ -0,0 +1,76 @@
/*
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
* * * * * ==============================
========================================
========================================
========================================
*/
// -------------------------------------
// Import individual theme settings
@import "uswds-theme-general";
@import "uswds-theme-typography";
@import "uswds-theme-spacing";
@import "uswds-theme-color";
@import "uswds-theme-utilities";
// components import needs to be last
@import "uswds-theme-components";
// -------------------------------------
// Import individual USWDS packages...
// See https://designsystem.digital.gov/components/
// First import required and global packages...
// @import 'packages/required';
// @import 'packages/global';
// Then import individual component packages...
// @import 'packages/form-controls';
// @import 'packages/form-templates';
// @import 'packages/layout-grid';
// @import 'packages/typography';
// @import 'packages/validation';
// @import 'packages/usa-accordion';
// @import 'packages/usa-alert';
// @import 'packages/usa-identifier';
// @import 'packages/usa-banner';
// @import 'packages/usa-breadcrumb';
// @import 'packages/usa-button';
// @import 'packages/usa-button-group';
// @import 'packages/usa-card';
// @import 'packages/usa-checklist';
// @import 'packages/usa-footer';
// @import 'packages/usa-header';
// @import 'packages/usa-hero';
// @import 'packages/usa-identifier';
// @import 'packages/usa-layout';
// @import 'packages/usa-media-block';
// @import 'packages/usa-megamenu';
// @import 'packages/usa-nav-container';
// @import 'packages/usa-nav';
// @import 'packages/usa-navbar';
// @import 'packages/usa-search';
// @import 'packages/usa-section';
// @import 'packages/usa-sidenav';
// @import 'packages/usa-skipnav';
// @import 'packages/usa-step-indicator';
// @import 'packages/usa-table';
// @import 'packages/usa-tag';
// or package sets...
// @import 'packages/uswds-components';
// @import 'packages/uswds-utilities';
// -------------------------------------
// ...or import the complete USWDS kit
@import "uswds";
// -------------------------------------
// Import theme custom styles
@import "uswds-theme-custom-styles";

29
client/src/styles/uswds-settings.scss Normal file
View file

@ -0,0 +1,29 @@
// This setting file will instantiate styles that are needed for J40 from the styles/theme folder
/*
Import the entire theme spacing folder
*/
@import "./theme/uswds-theme-spacing";
/*
Selected general styles found in styles/theme/_uswds-theme-general.scss:
*/
$theme-image-path: "../../node_modules/uswds/src/img";
$theme-show-compile-warnings: false;
$theme-show-notifications: false;
$theme-namespace: (
"grid": (
namespace: "grid-",
output: true,
),
"utility": (
namespace: "u-",
output: true,
),
);
/*
Selected typography styles, found in styles/theme/_uswds-theme-typography.scss:
*/
$theme-font-path: "../../node_modules/uswds/src/fonts";