mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-08-01 21:34:18 -07:00
Re-order nav links, update download box to include shapefiles, squish pages (#1538)
* Re-order nav links, update download box to include shapefiles, squishy pages (#1536) * Add dropdown to navigation links - add download page - move main pages tests to their own folder - add download and public eng snapshot test - remove public engagement button on each page - swap index with cejst - update cypress ENDPOINTS - upate gatsby-config sitemap - update snapshots - cypress tests are failing * Make all page endpoints constants - fix all cypress tests - refactor all test to use LegacyTests/constants/PAGES_ENDPOINTS - gatsby-config to use PAGES_ENDPOINTS - remove ScoreStepList component - update J40Header to use constants.PAGES_ENDPOINTS - update snapshots - there are 3 locations to update PAGES_ENDPOINTS, namely 1. LegacyTests/constants.tsx 2. constants.tsx 3. gatsby-config * Add two placeholder pages - FAQs - TSD * remove dropdown from navigation menu - remove dropdown from gherkin tests - update snapshots * Add back public engagement button to all pages - add send button in area detail alt tag to i18n - modify public engagement button to have same CSS as send feedback button - update snapshots * Update download box to include shapefile downloads - refator download packet scss - add shapefile URL to .env files - update tests - index forwarding pattern - update snapshots * Add FAQ link to About page * Update footer - add PEC - add RFI - add github link * Update the staging link URL and title * Update download Box to match design sync - update FAQ link copy * Add comment for reason of commented code
This commit is contained in:
Vim
GitHub
parent
69edbe520e
commit
92501e4715
71 changed files with 4400 additions and 605 deletions
|
|
@ -6,6 +6,8 @@ import {
|
|||
PrimaryNav,
|
||||
Grid,
|
||||
Alert,
|
||||
// NavDropDownButton,
|
||||
// Menu,
|
||||
} from '@trussworks/react-uswds';
|
||||
import BetaBanner from '../BetaBanner';
|
||||
import J40MainGridContainer from '../J40MainGridContainer';
|
||||
|
|
@ -16,43 +18,162 @@ import Language from '../Language';
|
|||
import siteLogo from '../../images/j40-logo-v2.png';
|
||||
import * as styles from './J40Header.module.scss';
|
||||
import * as COMMON_COPY from '../../data/copy/common';
|
||||
import {PAGES_ENDPOINTS} from '../../data/constants';
|
||||
|
||||
const isAlertValid = new Date < COMMON_COPY.ALERTS.EXPIRATION_DATE;
|
||||
|
||||
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);
|
||||
|
||||
/**
|
||||
* State variable to control the mobile menu toggle
|
||||
*/
|
||||
const [mobileNavOpen, setMobileNavOpen] = useState(false);
|
||||
const toggleMobileNav = (): void =>
|
||||
setMobileNavOpen((prevOpen) => !prevOpen);
|
||||
|
||||
|
||||
/**
|
||||
* The original work of this release called for creating a download page, a FAQ page and TSD page. These
|
||||
* were to be embedded in dropdown menus in the navigation bar of the header. These were all completed.
|
||||
* After discovering that the dropdown component from USWDS was not operating as expected, we decided to
|
||||
* revert to another design.
|
||||
*
|
||||
* It was also decided that some more design was needed and that these pages along with their designs will
|
||||
* be used in the near future. Rather than deleted the code or moving it to another branch, the assumption
|
||||
* was made that since this will be added back in the near term, let's comment it out for now.
|
||||
*
|
||||
* If for some reason we haven't integrated this logic in the near future, this code will be deleted.
|
||||
*/
|
||||
|
||||
/**
|
||||
* State variable to hold the open/close state of each nav dropdown. There are currently two
|
||||
* dropdowns that are being used, each corresponding to an index in the state array:
|
||||
*
|
||||
* index 0 = Data & Methodology dropdown
|
||||
* index 1 = About dropdown
|
||||
*/
|
||||
// const [isOpen, setIsOpen] = useState([false, false]);
|
||||
// const onToggle = (index: number): void => {
|
||||
// setIsOpen((prevIsOpen) => {
|
||||
// const newIsOpen = [false, false];
|
||||
// newIsOpen[index] = !prevIsOpen[index];
|
||||
// return newIsOpen;
|
||||
// });
|
||||
// };
|
||||
|
||||
// const methPageSubNavLinks = [
|
||||
// <Link
|
||||
// to={PAGES_ENDPOINTS.METHODOLOGY}
|
||||
// key={'methodology'}
|
||||
// activeClassName="usa-current"
|
||||
// data-cy={'nav-link-methodology'}>
|
||||
// {intl.formatMessage(COMMON_COPY.HEADER.METHODOLOGY)}
|
||||
// </Link>,
|
||||
// <Link
|
||||
// to={PAGES_ENDPOINTS.DOWNLOADS}
|
||||
// key={'downloads'}
|
||||
// activeClassName="usa-current"
|
||||
// data-cy={'nav-link-downloads'}>
|
||||
// {intl.formatMessage(COMMON_COPY.HEADER.DOWNLOADS)}
|
||||
// </Link>,
|
||||
// <Link
|
||||
// to={PAGES_ENDPOINTS.TSD}
|
||||
// key={'tsd'}
|
||||
// activeClassName="usa-current"
|
||||
// data-cy={'nav-link-technical-support-docs'}>
|
||||
// {intl.formatMessage(COMMON_COPY.HEADER.TSD)}
|
||||
// </Link>,
|
||||
// ];
|
||||
|
||||
// const aboutSubNavLinks = [
|
||||
// <Link
|
||||
// to={PAGES_ENDPOINTS.ABOUT}
|
||||
// key={'about'}
|
||||
// activeClassName="usa-current"
|
||||
// data-cy={'nav-link-about'}>
|
||||
// {intl.formatMessage(COMMON_COPY.HEADER.ABOUT)}
|
||||
// </Link>,
|
||||
// <Link
|
||||
// to={PAGES_ENDPOINTS.FAQS}
|
||||
// key={'faqs'}
|
||||
// activeClassName="usa-current"
|
||||
// data-cy={'nav-link-faqs'}>
|
||||
// {intl.formatMessage(COMMON_COPY.HEADER.FAQs)}
|
||||
// </Link>,
|
||||
// <Link
|
||||
// to={PAGES_ENDPOINTS.PUBLIC_ENG}
|
||||
// key={'publicEng'}
|
||||
// activeClassName="usa-current"
|
||||
// data-cy={'nav-link-public-engagement'}>
|
||||
// {intl.formatMessage(COMMON_COPY.HEADER.PUBLIC_ENG)}
|
||||
// </Link>,
|
||||
// ];
|
||||
|
||||
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'}
|
||||
to={PAGES_ENDPOINTS.EXPLORE}
|
||||
key={'explore-tool'}
|
||||
activeClassName="usa-current"
|
||||
data-cy={'nav-link-explore-the-tool'}>
|
||||
{intl.formatMessage(COMMON_COPY.HEADER.EXPLORE)}
|
||||
</Link>,
|
||||
<Link
|
||||
to={'/methodology'}
|
||||
to={PAGES_ENDPOINTS.METHODOLOGY}
|
||||
key={'methodology'}
|
||||
activeClassName="usa-current"
|
||||
data-cy={'nav-link-methodology'}>
|
||||
{intl.formatMessage(COMMON_COPY.HEADER.METHODOLOGY)}
|
||||
</Link>,
|
||||
<Link
|
||||
to={'/contact'}
|
||||
to={PAGES_ENDPOINTS.ABOUT}
|
||||
key={'about'}
|
||||
activeClassName="usa-current"
|
||||
data-cy={'nav-link-about'}>
|
||||
{intl.formatMessage(COMMON_COPY.HEADER.ABOUT)}
|
||||
</Link>,
|
||||
// <>
|
||||
// <NavDropDownButton
|
||||
// key="methDropDown"
|
||||
// label={intl.formatMessage(COMMON_COPY.HEADER.METHODOLOGY)}
|
||||
// menuId="methMenu"
|
||||
// isOpen={isOpen[0]}
|
||||
// onToggle={(): void => onToggle(0)}
|
||||
// data-cy={'nav-dropdown-methodology'}
|
||||
// className={styles.navDropDownBtn}
|
||||
// >
|
||||
// </NavDropDownButton>
|
||||
// <Menu
|
||||
// id='methMenu'
|
||||
// type='subnav'
|
||||
// items={methPageSubNavLinks}
|
||||
// isOpen={isOpen[0]}
|
||||
// >
|
||||
// </Menu>
|
||||
// </>,
|
||||
// <>
|
||||
// <NavDropDownButton
|
||||
// key="aboutDropDown"
|
||||
// label={intl.formatMessage(COMMON_COPY.HEADER.ABOUT)}
|
||||
// menuId="aboutMenu"
|
||||
// isOpen={isOpen[1]}
|
||||
// onToggle={(): void => onToggle(1)}
|
||||
// data-cy={'nav-dropdown-about'}
|
||||
// >
|
||||
// </NavDropDownButton>
|
||||
// <Menu
|
||||
// id='aboutMenu'
|
||||
// type='subnav'
|
||||
// items={aboutSubNavLinks}
|
||||
// isOpen={isOpen[1]}
|
||||
// >
|
||||
// </Menu>
|
||||
// </>,
|
||||
<Link
|
||||
to={PAGES_ENDPOINTS.CONTACT}
|
||||
key={'contact'}
|
||||
activeClassName="usa-current"
|
||||
data-cy={'nav-link-contact'}>
|
||||
|
|
@ -93,6 +214,7 @@ const J40Header = () => {
|
|||
|
||||
{/* Nav links */}
|
||||
<Grid col={'fill'} className={styles.navLinks}>
|
||||
|
||||
<NavMenuButton
|
||||
key={'mobileMenuButton'}
|
||||
onClick={toggleMobileNav}
|
||||
|
|
@ -102,7 +224,8 @@ const J40Header = () => {
|
|||
items={navLinks}
|
||||
mobileExpanded={mobileNavOpen}
|
||||
onToggleMobileNav={toggleMobileNav}
|
||||
/>
|
||||
>
|
||||
</PrimaryNav>
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue