mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-08-14 04:44:20 -07:00
Add beta site banner (#802)
* Add new BetaBanner and remove legacy Alerts - add BetaBanner component and test - update AboutCard test - remove AlertWrapper component, copy and tests - remove AlertWrapper from all pages - add BetaBanner copy and intl - update logo and color - add styles using USWDS tokens to globals.scss * Add Beta pill to header - refactor Header to use Grid and USWDS - refactor global.scss to use Grid and USWDS - updates snapshots * Move styles from global to modules - move BetaBanner styles from global to modules - move J40Header to a folder component and module styles - add J40Header unit test - add a design-system.scss file that allows USWDS styles in modules - updates snapshots * Update en.json file * Trigger Build * Add initial Spanish content - add README for translation team - add createSpanishJson script - add initial version of es.json - add a spanish string variable to test translation * Add retry and timeout config to stalled test * Remove redundant test cases for AboutCard - update snapshot * Update BetaBanner description
This commit is contained in:
Vim
GitHub
parent
e64e7fda60
commit
b1adc1f69f
42 changed files with 2122 additions and 925 deletions
|
|
@ -4,19 +4,35 @@ import {LocalizedComponent} from '../../test/testHelpers';
|
|||
import AboutCard from './AboutCard';
|
||||
|
||||
describe('rendering of the AboutCard', () => {
|
||||
const {asFragment} = render(
|
||||
<LocalizedComponent>
|
||||
<AboutCard
|
||||
imgSrc={'about:blank'}
|
||||
header={'Test Header'}
|
||||
actionText={'Test Action'}
|
||||
actionUrl={'#'}>
|
||||
Content body of the action card.
|
||||
</AboutCard>
|
||||
</LocalizedComponent>,
|
||||
);
|
||||
it('checks if small cards component renders', () => {
|
||||
const {asFragment} = render(
|
||||
<LocalizedComponent>
|
||||
<AboutCard
|
||||
imgSrc={'about:blank'}
|
||||
header={'Test Header'}
|
||||
size={'small'}
|
||||
linkText={'Test Action'}
|
||||
url={'#'}>
|
||||
Content body of the action card.
|
||||
</AboutCard>
|
||||
</LocalizedComponent>,
|
||||
);
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('checks if component renders', () => {
|
||||
it('checks if large cards component renders', () => {
|
||||
const {asFragment} = render(
|
||||
<LocalizedComponent>
|
||||
<AboutCard
|
||||
imgSrc={'about:blank'}
|
||||
header={'Test Header'}
|
||||
size={'large'}
|
||||
linkText={'Test Action'}
|
||||
url={'#'}>
|
||||
Content body of the action card.
|
||||
</AboutCard>
|
||||
</LocalizedComponent>,
|
||||
);
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,6 +1,46 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`rendering of the AboutCard checks if component renders 1`] = `
|
||||
exports[`rendering of the AboutCard checks if large cards component renders 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="grid-gap-lg tablet:grid-col"
|
||||
data-testid="grid"
|
||||
>
|
||||
<div
|
||||
class="grid-row j40-aboutcard-lg-card"
|
||||
data-testid="grid"
|
||||
>
|
||||
<div
|
||||
class="tablet:grid-col-3 j40-aboutpage-image-container"
|
||||
data-testid="grid"
|
||||
>
|
||||
<img
|
||||
alt="Test Header"
|
||||
class="j40-aboutcard-image"
|
||||
src="about:blank"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="tablet:grid-col-9"
|
||||
data-cy="test-header-block"
|
||||
data-testid="grid"
|
||||
>
|
||||
<div
|
||||
class="grid-row"
|
||||
data-testid="grid"
|
||||
>
|
||||
<h2>
|
||||
Test Header
|
||||
</h2>
|
||||
Content body of the action card.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`rendering of the AboutCard checks if small cards component renders 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="grid-gap-lg tablet:grid-col"
|
||||
|
|
@ -38,7 +78,10 @@ exports[`rendering of the AboutCard checks if component renders 1`] = `
|
|||
>
|
||||
<a
|
||||
class="j40-aboutcard-link"
|
||||
/>
|
||||
href="#"
|
||||
>
|
||||
Test Action
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
.alertWrapper {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.alertHide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.alertWarning {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
declare namespace AlertWrapperScssNamespace {
|
||||
export interface IAlertWrapperScss {
|
||||
alertWrapper: string;
|
||||
alertHide: string;
|
||||
alertWarning: string;
|
||||
}
|
||||
}
|
||||
|
||||
declare const AlertWrapperScssModule: AlertWrapperScssNamespace.IAlertWrapperScss & {
|
||||
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
|
||||
locals: AlertWrapperScssNamespace.IAlertWrapperScss;
|
||||
};
|
||||
|
||||
export = AlertWrapperScssModule;
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
import React from 'react';
|
||||
import {Alert} from '@trussworks/react-uswds';
|
||||
import {useIntl} from 'gatsby-plugin-intl';
|
||||
|
||||
import * as styles from './alertWrapper.module.scss';
|
||||
import * as COMMON_COPY from '../../data/copy/common';
|
||||
|
||||
interface IAlertWrapperProps {
|
||||
showBetaAlert?: boolean, // defaults to false
|
||||
showLimitedDataAlert?: boolean, // defaults to false
|
||||
}
|
||||
|
||||
const AlertWrapper = ({
|
||||
showBetaAlert = false,
|
||||
showLimitedDataAlert = false,
|
||||
}: IAlertWrapperProps) => {
|
||||
const intl = useIntl();
|
||||
|
||||
|
||||
return (
|
||||
<div className={styles.alertWrapper}>
|
||||
{showBetaAlert && (
|
||||
<Alert className={'j40-sitealert'} type="info">
|
||||
<span className={'j40-sitealert-title'}>{intl.formatMessage(COMMON_COPY.ALERTS.BETA_TITLE)}</span>
|
||||
<span className={'j40-sitealert-body'}> — {intl.formatMessage(COMMON_COPY.ALERTS.BETA_BODY)}</span>
|
||||
<br/>
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{showLimitedDataAlert && (
|
||||
<Alert className={'j40-sitealert'} type="warning">
|
||||
<span className={'j40-sitealert-title'}>{intl.formatMessage(COMMON_COPY.ALERTS.LIMITED_TITLE)}</span>
|
||||
<span className={'j40-sitealert-body'}> — {intl.formatMessage(COMMON_COPY.ALERTS.LIMITED_BODY)}</span>
|
||||
<br/>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AlertWrapper;
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
import * as React from 'react';
|
||||
import {render} from '@testing-library/react';
|
||||
import {LocalizedComponent} from '../../../test/testHelpers';
|
||||
import AlertWrapper from '../../AlertWrapper';
|
||||
|
||||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import '@testing-library/jest-dom/extend-expect';
|
||||
|
||||
const PUBLIC_BETA_REGEX = /Public beta/;
|
||||
const LIMITED_DATA_REGEX = /Limited data sources/;
|
||||
|
||||
describe('rendering full the AlertWrapper', () => {
|
||||
it('checks if component renders both alerts', () => {
|
||||
const component = render(
|
||||
<LocalizedComponent>
|
||||
<AlertWrapper showBetaAlert={true} showLimitedDataAlert={true}/>
|
||||
</LocalizedComponent>,
|
||||
);
|
||||
|
||||
expect(component.container).toHaveTextContent(PUBLIC_BETA_REGEX);
|
||||
expect(component.container).toHaveTextContent(LIMITED_DATA_REGEX);
|
||||
});
|
||||
});
|
||||
|
||||
describe('rendering showBetaAlert the AlertWrapper', () => {
|
||||
it('checks if component renders only beta alert', () => {
|
||||
const component = render(
|
||||
<LocalizedComponent>
|
||||
<AlertWrapper showBetaAlert={true} showLimitedDataAlert={false}/>
|
||||
</LocalizedComponent>,
|
||||
);
|
||||
|
||||
expect(component.container).toHaveTextContent(PUBLIC_BETA_REGEX);
|
||||
expect(component.container).not.toHaveTextContent(LIMITED_DATA_REGEX);
|
||||
});
|
||||
});
|
||||
|
||||
describe('rendering showLimitedDataAlert the AlertWrapper', () => {
|
||||
it('checks if component renders only limited data alert', () => {
|
||||
const component = render(
|
||||
<LocalizedComponent>
|
||||
<AlertWrapper showBetaAlert={false} showLimitedDataAlert={true}/>
|
||||
</LocalizedComponent>,
|
||||
);
|
||||
|
||||
expect(component.container).not.toHaveTextContent(PUBLIC_BETA_REGEX);
|
||||
expect(component.container).toHaveTextContent(LIMITED_DATA_REGEX);
|
||||
});
|
||||
});
|
||||
38
client/src/components/BetaBanner/BetaBanner.module.scss
Normal file
38
client/src/components/BetaBanner/BetaBanner.module.scss
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
@use '../../styles/design-system.scss' as *;
|
||||
|
||||
.betaBannerContainer {
|
||||
@include u-bg("gray-cool-2");
|
||||
|
||||
.betaBanner {
|
||||
@include u-display("flex");
|
||||
@include u-height(3);
|
||||
max-width: 60.25rem; // Needs this exact value to align with GovBanner
|
||||
@include u-font("body", "3xs");
|
||||
@include u-margin-left(auto);
|
||||
@include u-margin-right(auto);
|
||||
@include u-padding-top("05");
|
||||
@include u-padding-bottom(3);
|
||||
|
||||
@include at-media-max("desktop") {
|
||||
@include u-margin-left(2);
|
||||
@include u-margin-right(0);
|
||||
}
|
||||
|
||||
@include at-media-max("tablet-lg") {
|
||||
@include u-height(6);
|
||||
}
|
||||
|
||||
.betaPillIcon {
|
||||
@include u-bg("yellow-20v");
|
||||
@include u-height(1);
|
||||
@include u-width(2);
|
||||
@include u-radius("2px");
|
||||
@include u-margin-right(1);
|
||||
margin-top: 0.4rem; //Needs this exact value for vertical alignment
|
||||
}
|
||||
|
||||
.betaHeading {
|
||||
@include u-text("bold");
|
||||
}
|
||||
}
|
||||
}
|
||||
15
client/src/components/BetaBanner/BetaBanner.module.scss.d.ts
vendored
Normal file
15
client/src/components/BetaBanner/BetaBanner.module.scss.d.ts
vendored
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
declare namespace BetaBannerNamespace {
|
||||
export interface IDatasetCardScss {
|
||||
betaBannerContainer: string;
|
||||
betaBanner:string;
|
||||
betaPillIcon:string;
|
||||
betaHeading: string;
|
||||
}
|
||||
}
|
||||
|
||||
declare const DatasetCardScssModule: BetaBannerNamespace.IDatasetCardScss & {
|
||||
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
|
||||
locals: BetaBannerNamespace.IDatasetCardScss;
|
||||
};
|
||||
|
||||
export = DatasetCardScssModule;
|
||||
16
client/src/components/BetaBanner/BetaBanner.test.tsx
Normal file
16
client/src/components/BetaBanner/BetaBanner.test.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import * as React from 'react';
|
||||
import {render} from '@testing-library/react';
|
||||
import {LocalizedComponent} from '../../test/testHelpers';
|
||||
import BetaBanner from './BetaBanner';
|
||||
|
||||
describe('rendering of the BetaBanner', () => {
|
||||
const {asFragment} = render(
|
||||
<LocalizedComponent>
|
||||
<BetaBanner />
|
||||
</LocalizedComponent>,
|
||||
);
|
||||
|
||||
it('checks if component renders', () => {
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
27
client/src/components/BetaBanner/BetaBanner.tsx
Normal file
27
client/src/components/BetaBanner/BetaBanner.tsx
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import React from 'react';
|
||||
import {useIntl} from 'gatsby-plugin-intl';
|
||||
|
||||
import * as COMMON_COPY from '../../data/copy/common';
|
||||
import * as styles from './BetaBanner.module.scss';
|
||||
|
||||
const BetaBanner = () => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<div className={styles.betaBannerContainer}>
|
||||
<div className={styles.betaBanner}>
|
||||
<div className={styles.betaPillIcon}></div>
|
||||
<div>
|
||||
<span className={styles.betaHeading}>
|
||||
{intl.formatMessage(COMMON_COPY.BETA_BANNER.TITLE)}{' '}
|
||||
</span>
|
||||
<span>
|
||||
{intl.formatMessage(COMMON_COPY.BETA_BANNER.INFO)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BetaBanner;
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`rendering of the BetaBanner checks if component renders 1`] = `
|
||||
<DocumentFragment>
|
||||
<div>
|
||||
<div>
|
||||
<div />
|
||||
<div>
|
||||
<span>
|
||||
This is a Beta site.
|
||||
</span>
|
||||
<span>
|
||||
It is an early, in-progress version of the tool with limited data
|
||||
sets that will be continuously updated.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
3
client/src/components/BetaBanner/index.tsx
Normal file
3
client/src/components/BetaBanner/index.tsx
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import BetaBanner from './BetaBanner';
|
||||
|
||||
export default BetaBanner;
|
||||
|
|
@ -2,7 +2,6 @@ import React from 'react';
|
|||
import {useIntl} from 'gatsby-plugin-intl';
|
||||
import {Grid} from '@trussworks/react-uswds';
|
||||
|
||||
import AlertWrapper from '../AlertWrapper';
|
||||
import DatasetCard from '../DatasetCard';
|
||||
import J40MainGridContainer from '../J40MainGridContainer';
|
||||
import {hyphenizeString} from '../../../cypress/integration/common/helpers';
|
||||
|
|
@ -22,7 +21,6 @@ const DatasetContainer = () => {
|
|||
|
||||
<Grid row>
|
||||
<Grid col={12}>
|
||||
<AlertWrapper showBetaAlert={false} showLimitedDataAlert={true}/>
|
||||
<h2>{intl.formatMessage(METHODOLOGY_COPY.DATASETS.HEADING)}</h2>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -18,32 +18,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
|||
class="grid-col-12"
|
||||
data-testid="grid"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="usa-alert usa-alert--warning j40-sitealert"
|
||||
data-testid="alert"
|
||||
>
|
||||
<div
|
||||
class="usa-alert__body"
|
||||
>
|
||||
<p
|
||||
class="usa-alert__text"
|
||||
>
|
||||
<span
|
||||
class="j40-sitealert-title"
|
||||
>
|
||||
Limited data sources
|
||||
</span>
|
||||
<span
|
||||
class="j40-sitealert-body"
|
||||
>
|
||||
— Datasets may be added, updated, or removed.
|
||||
</span>
|
||||
<br />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h2>
|
||||
Datasets used in methodology
|
||||
</h2>
|
||||
|
|
|
|||
67
client/src/components/J40Header/J40Header.module.scss
Normal file
67
client/src/components/J40Header/J40Header.module.scss
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
@use '../../styles/design-system.scss' as *;
|
||||
|
||||
// Set nav links color to primary color (1b1b1b)
|
||||
.usa-nav__primary > .usa-nav__primary-item > a {
|
||||
@include u-text("gray-90");
|
||||
}
|
||||
|
||||
.logoNavRow {
|
||||
@include u-margin-top(4);
|
||||
|
||||
.logo {
|
||||
@include u-width(10);
|
||||
@include u-padding("05");
|
||||
}
|
||||
|
||||
// The logoTitle declaration is enabled for widths > 1200px
|
||||
.logoTitle {
|
||||
@include u-display("flex");
|
||||
@include u-flex-direction("column");
|
||||
@include typeset("sans", 8, 3);
|
||||
}
|
||||
|
||||
.title2BetaPill {
|
||||
@include u-display("flex");
|
||||
}
|
||||
|
||||
.betaPill {
|
||||
@include u-display("inline-block");
|
||||
@include u-bg("yellow-20v");
|
||||
@include u-radius(1);
|
||||
@include u-padding-left(2);
|
||||
@include u-padding-right(2);
|
||||
@include u-padding-top('05');
|
||||
@include u-margin-left(1);
|
||||
@include u-font("body", "2xs");
|
||||
}
|
||||
|
||||
.navLinks {
|
||||
@include u-display("flex");
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
// This media query limits this declaration to 1024 < width < 1200px
|
||||
@include at-media-max("desktop-lg") {
|
||||
.logoTitle {
|
||||
@include typeset("sans", 7, 3);
|
||||
}
|
||||
}
|
||||
|
||||
// This media query limits this declaration to 880 < width < 1024px
|
||||
@include at-media-max("tablet-lg") {
|
||||
.logoTitle {
|
||||
@include typeset("sans", 7, 2);
|
||||
}
|
||||
}
|
||||
|
||||
// This media query limits this declaration to 640 < width < 880px
|
||||
@include at-media-max("tablet") {
|
||||
.logoTitle {
|
||||
@include typeset("sans", 5, 2);
|
||||
}
|
||||
|
||||
.betaPill {
|
||||
@include u-font("body", "3xs");
|
||||
}
|
||||
}
|
||||
}
|
||||
17
client/src/components/J40Header/J40Header.module.scss.d.ts
vendored
Normal file
17
client/src/components/J40Header/J40Header.module.scss.d.ts
vendored
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
declare namespace J40HeaderNamespace {
|
||||
export interface IDatasetCardScss {
|
||||
logoNavRow: string;
|
||||
logo: string;
|
||||
logoTitle: string;
|
||||
title2BetaPill: string;
|
||||
betaPill: string;
|
||||
navLinks: string;
|
||||
}
|
||||
}
|
||||
|
||||
declare const DatasetCardScssModule: J40HeaderNamespace.IDatasetCardScss & {
|
||||
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
|
||||
locals: J40HeaderNamespace.IDatasetCardScss;
|
||||
};
|
||||
|
||||
export = DatasetCardScssModule;
|
||||
16
client/src/components/J40Header/J40Header.test.tsx
Normal file
16
client/src/components/J40Header/J40Header.test.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import * as React from 'react';
|
||||
import {render} from '@testing-library/react';
|
||||
import {LocalizedComponent} from '../../test/testHelpers';
|
||||
import J40Header from './J40Header';
|
||||
|
||||
describe('rendering of the J40Header', () => {
|
||||
const {asFragment} = render(
|
||||
<LocalizedComponent>
|
||||
<J40Header />
|
||||
</LocalizedComponent>,
|
||||
);
|
||||
|
||||
it('checks if component renders', () => {
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
@ -5,12 +5,15 @@ import {
|
|||
NavMenuButton,
|
||||
PrimaryNav,
|
||||
GovBanner,
|
||||
Tag,
|
||||
Grid,
|
||||
} from '@trussworks/react-uswds';
|
||||
import BetaBanner from '../BetaBanner';
|
||||
import J40MainGridContainer from '../J40MainGridContainer';
|
||||
|
||||
// @ts-ignore
|
||||
import siteLogo from '../../src/images/icon.png';
|
||||
import * as COMMON_COPY from '../data/copy/common';
|
||||
import siteLogo from '../../images/j40-logo-v2.png';
|
||||
import * as styles from './J40Header.module.scss';
|
||||
import * as COMMON_COPY from '../../data/copy/common';
|
||||
|
||||
const J40Header = () => {
|
||||
const intl = useIntl();
|
||||
|
|
@ -31,7 +34,6 @@ const J40Header = () => {
|
|||
to={'/'}
|
||||
key={'about'}
|
||||
activeClassName="usa-current"
|
||||
className={'j40-header'}
|
||||
data-cy={'nav-link-about'}>
|
||||
{intl.formatMessage(COMMON_COPY.HEADER.ABOUT)}
|
||||
</Link>,
|
||||
|
|
@ -41,7 +43,6 @@ const J40Header = () => {
|
|||
to={'/cejst'}
|
||||
key={'cejst'}
|
||||
activeClassName="usa-current"
|
||||
className={'j40-header'}
|
||||
data-cy={'nav-link-explore-the-tool'}>
|
||||
{intl.formatMessage(COMMON_COPY.HEADER.EXPLORE)}
|
||||
</Link>,
|
||||
|
|
@ -51,7 +52,6 @@ const J40Header = () => {
|
|||
to={'/methodology'}
|
||||
key={'methodology'}
|
||||
activeClassName="usa-current"
|
||||
className={'j40-header'}
|
||||
data-cy={'nav-link-methodology'}>
|
||||
{intl.formatMessage(COMMON_COPY.HEADER.METHODOLOGY)}
|
||||
</Link>,
|
||||
|
|
@ -61,7 +61,6 @@ const J40Header = () => {
|
|||
to={'/contact'}
|
||||
key={'contact'}
|
||||
activeClassName="usa-current"
|
||||
className={'j40-header'}
|
||||
data-cy={'nav-link-contact'}>
|
||||
{intl.formatMessage(COMMON_COPY.HEADER.CONTACT)}
|
||||
</Link>,
|
||||
|
|
@ -73,38 +72,49 @@ const J40Header = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header
|
||||
basic={true} role={'banner'}
|
||||
className={'usa-header j40-header'}>
|
||||
<GovBanner/>
|
||||
<div className="usa-nav-container">
|
||||
<div className="usa-navbar">
|
||||
{/* 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>
|
||||
<Tag className={'j40'}>Beta</Tag>
|
||||
</span>
|
||||
<Header basic={true} role={'banner'}>
|
||||
|
||||
{/* Banners */}
|
||||
<GovBanner/>
|
||||
<BetaBanner/>
|
||||
|
||||
{/* Logo and Navigation */}
|
||||
<J40MainGridContainer>
|
||||
|
||||
<Grid className={styles.logoNavRow} row>
|
||||
|
||||
{/* Logo */}
|
||||
<Grid col={1}>
|
||||
<img className={styles.logo} src={siteLogo} alt={`${titleL1} ${titleL2}`} />
|
||||
</Grid>
|
||||
|
||||
{/* Logo Title */}
|
||||
<Grid col={6}>
|
||||
<div className={styles.logoTitle}>
|
||||
<div>{titleL1}</div>
|
||||
<div className={styles.title2BetaPill}>
|
||||
<div> {titleL2} </div>
|
||||
<div className={styles.betaPill}>BETA</div>
|
||||
</div>
|
||||
</div>
|
||||
</Grid>
|
||||
|
||||
{/* Nav links */}
|
||||
<Grid col={'fill'} className={styles.navLinks}>
|
||||
<NavMenuButton
|
||||
key={'mobileMenuButton'}
|
||||
onClick={toggleMobileNav}
|
||||
label="Menu"/>
|
||||
</div>
|
||||
<PrimaryNav
|
||||
items={headerLinks()}
|
||||
mobileExpanded={mobileNavOpen}
|
||||
onToggleMobileNav={toggleMobileNav}
|
||||
className={'j40-header'}
|
||||
>
|
||||
</PrimaryNav>
|
||||
</div>
|
||||
</Header>
|
||||
</>
|
||||
<PrimaryNav
|
||||
items={headerLinks()}
|
||||
mobileExpanded={mobileNavOpen}
|
||||
onToggleMobileNav={toggleMobileNav}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
</J40MainGridContainer>
|
||||
</Header>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
@ -0,0 +1,264 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`rendering of the J40Header checks if component renders 1`] = `
|
||||
<DocumentFragment>
|
||||
<header
|
||||
class="usa-header usa-header--basic"
|
||||
data-testid="header"
|
||||
role="banner"
|
||||
>
|
||||
<section
|
||||
class="usa-banner"
|
||||
data-testid="govBanner"
|
||||
>
|
||||
<div
|
||||
class="usa-accordion"
|
||||
>
|
||||
<header
|
||||
class="usa-banner__header"
|
||||
>
|
||||
<div
|
||||
class="usa-banner__inner"
|
||||
>
|
||||
<div
|
||||
class="grid-col-auto"
|
||||
>
|
||||
<img
|
||||
alt="U.S. flag"
|
||||
class="usa-banner__header-flag"
|
||||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAG1BMVEUdM7EeNLIeM7HgQCDaPh/bPh/bPx/////bPyBEby41AAAAUElEQVQI123MNw4CABDEwD3jC/9/MQ1BQrgeOSkIqYe2o2FZtthXgQLgbHVMZdlsfUQFQnHtjP1+8BUhBDKOqtmfot6ojqPzR7TjdU+f6vkED+IDPhTBcMAAAAAASUVORK5CYII="
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="grid-col-fill tablet:grid-col-auto"
|
||||
>
|
||||
<p
|
||||
class="usa-banner__header-text"
|
||||
>
|
||||
An official website of the United States government
|
||||
</p>
|
||||
<p
|
||||
aria-hidden="true"
|
||||
class="usa-banner__header-action"
|
||||
>
|
||||
Here’s how you know
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
aria-controls="gov-banner"
|
||||
aria-expanded="false"
|
||||
class="usa-accordion__button usa-banner__button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="usa-banner__button-text"
|
||||
>
|
||||
Here’s how you know
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<div
|
||||
class="usa-banner__content usa-accordion__content"
|
||||
hidden=""
|
||||
id="gov-banner"
|
||||
>
|
||||
<div
|
||||
class="grid-row grid-gap-lg"
|
||||
>
|
||||
<div
|
||||
class="usa-banner__guidance tablet:grid-col-6"
|
||||
>
|
||||
<img
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="usa-banner__icon usa-media-block__img"
|
||||
role="img"
|
||||
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNjQgNjQiPjx0aXRsZT5pY29uLWRvdC1nb3Y8L3RpdGxlPjxwYXRoIGZpbGw9IiMyMzc4QzMiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTMyIDBjMTcuNjczIDAgMzIgMTQuMzI3IDMyIDMyIDAgMTcuNjczLTE0LjMyNyAzMi0zMiAzMkMxNC4zMjcgNjQgMCA0OS42NzMgMCAzMiAwIDE0LjMyNyAxNC4zMjcgMCAzMiAwem0wIDEuMjA4QzE0Ljk5NCAxLjIwOCAxLjIwOCAxNC45OTQgMS4yMDggMzJTMTQuOTk0IDYyLjc5MiAzMiA2Mi43OTIgNjIuNzkyIDQ5LjAwNiA2Mi43OTIgMzIgNDkuMDA2IDEuMjA4IDMyIDEuMjA4em0xMC41OSAzOC44NThhLjg1Ny44NTcgMCAwIDEgLjg4Mi44MjJ2MS42NDJIMTguODg2di0xLjY0MmEuODU3Ljg1NyAwIDAgMSAuODgyLS44MjJINDIuNTl6TTI1LjQ0MyAyNy43NzR2OS44MjloMS42NDJ2LTkuODNoMy4yNzN2OS44M0gzMnYtOS44M2gzLjI3MnY5LjgzaDEuNjQzdi05LjgzaDMuMjcydjkuODNoLjc2YS44NTcuODU3IDAgMCAxIC44ODIuODIxdi44MjFoLTIxLjN2LS44MDlhLjg1Ny44NTcgMCAwIDEgLjg4LS44MmguNzYydi05Ljg0MmgzLjI3MnptNS43MzYtOC4xODhsMTIuMjkzIDQuOTE1djEuNjQyaC0xLjYzYS44NTcuODU3IDAgMCAxLS44ODIuODIySDIxLjQxYS44NTcuODU3IDAgMCAxLS44ODItLjgyMmgtMS42NDJ2LTEuNjQybDEyLjI5My00LjkxNXoiLz48L3N2Zz4="
|
||||
/>
|
||||
<div
|
||||
class="usa-media-block__body"
|
||||
>
|
||||
<p>
|
||||
<strong>
|
||||
Official websites use .gov
|
||||
</strong>
|
||||
<br />
|
||||
A
|
||||
<strong>
|
||||
.gov
|
||||
</strong>
|
||||
website belongs to an official government organization in the United States.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="usa-banner__guidance tablet:grid-col-6"
|
||||
>
|
||||
<img
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
class="usa-banner__icon usa-media-block__img"
|
||||
role="img"
|
||||
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNjQgNjQiPjx0aXRsZT5pY29uLWh0dHBzPC90aXRsZT48cGF0aCBmaWxsPSIjNzE5RjJBIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0zMiAwYzE3LjY3MyAwIDMyIDE0LjMyNyAzMiAzMiAwIDE3LjY3My0xNC4zMjcgMzItMzIgMzJDMTQuMzI3IDY0IDAgNDkuNjczIDAgMzIgMCAxNC4zMjcgMTQuMzI3IDAgMzIgMHptMCAxLjIwOEMxNC45OTQgMS4yMDggMS4yMDggMTQuOTk0IDEuMjA4IDMyUzE0Ljk5NCA2Mi43OTIgMzIgNjIuNzkyIDYyLjc5MiA0OS4wMDYgNjIuNzkyIDMyIDQ5LjAwNiAxLjIwOCAzMiAxLjIwOHptMCAxOC44ODZhNy4yNDUgNy4yNDUgMCAwIDEgNy4yNDUgNy4yNDV2My4xMDNoLjUyYy44NiAwIDEuNTU3LjY5OCAxLjU1NyAxLjU1OHY5LjMyMmMwIC44Ni0uNjk3IDEuNTU4LTEuNTU3IDEuNTU4aC0xNS41M2MtLjg2IDAtMS41NTctLjY5Ny0xLjU1Ny0xLjU1OFYzMmMwLS44Ni42OTctMS41NTggMS41NTctMS41NThoLjUyVjI3LjM0QTcuMjQ1IDcuMjQ1IDAgMCAxIDMyIDIwLjA5NHptMCAzLjEwM2E0LjE0MiA0LjE0MiAwIDAgMC00LjE0MiA0LjE0MnYzLjEwM2g4LjI4NFYyNy4zNEE0LjE0MiA0LjE0MiAwIDAgMCAzMiAyMy4xOTd6Ii8+PC9zdmc+"
|
||||
/>
|
||||
<div
|
||||
class="usa-media-block__body"
|
||||
>
|
||||
<p>
|
||||
<strong>
|
||||
Secure .gov websites use HTTPS
|
||||
</strong>
|
||||
<br />
|
||||
A
|
||||
<strong>
|
||||
lock (
|
||||
<span
|
||||
class="icon-lock"
|
||||
>
|
||||
<img
|
||||
alt="lock"
|
||||
class="usa-banner__lock-image"
|
||||
role="img"
|
||||
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjUyIiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNTIgNjQiPjx0aXRsZT5sb2NrPC90aXRsZT48cGF0aCBmaWxsPSIjMUIxQjFCIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNiAwYzEwLjQ5MyAwIDE5IDguNTA3IDE5IDE5djloM2E0IDQgMCAwIDEgNCA0djI4YTQgNCAwIDAgMS00IDRINGE0IDQgMCAwIDEtNC00VjMyYTQgNCAwIDAgMSA0LTRoM3YtOUM3IDguNTA3IDE1LjUwNyAwIDI2IDB6bTAgOGMtNS45NzkgMC0xMC44NDMgNC43Ny0xMC45OTYgMTAuNzEyTDE1IDE5djloMjJ2LTljMC02LjA3NS00LjkyNS0xMS0xMS0xMXoiLz48L3N2Zz4="
|
||||
title="Lock"
|
||||
/>
|
||||
</span>
|
||||
)
|
||||
</strong>
|
||||
or
|
||||
<strong>
|
||||
https://
|
||||
</strong>
|
||||
means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div>
|
||||
<div>
|
||||
<div />
|
||||
<div>
|
||||
<span>
|
||||
This is a Beta site.
|
||||
</span>
|
||||
<span>
|
||||
It is an early, in-progress version of the tool with limited data
|
||||
sets that will be continuously updated.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="grid-container-desktop-lg"
|
||||
data-testid="gridContainer"
|
||||
>
|
||||
<div
|
||||
class="grid-row"
|
||||
data-testid="grid"
|
||||
>
|
||||
<div
|
||||
class="grid-col-1"
|
||||
data-testid="grid"
|
||||
>
|
||||
<img
|
||||
alt="Climate and Economic Justice Screening Tool"
|
||||
src="test-file-stub"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="grid-col-6"
|
||||
data-testid="grid"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
Climate and Economic Justice
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
Screening Tool
|
||||
</div>
|
||||
<div>
|
||||
BETA
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="grid-col-fill"
|
||||
data-testid="grid"
|
||||
>
|
||||
<button
|
||||
class="usa-menu-btn"
|
||||
data-testid="navMenuButton"
|
||||
type="button"
|
||||
>
|
||||
Menu
|
||||
</button>
|
||||
<nav
|
||||
class="usa-nav"
|
||||
>
|
||||
<button
|
||||
class="usa-nav__close"
|
||||
data-testid="navCloseButton"
|
||||
type="button"
|
||||
>
|
||||
<img
|
||||
alt="close"
|
||||
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNjQgNjQiPjx0aXRsZT5jbG9zZTwvdGl0bGU+PHBhdGggZmlsbD0iIzU2NUM2NSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNTcuMDQyIDEuMTVsNS44MDkgNS44MDhhNCA0IDAgMCAxIDAgNS42NTdMNDMuNDY1IDMybDE5LjM4NiAxOS4zODVhNCA0IDAgMCAxIDAgNS42NTdsLTUuODA5IDUuODA5YTQgNCAwIDAgMS01LjY1NyAwTDMyIDQzLjQ2NSAxMi42MTUgNjIuODUxYTQgNCAwIDAgMS01LjY1NyAwbC01LjgwOS01LjgwOWE0IDQgMCAwIDEgMC01LjY1N0wyMC41MzUgMzIgMS4xNDkgMTIuNjE1YTQgNCAwIDAgMSAwLTUuNjU3bDUuODA5LTUuODA5YTQgNCAwIDAgMSA1LjY1NyAwTDMyIDIwLjUzNSA1MS4zODUgMS4xNDlhNCA0IDAgMCAxIDUuNjU3IDB6Ii8+PC9zdmc+"
|
||||
/>
|
||||
</button>
|
||||
<ul
|
||||
class="usa-nav__primary usa-accordion"
|
||||
>
|
||||
<li
|
||||
class="usa-nav__primary-item"
|
||||
>
|
||||
<a
|
||||
data-cy="nav-link-about"
|
||||
href="/en/"
|
||||
>
|
||||
About
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="usa-nav__primary-item"
|
||||
>
|
||||
<a
|
||||
data-cy="nav-link-explore-the-tool"
|
||||
href="/en/cejst"
|
||||
>
|
||||
Explore the tool
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="usa-nav__primary-item"
|
||||
>
|
||||
<a
|
||||
data-cy="nav-link-methodology"
|
||||
href="/en/methodology"
|
||||
>
|
||||
Data & methodology
|
||||
</a>
|
||||
</li>
|
||||
<li
|
||||
class="usa-nav__primary-item"
|
||||
>
|
||||
<a
|
||||
data-cy="nav-link-contact"
|
||||
href="/en/contact"
|
||||
>
|
||||
Contact
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
3
client/src/components/J40Header/index.tsx
Normal file
3
client/src/components/J40Header/index.tsx
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
import J40Header from './J40Header';
|
||||
|
||||
export default J40Header;
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
import * as React from 'react';
|
||||
import {Grid} from '@trussworks/react-uswds';
|
||||
|
||||
import AlertWrapper from '../AlertWrapper';
|
||||
import J40Map from '../J40Map';
|
||||
|
||||
import * as styles from './mapWrapper.module.scss';
|
||||
|
|
@ -14,12 +13,6 @@ interface IMapWrapperProps {
|
|||
const MapWrapper = ({location}: IMapWrapperProps) => {
|
||||
return (
|
||||
<>
|
||||
<Grid row>
|
||||
<Grid col={12}>
|
||||
<AlertWrapper showBetaAlert={false} showLimitedDataAlert={true}/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid row>
|
||||
<J40Map location={location}/>
|
||||
</Grid>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue