@artistanbul/frontend-component-header-sumac 1.1.0

package/dist/plugin-slots/MobileUserMenuSlot/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import MobileHeaderUserMenu, { mobileHeaderUserMenuDataShape } from '../../mobile-header/MobileHeaderUserMenu';
+var MobileUserMenuSlot = function MobileUserMenuSlot(_ref) {
+  var menu = _ref.menu;
+  return /*#__PURE__*/React.createElement(PluginSlot, {
+    id: "mobile_user_menu_slot",
+    slotOptions: {
+      mergeProps: true
+    }
+  }, /*#__PURE__*/React.createElement(MobileHeaderUserMenu, {
+    menu: menu
+  }));
+};
+MobileUserMenuSlot.propTypes = {
+  menu: mobileHeaderUserMenuDataShape
+};
+export default MobileUserMenuSlot;
+//# sourceMappingURL=index.js.map

package/dist/plugin-slots/MobileUserMenuSlot/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","PluginSlot","MobileHeaderUserMenu","mobileHeaderUserMenuDataShape","MobileUserMenuSlot","_ref","menu","createElement","id","slotOptions","mergeProps","propTypes"],"sources":["../../../src/plugin-slots/MobileUserMenuSlot/index.jsx"],"sourcesContent":["import React from 'react';\nimport { PluginSlot } from '@openedx/frontend-plugin-framework';\nimport MobileHeaderUserMenu, { mobileHeaderUserMenuDataShape } from '../../mobile-header/MobileHeaderUserMenu';\n\nconst MobileUserMenuSlot = ({\n  menu,\n}) => (\n  <PluginSlot\n    id=\"mobile_user_menu_slot\"\n    slotOptions={{\n      mergeProps: true,\n    }}\n  >\n    <MobileHeaderUserMenu menu={menu} />\n  </PluginSlot>\n);\n\nMobileUserMenuSlot.propTypes = {\n  menu: mobileHeaderUserMenuDataShape,\n};\n\nexport default MobileUserMenuSlot;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,oCAAoC;AAC/D,OAAOC,oBAAoB,IAAIC,6BAA6B,QAAQ,0CAA0C;AAE9G,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAAC,IAAA;EAAA,IACtBC,IAAI,GAAAD,IAAA,CAAJC,IAAI;EAAA,oBAEJN,KAAA,CAAAO,aAAA,CAACN,UAAU;IACTO,EAAE,EAAC,uBAAuB;IAC1BC,WAAW,EAAE;MACXC,UAAU,EAAE;IACd;EAAE,gBAEFV,KAAA,CAAAO,aAAA,CAACL,oBAAoB;IAACI,IAAI,EAAEA;EAAK,CAAE,CACzB,CAAC;AAAA,CACd;AAEDF,kBAAkB,CAACO,SAAS,GAAG;EAC7BL,IAAI,EAAEH;AACR,CAAC;AAED,eAAeC,kBAAkB","ignoreList":[]}

package/dist/plugin-slots/README.md

@@ -0,0 +1,15 @@
+# `frontend-component-header` Plugin Slots
+
+* [`logo_slot`](./LogoSlot/)
+* [`desktop_main_menu_slot`](./DesktopMainMenuSlot/)
+* [`desktop_secondary_menu_slot`](./DesktopSecondaryMenuSlot/)
+* [`mobile_main_menu_slot`](./MobileMainMenuSlot/)
+* [`course_info_slot`](./CourseInfoSlot/)
+* [`learning_help_slot`](./LearningHelpSlot/)
+* [`desktop_logged_out_items_slot`](./DesktopLoggedOutItemsSlot/)
+* [`mobile_logged_out_items_slot`](./MobileLoggedOutItemsSlot/)
+* [`mobile_user_menu_slot`](./MobileUserMenuSlot/)
+* [`desktop_user_menu_slot`](./DesktopUserMenuSlot/)
+* [`learning_user_menu_slot`](./LearningUserMenuSlot/)
+* [`learning_logged_out_items_slot`](./LearningLoggedOutItemsSlot/)
+* [`desktop_header_slot`](./DesktopHeaderSlot/)

package/dist/setupTest.js

@@ -0,0 +1,125 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import '@testing-library/jest-dom';
+import '@testing-library/jest-dom/extend-expect';
+import 'babel-polyfill';
+import 'jest-chain';
+import { getConfig, mergeConfig } from '@edx/frontend-platform';
+import { configure as configureLogging } from '@edx/frontend-platform/logging';
+import { configure as configureI18n } from '@edx/frontend-platform/i18n';
+import { configure as configureAuth, MockAuthService } from '@edx/frontend-platform/auth';
+import { render as rtlRender } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import AppProvider from '@edx/frontend-platform/react/AppProvider';
+import appMessages from './i18n';
+
+// These configuration values are usually set in webpack's EnvironmentPlugin however
+// Jest does not use webpack so we need to set these so for testing
+process.env.ACCESS_TOKEN_COOKIE_NAME = 'edx-jwt-cookie-header-payload';
+process.env.ACCOUNT_PROFILE_URL = 'http://localhost:1995';
+process.env.ACCOUNT_SETTINGS_URL = 'http://localhost:1997';
+process.env.BASE_URL = 'localhost:1995';
+process.env.CREDENTIALS_BASE_URL = 'http://localhost:18150';
+process.env.CSRF_TOKEN_API_PATH = '/csrf/api/v1/token';
+process.env.ECOMMERCE_BASE_URL = 'http://localhost:18130';
+process.env.LANGUAGE_PREFERENCE_COOKIE_NAME = 'openedx-language-preference';
+process.env.LMS_BASE_URL = 'http://localhost:18000';
+process.env.LOGIN_URL = 'http://localhost:18000/login';
+process.env.LOGOUT_URL = 'http://localhost:18000/logout';
+process.env.MARKETING_SITE_BASE_URL = 'http://localhost:18000';
+process.env.ORDER_HISTORY_URL = 'localhost:1996/orders';
+process.env.REFRESH_ACCESS_TOKEN_ENDPOINT = 'http://localhost:18000/login_refresh';
+process.env.SEGMENT_KEY = 'segment_whoa';
+process.env.SITE_NAME = 'edX';
+process.env.USER_INFO_COOKIE_NAME = 'edx-user-info';
+process.env.LOGO_URL = 'https://edx-cdn.org/v3/default/logo.svg';
+process.env.LOGO_TRADEMARK_URL = 'https://edx-cdn.org/v3/default/logo-trademark.svg';
+process.env.LOGO_WHITE_URL = 'https://edx-cdn.org/v3/default/logo-white.svg';
+process.env.FAVICON_URL = 'https://edx-cdn.org/v3/default/favicon.ico';
+
+class MockLoggingService {
+  logInfo = jest.fn();
+
+  logError = jest.fn();
+}
+
+export const authenticatedUser = {
+  userId: 'abc123',
+  username: 'Mock User',
+  roles: [],
+  administrator: false,
+};
+
+export function initializeMockApp() {
+  mergeConfig({
+    INSIGHTS_BASE_URL: process.env.INSIGHTS_BASE_URL || null,
+    STUDIO_BASE_URL: process.env.STUDIO_BASE_URL || null,
+    TWITTER_URL: process.env.TWITTER_URL || null,
+    BASE_URL: process.env.BASE_URL || null,
+    LMS_BASE_URL: process.env.LMS_BASE_URL || null,
+    LOGIN_URL: process.env.LOGIN_URL || null,
+    LOGOUT_URL: process.env.LOGOUT_URL || null,
+    REFRESH_ACCESS_TOKEN_ENDPOINT: process.env.REFRESH_ACCESS_TOKEN_ENDPOINT || null,
+    ACCESS_TOKEN_COOKIE_NAME: process.env.ACCESS_TOKEN_COOKIE_NAME || null,
+    CSRF_TOKEN_API_PATH: process.env.CSRF_TOKEN_API_PATH || null,
+    LOGO_URL: process.env.LOGO_URL || null,
+    SITE_NAME: process.env.SITE_NAME || null,
+
+    authenticatedUser: {
+      userId: 'abc123',
+      username: 'Mock User',
+      roles: [],
+      administrator: false,
+    },
+  });
+
+  const loggingService = configureLogging(MockLoggingService, {
+    config: getConfig(),
+  });
+  const authService = configureAuth(MockAuthService, {
+    config: getConfig(),
+    loggingService,
+  });
+
+  // i18n doesn't have a service class to return.
+  configureI18n({
+    config: getConfig(),
+    loggingService,
+    messages: [appMessages],
+  });
+
+  return { loggingService, authService };
+}
+
+function render(
+  ui,
+  {
+    store = null,
+    ...renderOptions
+  } = {},
+) {
+  const Wrapper = ({ children }) => (
+    // eslint-disable-next-line react/jsx-filename-extension
+    <IntlProvider locale="en">
+      <AppProvider store={store}>
+        {children}
+      </AppProvider>
+    </IntlProvider>
+  );
+
+  Wrapper.propTypes = {
+    children: PropTypes.node.isRequired,
+  };
+
+  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
+}
+
+// Re-export everything.
+export * from '@testing-library/react';
+
+// Override `render` method.
+export {
+  render,
+};

package/dist/studio-header/BrandNav.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import omnikampusLogo from "../images/omnikampus/omnikampus-just-logo.png";
+var BrandNav = function BrandNav(_ref) {
+  var studioBaseUrl = _ref.studioBaseUrl,
+    logo = _ref.logo,
+    logoAltText = _ref.logoAltText;
+  return /*#__PURE__*/React.createElement(Link, {
+    to: studioBaseUrl,
+    className: "studio-logo"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: omnikampusLogo,
+    alt: logoAltText,
+    className: "d-block logo"
+  }));
+};
+BrandNav.propTypes = {
+  studioBaseUrl: PropTypes.string.isRequired,
+  logo: PropTypes.string.isRequired,
+  logoAltText: PropTypes.string.isRequired
+};
+export default BrandNav;
+//# sourceMappingURL=BrandNav.js.map

package/dist/studio-header/BrandNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrandNav.js","names":["React","PropTypes","Link","omnikampusLogo","BrandNav","_ref","studioBaseUrl","logo","logoAltText","createElement","to","className","src","alt","propTypes","string","isRequired"],"sources":["../../src/studio-header/BrandNav.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Link } from 'react-router-dom';\n\nimport omnikampusLogo from \"../images/omnikampus/omnikampus-just-logo.png\"\n\nconst BrandNav = ({\n  studioBaseUrl,\n  logo,\n  logoAltText,\n}) => (\n  <Link to={studioBaseUrl} className='studio-logo'>\n    <img\n      src={omnikampusLogo}\n      alt={logoAltText}\n      className=\"d-block logo\"\n    />\n  </Link>\n);\n\nBrandNav.propTypes = {\n  studioBaseUrl: PropTypes.string.isRequired,\n  logo: PropTypes.string.isRequired,\n  logoAltText: PropTypes.string.isRequired,\n};\n\nexport default BrandNav;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,IAAI,QAAQ,kBAAkB;AAEvC,OAAOC,cAAc,MAAM,+CAA+C;AAE1E,IAAMC,QAAQ,GAAG,SAAXA,QAAQA,CAAAC,IAAA;EAAA,IACZC,aAAa,GAAAD,IAAA,CAAbC,aAAa;IACbC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IACJC,WAAW,GAAAH,IAAA,CAAXG,WAAW;EAAA,oBAEXR,KAAA,CAAAS,aAAA,CAACP,IAAI;IAACQ,EAAE,EAAEJ,aAAc;IAACK,SAAS,EAAC;EAAa,gBAC9CX,KAAA,CAAAS,aAAA;IACEG,GAAG,EAAET,cAAe;IACpBU,GAAG,EAAEL,WAAY;IACjBG,SAAS,EAAC;EAAc,CACzB,CACG,CAAC;AAAA,CACR;AAEDP,QAAQ,CAACU,SAAS,GAAG;EACnBR,aAAa,EAAEL,SAAS,CAACc,MAAM,CAACC,UAAU;EAC1CT,IAAI,EAAEN,SAAS,CAACc,MAAM,CAACC,UAAU;EACjCR,WAAW,EAAEP,SAAS,CAACc,MAAM,CAACC;AAChC,CAAC;AAED,eAAeZ,QAAQ","ignoreList":[]}

package/dist/studio-header/CourseLockUp.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { OverlayTrigger, Tooltip } from '@openedx/paragon';
+import { Link } from 'react-router-dom';
+import messages from './messages';
+var CourseLockUp = function CourseLockUp(_ref) {
+  var outlineLink = _ref.outlineLink,
+    org = _ref.org,
+    number = _ref.number,
+    title = _ref.title,
+    intl = _ref.intl;
+  return /*#__PURE__*/React.createElement(OverlayTrigger, {
+    placement: "bottom",
+    overlay: /*#__PURE__*/React.createElement(Tooltip, {
+      id: "course-lock-up"
+    }, title)
+  }, /*#__PURE__*/React.createElement(Link, {
+    className: "course-title-lockup mr-2",
+    to: outlineLink,
+    "aria-label": intl.formatMessage(messages['header.label.courseOutline']),
+    "data-testid": "course-lock-up-block"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "d-block small m-0 text-gray-800",
+    "data-testid": "course-org-number"
+  }, org, " ", number), /*#__PURE__*/React.createElement("span", {
+    className: "d-block m-0 font-weight-bold text-gray-800",
+    "data-testid": "course-title"
+  }, title)));
+};
+CourseLockUp.propTypes = {
+  number: PropTypes.string,
+  org: PropTypes.string,
+  title: PropTypes.string,
+  outlineLink: PropTypes.string,
+  // injected
+  intl: intlShape.isRequired
+};
+CourseLockUp.defaultProps = {
+  number: null,
+  org: null,
+  title: null,
+  outlineLink: null
+};
+export default injectIntl(CourseLockUp);
+//# sourceMappingURL=CourseLockUp.js.map

package/dist/studio-header/CourseLockUp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CourseLockUp.js","names":["React","PropTypes","injectIntl","intlShape","OverlayTrigger","Tooltip","Link","messages","CourseLockUp","_ref","outlineLink","org","number","title","intl","createElement","placement","overlay","id","className","to","formatMessage","propTypes","string","isRequired","defaultProps"],"sources":["../../src/studio-header/CourseLockUp.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { injectIntl, intlShape } from '@edx/frontend-platform/i18n';\nimport {\n  OverlayTrigger,\n  Tooltip,\n} from '@openedx/paragon';\nimport { Link } from 'react-router-dom';\n\nimport messages from './messages';\n\nconst CourseLockUp = ({\n  outlineLink,\n  org,\n  number,\n  title,\n  // injected\n  intl,\n}) => (\n  <OverlayTrigger\n    placement=\"bottom\"\n    overlay={(\n      <Tooltip id=\"course-lock-up\">\n        {title}\n      </Tooltip>\n    )}\n  >\n    <Link\n      className=\"course-title-lockup mr-2\"\n      to={outlineLink}\n      aria-label={intl.formatMessage(messages['header.label.courseOutline'])}\n      data-testid=\"course-lock-up-block\"\n    >\n      <span className=\"d-block small m-0 text-gray-800\" data-testid=\"course-org-number\">{org} {number}</span>\n      <span className=\"d-block m-0 font-weight-bold text-gray-800\" data-testid=\"course-title\">{title}</span>\n    </Link>\n  </OverlayTrigger>\n);\n\nCourseLockUp.propTypes = {\n  number: PropTypes.string,\n  org: PropTypes.string,\n  title: PropTypes.string,\n  outlineLink: PropTypes.string,\n  // injected\n  intl: intlShape.isRequired,\n};\n\nCourseLockUp.defaultProps = {\n  number: null,\n  org: null,\n  title: null,\n  outlineLink: null,\n};\n\nexport default injectIntl(CourseLockUp);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,UAAU,EAAEC,SAAS,QAAQ,6BAA6B;AACnE,SACEC,cAAc,EACdC,OAAO,QACF,kBAAkB;AACzB,SAASC,IAAI,QAAQ,kBAAkB;AAEvC,OAAOC,QAAQ,MAAM,YAAY;AAEjC,IAAMC,YAAY,GAAG,SAAfA,YAAYA,CAAAC,IAAA;EAAA,IAChBC,WAAW,GAAAD,IAAA,CAAXC,WAAW;IACXC,GAAG,GAAAF,IAAA,CAAHE,GAAG;IACHC,MAAM,GAAAH,IAAA,CAANG,MAAM;IACNC,KAAK,GAAAJ,IAAA,CAALI,KAAK;IAELC,IAAI,GAAAL,IAAA,CAAJK,IAAI;EAAA,oBAEJd,KAAA,CAAAe,aAAA,CAACX,cAAc;IACbY,SAAS,EAAC,QAAQ;IAClBC,OAAO,eACLjB,KAAA,CAAAe,aAAA,CAACV,OAAO;MAACa,EAAE,EAAC;IAAgB,GACzBL,KACM;EACT,gBAEFb,KAAA,CAAAe,aAAA,CAACT,IAAI;IACHa,SAAS,EAAC,0BAA0B;IACpCC,EAAE,EAAEV,WAAY;IAChB,cAAYI,IAAI,CAACO,aAAa,CAACd,QAAQ,CAAC,4BAA4B,CAAC,CAAE;IACvE,eAAY;EAAsB,gBAElCP,KAAA,CAAAe,aAAA;IAAMI,SAAS,EAAC,iCAAiC;IAAC,eAAY;EAAmB,GAAER,GAAG,EAAC,GAAC,EAACC,MAAa,CAAC,eACvGZ,KAAA,CAAAe,aAAA;IAAMI,SAAS,EAAC,4CAA4C;IAAC,eAAY;EAAc,GAAEN,KAAY,CACjG,CACQ,CAAC;AAAA,CAClB;AAEDL,YAAY,CAACc,SAAS,GAAG;EACvBV,MAAM,EAAEX,SAAS,CAACsB,MAAM;EACxBZ,GAAG,EAAEV,SAAS,CAACsB,MAAM;EACrBV,KAAK,EAAEZ,SAAS,CAACsB,MAAM;EACvBb,WAAW,EAAET,SAAS,CAACsB,MAAM;EAC7B;EACAT,IAAI,EAAEX,SAAS,CAACqB;AAClB,CAAC;AAEDhB,YAAY,CAACiB,YAAY,GAAG;EAC1Bb,MAAM,EAAE,IAAI;EACZD,GAAG,EAAE,IAAI;EACTE,KAAK,EAAE,IAAI;EACXH,WAAW,EAAE;AACf,CAAC;AAED,eAAeR,UAAU,CAACM,YAAY,CAAC","ignoreList":[]}

package/dist/studio-header/HeaderBody.js

@@ -0,0 +1,143 @@
+var _excluded = ["className"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import classNames from 'classnames';
+import { ActionRow, Button, Container, Icon, IconButton, Nav, Row } from '@openedx/paragon';
+import { Close, MenuIcon, Search } from '@openedx/paragon/icons';
+import CourseLockUp from './CourseLockUp';
+import UserMenu from './UserMenu';
+import BrandNav from './BrandNav';
+import NavDropdownMenu from './NavDropdownMenu';
+import messages from './messages';
+var HeaderBody = function HeaderBody(_ref) {
+  var logo = _ref.logo,
+    logoAltText = _ref.logoAltText,
+    number = _ref.number,
+    org = _ref.org,
+    title = _ref.title,
+    username = _ref.username,
+    isAdmin = _ref.isAdmin,
+    studioBaseUrl = _ref.studioBaseUrl,
+    logoutUrl = _ref.logoutUrl,
+    authenticatedUserAvatar = _ref.authenticatedUserAvatar,
+    isMobile = _ref.isMobile,
+    setModalPopupTarget = _ref.setModalPopupTarget,
+    toggleModalPopup = _ref.toggleModalPopup,
+    isModalPopupOpen = _ref.isModalPopupOpen,
+    isHiddenMainMenu = _ref.isHiddenMainMenu,
+    mainMenuDropdowns = _ref.mainMenuDropdowns,
+    outlineLink = _ref.outlineLink,
+    searchButtonAction = _ref.searchButtonAction,
+    containerProps = _ref.containerProps;
+  var intl = useIntl();
+  var renderBrandNav = /*#__PURE__*/React.createElement(BrandNav, {
+    studioBaseUrl: studioBaseUrl,
+    logo: logo,
+    logoAltText: logoAltText
+  });
+  var _ref2 = containerProps || {},
+    containerClassName = _ref2.className,
+    restContainerProps = _objectWithoutProperties(_ref2, _excluded);
+  return /*#__PURE__*/React.createElement(Container, _extends({
+    size: "xl",
+    className: classNames('px-2.5', containerClassName)
+  }, restContainerProps), /*#__PURE__*/React.createElement(ActionRow, {
+    as: "header"
+  }, isHiddenMainMenu ? /*#__PURE__*/React.createElement(Row, {
+    className: "flex-nowrap ml-4"
+  }, renderBrandNav) : /*#__PURE__*/React.createElement(React.Fragment, null, isMobile ? /*#__PURE__*/React.createElement(Button, {
+    ref: setModalPopupTarget,
+    className: "d-inline-flex align-items-center",
+    variant: "tertiary",
+    onClick: toggleModalPopup,
+    iconBefore: isModalPopupOpen ? Close : MenuIcon,
+    "data-testid": "mobile-menu-button"
+  }, "Menu") : /*#__PURE__*/React.createElement("div", {
+    className: "w-25"
+  }, /*#__PURE__*/React.createElement(Row, {
+    className: "m-0 flex-nowrap"
+  }, renderBrandNav, /*#__PURE__*/React.createElement(CourseLockUp, {
+    outlineLink: outlineLink,
+    number: number,
+    org: org,
+    title: title
+  }))), isMobile ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ActionRow.Spacer, null), renderBrandNav) : /*#__PURE__*/React.createElement(Nav, {
+    "data-testid": "desktop-menu",
+    className: "ml-2"
+  }, mainMenuDropdowns.map(function (dropdown) {
+    var id = dropdown.id,
+      buttonTitle = dropdown.buttonTitle,
+      items = dropdown.items;
+    return /*#__PURE__*/React.createElement(NavDropdownMenu, {
+      key: id,
+      id: id,
+      buttonTitle: buttonTitle,
+      items: items
+    });
+  }))), /*#__PURE__*/React.createElement(ActionRow.Spacer, null), searchButtonAction && /*#__PURE__*/React.createElement(Nav, null, /*#__PURE__*/React.createElement(IconButton, {
+    src: Search,
+    iconAs: Icon,
+    onClick: searchButtonAction,
+    "aria-label": intl.formatMessage(messages['header.label.search.nav']),
+    alt: intl.formatMessage(messages['header.label.search.nav'])
+  })), /*#__PURE__*/React.createElement(Nav, null, /*#__PURE__*/React.createElement(UserMenu, {
+    username: username,
+    studioBaseUrl: studioBaseUrl,
+    logoutUrl: logoutUrl,
+    authenticatedUserAvatar: authenticatedUserAvatar,
+    isAdmin: isAdmin
+  }))));
+};
+HeaderBody.propTypes = {
+  studioBaseUrl: PropTypes.string.isRequired,
+  logoutUrl: PropTypes.string.isRequired,
+  setModalPopupTarget: PropTypes.func,
+  toggleModalPopup: PropTypes.func,
+  isModalPopupOpen: PropTypes.bool,
+  number: PropTypes.string,
+  org: PropTypes.string,
+  title: PropTypes.string,
+  logo: PropTypes.string,
+  logoAltText: PropTypes.string,
+  authenticatedUserAvatar: PropTypes.string,
+  username: PropTypes.string,
+  isAdmin: PropTypes.bool,
+  isMobile: PropTypes.bool,
+  isHiddenMainMenu: PropTypes.bool,
+  mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    buttonTitle: PropTypes.node,
+    items: PropTypes.arrayOf(PropTypes.shape({
+      href: PropTypes.string,
+      title: PropTypes.node
+    }))
+  })),
+  outlineLink: PropTypes.string,
+  searchButtonAction: PropTypes.func,
+  containerProps: PropTypes.shape(Container.propTypes)
+};
+HeaderBody.defaultProps = {
+  setModalPopupTarget: null,
+  toggleModalPopup: null,
+  isModalPopupOpen: false,
+  logo: null,
+  logoAltText: null,
+  number: '',
+  org: '',
+  title: '',
+  authenticatedUserAvatar: null,
+  username: null,
+  isAdmin: false,
+  isMobile: false,
+  isHiddenMainMenu: false,
+  mainMenuDropdowns: [],
+  outlineLink: null,
+  searchButtonAction: null,
+  containerProps: {}
+};
+export default HeaderBody;
+//# sourceMappingURL=HeaderBody.js.map

package/dist/studio-header/HeaderBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderBody.js","names":["React","PropTypes","useIntl","classNames","ActionRow","Button","Container","Icon","IconButton","Nav","Row","Close","MenuIcon","Search","CourseLockUp","UserMenu","BrandNav","NavDropdownMenu","messages","HeaderBody","_ref","logo","logoAltText","number","org","title","username","isAdmin","studioBaseUrl","logoutUrl","authenticatedUserAvatar","isMobile","setModalPopupTarget","toggleModalPopup","isModalPopupOpen","isHiddenMainMenu","mainMenuDropdowns","outlineLink","searchButtonAction","containerProps","intl","renderBrandNav","createElement","_ref2","containerClassName","className","restContainerProps","_objectWithoutProperties","_excluded","_extends","size","as","Fragment","ref","variant","onClick","iconBefore","Spacer","map","dropdown","id","buttonTitle","items","key","src","iconAs","formatMessage","alt","propTypes","string","isRequired","func","bool","arrayOf","shape","node","href","defaultProps"],"sources":["../../src/studio-header/HeaderBody.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { useIntl } from '@edx/frontend-platform/i18n';\nimport classNames from 'classnames';\nimport {\n  ActionRow,\n  Button,\n  Container,\n  Icon,\n  IconButton,\n  Nav,\n  Row,\n} from '@openedx/paragon';\nimport { Close, MenuIcon, Search } from '@openedx/paragon/icons';\n\nimport CourseLockUp from './CourseLockUp';\nimport UserMenu from './UserMenu';\nimport BrandNav from './BrandNav';\nimport NavDropdownMenu from './NavDropdownMenu';\nimport messages from './messages';\n\nconst HeaderBody = ({\n  logo,\n  logoAltText,\n  number,\n  org,\n  title,\n  username,\n  isAdmin,\n  studioBaseUrl,\n  logoutUrl,\n  authenticatedUserAvatar,\n  isMobile,\n  setModalPopupTarget,\n  toggleModalPopup,\n  isModalPopupOpen,\n  isHiddenMainMenu,\n  mainMenuDropdowns,\n  outlineLink,\n  searchButtonAction,\n  containerProps,\n}) => {\n  const intl = useIntl();\n\n  const renderBrandNav = (\n    <BrandNav\n      {...{\n        studioBaseUrl,\n        logo,\n        logoAltText,\n      }}\n    />\n  );\n\n  const { className: containerClassName, ...restContainerProps } = containerProps || {};\n\n  return (\n    <Container\n      size=\"xl\"\n      className={classNames('px-2.5', containerClassName)}\n      {...restContainerProps}\n    >\n      <ActionRow as=\"header\">\n        {isHiddenMainMenu ? (\n          <Row className=\"flex-nowrap ml-4\">\n            {renderBrandNav}\n          </Row>\n        ) : (\n          <>\n            {isMobile ? (\n              <Button\n                ref={setModalPopupTarget}\n                className=\"d-inline-flex align-items-center\"\n                variant=\"tertiary\"\n                onClick={toggleModalPopup}\n                iconBefore={isModalPopupOpen ? Close : MenuIcon}\n                data-testid=\"mobile-menu-button\"\n              >\n                Menu\n              </Button>\n            ) : (\n              <div className=\"w-25\">\n                <Row className=\"m-0 flex-nowrap\">\n                  {renderBrandNav}\n                  <CourseLockUp\n                    {...{\n                      outlineLink,\n                      number,\n                      org,\n                      title,\n                    }}\n                  />\n                </Row>\n              </div>\n            )}\n            {isMobile ? (\n              <>\n                <ActionRow.Spacer />\n                {renderBrandNav}\n              </>\n            ) : (\n              <Nav data-testid=\"desktop-menu\" className=\"ml-2\">\n                {mainMenuDropdowns.map(dropdown => {\n                  const { id, buttonTitle, items } = dropdown;\n                  return (\n                    <NavDropdownMenu\n                      key={id}\n                      {...{\n                        id, buttonTitle, items,\n                      }}\n                    />\n                  );\n                })}\n              </Nav>\n            )}\n          </>\n        )}\n        <ActionRow.Spacer />\n        {searchButtonAction && (\n          <Nav>\n            <IconButton\n              src={Search}\n              iconAs={Icon}\n              onClick={searchButtonAction}\n              aria-label={intl.formatMessage(messages['header.label.search.nav'])}\n              alt={intl.formatMessage(messages['header.label.search.nav'])}\n            />\n          </Nav>\n        )}\n        <Nav>\n          <UserMenu\n            {...{\n              username,\n              studioBaseUrl,\n              logoutUrl,\n              authenticatedUserAvatar,\n              isAdmin,\n            }}\n          />\n        </Nav>\n      </ActionRow>\n    </Container>\n  );\n};\n\nHeaderBody.propTypes = {\n  studioBaseUrl: PropTypes.string.isRequired,\n  logoutUrl: PropTypes.string.isRequired,\n  setModalPopupTarget: PropTypes.func,\n  toggleModalPopup: PropTypes.func,\n  isModalPopupOpen: PropTypes.bool,\n  number: PropTypes.string,\n  org: PropTypes.string,\n  title: PropTypes.string,\n  logo: PropTypes.string,\n  logoAltText: PropTypes.string,\n  authenticatedUserAvatar: PropTypes.string,\n  username: PropTypes.string,\n  isAdmin: PropTypes.bool,\n  isMobile: PropTypes.bool,\n  isHiddenMainMenu: PropTypes.bool,\n  mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({\n    id: PropTypes.string,\n    buttonTitle: PropTypes.node,\n    items: PropTypes.arrayOf(PropTypes.shape({\n      href: PropTypes.string,\n      title: PropTypes.node,\n    })),\n  })),\n  outlineLink: PropTypes.string,\n  searchButtonAction: PropTypes.func,\n  containerProps: PropTypes.shape(Container.propTypes),\n};\n\nHeaderBody.defaultProps = {\n  setModalPopupTarget: null,\n  toggleModalPopup: null,\n  isModalPopupOpen: false,\n  logo: null,\n  logoAltText: null,\n  number: '',\n  org: '',\n  title: '',\n  authenticatedUserAvatar: null,\n  username: null,\n  isAdmin: false,\n  isMobile: false,\n  isHiddenMainMenu: false,\n  mainMenuDropdowns: [],\n  outlineLink: null,\n  searchButtonAction: null,\n  containerProps: {},\n};\n\nexport default HeaderBody;\n"],"mappings":"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","ignoreList":[]}

package/dist/studio-header/MobileHeader.js

@@ -0,0 +1,79 @@
+var _excluded = ["mainMenuDropdowns"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useToggle, ModalPopup } from '@openedx/paragon';
+import HeaderBody from './HeaderBody';
+import MobileMenu from './MobileMenu';
+var MobileHeader = function MobileHeader(_ref) {
+  var mainMenuDropdowns = _ref.mainMenuDropdowns,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useToggle = useToggle(false),
+    _useToggle2 = _slicedToArray(_useToggle, 4),
+    isOpen = _useToggle2[0],
+    close = _useToggle2[2],
+    toggle = _useToggle2[3];
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    target = _useState2[0],
+    setTarget = _useState2[1];
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HeaderBody, _extends({}, props, {
+    isMobile: true,
+    setModalPopupTarget: setTarget,
+    toggleModalPopup: toggle,
+    isModalPopupOpen: isOpen
+  })), /*#__PURE__*/React.createElement(ModalPopup, {
+    hasArrow: true,
+    placement: "bottom",
+    positionRef: target,
+    isOpen: isOpen,
+    onClose: close,
+    onEscapeKey: close,
+    className: "mobile-menu-container"
+  }, /*#__PURE__*/React.createElement(MobileMenu, {
+    mainMenuDropdowns: mainMenuDropdowns
+  })));
+};
+MobileHeader.propTypes = {
+  studioBaseUrl: PropTypes.string.isRequired,
+  logoutUrl: PropTypes.string.isRequired,
+  number: PropTypes.string,
+  org: PropTypes.string,
+  title: PropTypes.string,
+  logo: PropTypes.string,
+  logoAltText: PropTypes.string,
+  authenticatedUserAvatar: PropTypes.string,
+  username: PropTypes.string,
+  isAdmin: PropTypes.bool,
+  mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    buttonTitle: PropTypes.node,
+    items: PropTypes.arrayOf(PropTypes.shape({
+      href: PropTypes.string,
+      title: PropTypes.node
+    }))
+  })),
+  outlineLink: PropTypes.string
+};
+MobileHeader.defaultProps = {
+  logo: null,
+  logoAltText: null,
+  number: null,
+  org: null,
+  title: null,
+  authenticatedUserAvatar: null,
+  username: null,
+  isAdmin: false,
+  mainMenuDropdowns: [],
+  outlineLink: null
+};
+export default MobileHeader;
+//# sourceMappingURL=MobileHeader.js.map

package/dist/studio-header/MobileHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileHeader.js","names":["React","useState","PropTypes","useToggle","ModalPopup","HeaderBody","MobileMenu","MobileHeader","_ref","mainMenuDropdowns","props","_objectWithoutProperties","_excluded","_useToggle","_useToggle2","_slicedToArray","isOpen","close","toggle","_useState","_useState2","target","setTarget","createElement","Fragment","_extends","isMobile","setModalPopupTarget","toggleModalPopup","isModalPopupOpen","hasArrow","placement","positionRef","onClose","onEscapeKey","className","propTypes","studioBaseUrl","string","isRequired","logoutUrl","number","org","title","logo","logoAltText","authenticatedUserAvatar","username","isAdmin","bool","arrayOf","shape","id","buttonTitle","node","items","href","outlineLink","defaultProps"],"sources":["../../src/studio-header/MobileHeader.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useToggle, ModalPopup } from '@openedx/paragon';\nimport HeaderBody from './HeaderBody';\nimport MobileMenu from './MobileMenu';\n\nconst MobileHeader = ({\n  mainMenuDropdowns,\n  ...props\n}) => {\n  const [isOpen, , close, toggle] = useToggle(false);\n  const [target, setTarget] = useState(null);\n\n  return (\n    <>\n      <HeaderBody\n        {...props}\n        isMobile\n        setModalPopupTarget={setTarget}\n        toggleModalPopup={toggle}\n        isModalPopupOpen={isOpen}\n      />\n      <ModalPopup\n        hasArrow\n        placement=\"bottom\"\n        positionRef={target}\n        isOpen={isOpen}\n        onClose={close}\n        onEscapeKey={close}\n        className=\"mobile-menu-container\"\n      >\n        <MobileMenu {...{ mainMenuDropdowns }} />\n      </ModalPopup>\n    </>\n  );\n};\n\nMobileHeader.propTypes = {\n  studioBaseUrl: PropTypes.string.isRequired,\n  logoutUrl: PropTypes.string.isRequired,\n  number: PropTypes.string,\n  org: PropTypes.string,\n  title: PropTypes.string,\n  logo: PropTypes.string,\n  logoAltText: PropTypes.string,\n  authenticatedUserAvatar: PropTypes.string,\n  username: PropTypes.string,\n  isAdmin: PropTypes.bool,\n  mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({\n    id: PropTypes.string,\n    buttonTitle: PropTypes.node,\n    items: PropTypes.arrayOf(PropTypes.shape({\n      href: PropTypes.string,\n      title: PropTypes.node,\n    })),\n  })),\n  outlineLink: PropTypes.string,\n};\n\nMobileHeader.defaultProps = {\n  logo: null,\n  logoAltText: null,\n  number: null,\n  org: null,\n  title: null,\n  authenticatedUserAvatar: null,\n  username: null,\n  isAdmin: false,\n  mainMenuDropdowns: [],\n  outlineLink: null,\n};\n\nexport default MobileHeader;\n"],"mappings":"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","ignoreList":[]}

package/dist/studio-header/MobileMenu.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Collapsible } from '@openedx/paragon';
+import { Link } from 'react-router-dom';
+var MobileMenu = function MobileMenu(_ref) {
+  var mainMenuDropdowns = _ref.mainMenuDropdowns;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ml-4 p-2 bg-light-100 border border-gray-200 small rounded",
+    "data-testid": "mobile-menu"
+  }, /*#__PURE__*/React.createElement("div", null, mainMenuDropdowns.map(function (dropdown) {
+    var id = dropdown.id,
+      buttonTitle = dropdown.buttonTitle,
+      items = dropdown.items;
+    return /*#__PURE__*/React.createElement(Collapsible, {
+      className: "border-light-100",
+      title: buttonTitle,
+      key: id
+    }, /*#__PURE__*/React.createElement("ul", {
+      className: "p-0",
+      style: {
+        listStyleType: 'none'
+      }
+    }, items.map(function (item) {
+      return /*#__PURE__*/React.createElement("li", {
+        className: "mobile-menu-item"
+      }, /*#__PURE__*/React.createElement(Link, {
+        to: item.href
+      }, item.title));
+    })));
+  })));
+};
+MobileMenu.propTypes = {
+  mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    buttonTitle: PropTypes.node,
+    items: PropTypes.arrayOf(PropTypes.shape({
+      href: PropTypes.string,
+      title: PropTypes.node
+    }))
+  }))
+};
+MobileMenu.defaultProps = {
+  mainMenuDropdowns: []
+};
+export default MobileMenu;
+//# sourceMappingURL=MobileMenu.js.map

package/dist/studio-header/MobileMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileMenu.js","names":["React","PropTypes","Collapsible","Link","MobileMenu","_ref","mainMenuDropdowns","createElement","className","map","dropdown","id","buttonTitle","items","title","key","style","listStyleType","item","to","href","propTypes","arrayOf","shape","string","node","defaultProps"],"sources":["../../src/studio-header/MobileMenu.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Collapsible } from '@openedx/paragon';\nimport { Link } from 'react-router-dom';\n\nconst MobileMenu = ({ mainMenuDropdowns }) => (\n  <div\n    className=\"ml-4 p-2 bg-light-100 border border-gray-200 small rounded\"\n    data-testid=\"mobile-menu\"\n  >\n    <div>\n      {mainMenuDropdowns.map(dropdown => {\n        const { id, buttonTitle, items } = dropdown;\n        return (\n          <Collapsible\n            className=\"border-light-100\"\n            title={buttonTitle}\n            key={id}\n          >\n            <ul className=\"p-0\" style={{ listStyleType: 'none' }}>\n              {items.map(item => (\n                <li className=\"mobile-menu-item\">\n                  <Link to={item.href}>\n                    {item.title}\n                  </Link>\n                </li>\n              ))}\n            </ul>\n          </Collapsible>\n        );\n      })}\n    </div>\n  </div>\n);\n\nMobileMenu.propTypes = {\n  mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({\n    id: PropTypes.string,\n    buttonTitle: PropTypes.node,\n    items: PropTypes.arrayOf(PropTypes.shape({\n      href: PropTypes.string,\n      title: PropTypes.node,\n    })),\n  })),\n};\nMobileMenu.defaultProps = {\n  mainMenuDropdowns: [],\n};\n\nexport default MobileMenu;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,WAAW,QAAQ,kBAAkB;AAC9C,SAASC,IAAI,QAAQ,kBAAkB;AAEvC,IAAMC,UAAU,GAAG,SAAbA,UAAUA,CAAAC,IAAA;EAAA,IAAMC,iBAAiB,GAAAD,IAAA,CAAjBC,iBAAiB;EAAA,oBACrCN,KAAA,CAAAO,aAAA;IACEC,SAAS,EAAC,4DAA4D;IACtE,eAAY;EAAa,gBAEzBR,KAAA,CAAAO,aAAA,cACGD,iBAAiB,CAACG,GAAG,CAAC,UAAAC,QAAQ,EAAI;IACjC,IAAQC,EAAE,GAAyBD,QAAQ,CAAnCC,EAAE;MAAEC,WAAW,GAAYF,QAAQ,CAA/BE,WAAW;MAAEC,KAAK,GAAKH,QAAQ,CAAlBG,KAAK;IAC9B,oBACEb,KAAA,CAAAO,aAAA,CAACL,WAAW;MACVM,SAAS,EAAC,kBAAkB;MAC5BM,KAAK,EAAEF,WAAY;MACnBG,GAAG,EAAEJ;IAAG,gBAERX,KAAA,CAAAO,aAAA;MAAIC,SAAS,EAAC,KAAK;MAACQ,KAAK,EAAE;QAAEC,aAAa,EAAE;MAAO;IAAE,GAClDJ,KAAK,CAACJ,GAAG,CAAC,UAAAS,IAAI;MAAA,oBACblB,KAAA,CAAAO,aAAA;QAAIC,SAAS,EAAC;MAAkB,gBAC9BR,KAAA,CAAAO,aAAA,CAACJ,IAAI;QAACgB,EAAE,EAAED,IAAI,CAACE;MAAK,GACjBF,IAAI,CAACJ,KACF,CACJ,CAAC;IAAA,CACN,CACC,CACO,CAAC;EAElB,CAAC,CACE,CACF,CAAC;AAAA,CACP;AAEDV,UAAU,CAACiB,SAAS,GAAG;EACrBf,iBAAiB,EAAEL,SAAS,CAACqB,OAAO,CAACrB,SAAS,CAACsB,KAAK,CAAC;IACnDZ,EAAE,EAAEV,SAAS,CAACuB,MAAM;IACpBZ,WAAW,EAAEX,SAAS,CAACwB,IAAI;IAC3BZ,KAAK,EAAEZ,SAAS,CAACqB,OAAO,CAACrB,SAAS,CAACsB,KAAK,CAAC;MACvCH,IAAI,EAAEnB,SAAS,CAACuB,MAAM;MACtBV,KAAK,EAAEb,SAAS,CAACwB;IACnB,CAAC,CAAC;EACJ,CAAC,CAAC;AACJ,CAAC;AACDrB,UAAU,CAACsB,YAAY,GAAG;EACxBpB,iBAAiB,EAAE;AACrB,CAAC;AAED,eAAeF,UAAU","ignoreList":[]}

package/dist/studio-header/NavDropdownMenu.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Dropdown, DropdownButton } from '@openedx/paragon';
+import { Link } from 'react-router-dom';
+var NavDropdownMenu = function NavDropdownMenu(_ref) {
+  var id = _ref.id,
+    buttonTitle = _ref.buttonTitle,
+    items = _ref.items;
+  return /*#__PURE__*/React.createElement(DropdownButton, {
+    id: id,
+    title: buttonTitle,
+    variant: "outline-primary",
+    className: "mr-2"
+  }, items.map(function (item) {
+    return /*#__PURE__*/React.createElement(Dropdown.Item, {
+      as: Link,
+      key: "".concat(item.title, "-dropdown-item"),
+      to: item.href,
+      className: "small"
+    }, item.title);
+  }));
+};
+NavDropdownMenu.propTypes = {
+  id: PropTypes.string.isRequired,
+  buttonTitle: PropTypes.node.isRequired,
+  items: PropTypes.arrayOf(PropTypes.shape({
+    href: PropTypes.string.isRequired,
+    title: PropTypes.node.isRequired
+  })).isRequired
+};
+export default NavDropdownMenu;
+//# sourceMappingURL=NavDropdownMenu.js.map

package/dist/studio-header/NavDropdownMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavDropdownMenu.js","names":["React","PropTypes","Dropdown","DropdownButton","Link","NavDropdownMenu","_ref","id","buttonTitle","items","createElement","title","variant","className","map","item","Item","as","key","concat","to","href","propTypes","string","isRequired","node","arrayOf","shape"],"sources":["../../src/studio-header/NavDropdownMenu.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  Dropdown,\n  DropdownButton,\n} from '@openedx/paragon';\nimport { Link } from 'react-router-dom';\n\nconst NavDropdownMenu = ({\n  id,\n  buttonTitle,\n  items,\n}) => (\n  <DropdownButton\n    id={id}\n    title={buttonTitle}\n    variant=\"outline-primary\"\n    className=\"mr-2\"\n  >\n    {items.map(item => (\n      <Dropdown.Item\n        as={Link}\n        key={`${item.title}-dropdown-item`}\n        to={item.href}\n        className=\"small\"\n      >\n        {item.title}\n      </Dropdown.Item>\n    ))}\n  </DropdownButton>\n);\n\nNavDropdownMenu.propTypes = {\n  id: PropTypes.string.isRequired,\n  buttonTitle: PropTypes.node.isRequired,\n  items: PropTypes.arrayOf(PropTypes.shape({\n    href: PropTypes.string.isRequired,\n    title: PropTypes.node.isRequired,\n  })).isRequired,\n};\n\nexport default NavDropdownMenu;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,SACEC,QAAQ,EACRC,cAAc,QACT,kBAAkB;AACzB,SAASC,IAAI,QAAQ,kBAAkB;AAEvC,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CAAAC,IAAA;EAAA,IACnBC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IACFC,WAAW,GAAAF,IAAA,CAAXE,WAAW;IACXC,KAAK,GAAAH,IAAA,CAALG,KAAK;EAAA,oBAELT,KAAA,CAAAU,aAAA,CAACP,cAAc;IACbI,EAAE,EAAEA,EAAG;IACPI,KAAK,EAAEH,WAAY;IACnBI,OAAO,EAAC,iBAAiB;IACzBC,SAAS,EAAC;EAAM,GAEfJ,KAAK,CAACK,GAAG,CAAC,UAAAC,IAAI;IAAA,oBACbf,KAAA,CAAAU,aAAA,CAACR,QAAQ,CAACc,IAAI;MACZC,EAAE,EAAEb,IAAK;MACTc,GAAG,KAAAC,MAAA,CAAKJ,IAAI,CAACJ,KAAK,mBAAiB;MACnCS,EAAE,EAAEL,IAAI,CAACM,IAAK;MACdR,SAAS,EAAC;IAAO,GAEhBE,IAAI,CAACJ,KACO,CAAC;EAAA,CACjB,CACa,CAAC;AAAA,CAClB;AAEDN,eAAe,CAACiB,SAAS,GAAG;EAC1Bf,EAAE,EAAEN,SAAS,CAACsB,MAAM,CAACC,UAAU;EAC/BhB,WAAW,EAAEP,SAAS,CAACwB,IAAI,CAACD,UAAU;EACtCf,KAAK,EAAER,SAAS,CAACyB,OAAO,CAACzB,SAAS,CAAC0B,KAAK,CAAC;IACvCN,IAAI,EAAEpB,SAAS,CAACsB,MAAM,CAACC,UAAU;IACjCb,KAAK,EAAEV,SAAS,CAACwB,IAAI,CAACD;EACxB,CAAC,CAAC,CAAC,CAACA;AACN,CAAC;AAED,eAAenB,eAAe","ignoreList":[]}