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

package/README.rst

@@ -0,0 +1,113 @@
+#########################
+frontend-component-header
+#########################
+
+|Build Status| |Codecov| |npm_version| |npm_downloads| |license| |semantic-release|
+
+********
+Overview
+********
+
+A generic header for Open edX micro-frontend applications.
+
+************
+Requirements
+************
+
+This component uses ``@edx/frontend-platform`` services such as i18n, analytics, configuration, and the ``AppContext`` React component, and expects that it has been loaded into a micro-frontend that has been properly initialized via ``@edx/frontend-platform``'s ``initialize`` function. `Please visit the frontend template application to see an example. <https://github.com/edx/frontend-template-application/blob/master/src/index.jsx>`_
+
+Environment Variables
+=====================
+
+* ``LMS_BASE_URL`` - The URL of the LMS of your Open edX instance.
+* ``LOGOUT_URL`` - The URL of the API endpoint which performs a user logout.
+* ``LOGIN_URL`` - The URL of the login page where a user can sign into their account.
+* ``SITE_NAME`` - The user-facing name of the site, used as `alt` text on the logo in the header.
+  Defaults to "localhost" in development.
+* ``LOGO_URL`` - The URL of the site's logo.  This logo is displayed in the header.
+* ``ORDER_HISTORY_URL`` - The URL of the order history page.
+* ``AUTHN_MINIMAL_HEADER`` - A boolean flag which hides the main menu, user menu, and logged-out
+  menu items when truthy.  This is intended to be used in micro-frontends like
+  frontend-app-authentication in which these menus are considered distractions from the user's task.
+* ``ENABLE_ORG_LOGO`` - A boolean flag to enable the display of the org logo on the center of the 
+  header nav bar. Defaults to **false**
+
+************
+Installation
+************
+
+To install this header into your Open edX micro-frontend, run the following command in your MFE:
+
+``npm i --save @nauedu/frontend-component-header``
+
+This will make the component available to be imported into your application.
+
+*****
+Usage
+*****
+
+This library has the following exports:
+
+* ``(default)``: The header as a React component.
+* ``messages``: Internationalization messages suitable for use with `@edx/frontend-platform/i18n <https://edx.github.io/frontend-platform/module-Internationalization.html>`_
+* ``dist/index.scss``: A SASS file which contains style information for the component.  It should be imported into the micro-frontend's own SCSS file.
+
+Examples
+========
+
+* `An example of component and messages usage. <https://github.com/edx/frontend-template-application/blob/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx#L21>`_
+* `An example of SCSS file usage. <https://github.com/edx/frontend-template-application/blob/3cd5485bf387b8c479baf6b02bf59e3061dc3465/src/index.scss#L8>`_
+
+
+***********
+Development
+***********
+
+Install dependencies::
+
+  npm i
+
+Start the development server::
+
+  npm start
+
+Build a production distribution::
+
+  npm run build
+
+***********
+Publishing to npmjs.com
+***********
+
+Any changes to this library have to be pushed to npmjs.com to be reflected on the build.
+
+Publish to npm::
+
+  npm publish
+
+
+***********
+Deploy in production
+***********
+To replace the default edx header with the new one, use one of the following instructions:
+
+Add the necessary settings to the mfe_brand plugin::
+
+  RUN npm install '@edx/frontend-component-header@npm:@nauedu/frontend-component-header'
+
+Alternatively, you can specify the version::
+
+  RUN npm install '@edx/frontend-component-header@npm:@nauedu/frontend-component-header@1.0.0'
+
+.. |Build Status| image:: https://api.travis-ci.com/edx/frontend-component-header.svg?branch=master
+   :target: https://travis-ci.com/edx/frontend-component-header
+.. |Codecov| image:: https://img.shields.io/codecov/c/github/edx/frontend-component-header
+   :target: @edx/frontend-component-header
+.. |npm_version| image:: https://img.shields.io/npm/v/@edx/frontend-component-header.svg
+   :target: @edx/frontend-component-header
+.. |npm_downloads| image:: https://img.shields.io/npm/dt/@edx/frontend-component-header.svg
+   :target: @edx/frontend-component-header
+.. |license| image:: https://img.shields.io/npm/l/@edx/frontend-component-header.svg
+   :target: @edx/frontend-component-header
+.. |semantic-release| image:: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
+   :target: https://github.com/semantic-release/semantic-release

package/dist/Avatar.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { AvatarIcon } from './Icons';
+
+function Avatar(_ref) {
+  var size = _ref.size,
+      src = _ref.src,
+      alt = _ref.alt,
+      className = _ref.className;
+  var avatar = src ? /*#__PURE__*/React.createElement("img", {
+    className: "d-block w-100 h-100",
+    src: src,
+    alt: alt
+  }) : /*#__PURE__*/React.createElement(AvatarIcon, {
+    style: {
+      width: size,
+      height: size
+    },
+    role: "img",
+    "aria-hidden": true,
+    focusable: "false"
+  });
+  return /*#__PURE__*/React.createElement("span", {
+    style: {
+      height: size,
+      width: size
+    },
+    className: "avatar overflow-hidden d-inline-flex rounded-circle ".concat(className)
+  }, avatar);
+}
+
+Avatar.propTypes = {
+  src: PropTypes.string,
+  size: PropTypes.string,
+  alt: PropTypes.string,
+  className: PropTypes.string
+};
+Avatar.defaultProps = {
+  src: null,
+  size: '2rem',
+  alt: null,
+  className: null
+};
+export default Avatar;
+//# sourceMappingURL=Avatar.js.map

package/dist/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Avatar.jsx"],"names":["React","PropTypes","AvatarIcon","Avatar","size","src","alt","className","avatar","width","height","propTypes","string","defaultProps"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,SAASC,UAAT,QAA2B,SAA3B;;AAEA,SAASC,MAAT,OAKG;AAAA,MAJDC,IAIC,QAJDA,IAIC;AAAA,MAHDC,GAGC,QAHDA,GAGC;AAAA,MAFDC,GAEC,QAFDA,GAEC;AAAA,MADDC,SACC,QADDA,SACC;AACD,MAAMC,MAAM,GAAGH,GAAG,gBAChB;AAAK,IAAA,SAAS,EAAC,qBAAf;AAAqC,IAAA,GAAG,EAAEA,GAA1C;AAA+C,IAAA,GAAG,EAAEC;AAApD,IADgB,gBAGhB,oBAAC,UAAD;AAAY,IAAA,KAAK,EAAE;AAAEG,MAAAA,KAAK,EAAEL,IAAT;AAAeM,MAAAA,MAAM,EAAEN;AAAvB,KAAnB;AAAkD,IAAA,IAAI,EAAC,KAAvD;AAA6D,uBAA7D;AAAyE,IAAA,SAAS,EAAC;AAAnF,IAHF;AAMA,sBACE;AACE,IAAA,KAAK,EAAE;AAAEM,MAAAA,MAAM,EAAEN,IAAV;AAAgBK,MAAAA,KAAK,EAAEL;AAAvB,KADT;AAEE,IAAA,SAAS,gEAAyDG,SAAzD;AAFX,KAIGC,MAJH,CADF;AAQD;;AAEDL,MAAM,CAACQ,SAAP,GAAmB;AACjBN,EAAAA,GAAG,EAAEJ,SAAS,CAACW,MADE;AAEjBR,EAAAA,IAAI,EAAEH,SAAS,CAACW,MAFC;AAGjBN,EAAAA,GAAG,EAAEL,SAAS,CAACW,MAHE;AAIjBL,EAAAA,SAAS,EAAEN,SAAS,CAACW;AAJJ,CAAnB;AAOAT,MAAM,CAACU,YAAP,GAAsB;AACpBR,EAAAA,GAAG,EAAE,IADe;AAEpBD,EAAAA,IAAI,EAAE,MAFc;AAGpBE,EAAAA,GAAG,EAAE,IAHe;AAIpBC,EAAAA,SAAS,EAAE;AAJS,CAAtB;AAOA,eAAeJ,MAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { AvatarIcon } from './Icons';\n\nfunction Avatar({\n  size,\n  src,\n  alt,\n  className,\n}) {\n  const avatar = src ? (\n    <img className=\"d-block w-100 h-100\" src={src} alt={alt} />\n  ) : (\n    <AvatarIcon style={{ width: size, height: size }} role=\"img\" aria-hidden focusable=\"false\" />\n  );\n\n  return (\n    <span\n      style={{ height: size, width: size }}\n      className={`avatar overflow-hidden d-inline-flex rounded-circle ${className}`}\n    >\n      {avatar}\n    </span>\n  );\n}\n\nAvatar.propTypes = {\n  src: PropTypes.string,\n  size: PropTypes.string,\n  alt: PropTypes.string,\n  className: PropTypes.string,\n};\n\nAvatar.defaultProps = {\n  src: null,\n  size: '2rem',\n  alt: null,\n  className: null,\n};\n\nexport default Avatar;\n"],"file":"Avatar.js"}

package/dist/DesktopHeader.js

@@ -0,0 +1,218 @@
+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 { CaretIcon } from './Icons';
+
+var DesktopHeader = /*#__PURE__*/function (_React$Component) {
+  _inherits(DesktopHeader, _React$Component);
+
+  var _super = _createSuper(DesktopHeader);
+
+  function DesktopHeader(props) {
+    _classCallCheck(this, DesktopHeader);
+
+    // eslint-disable-line no-useless-constructor
+    return _super.call(this, props);
+  }
+
+  _createClass(DesktopHeader, [{
+    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",
+          respondToPointerEvents: true
+        }, /*#__PURE__*/React.createElement(MenuTrigger, {
+          tag: "a",
+          className: "nav-link d-inline-flex align-items-center",
+          href: href
+        }, content, " ", /*#__PURE__*/React.createElement(CaretIcon, {
+          role: "img",
+          "aria-hidden": true,
+          focusable: "false"
+        })), /*#__PURE__*/React.createElement(MenuContent, {
+          className: "pin-left pin-right shadow py-2"
+        }, submenuContent));
+      });
+    }
+  }, {
+    key: "renderUserMenu",
+    value: function renderUserMenu() {
+      var _this$props = this.props,
+          userMenu = _this$props.userMenu,
+          avatar = _this$props.avatar,
+          username = _this$props.username,
+          intl = _this$props.intl;
+      return /*#__PURE__*/React.createElement(Menu, {
+        transitionClassName: "menu-dropdown",
+        transitionTimeout: 250
+      }, /*#__PURE__*/React.createElement(MenuTrigger, {
+        tag: "button",
+        "aria-label": intl.formatMessage(messages['header.label.account.menu.for'], {
+          username: username
+        }),
+        className: "btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
+      }, /*#__PURE__*/React.createElement(Avatar, {
+        size: "1.5em",
+        src: avatar,
+        alt: "",
+        className: "mr-2"
+      }), username, " ", /*#__PURE__*/React.createElement(CaretIcon, {
+        role: "img",
+        "aria-hidden": true,
+        focusable: "false"
+      })), /*#__PURE__*/React.createElement(MenuContent, {
+        className: "mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2"
+      }, userMenu.map(function (_ref) {
+        var type = _ref.type,
+            href = _ref.href,
+            content = _ref.content;
+        return /*#__PURE__*/React.createElement("a", {
+          className: "dropdown-".concat(type),
+          key: "".concat(type, "-").concat(content),
+          href: href
+        }, content);
+      })));
+    }
+  }, {
+    key: "renderLoggedOutItems",
+    value: function renderLoggedOutItems() {
+      var loggedOutItems = this.props.loggedOutItems;
+      return loggedOutItems.map(function (item, i, arr) {
+        return /*#__PURE__*/React.createElement("a", {
+          key: "".concat(item.type, "-").concat(item.content),
+          className: i < arr.length - 1 ? 'btn mr-2 btn-link' : 'btn mr-2 btn-outline-primary',
+          href: item.href
+        }, item.content);
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          logo = _this$props2.logo,
+          logoAltText = _this$props2.logoAltText,
+          logoDestination = _this$props2.logoDestination,
+          loggedIn = _this$props2.loggedIn,
+          intl = _this$props2.intl;
+      var logoProps = {
+        src: logo,
+        alt: logoAltText,
+        href: logoDestination
+      };
+      var logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'mw-100' : null;
+      return /*#__PURE__*/React.createElement("header", {
+        className: "site-header-desktop"
+      }, /*#__PURE__*/React.createElement("a", {
+        className: "nav-skip sr-only sr-only-focusable",
+        href: "#main"
+      }, intl.formatMessage(messages['header.label.skip.nav'])), /*#__PURE__*/React.createElement("div", {
+        className: "container-fluid ".concat(logoClasses)
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "nav-container position-relative d-flex align-items-center"
+      }, logoDestination === null ? /*#__PURE__*/React.createElement(Logo, {
+        className: "logo",
+        src: logo,
+        alt: logoAltText
+      }) : /*#__PURE__*/React.createElement(LinkedLogo, _extends({
+        className: "logo"
+      }, logoProps)), /*#__PURE__*/React.createElement("nav", {
+        "aria-label": intl.formatMessage(messages['header.label.main.nav']),
+        className: "nav main-nav"
+      }, this.renderMainMenu()), /*#__PURE__*/React.createElement("nav", {
+        "aria-label": intl.formatMessage(messages['header.label.secondary.nav']),
+        className: "nav secondary-menu-container align-items-center ml-auto"
+      }, loggedIn ? this.renderUserMenu() : this.renderLoggedOutItems()))));
+    }
+  }]);
+
+  return DesktopHeader;
+}(React.Component);
+
+DesktopHeader.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,
+  // i18n
+  intl: intlShape.isRequired
+};
+DesktopHeader.defaultProps = {
+  mainMenu: [],
+  userMenu: [],
+  loggedOutItems: [],
+  logo: null,
+  logoAltText: null,
+  logoDestination: null,
+  avatar: null,
+  username: null,
+  loggedIn: false
+};
+export default injectIntl(DesktopHeader);
+//# sourceMappingURL=DesktopHeader.js.map

package/dist/DesktopHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/DesktopHeader.jsx"],"names":["React","PropTypes","injectIntl","intlShape","getConfig","Menu","MenuTrigger","MenuContent","Avatar","LinkedLogo","Logo","messages","CaretIcon","DesktopHeader","props","mainMenu","Array","isArray","map","menuItem","type","href","content","submenuContent","userMenu","avatar","username","intl","formatMessage","loggedOutItems","item","i","arr","length","logo","logoAltText","logoDestination","loggedIn","logoProps","src","alt","logoClasses","AUTHN_MINIMAL_HEADER","renderMainMenu","renderUserMenu","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 { CaretIcon } from './Icons';\n\nclass DesktopHeader 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}>{content}</a>\n        );\n      }\n\n      return (\n        <Menu key={`${type}-${content}`} tag=\"div\" className=\"nav-item\" respondToPointerEvents>\n          <MenuTrigger tag=\"a\" className=\"nav-link d-inline-flex align-items-center\" href={href}>\n            {content} <CaretIcon role=\"img\" aria-hidden focusable=\"false\" />\n          </MenuTrigger>\n          <MenuContent className=\"pin-left pin-right shadow py-2\">\n            {submenuContent}\n          </MenuContent>\n        </Menu>\n      );\n    });\n  }\n\n  renderUserMenu() {\n    const {\n      userMenu,\n      avatar,\n      username,\n      intl,\n    } = this.props;\n\n    return (\n      <Menu transitionClassName=\"menu-dropdown\" transitionTimeout={250}>\n        <MenuTrigger\n          tag=\"button\"\n          aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { username })}\n          className=\"btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3\"\n        >\n          <Avatar size=\"1.5em\" src={avatar} alt=\"\" className=\"mr-2\" />\n          {username} <CaretIcon role=\"img\" aria-hidden focusable=\"false\" />\n        </MenuTrigger>\n        <MenuContent className=\"mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2\">\n          {userMenu.map(({ type, href, content }) => (\n            <a className={`dropdown-${type}`} key={`${type}-${content}`} href={href}>{content}</a>\n          ))}\n        </MenuContent>\n      </Menu>\n    );\n  }\n\n  renderLoggedOutItems() {\n    const { loggedOutItems } = this.props;\n\n    return loggedOutItems.map((item, i, arr) => (\n      <a\n        key={`${item.type}-${item.content}`}\n        className={i < arr.length - 1 ? 'btn mr-2 btn-link' : 'btn mr-2 btn-outline-primary'}\n        href={item.href}\n      >\n        {item.content}\n      </a>\n    ));\n  }\n\n  render() {\n    const {\n      logo,\n      logoAltText,\n      logoDestination,\n      loggedIn,\n      intl,\n    } = this.props;\n    const logoProps = { src: logo, alt: logoAltText, href: logoDestination };\n    const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'mw-100' : null;\n\n    return (\n      <header className=\"site-header-desktop\">\n        <a className=\"nav-skip sr-only sr-only-focusable\" href=\"#main\">{intl.formatMessage(messages['header.label.skip.nav'])}</a>\n        <div className={`container-fluid ${logoClasses}`}>\n          <div className=\"nav-container position-relative d-flex align-items-center\">\n            {logoDestination === null ? <Logo className=\"logo\" src={logo} alt={logoAltText} /> : <LinkedLogo className=\"logo\" {...logoProps} />}\n            <nav\n              aria-label={intl.formatMessage(messages['header.label.main.nav'])}\n              className=\"nav main-nav\"\n            >\n              {this.renderMainMenu()}\n            </nav>\n            <nav\n              aria-label={intl.formatMessage(messages['header.label.secondary.nav'])}\n              className=\"nav secondary-menu-container align-items-center ml-auto\"\n            >\n              {loggedIn ? this.renderUserMenu() : this.renderLoggedOutItems()}\n            </nav>\n          </div>\n        </div>\n      </header>\n    );\n  }\n}\n\nDesktopHeader.propTypes = {\n  mainMenu: PropTypes.oneOfType([\n    PropTypes.node,\n    PropTypes.array,\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\n  // i18n\n  intl: intlShape.isRequired,\n};\n\nDesktopHeader.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};\n\nexport default injectIntl(DesktopHeader);\n"],"file":"DesktopHeader.js"}

package/dist/Header.js

@@ -0,0 +1,86 @@
+import React, { useContext } from 'react';
+import Responsive from 'react-responsive';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { AppContext } from '@edx/frontend-platform/react';
+import { APP_CONFIG_INITIALIZED, ensureConfig, mergeConfig, getConfig, subscribe } from '@edx/frontend-platform';
+import DesktopHeader from './DesktopHeader';
+import MobileHeader from './MobileHeader';
+import messages from './Header.messages';
+ensureConfig(['LMS_BASE_URL', 'LOGOUT_URL', 'LOGIN_URL', 'SITE_NAME', 'LOGO_URL', 'ORDER_HISTORY_URL'], 'Header component');
+subscribe(APP_CONFIG_INITIALIZED, function () {
+  mergeConfig({
+    AUTHN_MINIMAL_HEADER: !!process.env.AUTHN_MINIMAL_HEADER
+  }, 'Header additional config');
+});
+
+function Header(_ref) {
+  var intl = _ref.intl;
+
+  var _useContext = useContext(AppContext),
+      authenticatedUser = _useContext.authenticatedUser,
+      config = _useContext.config;
+
+  var mainMenu = [{
+    type: 'item',
+    href: "".concat(config.LMS_BASE_URL, "/dashboard"),
+    content: intl.formatMessage(messages['header.links.courses'])
+  }];
+  var orderHistoryItem = {
+    type: 'item',
+    href: config.ORDER_HISTORY_URL,
+    content: intl.formatMessage(messages['header.user.menu.order.history'])
+  };
+  var userMenu = authenticatedUser === null ? [] : [{
+    type: 'item',
+    href: "".concat(config.LMS_BASE_URL, "/dashboard"),
+    content: intl.formatMessage(messages['header.user.menu.dashboard'])
+  }, {
+    type: 'item',
+    href: "".concat(config.LMS_BASE_URL, "/u/").concat(authenticatedUser.username),
+    content: intl.formatMessage(messages['header.user.menu.profile'])
+  }, {
+    type: 'item',
+    href: "".concat(config.LMS_BASE_URL, "/account/settings"),
+    content: intl.formatMessage(messages['header.user.menu.account.settings'])
+  }, {
+    type: 'item',
+    href: config.LOGOUT_URL,
+    content: intl.formatMessage(messages['header.user.menu.logout'])
+  }]; // Users should only see Order History if have a ORDER_HISTORY_URL define in the environment.
+
+  if (config.ORDER_HISTORY_URL) {
+    userMenu.splice(-1, 0, orderHistoryItem);
+  }
+
+  var loggedOutItems = [{
+    type: 'item',
+    href: config.LOGIN_URL,
+    content: intl.formatMessage(messages['header.user.menu.login'])
+  }, {
+    type: 'item',
+    href: "".concat(config.LMS_BASE_URL, "/register"),
+    content: intl.formatMessage(messages['header.user.menu.register'])
+  }];
+  var props = {
+    logo: config.LOGO_URL,
+    logoAltText: config.SITE_NAME,
+    logoDestination: "".concat(config.LMS_BASE_URL, "/dashboard"),
+    loggedIn: authenticatedUser !== null,
+    username: authenticatedUser !== null ? authenticatedUser.username : null,
+    avatar: authenticatedUser !== null ? authenticatedUser.avatar : null,
+    mainMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : mainMenu,
+    userMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : userMenu,
+    loggedOutItems: getConfig().AUTHN_MINIMAL_HEADER ? [] : loggedOutItems
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Responsive, {
+    maxWidth: 768
+  }, /*#__PURE__*/React.createElement(MobileHeader, props)), /*#__PURE__*/React.createElement(Responsive, {
+    minWidth: 769
+  }, /*#__PURE__*/React.createElement(DesktopHeader, props)));
+}
+
+Header.propTypes = {
+  intl: intlShape.isRequired
+};
+export default injectIntl(Header);
+//# sourceMappingURL=Header.js.map

package/dist/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Header.jsx"],"names":["React","useContext","Responsive","injectIntl","intlShape","AppContext","APP_CONFIG_INITIALIZED","ensureConfig","mergeConfig","getConfig","subscribe","DesktopHeader","MobileHeader","messages","AUTHN_MINIMAL_HEADER","process","env","Header","intl","authenticatedUser","config","mainMenu","type","href","LMS_BASE_URL","content","formatMessage","orderHistoryItem","ORDER_HISTORY_URL","userMenu","username","LOGOUT_URL","splice","loggedOutItems","LOGIN_URL","props","logo","LOGO_URL","logoAltText","SITE_NAME","logoDestination","loggedIn","avatar","propTypes","isRequired"],"mappings":"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","sourcesContent":["import React, { useContext } from 'react';\nimport Responsive from 'react-responsive';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { AppContext } from '@edx/frontend-platform/react';\nimport {\n  APP_CONFIG_INITIALIZED,\n  ensureConfig,\n  mergeConfig,\n  getConfig,\n  subscribe,\n} from '@edx/frontend-platform';\n\nimport DesktopHeader from './DesktopHeader';\nimport MobileHeader from './MobileHeader';\n\nimport messages from './Header.messages';\n\nensureConfig([\n  'LMS_BASE_URL',\n  'LOGOUT_URL',\n  'LOGIN_URL',\n  'SITE_NAME',\n  'LOGO_URL',\n  'ORDER_HISTORY_URL',\n], 'Header component');\n\nsubscribe(APP_CONFIG_INITIALIZED, () => {\n  mergeConfig({\n    AUTHN_MINIMAL_HEADER: !!process.env.AUTHN_MINIMAL_HEADER,\n  }, 'Header additional config');\n});\n\nfunction Header({ intl }) {\n  const { authenticatedUser, config } = useContext(AppContext);\n\n  const mainMenu = [\n    {\n      type: 'item',\n      href: `${config.LMS_BASE_URL}/dashboard`,\n      content: intl.formatMessage(messages['header.links.courses']),\n    },\n  ];\n\n  const orderHistoryItem = {\n    type: 'item',\n    href: config.ORDER_HISTORY_URL,\n    content: intl.formatMessage(messages['header.user.menu.order.history']),\n  };\n\n  const userMenu = authenticatedUser === null ? [] : [\n    {\n      type: 'item',\n      href: `${config.LMS_BASE_URL}/dashboard`,\n      content: intl.formatMessage(messages['header.user.menu.dashboard']),\n    },\n    {\n      type: 'item',\n      href: `${config.LMS_BASE_URL}/u/${authenticatedUser.username}`,\n      content: intl.formatMessage(messages['header.user.menu.profile']),\n    },\n    {\n      type: 'item',\n      href: `${config.LMS_BASE_URL}/account/settings`,\n      content: intl.formatMessage(messages['header.user.menu.account.settings']),\n    },\n    {\n      type: 'item',\n      href: config.LOGOUT_URL,\n      content: intl.formatMessage(messages['header.user.menu.logout']),\n    },\n  ];\n\n  // Users should only see Order History if have a ORDER_HISTORY_URL define in the environment.\n  if (config.ORDER_HISTORY_URL) {\n    userMenu.splice(-1, 0, orderHistoryItem);\n  }\n\n  const loggedOutItems = [\n    {\n      type: 'item',\n      href: config.LOGIN_URL,\n      content: intl.formatMessage(messages['header.user.menu.login']),\n    },\n    {\n      type: 'item',\n      href: `${config.LMS_BASE_URL}/register`,\n      content: intl.formatMessage(messages['header.user.menu.register']),\n    },\n  ];\n\n  const props = {\n    logo: config.LOGO_URL,\n    logoAltText: config.SITE_NAME,\n    logoDestination: `${config.LMS_BASE_URL}/dashboard`,\n    loggedIn: authenticatedUser !== null,\n    username: authenticatedUser !== null ? authenticatedUser.username : null,\n    avatar: authenticatedUser !== null ? authenticatedUser.avatar : null,\n    mainMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : mainMenu,\n    userMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : userMenu,\n    loggedOutItems: getConfig().AUTHN_MINIMAL_HEADER ? [] : loggedOutItems,\n  };\n\n  return (\n    <>\n      <Responsive maxWidth={768}>\n        <MobileHeader {...props} />\n      </Responsive>\n      <Responsive minWidth={769}>\n        <DesktopHeader {...props} />\n      </Responsive>\n    </>\n  );\n}\n\nHeader.propTypes = {\n  intl: intlShape.isRequired,\n};\n\nexport default injectIntl(Header);\n"],"file":"Header.js"}

package/dist/Header.messages.js

@@ -0,0 +1,100 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+var messages = defineMessages({
+  'header.links.courses': {
+    id: 'header.links.courses',
+    defaultMessage: 'Courses',
+    description: 'Link to the learner course dashboard'
+  },
+  'header.links.programs': {
+    id: 'header.links.programs',
+    defaultMessage: 'Programs',
+    description: 'Link to the learner program dashboard'
+  },
+  'header.links.content.search': {
+    id: 'header.links.content.search',
+    defaultMessage: 'Discover New',
+    description: 'Link to the content search page'
+  },
+  'header.links.schools': {
+    id: 'header.links.schools',
+    defaultMessage: 'Schools & Partners',
+    description: 'Link to the schools and partners landing page'
+  },
+  'header.user.menu.dashboard': {
+    id: 'header.user.menu.dashboard',
+    defaultMessage: 'Dashboard',
+    description: 'Link to the user dashboard'
+  },
+  'header.user.menu.profile': {
+    id: 'header.user.menu.profile',
+    defaultMessage: 'Profile',
+    description: 'Link to the user profile'
+  },
+  'header.user.menu.account.settings': {
+    id: 'header.user.menu.account.settings',
+    defaultMessage: 'Account',
+    description: 'Link to account settings'
+  },
+  'header.user.menu.order.history': {
+    id: 'header.user.menu.order.history',
+    defaultMessage: 'Order History',
+    description: 'Link to order history'
+  },
+  'header.user.menu.logout': {
+    id: 'header.user.menu.logout',
+    defaultMessage: 'Logout',
+    description: 'Logout link'
+  },
+  'header.user.menu.login': {
+    id: 'header.user.menu.login',
+    defaultMessage: 'Login',
+    description: 'Login link'
+  },
+  'header.user.menu.register': {
+    id: 'header.user.menu.register',
+    defaultMessage: 'Sign Up',
+    description: 'Link to registration'
+  },
+  'header.label.account.nav': {
+    id: 'header.label.account.nav',
+    defaultMessage: 'Account',
+    description: 'The aria label for the account menu nav'
+  },
+  'header.label.account.menu': {
+    id: 'header.label.account.menu',
+    defaultMessage: 'Account Menu',
+    description: 'The aria label for the account menu trigger'
+  },
+  'header.label.account.menu.for': {
+    id: 'header.label.account.menu.for',
+    defaultMessage: 'Account menu for {username}',
+    description: 'The aria label for the account menu trigger when the username is displayed in it'
+  },
+  'header.label.main.nav': {
+    id: 'header.label.main.nav',
+    defaultMessage: 'Main',
+    description: 'The aria label for the main menu nav'
+  },
+  'header.label.main.menu': {
+    id: 'header.label.main.menu',
+    defaultMessage: 'Main Menu',
+    description: 'The aria label for the main menu trigger'
+  },
+  'header.label.main.header': {
+    id: 'header.label.main.header',
+    defaultMessage: 'Main',
+    description: 'The aria label for the main header'
+  },
+  'header.label.secondary.nav': {
+    id: 'header.label.secondary.nav',
+    defaultMessage: 'Secondary',
+    description: 'The aria label for the seconary nav'
+  },
+  'header.label.skip.nav': {
+    id: 'header.label.skip.nav',
+    defaultMessage: 'Skip to main content',
+    description: 'A link used by screen readers to allow users to skip to the main content of the page.'
+  }
+});
+export default messages;
+//# sourceMappingURL=Header.messages.js.map

package/dist/Header.messages.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Header.messages.jsx"],"names":["defineMessages","messages","id","defaultMessage","description"],"mappings":"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","sourcesContent":["import { defineMessages } from '@edx/frontend-platform/i18n';\n\nconst messages = defineMessages({\n  'header.links.courses': {\n    id: 'header.links.courses',\n    defaultMessage: 'Courses',\n    description: 'Link to the learner course dashboard',\n  },\n  'header.links.programs': {\n    id: 'header.links.programs',\n    defaultMessage: 'Programs',\n    description: 'Link to the learner program dashboard',\n  },\n  'header.links.content.search': {\n    id: 'header.links.content.search',\n    defaultMessage: 'Discover New',\n    description: 'Link to the content search page',\n  },\n  'header.links.schools': {\n    id: 'header.links.schools',\n    defaultMessage: 'Schools & Partners',\n    description: 'Link to the schools and partners landing page',\n  },\n  'header.user.menu.dashboard': {\n    id: 'header.user.menu.dashboard',\n    defaultMessage: 'Dashboard',\n    description: 'Link to the user dashboard',\n  },\n  'header.user.menu.profile': {\n    id: 'header.user.menu.profile',\n    defaultMessage: 'Profile',\n    description: 'Link to the user profile',\n  },\n  'header.user.menu.account.settings': {\n    id: 'header.user.menu.account.settings',\n    defaultMessage: 'Account',\n    description: 'Link to account settings',\n  },\n  'header.user.menu.order.history': {\n    id: 'header.user.menu.order.history',\n    defaultMessage: 'Order History',\n    description: 'Link to order history',\n  },\n  'header.user.menu.logout': {\n    id: 'header.user.menu.logout',\n    defaultMessage: 'Logout',\n    description: 'Logout link',\n  },\n  'header.user.menu.login': {\n    id: 'header.user.menu.login',\n    defaultMessage: 'Login',\n    description: 'Login link',\n  },\n  'header.user.menu.register': {\n    id: 'header.user.menu.register',\n    defaultMessage: 'Sign Up',\n    description: 'Link to registration',\n  },\n  'header.label.account.nav': {\n    id: 'header.label.account.nav',\n    defaultMessage: 'Account',\n    description: 'The aria label for the account menu nav',\n  },\n  'header.label.account.menu': {\n    id: 'header.label.account.menu',\n    defaultMessage: 'Account Menu',\n    description: 'The aria label for the account menu trigger',\n  },\n  'header.label.account.menu.for': {\n    id: 'header.label.account.menu.for',\n    defaultMessage: 'Account menu for {username}',\n    description: 'The aria label for the account menu trigger when the username is displayed in it',\n  },\n  'header.label.main.nav': {\n    id: 'header.label.main.nav',\n    defaultMessage: 'Main',\n    description: 'The aria label for the main menu nav',\n  },\n  'header.label.main.menu': {\n    id: 'header.label.main.menu',\n    defaultMessage: 'Main Menu',\n    description: 'The aria label for the main menu trigger',\n  },\n  'header.label.main.header': {\n    id: 'header.label.main.header',\n    defaultMessage: 'Main',\n    description: 'The aria label for the main header',\n  },\n  'header.label.secondary.nav': {\n    id: 'header.label.secondary.nav',\n    defaultMessage: 'Secondary',\n    description: 'The aria label for the seconary nav',\n  },\n  'header.label.skip.nav': {\n    id: 'header.label.skip.nav',\n    defaultMessage: 'Skip to main content',\n    description: 'A link used by screen readers to allow users to skip to the main content of the page.',\n  },\n});\n\nexport default messages;\n"],"file":"Header.messages.js"}