@massds/mayflower-react/dist/HeaderNav/index.js

React versions of Mayflower design system UI components

"use strict";

exports.__esModule = true;
exports["default"] = exports.HeaderUtilityNav = exports.HeaderUtilityItem = exports.HeaderNavSearch = exports.HeaderMobileNavSearch = exports.HeaderLogo = exports.HeaderContainer = exports.HeaderButtonContainer = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames = _interopRequireDefault(require("classnames"));

var _index = _interopRequireDefault(require("../NavContainer/index.js"));

var _index2 = _interopRequireDefault(require("../SiteLogo/index.js"));

var _index3 = _interopRequireDefault(require("../ButtonWithIcon/index.js"));

var _IconSearch = _interopRequireDefault(require("../Icon/IconSearch.js"));

var _mainNav = require("../HeaderNav/main-nav.js");

var _index4 = require("../HamburgerNav/index.js");

var _useWindowWidth = _interopRequireDefault(require("../hooks/use-window-width.js"));

var _getFallbackComponent = _interopRequireDefault(require("../utilities/getFallbackComponent.js"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var HeaderNav = function HeaderNav(_ref) {
  var UtilityNav = _ref.UtilityNav,
      UtilityItem = _ref.UtilityItem,
      MainNav = _ref.MainNav,
      NavItem = _ref.NavItem,
      Logo = _ref.Logo,
      NavSearch = _ref.NavSearch,
      ButtonContainer = _ref.ButtonContainer,
      _ref$mainItems = _ref.mainItems,
      mainItems = _ref$mainItems === void 0 ? [] : _ref$mainItems,
      _ref$utilityItems = _ref.utilityItems,
      utilityItems = _ref$utilityItems === void 0 ? [] : _ref$utilityItems;
  var RenderedMainNav = (0, _getFallbackComponent["default"])(MainNav, _mainNav.HeaderMainNav);
  var RenderedNavSearch = (0, _getFallbackComponent["default"])(NavSearch, HeaderNavSearch);
  var RenderedUtilityNav = (0, _getFallbackComponent["default"])(UtilityNav, HeaderUtilityNav);
  var RenderedUtilityItem = (0, _getFallbackComponent["default"])(UtilityItem, HeaderUtilityItem);
  var RenderedNavItem = (0, _getFallbackComponent["default"])(NavItem, _mainNav.HeaderNavItem);
  var RenderedLogo = (0, _getFallbackComponent["default"])(Logo, HeaderLogo);
  var RenderedButtonContainer = (0, _getFallbackComponent["default"])(ButtonContainer, HeaderButtonContainer);
  var utilityNav = RenderedUtilityNav !== null && utilityItems.length > 0 ? /*#__PURE__*/_react["default"].createElement(RenderedUtilityNav, {
    UtilityItem: RenderedUtilityItem,
    items: utilityItems,
    narrow: true
  }) : null;
  var mainNav = RenderedMainNav !== null && mainItems.length > 0 ? /*#__PURE__*/_react["default"].createElement(RenderedMainNav, {
    NavItem: RenderedNavItem,
    items: mainItems
  }) : null;
  var logo = RenderedLogo !== null ? /*#__PURE__*/_react["default"].createElement(RenderedLogo, null) : null;
  var navSearch = RenderedNavSearch !== null ? /*#__PURE__*/_react["default"].createElement(RenderedNavSearch, {
    narrow: true
  }) : null;
  var buttonContainer = RenderedButtonContainer !== null ? /*#__PURE__*/_react["default"].createElement(RenderedButtonContainer, null) : null;
  return /*#__PURE__*/_react["default"].createElement("nav", {
    className: "ma__header__nav",
    "aria-label": "main navigation",
    id: "header-main-navigation",
    role: "navigation"
  }, buttonContainer, /*#__PURE__*/_react["default"].createElement(_index["default"], {
    navSearch: navSearch,
    logo: logo,
    mainNav: mainNav,
    utilityNav: utilityNav,
    className: "ma__header__nav-container"
  }));
};

HeaderNav.propTypes = process.env.NODE_ENV !== "production" ? {
  /** An uninstantiated component which handles displaying the utility nav. */
  UtilityNav: _propTypes["default"].elementType,

  /** An uninstantiated component which handles displaying individual items within the utility nav. */
  UtilityItem: _propTypes["default"].elementType,

  /** An uninstantiated component which handles displaying menu portion of the header. */
  MainNav: _propTypes["default"].elementType,

  /** An uninstantiated component which handles displaying individual menu items within the menu. */
  NavItem: _propTypes["default"].elementType,

  /** An uninstantiated component which handles displaying the site logo. */
  Logo: _propTypes["default"].elementType,

  /** An uninstantiated component which handles search functionality. */
  NavSearch: _propTypes["default"].elementType,

  /** An uninstantiated component which handles displaying the menu button on mobile. */
  ButtonContainer: _propTypes["default"].elementType,

  /** An array of items used to create the menu. */
  mainItems: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    href: _propTypes["default"].string,
    text: _propTypes["default"].string,
    // Active main nav item eccentuated with an styled underline
    active: _propTypes["default"].bool,
    subNav: _propTypes["default"].arrayOf(_propTypes["default"].shape({
      href: _propTypes["default"].string,
      text: _propTypes["default"].string
    }))
  })),

  /** An array of uninstantiated components to render within the utility navigation.  */
  utilityItems: _propTypes["default"].arrayOf(_propTypes["default"].elementType)
} : {};

var HeaderButtonContainer = function HeaderButtonContainer() {
  var menuButtonRef = _react["default"].useRef();

  var closeButtonRef = _react["default"].useRef();

  var windowWidth = (0, _useWindowWidth["default"])();

  var hide = _react["default"].useCallback(function ($content) {
    var body = document.querySelector('body');
    var mainNav = document.querySelector('.ma__main-nav__items');
    var submenuClass = 'show-submenu';
    var openClass = 'is-open';
    var closeClass = 'is-closed';
    var breakpoint = 840;
    body.classList.remove(submenuClass);
    var open = mainNav.querySelector("." + openClass);

    if (open) {
      open.classList.remove(openClass);
    }

    if (windowWidth <= breakpoint) {
      $content.classList.add(closeClass);
    } else {
      // @todo animate here!
      $content.classList.add(closeClass);
    }
  }, [windowWidth]);

  _react["default"].useEffect(function () {
    var menuButton = menuButtonRef.current;
    var closeButton = closeButtonRef.current;
    var openClass = 'is-open';
    var mainNav = document.querySelector('.ma__main-nav__items');

    var toggleMobileMenu = function toggleMobileMenu() {
      var body = document.querySelector('body');

      if (body.classList.contains('show-menu')) {
        body.classList.remove('show-menu');
      } else {
        body.classList.add('show-menu');
      }
    };

    if (menuButton) {
      menuButton.addEventListener('click', function () {
        var $openContent = mainNav.querySelector(".js-main-nav-content." + openClass);

        if ($openContent) {
          hide($openContent);
        }

        document.querySelector('.ma__utility-nav__content').classList.add('is-closed');

        if (windowWidth < 841 && document.querySelector('.ma__header')) {
          toggleMobileMenu();
        }
      });
    }

    if (closeButton) {
      closeButton.addEventListener('click', function () {
        var $openContent = mainNav.querySelector(".js-main-nav-content." + openClass);

        if ($openContent) {
          hide($openContent);
        }
      });
    }
  }, [windowWidth, menuButtonRef, closeButtonRef]);

  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__header__button-container js-sticky-header"
  }, /*#__PURE__*/_react["default"].createElement("button", {
    type: "button",
    ref: closeButtonRef,
    className: "ma__header__back-button js-close-sub-nav"
  }, /*#__PURE__*/_react["default"].createElement("span", null, "Back")), /*#__PURE__*/_react["default"].createElement("button", {
    type: "button",
    ref: menuButtonRef,
    className: "ma__header__menu-button js-header-menu-button"
  }, /*#__PURE__*/_react["default"].createElement("span", null, "Menu"), /*#__PURE__*/_react["default"].createElement("span", {
    className: "ma__header__menu-icon"
  })));
};

exports.HeaderButtonContainer = HeaderButtonContainer;

var HeaderLogo = function HeaderLogo() {
  var 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: function Wrapper(_ref2) {
      var children = _ref2.children;
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "ma__header__logo"
      }, children);
    }
  };
  return /*#__PURE__*/_react["default"].createElement(_index2["default"], logoProps);
};

exports.HeaderLogo = HeaderLogo;

var HeaderNavSearch = function HeaderNavSearch(_ref3) {
  var _ref3$narrow = _ref3.narrow,
      narrow = _ref3$narrow === void 0 ? false : _ref3$narrow;
  var classes = (0, _classnames["default"])({
    'ma__header__nav-search': narrow,
    'ma__header__search js-header-search-menu': !narrow
  });
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__header-search"
  }, /*#__PURE__*/_react["default"].createElement("form", {
    action: "#",
    className: "ma__form js-header-search-form",
    role: "search"
  }, /*#__PURE__*/_react["default"].createElement("label", {
    htmlFor: "header-search",
    className: "ma__header-search__label"
  }, "Search terms"), /*#__PURE__*/_react["default"].createElement("input", {
    id: "header-search",
    className: "ma__header-search__input",
    placeholder: "Search Mass.gov",
    type: "search",
    inputMode: "search"
  }), /*#__PURE__*/_react["default"].createElement(_index3["default"], {
    usage: "secondary",
    icon: /*#__PURE__*/_react["default"].createElement(_IconSearch["default"], null)
  }, "Search"))));
}; // For whatever reason, Header has a different nav search for mobile.


exports.HeaderNavSearch = HeaderNavSearch;

var HeaderMobileNavSearch = function HeaderMobileNavSearch() {
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__header__nav-search js-header__nav-search"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__header-search"
  }, /*#__PURE__*/_react["default"].createElement("form", {
    action: "#",
    className: "ma__form js-header-search-form",
    role: "search"
  }, /*#__PURE__*/_react["default"].createElement("label", {
    htmlFor: "header-mobile-search",
    className: "ma__header-search__label"
  }, "Search terms"), /*#__PURE__*/_react["default"].createElement("input", {
    id: "header-mobile-search",
    className: "ma__header-search__input",
    placeholder: "Search Mass.gov",
    type: "search",
    inputMode: "search"
  }), /*#__PURE__*/_react["default"].createElement(_index3["default"], {
    usage: "secondary",
    icon: /*#__PURE__*/_react["default"].createElement(_IconSearch["default"], null)
  }, "Search"))));
};

exports.HeaderMobileNavSearch = HeaderMobileNavSearch;

var HeaderUtilityItem = function HeaderUtilityItem(_ref4) {
  var children = _ref4.children;
  return /*#__PURE__*/_react["default"].createElement("li", {
    className: "ma__utility-nav__item"
  }, children);
};

exports.HeaderUtilityItem = HeaderUtilityItem;
HeaderUtilityItem.propTypes = process.env.NODE_ENV !== "production" ? {
  children: _propTypes["default"].node
} : {};

var HeaderUtilityNav = function HeaderUtilityNav(_ref5) {
  var 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;
  var RenderedUtilityItem = (0, _getFallbackComponent["default"])(UtilityItem, HeaderUtilityItem);
  var classes = (0, _classnames["default"])('ma__header__utility-nav', {
    'ma__header__utility-nav--narrow': narrow,
    'ma__header__utility-nav--wide': !narrow
  });
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__utility-nav js-util-nav"
  }, /*#__PURE__*/_react["default"].createElement("ul", {
    className: "ma__utility-nav__items"
  }, items.map(function (ItemComponent, index) {
    return (
      /*#__PURE__*/
      // eslint-disable-next-line react/no-array-index-key
      _react["default"].createElement(RenderedUtilityItem, {
        key: "header-utility-item-" + index
      }, /*#__PURE__*/_react["default"].createElement(ItemComponent, {
        narrow: narrow
      }))
    );
  }))));
};

exports.HeaderUtilityNav = HeaderUtilityNav;
HeaderUtilityNav.propTypes = process.env.NODE_ENV !== "production" ? {
  /** An uninstantiated component which handles displaying individual items within the utility nav. */
  UtilityItem: _propTypes["default"].elementType,

  /** An array of uninstantiated components to render within the utility navigation.  */
  items: _propTypes["default"].arrayOf(_propTypes["default"].elementType),

  /** A boolean representing when the UtilityNav is being displayed within a narrow screen. */
  narrow: _propTypes["default"].bool
} : {};

var HeaderContainer = function HeaderContainer(_ref6) {
  var Logo = _ref6.Logo,
      NavSearch = _ref6.NavSearch;
  var RenderedLogo = Logo !== null ? Logo : null;
  var RenderedNavSearch = (0, _getFallbackComponent["default"])(NavSearch, _index4.HamburgerNavSearch);
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "ma__header__container"
  }, RenderedLogo !== null && /*#__PURE__*/_react["default"].createElement(RenderedLogo, null), RenderedNavSearch !== null && /*#__PURE__*/_react["default"].createElement(RenderedNavSearch, null));
};

exports.HeaderContainer = HeaderContainer;
HeaderContainer.propTypes = process.env.NODE_ENV !== "production" ? {
  /** An uninstantiated component which handles displaying the site logo. */
  Logo: _propTypes["default"].elementType,

  /** An uninstantiated component which handles search functionality. */
  NavSearch: _propTypes["default"].elementType
} : {};
var _default = HeaderNav;
exports["default"] = _default;