@nauedu/frontend-component-header 18.2.1 → 20.0.0

package/dist/plugin-slots/MobileMainMenuSlot/README.md

@@ -0,0 +1,136 @@
+# Mobile Main Menu Slot
+
+### Slot ID: `org.openedx.frontend.layout.header_mobile_main_menu.v1`
+
+### Slot ID Aliases
+* `mobile_main_menu_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the mobile main menu.
+
+## Examples
+
+### Modify Items
+
+The following `env.config.jsx` will modify the items in the mobile main menu.
+
+![Screenshot of modified items](./images/mobile_main_menu_modify_items.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const modifyMainMenu = ( widget ) => {
+  widget.content.menu = [
+    {
+      type: 'item',
+      href: 'https://openedx.org/',
+      content: 'openedx.org',
+    },
+    {
+      type: 'item',
+      href: 'https://docs.openedx.org/en/latest/',
+      content: 'Documentation',
+    },
+    {
+      type: 'item',
+      href: 'https://discuss.openedx.org/',
+      content: 'Forums',
+    }
+  ];
+  return widget;
+};
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_mobile_main_menu.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Modify,
+          widgetId: 'default_contents',
+          fn: modifyMainMenu,
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Replace Menu with Custom Component
+
+The following `env.config.jsx` will replace the mobile main menu entirely (in this case with a centered 🗺️ `h1`)
+
+![Screenshot of custom component](./images/mobile_main_menu_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_mobile_main_menu.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_main_menu_component',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🗺️</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Add Custom Components before and after Menu
+
+The following `env.config.jsx` will place custom components before and after the mobile main menu  (in this case centered `h1`s with 🌞 and 🌚).
+
+![Screenshot of custom components before and after](./images/mobile_main_menu_custom_components_before_after.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_mobile_main_menu.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_before_main_menu_component',
+            type: DIRECT_PLUGIN,
+            priority: 10,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🌞</h1>
+            ),
+          },
+        },
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_after_main_menu_component',
+            type: DIRECT_PLUGIN,
+            priority: 90,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🌚</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import MobileHeaderMainMenu, { mobileHeaderMainMenuDataShape } from '../../mobile-header/MobileHeaderMainMenu';
+var MobileMainMenuSlot = function MobileMainMenuSlot(_ref) {
+  var menu = _ref.menu;
+  return /*#__PURE__*/React.createElement(PluginSlot, {
+    id: "org.openedx.frontend.layout.header_mobile_main_menu.v1",
+    idAliases: ['mobile_main_menu_slot'],
+    slotOptions: {
+      mergeProps: true
+    }
+  }, /*#__PURE__*/React.createElement(MobileHeaderMainMenu, {
+    menu: menu
+  }));
+};
+MobileMainMenuSlot.propTypes = {
+  menu: mobileHeaderMainMenuDataShape
+};
+export default MobileMainMenuSlot;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","PluginSlot","MobileHeaderMainMenu","mobileHeaderMainMenuDataShape","MobileMainMenuSlot","_ref","menu","createElement","id","idAliases","slotOptions","mergeProps","propTypes"],"sources":["../../../src/plugin-slots/MobileMainMenuSlot/index.jsx"],"sourcesContent":["import React from 'react';\nimport { PluginSlot } from '@openedx/frontend-plugin-framework';\nimport MobileHeaderMainMenu, { mobileHeaderMainMenuDataShape } from '../../mobile-header/MobileHeaderMainMenu';\n\nconst MobileMainMenuSlot = ({\n  menu,\n}) => (\n  <PluginSlot\n    id=\"org.openedx.frontend.layout.header_mobile_main_menu.v1\"\n    idAliases={['mobile_main_menu_slot']}\n    slotOptions={{\n      mergeProps: true,\n    }}\n  >\n    <MobileHeaderMainMenu menu={menu} />\n  </PluginSlot>\n);\n\nMobileMainMenuSlot.propTypes = {\n  menu: mobileHeaderMainMenuDataShape,\n};\n\nexport default MobileMainMenuSlot;\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,wDAAwD;IAC3DC,SAAS,EAAE,CAAC,uBAAuB,CAAE;IACrCC,WAAW,EAAE;MACXC,UAAU,EAAE;IACd;EAAE,gBAEFX,KAAA,CAAAO,aAAA,CAACL,oBAAoB;IAACI,IAAI,EAAEA;EAAK,CAAE,CACzB,CAAC;AAAA,CACd;AAEDF,kBAAkB,CAACQ,SAAS,GAAG;EAC7BN,IAAI,EAAEH;AACR,CAAC;AAED,eAAeC,kBAAkB","ignoreList":[]}

package/dist/plugin-slots/MobileUserMenuSlot/README.md

@@ -0,0 +1,144 @@
+# Mobile User Menu Slot
+
+### Slot ID: `org.openedx.frontend.layout.header_mobile_user_menu.v1`
+
+### Slot ID Aliases
+* `mobile_user_menu_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the mobile user menu.
+
+## Examples
+
+### Modify Items
+
+The following `env.config.jsx` will modify the items in the mobile user menu.
+
+![Screenshot of modified items](./images/mobile_user_menu_modify_items.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const modifyUserMenu = ( widget ) => {
+  widget.content.menu = [
+    {
+      items: [
+        {
+          type: 'item',
+          href: 'https://openedx.org/',
+          content: 'openedx.org',
+        },
+        {
+          type: 'item',
+          href: 'https://docs.openedx.org/en/latest/',
+          content: 'Documentation',
+        },
+      ]
+    },
+    {
+      items: [
+        {
+          type: 'item',
+          href: 'https://discuss.openedx.org/',
+          content: 'Forums',
+        }
+      ]
+    }
+  ];
+  return widget;
+};
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_mobile_user_menu.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Modify,
+          widgetId: 'default_contents',
+          fn: modifyUserMenu,
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Replace Menu with Custom Component
+
+The following `env.config.jsx` will replace the mobile main user entirely (in this case with a centered 🗺️ `h1`)
+
+![Screenshot of custom component](./images/mobile_user_menu_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_mobile_user_menu.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_user_menu_component',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🗺️</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Add Custom Components before and after Menu
+
+The following `env.config.jsx` will place custom components before and after the mobile user menu (in this case centered `h1`s with 🌞 and 🌚).
+
+![Screenshot of custom components before and after](./images/mobile_user_menu_custom_components_before_after.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_mobile_user_menu.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_before_user_menu_component',
+            type: DIRECT_PLUGIN,
+            priority: 10,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🌞</h1>
+            ),
+          },
+        },
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_after_user_menu_component',
+            type: DIRECT_PLUGIN,
+            priority: 90,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🌚</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```

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

@@ -0,0 +1,20 @@
+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: "org.openedx.frontend.layout.header_mobile_user_menu.v1",
+    idAliases: ['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","idAliases","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=\"org.openedx.frontend.layout.header_mobile_user_menu.v1\"\n    idAliases={['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,wDAAwD;IAC3DC,SAAS,EAAE,CAAC,uBAAuB,CAAE;IACrCC,WAAW,EAAE;MACXC,UAAU,EAAE;IACd;EAAE,gBAEFX,KAAA,CAAAO,aAAA,CAACL,oBAAoB;IAACI,IAAI,EAAEA;EAAK,CAAE,CACzB,CAAC;AAAA,CACd;AAEDF,kBAAkB,CAACQ,SAAS,GAAG;EAC7BN,IAAI,EAAEH;AACR,CAAC;AAED,eAAeC,kBAAkB","ignoreList":[]}

package/dist/plugin-slots/MobileUserMenuToggleSlot/README.md

@@ -0,0 +1,74 @@
+# Mobile User Menu Toggle Slot
+
+### Slot ID: `org.openedx.frontend.layout.header_mobile_user_menu_trigger.v1`
+
+## Description
+
+This slot is used to replace/modify/hide the contents of the user menu toggle button on mobile screens.
+
+## Examples
+
+### Modify Avatar
+
+The following `env.config.jsx` will modify the icon for the user menu toggle button on mobile.
+
+![Screenshot of modified items](./images/mobile_user_menu_toggle_modified_items.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const modifyUserMenuToggle = ( widget ) => {
+  // Shows a dummy image with the resolution marker '30x30'.
+  widget.content.avatar = "https://dummyimage.com/30x30"
+  return widget;
+};
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_mobile_user_menu_trigger.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Modify,
+          widgetId: 'default_contents',
+          fn: modifyUserMenuToggle,
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Replace Menu toggle contents with Custom Component
+
+The following `env.config.jsx` will replace the contents of the user menu toggle button's contents entirely (in this case with an emoji).
+
+![Screenshot of replaced with custom component](./images/mobile_user_menu_toggle_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_mobile_user_menu_trigger.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_mobile_user_menu_toggle',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <span>🦊</span>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import MobileUserMenuToggle, { MobileUserMenuTogglePropTypes } from '../../mobile-header/MobileUserMenuToggle';
+var MobileUserMenuToggleSlot = function MobileUserMenuToggleSlot(_ref) {
+  var avatar = _ref.avatar,
+    label = _ref.label;
+  return /*#__PURE__*/React.createElement(PluginSlot, {
+    id: "org.openedx.frontend.layout.header_mobile_user_menu_trigger.v1",
+    slotOptions: {
+      mergeProps: true
+    }
+  }, /*#__PURE__*/React.createElement(MobileUserMenuToggle, {
+    avatar: avatar,
+    label: label
+  }));
+};
+MobileUserMenuToggleSlot.propTypes = MobileUserMenuTogglePropTypes;
+export default MobileUserMenuToggleSlot;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","PluginSlot","MobileUserMenuToggle","MobileUserMenuTogglePropTypes","MobileUserMenuToggleSlot","_ref","avatar","label","createElement","id","slotOptions","mergeProps","propTypes"],"sources":["../../../src/plugin-slots/MobileUserMenuToggleSlot/index.jsx"],"sourcesContent":["import React from 'react';\nimport { PluginSlot } from '@openedx/frontend-plugin-framework';\nimport MobileUserMenuToggle, {\n  MobileUserMenuTogglePropTypes,\n} from '../../mobile-header/MobileUserMenuToggle';\n\nconst MobileUserMenuToggleSlot = ({\n  avatar,\n  label,\n}) => (\n  <PluginSlot\n    id=\"org.openedx.frontend.layout.header_mobile_user_menu_trigger.v1\"\n    slotOptions={{\n      mergeProps: true,\n    }}\n  >\n    <MobileUserMenuToggle avatar={avatar} label={label} />\n  </PluginSlot>\n);\n\nMobileUserMenuToggleSlot.propTypes = MobileUserMenuTogglePropTypes;\n\nexport default MobileUserMenuToggleSlot;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,oCAAoC;AAC/D,OAAOC,oBAAoB,IACzBC,6BAA6B,QACxB,0CAA0C;AAEjD,IAAMC,wBAAwB,GAAG,SAA3BA,wBAAwBA,CAAAC,IAAA;EAAA,IAC5BC,MAAM,GAAAD,IAAA,CAANC,MAAM;IACNC,KAAK,GAAAF,IAAA,CAALE,KAAK;EAAA,oBAELP,KAAA,CAAAQ,aAAA,CAACP,UAAU;IACTQ,EAAE,EAAC,gEAAgE;IACnEC,WAAW,EAAE;MACXC,UAAU,EAAE;IACd;EAAE,gBAEFX,KAAA,CAAAQ,aAAA,CAACN,oBAAoB;IAACI,MAAM,EAAEA,MAAO;IAACC,KAAK,EAAEA;EAAM,CAAE,CAC3C,CAAC;AAAA,CACd;AAEDH,wBAAwB,CAACQ,SAAS,GAAGT,6BAA6B;AAElE,eAAeC,wBAAwB","ignoreList":[]}

package/dist/plugin-slots/README.md

@@ -0,0 +1,26 @@
+# `frontend-component-header` Plugin Slots
+
+### Shared
+* [`org.openedx.frontend.layout.header_logo.v1`](./LogoSlot/)
+
+### Desktop Header
+* [`org.openedx.frontend.layout.header_desktop.v1`](./DesktopHeaderSlot/)
+* [`org.openedx.frontend.layout.header_desktop_logged_out_items.v1`](./DesktopLoggedOutItemsSlot/)
+* [`org.openedx.frontend.layout.header_desktop_main_menu.v1`](./DesktopMainMenuSlot/)
+* [`org.openedx.frontend.layout.header_desktop_secondary_menu.v1`](./DesktopSecondaryMenuSlot/)
+* [`org.openedx.frontend.layout.header_desktop_user_menu.v1`](./DesktopUserMenuSlot/)
+* [`org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1`](./DesktopUserMenuToggleSlot/)
+
+### Learning Header
+* [`org.openedx.frontend.layout.header_learning_course_info.v1`](./CourseInfoSlot/)
+* [`org.openedx.frontend.layout.header_learning_help.v1`](./LearningHelpSlot/)
+* [`org.openedx.frontend.layout.header_learning_logged_out_items.v1`](./LearningLoggedOutItemsSlot/)
+* [`org.openedx.frontend.layout.header_learning_user_menu.v1`](./LearningUserMenuSlot/)
+* [`org.openedx.frontend.layout.header_learning_user_menu.v1`](./LearningUserMenuSlot/)
+
+### Mobile Header
+* [`org.openedx.frontend.layout.header_mobile.v1`](./MobileHeaderSlot/)
+* [`org.openedx.frontend.layout.header_mobile_logged_out_items.v1`](./MobileLoggedOutItemsSlot/)
+* [`org.openedx.frontend.layout.header_mobile_main_menu.v1`](./MobileMainMenuSlot/)
+* [`org.openedx.frontend.layout.header_mobile_user_menu.v1`](./MobileUserMenuSlot/)
+* [`org.openedx.frontend.layout.header_mobile_user_menu_trigger.v1`](./MobileUserMenuToggleSlot/)

package/dist/setupTest.js

@@ -4,8 +4,6 @@ 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';

package/dist/studio-header/BrandNav.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { MemoryRouter } from 'react-router-dom';
+
+import BrandNav from './BrandNav';
+
+const studioBaseUrl = 'https://example.com/';
+const logo = 'logo.png';
+const logoAltText = 'Example Logo';
+
+const RootWrapper = () => (
+  <MemoryRouter>
+    <BrandNav
+      studioBaseUrl={studioBaseUrl}
+      logo={logo}
+      logoAltText={logoAltText}
+    />
+  </MemoryRouter>
+);
+
+describe('BrandNav Component', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the logo with the correct alt text', () => {
+    render(<RootWrapper />);
+
+    const img = screen.getByAltText(logoAltText);
+    expect(img).toHaveAttribute('src', logo);
+  });
+
+  it('displays a link that navigates to studioBaseUrl', () => {
+    render(<RootWrapper />);
+
+    const link = screen.getByRole('link') as HTMLAnchorElement;
+    expect(link.href).toBe(studioBaseUrl);
+  });
+});

package/dist/studio-header/BrandNav.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+const BrandNav = ({
+  studioBaseUrl,
+  logo,
+  logoAltText,
+}) => (
+  <Link to={studioBaseUrl}>
+    <img
+      src={logo}
+      alt={logoAltText}
+      className="d-block logo"
+    />
+  </Link>
+);
+
+BrandNav.propTypes = {
+  studioBaseUrl: PropTypes.string.isRequired,
+  logo: PropTypes.string.isRequired,
+  logoAltText: PropTypes.string.isRequired,
+};
+
+export default BrandNav;

package/dist/studio-header/CourseLockUp.test.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { MemoryRouter } from 'react-router-dom';
+
+import CourseLockUp from './CourseLockUp';
+import messages from './messages';
+
+const mockProps = {
+  number: '101',
+  org: 'EDX',
+  title: 'Course Title',
+  outlineLink: 'https://example.com/course-outline',
+};
+
+const RootWrapper = (props) => (
+  <MemoryRouter>
+    <IntlProvider locale="en" messages={{}}>
+      <CourseLockUp {...props} />
+    </IntlProvider>
+  </MemoryRouter>
+);
+
+describe('CourseLockUp Component', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders course org, number, and title', () => {
+    render(<RootWrapper {...mockProps} />);
+
+    const courseOrgNumber = screen.getByTestId('course-org-number');
+    const courseTitle = screen.getByTestId('course-title');
+
+    expect(courseOrgNumber).toBeInTheDocument();
+    expect(courseOrgNumber).toHaveTextContent(`${mockProps.org} ${mockProps.number}`);
+    expect(courseTitle).toBeInTheDocument();
+    expect(courseTitle).toHaveTextContent(mockProps.title);
+  });
+
+  it('renders the link with correct aria-label', () => {
+    render(<RootWrapper {...mockProps} />);
+
+    const link = screen.getByTestId('course-lock-up-block');
+    expect(link).toHaveAttribute(
+      'aria-label',
+      messages['header.label.courseOutline'].defaultMessage,
+    );
+  });
+
+  it('navigates to an absolute URL when clicked', () => {
+    render(<RootWrapper {...mockProps} />);
+
+    // FIXME: don't use testId - https://testing-library.com/docs/queries/about#priority
+    const link = screen.getByTestId('course-lock-up-block') as HTMLAnchorElement;
+    expect(link.href).toBe(mockProps.outlineLink);
+  });
+});

package/dist/studio-header/CourseLockUp.tsx

@@ -0,0 +1,56 @@
+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';
+
+const CourseLockUp = ({
+  outlineLink,
+  org,
+  number,
+  title,
+  // injected
+  intl,
+}) => (
+  <OverlayTrigger
+    placement="bottom"
+    overlay={(
+      <Tooltip id="course-lock-up">
+        {title}
+      </Tooltip>
+    )}
+  >
+    <Link
+      className="course-title-lockup mr-2"
+      to={outlineLink}
+      aria-label={intl.formatMessage(messages['header.label.courseOutline'])}
+      data-testid="course-lock-up-block"
+    >
+      <span className="d-block small m-0 text-gray-800" data-testid="course-org-number">{org} {number}</span>
+      <span className="d-block m-0 font-weight-bold text-gray-800" data-testid="course-title">{title}</span>
+    </Link>
+  </OverlayTrigger>
+);
+
+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);