@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
798 lines (705 loc) • 32.3 kB
JavaScript
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React from "react";
import propTypes from "prop-types";
import classNames from "classnames";
import NavContainer from "../NavContainer/index.mjs";
import IconArrowbent from "../Icon/IconArrowbent.mjs";
import IconSearch from "../Icon/IconSearch.mjs";
import SiteLogo from "../SiteLogo/index.mjs";
import ButtonWithIcon from "../ButtonWithIcon/index.mjs";
import getFallbackComponent from "../utilities/getFallbackComponent.mjs";
import { useHamburgerNavKeydown, useJumpToSearch, useMenuButtonEffects } from "../HamburgerNav/hooks.mjs";
import useWindowWidth from "../hooks/use-window-width.mjs";
export const HamburgerContext = /*#__PURE__*/React.createContext();
const HamburgerNav = (_ref) => {
let UtilityNav = _ref.UtilityNav,
UtilityItem = _ref.UtilityItem,
MainNav = _ref.MainNav,
NavItem = _ref.NavItem,
NavSearch = _ref.NavSearch,
Logo = _ref.Logo,
_ref$mainItems = _ref.mainItems,
mainItems = _ref$mainItems === void 0 ? [] : _ref$mainItems,
_ref$utilityItems = _ref.utilityItems,
utilityItems = _ref$utilityItems === void 0 ? [] : _ref$utilityItems;
const windowWidth = useWindowWidth();
const isMobileWindow = windowWidth !== null && windowWidth < 840;
const RenderedMainNav = getFallbackComponent(MainNav, HamburgerMainNav);
let RenderedUtilityNav;
let navSearch = null;
let utilityNav = null;
let mainNav = null;
const RenderedNavSearch = getFallbackComponent(NavSearch, HamburgerNavSearch);
if (isMobileWindow) {
RenderedUtilityNav = getFallbackComponent(UtilityNav, HamburgerUtilityNav);
mainNav = RenderedMainNav !== null ? /*#__PURE__*/React.createElement(RenderedMainNav, {
NavItem: RenderedNavItem,
items: mainItems
}) : null;
utilityNav = RenderedUtilityNav !== null ? /*#__PURE__*/React.createElement(RenderedUtilityNav, {
items: utilityItems,
narrow: true,
UtilityItem: RenderedUtilityItem
}) : null;
navSearch = RenderedNavSearch !== null ? /*#__PURE__*/React.createElement(RenderedNavSearch, null) : null;
} else {
RenderedUtilityNav = getFallbackComponent(UtilityNav, HamburgerUtilityNav);
utilityNav = RenderedUtilityNav !== null ? /*#__PURE__*/React.createElement(RenderedUtilityNav, {
items: utilityItems,
narrow: true,
UtilityItem: RenderedUtilityItem
}) : null;
navSearch = RenderedNavSearch !== null ? /*#__PURE__*/React.createElement(RenderedNavSearch, null) : null;
mainNav = RenderedMainNav !== null ? /*#__PURE__*/React.createElement(RenderedMainNav, {
NavItem: RenderedNavItem,
items: mainItems
}) : null;
}
const RenderedLogo = getFallbackComponent(Logo, HamburgerSiteLogo); // If UtilityItem is undefined, UtilityNav will fallback to HamburgerUtilityItem.
const RenderedUtilityItem = getFallbackComponent(UtilityItem, HamburgerUtilityItem); // If NavItem is undefined, HamburgerMainNav falls back to HamburgerNavItem.
const RenderedNavItem = getFallbackComponent(NavItem, HamburgerNavItem);
const logo = RenderedLogo !== null ? /*#__PURE__*/React.createElement(RenderedLogo, null) : null;
const menuButtonRef = React.useRef();
const alertOffset = React.useRef();
const _React$useState = React.useState(false),
menuOpen = _React$useState[0],
setMenuOpen = _React$useState[1];
const openMenu = React.useCallback(() => {
const menuButton = menuButtonRef.current;
if (menuButton) {
let heightAboveMenuContainer;
let emergencyAlertsHeight;
let alertOffsetAdjusted = 0;
const body = document.querySelector('body');
const feedbackButton = document.querySelector('.ma__fixed-feedback-button');
const jumpToSearchButton = document.querySelector('.js-header-search-access-button');
const menuOverlay = document.querySelector('.menu-overlay');
const alertOverlay = document.querySelector('.alert-overlay');
const lockPage = () => {
const alertlOffsetPosition = alertOffset.current;
if (document.querySelector('.ma__emergency-alerts')) {
body.style.top = "-" + alertlOffsetPosition + "px";
} else {
body.style.top = 0;
}
const hamburgerMenuContainer = document.querySelector('.ma__header__hamburger__nav-container');
heightAboveMenuContainer = hamburgerMenuContainer.getBoundingClientRect().top;
};
if (document.querySelector('html.stickyTOC')) {
document.querySelector('html.stickyTOC').classList.add('stickyTOCtmp');
document.querySelector('html.stickyTOC').classList.remove('stickyTOC');
} // Start open menu tasks.
body.classList.add('show-menu');
menuButton.setAttribute('aria-expanded', 'true');
menuButton.setAttribute('aria-label', 'main menu for mass.gov');
if (feedbackButton) {
feedbackButton.classList.add('hide-button');
}
if (jumpToSearchButton) {
jumpToSearchButton.setAttribute('aria-expanded', 'true');
jumpToSearchButton.setAttribute('tabIndex', -1);
}
menuButton.setAttribute('aria-pressed', 'true');
const alertsHeader = document.querySelector('.ma__emergency-alerts__header');
body.style.position = 'fixed';
if (alertsHeader !== null) {
const emergencyAlerts = document.querySelector('.ma__emergency-alerts');
emergencyAlertsHeight = emergencyAlerts.offsetHeight;
alertOffsetAdjusted = alertsHeader.offsetHeight / 2;
alertOffset.current = emergencyAlertsHeight - alertOffsetAdjusted;
lockPage();
const hamburgerNavOffset = document.querySelector('.ma__header__hamburger__nav').offsetHeight;
const hamburgerMenuContainer = document.querySelector('.ma__header__hamburger__nav-container');
heightAboveMenuContainer = alertOffsetAdjusted + hamburgerNavOffset;
hamburgerMenuContainer.style.height = "calc(100vh - " + heightAboveMenuContainer + "px)";
}
if (menuOverlay) {
let overlayOffset = heightAboveMenuContainer;
const width = body.clientWidth;
if (width > 840) {
overlayOffset -= 1;
}
menuOverlay.classList.add('overlay-open');
menuOverlay.onclick = () => {
closeMenu();
};
}
if (alertOverlay) {
if (document.querySelector('.ma__emergency-alerts')) {
alertOverlay.classList.add('overlay-open');
}
}
}
}, [menuButtonRef, alertOffset]);
const commonCloseMenuTasks = React.useCallback(() => {
const menuButton = menuButtonRef.current;
if (menuButton) {
const body = document.querySelector('body');
const hamburgerMenuContainer = document.querySelector('.ma__header__hamburger__nav-container');
const searchInput = document.querySelector('.ma__header__hamburger__nav-container .ma__header-search__input');
const feedbackButton = document.querySelector('.ma__fixed-feedback-button');
const menuOverlay = document.querySelector('.menu-overlay');
const alertOverlay = document.querySelector('.alert-overlay');
const jumpToSearchButton = document.querySelector('.js-header-search-access-button');
body.classList.remove('show-menu');
if (document.querySelector('html.stickyTOCtmp')) {
document.querySelector('html.stickyTOCtmp').classList.add('stickyTOC');
document.querySelector('html.stickyTOCtmp').classList.remove('stickyTOCtmp');
}
menuButton.setAttribute('aria-expanded', 'false');
menuButton.setAttribute('aria-label', 'main menu for mass.gov');
if (hamburgerMenuContainer && hamburgerMenuContainer.hasAttribute('style')) {
hamburgerMenuContainer.removeAttribute('style');
}
if (searchInput && searchInput.hasAttribute('autofocus')) {
searchInput.removeAttribute('autofocus');
}
if (feedbackButton) {
feedbackButton.classList.remove('hide-button');
}
if (jumpToSearchButton) {
jumpToSearchButton.setAttribute('aria-expanded', 'false');
}
if (menuOverlay) {
menuOverlay.classList.remove('overlay-open');
}
if (alertOverlay) {
alertOverlay.classList.remove('overlay-open');
alertOverlay.removeAttribute('style');
}
}
}, [menuButtonRef]);
const closeMenu = React.useCallback(() => {
const menuButton = menuButtonRef.current;
const body = document.querySelector('body');
const alertlOffsetPosition = alertOffset.current;
if (window && menuButton) {
const width = body.clientWidth;
commonCloseMenuTasks();
menuButton.setAttribute('aria-pressed', 'false'); // Set focus on the menu button.
setTimeout(() => {
menuButton.focus();
}, 100);
if (width > 840) {
const directLink = document.querySelector('.js-utility-nav--wide .ma__utility-nav__item .direct-link');
if (directLink && directLink.hasAttribute('tabindex')) {
const googleTeMenuValue = document.querySelector('.js-utility-nav--wide .ma__utility-nav__item .goog-te-menu-value');
const jsUtilNavToggle = document.querySelector('.js-utility-nav--wide .ma__utility-nav__item .js-util-nav-toggle');
const searchAccessButton = document.querySelector('.js-header-search-access-button');
if (googleTeMenuValue) {
googleTeMenuValue.removeAttribute('tabindex');
}
if (directLink) {
directLink.removeAttribute('tabindex');
}
if (jsUtilNavToggle) {
jsUtilNavToggle.removeAttribute('tabindex');
}
if (searchAccessButton) {
searchAccessButton.removeAttribute('tabindex');
}
}
}
if (body.style.position === 'fixed') {
// At the same time, the alert needs to be scrolled up to the position again to retain the page elements position.
body.removeAttribute('style');
body.style.position = 'relative';
window.scrollTo(0, alertlOffsetPosition);
}
}
}, [menuButtonRef, alertOffset, commonCloseMenuTasks]);
const toggleMenu = React.useCallback(() => {
const body = document.querySelector('body');
const isMenuOpen = body.classList.contains('show-menu');
setMenuOpen(!isMenuOpen);
const hamburgerMenuContainer = document.querySelector('.ma__header__hamburger__nav-container');
if (hamburgerMenuContainer) {
// To prevent null in the original mobile main nav.
if (isMenuOpen) {
// This control the visibility of the dropdown to keyboard and screen reader users while maintaining the show/hide animation effect.
// .toggleAttribute() doesn't work with ios11.
hamburgerMenuContainer.setAttribute('aria-hidden', '');
closeMenu();
setTimeout(() => {
document.querySelector('.js-header-menu-button').focus();
}, 100);
} else {
hamburgerMenuContainer.removeAttribute('aria-hidden');
openMenu(); // Set buttons between menu button and hamburger menu unfocusable to set focus on the first focusable item in the menu at next tabbing.
const googleTeMenuValue = document.querySelector('.js-utility-nav--wide .ma__utility-nav__item .goog-te-menu-value');
const directLink = document.querySelector('.js-utility-nav--wide .ma__utility-nav__item .direct-link');
const jsUtilNavToggle = document.querySelector('.js-utility-nav--wide .ma__utility-nav__item .js-util-nav-toggle');
if (googleTeMenuValue) {
googleTeMenuValue.setAttribute('tabindex', '-1');
}
if (directLink) {
directLink.setAttribute('tabindex', '-1');
}
if (jsUtilNavToggle) {
jsUtilNavToggle.setAttribute('tabindex', '-1');
}
}
}
}, [openMenu, closeMenu]); // Enables menu open/close events.
useMenuButtonEffects(menuButtonRef, toggleMenu); // Enables keyboard control of menu.
useHamburgerNavKeydown(closeMenu); // Enables jump to search events.
useJumpToSearch(openMenu);
return /*#__PURE__*/React.createElement(HamburgerContext.Provider, {
value: {
openMenu: openMenu,
closeMenu: closeMenu,
toggleMenu: toggleMenu
}
}, /*#__PURE__*/React.createElement("nav", {
className: "ma__header__hamburger__nav",
"aria-label": "main navigation",
id: "hamburger-main-navigation",
role: "navigation"
}, /*#__PURE__*/React.createElement("div", {
className: "ma__header__hamburger-wrapper"
}, /*#__PURE__*/React.createElement("div", {
className: "ma__header__hamburger__button-container js-sticky-header"
}, /*#__PURE__*/React.createElement("button", {
ref: menuButtonRef,
type: "button",
"aria-expanded": "false",
"aria-label": "Open the main menu for mass.gov",
className: "ma__header__hamburger__menu-button js-header-menu-button"
}, /*#__PURE__*/React.createElement("span", {
className: "ma__header__hamburger__menu-icon"
}), /*#__PURE__*/React.createElement("span", {
className: "ma__header__hamburger__menu-text--mobile js-header__menu-text--mobile " + (menuOpen ? '' : 'show')
}, "Mass.gov"), /*#__PURE__*/React.createElement("span", {
className: "ma__header__hamburger__menu-text js-header__menu-text " + (menuOpen ? '' : 'show')
}, "Menu"), /*#__PURE__*/React.createElement("span", {
className: "ma__header__hamburger__menu-text--close js-header__menu-text--close " + (menuOpen ? 'show' : '')
}, "Close")), navSearch && /*#__PURE__*/React.createElement("button", {
type: "button",
"aria-expanded": "false",
className: "ma__header__hamburger__search-access-button js-header-search-access-button"
}, /*#__PURE__*/React.createElement("span", {
className: "ma__visually-hidden"
}, "Access to search"), /*#__PURE__*/React.createElement(IconSearch, null))), RenderedUtilityNav !== null && /*#__PURE__*/React.createElement(RenderedUtilityNav, {
items: utilityItems,
UtilityItem: RenderedUtilityItem,
narrow: false
}), /*#__PURE__*/React.createElement(NavContainer, {
logo: logo,
mainNav: mainNav,
utilityNav: utilityNav,
navSearch: navSearch,
className: "ma__header__hamburger__nav-container",
"aria-hidden": "true"
}))));
};
HamburgerNav.propTypes = process.env.NODE_ENV !== "production" ? {
/** An uninstantiated component which handles displaying the utility nav. */
UtilityNav: propTypes.elementType,
/** An uninstantiated component which handles displaying individual items within the utility nav. */
UtilityItem: propTypes.elementType,
/** An uninstantiated component which handles displaying menu portion of the header. */
MainNav: propTypes.elementType,
/** An uninstantiated component which handles displaying individual menu items within the menu. */
NavItem: propTypes.elementType,
/** An uninstantiated component which handles displaying the site logo. */
Logo: propTypes.elementType,
/** An uninstantiated component which handles search functionality. */
NavSearch: propTypes.elementType,
/** An array of items used to create the menu. */
mainItems: propTypes.arrayOf(propTypes.shape({
href: propTypes.string,
text: propTypes.string,
active: propTypes.bool,
subNav: propTypes.arrayOf(propTypes.shape({
href: propTypes.string,
text: propTypes.string
}))
})),
/** An array of uninstantiated components to render within the utility navigation. */
utilityItems: propTypes.arrayOf(propTypes.elementType),
/** A string that represents the type of header this component is displayed in. This is needed for figuring out when to display using slim or not. Currently only supports hamburger and mixed. */
headerType: propTypes.string
} : {};
export const HamburgerMainNav = (_ref2) => {
let NavItem = _ref2.NavItem,
_ref2$items = _ref2.items,
items = _ref2$items === void 0 ? [] : _ref2$items;
const RenderedNavItem = getFallbackComponent(NavItem, HamburgerNavItem);
return /*#__PURE__*/React.createElement("div", {
className: "ma__main__hamburger-nav"
}, /*#__PURE__*/React.createElement("ul", {
role: "menubar",
className: "ma__main__hamburger-nav__items js-main-nav-hamburger"
}, items.map((item, itemIndex) =>
/*#__PURE__*/
// eslint-disable-next-line react/no-array-index-key
React.createElement(RenderedNavItem, _extends({
key: "hamburger-nav-navitem--" + itemIndex
}, item, {
index: itemIndex
})))));
};
HamburgerMainNav.propTypes = process.env.NODE_ENV !== "production" ? {
/** An uninstantiated component which handles displaying individual menu items within the menu. */
NavItem: propTypes.elementType,
/** An array of items used to create the menu. */
items: propTypes.arrayOf(propTypes.shape({
href: propTypes.string,
text: propTypes.string,
active: propTypes.bool,
subNav: propTypes.arrayOf(propTypes.shape({
href: propTypes.string,
text: propTypes.string
}))
}))
} : {};
export const HamburgerNavItem = (_ref3) => {
let href = _ref3.href,
text = _ref3.text,
active = _ref3.active,
_ref3$subNav = _ref3.subNav,
subNav = _ref3$subNav === void 0 ? [] : _ref3$subNav,
index = _ref3.index;
const hasSubNav = subNav && subNav.length > 0;
const classes = classNames('ma__main__hamburger-nav__item js-main-nav-hamburger-toggle', {
'has-subnav': hasSubNav,
'is-active': active
});
const itemRef = React.useRef();
const buttonRef = React.useRef();
const contentRef = React.useRef();
const ulRef = React.useRef();
const _React$useContext = React.useContext(HamburgerContext),
closeMenu = _React$useContext.closeMenu; // This is the same logic as twig for when covid background displays.
const isCovid = text.toLowerCase().includes('covid');
React.useEffect(() => {
const item = itemRef.current;
const itemButton = buttonRef.current;
const subItems = ulRef.current;
if (subItems) {
subItems.style.opacity = '0';
}
const closeNarrowUtilContent = () => {
const utilNarrowButton = document.querySelector('.ma__header__hamburger__utility-nav--narrow button.js-util-nav-toggle');
const utilNarrowContent = utilNarrowButton ? utilNarrowButton.nextElementSibling : null;
const utilNarrowContainer = utilNarrowContent ? utilNarrowContent.querySelector('.ma__utility-nav__container') : null;
if (utilNarrowContent) {
const thisNavContainer = utilNarrowButton.closest('.ma__utility-nav__item');
utilNarrowButton.setAttribute('aria-expanded', 'false');
utilNarrowContent.setAttribute('aria-hidden', 'true');
thisNavContainer.style.pointerEvents = 'none';
setTimeout(() => {
thisNavContainer.removeAttribute('style');
}, 700);
utilNarrowContent.style.maxHeight = '0';
utilNarrowContainer.style.opacity = '0';
setTimeout(() => {
utilNarrowContent.classList.add('is-closed');
}, 500);
}
};
const anotherCloseSubMenus = menuItem => {
const menuItems = document.querySelectorAll('.js-main-nav-hamburger-toggle');
menuItems.forEach(li => {
if (menuItem !== li && li.classList.contains('submenu-open')) {
li.classList.remove('submenu-open');
li.querySelector('.js-main-nav-hamburger__top-link').setAttribute('aria-expanded', 'false'); // eslint-disable-next-line no-param-reassign
li.style.pointerEvents = 'none';
/** Slide up. */
// eslint-disable-next-line no-param-reassign
li.querySelector('.js-main-nav-hamburger-content').style.height = '0'; // eslint-disable-next-line no-param-reassign
li.querySelector('.js-main-nav-hamburger__container').style.opacity = '0';
setTimeout(() => {
li.removeAttribute('style');
li.querySelector('.js-main-nav-hamburger-content').classList.add('is-closed');
}, 500);
}
});
};
const itemButtonClick = () => {
anotherCloseSubMenus(item);
if (item.classList.contains('submenu-open')) {
item.classList.remove('submenu-open');
itemButton.setAttribute('aria-expanded', 'false');
item.style.pointerEvents = 'none';
setTimeout(() => {
item.removeAttribute('style');
}, 700);
} else {
item.classList.add('submenu-open');
itemButton.setAttribute('aria-expanded', 'true');
item.style.pointerEvents = 'none';
setTimeout(() => {
item.removeAttribute('style');
}, 500);
}
if (item.querySelector('.js-main-nav-hamburger-content').classList.contains('is-closed')) {
/** Show the subMenu. */
item.querySelector('.js-main-nav-hamburger-content').classList.remove('is-closed');
item.querySelector('.js-main-nav-hamburger-content').style.height = 'auto';
/** Get the computed height of the subMenu. */
const height = item.querySelector('.js-main-nav-hamburger-content').clientHeight + "px";
/** Set the height of the submenu as 0px, */
/** so we can trigger the slide down animation. */
item.querySelector('.js-main-nav-hamburger-content').style.height = '0';
setTimeout(() => {
item.querySelector('.js-main-nav-hamburger-content').style.height = height;
item.scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'start'
});
if (subItems) {
subItems.style.opacity = '1';
}
}, 500);
/** Close Utility menu content when a sub menu is open. */
const body = document.querySelector('body');
const width = body.clientWidth;
if (width < 840) {
closeNarrowUtilContent();
}
} else {
item.querySelector('.js-main-nav-hamburger-content').style.height = '0';
if (subItems) {
subItems.style.opacity = '0';
} // Set a little bit of delay to run
// The open/close submenu animation is CSS.
// Unable to confirm the completion of the animation in JS.
// Unable to use callback in this case.
setTimeout(() => {
item.querySelector('.js-main-nav-hamburger-content').classList.add('is-closed');
}, 500);
}
};
const itemButtonKeyDown = e => {
if (e.code === 'ArrowDown' || e.key === 'ArrowDown') {
if (subItems) {
const first = subItems.getElementsByTagName('li')[0];
first.querySelector('.js-main-nav-hamburger__link').focus();
}
} // 'e.key === "Esc"' is for IE11.
if (e.code === 'Escape' || e.key === 'Escape' || e.key === 'Esc') {
if (item.classList.contains('submenu-open')) {
closeMenu();
}
}
};
if (itemButton) {
itemButton.addEventListener('click', itemButtonClick);
itemButton.addEventListener('keydown', itemButtonKeyDown);
}
return () => {
if (itemButton) {
itemButton.removeEventListener('click', itemButtonClick);
itemButton.removeEventListener('keydown', itemButtonKeyDown);
}
};
}, [itemRef, buttonRef, contentRef, ulRef]);
return /*#__PURE__*/React.createElement("li", {
ref: itemRef,
role: "none",
className: classes,
tabIndex: "-1"
}, isCovid ? /*#__PURE__*/React.createElement("a", {
role: "menuitem",
href: href,
className: "ma__main__hamburger-nav__top-link cv-alternate-style",
tabIndex: "0"
}, text) : /*#__PURE__*/React.createElement("button", {
ref: buttonRef,
type: "button",
role: "menuitem",
id: "button" + index,
className: "ma__main__hamburger-nav__top-link js-main-nav-hamburger__top-link",
"aria-haspopup": "true",
tabIndex: "0"
}, /*#__PURE__*/React.createElement("span", {
className: "visually-hidden show-label"
}, "Show the sub topics of "), text, /*#__PURE__*/React.createElement("span", {
className: "toggle-indicator",
"aria-hidden": "true"
})), hasSubNav && /*#__PURE__*/React.createElement("div", {
ref: contentRef,
className: "ma__main__hamburger-nav__subitems js-main-nav-hamburger-content is-closed"
}, /*#__PURE__*/React.createElement("ul", {
ref: ulRef,
id: "menu" + index,
role: "menu",
"aria-labelledby": "button" + index,
className: "ma__main__hamburger-nav__container js-main-nav-hamburger__container"
}, subNav.map((item, itemIndex) =>
/*#__PURE__*/
// eslint-disable-next-line react/no-array-index-key
React.createElement("li", {
key: "hamburger-nav-subitem--" + index + "-" + itemIndex,
role: "none",
className: "ma__main__hamburger-nav__subitem js-main-nav-hamburger__subitem"
}, /*#__PURE__*/React.createElement("a", {
role: "menuitem",
href: item.href,
className: "ma__main__hamburger-nav__link js-main-nav-hamburger__link"
}, item.text))), href && /*#__PURE__*/React.createElement("li", {
role: "none",
className: "ma__main__hamburger-nav__subitem--main js-main-nav-hamburger__subitem"
}, /*#__PURE__*/React.createElement("a", {
role: "menuitem",
href: href,
className: "ma__main__hamburger-nav__link js-main-nav-hamburger__link"
}, /*#__PURE__*/React.createElement(IconArrowbent, null), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
className: "visually-hidden"
}, "See all topics under "), text))))));
};
HamburgerNavItem.propTypes = process.env.NODE_ENV !== "production" ? {
href: propTypes.string,
text: propTypes.string,
active: propTypes.bool,
subNav: propTypes.arrayOf(propTypes.shape({
href: propTypes.string,
text: propTypes.string
})),
index: propTypes.oneOfType([propTypes.number, propTypes.string])
} : {};
export const HamburgerUtilityItem = (_ref4) => {
let children = _ref4.children;
return /*#__PURE__*/React.createElement("li", {
className: "ma__utility-nav__item"
}, children);
};
HamburgerUtilityItem.propTypes = process.env.NODE_ENV !== "production" ? {
children: propTypes.node
} : {};
export const HamburgerUtilityNav = (_ref5) => {
let UtilityItem = _ref5.UtilityItem,
_ref5$items = _ref5.items,
items = _ref5$items === void 0 ? [] : _ref5$items,
_ref5$narrow = _ref5.narrow,
narrow = _ref5$narrow === void 0 ? true : _ref5$narrow;
const RenderedUtilityItem = getFallbackComponent(UtilityItem, HamburgerUtilityItem);
const wrapperClassName = classNames('ma__header__hamburger__utility-nav', {
'ma__header__hamburger__utility-nav--narrow js-utility-nav--narrow': narrow,
'ma__header__hamburger__utility-nav--wide js-utility-nav--wide': !narrow
});
return /*#__PURE__*/React.createElement("div", {
className: wrapperClassName
}, items.length > 0 && /*#__PURE__*/React.createElement("div", {
className: "ma__utility-nav js-util-nav"
}, /*#__PURE__*/React.createElement("ul", {
className: "ma__utility-nav__items"
}, items.map((ItemComponent, index) =>
/*#__PURE__*/
// eslint-disable-next-line react/no-array-index-key
React.createElement(RenderedUtilityItem, {
key: "header-hamburger-utility-item-" + index
}, /*#__PURE__*/React.createElement(ItemComponent, {
narrow: narrow
}))))));
};
HamburgerUtilityNav.propTypes = process.env.NODE_ENV !== "production" ? {
/** An uninstantiated component which handles displaying individual items within the utility nav. */
UtilityItem: propTypes.elementType,
/** An array of uninstantiated components to render within the utility navigation. */
items: propTypes.arrayOf(propTypes.elementType),
/** A boolean representing when the UtilityNav is being displayed within a narrow screen. */
narrow: propTypes.bool
} : {};
export const HamburgerNavSearch = () => /*#__PURE__*/React.createElement("div", {
className: "ma__header__hamburger__search ma__header__hamburger__search-bar js-header-search-menu"
}, /*#__PURE__*/React.createElement("div", {
className: "ma__header-search"
}, /*#__PURE__*/React.createElement("form", {
action: "#",
className: "ma__form js-header-search-form",
role: "search"
}, /*#__PURE__*/React.createElement("label", {
htmlFor: "nav-search",
className: "ma__header-search__label"
}, "Search terms"), /*#__PURE__*/React.createElement("input", {
id: "nav-search",
className: "ma__header-search__input",
placeholder: "Search Mass.gov",
type: "search",
inputMode: "search"
}), /*#__PURE__*/React.createElement(ButtonWithIcon, {
usage: "secondary",
icon: /*#__PURE__*/React.createElement(IconSearch, null),
text: "Search"
})))); // eslint-disable-next-line react/prop-types
export const HamburgerLogoWrapper = (_ref6) => {
let children = _ref6.children;
return /*#__PURE__*/React.createElement("div", {
className: "ma__header__hamburger__logo"
}, children);
};
export const HamburgerSiteLogo = (_ref7) => {
let Wrapper = _ref7.Wrapper;
const DefaultWrapper = getFallbackComponent(Wrapper, HamburgerLogoWrapper);
const logoProps = {
url: {
domain: 'https://www.mass.gov/'
},
image: {
src: 'https://unpkg.com/@massds/mayflower-assets/static/images/logo/stateseal.png',
alt: 'Massachusetts state seal',
width: 45,
height: 45
},
siteName: 'Mass.gov',
title: 'Mass.gov homepage',
Wrapper: DefaultWrapper
};
return /*#__PURE__*/React.createElement(SiteLogo, logoProps);
};
HamburgerSiteLogo.propTypes = process.env.NODE_ENV !== "production" ? {
/** An uninstantiated component which handles displaying the wrapper around the site logo, if any. */
Wrapper: propTypes.elementType
} : {}; // eslint-disable-next-line react/prop-types
export const HamburgerMobileLogoWrapper = (_ref8) => {
let children = _ref8.children;
return /*#__PURE__*/React.createElement("div", {
className: "ma__header__hamburger__logo ma__header__hamburger__logo--mobile"
}, children);
};
export const HamburgerSkipNav = () => /*#__PURE__*/React.createElement("a", {
className: "ma__header__hamburger__skip-nav",
href: "#main-content"
}, "skip to main content");
export const HamburgerContainer = (_ref9) => {
let Logo = _ref9.Logo,
NavSearch = _ref9.NavSearch;
const RenderedLogo = Logo !== null ? Logo : null;
const RenderedNavSearch = getFallbackComponent(NavSearch, HamburgerNavSearch);
return /*#__PURE__*/React.createElement("div", {
className: "ma__header__container"
}, RenderedLogo !== null && /*#__PURE__*/React.createElement(RenderedLogo, null), RenderedNavSearch !== null && /*#__PURE__*/React.createElement(RenderedNavSearch, null));
};
HamburgerContainer.propTypes = process.env.NODE_ENV !== "production" ? {
/** An uninstantiated component which handles displaying the site logo. */
Logo: propTypes.elementType,
/** An uninstantiated component which handles search functionality. */
NavSearch: propTypes.elementType
} : {}; // For some reason, Header Hamburger has its own Nav Search...
// This appears to be the same version from HeaderMixed.
export const HamburgerMobileNavSearch = () => /*#__PURE__*/React.createElement("div", {
className: "ma__header__nav-search js-header__nav-search"
}, /*#__PURE__*/React.createElement("div", {
className: "ma__header-search"
}, /*#__PURE__*/React.createElement("form", {
action: "#",
className: "ma__form js-header-search-form",
role: "search"
}, /*#__PURE__*/React.createElement("label", {
htmlFor: "nav-search",
className: "ma__header-search__label"
}, "Search terms"), /*#__PURE__*/React.createElement("input", {
id: "nav-search",
className: "ma__header-search__input",
placeholder: "Search Mass.gov",
type: "search",
inputMode: "search"
}), /*#__PURE__*/React.createElement(ButtonWithIcon, {
usage: "secondary",
icon: /*#__PURE__*/React.createElement(IconSearch, null),
text: "Search"
}))));
export default HamburgerNav;