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 76 77 78 79 80 81 82 83 84 85 | 2x 2x | import PropTypes from "prop-types";
import HeaderLogo from "./HeaderLogo";
import NotificationBanner from "../NotificationBanner";
import GovBanner from "../GovBanner";
import { useHeaderState, useWindowWidth } from "./hooks";
import HeaderSearchBar from "../HeaderSearchBar";
/**
* 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 = false,
showCancelButton = false,
skipToContentId,
isIESupportPage = false,
isDevPre = false,
showSearchBar = false,
}) => {
const windowWidth = useWindowWidth();
const { currentOpenMenu } = useHeaderState();
const showSearch = showSearchBar === "true";
const cssCancelBtn = showCancelButton ? "show-cancel-button " : "";
const cssMenuDropdownStatus =
currentOpenMenu === ""
? "header-dropdown--closed"
: "header-dropdown--open";
const cssSearchBar = showSearch ? " header-height" : "";
const headerClasses = `${cssCancelBtn}${cssMenuDropdownStatus}${cssSearchBar}`;
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={headerClasses}>
{!showCancelButton && showSearch && windowWidth > 767 ? (
<HeaderSearchBar />
) : null}
<>
<HeaderLogo
isDevPre={isDevPre}
hasSearchBar={showSearch && !showCancelButton}
/>
{children}
</>
</header>
</>
);
};
HeaderContainer.propTypes = {
children: PropTypes.node.isRequired,
includeSkipToSidebar: PropTypes.bool,
showCancelButton: PropTypes.bool,
skipToContentId: PropTypes.string,
isIESupportPage: PropTypes.bool,
isDevPre: PropTypes.object,
showSearchBar: PropTypes.bool,
};
export default HeaderContainer;
|