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

Add language links to switch between English and Spanish (#842)

Browse source 
* Add language links to gov banner

- align banners to site logo
- create Language component and snapshot test
- add Language component to GovBanner
- update namespace for betaBanner scss.d.ts file

* Update snapshots for each page

* Componentizes the GovBanner

- add styles
- add unit test
- token most styles to USWDS

* Add language icon and update snapshots

* Make language link text smaller

* Update total height of BetaBanner

* Add languageLink to scss.d.ts file

* Add language links to mobile

- add isDesktop prop to Language component
- refactors header links to a simple array
- update snapshots

* Add href value to language links

- update snapshots

* merge other PRs and add spanish links

- merge PR 817
- merge PR 794
- add spanish links for footer
- add diffEnEs.js to detect differences between two json files
- adds esNoBrackets.json
- update intl README

* Add government banner in spanish

* Add spanish content for About and Explore page
This commit is contained in:
Vim 2021-11-04 18:27:29 -07:00 • committed by GitHub
commit 28c5b9c869
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
29 changed files with 1391 additions and 960 deletions
Download patch file Download diff file Expand all files Collapse all files

6
client/src/components/BetaBanner/BetaBanner.module.scss
View file

@ -6,12 +6,12 @@
.betaBanner {
@include u-display("flex");
@include u-height(3);
max-width: 60.25rem; // Needs this exact value to align with GovBanner
max-width: 70.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 u-padding-top(1);
padding-bottom: 1.75rem;
@include at-media-max("desktop") {
@include u-margin-left(2);

8
client/src/components/BetaBanner/BetaBanner.module.scss.d.ts vendored
View file

@ -1,5 +1,5 @@
declare namespace BetaBannerNamespace {
export interface IDatasetCardScss {
export interface IBetaBannerScss {
betaBannerContainer: string;
betaBanner:string;
betaPillIcon:string;
@ -7,9 +7,9 @@ declare namespace BetaBannerNamespace {
}
}
declare const DatasetCardScssModule: BetaBannerNamespace.IDatasetCardScss & {
declare const BetaBannerScssModule: BetaBannerNamespace.IBetaBannerScss & {
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
locals: BetaBannerNamespace.IDatasetCardScss;
locals: BetaBannerNamespace.IBetaBannerScss;
};
export = DatasetCardScssModule;
export = BetaBannerScssModule;

16
client/src/components/GovernmentBanner/GovernmentBanner.module.scss Normal file
View file

@ -0,0 +1,16 @@
@use '../../styles/design-system.scss' as *;
.fullScreenContainer {
background-color: #f0f0f0; // Non-tokenizable color
@include u-padding-top('05');
@include u-padding-bottom('05');
.bannerContainer {
@include u-display("flex");
max-width: 74rem;
@include u-margin-left(auto);
@include u-margin-right(auto);
justify-content: space-between;
}
}

13
client/src/components/GovernmentBanner/GovernmentBanner.module.scss.d.ts vendored Normal file
View file

@ -0,0 +1,13 @@
declare namespace GovernmentBannerNamespace {
export interface IGovernmentBannerScss {
fullScreenContainer: string;
bannerContainer:string;
}
}
declare const GovernmentBannerScssModule: GovernmentBannerNamespace.IGovernmentBannerScss & {
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
locals: GovernmentBannerNamespace.IGovernmentBannerScss;
};
export = GovernmentBannerScssModule;

16
client/src/components/GovernmentBanner/GovernmentBanner.test.tsx Normal file
View file

@ -0,0 +1,16 @@
import * as React from 'react';
import {render} from '@testing-library/react';
import {LocalizedComponent} from '../../test/testHelpers';
import GovernmentBanner from './GovernmentBanner';
describe('rendering of the GovernmentBanner', () => {
const {asFragment} = render(
<LocalizedComponent>
<GovernmentBanner />
</LocalizedComponent>,
);
it('checks if component renders', () => {
expect(asFragment()).toMatchSnapshot();
});
});

21
client/src/components/GovernmentBanner/GovernmentBanner.tsx Normal file
View file

@ -0,0 +1,21 @@
import React from 'react';
import {GovBanner} from '@trussworks/react-uswds';
import {useIntl} from 'gatsby-plugin-intl';
import Language from '../Language';
import * as styles from './GovernmentBanner.module.scss';
const GovernmentBanner = () => {
const intl = useIntl();
return (
<div className={styles.fullScreenContainer}>
<div className={styles.bannerContainer}>
<GovBanner language={intl.locale === 'es' ? 'spanish' : 'english'}/>
<Language isDesktop={true}/>
</div>
</div>
);
};
export default GovernmentBanner;

157
client/src/components/GovernmentBanner/__snapshots__/GovernmentBanner.test.tsx.snap Normal file
View file

@ -0,0 +1,157 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`rendering of the GovernmentBanner checks if component renders 1`] = `
<DocumentFragment>
<div>
<div>
<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>
<img
alt="language icon for selecting language"
src="test-file-stub"
/>
<a
href="#"
>
English
</a>
<a
href="#"
>
Español
</a>
</div>
</div>
</div>
</DocumentFragment>
`;

3
client/src/components/GovernmentBanner/index.tsx Normal file
View file

@ -0,0 +1,3 @@
import GovernmentBanner from './GovernmentBanner';
export default GovernmentBanner;

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

@ -36,7 +36,7 @@ const J40Footer = () => {
<a
className={'footer-link-first-child'}
key={'whitehouselink2'}
href={'https://www.whitehouse.gov/'}
href={intl.formatMessage(COMMON_COPY.FOOTER.WHITEHOUSE_LINK)}
target={'_blank'}
rel={'noreferrer'}
data-cy={hyphenizeString(COMMON_COPY.FOOTER.WHITEHOUSE.defaultMessage)}>
@ -54,7 +54,7 @@ const J40Footer = () => {
key={'privacylink'}
target={'_blank'}
rel={'noreferrer'}
href={'https://www.whitehouse.gov/privacy/'}
href={intl.formatMessage(COMMON_COPY.FOOTER.PRIVACY_LINK)}
data-cy={hyphenizeString(COMMON_COPY.FOOTER.PRIVACY.defaultMessage)}>
{intl.formatMessage(COMMON_COPY.FOOTER.PRIVACY)}
</a>,
@ -64,9 +64,9 @@ const J40Footer = () => {
<a
className={'footer-link-first-child'}
key={'contactlink'}
href={'https://www.usa.gov/'}
data-cy={hyphenizeString(COMMON_COPY.FOOTER.CONTACT_LINK.defaultMessage)}>
{intl.formatMessage(COMMON_COPY.FOOTER.CONTACT_LINK)}
href={intl.formatMessage(COMMON_COPY.FOOTER.FIND_CONTACT_LINK)}
data-cy={hyphenizeString(COMMON_COPY.FOOTER.FIND_CONTACT.defaultMessage)}>
{intl.formatMessage(COMMON_COPY.FOOTER.FIND_CONTACT)}
</a>,
],
];

3
client/src/components/J40Header/J40Header.module.scss.d.ts vendored
View file

@ -1,5 +1,8 @@
declare namespace J40HeaderNamespace {
export interface IDatasetCardScss {
fullScreenContainer: string;
bannerContainer: string;
language: string;
logoNavRow: string;
logo: string;
logoTitle: string;

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

@ -4,11 +4,12 @@ import {
Header,
NavMenuButton,
PrimaryNav,
GovBanner,
Grid,
} from '@trussworks/react-uswds';
import BetaBanner from '../BetaBanner';
import J40MainGridContainer from '../J40MainGridContainer';
import GovernmentBanner from '../GovernmentBanner';
import Language from '../Language';
// @ts-ignore
import siteLogo from '../../images/j40-logo-v2.png';
@ -25,57 +26,45 @@ const J40Header = () => {
const toggleMobileNav = (): void =>
setMobileNavOpen((prevOpen) => !prevOpen);
const headerLinks = () => {
// static map of all possible menu items. Originally, it was all strings,
// but we need to handle both onsite and offsite links.
const menuData = new Map<string, JSX.Element>([
['about',
<Link
to={'/'}
key={'about'}
activeClassName="usa-current"
data-cy={'nav-link-about'}>
{intl.formatMessage(COMMON_COPY.HEADER.ABOUT)}
</Link>,
],
['cejst',
<Link
to={'/cejst'}
key={'cejst'}
activeClassName="usa-current"
data-cy={'nav-link-explore-the-tool'}>
{intl.formatMessage(COMMON_COPY.HEADER.EXPLORE)}
</Link>,
],
['methodology',
<Link
to={'/methodology'}
key={'methodology'}
activeClassName="usa-current"
data-cy={'nav-link-methodology'}>
{intl.formatMessage(COMMON_COPY.HEADER.METHODOLOGY)}
</Link>,
],
['contact',
<Link
to={'/contact'}
key={'contact'}
activeClassName="usa-current"
data-cy={'nav-link-contact'}>
{intl.formatMessage(COMMON_COPY.HEADER.CONTACT)}
</Link>,
],
]);
const menu =['about', 'cejst', 'methodology', 'contact'];
return menu.map((key) => menuData.get(key));
};
const navLinks = [
<Link
to={'/'}
key={'about'}
activeClassName="usa-current"
data-cy={'nav-link-about'}>
{intl.formatMessage(COMMON_COPY.HEADER.ABOUT)}
</Link>,
<Link
to={'/cejst'}
key={'cejst'}
activeClassName="usa-current"
data-cy={'nav-link-explore-the-tool'}>
{intl.formatMessage(COMMON_COPY.HEADER.EXPLORE)}
</Link>,
<Link
to={'/methodology'}
key={'methodology'}
activeClassName="usa-current"
data-cy={'nav-link-methodology'}>
{intl.formatMessage(COMMON_COPY.HEADER.METHODOLOGY)}
</Link>,
<Link
to={'/contact'}
key={'contact'}
activeClassName="usa-current"
data-cy={'nav-link-contact'}>
{intl.formatMessage(COMMON_COPY.HEADER.CONTACT)}
</Link>,
<div key={'language'}>
<Language isDesktop={false}/>
</div>,
];
return (
<Header basic={true} role={'banner'}>
{/* Banners */}
<GovBanner/>
<GovernmentBanner />
<BetaBanner/>
{/* Logo and Navigation */}
@ -104,9 +93,10 @@ const J40Header = () => {
<NavMenuButton
key={'mobileMenuButton'}
onClick={toggleMobileNav}
label="Menu"/>
label="Menu">
</NavMenuButton>
<PrimaryNav
items={headerLinks()}
items={navLinks}
mobileExpanded={mobileNavOpen}
onToggleMobileNav={toggleMobileNav}
/>

272
client/src/components/J40Header/__snapshots__/J40Header.test.tsx.snap
View file

@ -7,137 +7,157 @@ exports[`rendering of the J40Header checks if component renders 1`] = `
data-testid="header"
role="banner"
>
<section
class="usa-banner"
data-testid="govBanner"
>
<div
class="usa-accordion"
>
<header
class="usa-banner__header"
<div>
<div>
<section
class="usa-banner"
data-testid="govBanner"
>
<div
class="usa-banner__inner"
class="usa-accordion"
>
<div
class="grid-col-auto"
<header
class="usa-banner__header"
>
<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"
class="usa-banner__inner"
>
<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
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>
</div>
</header>
<div
class="usa-banner__guidance tablet:grid-col-6"
class="usa-banner__content usa-accordion__content"
hidden=""
id="gov-banner"
>
<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"
class="grid-row grid-gap-lg"
>
<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
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>
<img
alt="language icon for selecting language"
src="test-file-stub"
/>
<a
href="#"
>
English
</a>
<a
href="#"
>
Español
</a>
</div>
</div>
</section>
</div>
<div>
<div>
<div />
@ -254,6 +274,28 @@ exports[`rendering of the J40Header checks if component renders 1`] = `
Contact
</a>
</li>
<li
class="usa-nav__primary-item"
>
<div>
<div>
<img
alt="language icon for selecting language"
src="test-file-stub"
/>
<a
href="#"
>
English
</a>
<a
href="#"
>
Español
</a>
</div>
</div>
</li>
</ul>
</nav>
</div>

38
client/src/components/Language/Language.module.scss Normal file
View file

@ -0,0 +1,38 @@
@use '../../styles/design-system.scss' as *;
@mixin baseLanguageStyles {
@include u-margin-right(4);
@include u-display("flex");
.languageIcon {
align-self: baseline;
}
.languageLink {
@include u-display("inline-block");
@include u-margin-left(1.5);
cursor: pointer;
font-size: .8rem; // government banner text size not a token
@include u-padding-top('2px');
&:hover {
text-decoration-line: underline;
}
}
}
.languageContainer {
@include baseLanguageStyles();
@include at-media-max("desktop") {
display: none;
}
}
.languageContainerMobile {
@include baseLanguageStyles();
@include u-padding-top(3);
@include at-media("desktop") {
display: none;
}
}

15
client/src/components/Language/Language.module.scss.d.ts vendored Normal file
View file

@ -0,0 +1,15 @@
declare namespace LanguageNamespace {
export interface ILanguageScss {
languageContainer: string;
languageContainerMobile: string;
languageIcon: string;
languageLink: string;
}
}
declare const LanguageScssModule: LanguageNamespace.ILanguageScss & {
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
locals: LanguageNamespace.ILanguageScss;
};
export = LanguageScssModule;

16
client/src/components/Language/Language.test.tsx Normal file
View file

@ -0,0 +1,16 @@
import * as React from 'react';
import {render} from '@testing-library/react';
import {LocalizedComponent} from '../../test/testHelpers';
import Language from './Language';
describe('rendering of the Language', () => {
const {asFragment} = render(
<LocalizedComponent>
<Language />
</LocalizedComponent>,
);
it('checks if component renders', () => {
expect(asFragment()).toMatchSnapshot();
});
});

39
client/src/components/Language/Language.tsx Normal file
View file

@ -0,0 +1,39 @@
import React from 'react';
import {IntlContextConsumer, changeLocale} from 'gatsby-plugin-intl';
// @ts-ignore
import languageIcon from '/node_modules/uswds/dist/img/usa-icons/language.svg';
import * as styles from './Language.module.scss';
const languageName = {
en: 'English',
es: 'Español',
};
interface ILanguageProps {
isDesktop: boolean
}
const Language = ({isDesktop}:ILanguageProps) => {
return (
<div className={isDesktop ? styles.languageContainer : styles.languageContainerMobile}>
<img className={styles.languageIcon} src={languageIcon} alt={'language icon for selecting language'}/>
<IntlContextConsumer>
{({languages, language: currentLocale}) =>
languages.map((language: React.Key | null | undefined) => (
<a
href="#"
className={styles.languageLink}
key={language}
onClick={() => changeLocale(language)}
>
{languageName[language]}
</a>
))
}
</IntlContextConsumer>
</div>
);
};
export default Language;

22
client/src/components/Language/__snapshots__/Language.test.tsx.snap Normal file
View file

@ -0,0 +1,22 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`rendering of the Language checks if component renders 1`] = `
<DocumentFragment>
<div>
<img
alt="language icon for selecting language"
src="test-file-stub"
/>
<a
href="#"
>
English
</a>
<a
href="#"
>
Español
</a>
</div>
</DocumentFragment>
`;

3
client/src/components/Language/index.tsx Normal file
View file

@ -0,0 +1,3 @@
import Language from './Language';
export default Language;