@civicactions/cmsds-open-data-components 3.0.0-alpha.2 → 3.0.0-alpha.21

package/lib/templates/mobile_header/index.js

@@ -1,199 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _reactResponsive = require("react-responsive");
-
-var _designSystem = require("@cmsgov/design-system");
-
-var _reactRouterDom = require("react-router-dom");
-
-var _SearchModal = _interopRequireDefault(require("../../components/SearchModal"));
-
-var _NavBar = _interopRequireDefault(require("../../components/NavBar"));
-
-var _CMSGovLogoO = _interopRequireDefault(require("../../assets/images/CMSGovLogo-O.png"));
-
-var _CMSgov2xWhiteO = _interopRequireDefault(require("../../assets/images/CMSgov@2x-white-O.png"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var MobileHeader = function MobileHeader(_ref) {
-  var siteName = _ref.siteName,
-      links = _ref.links,
-      org = _ref.org,
-      searchModalText = _ref.searchModalText,
-      _ref$customSearch = _ref.customSearch,
-      customSearch = _ref$customSearch === void 0 ? false : _ref$customSearch,
-      includeTopNav = _ref.includeTopNav,
-      inversedModalButton = _ref.inversedModalButton,
-      inversedSearchButton = _ref.inversedSearchButton,
-      includeSearch = _ref.includeSearch;
-  var url = org.url,
-      logo = org.logo,
-      urlTitle = org.urlTitle,
-      logoAltText = org.logoAltText,
-      inverseLogo = org.inverseLogo;
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      menuOpen = _useState2[0],
-      setMenuOpen = _useState2[1];
-
-  var mobile = (0, _reactResponsive.useMediaQuery)({
-    minWidth: 0,
-    maxWidth: 543
-  });
-  var tablet = (0, _reactResponsive.useMediaQuery)({
-    minWidth: 544,
-    maxWidth: 1023
-  });
-  var menu = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
-    function handleFocusOut(event) {
-      if (menu.current && !menu.current.contains(event.relatedTarget)) {
-        setMenuOpen(false);
-      }
-    }
-
-    function handleClick(event) {
-      // Links are wrapped in spans, this checks if the parent is an A, also check if in the search modal.
-      if ( // event.target.parentElement.nodeName === 'A' ||
-      event.target.closest('.dc-c-search-dialog')) {
-        setMenuOpen(false);
-      }
-    }
-
-    function handleSearchEnter(event) {
-      // Close upon user hiting enter on search.
-      if (event.keyCode === 13) {
-        setMenuOpen(false);
-      }
-    }
-
-    menu.current.addEventListener('focusout', handleFocusOut);
-    document.addEventListener('mousedown', handleClick);
-    document.addEventListener('keyup', handleSearchEnter);
-    return function () {
-      document.removeEventListener('keyup', handleSearchEnter);
-      document.removeEventListener('mousedown', handleClick);
-
-      if (menu.current) {
-        menu.current.removeEventListener('focusout', handleFocusOut);
-      }
-    };
-  }, [menu.current, menuOpen]);
-  return /*#__PURE__*/_react["default"].createElement("header", {
-    className: "dc-c-header dc-c-mobile-header ".concat(menuOpen ? 'menu-open' : ''),
-    "aria-label": "Site header"
-  }, includeTopNav && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "dc-c-cmsheader ds-u-display--flex ds-u-padding-x--1 ds-u-align-items--center ".concat(mobile ? 'ds-u-justify-content--center' : 'ds-u-justify-content--between')
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "cms-link-container"
-  }, /*#__PURE__*/_react["default"].createElement("a", {
-    href: url,
-    title: urlTitle
-  }, /*#__PURE__*/_react["default"].createElement("img", {
-    src: menuOpen ? inverseLogo : logo,
-    alt: logoAltText
-  }))), tablet && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "ds-u-margin-left--auto"
-  }, /*#__PURE__*/_react["default"].createElement(_NavBar["default"], {
-    links: links.topnav,
-    menuName: "CMS Main Header",
-    menuId: "cmsheader",
-    menuClasses: "ds-u-display--flex dc-c-header--links ds-u-font-size--small"
-  }))), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "dc-c-main-navigation ds-u-display--flex ds-u-justify-content--between ds-u-align-items--center"
-  }, /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
-    variation: "transparent",
-    inversed: true,
-    size: "small",
-    className: "dc-c-mobile-menu--open",
-    onClick: function onClick() {
-      return setMenuOpen(true);
-    }
-  }, mobile ? /*#__PURE__*/_react["default"].createElement("span", {
-    className: "ds-u-visibility--screen-reader"
-  }, "Menu") : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "Menu")), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "ds-u-padding-y--3 dc-c-site-title"
-  }, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, {
-    to: "/"
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "ds-h1"
-  }, siteName))), includeSearch && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "dc-c-mobile-menu--search"
-  }, customSearch ? customSearch : /*#__PURE__*/_react["default"].createElement(_SearchModal["default"], {
-    searchFunc: function searchFunc(e) {
-      e.preventDefault();
-    },
-    searchModalText: searchModalText,
-    buttonSize: 'small',
-    inversedModalButton: inversedModalButton,
-    inversedSearchButton: inversedSearchButton
-  }))), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "dc-c-mobile-header--menu",
-    ref: menu
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "ds-u-display--flex dc-c-mobile-header--menu-close ds-u-justify-content--between"
-  }, /*#__PURE__*/_react["default"].createElement(_designSystem.Button, {
-    variation: "transparent",
-    inversed: true,
-    size: "small",
-    className: "dc-c-mobile-menu--close ds-u-margin-left--1 ds-u-padding-left--0",
-    onClick: function onClick() {
-      return setMenuOpen(false);
-    }
-  }, "Close"), tablet && includeSearch && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "dc-c-mobile-menu--search"
-  }, customSearch ? customSearch : /*#__PURE__*/_react["default"].createElement(_SearchModal["default"], {
-    searchFunc: function searchFunc(e) {
-      e.preventDefault();
-    },
-    searchModalText: searchModalText,
-    buttonSize: 'small'
-  }))), /*#__PURE__*/_react["default"].createElement(_NavBar["default"], {
-    links: links.main,
-    wrapLabel: true,
-    menuName: "CMS Site Main Nav",
-    menuId: "site",
-    menuClasses: "dc-c-header--links dc-c-header--mobile-links",
-    linkClasses: "ds-u-margin-left--1 ds-u-padding-bottom--2 ds-h5"
-  }), mobile && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "cms-mobile-header--container"
-  }, /*#__PURE__*/_react["default"].createElement("span", null), /*#__PURE__*/_react["default"].createElement(_NavBar["default"], {
-    links: links.topnav,
-    menuName: "CMS Main Header",
-    menuId: "cms-mobile-header",
-    linkClasses: "ds-u-margin-left--1 ds-u-margin-bottom--2",
-    menuClasses: "dc-c-header--links ds-u-font-size--small"
-  }))));
-};
-
-MobileHeader.defaultProps = {
-  org: {
-    tagline: 'The Centers for Medicare and Medicaid Services',
-    url: 'https://cms.gov',
-    urlTitle: 'CMS.gov Centers for Medicare & Medicaid Services',
-    logo: _CMSGovLogoO["default"],
-    logoAltText: 'CMS.gov Centers for Medicare & Medicaid Services',
-    inverseLogo: _CMSgov2xWhiteO["default"]
-  },
-  includeTopNav: true,
-  includeSearch: true
-};
-var _default = MobileHeader;
-exports["default"] = _default;