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

package/README.rst

@@ -2,22 +2,42 @@
 frontend-component-header
 #########################
 
-|Build Status| |Codecov| |npm_version| |npm_downloads| |license| |semantic-release|
+|license| |Build Status| |Codecov| |npm_version| |npm_downloads| |semantic-release|
 
 ********
-Overview
+Purpose
 ********
 
 A generic header for Open edX micro-frontend applications.
 
 ************
-Requirements
+Getting Started
 ************
 
-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>`_
+Prerequisites
+=============
+
+The `devstack`_ is currently recommended as a development environment for your
+new MFE.  If you start it with ``make dev.up.lms`` that should give you
+everything you need as a companion to this frontend.
+
+Note that it is also possible to use `Tutor`_ to develop an MFE.  You can refer
+to the `relevant tutor-mfe documentation`_ to get started using it.
+
+.. _Devstack: https://github.com/openedx/devstack
+
+.. _Tutor: https://github.com/overhangio/tutor
+
+.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe#mfe-development
+
+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/openedx/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.
@@ -26,25 +46,48 @@ Environment Variables
   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.
+* ``ACCOUNT_PROFILE_URL`` - The URL of the account profile page.
+* ``ACCOUNT_SETTINGS_URL`` - The URL of the account settings 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``
+``npm i --save @edx/frontend-component-header``
 
 This will make the component available to be imported into your application.
 
-*****
+Cloning and Startup
+===================
+
+.. code-block::
+
+
+  1. Clone your new repo:
+
+    ``git clone https://github.com/openedx/frontend-component-header.git``
+
+  2. Use node v18.x.
+
+    The current version of the micro-frontend build scripts support node 18.
+    Using other major versions of node *may* work, but this is unsupported.  For
+    convenience, this repository includes an .nvmrc file to help in setting the
+    correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
+
+  3. Install npm dependencies:
+
+    ``cd frontend-component-header && npm ci``
+
+  4. Start the dev server:
+
+    ``npm start``
+
 Usage
-*****
+=====
 
 This library has the following exports:
 
@@ -55,17 +98,15 @@ This library has the following exports:
 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>`_
+* `An example of component and messages usage. <https://github.com/openedx/frontend-template-application/blob/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx#L21>`_
+* `An example of SCSS file usage. <https://github.com/openedx/frontend-template-application/blob/3cd5485bf387b8c479baf6b02bf59e3061dc3465/src/index.scss#L8>`_
 
-
-***********
 Development
-***********
+===========
 
 Install dependencies::
 
-  npm i
+  npm ci
 
 Start the development server::
 
@@ -75,29 +116,62 @@ Build a production distribution::
 
   npm run build
 
-***********
-Publishing to npmjs.com
-***********
+License
+=======
+
+The code in this repository is licensed under the AGPLv3 unless otherwise
+noted.
+
+Please see `LICENSE <LICENSE>`_ for details.
+
+Contributing
+============
+
+Contributions are very welcome.  Please read `How To Contribute`_ for details.
+
+.. _How To Contribute: https://openedx.org/r/how-to-contribute
+
+This project is currently accepting all types of contributions, bug fixes,
+security fixes, maintenance work, or new features.  However, please make sure
+to have a discussion about your new feature idea with the maintainers prior to
+beginning development to maximize the chances of your change being accepted.
+You can start a conversation by creating a new issue on this repo summarizing
+your idea.
+
+Getting Help
+===========
+
+If you're having trouble, we have discussion forums at
+https://discuss.openedx.org where you can connect with others in the community.
+
+Our real-time conversations are on Slack. You can request a `Slack
+invitation`_, then join our `community Slack workspace`_.  Because this is a
+frontend repository, the best place to discuss it would be in the `#wg-frontend
+channel`_.
 
-Any changes to this library have to be pushed to npmjs.com to be reflected on the build.
+For anything non-trivial, the best path is to open an issue in this repository
+with as many details about the issue you are facing as you can provide.
 
-Publish to npm::
+https://github.com/openedx/frontend-component-header/issues
 
-  npm publish
+For more information about these options, see the `Getting Help`_ page.
 
+.. _Slack invitation: https://openedx.org/slack
+.. _community Slack workspace: https://openedx.slack.com/
+.. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6
+.. _Getting Help: https://openedx.org/community/connect
 
-***********
-Deploy in production
-***********
-To replace the default edx header with the new one, use one of the following instructions:
+The Open edX Code of Conduct
+============================
 
-Add the necessary settings to the mfe_brand plugin::
+All community members are expected to follow the `Open edX Code of Conduct`_.
 
-  RUN npm install '@edx/frontend-component-header@npm:@nauedu/frontend-component-header'
+.. _Open edX Code of Conduct: https://openedx.org/code-of-conduct/
 
-Alternatively, you can specify the version::
+Reporting Security Issues
+=========================
 
-  RUN npm install '@edx/frontend-component-header@npm:@nauedu/frontend-component-header@1.0.0'
+Please do not report security issues in public. Please email security@openedx.org.
 
 .. |Build Status| image:: https://api.travis-ci.com/edx/frontend-component-header.svg?branch=master
    :target: https://travis-ci.com/edx/frontend-component-header
@@ -110,4 +184,4 @@ Alternatively, you can specify the version::
 .. |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
+   :target: https://github.com/semantic-release/semantic-release

package/dist/Avatar.js

@@ -1,12 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { AvatarIcon } from './Icons';
-
-function Avatar(_ref) {
+var Avatar = function Avatar(_ref) {
   var size = _ref.size,
-      src = _ref.src,
-      alt = _ref.alt,
-      className = _ref.className;
+    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,
@@ -27,8 +26,7 @@ function Avatar(_ref) {
     },
     className: "avatar overflow-hidden d-inline-flex rounded-circle ".concat(className)
   }, avatar);
-}
-
+};
 Avatar.propTypes = {
   src: PropTypes.string,
   size: PropTypes.string,

package/dist/Avatar.js.map

@@ -1 +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"}
+{"version":3,"file":"Avatar.js","names":["React","PropTypes","AvatarIcon","Avatar","_ref","size","src","alt","className","avatar","createElement","style","width","height","role","focusable","concat","propTypes","string","defaultProps"],"sources":["../src/Avatar.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { AvatarIcon } from './Icons';\n\nconst 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"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAElC,SAASC,UAAU,QAAQ,SAAS;AAEpC,IAAMC,MAAM,GAAG,SAATA,MAAMA,CAAAC,IAAA,EAKN;EAAA,IAJJC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IACJC,GAAG,GAAAF,IAAA,CAAHE,GAAG;IACHC,GAAG,GAAAH,IAAA,CAAHG,GAAG;IACHC,SAAS,GAAAJ,IAAA,CAATI,SAAS;EAET,IAAMC,MAAM,GAAGH,GAAG,gBAChBN,KAAA,CAAAU,aAAA;IAAKF,SAAS,EAAC,qBAAqB;IAACF,GAAG,EAAEA,GAAI;IAACC,GAAG,EAAEA;EAAI,CAAE,CAAC,gBAE3DP,KAAA,CAAAU,aAAA,CAACR,UAAU;IAACS,KAAK,EAAE;MAAEC,KAAK,EAAEP,IAAI;MAAEQ,MAAM,EAAER;IAAK,CAAE;IAACS,IAAI,EAAC,KAAK;IAAC,mBAAW;IAACC,SAAS,EAAC;EAAO,CAAE,CAC7F;EAED,oBACEf,KAAA,CAAAU,aAAA;IACEC,KAAK,EAAE;MAAEE,MAAM,EAAER,IAAI;MAAEO,KAAK,EAAEP;IAAK,CAAE;IACrCG,SAAS,yDAAAQ,MAAA,CAAyDR,SAAS;EAAG,GAE7EC,MACG,CAAC;AAEX,CAAC;AAEDN,MAAM,CAACc,SAAS,GAAG;EACjBX,GAAG,EAAEL,SAAS,CAACiB,MAAM;EACrBb,IAAI,EAAEJ,SAAS,CAACiB,MAAM;EACtBX,GAAG,EAAEN,SAAS,CAACiB,MAAM;EACrBV,SAAS,EAAEP,SAAS,CAACiB;AACvB,CAAC;AAEDf,MAAM,CAACgB,YAAY,GAAG;EACpBb,GAAG,EAAE,IAAI;EACTD,IAAI,EAAE,MAAM;EACZE,GAAG,EAAE,IAAI;EACTC,SAAS,EAAE;AACb,CAAC;AAED,eAAeL,MAAM","ignoreList":[]}

package/dist/DesktopHeader.js

@@ -1,75 +1,60 @@
-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 _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _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, _toPropertyKey(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 _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 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); }
-
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+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 ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 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 { getConfig } from '@edx/frontend-platform';
 
+// Local Components
 import { Menu, MenuTrigger, MenuContent } from './Menu';
 import Avatar from './Avatar';
-import { LinkedLogo, Logo } from './Logo'; // i18n
+import { LinkedLogo, Logo } from './Logo';
 
-import messages from './Header.messages'; // Assets
+// 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);
+    return _callSuper(this, DesktopHeader, [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;
+  _inherits(DesktopHeader, _React$Component);
+  return _createClass(DesktopHeader, [{
+    key: "renderMenu",
+    value: function renderMenu(menu) {
+      // Nodes are accepted as a prop
+      if (!Array.isArray(menu)) {
+        return menu;
       }
-
-      return mainMenu.map(function (menuItem) {
+      return menu.map(function (menuItem) {
         var type = menuItem.type,
-            href = menuItem.href,
-            content = menuItem.content,
-            submenuContent = menuItem.submenuContent;
-
+          href = menuItem.href,
+          content = menuItem.content,
+          submenuContent = menuItem.submenuContent,
+          disabled = menuItem.disabled,
+          isActive = menuItem.isActive;
         if (type === 'item') {
           return /*#__PURE__*/React.createElement("a", {
             key: "".concat(type, "-").concat(content),
-            className: "nav-link",
+            className: "nav-link".concat(disabled ? ' disabled' : '').concat(isActive ? ' active' : ''),
             href: href
           }, content);
         }
-
         return /*#__PURE__*/React.createElement(Menu, {
           key: "".concat(type, "-").concat(content),
           tag: "div",
@@ -88,14 +73,26 @@ var DesktopHeader = /*#__PURE__*/function (_React$Component) {
         }, submenuContent));
       });
     }
+  }, {
+    key: "renderMainMenu",
+    value: function renderMainMenu() {
+      var mainMenu = this.props.mainMenu;
+      return this.renderMenu(mainMenu);
+    }
+  }, {
+    key: "renderSecondaryMenu",
+    value: function renderSecondaryMenu() {
+      var secondaryMenu = this.props.secondaryMenu;
+      return this.renderMenu(secondaryMenu);
+    }
   }, {
     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;
+        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
@@ -116,15 +113,32 @@ var DesktopHeader = /*#__PURE__*/function (_React$Component) {
         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);
+      }, userMenu.map(function (group, index) {
+        return (
+          /*#__PURE__*/
+          // eslint-disable-next-line react/jsx-no-comment-textnodes,react/no-array-index-key
+          React.createElement(React.Fragment, {
+            key: index
+          }, group.heading && /*#__PURE__*/React.createElement("div", {
+            className: "dropdown-header",
+            role: "heading",
+            "aria-level": "1"
+          }, group.heading), group.items.map(function (_ref) {
+            var type = _ref.type,
+              content = _ref.content,
+              href = _ref.href,
+              disabled = _ref.disabled,
+              isActive = _ref.isActive;
+            return /*#__PURE__*/React.createElement("a", {
+              className: "dropdown-".concat(type).concat(isActive ? ' active' : '').concat(disabled ? ' disabled' : ''),
+              key: "".concat(type, "-").concat(content),
+              href: href
+            }, content);
+          }), index < userMenu.length - 1 && /*#__PURE__*/React.createElement("div", {
+            className: "dropdown-divider",
+            role: "separator"
+          }))
+        );
       })));
     }
   }, {
@@ -143,11 +157,11 @@ var DesktopHeader = /*#__PURE__*/function (_React$Component) {
     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;
+        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,
@@ -175,19 +189,21 @@ var DesktopHeader = /*#__PURE__*/function (_React$Component) {
       }, 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()))));
+      }, loggedIn ? /*#__PURE__*/React.createElement(React.Fragment, null, this.renderSecondaryMenu(), this.renderUserMenu()) : this.renderLoggedOutItems()))));
     }
   }]);
-
-  return DesktopHeader;
 }(React.Component);
-
 DesktopHeader.propTypes = {
   mainMenu: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),
+  secondaryMenu: PropTypes.oneOfType([PropTypes.node, PropTypes.array]),
   userMenu: PropTypes.arrayOf(PropTypes.shape({
-    type: PropTypes.oneOf(['item', 'menu']),
-    href: PropTypes.string,
-    content: PropTypes.string
+    heading: PropTypes.string,
+    items: PropTypes.arrayOf(PropTypes.shape({
+      type: PropTypes.oneOf(['item', 'menu']),
+      href: PropTypes.string,
+      content: PropTypes.string,
+      isActive: PropTypes.bool
+    }))
   })),
   loggedOutItems: PropTypes.arrayOf(PropTypes.shape({
     type: PropTypes.oneOf(['item', 'menu']),
@@ -205,6 +221,7 @@ DesktopHeader.propTypes = {
 };
 DesktopHeader.defaultProps = {
   mainMenu: [],
+  secondaryMenu: [],
   userMenu: [],
   loggedOutItems: [],
   logo: null,

package/dist/DesktopHeader.js.map

@@ -1 +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":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,SAASC,UAAT,EAAqBC,SAArB,QAAsC,6BAAtC;AACA,SAASC,SAAT,QAA0B,wBAA1B,C,CAEA;;AACA,SAASC,IAAT,EAAeC,WAAf,EAA4BC,WAA5B,QAA+C,QAA/C;AACA,OAAOC,MAAP,MAAmB,UAAnB;AACA,SAASC,UAAT,EAAqBC,IAArB,QAAiC,QAAjC,C,CAEA;;AACA,OAAOC,QAAP,MAAqB,mBAArB,C,CAEA;;AACA,SAASC,SAAT,QAA0B,SAA1B;;IAEMC,a;;;;;AACJ,yBAAYC,KAAZ,EAAmB;AAAA;;AAAE;AAAF,6BACXA,KADW;AAElB;;;;WAED,0BAAiB;AACf,UAAQC,QAAR,GAAqB,KAAKD,KAA1B,CAAQC,QAAR,CADe,CAGf;;AACA,UAAI,CAACC,KAAK,CAACC,OAAN,CAAcF,QAAd,CAAL,EAA8B;AAC5B,eAAOA,QAAP;AACD;;AAED,aAAOA,QAAQ,CAACG,GAAT,CAAa,UAACC,QAAD,EAAc;AAChC,YACEC,IADF,GAKID,QALJ,CACEC,IADF;AAAA,YAEEC,IAFF,GAKIF,QALJ,CAEEE,IAFF;AAAA,YAGEC,OAHF,GAKIH,QALJ,CAGEG,OAHF;AAAA,YAIEC,cAJF,GAKIJ,QALJ,CAIEI,cAJF;;AAOA,YAAIH,IAAI,KAAK,MAAb,EAAqB;AACnB,8BACE;AAAG,YAAA,GAAG,YAAKA,IAAL,cAAaE,OAAb,CAAN;AAA8B,YAAA,SAAS,EAAC,UAAxC;AAAmD,YAAA,IAAI,EAAED;AAAzD,aAAgEC,OAAhE,CADF;AAGD;;AAED,4BACE,oBAAC,IAAD;AAAM,UAAA,GAAG,YAAKF,IAAL,cAAaE,OAAb,CAAT;AAAiC,UAAA,GAAG,EAAC,KAArC;AAA2C,UAAA,SAAS,EAAC,UAArD;AAAgE,UAAA,sBAAsB;AAAtF,wBACE,oBAAC,WAAD;AAAa,UAAA,GAAG,EAAC,GAAjB;AAAqB,UAAA,SAAS,EAAC,2CAA/B;AAA2E,UAAA,IAAI,EAAED;AAAjF,WACGC,OADH,oBACY,oBAAC,SAAD;AAAW,UAAA,IAAI,EAAC,KAAhB;AAAsB,6BAAtB;AAAkC,UAAA,SAAS,EAAC;AAA5C,UADZ,CADF,eAIE,oBAAC,WAAD;AAAa,UAAA,SAAS,EAAC;AAAvB,WACGC,cADH,CAJF,CADF;AAUD,OAxBM,CAAP;AAyBD;;;WAED,0BAAiB;AACf,wBAKI,KAAKT,KALT;AAAA,UACEU,QADF,eACEA,QADF;AAAA,UAEEC,MAFF,eAEEA,MAFF;AAAA,UAGEC,QAHF,eAGEA,QAHF;AAAA,UAIEC,IAJF,eAIEA,IAJF;AAOA,0BACE,oBAAC,IAAD;AAAM,QAAA,mBAAmB,EAAC,eAA1B;AAA0C,QAAA,iBAAiB,EAAE;AAA7D,sBACE,oBAAC,WAAD;AACE,QAAA,GAAG,EAAC,QADN;AAEE,sBAAYA,IAAI,CAACC,aAAL,CAAmBjB,QAAQ,CAAC,+BAAD,CAA3B,EAA8D;AAAEe,UAAAA,QAAQ,EAARA;AAAF,SAA9D,CAFd;AAGE,QAAA,SAAS,EAAC;AAHZ,sBAKE,oBAAC,MAAD;AAAQ,QAAA,IAAI,EAAC,OAAb;AAAqB,QAAA,GAAG,EAAED,MAA1B;AAAkC,QAAA,GAAG,EAAC,EAAtC;AAAyC,QAAA,SAAS,EAAC;AAAnD,QALF,EAMGC,QANH,oBAMa,oBAAC,SAAD;AAAW,QAAA,IAAI,EAAC,KAAhB;AAAsB,2BAAtB;AAAkC,QAAA,SAAS,EAAC;AAA5C,QANb,CADF,eASE,oBAAC,WAAD;AAAa,QAAA,SAAS,EAAC;AAAvB,SACGF,QAAQ,CAACN,GAAT,CAAa;AAAA,YAAGE,IAAH,QAAGA,IAAH;AAAA,YAASC,IAAT,QAASA,IAAT;AAAA,YAAeC,OAAf,QAAeA,OAAf;AAAA,4BACZ;AAAG,UAAA,SAAS,qBAAcF,IAAd,CAAZ;AAAkC,UAAA,GAAG,YAAKA,IAAL,cAAaE,OAAb,CAArC;AAA6D,UAAA,IAAI,EAAED;AAAnE,WAA0EC,OAA1E,CADY;AAAA,OAAb,CADH,CATF,CADF;AAiBD;;;WAED,gCAAuB;AACrB,UAAQO,cAAR,GAA2B,KAAKf,KAAhC,CAAQe,cAAR;AAEA,aAAOA,cAAc,CAACX,GAAf,CAAmB,UAACY,IAAD,EAAOC,CAAP,EAAUC,GAAV;AAAA,4BACxB;AACE,UAAA,GAAG,YAAKF,IAAI,CAACV,IAAV,cAAkBU,IAAI,CAACR,OAAvB,CADL;AAEE,UAAA,SAAS,EAAES,CAAC,GAAGC,GAAG,CAACC,MAAJ,GAAa,CAAjB,GAAqB,mBAArB,GAA2C,8BAFxD;AAGE,UAAA,IAAI,EAAEH,IAAI,CAACT;AAHb,WAKGS,IAAI,CAACR,OALR,CADwB;AAAA,OAAnB,CAAP;AASD;;;WAED,kBAAS;AACP,yBAMI,KAAKR,KANT;AAAA,UACEoB,IADF,gBACEA,IADF;AAAA,UAEEC,WAFF,gBAEEA,WAFF;AAAA,UAGEC,eAHF,gBAGEA,eAHF;AAAA,UAIEC,QAJF,gBAIEA,QAJF;AAAA,UAKEV,IALF,gBAKEA,IALF;AAOA,UAAMW,SAAS,GAAG;AAAEC,QAAAA,GAAG,EAAEL,IAAP;AAAaM,QAAAA,GAAG,EAAEL,WAAlB;AAA+Bd,QAAAA,IAAI,EAAEe;AAArC,OAAlB;AACA,UAAMK,WAAW,GAAGrC,SAAS,GAAGsC,oBAAZ,GAAmC,QAAnC,GAA8C,IAAlE;AAEA,0BACE;AAAQ,QAAA,SAAS,EAAC;AAAlB,sBACE;AAAG,QAAA,SAAS,EAAC,oCAAb;AAAkD,QAAA,IAAI,EAAC;AAAvD,SAAgEf,IAAI,CAACC,aAAL,CAAmBjB,QAAQ,CAAC,uBAAD,CAA3B,CAAhE,CADF,eAEE;AAAK,QAAA,SAAS,4BAAqB8B,WAArB;AAAd,sBACE;AAAK,QAAA,SAAS,EAAC;AAAf,SACGL,eAAe,KAAK,IAApB,gBAA2B,oBAAC,IAAD;AAAM,QAAA,SAAS,EAAC,MAAhB;AAAuB,QAAA,GAAG,EAAEF,IAA5B;AAAkC,QAAA,GAAG,EAAEC;AAAvC,QAA3B,gBAAoF,oBAAC,UAAD;AAAY,QAAA,SAAS,EAAC;AAAtB,SAAiCG,SAAjC,EADvF,eAEE;AACE,sBAAYX,IAAI,CAACC,aAAL,CAAmBjB,QAAQ,CAAC,uBAAD,CAA3B,CADd;AAEE,QAAA,SAAS,EAAC;AAFZ,SAIG,KAAKgC,cAAL,EAJH,CAFF,eAQE;AACE,sBAAYhB,IAAI,CAACC,aAAL,CAAmBjB,QAAQ,CAAC,4BAAD,CAA3B,CADd;AAEE,QAAA,SAAS,EAAC;AAFZ,SAIG0B,QAAQ,GAAG,KAAKO,cAAL,EAAH,GAA2B,KAAKC,oBAAL,EAJtC,CARF,CADF,CAFF,CADF;AAsBD;;;;EAlHyB7C,KAAK,CAAC8C,S;;AAqHlCjC,aAAa,CAACkC,SAAd,GAA0B;AACxBhC,EAAAA,QAAQ,EAAEd,SAAS,CAAC+C,SAAV,CAAoB,CAC5B/C,SAAS,CAACgD,IADkB,EAE5BhD,SAAS,CAACiD,KAFkB,CAApB,CADc;AAKxB1B,EAAAA,QAAQ,EAAEvB,SAAS,CAACkD,OAAV,CAAkBlD,SAAS,CAACmD,KAAV,CAAgB;AAC1ChC,IAAAA,IAAI,EAAEnB,SAAS,CAACoD,KAAV,CAAgB,CAAC,MAAD,EAAS,MAAT,CAAhB,CADoC;AAE1ChC,IAAAA,IAAI,EAAEpB,SAAS,CAACqD,MAF0B;AAG1ChC,IAAAA,OAAO,EAAErB,SAAS,CAACqD;AAHuB,GAAhB,CAAlB,CALc;AAUxBzB,EAAAA,cAAc,EAAE5B,SAAS,CAACkD,OAAV,CAAkBlD,SAAS,CAACmD,KAAV,CAAgB;AAChDhC,IAAAA,IAAI,EAAEnB,SAAS,CAACoD,KAAV,CAAgB,CAAC,MAAD,EAAS,MAAT,CAAhB,CAD0C;AAEhDhC,IAAAA,IAAI,EAAEpB,SAAS,CAACqD,MAFgC;AAGhDhC,IAAAA,OAAO,EAAErB,SAAS,CAACqD;AAH6B,GAAhB,CAAlB,CAVQ;AAexBpB,EAAAA,IAAI,EAAEjC,SAAS,CAACqD,MAfQ;AAgBxBnB,EAAAA,WAAW,EAAElC,SAAS,CAACqD,MAhBC;AAiBxBlB,EAAAA,eAAe,EAAEnC,SAAS,CAACqD,MAjBH;AAkBxB7B,EAAAA,MAAM,EAAExB,SAAS,CAACqD,MAlBM;AAmBxB5B,EAAAA,QAAQ,EAAEzB,SAAS,CAACqD,MAnBI;AAoBxBjB,EAAAA,QAAQ,EAAEpC,SAAS,CAACsD,IApBI;AAsBxB;AACA5B,EAAAA,IAAI,EAAExB,SAAS,CAACqD;AAvBQ,CAA1B;AA0BA3C,aAAa,CAAC4C,YAAd,GAA6B;AAC3B1C,EAAAA,QAAQ,EAAE,EADiB;AAE3BS,EAAAA,QAAQ,EAAE,EAFiB;AAG3BK,EAAAA,cAAc,EAAE,EAHW;AAI3BK,EAAAA,IAAI,EAAE,IAJqB;AAK3BC,EAAAA,WAAW,EAAE,IALc;AAM3BC,EAAAA,eAAe,EAAE,IANU;AAO3BX,EAAAA,MAAM,EAAE,IAPmB;AAQ3BC,EAAAA,QAAQ,EAAE,IARiB;AAS3BW,EAAAA,QAAQ,EAAE;AATiB,CAA7B;AAYA,eAAenC,UAAU,CAACW,aAAD,CAAzB","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"}
+{"version":3,"file":"DesktopHeader.js","names":["React","PropTypes","injectIntl","intlShape","getConfig","Menu","MenuTrigger","MenuContent","Avatar","LinkedLogo","Logo","messages","CaretIcon","DesktopHeader","_React$Component","props","_classCallCheck","_callSuper","_inherits","_createClass","key","value","renderMenu","menu","Array","isArray","map","menuItem","type","href","content","submenuContent","disabled","isActive","createElement","concat","className","tag","respondToPointerEvents","role","focusable","renderMainMenu","mainMenu","renderSecondaryMenu","secondaryMenu","renderUserMenu","_this$props","userMenu","avatar","username","intl","transitionClassName","transitionTimeout","formatMessage","size","src","alt","group","index","Fragment","heading","items","_ref","length","renderLoggedOutItems","loggedOutItems","item","i","arr","render","_this$props2","logo","logoAltText","logoDestination","loggedIn","logoProps","logoClasses","AUTHN_MINIMAL_HEADER","_extends","Component","propTypes","oneOfType","node","array","arrayOf","shape","string","oneOf","bool","isRequired","defaultProps"],"sources":["../src/DesktopHeader.jsx"],"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  renderMenu(menu) {\n    // Nodes are accepted as a prop\n    if (!Array.isArray(menu)) {\n      return menu;\n    }\n\n    return menu.map((menuItem) => {\n      const {\n        type,\n        href,\n        content,\n        submenuContent,\n        disabled,\n        isActive,\n      } = menuItem;\n\n      if (type === 'item') {\n        return (\n          <a\n            key={`${type}-${content}`}\n            className={`nav-link${disabled ? ' disabled' : ''}${isActive ? ' active' : ''}`}\n            href={href}\n          >\n            {content}\n          </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  renderMainMenu() {\n    const { mainMenu } = this.props;\n    return this.renderMenu(mainMenu);\n  }\n\n  renderSecondaryMenu() {\n    const { secondaryMenu } = this.props;\n    return this.renderMenu(secondaryMenu);\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((group, index) => (\n            // eslint-disable-next-line react/jsx-no-comment-textnodes,react/no-array-index-key\n            <React.Fragment key={index}>\n              {group.heading && <div className=\"dropdown-header\" role=\"heading\" aria-level=\"1\">{group.heading}</div>}\n              {group.items.map(({\n                type, content, href, disabled, isActive,\n              }) => (\n                <a\n                  className={`dropdown-${type}${isActive ? ' active' : ''}${disabled ? ' disabled' : ''}`}\n                  key={`${type}-${content}`}\n                  href={href}\n                >\n                  {content}\n                </a>\n              ))}\n              {index < userMenu.length - 1 && <div className=\"dropdown-divider\" role=\"separator\" />}\n            </React.Fragment>\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\n                ? (\n                  <>\n                    {this.renderSecondaryMenu()}\n                    {this.renderUserMenu()}\n                  </>\n                ) : 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  secondaryMenu: PropTypes.oneOfType([\n    PropTypes.node,\n    PropTypes.array,\n  ]),\n  userMenu: PropTypes.arrayOf(PropTypes.shape({\n    heading: PropTypes.string,\n    items: PropTypes.arrayOf(PropTypes.shape({\n      type: PropTypes.oneOf(['item', 'menu']),\n      href: PropTypes.string,\n      content: PropTypes.string,\n      isActive: PropTypes.bool,\n    })),\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  secondaryMenu: [],\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"],"mappings":"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","ignoreList":[]}