@nauedu/frontend-component-header 14.0.0-semantically-released

package/dist/Menu/menu.scss

@@ -0,0 +1,45 @@
+.menu {
+  position: relative;
+}
+.menu-content {
+  position: absolute;
+  top: 100%;
+  z-index: 10;
+  background: #fff;
+  min-width: 10rem;
+  &.pin-left {
+    left: 0;
+  }
+  &.pin-right {
+    right: 0;
+  }
+}
+
+
+.menu-dropdown-enter {
+  opacity: 0;
+  transform-origin: 75% 0;
+  transform: scale3d(0.8, 0.8, 1);
+}
+.menu-dropdown-enter-active {
+  transform-origin: 75% 0;
+  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  transform: scale3d(1, 1, 1);
+  opacity: 1;
+}
+.menu-dropdown-enter-done {
+}
+
+.menu-dropdown-exit {
+  transform-origin: 75% 0;
+  transform: scale3d(1, 1, 1);
+  opacity: 1;
+}
+.menu-dropdown-exit-active {
+  transform-origin: 75% 0;
+  transform: scale3d(0.8, 0.8, 1);
+  transition: all 250ms cubic-bezier(0.8, 0, 0.6, 1);
+  opacity: 0;
+}
+.menu-dropdown-exit-done {
+}

package/dist/MobileHeader.js

@@ -0,0 +1,240 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+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); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform'; // Local Components
+
+import { Menu, MenuTrigger, MenuContent } from './Menu';
+import Avatar from './Avatar';
+import { LinkedLogo, Logo } from './Logo'; // i18n
+
+import messages from './Header.messages'; // Assets
+
+import { MenuIcon } from './Icons';
+
+var MobileHeader = /*#__PURE__*/function (_React$Component) {
+  _inherits(MobileHeader, _React$Component);
+
+  var _super = _createSuper(MobileHeader);
+
+  function MobileHeader(props) {
+    _classCallCheck(this, MobileHeader);
+
+    // eslint-disable-line no-useless-constructor
+    return _super.call(this, props);
+  }
+
+  _createClass(MobileHeader, [{
+    key: "renderMainMenu",
+    value: function renderMainMenu() {
+      var mainMenu = this.props.mainMenu; // Nodes are accepted as a prop
+
+      if (!Array.isArray(mainMenu)) {
+        return mainMenu;
+      }
+
+      return mainMenu.map(function (menuItem) {
+        var type = menuItem.type,
+            href = menuItem.href,
+            content = menuItem.content,
+            submenuContent = menuItem.submenuContent;
+
+        if (type === 'item') {
+          return /*#__PURE__*/React.createElement("a", {
+            key: "".concat(type, "-").concat(content),
+            className: "nav-link",
+            href: href
+          }, content);
+        }
+
+        return /*#__PURE__*/React.createElement(Menu, {
+          key: "".concat(type, "-").concat(content),
+          tag: "div",
+          className: "nav-item"
+        }, /*#__PURE__*/React.createElement(MenuTrigger, {
+          tag: "a",
+          role: "button",
+          tabIndex: "0",
+          className: "nav-link"
+        }, content), /*#__PURE__*/React.createElement(MenuContent, {
+          className: "position-static pin-left pin-right py-2"
+        }, submenuContent));
+      });
+    }
+  }, {
+    key: "renderUserMenuItems",
+    value: function renderUserMenuItems() {
+      var userMenu = this.props.userMenu;
+      return userMenu.map(function (_ref) {
+        var type = _ref.type,
+            href = _ref.href,
+            content = _ref.content;
+        return /*#__PURE__*/React.createElement("li", {
+          className: "nav-item",
+          key: "".concat(type, "-").concat(content)
+        }, /*#__PURE__*/React.createElement("a", {
+          className: "nav-link",
+          href: href
+        }, content));
+      });
+    }
+  }, {
+    key: "renderLoggedOutItems",
+    value: function renderLoggedOutItems() {
+      var loggedOutItems = this.props.loggedOutItems;
+      return loggedOutItems.map(function (_ref2, i, arr) {
+        var type = _ref2.type,
+            href = _ref2.href,
+            content = _ref2.content;
+        return /*#__PURE__*/React.createElement("li", {
+          className: "nav-item px-3 my-2",
+          key: "".concat(type, "-").concat(content)
+        }, /*#__PURE__*/React.createElement("a", {
+          className: i < arr.length - 1 ? 'btn btn-block btn-outline-primary' : 'btn btn-block btn-primary',
+          href: href
+        }, content));
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          logo = _this$props.logo,
+          logoAltText = _this$props.logoAltText,
+          logoDestination = _this$props.logoDestination,
+          loggedIn = _this$props.loggedIn,
+          avatar = _this$props.avatar,
+          username = _this$props.username,
+          stickyOnMobile = _this$props.stickyOnMobile,
+          intl = _this$props.intl,
+          mainMenu = _this$props.mainMenu,
+          userMenu = _this$props.userMenu,
+          loggedOutItems = _this$props.loggedOutItems;
+      var logoProps = {
+        src: logo,
+        alt: logoAltText,
+        href: logoDestination
+      };
+      var stickyClassName = stickyOnMobile ? 'sticky-top' : '';
+      var logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'justify-content-left pl-3' : 'justify-content-center';
+      return /*#__PURE__*/React.createElement("header", {
+        "aria-label": intl.formatMessage(messages['header.label.main.header']),
+        className: "site-header-mobile d-flex justify-content-between align-items-center shadow ".concat(stickyClassName)
+      }, /*#__PURE__*/React.createElement("a", {
+        className: "nav-skip sr-only sr-only-focusable",
+        href: "#main"
+      }, intl.formatMessage(messages['header.label.skip.nav'])), mainMenu.length > 0 ? /*#__PURE__*/React.createElement("div", {
+        className: "w-100 d-flex justify-content-start"
+      }, /*#__PURE__*/React.createElement(Menu, {
+        className: "position-static"
+      }, /*#__PURE__*/React.createElement(MenuTrigger, {
+        tag: "button",
+        className: "icon-button",
+        "aria-label": intl.formatMessage(messages['header.label.main.menu']),
+        title: intl.formatMessage(messages['header.label.main.menu'])
+      }, /*#__PURE__*/React.createElement(MenuIcon, {
+        role: "img",
+        "aria-hidden": true,
+        focusable: "false",
+        style: {
+          width: '1.5rem',
+          height: '1.5rem'
+        }
+      })), /*#__PURE__*/React.createElement(MenuContent, {
+        tag: "nav",
+        "aria-label": intl.formatMessage(messages['header.label.main.nav']),
+        className: "nav flex-column pin-left pin-right border-top shadow py-2"
+      }, this.renderMainMenu()))) : null, /*#__PURE__*/React.createElement("div", {
+        className: "w-100 d-flex ".concat(logoClasses)
+      }, logoDestination === null ? /*#__PURE__*/React.createElement(Logo, {
+        className: "logo",
+        src: logo,
+        alt: logoAltText
+      }) : /*#__PURE__*/React.createElement(LinkedLogo, _extends({
+        className: "logo"
+      }, logoProps, {
+        itemType: "http://schema.org/Organization"
+      }))), userMenu.length > 0 || loggedOutItems.length > 0 ? /*#__PURE__*/React.createElement("div", {
+        className: "w-100 d-flex justify-content-end align-items-center"
+      }, /*#__PURE__*/React.createElement(Menu, {
+        tag: "nav",
+        "aria-label": intl.formatMessage(messages['header.label.secondary.nav']),
+        className: "position-static"
+      }, /*#__PURE__*/React.createElement(MenuTrigger, {
+        tag: "button",
+        className: "icon-button",
+        "aria-label": intl.formatMessage(messages['header.label.account.menu']),
+        title: intl.formatMessage(messages['header.label.account.menu'])
+      }, /*#__PURE__*/React.createElement(Avatar, {
+        size: "1.5rem",
+        src: avatar,
+        alt: username
+      })), /*#__PURE__*/React.createElement(MenuContent, {
+        tag: "ul",
+        className: "nav flex-column pin-left pin-right border-top shadow py-2"
+      }, loggedIn ? this.renderUserMenuItems() : this.renderLoggedOutItems()))) : null);
+    }
+  }]);
+
+  return MobileHeader;
+}(React.Component);
+
+MobileHeader.propTypes = {
+  mainMenu: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),
+  userMenu: PropTypes.arrayOf(PropTypes.shape({
+    type: PropTypes.oneOf(['item', 'menu']),
+    href: PropTypes.string,
+    content: PropTypes.string
+  })),
+  loggedOutItems: PropTypes.arrayOf(PropTypes.shape({
+    type: PropTypes.oneOf(['item', 'menu']),
+    href: PropTypes.string,
+    content: PropTypes.string
+  })),
+  logo: PropTypes.string,
+  logoAltText: PropTypes.string,
+  logoDestination: PropTypes.string,
+  avatar: PropTypes.string,
+  username: PropTypes.string,
+  loggedIn: PropTypes.bool,
+  stickyOnMobile: PropTypes.bool,
+  // i18n
+  intl: intlShape.isRequired
+};
+MobileHeader.defaultProps = {
+  mainMenu: [],
+  userMenu: [],
+  loggedOutItems: [],
+  logo: null,
+  logoAltText: null,
+  logoDestination: null,
+  avatar: null,
+  username: null,
+  loggedIn: false,
+  stickyOnMobile: true
+};
+export default injectIntl(MobileHeader);
+//# sourceMappingURL=MobileHeader.js.map

package/dist/MobileHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/MobileHeader.jsx"],"names":["React","PropTypes","injectIntl","intlShape","getConfig","Menu","MenuTrigger","MenuContent","Avatar","LinkedLogo","Logo","messages","MenuIcon","MobileHeader","props","mainMenu","Array","isArray","map","menuItem","type","href","content","submenuContent","userMenu","loggedOutItems","i","arr","length","logo","logoAltText","logoDestination","loggedIn","avatar","username","stickyOnMobile","intl","logoProps","src","alt","stickyClassName","logoClasses","AUTHN_MINIMAL_HEADER","formatMessage","width","height","renderMainMenu","renderUserMenuItems","renderLoggedOutItems","Component","propTypes","oneOfType","node","array","arrayOf","shape","oneOf","string","bool","isRequired","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { getConfig } from '@edx/frontend-platform';\n\n// Local Components\nimport { Menu, MenuTrigger, MenuContent } from './Menu';\nimport Avatar from './Avatar';\nimport { LinkedLogo, Logo } from './Logo';\n\n// i18n\nimport messages from './Header.messages';\n\n// Assets\nimport { MenuIcon } from './Icons';\n\nclass MobileHeader extends React.Component {\n  constructor(props) { // eslint-disable-line no-useless-constructor\n    super(props);\n  }\n\n  renderMainMenu() {\n    const { mainMenu } = this.props;\n\n    // Nodes are accepted as a prop\n    if (!Array.isArray(mainMenu)) {\n      return mainMenu;\n    }\n\n    return mainMenu.map((menuItem) => {\n      const {\n        type,\n        href,\n        content,\n        submenuContent,\n      } = menuItem;\n\n      if (type === 'item') {\n        return (\n          <a key={`${type}-${content}`} className=\"nav-link\" href={href}>\n            {content}\n          </a>\n        );\n      }\n\n      return (\n        <Menu key={`${type}-${content}`} tag=\"div\" className=\"nav-item\">\n          <MenuTrigger tag=\"a\" role=\"button\" tabIndex=\"0\" className=\"nav-link\">\n            {content}\n          </MenuTrigger>\n          <MenuContent className=\"position-static pin-left pin-right py-2\">\n            {submenuContent}\n          </MenuContent>\n        </Menu>\n      );\n    });\n  }\n\n  renderUserMenuItems() {\n    const { userMenu } = this.props;\n\n    return userMenu.map(({ type, href, content }) => (\n      <li className=\"nav-item\" key={`${type}-${content}`}>\n        <a className=\"nav-link\" href={href}>{content}</a>\n      </li>\n    ));\n  }\n\n  renderLoggedOutItems() {\n    const { loggedOutItems } = this.props;\n\n    return loggedOutItems.map(({ type, href, content }, i, arr) => (\n      <li className=\"nav-item px-3 my-2\" key={`${type}-${content}`}>\n        <a\n          className={i < arr.length - 1 ? 'btn btn-block btn-outline-primary' : 'btn btn-block btn-primary'}\n          href={href}\n        >\n          {content}\n        </a>\n      </li>\n    ));\n  }\n\n  render() {\n    const {\n      logo,\n      logoAltText,\n      logoDestination,\n      loggedIn,\n      avatar,\n      username,\n      stickyOnMobile,\n      intl,\n      mainMenu,\n      userMenu,\n      loggedOutItems,\n    } = this.props;\n    const logoProps = { src: logo, alt: logoAltText, href: logoDestination };\n    const stickyClassName = stickyOnMobile ? 'sticky-top' : '';\n    const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'justify-content-left pl-3' : 'justify-content-center';\n\n    return (\n      <header\n        aria-label={intl.formatMessage(messages['header.label.main.header'])}\n        className={`site-header-mobile d-flex justify-content-between align-items-center shadow ${stickyClassName}`}\n      >\n        <a className=\"nav-skip sr-only sr-only-focusable\" href=\"#main\">{intl.formatMessage(messages['header.label.skip.nav'])}</a>\n        {mainMenu.length > 0 ? (\n          <div className=\"w-100 d-flex justify-content-start\">\n\n            <Menu className=\"position-static\">\n              <MenuTrigger\n                tag=\"button\"\n                className=\"icon-button\"\n                aria-label={intl.formatMessage(messages['header.label.main.menu'])}\n                title={intl.formatMessage(messages['header.label.main.menu'])}\n              >\n                <MenuIcon role=\"img\" aria-hidden focusable=\"false\" style={{ width: '1.5rem', height: '1.5rem' }} />\n              </MenuTrigger>\n              <MenuContent\n                tag=\"nav\"\n                aria-label={intl.formatMessage(messages['header.label.main.nav'])}\n                className=\"nav flex-column pin-left pin-right border-top shadow py-2\"\n              >\n                {this.renderMainMenu()}\n              </MenuContent>\n            </Menu>\n          </div>\n        ) : null}\n        <div className={`w-100 d-flex ${logoClasses}`}>\n          { logoDestination === null ? <Logo className=\"logo\" src={logo} alt={logoAltText} /> : <LinkedLogo className=\"logo\" {...logoProps} itemType=\"http://schema.org/Organization\" />}\n        </div>\n        {userMenu.length > 0 || loggedOutItems.length > 0 ? (\n          <div className=\"w-100 d-flex justify-content-end align-items-center\">\n            <Menu tag=\"nav\" aria-label={intl.formatMessage(messages['header.label.secondary.nav'])} className=\"position-static\">\n              <MenuTrigger\n                tag=\"button\"\n                className=\"icon-button\"\n                aria-label={intl.formatMessage(messages['header.label.account.menu'])}\n                title={intl.formatMessage(messages['header.label.account.menu'])}\n              >\n                <Avatar size=\"1.5rem\" src={avatar} alt={username} />\n              </MenuTrigger>\n              <MenuContent tag=\"ul\" className=\"nav flex-column pin-left pin-right border-top shadow py-2\">\n                {loggedIn ? this.renderUserMenuItems() : this.renderLoggedOutItems()}\n              </MenuContent>\n            </Menu>\n          </div>\n        ) : null}\n      </header>\n    );\n  }\n}\n\nMobileHeader.propTypes = {\n  mainMenu: PropTypes.oneOfType([\n    PropTypes.node,\n    PropTypes.array,\n  ]),\n\n  userMenu: PropTypes.arrayOf(PropTypes.shape({\n    type: PropTypes.oneOf(['item', 'menu']),\n    href: PropTypes.string,\n    content: PropTypes.string,\n  })),\n  loggedOutItems: PropTypes.arrayOf(PropTypes.shape({\n    type: PropTypes.oneOf(['item', 'menu']),\n    href: PropTypes.string,\n    content: PropTypes.string,\n  })),\n  logo: PropTypes.string,\n  logoAltText: PropTypes.string,\n  logoDestination: PropTypes.string,\n  avatar: PropTypes.string,\n  username: PropTypes.string,\n  loggedIn: PropTypes.bool,\n  stickyOnMobile: PropTypes.bool,\n\n  // i18n\n  intl: intlShape.isRequired,\n};\n\nMobileHeader.defaultProps = {\n  mainMenu: [],\n  userMenu: [],\n  loggedOutItems: [],\n  logo: null,\n  logoAltText: null,\n  logoDestination: null,\n  avatar: null,\n  username: null,\n  loggedIn: false,\n  stickyOnMobile: true,\n\n};\n\nexport default injectIntl(MobileHeader);\n"],"file":"MobileHeader.js"}