Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React from 'react';
import PropTypes from 'prop-types';
import HeaderLogo from './HeaderLogo';
import NotificationBanner from '../NotificationBanner';
import GovBanner from '../GovBanner';
import { useHeaderState } from './hooks';
/**
* Accessibility enhancement that moves focus to an element for "Skip" links
* @param {Object} e - The native JS event
* @param {String} id - The HTML ID of the element to be focused
*/
function jumpToLink(e, id) {
e.preventDefault();
document.getElementById(id).focus();
}
const HeaderContainer = ({
children,
includeSkipToSidebar,
showCancelButton,
skipToContentId,
isIESupportPage,
}) => {
const { currentOpenMenu } = useHeaderState();
const cssCancelBtn = showCancelButton ? 'show-cancel-button' : '';
const cssMenuDropdownStatus =
currentOpenMenu === ''
? 'header-dropdown--closed'
: 'header-dropdown--open';
return (
<>
<a
className="skip"
onClick={(e) => jumpToLink(e, `${skipToContentId || 'mainContent'}`)}
href={`#${skipToContentId || 'mainContent'}`}
>
Skip to content
</a>
{includeSkipToSidebar && (
<a
className="skip"
onClick={(e) => jumpToLink(e, 'qppSidebar')}
href="#qppSidebar"
>
Skip to sidebar
</a>
)}
<GovBanner />
{!isIESupportPage && <NotificationBanner />}
<header id="top" className={`${cssCancelBtn} ${cssMenuDropdownStatus}`}>
<HeaderLogo />
{children}
</header>
</>
);
};
HeaderContainer.propTypes = {
children: PropTypes.node.isRequired,
includeSkipToSidebar: PropTypes.bool,
showCancelButton: PropTypes.bool,
skipToContentId: PropTypes.string,
isIESupportPage: PropTypes.bool,
};
HeaderContainer.defaultProps = {
includeSkipToSidebar: false,
showCancelButton: false,
skipToContentId: null,
isIESupportPage: false,
};
export default HeaderContainer;
|