mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-08-02 00:24:19 -07:00
28c5b9c869* 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
111 lines
3 KiB
TypeScript
111 lines
3 KiB
TypeScript
import React, {useState} from 'react';
|
|
import {Link, useIntl} from 'gatsby-plugin-intl';
|
|
import {
|
|
Header,
|
|
NavMenuButton,
|
|
PrimaryNav,
|
|
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';
|
|
import * as styles from './J40Header.module.scss';
|
|
import * as COMMON_COPY from '../../data/copy/common';
|
|
|
|
const J40Header = () => {
|
|
const intl = useIntl();
|
|
const [mobileNavOpen, setMobileNavOpen] = useState(false);
|
|
|
|
const titleL1 = intl.formatMessage(COMMON_COPY.HEADER.TITLE_LINE_1);
|
|
const titleL2 = intl.formatMessage(COMMON_COPY.HEADER.TITLE_LINE_2);
|
|
|
|
const toggleMobileNav = (): void =>
|
|
setMobileNavOpen((prevOpen) => !prevOpen);
|
|
|
|
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 */}
|
|
<GovernmentBanner />
|
|
<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">
|
|
</NavMenuButton>
|
|
<PrimaryNav
|
|
items={navLinks}
|
|
mobileExpanded={mobileNavOpen}
|
|
onToggleMobileNav={toggleMobileNav}
|
|
/>
|
|
</Grid>
|
|
|
|
</Grid>
|
|
</J40MainGridContainer>
|
|
</Header>
|
|
);
|
|
};
|
|
|
|
export default J40Header;
|