@civicactions/cmsds-open-data-components 2.0.0-alpha.9 → 2.0.1

package/lib/templates/mobile_header/index.js

@@ -0,0 +1,199 @@
+"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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@civicactions/cmsds-open-data-components",
-  "version": "2.0.0-alpha.9",
+  "version": "2.0.1",
   "description": "Components for the open data catalog frontend using CMS Design System",
   "main": "dist/main.js",
   "source": "src/index.ts",
@@ -31,18 +31,22 @@
     "swagger-ui-react": "^4.15.5"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.22.5",
+    "@babel/preset-react": "^7.22.5",
     "@parcel/packager-ts": "^2.8.3",
     "@parcel/transformer-sass": "^2.8.3",
     "@parcel/transformer-typescript-types": "^2.8.3",
-    "@storybook/react": "^6.5.16",
+    "@storybook/react": "^7.0.22",
     "@testing-library/dom": "^8.20.0",
-    "@testing-library/jest-dom": "^5.9.0",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "core-js": "^3.27.2",
     "css-loader": "^6.7.3",
-    "jest": "29.4.1",
-    "jest-axe": "^7.0.0",
+    "jest": "29.5.0",
+    "jest-axe": "^7.0.1",
+    "jest-canvas-mock": "^2.5.1",
+    "jest-environment-jsdom": "^29.5.0",
     "parcel": "^2.8.3",
     "prettier": "^2.5.1",
     "react-test-renderer": "^18.2.0",
@@ -64,4 +68,4 @@
     "lib",
     "dist"
   ]
-}
+}