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

package/dist/i18n/messages/zh_CN.json

@@ -0,0 +1,30 @@
+{
+  "general.register.sentenceCase": "Register",
+  "general.signIn.sentenceCase": "Sign in",
+  "header.links.courses": "Courses",
+  "header.links.programs": "Programs",
+  "header.links.content.search": "Discover New",
+  "header.links.schools": "Schools & Partners",
+  "header.user.menu.dashboard": "Dashboard",
+  "header.user.menu.profile": "Profile",
+  "header.user.menu.account.settings": "Account",
+  "header.user.menu.order.history": "Order History",
+  "header.user.menu.logout": "Logout",
+  "header.user.menu.login": "Login",
+  "header.user.menu.register": "Sign Up",
+  "header.label.account.nav": "Account",
+  "header.label.account.menu": "Account Menu",
+  "header.label.account.menu.for": "Account menu for {username}",
+  "header.label.main.nav": "Main",
+  "header.label.main.menu": "Main Menu",
+  "header.label.main.header": "Main",
+  "header.label.secondary.nav": "Secondary",
+  "header.label.skip.nav": "Skip to main content",
+  "header.menu.dashboard.label": "Dashboard",
+  "header.help.label": "Help",
+  "header.menu.profile.label": "Profile",
+  "header.menu.account.label": "Account",
+  "header.menu.orderHistory.label": "Order History",
+  "header.navigation.skipNavLink": "Skip to main content.",
+  "header.menu.signOut.label": "Sign Out"
+}

package/dist/index.js

@@ -0,0 +1,6 @@
+import Header from './Header';
+import LearningHeader from './learning-header/LearningHeader';
+import messages from './i18n/index';
+export { LearningHeader, messages };
+export default Header;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.jsx"],"names":["Header","LearningHeader","messages"],"mappings":"AAAA,OAAOA,MAAP,MAAmB,UAAnB;AACA,OAAOC,cAAP,MAA2B,kCAA3B;AACA,OAAOC,QAAP,MAAqB,cAArB;AAEA,SAASD,cAAT,EAAyBC,QAAzB;AAEA,eAAeF,MAAf","sourcesContent":["import Header from './Header';\nimport LearningHeader from './learning-header/LearningHeader';\nimport messages from './i18n/index';\n\nexport { LearningHeader, messages };\n\nexport default Header;\n"],"file":"index.js"}

package/dist/index.scss

@@ -0,0 +1,120 @@
+$spacer: 1rem;
+$blue: #007db8;
+$white: #fff;
+
+@import './Menu/menu.scss';
+
+.dropdown-item a {
+  text-decoration: none;
+}
+
+.icon-button {
+  display: inline-flex;
+  line-height: 3rem;
+  background: transparent;
+  vertical-align: middle;
+  text-align: center;
+  border: none;
+  height: 3rem;
+  width: 3rem;
+  padding: .75rem;
+  justify-content: center;
+  align-items:center;
+  &:hover, &:focus {
+    background: rgba(0,0,0,.1);
+  }
+}
+
+.learning-header {
+  min-width: 0;
+  
+  .course-title-lockup {
+    min-width: 0;
+
+    span {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding-bottom: 0.1rem;
+    }
+  }
+
+  .user-dropdown {
+    .btn {
+      height: 3rem;
+      @media (map-get($grid-breakpoints, "sm")) {
+        padding: 0 0.5rem;
+      }
+    }
+  }
+}
+
+.site-header-mobile,
+.site-header-desktop {
+  position: relative;
+  z-index: 1000;
+}
+
+.site-header-mobile {
+  height: 3rem;
+
+  .nav-link {
+    text-decoration: none;
+    cursor: pointer;
+  }
+  img {
+    height: 1.5rem;
+  }
+}
+
+
+.site-header-desktop {
+  box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
+  background: $white;
+  .nav-link {
+    text-decoration: none;
+  }
+  .logo {
+    display: block;
+    box-sizing: content-box;
+    position: relative;
+    top: -.05em;
+    height: 1.75rem;
+    padding: 1rem 0;
+    margin-right: 1rem;
+    img {
+      display: block;
+      height: 100%;
+    }
+  }
+  .main-nav {
+    .nav-link {
+      padding: 1.125rem 1rem;
+      text-decoration: none;
+      font-weight: 500;
+      letter-spacing: .01em;
+    }
+    .nav-link:hover,
+    .nav-link:focus,
+    .nav-link.active,
+    .expanded .nav-link {
+      background: $component-active-bg;
+      color: $component-active-color;
+    }
+    .menu {
+      position: static;
+      .menu-content {
+        border-top: solid 2px $component-active-bg;
+        left: 0;
+        right: 0;
+        box-shadow: 0 1px 2px rgba(0,0,0,.25);
+        border-bottom-left-radius: 2px;
+        border-bottom-right-radius: 2px;
+        padding: 1rem;
+      }
+    }
+  }
+  .search-input {
+    border-radius: $rounded-pill;
+  }
+}

package/dist/learning-header/AnonymousUserMenu.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { getConfig } from '@edx/frontend-platform';
+import { getLoginRedirectUrl } from '@edx/frontend-platform/auth';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Button } from '@edx/paragon';
+import genericMessages from '../generic/messages';
+
+function AnonymousUserMenu(_ref) {
+  var intl = _ref.intl;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    className: "mr-3",
+    variant: "outline-primary",
+    href: "".concat(getConfig().LMS_BASE_URL, "/register?next=").concat(encodeURIComponent(global.location.href))
+  }, intl.formatMessage(genericMessages.registerSentenceCase)), /*#__PURE__*/React.createElement(Button, {
+    variant: "primary",
+    href: "".concat(getLoginRedirectUrl(global.location.href))
+  }, intl.formatMessage(genericMessages.signInSentenceCase)));
+}
+
+AnonymousUserMenu.propTypes = {
+  intl: intlShape.isRequired
+};
+export default injectIntl(AnonymousUserMenu);
+//# sourceMappingURL=AnonymousUserMenu.js.map

package/dist/learning-header/AnonymousUserMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/learning-header/AnonymousUserMenu.jsx"],"names":["React","getConfig","getLoginRedirectUrl","injectIntl","intlShape","Button","genericMessages","AnonymousUserMenu","intl","LMS_BASE_URL","encodeURIComponent","global","location","href","formatMessage","registerSentenceCase","signInSentenceCase","propTypes","isRequired"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,SAAT,QAA0B,wBAA1B;AACA,SAASC,mBAAT,QAAoC,6BAApC;AACA,SAASC,UAAT,EAAqBC,SAArB,QAAsC,6BAAtC;AACA,SAASC,MAAT,QAAuB,cAAvB;AAEA,OAAOC,eAAP,MAA4B,qBAA5B;;AAEA,SAASC,iBAAT,OAAqC;AAAA,MAARC,IAAQ,QAARA,IAAQ;AACnC,sBACE,8CACE,oBAAC,MAAD;AACE,IAAA,SAAS,EAAC,MADZ;AAEE,IAAA,OAAO,EAAC,iBAFV;AAGE,IAAA,IAAI,YAAKP,SAAS,GAAGQ,YAAjB,4BAA+CC,kBAAkB,CAACC,MAAM,CAACC,QAAP,CAAgBC,IAAjB,CAAjE;AAHN,KAKGL,IAAI,CAACM,aAAL,CAAmBR,eAAe,CAACS,oBAAnC,CALH,CADF,eAQE,oBAAC,MAAD;AACE,IAAA,OAAO,EAAC,SADV;AAEE,IAAA,IAAI,YAAKb,mBAAmB,CAACS,MAAM,CAACC,QAAP,CAAgBC,IAAjB,CAAxB;AAFN,KAIGL,IAAI,CAACM,aAAL,CAAmBR,eAAe,CAACU,kBAAnC,CAJH,CARF,CADF;AAiBD;;AAEDT,iBAAiB,CAACU,SAAlB,GAA8B;AAC5BT,EAAAA,IAAI,EAAEJ,SAAS,CAACc;AADY,CAA9B;AAIA,eAAef,UAAU,CAACI,iBAAD,CAAzB","sourcesContent":["import React from 'react';\n\nimport { getConfig } from '@edx/frontend-platform';\nimport { getLoginRedirectUrl } from '@edx/frontend-platform/auth';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { Button } from '@edx/paragon';\n\nimport genericMessages from '../generic/messages';\n\nfunction AnonymousUserMenu({ intl }) {\n  return (\n    <div>\n      <Button\n        className=\"mr-3\"\n        variant=\"outline-primary\"\n        href={`${getConfig().LMS_BASE_URL}/register?next=${encodeURIComponent(global.location.href)}`}\n      >\n        {intl.formatMessage(genericMessages.registerSentenceCase)}\n      </Button>\n      <Button\n        variant=\"primary\"\n        href={`${getLoginRedirectUrl(global.location.href)}`}\n      >\n        {intl.formatMessage(genericMessages.signInSentenceCase)}\n      </Button>\n    </div>\n  );\n}\n\nAnonymousUserMenu.propTypes = {\n  intl: intlShape.isRequired,\n};\n\nexport default injectIntl(AnonymousUserMenu);\n"],"file":"AnonymousUserMenu.js"}

package/dist/learning-header/AuthenticatedUserDropdown.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
+import { getConfig } from '@edx/frontend-platform';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Dropdown } from '@edx/paragon';
+import messages from './messages';
+
+function AuthenticatedUserDropdown(_ref) {
+  var intl = _ref.intl,
+      username = _ref.username;
+  var dashboardMenuItem = /*#__PURE__*/React.createElement(Dropdown.Item, {
+    href: "".concat(getConfig().LMS_BASE_URL, "/dashboard")
+  }, intl.formatMessage(messages.dashboard));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("a", {
+    className: "text-gray-700 mr-3",
+    href: "".concat(getConfig().SUPPORT_URL)
+  }, intl.formatMessage(messages.help)), /*#__PURE__*/React.createElement(Dropdown, {
+    className: "user-dropdown"
+  }, /*#__PURE__*/React.createElement(Dropdown.Toggle, {
+    variant: "outline-primary"
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faUserCircle,
+    className: "d-md-none",
+    size: "lg"
+  }), /*#__PURE__*/React.createElement("span", {
+    "data-hj-suppress": true,
+    className: "d-none d-md-inline"
+  }, username)), /*#__PURE__*/React.createElement(Dropdown.Menu, {
+    className: "dropdown-menu-right"
+  }, dashboardMenuItem, /*#__PURE__*/React.createElement(Dropdown.Item, {
+    href: "".concat(getConfig().LMS_BASE_URL, "/u/").concat(username)
+  }, intl.formatMessage(messages.profile)), /*#__PURE__*/React.createElement(Dropdown.Item, {
+    href: "".concat(getConfig().LMS_BASE_URL, "/account/settings")
+  }, intl.formatMessage(messages.account)), getConfig().ORDER_HISTORY_URL && /*#__PURE__*/React.createElement(Dropdown.Item, {
+    href: getConfig().ORDER_HISTORY_URL
+  }, intl.formatMessage(messages.orderHistory)), /*#__PURE__*/React.createElement(Dropdown.Item, {
+    href: getConfig().LOGOUT_URL
+  }, intl.formatMessage(messages.signOut)))));
+}
+
+AuthenticatedUserDropdown.propTypes = {
+  intl: intlShape.isRequired,
+  username: PropTypes.string.isRequired
+};
+export default injectIntl(AuthenticatedUserDropdown);
+//# sourceMappingURL=AuthenticatedUserDropdown.js.map

package/dist/learning-header/AuthenticatedUserDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/learning-header/AuthenticatedUserDropdown.jsx"],"names":["React","PropTypes","FontAwesomeIcon","faUserCircle","getConfig","injectIntl","intlShape","Dropdown","messages","AuthenticatedUserDropdown","intl","username","dashboardMenuItem","LMS_BASE_URL","formatMessage","dashboard","SUPPORT_URL","help","profile","account","ORDER_HISTORY_URL","orderHistory","LOGOUT_URL","signOut","propTypes","isRequired","string"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,SAASC,eAAT,QAAgC,gCAAhC;AACA,SAASC,YAAT,QAA6B,mCAA7B;AAEA,SAASC,SAAT,QAA0B,wBAA1B;AACA,SAASC,UAAT,EAAqBC,SAArB,QAAsC,6BAAtC;AACA,SAASC,QAAT,QAAyB,cAAzB;AAEA,OAAOC,QAAP,MAAqB,YAArB;;AAEA,SAASC,yBAAT,OAAuD;AAAA,MAAlBC,IAAkB,QAAlBA,IAAkB;AAAA,MAAZC,QAAY,QAAZA,QAAY;AACrD,MAAMC,iBAAiB,gBACrB,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,IAAI,YAAKR,SAAS,GAAGS,YAAjB;AAAnB,KACGH,IAAI,CAACI,aAAL,CAAmBN,QAAQ,CAACO,SAA5B,CADH,CADF;AAMA,sBACE,uDACE;AAAG,IAAA,SAAS,EAAC,oBAAb;AAAkC,IAAA,IAAI,YAAKX,SAAS,GAAGY,WAAjB;AAAtC,KAAuEN,IAAI,CAACI,aAAL,CAAmBN,QAAQ,CAACS,IAA5B,CAAvE,CADF,eAEE,oBAAC,QAAD;AAAU,IAAA,SAAS,EAAC;AAApB,kBACE,oBAAC,QAAD,CAAU,MAAV;AAAiB,IAAA,OAAO,EAAC;AAAzB,kBACE,oBAAC,eAAD;AAAiB,IAAA,IAAI,EAAEd,YAAvB;AAAqC,IAAA,SAAS,EAAC,WAA/C;AAA2D,IAAA,IAAI,EAAC;AAAhE,IADF,eAEE;AAAM,4BAAN;AAAuB,IAAA,SAAS,EAAC;AAAjC,KACGQ,QADH,CAFF,CADF,eAOE,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,SAAS,EAAC;AAAzB,KACGC,iBADH,eAEE,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,IAAI,YAAKR,SAAS,GAAGS,YAAjB,gBAAmCF,QAAnC;AAAnB,KACGD,IAAI,CAACI,aAAL,CAAmBN,QAAQ,CAACU,OAA5B,CADH,CAFF,eAKE,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,IAAI,YAAKd,SAAS,GAAGS,YAAjB;AAAnB,KACGH,IAAI,CAACI,aAAL,CAAmBN,QAAQ,CAACW,OAA5B,CADH,CALF,EAQIf,SAAS,GAAGgB,iBAAZ,iBACA,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,IAAI,EAAEhB,SAAS,GAAGgB;AAAjC,KACGV,IAAI,CAACI,aAAL,CAAmBN,QAAQ,CAACa,YAA5B,CADH,CATJ,eAaE,oBAAC,QAAD,CAAU,IAAV;AAAe,IAAA,IAAI,EAAEjB,SAAS,GAAGkB;AAAjC,KACGZ,IAAI,CAACI,aAAL,CAAmBN,QAAQ,CAACe,OAA5B,CADH,CAbF,CAPF,CAFF,CADF;AA8BD;;AAEDd,yBAAyB,CAACe,SAA1B,GAAsC;AACpCd,EAAAA,IAAI,EAAEJ,SAAS,CAACmB,UADoB;AAEpCd,EAAAA,QAAQ,EAAEV,SAAS,CAACyB,MAAV,CAAiBD;AAFS,CAAtC;AAKA,eAAepB,UAAU,CAACI,yBAAD,CAAzB","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faUserCircle } from '@fortawesome/free-solid-svg-icons';\n\nimport { getConfig } from '@edx/frontend-platform';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { Dropdown } from '@edx/paragon';\n\nimport messages from './messages';\n\nfunction AuthenticatedUserDropdown({ intl, username }) {\n  const dashboardMenuItem = (\n    <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>\n      {intl.formatMessage(messages.dashboard)}\n    </Dropdown.Item>\n  );\n\n  return (\n    <>\n      <a className=\"text-gray-700 mr-3\" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>\n      <Dropdown className=\"user-dropdown\">\n        <Dropdown.Toggle variant=\"outline-primary\">\n          <FontAwesomeIcon icon={faUserCircle} className=\"d-md-none\" size=\"lg\" />\n          <span data-hj-suppress className=\"d-none d-md-inline\">\n            {username}\n          </span>\n        </Dropdown.Toggle>\n        <Dropdown.Menu className=\"dropdown-menu-right\">\n          {dashboardMenuItem}\n          <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/u/${username}`}>\n            {intl.formatMessage(messages.profile)}\n          </Dropdown.Item>\n          <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/account/settings`}>\n            {intl.formatMessage(messages.account)}\n          </Dropdown.Item>\n          { getConfig().ORDER_HISTORY_URL && (\n            <Dropdown.Item href={getConfig().ORDER_HISTORY_URL}>\n              {intl.formatMessage(messages.orderHistory)}\n            </Dropdown.Item>\n          )}\n          <Dropdown.Item href={getConfig().LOGOUT_URL}>\n            {intl.formatMessage(messages.signOut)}\n          </Dropdown.Item>\n        </Dropdown.Menu>\n      </Dropdown>\n    </>\n  );\n}\n\nAuthenticatedUserDropdown.propTypes = {\n  intl: intlShape.isRequired,\n  username: PropTypes.string.isRequired,\n};\n\nexport default injectIntl(AuthenticatedUserDropdown);\n"],"file":"AuthenticatedUserDropdown.js"}

package/dist/learning-header/LearningHeader.js

@@ -0,0 +1,121 @@
+var _excluded = ["href", "src", "alt"];
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React, { useContext, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { getConfig } from '@edx/frontend-platform';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { AppContext } from '@edx/frontend-platform/react';
+import AnonymousUserMenu from './AnonymousUserMenu';
+import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
+import messages from './messages';
+import getCourseLogoOrg from './data/api';
+import './_header.scss';
+
+function LinkedLogo(_ref) {
+  var href = _ref.href,
+      src = _ref.src,
+      alt = _ref.alt,
+      attributes = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement("a", _extends({
+    href: href
+  }, attributes), /*#__PURE__*/React.createElement("img", {
+    className: "d-block",
+    src: src,
+    alt: alt
+  }));
+}
+
+LinkedLogo.propTypes = {
+  href: PropTypes.string.isRequired,
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string.isRequired
+}; // this feature flag is not included on the frontend-platform, we have to get it directly from ENV
+
+var enabledOrgLogo = !!process.env.ENABLED_ORG_LOGO || false;
+
+function LearningHeader(_ref2) {
+  var courseOrg = _ref2.courseOrg,
+      courseTitle = _ref2.courseTitle,
+      intl = _ref2.intl,
+      showUserDropdown = _ref2.showUserDropdown;
+
+  var _useContext = useContext(AppContext),
+      authenticatedUser = _useContext.authenticatedUser;
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      logoOrg = _useState2[0],
+      setLogoOrg = _useState2[1];
+
+  useEffect(function () {
+    if (courseOrg) {
+      getCourseLogoOrg().then(function (logoOrgUrl) {
+        setLogoOrg(logoOrgUrl);
+      });
+    }
+  }, []);
+  var headerLogo = /*#__PURE__*/React.createElement(LinkedLogo, {
+    className: "logo",
+    href: "".concat(getConfig().LMS_BASE_URL, "/dashboard"),
+    src: getConfig().LOGO_URL,
+    alt: getConfig().SITE_NAME
+  });
+  return /*#__PURE__*/React.createElement("header", {
+    className: "learning-header"
+  }, /*#__PURE__*/React.createElement("a", {
+    className: "sr-only sr-only-focusable",
+    href: "#main-content"
+  }, intl.formatMessage(messages.skipNavLink)), /*#__PURE__*/React.createElement("div", {
+    className: "container-xl py-2 d-flex align-items-center"
+  }, headerLogo, /*#__PURE__*/React.createElement("div", {
+    className: "d-none d-md-block flex-grow-1 course-title-lockup"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "d-md-flex ".concat(enabledOrgLogo && 'align-items-center justify-content-center', " w-100")
+  }, enabledOrgLogo ? courseOrg && logoOrg && /*#__PURE__*/React.createElement("img", {
+    src: logoOrg,
+    alt: "".concat(courseOrg, " logo"),
+    style: {
+      maxHeight: '45px'
+    }
+  }) : null, /*#__PURE__*/React.createElement("span", {
+    className: "d-inline-block course-title font-weight-semibold ml-3 text-truncate text-left w-25",
+    style: {
+      fontSize: '0.85rem'
+    }
+  }, courseTitle))), showUserDropdown && authenticatedUser && /*#__PURE__*/React.createElement(AuthenticatedUserDropdown, {
+    username: authenticatedUser.username
+  }), showUserDropdown && !authenticatedUser && /*#__PURE__*/React.createElement(AnonymousUserMenu, null)));
+}
+
+LearningHeader.propTypes = {
+  courseOrg: PropTypes.string,
+  courseTitle: PropTypes.string,
+  intl: intlShape.isRequired,
+  showUserDropdown: PropTypes.bool
+};
+LearningHeader.defaultProps = {
+  courseOrg: null,
+  courseTitle: null,
+  showUserDropdown: true
+};
+export default injectIntl(LearningHeader);
+//# sourceMappingURL=LearningHeader.js.map

package/dist/learning-header/LearningHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/learning-header/LearningHeader.jsx"],"names":["React","useContext","useEffect","useState","PropTypes","getConfig","injectIntl","intlShape","AppContext","AnonymousUserMenu","AuthenticatedUserDropdown","messages","getCourseLogoOrg","LinkedLogo","href","src","alt","attributes","propTypes","string","isRequired","enabledOrgLogo","process","env","ENABLED_ORG_LOGO","LearningHeader","courseOrg","courseTitle","intl","showUserDropdown","authenticatedUser","logoOrg","setLogoOrg","then","logoOrgUrl","headerLogo","LMS_BASE_URL","LOGO_URL","SITE_NAME","formatMessage","skipNavLink","maxHeight","fontSize","username","bool","defaultProps"],"mappings":"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","sourcesContent":["import React, { useContext, useEffect, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { getConfig } from '@edx/frontend-platform';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport { AppContext } from '@edx/frontend-platform/react';\n\nimport AnonymousUserMenu from './AnonymousUserMenu';\nimport AuthenticatedUserDropdown from './AuthenticatedUserDropdown';\nimport messages from './messages';\nimport getCourseLogoOrg from './data/api';\n\nimport './_header.scss';\n\nfunction LinkedLogo({\n  href,\n  src,\n  alt,\n  ...attributes\n}) {\n  return (\n    <a href={href} {...attributes}>\n      <img className=\"d-block\" src={src} alt={alt} />\n    </a>\n  );\n}\n\nLinkedLogo.propTypes = {\n  href: PropTypes.string.isRequired,\n  src: PropTypes.string.isRequired,\n  alt: PropTypes.string.isRequired,\n};\n\n// this feature flag is not included on the frontend-platform, we have to get it directly from ENV\nconst enabledOrgLogo = !!process.env.ENABLED_ORG_LOGO || false;\n\nfunction LearningHeader({\n  courseOrg, courseTitle, intl, showUserDropdown,\n}) {\n  const { authenticatedUser } = useContext(AppContext);\n  const [logoOrg, setLogoOrg] = useState(null);\n\n  useEffect(() => {\n    if (courseOrg) {\n      getCourseLogoOrg().then((logoOrgUrl) => { setLogoOrg(logoOrgUrl); });\n    }\n  }, []);\n\n  const headerLogo = (\n    <LinkedLogo\n      className=\"logo\"\n      href={`${getConfig().LMS_BASE_URL}/dashboard`}\n      src={getConfig().LOGO_URL}\n      alt={getConfig().SITE_NAME}\n    />\n  );\n\n  return (\n    <header className=\"learning-header\">\n      <a className=\"sr-only sr-only-focusable\" href=\"#main-content\">{intl.formatMessage(messages.skipNavLink)}</a>\n      <div className=\"container-xl py-2 d-flex align-items-center\">\n        {headerLogo}\n        <div className=\"d-none d-md-block flex-grow-1 course-title-lockup\">\n          <div className={`d-md-flex ${enabledOrgLogo && 'align-items-center justify-content-center'} w-100`}>\n            {enabledOrgLogo ? (\n              (courseOrg && logoOrg)\n              && <img src={logoOrg} alt={`${courseOrg} logo`} style={{ maxHeight: '45px' }} />\n            ) : null}\n            <span\n              className=\"d-inline-block course-title font-weight-semibold ml-3 text-truncate text-left w-25\"\n              style={{ fontSize: '0.85rem' }}\n            >\n              {courseTitle}\n            </span>\n          </div>\n        </div>\n        {showUserDropdown && authenticatedUser && (\n          <AuthenticatedUserDropdown\n            username={authenticatedUser.username}\n          />\n        )}\n        {showUserDropdown && !authenticatedUser && (\n          <AnonymousUserMenu />\n        )}\n      </div>\n    </header>\n  );\n}\n\nLearningHeader.propTypes = {\n  courseOrg: PropTypes.string,\n  courseTitle: PropTypes.string,\n  intl: intlShape.isRequired,\n  showUserDropdown: PropTypes.bool,\n};\n\nLearningHeader.defaultProps = {\n  courseOrg: null,\n  courseTitle: null,\n  showUserDropdown: true,\n};\n\nexport default injectIntl(LearningHeader);\n"],"file":"LearningHeader.js"}

package/dist/learning-header/_header.scss

@@ -0,0 +1,7 @@
+.logo {
+    img {
+        @media (max-width: 576px) {
+            max-width: 85% !important;
+        }
+    }
+}

package/dist/learning-header/data/api.js

@@ -0,0 +1,57 @@
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+import { getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+var getCourseLogoOrg = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+    var orgId, _yield$getAuthenticat, data, _ref2, httpErrorStatus;
+
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            orgId = window.location.pathname.match(/course-(.*?):([^+]+)/)[2];
+            _context.next = 4;
+            return getAuthenticatedHttpClient().get("".concat(getConfig().LMS_BASE_URL, "/api/organizations/v0/organizations/").concat(orgId, "/"), {
+              useCache: true
+            });
+
+          case 4:
+            _yield$getAuthenticat = _context.sent;
+            data = _yield$getAuthenticat.data;
+            return _context.abrupt("return", data.logo);
+
+          case 9:
+            _context.prev = 9;
+            _context.t0 = _context["catch"](0);
+            _ref2 = _context.t0 && _context.t0.customAttributes, httpErrorStatus = _ref2.httpErrorStatus;
+
+            if (!(httpErrorStatus === 404)) {
+              _context.next = 14;
+              break;
+            }
+
+            return _context.abrupt("return", null);
+
+          case 14:
+            throw _context.t0;
+
+          case 15:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[0, 9]]);
+  }));
+
+  return function getCourseLogoOrg() {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+export default getCourseLogoOrg;
+//# sourceMappingURL=api.js.map

package/dist/learning-header/data/api.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/learning-header/data/api.js"],"names":["getConfig","getAuthenticatedHttpClient","getCourseLogoOrg","orgId","window","location","pathname","match","get","LMS_BASE_URL","useCache","data","logo","customAttributes","httpErrorStatus"],"mappings":";;;;AAAA,SAASA,SAAT,QAA0B,wBAA1B;AACA,SAASC,0BAAT,QAA2C,6BAA3C;;AAEA,IAAMC,gBAAgB;AAAA,qEAAG;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEfC,YAAAA,KAFe,GAEPC,MAAM,CAACC,QAAP,CAAgBC,QAAhB,CAAyBC,KAAzB,CAA+B,sBAA/B,EAAuD,CAAvD,CAFO;AAAA;AAAA,mBAGEN,0BAA0B,GAC9CO,GADoB,WAEhBR,SAAS,GAAGS,YAFI,iDAE+CN,KAF/C,QAGnB;AAAEO,cAAAA,QAAQ,EAAE;AAAZ,aAHmB,CAHF;;AAAA;AAAA;AAGbC,YAAAA,IAHa,yBAGbA,IAHa;AAAA,6CAQdA,IAAI,CAACC,IARS;;AAAA;AAAA;AAAA;AAAA,oBAUO,eAAS,YAAMC,gBAVtB,EAUbC,eAVa,SAUbA,eAVa;;AAAA,kBAWjBA,eAAe,KAAK,GAXH;AAAA;AAAA;AAAA;;AAAA,6CAYZ,IAZY;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAAH;;AAAA,kBAAhBZ,gBAAgB;AAAA;AAAA;AAAA,GAAtB;;AAkBA,eAAeA,gBAAf","sourcesContent":["import { getConfig } from '@edx/frontend-platform';\nimport { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';\n\nconst getCourseLogoOrg = async () => {\n  try {\n    const orgId = window.location.pathname.match(/course-(.*?):([^+]+)/)[2];\n    const { data } = await getAuthenticatedHttpClient()\n      .get(\n        `${getConfig().LMS_BASE_URL}/api/organizations/v0/organizations/${orgId}/`,\n        { useCache: true },\n      );\n    return data.logo;\n  } catch (error) {\n    const { httpErrorStatus } = error && error.customAttributes;\n    if (httpErrorStatus === 404) {\n      return null;\n    }\n    throw error;\n  }\n};\n\nexport default getCourseLogoOrg;\n"],"file":"api.js"}