publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-08-26 01:41:39 -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>