feat: Moves search button into a slot (#644 )

Signed-off-by: Farhaan Bukhsh <farhaan@opencraft.com>
chore(deps): update dependency @openedx/paragon to v23.15.0 (#650 )
2025-10-27 10:51:45 -04:00 · 2025-10-27 04:33:28 +00:00 · 2025-10-27 04:33:12 +00:00 · 2025-10-20 05:52:53 +00:00 · 2025-10-14 09:43:33 -07:00 · 2025-10-13 04:27:12 +00:00
143 changed files with 18960 additions and 6844 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -11,21 +11,21 @@ jobs:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
-      uses: actions/checkout@v4
+      uses: actions/checkout@v5
      with:
        fetch-depth: 0
-    - name: Setup Nodejs Env
-      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
    - name: Setup Nodejs
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v5
      with:
-        node-version: ${{ env.NODE_VER }}
+        node-version-file: '.nvmrc'
    - name: Install dependencies
      run: npm ci
    - name: Validate package-lock.json changes
      run: make validate-no-uncommitted-package-lock-changes
    - name: Lint
      run: npm run lint
+    - name: Type check
+      run: npm run types
    - name: Test
      run: npm run test
    - name: Build
--- a/.github/workflows/lockfileversion-check.yml
+++ b/.github/workflows/lockfileversion-check.yml
@@ -10,4 +10,4 @@ on:

 jobs:
  version-check:
-    uses: openedx/.github/.github/workflows/lockfile-check.yml@master
+    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -10,13 +10,13 @@ jobs:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
-      uses: actions/checkout@v4
+      uses: actions/checkout@v5
      with:
        fetch-depth: 0
    - name: Setup Nodejs Env
      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
    - name: Setup Node.js
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v5
      with:
        node-version: ${{ env.NODE_VER }}
    - name: Install dependencies
@@ -25,6 +25,8 @@ jobs:
      run: make validate-no-uncommitted-package-lock-changes
    - name: Lint
      run: npm run lint
+    - name: Type check
+      run: npm run types
    - name: Test
      run: npm run test
    - name: i18n_extract
--- a/.gitignore
+++ b/.gitignore
@@ -9,4 +9,4 @@ module.config.js
 .idea/

 .vscode
-src/i18n/messages
+src/i18n/messages
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-18
+24
--- a/README.rst
+++ b/README.rst
@@ -35,6 +35,7 @@ Requirements

 This component uses ``@edx/frontend-platform`` services such as i18n, analytics, configuration, and the ``AppContext`` React component, and expects that it has been loaded into a micro-frontend that has been properly initialized via ``@edx/frontend-platform``'s ``initialize`` function. `Please visit the frontend template application to see an example. <https://github.com/openedx/frontend-template-application/blob/master/src/index.jsx>`_

+As of version 7.x, consuming applications must support typescript.

 Environment Variables
 ====================
@@ -71,9 +72,9 @@ Cloning and Startup

    ``git clone https://github.com/openedx/frontend-component-header.git``

-  2. Use node v18.x.
+  2. Use node v24.x.

-    The current version of the micro-frontend build scripts support node 18.
+    The current version of the micro-frontend build scripts support node 24.
    Using other major versions of node *may* work, but this is unsupported.  For
    convenience, this repository includes an .nvmrc file to help in setting the
    correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
@@ -95,6 +96,12 @@ This library has the following exports:
 * ``messages``: Internationalization messages suitable for use with `@edx/frontend-platform/i18n <https://edx.github.io/frontend-platform/module-Internationalization.html>`_
 * ``dist/index.scss``: A SASS file which contains style information for the component.  It should be imported into the micro-frontend's own SCSS file.

+Plugins
+-------
+This can be customized using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
+
+The parts of this that can be customized in that manner are documented `here </src/plugin-slots>`_.
+
 Examples
 ========

@@ -184,4 +191,4 @@ Please do not report security issues in public. Please email security@openedx.or
 .. |license| image:: https://img.shields.io/npm/l/@edx/frontend-component-header.svg
   :target: @edx/frontend-component-header
 .. |semantic-release| image:: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
-   :target: https://github.com/semantic-release/semantic-release
+   :target: https://github.com/semantic-release/semantic-release
--- a/catalog-info.yaml
+++ b/catalog-info.yaml
@@ -0,0 +1,14 @@
+# This file records information about this repo. Its use is described in OEP-55:
+# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
+
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: "frontend-component-header"
+  description: "A generic header for the Open edX micro-frontend applications."
+  annotations:
+    openedx.org/arch-interest-groups: ""
+spec:
+  owner: group:committers-frontend
+  type: "library"
+  lifecycle: "production"
--- a/example/index.js
+++ b/example/index.js
@@ -1,5 +1,3 @@
-import 'babel-polyfill';
-
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { initialize, getConfig, subscribe, APP_READY } from '@edx/frontend-platform';
--- a/example/index.scss
+++ b/example/index.scss
@@ -1,6 +1,4 @@
-@import "@edx/brand/paragon/fonts";
-@import "@edx/brand/paragon/variables";
-@import "@openedx/paragon/scss/core/core";
-@import "@edx/brand/paragon/overrides";
+@use "@openedx/paragon/dist/core.min.css" as paragonCore;
+@use "@openedx/paragon/dist/light.min.css" as paragonLight;

@import "@edx/frontend-component-header/index";
--- a/openedx.yaml
+++ b/openedx.yaml
@@ -1,8 +0,0 @@
-# openedx.yaml
-
---
-owner: edx/fedx-team
-tags:
-  - library
-  - component
-  - react
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -10,18 +10,16 @@
    "build": "make build",
    "i18n_extract": "fedx-scripts formatjs extract",
    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
+    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
    "snapshot": "fedx-scripts jest --updateSnapshot",
    "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "fedx-scripts jest --coverage"
+    "test": "fedx-scripts jest --coverage",
+    "test:dev": "fedx-scripts jest --watchAll",
+    "types": "tsc --noEmit"
  },
  "files": [
    "/dist"
  ],
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint"
-    }
-  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/openedx/frontend-component-header.git"
@@ -35,42 +33,41 @@
  "devDependencies": {
    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
    "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-platform": "8.1.1",
-    "@edx/reactifex": "^2.1.1",
-    "@openedx/frontend-build": "14.1.2",
-    "@openedx/paragon": "22.7.0",
-    "@testing-library/dom": "10.4.0",
+    "@edx/frontend-platform": "^8.3.1",
+    "@openedx/frontend-build": "^14.3.2",
+    "@openedx/paragon": "^23.0.0",
+    "@testing-library/dom": "^10.4.0",
    "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/react": "10.4.9",
-    "husky": "8.0.3",
-    "jest": "29.7.0",
-    "jest-chain": "1.1.6",
+    "@testing-library/react": "^16.2.0",
+    "jest": "30.2.0",
+    "jest-environment-jsdom": "^30.0.0",
    "prop-types": "15.8.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-redux": "7.2.9",
-    "react-router-dom": "6.26.1",
-    "react-test-renderer": "17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-redux": "^8.1.1",
+    "react-router-dom": "6.30.1",
+    "react-test-renderer": "^18.3.1",
    "redux": "4.2.1",
-    "redux-saga": "1.3.0"
+    "redux-saga": "1.3.0",
+    "ts-jest": "^29.4.4"
  },
  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.6.0",
-    "@fortawesome/free-brands-svg-icons": "6.6.0",
-    "@fortawesome/free-regular-svg-icons": "6.6.0",
-    "@fortawesome/free-solid-svg-icons": "6.6.0",
+    "@fortawesome/fontawesome-svg-core": "6.7.2",
+    "@fortawesome/free-brands-svg-icons": "6.7.2",
+    "@fortawesome/free-regular-svg-icons": "6.7.2",
+    "@fortawesome/free-solid-svg-icons": "6.7.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
-    "axios-mock-adapter": "1.22.0",
-    "babel-polyfill": "6.26.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "@openedx/frontend-plugin-framework": "^1.7.0",
+    "classnames": "^2.5.1",
    "react-responsive": "8.2.0",
    "react-transition-group": "4.4.5"
  },
  "peerDependencies": {
    "@edx/frontend-platform": "^7.0.0 || ^8.0.0",
-    "@openedx/paragon": ">= 21.5.7 < 23.0.0",
+    "@openedx/paragon": ">= 22.0.0 < 24.0.0",
    "prop-types": "^15.5.10",
-    "react": "^16.9.0 || ^17.0.0",
-    "react-dom": "^16.9.0 || ^17.0.0"
+    "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0",
+    "react-router-dom": "^6.14.2"
  }
 }
--- a/src/DesktopHeader.jsx
+++ b/src/DesktopHeader.jsx
@@ -1,222 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { getConfig } from '@edx/frontend-platform';
-
-// Local Components
-import { Menu, MenuTrigger, MenuContent } from './Menu';
-import Avatar from './Avatar';
-import { LinkedLogo, Logo } from './Logo';
-
-// i18n
-import messages from './Header.messages';
-
-// Assets
-import { CaretIcon } from './Icons';
-
-class DesktopHeader extends React.Component {
-  constructor(props) { // eslint-disable-line no-useless-constructor
-    super(props);
-  }
-
-  renderMenu(menu) {
-    // Nodes are accepted as a prop
-    if (!Array.isArray(menu)) {
-      return menu;
-    }
-
-    return menu.map((menuItem) => {
-      const {
-        type,
-        href,
-        content,
-        submenuContent,
-        disabled,
-        isActive,
-        onClick,
-      } = menuItem;
-
-      if (type === 'item') {
-        return (
-          <a
-            key={`${type}-${content}`}
-            className={`nav-link${disabled ? ' disabled' : ''}${isActive ? ' active' : ''}`}
-            href={href}
-            onClick={onClick || null}
-          >
-            {content}
-          </a>
-        );
-      }
-
-      return (
-        <Menu key={`${type}-${content}`} tag="div" className="nav-item" respondToPointerEvents>
-          <MenuTrigger onClick={onClick || null} tag="a" className="nav-link d-inline-flex align-items-center" href={href}>
-            {content} <CaretIcon role="img" aria-hidden focusable="false" />
-          </MenuTrigger>
-          <MenuContent className="pin-left pin-right shadow py-2">
-            {submenuContent}
-          </MenuContent>
-        </Menu>
-      );
-    });
-  }
-
-  renderMainMenu() {
-    const { mainMenu } = this.props;
-    return this.renderMenu(mainMenu);
-  }
-
-  renderSecondaryMenu() {
-    const { secondaryMenu } = this.props;
-    return this.renderMenu(secondaryMenu);
-  }
-
-  renderUserMenu() {
-    const {
-      userMenu,
-      avatar,
-      username,
-      intl,
-    } = this.props;
-
-    return (
-      <Menu transitionClassName="menu-dropdown" transitionTimeout={250}>
-        <MenuTrigger
-          tag="button"
-          aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { username })}
-          className="btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
-        >
-          <Avatar size="1.5em" src={avatar} alt="" className="mr-2" />
-          {username} <CaretIcon role="img" aria-hidden focusable="false" />
-        </MenuTrigger>
-        <MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
-          {userMenu.map((group, index) => (
-            // eslint-disable-next-line react/jsx-no-comment-textnodes,react/no-array-index-key
-            <React.Fragment key={index}>
-              {group.heading && <div className="dropdown-header" role="heading" aria-level="1">{group.heading}</div>}
-              {group.items.map(({
-                type, content, href, disabled, isActive, onClick,
-              }) => (
-                <a
-                  className={`dropdown-${type}${isActive ? ' active' : ''}${disabled ? ' disabled' : ''}`}
-                  key={`${type}-${content}`}
-                  href={href}
-                  onClick={onClick || null}
-                >
-                  {content}
-                </a>
-              ))}
-              {index < userMenu.length - 1 && <div className="dropdown-divider" role="separator" />}
-            </React.Fragment>
-          ))}
-        </MenuContent>
-      </Menu>
-    );
-  }
-
-  renderLoggedOutItems() {
-    const { loggedOutItems } = this.props;
-
-    return loggedOutItems.map((item, i, arr) => (
-      <a
-        key={`${item.type}-${item.content}`}
-        className={i < arr.length - 1 ? 'btn mr-2 btn-link' : 'btn mr-2 btn-outline-primary'}
-        href={item.href}
-      >
-        {item.content}
-      </a>
-    ));
-  }
-
-  render() {
-    const {
-      logo,
-      logoAltText,
-      logoDestination,
-      loggedIn,
-      intl,
-    } = this.props;
-    const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
-    const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'mw-100' : null;
-
-    return (
-      <header className="site-header-desktop">
-        <a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
-        <div className={`container-fluid ${logoClasses}`}>
-          <div className="nav-container position-relative d-flex align-items-center">
-            {logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} />}
-            <nav
-              aria-label={intl.formatMessage(messages['header.label.main.nav'])}
-              className="nav main-nav"
-            >
-              {this.renderMainMenu()}
-            </nav>
-            <nav
-              aria-label={intl.formatMessage(messages['header.label.secondary.nav'])}
-              className="nav secondary-menu-container align-items-center ml-auto"
-            >
-              {loggedIn
-                ? (
-                  <>
-                    {this.renderSecondaryMenu()}
-                    {this.renderUserMenu()}
-                  </>
-                ) : this.renderLoggedOutItems()}
-            </nav>
-          </div>
-        </div>
-      </header>
-    );
-  }
-}
-
-DesktopHeader.propTypes = {
-  mainMenu: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.array,
-  ]),
-  secondaryMenu: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.array,
-  ]),
-  userMenu: PropTypes.arrayOf(PropTypes.shape({
-    heading: PropTypes.string,
-    items: PropTypes.arrayOf(PropTypes.shape({
-      type: PropTypes.oneOf(['item', 'menu']),
-      href: PropTypes.string,
-      content: PropTypes.string,
-      isActive: PropTypes.bool,
-      onClick: PropTypes.func,
-    })),
-  })),
-  loggedOutItems: PropTypes.arrayOf(PropTypes.shape({
-    type: PropTypes.oneOf(['item', 'menu']),
-    href: PropTypes.string,
-    content: PropTypes.string,
-  })),
-  logo: PropTypes.string,
-  logoAltText: PropTypes.string,
-  logoDestination: PropTypes.string,
-  avatar: PropTypes.string,
-  username: PropTypes.string,
-  loggedIn: PropTypes.bool,
-
-  // i18n
-  intl: intlShape.isRequired,
-};
-
-DesktopHeader.defaultProps = {
-  mainMenu: [],
-  secondaryMenu: [],
-  userMenu: [],
-  loggedOutItems: [],
-  logo: null,
-  logoAltText: null,
-  logoDestination: null,
-  avatar: null,
-  username: null,
-  loggedIn: false,
-};
-
-export default injectIntl(DesktopHeader);
--- a/src/Header.jsx
+++ b/src/Header.jsx
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import Responsive from 'react-responsive';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
 import {
  APP_CONFIG_INITIALIZED,
@@ -11,8 +11,8 @@ import {
 } from '@edx/frontend-platform';

 import PropTypes from 'prop-types';
-import DesktopHeader from './DesktopHeader';
-import MobileHeader from './MobileHeader';
+import DesktopHeaderSlot from './plugin-slots/DesktopHeaderSlot';
+import MobileHeaderSlot from './plugin-slots/MobileHeaderSlot';

 import messages from './Header.messages';

@@ -47,9 +47,10 @@ subscribe(APP_CONFIG_INITIALIZED, () => {
 * See the documentation for the structure of user menu item.
 */
 const Header = ({
-  intl, mainMenuItems, secondaryMenuItems, userMenuItems,
+  mainMenuItems, secondaryMenuItems, userMenuItems,
 }) => {
  const { authenticatedUser, config } = useContext(AppContext);
+  const intl = useIntl();

  const defaultMainMenu = [
    {
@@ -123,10 +124,10 @@ const Header = ({
  return (
    <>
      <Responsive maxWidth={769}>
-        <MobileHeader {...props} />
+        <MobileHeaderSlot props={props} />
      </Responsive>
      <Responsive minWidth={769}>
-        <DesktopHeader {...props} />
+        <DesktopHeaderSlot props={props} />
      </Responsive>
    </>
  );
@@ -139,7 +140,6 @@ Header.defaultProps = {
 };

 Header.propTypes = {
-  intl: intlShape.isRequired,
  mainMenuItems: PropTypes.oneOfType([
    PropTypes.node,
    PropTypes.array,
@@ -159,4 +159,4 @@ Header.propTypes = {
  })),
 };

-export default injectIntl(Header);
+export default Header;
--- a/src/Header.messages.jsx
+++ b/src/Header.messages.jsx
@@ -61,11 +61,6 @@ const messages = defineMessages({
    defaultMessage: 'Studio Home',
    description: 'Link to the Studio Home',
  },
-  'header.user.menu.studio.maintenance': {
-    id: 'header.user.menu.studio.maintenance',
-    defaultMessage: 'Maintenance',
-    description: 'Link to the Studio Maintenance',
-  },
  'header.label.account.nav': {
    id: 'header.label.account.nav',
    defaultMessage: 'Account',
--- a/src/Header.test.jsx
+++ b/src/Header.test.jsx
@@ -33,6 +33,7 @@ describe('<Header />', () => {
    };
    const component = <HeaderComponent width={{ width: 1280 }} contextValue={contextValue} />;

+    // FIXME: react-test-renderer is deprecated. Convert to @testing-library/react.
    const wrapper = TestRenderer.create(component);

    expect(wrapper.toJSON()).toMatchSnapshot();
@@ -56,6 +57,7 @@ describe('<Header />', () => {
    };
    const component = <HeaderComponent width={{ width: 1280 }} contextValue={contextValue} />;

+    // FIXME: react-test-renderer is deprecated. Convert to @testing-library/react.
    const wrapper = TestRenderer.create(component);

    expect(wrapper.toJSON()).toMatchSnapshot();
@@ -74,6 +76,7 @@ describe('<Header />', () => {
    };
    const component = <HeaderComponent width={{ width: 500 }} contextValue={contextValue} />;

+    // FIXME: react-test-renderer is deprecated. Convert to @testing-library/react.
    const wrapper = TestRenderer.create(component);

    expect(wrapper.toJSON()).toMatchSnapshot();
--- a/src/Logo.jsx
+++ b/src/Logo.jsx
@@ -1,31 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-const Logo = ({ src, alt, ...attributes }) => (
-  <img src={src} alt={alt} {...attributes} />
-);
-
-Logo.propTypes = {
-  src: PropTypes.string.isRequired,
-  alt: PropTypes.string.isRequired,
-};
-
-const LinkedLogo = ({
+const Logo = ({
  href,
  src,
  alt,
  ...attributes
 }) => (
-  <a href={href} {...attributes}>
+  <a href={href} className="logo" {...attributes}>
    <img className="d-block" src={src} alt={alt} />
  </a>
 );

-LinkedLogo.propTypes = {
+export const logoDataShape = {
  href: PropTypes.string.isRequired,
  src: PropTypes.string.isRequired,
  alt: PropTypes.string.isRequired,
 };

-export { LinkedLogo, Logo };
+Logo.propTypes = logoDataShape;
+
 export default Logo;
--- a/src/Menu/menu.scss
+++ b/src/Menu/menu.scss
@@ -1,45 +1,45 @@
 .menu {
  position: relative;
 }
+
 .menu-content {
  position: absolute;
  top: 100%;
  z-index: 10;
-  background: #fff;
+  background: var(--pgn-color-white, #fff);
  min-width: 10rem;
+
  &.pin-left {
    left: 0;
  }
+
  &.pin-right {
    right: 0;
  }
 }

-
 .menu-dropdown-enter {
  opacity: 0;
  transform-origin: 75% 0;
  transform: scale3d(0.8, 0.8, 1);
 }
+
 .menu-dropdown-enter-active {
  transform-origin: 75% 0;
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale3d(1, 1, 1);
  opacity: 1;
 }
-.menu-dropdown-enter-done {
-}

 .menu-dropdown-exit {
  transform-origin: 75% 0;
  transform: scale3d(1, 1, 1);
  opacity: 1;
 }
+
 .menu-dropdown-exit-active {
  transform-origin: 75% 0;
  transform: scale3d(0.8, 0.8, 1);
  transition: all 250ms cubic-bezier(0.8, 0, 0.6, 1);
  opacity: 0;
 }
-.menu-dropdown-exit-done {
-}
--- a/src/MobileHeader.jsx
+++ b/src/MobileHeader.jsx
@@ -1,233 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { getConfig } from '@edx/frontend-platform';
-
-// Local Components
-import { Menu, MenuTrigger, MenuContent } from './Menu';
-import Avatar from './Avatar';
-import { LinkedLogo, Logo } from './Logo';
-
-// i18n
-import messages from './Header.messages';
-
-// Assets
-import { MenuIcon } from './Icons';
-
-class MobileHeader extends React.Component {
-  constructor(props) { // eslint-disable-line no-useless-constructor
-    super(props);
-  }
-
-  renderMenu(menu) {
-    // Nodes are accepted as a prop
-    if (!Array.isArray(menu)) {
-      return menu;
-    }
-
-    return menu.map((menuItem) => {
-      const {
-        type,
-        href,
-        content,
-        submenuContent,
-        disabled,
-        isActive,
-        onClick,
-      } = menuItem;
-
-      if (type === 'item') {
-        return (
-          <a
-            key={`${type}-${content}`}
-            className={`nav-link${disabled ? ' disabled' : ''}${isActive ? ' active' : ''}`}
-            href={href}
-            onClick={onClick || null}
-          >
-            {content}
-          </a>
-        );
-      }
-
-      return (
-        <Menu key={`${type}-${content}`} tag="div" className="nav-item">
-          <MenuTrigger onClick={onClick || null} tag="a" role="button" tabIndex="0" className="nav-link">
-            {content}
-          </MenuTrigger>
-          <MenuContent className="position-static pin-left pin-right py-2">
-            {submenuContent}
-          </MenuContent>
-        </Menu>
-      );
-    });
-  }
-
-  renderMainMenu() {
-    const { mainMenu } = this.props;
-    return this.renderMenu(mainMenu);
-  }
-
-  renderSecondaryMenu() {
-    const { secondaryMenu } = this.props;
-    return this.renderMenu(secondaryMenu);
-  }
-
-  renderUserMenuItems() {
-    const { userMenu } = this.props;
-
-    return userMenu.map((group) => (
-      group.items.map(({
-        type, content, href, disabled, isActive, onClick,
-      }) => (
-        <li className="nav-item" key={`${type}-${content}`}>
-          <a
-            className={`nav-link${isActive ? ' active' : ''}${disabled ? ' disabled' : ''}`}
-            href={href}
-            onClick={onClick || null}
-          >
-            {content}
-          </a>
-        </li>
-      ))
-    ));
-  }
-
-  renderLoggedOutItems() {
-    const { loggedOutItems } = this.props;
-
-    return loggedOutItems.map(({ type, href, content }, i, arr) => (
-      <li className="nav-item px-3 my-2" key={`${type}-${content}`}>
-        <a
-          className={i < arr.length - 1 ? 'btn btn-block btn-outline-primary' : 'btn btn-block btn-primary'}
-          href={href}
-        >
-          {content}
-        </a>
-      </li>
-    ));
-  }
-
-  render() {
-    const {
-      logo,
-      logoAltText,
-      logoDestination,
-      loggedIn,
-      avatar,
-      username,
-      stickyOnMobile,
-      intl,
-      mainMenu,
-      userMenu,
-      loggedOutItems,
-    } = this.props;
-    const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
-    const stickyClassName = stickyOnMobile ? 'sticky-top' : '';
-    const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'justify-content-left pl-3' : 'justify-content-center';
-
-    return (
-      <header
-        aria-label={intl.formatMessage(messages['header.label.main.header'])}
-        className={`site-header-mobile d-flex justify-content-between align-items-center shadow ${stickyClassName}`}
-      >
-        <a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
-        {mainMenu.length > 0 ? (
-          <div className="w-100 d-flex justify-content-start">
-
-            <Menu className="position-static">
-              <MenuTrigger
-                tag="button"
-                className="icon-button"
-                aria-label={intl.formatMessage(messages['header.label.main.menu'])}
-                title={intl.formatMessage(messages['header.label.main.menu'])}
-              >
-                <MenuIcon role="img" aria-hidden focusable="false" style={{ width: '1.5rem', height: '1.5rem' }} />
-              </MenuTrigger>
-              <MenuContent
-                tag="nav"
-                aria-label={intl.formatMessage(messages['header.label.main.nav'])}
-                className="nav flex-column pin-left pin-right border-top shadow py-2"
-              >
-                {this.renderMainMenu()}
-                {this.renderSecondaryMenu()}
-              </MenuContent>
-            </Menu>
-          </div>
-        ) : null}
-        <div className={`w-100 d-flex ${logoClasses}`}>
-          { logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} itemType="http://schema.org/Organization" />}
-        </div>
-        {userMenu.length > 0 || loggedOutItems.length > 0 ? (
-          <div className="w-100 d-flex justify-content-end align-items-center">
-            <Menu tag="nav" aria-label={intl.formatMessage(messages['header.label.secondary.nav'])} className="position-static">
-              <MenuTrigger
-                tag="button"
-                className="icon-button"
-                aria-label={intl.formatMessage(messages['header.label.account.menu'])}
-                title={intl.formatMessage(messages['header.label.account.menu'])}
-              >
-                <Avatar size="1.5rem" src={avatar} alt={username} />
-              </MenuTrigger>
-              <MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
-                {loggedIn ? this.renderUserMenuItems() : this.renderLoggedOutItems()}
-              </MenuContent>
-            </Menu>
-          </div>
-        ) : null}
-      </header>
-    );
-  }
-}
-
-MobileHeader.propTypes = {
-  mainMenu: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.array,
-  ]),
-  secondaryMenu: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.array,
-  ]),
-  userMenu: PropTypes.arrayOf(PropTypes.shape({
-    heading: PropTypes.string,
-    items: PropTypes.arrayOf(PropTypes.shape({
-      type: PropTypes.oneOf(['item', 'menu']),
-      href: PropTypes.string,
-      content: PropTypes.string,
-      isActive: PropTypes.bool,
-      onClick: PropTypes.func,
-    })),
-  })),
-  loggedOutItems: PropTypes.arrayOf(PropTypes.shape({
-    type: PropTypes.oneOf(['item', 'menu']),
-    href: PropTypes.string,
-    content: PropTypes.string,
-  })),
-  logo: PropTypes.string,
-  logoAltText: PropTypes.string,
-  logoDestination: PropTypes.string,
-  avatar: PropTypes.string,
-  username: PropTypes.string,
-  loggedIn: PropTypes.bool,
-  stickyOnMobile: PropTypes.bool,
-
-  // i18n
-  intl: intlShape.isRequired,
-};
-
-MobileHeader.defaultProps = {
-  mainMenu: [],
-  secondaryMenu: [],
-  userMenu: [],
-  loggedOutItems: [],
-  logo: null,
-  logoAltText: null,
-  logoDestination: null,
-  avatar: null,
-  username: null,
-  loggedIn: false,
-  stickyOnMobile: true,
-
-};
-
-export default injectIntl(MobileHeader);
--- a/src/desktop-header/DesktopHeader.jsx
+++ b/src/desktop-header/DesktopHeader.jsx
@@ -0,0 +1,131 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+
+// Local Components
+import DesktopUserMenuToggleSlot
+  from '../plugin-slots/DesktopUserMenuToggleSlot';
+import { Menu, MenuTrigger, MenuContent } from '../Menu';
+import LogoSlot from '../plugin-slots/LogoSlot';
+import DesktopLoggedOutItemsSlot from '../plugin-slots/DesktopLoggedOutItemsSlot';
+import { desktopLoggedOutItemsDataShape } from './DesktopLoggedOutItems';
+import DesktopMainMenuSlot from '../plugin-slots/DesktopMainMenuSlot';
+import { desktopHeaderMainOrSecondaryMenuDataShape } from './DesktopHeaderMainOrSecondaryMenu';
+import DesktopSecondaryMenuSlot from '../plugin-slots/DesktopSecondaryMenuSlot';
+import DesktopUserMenuSlot from '../plugin-slots/DesktopUserMenuSlot';
+import { desktopUserMenuDataShape } from './DesktopHeaderUserMenu';
+
+// i18n
+import messages from '../Header.messages';
+
+// Assets
+
+const DesktopHeader = ({
+  mainMenu,
+  secondaryMenu,
+  userMenu,
+  loggedOutItems,
+  logo,
+  logoAltText,
+  logoDestination,
+  avatar,
+  username,
+  loggedIn,
+}) => {
+  const intl = useIntl();
+
+  const renderMainMenu = () => <DesktopMainMenuSlot menu={mainMenu} />;
+
+  const renderSecondaryMenu = () => <DesktopSecondaryMenuSlot menu={secondaryMenu} />;
+
+  const renderUserMenu = () => (
+    <Menu transitionClassName="menu-dropdown" transitionTimeout={250}>
+      <MenuTrigger
+        tag="button"
+        aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { username })}
+        className="btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
+      >
+        <DesktopUserMenuToggleSlot avatar={avatar} label={username} />
+      </MenuTrigger>
+      <MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
+        <DesktopUserMenuSlot menu={userMenu} />
+      </MenuContent>
+    </Menu>
+  );
+
+  const renderLoggedOutItems = () => <DesktopLoggedOutItemsSlot items={loggedOutItems} />;
+
+  const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
+  const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'mw-100' : null;
+
+  return (
+    <header className="site-header-desktop">
+      <a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
+      <div className={`container-fluid ${logoClasses}`}>
+        <div className="nav-container position-relative d-flex align-items-center">
+          <LogoSlot {...logoProps} />
+          <nav
+            aria-label={intl.formatMessage(messages['header.label.main.nav'])}
+            className="nav main-nav"
+          >
+            {renderMainMenu()}
+          </nav>
+          <nav
+            aria-label={intl.formatMessage(messages['header.label.secondary.nav'])}
+            className="nav secondary-menu-container align-items-center ml-auto"
+          >
+            {loggedIn
+              ? (
+                <>
+                  {renderSecondaryMenu()}
+                  {renderUserMenu()}
+                </>
+              ) : renderLoggedOutItems()}
+          </nav>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export const desktopHeaderDataShape = {
+  mainMenu: desktopHeaderMainOrSecondaryMenuDataShape,
+  secondaryMenu: desktopHeaderMainOrSecondaryMenuDataShape,
+  userMenu: desktopUserMenuDataShape,
+  loggedOutItems: desktopLoggedOutItemsDataShape,
+  logo: PropTypes.string,
+  logoAltText: PropTypes.string,
+  logoDestination: PropTypes.string,
+  avatar: PropTypes.string,
+  username: PropTypes.string,
+  loggedIn: PropTypes.bool,
+};
+
+DesktopHeader.propTypes = {
+  mainMenu: desktopHeaderDataShape.mainMenu,
+  secondaryMenu: desktopHeaderDataShape.secondaryMenu,
+  userMenu: desktopHeaderDataShape.userMenu,
+  loggedOutItems: desktopHeaderDataShape.loggedOutItems,
+  logo: desktopHeaderDataShape.logo,
+  logoAltText: desktopHeaderDataShape.logoAltText,
+  logoDestination: desktopHeaderDataShape.logoDestination,
+  avatar: desktopHeaderDataShape.avatar,
+  username: desktopHeaderDataShape.username,
+  loggedIn: desktopHeaderDataShape.loggedIn,
+};
+
+DesktopHeader.defaultProps = {
+  mainMenu: [],
+  secondaryMenu: [],
+  userMenu: [],
+  loggedOutItems: [],
+  logo: null,
+  logoAltText: null,
+  logoDestination: null,
+  avatar: null,
+  username: null,
+  loggedIn: false,
+};
+
+export default DesktopHeader;
--- a/src/desktop-header/DesktopHeaderMainOrSecondaryMenu.jsx
+++ b/src/desktop-header/DesktopHeaderMainOrSecondaryMenu.jsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Menu, MenuTrigger, MenuContent } from '../Menu';
+import { CaretIcon } from '../Icons';
+
+const DesktopHeaderMainOrSecondaryMenu = ({ menu }) => {
+  // Nodes are accepted as a prop
+  if (!Array.isArray(menu)) {
+    return menu;
+  }
+
+  return menu.map((menuItem) => {
+    const {
+      type,
+      href,
+      content,
+      submenuContent,
+      disabled,
+      isActive,
+      onClick,
+    } = menuItem;
+
+    if (type === 'item') {
+      return (
+        <a
+          key={`${type}-${content}`}
+          className={`nav-link${disabled ? ' disabled' : ''}${isActive ? ' active' : ''}`}
+          href={href}
+          onClick={onClick || null}
+        >
+          {content}
+        </a>
+      );
+    }
+
+    return (
+      <Menu key={`${type}-${content}`} tag="div" className="nav-item" respondToPointerEvents>
+        <MenuTrigger onClick={onClick || null} tag="a" className="nav-link d-inline-flex align-items-center" href={href}>
+          {content} <CaretIcon role="img" aria-hidden focusable="false" />
+        </MenuTrigger>
+        <MenuContent className="pin-left pin-right shadow py-2">
+          {submenuContent}
+        </MenuContent>
+      </Menu>
+    );
+  });
+};
+
+export const desktopHeaderMainOrSecondaryMenuDataShape = PropTypes.oneOfType([
+  PropTypes.node,
+  PropTypes.array,
+]);
+
+DesktopHeaderMainOrSecondaryMenu.propTypes = {
+  menu: desktopHeaderMainOrSecondaryMenuDataShape,
+};
+
+export default DesktopHeaderMainOrSecondaryMenu;
--- a/src/desktop-header/DesktopHeaderUserMenu.jsx
+++ b/src/desktop-header/DesktopHeaderUserMenu.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const DesktopHeaderUserMenu = ({ menu }) => menu.map((group, index) => (
+  // eslint-disable-next-line react/jsx-no-comment-textnodes,react/no-array-index-key
+  <React.Fragment key={index}>
+    {group.heading && <div className="dropdown-header" role="heading" aria-level="1">{group.heading}</div>}
+    {group.items.map(({
+      type, content, href, disabled, isActive, onClick,
+    }) => (
+      <a
+        className={`dropdown-${type}${isActive ? ' active' : ''}${disabled ? ' disabled' : ''}`}
+        key={`${type}-${content}`}
+        href={href}
+        onClick={onClick || null}
+      >
+        {content}
+      </a>
+    ))}
+    {index < menu.length - 1 && <div className="dropdown-divider" role="separator" />}
+  </React.Fragment>
+));
+
+export const desktopUserMenuDataShape = PropTypes.arrayOf(PropTypes.shape({
+  heading: PropTypes.string,
+  items: PropTypes.arrayOf(PropTypes.shape({
+    type: PropTypes.oneOf(['item', 'menu']),
+    href: PropTypes.string,
+    content: PropTypes.string,
+    isActive: PropTypes.bool,
+    onClick: PropTypes.func,
+  })),
+}));
+
+DesktopHeaderUserMenu.propTypes = {
+  menu: desktopUserMenuDataShape,
+};
+
+export default DesktopHeaderUserMenu;
--- a/src/desktop-header/DesktopLoggedOutItems.jsx
+++ b/src/desktop-header/DesktopLoggedOutItems.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const DesktopLoggedOutItems = ({ items }) => items.map((item, i, arr) => (
+  <a
+    key={`${item.type}-${item.content}`}
+    className={i < arr.length - 1 ? 'btn mr-2 btn-link' : 'btn mr-2 btn-outline-primary'}
+    href={item.href}
+  >
+    {item.content}
+  </a>
+));
+
+export const desktopLoggedOutItemsDataShape = PropTypes.arrayOf(PropTypes.shape({
+  type: PropTypes.oneOf(['item', 'menu']),
+  href: PropTypes.string,
+  content: PropTypes.string,
+}));
+
+DesktopLoggedOutItems.propTypes = {
+  items: desktopLoggedOutItemsDataShape,
+};
+
+export default DesktopLoggedOutItems;
--- a/src/desktop-header/DesktopUserMenuToggle.jsx
+++ b/src/desktop-header/DesktopUserMenuToggle.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CaretIcon } from '../Icons';
+import Avatar from '../Avatar';
+
+const DesktopUserMenuToggle = ({ avatar, label }) => (
+  <>
+    <Avatar size="1.5em" src={avatar} alt="" className="mr-2" />
+    {label} <CaretIcon role="img" aria-hidden focusable="false" />
+  </>
+);
+
+export const DesktopUserMenuTogglePropTypes = {
+  avatar: PropTypes.string,
+  label: PropTypes.string,
+};
+
+DesktopUserMenuToggle.propTypes = DesktopUserMenuTogglePropTypes;
+
+export default DesktopUserMenuToggle;
--- a/src/frontend-platform.d.ts
+++ b/src/frontend-platform.d.ts
@@ -0,0 +1,41 @@
+// frontend-platform currently doesn't provide types... do it ourselves for i18n module at least.
+// We can remove this in the future when we migrate to frontend-shell, or when frontend-platform gets types
+// (whichever comes first).
+
+declare module '@edx/frontend-platform/i18n' {
+  // eslint-disable-next-line import/no-extraneous-dependencies
+  import { injectIntl as _injectIntl } from 'react-intl';
+  /** @deprecated Use useIntl() hook instead. */
+  export const injectIntl: typeof _injectIntl;
+  /** @deprecated Use useIntl() hook instead. */
+  export const intlShape: any;
+
+  // eslint-disable-next-line import/no-extraneous-dependencies
+  export {
+    createIntl,
+    FormattedDate,
+    FormattedTime,
+    FormattedRelativeTime,
+    FormattedNumber,
+    FormattedPlural,
+    FormattedMessage,
+    defineMessages,
+    IntlProvider,
+    useIntl,
+  } from 'react-intl';
+
+  // Other exports from the i18n module:
+  export const configure: any;
+  export const getPrimaryLanguageSubtag: (code: string) => string;
+  export const getLocale: (locale?: string) => string;
+  export const getMessages: any;
+  export const isRtl: (locale?: string) => boolean;
+  export const handleRtl: any;
+  export const mergeMessages: any;
+  export const LOCALE_CHANGED: any;
+  export const LOCALE_TOPIC: any;
+  export const getCountryList: any;
+  export const getCountryMessages: any;
+  export const getLanguageList: any;
+  export const getLanguageMessages: any;
+}
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,6 +1,9 @@
 $spacer: 1rem;
 $blue: #007db8;
 $white: #fff;
+$component-active-bg: #0A3055FF !default;
+$component-active-color: $white !default;
+$rounded-pill: 50rem  !default;

@import './Menu/menu.scss';
@import './studio-header/StudioHeader.scss';
@@ -21,8 +24,9 @@ $white: #fff;
  padding: .75rem;
  justify-content: center;
  align-items:center;
+
  &:hover, &:focus {
-    background: rgba(0,0,0,.1);
+    background: rgba(0, 0, 0, .1);
  }
 }

@@ -36,17 +40,12 @@ $white: #fff;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
-      padding-bottom: 0.1rem;
+      padding-bottom: calc(var(--pgn-spacing-spacer-base, $spacer)* 0.1);
    }
  }

-  .user-dropdown {
-    .btn {
-      height: 3rem;
-      // @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
-      //   padding: 0 0.5rem;
-      // }
-    }
+  .user-dropdown .btn {
+    height: 3rem;
  }
 }

@@ -63,6 +62,7 @@ $white: #fff;
    text-decoration: none;
    cursor: pointer;
  }
+
  img {
    height: 1.5rem;
  }
@@ -70,19 +70,22 @@ $white: #fff;


 .site-header-desktop {
-  box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
-  background: $white;
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, .1);
+  background: var(--pgn-color-white, $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;
+    padding: var(--pgn-spacing-spacer-base, $spacer) 0;
+    margin-right: var(--pgn-spacing-spacer-base, $spacer);
+
    img {
      display: block;
      height: 100%;
@@ -93,38 +96,42 @@ $white: #fff;
    .nav-link:focus,
    .nav-link.active,
    .expanded .nav-link {
-      background: $component-active-bg;
-      color: $component-active-color;
+      background: var(--pgn-color-bg-active, $component-active-bg);
+      color: var(--pgn-color-active, $component-active-color);
    }
  }
  .main-nav {
    .nav-link {
-      padding: 1.125rem 1rem;
+      padding: 1.125rem var(--pgn-spacing-spacer-base, $spacer);
      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;
+      background: var(--pgn-color-bg-active, $component-active-bg);
+      color: var(--pgn-color-active, $component-active-color);
    }
+
    .menu {
      position: static;
+
      .menu-content {
-        border-top: solid 2px $component-active-bg;
+        border-top: solid 2px var(--pgn-color-bg-active);
        left: 0;
        right: 0;
-        box-shadow: 0 1px 2px rgba(0,0,0,.25);
+        box-shadow: var(--pgn-elevation-box-shadow-down-1, 0 1px 2px rgba(0,0,0,.25));
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
-        padding: 1rem;
+        padding: var(--pgn-spacing-spacer-base, $spacer);
      }
    }
  }
+
  .search-input {
-    border-radius: $rounded-pill;
+    border-radius: var(--pgn-size-rounded-pill, $rounded-pill);
  }
 }
--- a/src/learning-header/AnonymousUserMenu.jsx
+++ b/src/learning-header/AnonymousUserMenu.jsx
@@ -2,31 +2,26 @@ 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 '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import LearningLoggedOutItemsSlot from '../plugin-slots/LearningLoggedOutItemsSlot';

 import genericMessages from '../generic/messages';

-const AnonymousUserMenu = ({ intl }) => (
-  <div>
-    <Button
-      className="mr-3"
-      variant="outline-primary"
-      href={`${getConfig().LMS_BASE_URL}/register?next=${encodeURIComponent(global.location.href)}`}
-    >
-      {intl.formatMessage(genericMessages.registerSentenceCase)}
-    </Button>
-    <Button
-      variant="primary"
-      href={`${getLoginRedirectUrl(global.location.href)}`}
-    >
-      {intl.formatMessage(genericMessages.signInSentenceCase)}
-    </Button>
-  </div>
-);
+const AnonymousUserMenu = () => {
+  const intl = useIntl();
+  const buttonsInfo = [
+    {
+      message: intl.formatMessage(genericMessages.registerSentenceCase),
+      href: `${getConfig().LMS_BASE_URL}/register?next=${encodeURIComponent(global.location.href)}`,
+    },
+    {
+      message: intl.formatMessage(genericMessages.signInSentenceCase),
+      href: getLoginRedirectUrl(global.location.href),
+      variant: 'primary',
+    },
+  ];

-AnonymousUserMenu.propTypes = {
-  intl: intlShape.isRequired,
+  return <LearningLoggedOutItemsSlot buttonsInfo={buttonsInfo} />;
 };

-export default injectIntl(AnonymousUserMenu);
+export default AnonymousUserMenu;
--- a/src/learning-header/AuthenticatedUserDropdown.jsx
+++ b/src/learning-header/AuthenticatedUserDropdown.jsx
@@ -1,56 +1,55 @@
 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 { useIntl } from '@edx/frontend-platform/i18n';
 import { Dropdown } from '@openedx/paragon';

+import LearningUserMenuToggleSlot from '../plugin-slots/LearningUserMenuToggleSlot';
+import LearningUserMenuSlot from '../plugin-slots/LearningUserMenuSlot';
+
 import messages from './messages';

-const AuthenticatedUserDropdown = ({ intl, username }) => {
-  const dashboardMenuItem = (
-    <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>
-      {intl.formatMessage(messages.dashboard)}
-    </Dropdown.Item>
-  );
+const AuthenticatedUserDropdown = ({ username }) => {
+  const intl = useIntl();
+  const dropdownItems = [
+    {
+      message: intl.formatMessage(messages.dashboard),
+      href: `${getConfig().LMS_BASE_URL}/dashboard`,
+    },
+    {
+      message: intl.formatMessage(messages.profile),
+      href: `${getConfig().ACCOUNT_PROFILE_URL}/u/${username}`,
+    },
+    {
+      message: intl.formatMessage(messages.account),
+      href: getConfig().ACCOUNT_SETTINGS_URL,
+    },
+    ...(getConfig().ORDER_HISTORY_URL ? [{
+      message: intl.formatMessage(messages.orderHistory),
+      href: getConfig().ORDER_HISTORY_URL,
+    }] : []),
+    {
+      message: intl.formatMessage(messages.signOut),
+      href: getConfig().LOGOUT_URL,
+    },
+  ];

  return (
-    <>
-      <a className="text-gray-700" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>
-      <Dropdown className="user-dropdown ml-3">
-        <Dropdown.Toggle variant="outline-primary">
-          <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
-          <span data-hj-suppress className="d-none d-md-inline">
-            {username}
-          </span>
-        </Dropdown.Toggle>
-        <Dropdown.Menu className="dropdown-menu-right">
-          {dashboardMenuItem}
-          <Dropdown.Item href={`${getConfig().ACCOUNT_PROFILE_URL}/u/${username}`}>
-            {intl.formatMessage(messages.profile)}
-          </Dropdown.Item>
-          <Dropdown.Item href={getConfig().ACCOUNT_SETTINGS_URL}>
-            {intl.formatMessage(messages.account)}
-          </Dropdown.Item>
-          { getConfig().ORDER_HISTORY_URL && (
-            <Dropdown.Item href={getConfig().ORDER_HISTORY_URL}>
-              {intl.formatMessage(messages.orderHistory)}
-            </Dropdown.Item>
-          )}
-          <Dropdown.Item href={getConfig().LOGOUT_URL}>
-            {intl.formatMessage(messages.signOut)}
-          </Dropdown.Item>
-        </Dropdown.Menu>
-      </Dropdown>
-    </>
+    <Dropdown className="user-dropdown ml-3">
+      <Dropdown.Toggle variant="outline-primary" aria-label={intl.formatMessage(messages.userOptionsDropdownLabel)}>
+        <LearningUserMenuToggleSlot label={username} icon={faUserCircle} />
+      </Dropdown.Toggle>
+      <Dropdown.Menu className="dropdown-menu-right">
+        <LearningUserMenuSlot items={dropdownItems} />
+      </Dropdown.Menu>
+    </Dropdown>
  );
 };

 AuthenticatedUserDropdown.propTypes = {
-  intl: intlShape.isRequired,
  username: PropTypes.string.isRequired,
 };

-export default injectIntl(AuthenticatedUserDropdown);
+export default AuthenticatedUserDropdown;
--- a/src/learning-header/LearningHeader.jsx
+++ b/src/learning-header/LearningHeader.jsx
@@ -1,38 +1,28 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';

 import AnonymousUserMenu from './AnonymousUserMenu';
 import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
+import LogoSlot from '../plugin-slots/LogoSlot';
+import CourseInfoSlot from '../plugin-slots/CourseInfoSlot';
+import { courseInfoDataShape } from './LearningHeaderCourseInfo';
 import messages from './messages';
-
-const LinkedLogo = ({
-  href,
-  src,
-  alt,
-  ...attributes
-}) => (
-  <a href={href} {...attributes}>
-    <img className="d-block" src={src} alt={alt} />
-  </a>
-);
-
-LinkedLogo.propTypes = {
-  href: PropTypes.string.isRequired,
-  src: PropTypes.string.isRequired,
-  alt: PropTypes.string.isRequired,
-};
+import LearningHelpSlot from '../plugin-slots/LearningHelpSlot';

 const LearningHeader = ({
-  courseOrg, courseNumber, courseTitle, intl, showUserDropdown,
+  courseOrg,
+  courseNumber,
+  courseTitle,
+  showUserDropdown,
 }) => {
+  const intl = useIntl();
  const { authenticatedUser } = useContext(AppContext);

  const headerLogo = (
-    <LinkedLogo
-      className="logo"
+    <LogoSlot
      href={`${getConfig().LMS_BASE_URL}/dashboard`}
      src={getConfig().LOGO_URL}
      alt={getConfig().SITE_NAME}
@@ -44,14 +34,16 @@ const LearningHeader = ({
      <a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
      <div className="container-xl py-2 d-flex align-items-center">
        {headerLogo}
-        <div className="flex-grow-1 course-title-lockup" style={{ lineHeight: 1 }}>
-          <span className="d-block small m-0">{courseOrg} {courseNumber}</span>
-          <span className="d-block m-0 font-weight-bold course-title">{courseTitle}</span>
+        <div className="flex-grow-1 course-title-lockup d-flex" style={{ lineHeight: 1 }}>
+          <CourseInfoSlot courseOrg={courseOrg} courseNumber={courseNumber} courseTitle={courseTitle} />
        </div>
        {showUserDropdown && authenticatedUser && (
-        <AuthenticatedUserDropdown
-          username={authenticatedUser.username}
-        />
+        <>
+          <LearningHelpSlot />
+          <AuthenticatedUserDropdown
+            username={authenticatedUser.username}
+          />
+        </>
        )}
        {showUserDropdown && !authenticatedUser && (
        <AnonymousUserMenu />
@@ -62,10 +54,9 @@ const LearningHeader = ({
 };

 LearningHeader.propTypes = {
-  courseOrg: PropTypes.string,
-  courseNumber: PropTypes.string,
-  courseTitle: PropTypes.string,
-  intl: intlShape.isRequired,
+  courseOrg: courseInfoDataShape.courseOrg,
+  courseNumber: courseInfoDataShape.courseNumber,
+  courseTitle: courseInfoDataShape.courseTitle,
  showUserDropdown: PropTypes.bool,
 };

@@ -76,4 +67,4 @@ LearningHeader.defaultProps = {
  showUserDropdown: true,
 };

-export default injectIntl(LearningHeader);
+export default LearningHeader;
--- a/src/learning-header/LearningHeaderCourseInfo.jsx
+++ b/src/learning-header/LearningHeaderCourseInfo.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const LearningHeaderCourseInfo = ({
+  courseOrg,
+  courseNumber,
+  courseTitle,
+}) => (
+  <div style={{ minWidth: 0 }}>
+    <span className="d-block small m-0">{courseOrg} {courseNumber}</span>
+    <span className="d-block m-0 font-weight-bold course-title">{courseTitle}</span>
+  </div>
+);
+
+export const courseInfoDataShape = {
+  courseOrg: PropTypes.string,
+  courseNumber: PropTypes.string,
+  courseTitle: PropTypes.string,
+};
+
+LearningHeaderCourseInfo.propTypes = courseInfoDataShape;
+
+export default LearningHeaderCourseInfo;
--- a/src/learning-header/LearningHeaderHelpLink.jsx
+++ b/src/learning-header/LearningHeaderHelpLink.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+
+const LearningHeaderHelpLink = () => {
+  const intl = useIntl();
+  return (
+    <a className="text-gray-700" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>
+  );
+};
+
+export default LearningHeaderHelpLink;
--- a/src/learning-header/LearningHeaderUserMenuItems.jsx
+++ b/src/learning-header/LearningHeaderUserMenuItems.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Dropdown } from '@openedx/paragon';
+
+const LearningHeaderUserMenuItems = ({ items }) => items.map((item) => (
+  <Dropdown.Item href={item.href}>
+    {item.message}
+  </Dropdown.Item>
+));
+
+export const learningHeaderUserMenuDataShape = {
+  items: PropTypes.arrayOf(PropTypes.shape({
+    message: PropTypes.string,
+    href: PropTypes.string,
+  })),
+};
+
+LearningHeaderUserMenuItems.propTypes = learningHeaderUserMenuDataShape;
+
+export default LearningHeaderUserMenuItems;
--- a/src/learning-header/LearningLoggedOutButtons.jsx
+++ b/src/learning-header/LearningLoggedOutButtons.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Button } from '@openedx/paragon';
+
+const LearningLoggedOutButtons = ({ buttonsInfo }) => buttonsInfo.map(buttonInfo => (
+  <Button
+    className="ml-3"
+    variant={buttonInfo.variant ?? 'outline-primary'}
+    href={buttonInfo.href}
+  >
+    {buttonInfo.message}
+  </Button>
+));
+
+export const learningHeaderLoggedOutItemsDataShape = {
+  buttonsInfo: PropTypes.arrayOf(PropTypes.shape({
+    message: PropTypes.string,
+    href: PropTypes.string,
+    variant: PropTypes.string,
+  })),
+};
+
+LearningLoggedOutButtons.propTypes = learningHeaderLoggedOutItemsDataShape;
+
+export default LearningLoggedOutButtons;
--- a/src/learning-header/LearningUserMenuToggle.jsx
+++ b/src/learning-header/LearningUserMenuToggle.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import PropTypes from 'prop-types';
+
+const LearningUserMenuToggle = ({
+  label,
+  icon,
+}) => (
+  <>
+    <FontAwesomeIcon icon={icon} className="d-md-none" size="lg" />
+    <span data-hj-suppress className="d-none d-md-inline">
+      {label}
+    </span>
+  </>
+);
+
+export const LearningUserMenuTogglePropTypes = {
+  label: PropTypes.string.isRequired,
+  // Full shape available by examining @fortawesome/fontawesome-common-types/index.d.ts.
+  icon: PropTypes.shape({
+    prefix: PropTypes.string.isRequired,
+    iconName: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+LearningUserMenuToggle.propTypes = LearningUserMenuTogglePropTypes;
+
+export default LearningUserMenuToggle;
--- a/src/learning-header/messages.js
+++ b/src/learning-header/messages.js
@@ -36,6 +36,11 @@ const messages = defineMessages({
    defaultMessage: 'Sign Out',
    description: 'The label for the user menu Sign Out action.',
  },
+  userOptionsDropdownLabel: {
+    id: 'header.menu.aria-label',
+    defaultMessage: 'User Options',
+    description: 'The aria-label for the user options dropdown.',
+  },
 });

 export default messages;
--- a/src/mobile-header/MobileHeader.jsx
+++ b/src/mobile-header/MobileHeader.jsx
@@ -0,0 +1,145 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+
+// Local Components
+import MobileUserMenuToggleSlot from '../plugin-slots/MobileUserMenuToggleSlot';
+import { Menu, MenuTrigger, MenuContent } from '../Menu';
+import LogoSlot from '../plugin-slots/LogoSlot';
+import MobileLoggedOutItemsSlot from '../plugin-slots/MobileLoggedOutItemsSlot';
+import { mobileHeaderLoggedOutItemsDataShape } from './MobileLoggedOutItems';
+import MobileMainMenuSlot from '../plugin-slots/MobileMainMenuSlot';
+import { mobileHeaderMainMenuDataShape } from './MobileHeaderMainMenu';
+import MobileUserMenuSlot from '../plugin-slots/MobileUserMenuSlot';
+import { mobileHeaderUserMenuDataShape } from './MobileHeaderUserMenu';
+
+// i18n
+import messages from '../Header.messages';
+
+// Assets
+import { MenuIcon } from '../Icons';
+
+const MobileHeader = ({
+  mainMenu,
+  secondaryMenu,
+  userMenu,
+  loggedOutItems,
+  logo,
+  logoAltText,
+  logoDestination,
+  avatar,
+  username,
+  loggedIn,
+  stickyOnMobile,
+}) => {
+  const intl = useIntl();
+
+  const renderMainMenu = () => <MobileMainMenuSlot menu={[...mainMenu, ...secondaryMenu]} />;
+
+  const renderUserMenuItems = () => <MobileUserMenuSlot menu={userMenu} />;
+
+  const renderLoggedOutItems = () => <MobileLoggedOutItemsSlot items={loggedOutItems} />;
+
+  const renderUserMenuToggle = () => <MobileUserMenuToggleSlot avatar={avatar} label={username} />;
+
+  const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
+  const stickyClassName = stickyOnMobile ? 'sticky-top' : '';
+  const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'justify-content-left pl-3' : 'justify-content-center';
+
+  return (
+    <header
+      aria-label={intl.formatMessage(messages['header.label.main.header'])}
+      className={`site-header-mobile d-flex justify-content-between align-items-center shadow ${stickyClassName}`}
+    >
+      <a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
+      {mainMenu.length > 0 ? (
+        <div className="w-100 d-flex justify-content-start">
+
+          <Menu className="position-static">
+            <MenuTrigger
+              tag="button"
+              className="icon-button"
+              aria-label={intl.formatMessage(messages['header.label.main.menu'])}
+              title={intl.formatMessage(messages['header.label.main.menu'])}
+            >
+              <MenuIcon role="img" aria-hidden focusable="false" style={{ width: '1.5rem', height: '1.5rem' }} />
+            </MenuTrigger>
+            <MenuContent
+              tag="nav"
+              aria-label={intl.formatMessage(messages['header.label.main.nav'])}
+              className="nav flex-column pin-left pin-right border-top shadow py-2"
+            >
+              {renderMainMenu()}
+            </MenuContent>
+          </Menu>
+        </div>
+      ) : null}
+      <div className={`w-100 d-flex ${logoClasses}`}>
+        <LogoSlot {...logoProps} itemType="http://schema.org/Organization" />
+      </div>
+      {userMenu.length > 0 || loggedOutItems.length > 0 ? (
+        <div className="w-100 d-flex justify-content-end align-items-center">
+          <Menu tag="nav" aria-label={intl.formatMessage(messages['header.label.secondary.nav'])} className="position-static">
+            <MenuTrigger
+              tag="button"
+              className="icon-button"
+              aria-label={intl.formatMessage(messages['header.label.account.menu'])}
+              title={intl.formatMessage(messages['header.label.account.menu'])}
+            >
+              {renderUserMenuToggle()}
+            </MenuTrigger>
+            <MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
+              {loggedIn ? renderUserMenuItems() : renderLoggedOutItems()}
+            </MenuContent>
+          </Menu>
+        </div>
+      ) : null}
+    </header>
+  );
+};
+
+export const mobileHeaderDataShape = {
+  mainMenu: mobileHeaderMainMenuDataShape,
+  secondaryMenu: mobileHeaderMainMenuDataShape,
+  userMenu: mobileHeaderUserMenuDataShape,
+  loggedOutItems: mobileHeaderLoggedOutItemsDataShape,
+  logo: PropTypes.string,
+  logoAltText: PropTypes.string,
+  logoDestination: PropTypes.string,
+  avatar: PropTypes.string,
+  username: PropTypes.string,
+  loggedIn: PropTypes.bool,
+  stickyOnMobile: PropTypes.bool,
+};
+
+MobileHeader.propTypes = {
+  mainMenu: mobileHeaderDataShape.mainMenu,
+  secondaryMenu: mobileHeaderDataShape.secondaryMenu,
+  userMenu: mobileHeaderDataShape.userMenu,
+  loggedOutItems: mobileHeaderDataShape.loggedOutItems,
+  logo: mobileHeaderDataShape.logo,
+  logoAltText: mobileHeaderDataShape.logoAltText,
+  logoDestination: mobileHeaderDataShape.logoDestination,
+  avatar: mobileHeaderDataShape.avatar,
+  username: mobileHeaderDataShape.username,
+  loggedIn: mobileHeaderDataShape.loggedIn,
+  stickyOnMobile: mobileHeaderDataShape.stickyOnMobile,
+};
+
+MobileHeader.defaultProps = {
+  mainMenu: [],
+  secondaryMenu: [],
+  userMenu: [],
+  loggedOutItems: [],
+  logo: null,
+  logoAltText: null,
+  logoDestination: null,
+  avatar: null,
+  username: null,
+  loggedIn: false,
+  stickyOnMobile: true,
+
+};
+
+export default MobileHeader;
--- a/src/mobile-header/MobileHeaderMainMenu.jsx
+++ b/src/mobile-header/MobileHeaderMainMenu.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Menu, MenuTrigger, MenuContent } from '../Menu';
+
+const MobileHeaderMainMenu = ({ menu }) => {
+  // Nodes are accepted as a prop
+  if (!Array.isArray(menu)) {
+    return menu;
+  }
+
+  return menu.map((menuItem) => {
+    const {
+      type,
+      href,
+      content,
+      submenuContent,
+      disabled,
+      isActive,
+      onClick,
+    } = menuItem;
+
+    if (type === 'item') {
+      return (
+        <a
+          key={`${type}-${content}`}
+          className={`nav-link${disabled ? ' disabled' : ''}${isActive ? ' active' : ''}`}
+          href={href}
+          onClick={onClick || null}
+        >
+          {content}
+        </a>
+      );
+    }
+
+    return (
+      <Menu key={`${type}-${content}`} tag="div" className="nav-item">
+        <MenuTrigger onClick={onClick || null} tag="a" role="button" tabIndex="0" className="nav-link">
+          {content}
+        </MenuTrigger>
+        <MenuContent className="position-static pin-left pin-right py-2">
+          {submenuContent}
+        </MenuContent>
+      </Menu>
+    );
+  });
+};
+
+export const mobileHeaderMainMenuDataShape = PropTypes.oneOfType([
+  PropTypes.node,
+  PropTypes.array,
+]);
+
+MobileHeaderMainMenu.propTypes = {
+  menu: mobileHeaderMainMenuDataShape,
+};
+
+export default MobileHeaderMainMenu;
--- a/src/mobile-header/MobileHeaderUserMenu.jsx
+++ b/src/mobile-header/MobileHeaderUserMenu.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const MobileHeaderUserMenu = ({ menu }) => menu.map((group) => (
+  group.items.map(({
+    type, content, href, disabled, isActive, onClick,
+  }) => (
+    <li className="nav-item" key={`${type}-${content}`}>
+      <a
+        className={`nav-link${isActive ? ' active' : ''}${disabled ? ' disabled' : ''}`}
+        href={href}
+        onClick={onClick || null}
+      >
+        {content}
+      </a>
+    </li>
+  ))
+));
+
+export const mobileHeaderUserMenuDataShape = PropTypes.arrayOf(PropTypes.shape({
+  heading: PropTypes.string,
+  items: PropTypes.arrayOf(PropTypes.shape({
+    type: PropTypes.oneOf(['item', 'menu']),
+    href: PropTypes.string,
+    content: PropTypes.string,
+    isActive: PropTypes.bool,
+    onClick: PropTypes.func,
+  })),
+}));
+
+MobileHeaderUserMenu.propTypes = {
+  menu: mobileHeaderUserMenuDataShape,
+};
+
+export default MobileHeaderUserMenu;
--- a/src/mobile-header/MobileLoggedOutItems.jsx
+++ b/src/mobile-header/MobileLoggedOutItems.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const MobileLoggedOutItems = ({ items }) => items.map(({ type, href, content }, i, arr) => (
+  <li className="nav-item px-3 my-2" key={`${type}-${content}`}>
+    <a
+      className={i < arr.length - 1 ? 'btn btn-block btn-outline-primary' : 'btn btn-block btn-primary'}
+      href={href}
+    >
+      {content}
+    </a>
+  </li>
+));
+
+export const mobileHeaderLoggedOutItemsDataShape = PropTypes.arrayOf(PropTypes.shape({
+  type: PropTypes.oneOf(['item', 'menu']),
+  href: PropTypes.string,
+  content: PropTypes.string,
+}));
+
+MobileLoggedOutItems.propTypes = {
+  menu: mobileHeaderLoggedOutItemsDataShape,
+};
+
+export default MobileLoggedOutItems;
--- a/src/mobile-header/MobileUserMenuToggle.jsx
+++ b/src/mobile-header/MobileUserMenuToggle.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Avatar from '../Avatar';
+
+const MobileUserMenuToggle = ({ avatar, username }) => <Avatar size="1.5rem" src={avatar} alt={username} />;
+
+export const MobileUserMenuTogglePropTypes = {
+  avatar: PropTypes.string,
+  username: PropTypes.string,
+};
+
+MobileUserMenuToggle.propTypes = MobileUserMenuTogglePropTypes;
+
+export default MobileUserMenuToggle;
--- a/src/plugin-slots/CourseInfoSlot/README.md
+++ b/src/plugin-slots/CourseInfoSlot/README.md
@@ -0,0 +1,128 @@
+# Course Info Slot
+
+### Slot ID: `org.openedx.frontend.layout.header_learning_course_info.v1`
+
+### Slot ID Aliases
+* `course_info_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the course info.
+
+## Examples
+
+### Replace Course Title
+
+The following `env.config.jsx` will replace the course title.
+
+![Screenshot of replaced course title](./images/replace_course_title.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const replaceCourseTitle = ( widget ) => {
+  widget.content.courseTitle = "Custom Course Title";
+  return widget;
+};
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_learning_course_info.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Modify,
+          widgetId: 'default_contents',
+          fn: replaceCourseTitle,
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Replace Course Info with Custom Component
+
+The following `env.config.jsx` will replace the course info entirely (in this case with a centered 🗺️ `h1`)
+
+![Screenshot of replaced course info with custom component](./images/replace_course_info_with_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_learning_course_info.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_course_info_component',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🗺️</h1>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```
+
+### Add Custom Components before and after Course Info
+
+The following `env.config.jsx` will place custom components before and after the course info  (in this case centered `h1`s with 🌜 and 🌛).
+
+![Screenshot of added custom components before and after course info](./images/add_custom_components_before_and_after_course_info.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_learning_course_info.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_before_course_info_component',
+            type: DIRECT_PLUGIN,
+            priority: 10,
+            RenderWidget: () => (
+              <h3 style={{
+                marginTop: 'auto',
+                marginBottom: 'auto',
+                marginRight: '0.5rem',
+              }}>🌜</h3>
+            ),
+          },
+        },
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_after_course_info_component',
+            type: DIRECT_PLUGIN,
+            priority: 90,
+            RenderWidget: () => (
+              <h3 style={{
+                marginTop: 'auto',
+                marginBottom: 'auto',
+                marginLeft: '0.5rem',
+              }}>🌛</h3>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
--- a/src/plugin-slots/CourseInfoSlot/images/add_custom_components_before_and_after_course_info.png
+++ b/src/plugin-slots/CourseInfoSlot/images/add_custom_components_before_and_after_course_info.png
--- a/src/plugin-slots/CourseInfoSlot/images/replace_course_info_with_custom_component.png
+++ b/src/plugin-slots/CourseInfoSlot/images/replace_course_info_with_custom_component.png
--- a/src/plugin-slots/CourseInfoSlot/images/replace_course_title.png
+++ b/src/plugin-slots/CourseInfoSlot/images/replace_course_title.png
--- a/src/plugin-slots/CourseInfoSlot/index.jsx
+++ b/src/plugin-slots/CourseInfoSlot/index.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import LearningHeaderCourseInfo, { courseInfoDataShape } from '../../learning-header/LearningHeaderCourseInfo';
+
+const CourseInfoSlot = ({
+  courseOrg,
+  courseNumber,
+  courseTitle,
+  ...attributes
+}) => (
+  <PluginSlot
+    id="org.openedx.frontend.layout.header_learning_course_info.v1"
+    idAliases={['course_info_slot']}
+    slotOptions={{
+      mergeProps: true,
+    }}
+    pluginProps={{
+      courseOrg,
+      courseNumber,
+      courseTitle,
+    }}
+  >
+    <LearningHeaderCourseInfo
+      courseOrg={courseOrg}
+      courseNumber={courseNumber}
+      courseTitle={courseTitle}
+      {...attributes}
+    />
+  </PluginSlot>
+);
+
+CourseInfoSlot.propTypes = courseInfoDataShape;
+
+export default CourseInfoSlot;
--- a/src/plugin-slots/DesktopHeaderSlot/README.md
+++ b/src/plugin-slots/DesktopHeaderSlot/README.md
@@ -0,0 +1,44 @@
+# Desktop Header Slot
+
+### Slot ID: `org.openedx.frontend.layout.header_desktop.v1`
+
+### Slot ID Aliases
+* `desktop_header_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the entire desktop header.
+
+## Examples
+
+### Custom Component
+
+The following `env.config.jsx` will replace the desktop header entirely (in this case with a centered 🗺️ `h1`)
+
+![Screenshot of custom component](./images/desktop_header_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_desktop.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_desktop_header_component',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🗺️</h1>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```
--- a/src/plugin-slots/DesktopHeaderSlot/images/desktop_header_custom_component.png
+++ b/src/plugin-slots/DesktopHeaderSlot/images/desktop_header_custom_component.png
--- a/src/plugin-slots/DesktopHeaderSlot/index.jsx
+++ b/src/plugin-slots/DesktopHeaderSlot/index.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import DesktopHeader, { desktopHeaderDataShape } from '../../desktop-header/DesktopHeader';
+
+const DesktopHeaderSlot = ({
+  props,
+}) => (
+  <PluginSlot
+    id="org.openedx.frontend.layout.header_desktop.v1"
+    idAliases={['desktop_header_slot']}
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <DesktopHeader {...props} />
+  </PluginSlot>
+);
+
+DesktopHeaderSlot.propTypes = desktopHeaderDataShape;
+
+export default DesktopHeaderSlot;
--- a/src/plugin-slots/DesktopLoggedOutItemsSlot/README.md
+++ b/src/plugin-slots/DesktopLoggedOutItemsSlot/README.md
@@ -0,0 +1,137 @@
+# Desktop Logged Out Items Slot
+
+### Slot ID: `org.openedx.frontend.layout.header_desktop_logged_out_items.v1`
+
+### Slot ID Aliases
+* `desktop_logged_out_items_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the items shown on desktop when the user is logged out.
+
+## Examples
+
+### Modify Items
+
+The following `env.config.jsx` will modify the items shown on desktop when the user is logged out.
+
+![Screenshot of modified items](./images/desktop_logged_out_items_modify_items.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const modifyLoggedOutItems = ( widget ) => {
+  widget.content.items = [
+    {
+      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_desktop_logged_out_items.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Modify,
+          widgetId: 'default_contents',
+          fn: modifyLoggedOutItems,
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Replace with Custom Component
+
+The following `env.config.jsx` will replace the items shown on desktop when the user is logged out entirely (in this case with a centered 🗺️ `h1`)
+
+![Screenshot of custom component](./images/desktop_logged_out_items_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_desktop_logged_out_items.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_logged_out_items_component',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🗺️</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Add Custom Components before and after
+
+The following `env.config.jsx` will place custom components before and after the items shown on desktop when the user is logged out (in this case centered `h1`s with 🌜 and 🌛).
+
+![Screenshot of custom components before and after](./images/desktop_logged_out_items_custom_components_before_after.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_desktop_logged_out_items.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_before_logged_out_items_component',
+            type: DIRECT_PLUGIN,
+            priority: 10,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🌜</h1>
+            ),
+          },
+        },
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_after_logged_out_items_component',
+            type: DIRECT_PLUGIN,
+            priority: 90,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🌛</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
--- a/src/plugin-slots/DesktopLoggedOutItemsSlot/images/desktop_logged_out_items_custom_component.png
+++ b/src/plugin-slots/DesktopLoggedOutItemsSlot/images/desktop_logged_out_items_custom_component.png
--- a/src/plugin-slots/DesktopLoggedOutItemsSlot/images/desktop_logged_out_items_custom_components_before_after.png
+++ b/src/plugin-slots/DesktopLoggedOutItemsSlot/images/desktop_logged_out_items_custom_components_before_after.png
--- a/src/plugin-slots/DesktopLoggedOutItemsSlot/images/desktop_logged_out_items_modify_items.png
+++ b/src/plugin-slots/DesktopLoggedOutItemsSlot/images/desktop_logged_out_items_modify_items.png
--- a/src/plugin-slots/DesktopLoggedOutItemsSlot/index.jsx
+++ b/src/plugin-slots/DesktopLoggedOutItemsSlot/index.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import DesktopLoggedOutItems, { desktopLoggedOutItemsDataShape } from '../../desktop-header/DesktopLoggedOutItems';
+
+const DesktopLoggedOutItemsSlot = ({
+  items,
+}) => (
+  <PluginSlot
+    id="org.openedx.frontend.layout.header_desktop_logged_out_items.v1"
+    idAliases={['desktop_logged_out_items_slot']}
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <DesktopLoggedOutItems items={items} />
+  </PluginSlot>
+);
+
+DesktopLoggedOutItemsSlot.propTypes = {
+  items: desktopLoggedOutItemsDataShape,
+};
+
+export default DesktopLoggedOutItemsSlot;
--- a/src/plugin-slots/DesktopMainMenuSlot/README.md
+++ b/src/plugin-slots/DesktopMainMenuSlot/README.md
@@ -0,0 +1,190 @@
+# Desktop Main Menu Slot
+
+### Slot ID: `org.openedx.frontend.layout.header_desktop_main_menu.v1`
+
+### Slot ID Aliases
+* `desktop_main_menu_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the desktop main menu.
+
+## Examples
+
+### Modify Items
+
+#### Replace All Items
+
+The following `env.config.jsx` will replace all items in the desktop main menu.
+
+![Screenshot of modified items](./images/desktop_main_menu_replace_all_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_desktop_main_menu.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Modify,
+          widgetId: 'default_contents',
+          fn: modifyMainMenu,
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+#### Add Items
+
+The following `env.config.jsx` will add items in the desktop main menu.
+
+![Screenshot of custom marketing links](./images/desktop_main_menu_add_items.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const modifyMainMenu = (widget) => {
+  const existingMenu = widget.RenderWidget.props.menu || [];
+
+  const newMarketingLinks = [
+    {
+      type: 'item',
+      href: 'https://example.com/how-it-works',
+      content: 'How it works',
+    },
+    {
+      type: 'item',
+      href: 'https://example.com/courses',
+      content: 'Courses',
+    },
+    {
+      type: 'item',
+      href: 'https://example.com/schools',
+      content: 'Schools',
+    }
+  ];
+
+  widget.content.menu = [...existingMenu, ...newMarketingLinks];
+  return widget;
+};
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_desktop_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 desktop main menu entirely (in this case with a centered 🗺️ `h1`)
+
+![Screenshot of custom component](./images/desktop_main_menu_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_desktop_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 desktop main menu  (in this case centered `h1`s with 🌜 and 🌛).
+
+![Screenshot of custom components before and after](./images/desktop_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_desktop_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;
+```
--- a/src/plugin-slots/DesktopMainMenuSlot/images/desktop_main_menu_add_items.png
+++ b/src/plugin-slots/DesktopMainMenuSlot/images/desktop_main_menu_add_items.png
--- a/src/plugin-slots/DesktopMainMenuSlot/images/desktop_main_menu_custom_component.png
+++ b/src/plugin-slots/DesktopMainMenuSlot/images/desktop_main_menu_custom_component.png
--- a/src/plugin-slots/DesktopMainMenuSlot/images/desktop_main_menu_custom_components_before_after.png
+++ b/src/plugin-slots/DesktopMainMenuSlot/images/desktop_main_menu_custom_components_before_after.png
--- a/src/plugin-slots/DesktopMainMenuSlot/images/desktop_main_menu_replace_all_items.png
+++ b/src/plugin-slots/DesktopMainMenuSlot/images/desktop_main_menu_replace_all_items.png
--- a/src/plugin-slots/DesktopMainMenuSlot/index.jsx
+++ b/src/plugin-slots/DesktopMainMenuSlot/index.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import DesktopHeaderMainOrSecondaryMenu, { desktopHeaderMainOrSecondaryMenuDataShape } from '../../desktop-header/DesktopHeaderMainOrSecondaryMenu';
+
+const DesktopMainMenuSlot = ({
+  menu,
+}) => (
+  <PluginSlot
+    id="org.openedx.frontend.layout.header_desktop_main_menu.v1"
+    idAliases={['desktop_main_menu_slot']}
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <DesktopHeaderMainOrSecondaryMenu menu={menu} />
+  </PluginSlot>
+);
+
+DesktopMainMenuSlot.propTypes = {
+  menu: desktopHeaderMainOrSecondaryMenuDataShape,
+};
+
+export default DesktopMainMenuSlot;
--- a/src/plugin-slots/DesktopSecondaryMenuSlot/README.md
+++ b/src/plugin-slots/DesktopSecondaryMenuSlot/README.md
@@ -0,0 +1,132 @@
+# Desktop Secondary Menu Slot
+
+### Slot ID: `org.openedx.frontend.layout.header_desktop_secondary_menu.v1`
+
+### Slot ID Aliases
+* `desktop_secondary_menu_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the desktop secondary menu.
+
+## Examples
+
+### Modify Items
+
+The following `env.config.jsx` will modify the items in the desktop secondary menu.
+
+![Screenshot of modified items](./images/desktop_secondary_menu_modify_items.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const modifySecondaryMenu = ( widget ) => {
+  widget.content.menu = [
+    {
+      type: 'item',
+      href: 'https://www.youtube.com/c/openedx',
+      content: 'Open edX on YouTube',
+    },
+    {
+      type: 'item',
+      href: 'https://github.com/openedx/',
+      content: 'Open edX on GitHub',
+    }
+  ];
+  return widget;
+};
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_desktop_secondary_menu.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Modify,
+          widgetId: 'default_contents',
+          fn: modifySecondaryMenu,
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Replace Menu with Custom Component
+
+The following `env.config.jsx` will replace the desktop secondary menu entirely (in this case with a centered 🗺️ `h1`)
+
+![Screenshot of custom component](./images/desktop_secondary_menu_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_desktop_secondary_menu.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_secondary_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 desktop secondary menu  (in this case centered `h1`s with 🌜 and 🌛).
+
+![Screenshot of custom components before and after](./images/desktop_secondary_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_desktop_secondary_menu.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_before_secondary_menu_component',
+            type: DIRECT_PLUGIN,
+            priority: 10,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🌜</h1>
+            ),
+          },
+        },
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_after_secondary_menu_component',
+            type: DIRECT_PLUGIN,
+            priority: 90,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🌛</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
--- a/src/plugin-slots/DesktopSecondaryMenuSlot/images/desktop_secondary_menu_custom_component.png
+++ b/src/plugin-slots/DesktopSecondaryMenuSlot/images/desktop_secondary_menu_custom_component.png
--- a/src/plugin-slots/DesktopSecondaryMenuSlot/images/desktop_secondary_menu_custom_components_before_after.png
+++ b/src/plugin-slots/DesktopSecondaryMenuSlot/images/desktop_secondary_menu_custom_components_before_after.png
--- a/src/plugin-slots/DesktopSecondaryMenuSlot/images/desktop_secondary_menu_modify_items.png
+++ b/src/plugin-slots/DesktopSecondaryMenuSlot/images/desktop_secondary_menu_modify_items.png
--- a/src/plugin-slots/DesktopSecondaryMenuSlot/index.jsx
+++ b/src/plugin-slots/DesktopSecondaryMenuSlot/index.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import DesktopHeaderMainOrSecondaryMenu, { desktopHeaderMainOrSecondaryMenuDataShape } from '../../desktop-header/DesktopHeaderMainOrSecondaryMenu';
+
+const DesktopSecondaryMenuSlot = ({
+  menu,
+}) => (
+  <PluginSlot
+    id="org.openedx.frontend.layout.header_desktop_secondary_menu.v1"
+    idAliases={['desktop_secondary_menu_slot']}
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <DesktopHeaderMainOrSecondaryMenu menu={menu} />
+  </PluginSlot>
+);
+
+DesktopSecondaryMenuSlot.propTypes = {
+  menu: desktopHeaderMainOrSecondaryMenuDataShape,
+};
+
+export default DesktopSecondaryMenuSlot;
--- a/src/plugin-slots/DesktopUserMenuSlot/README.md
+++ b/src/plugin-slots/DesktopUserMenuSlot/README.md
@@ -0,0 +1,144 @@
+# Desktop User Menu Slot
+
+### Slot ID: `org.openedx.frontend.layout.header_desktop_user_menu.v1`
+
+### Slot ID Aliases
+* `desktop_user_menu_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the desktop user menu.
+
+## Examples
+
+### Modify Items
+
+The following `env.config.jsx` will modify the items in the desktop user menu.
+
+![Screenshot of modified items](./images/desktop_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_desktop_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 desktop user menu entirely (in this case with a centered 🗺️ `h1`)
+
+![Screenshot of custom component](./images/desktop_user_menu_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_desktop_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 desktop user menu (in this case centered `h1`s with 🌞 and 🌚).
+
+![Screenshot of custom components before and after](./images/desktop_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_desktop_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;
+```
--- a/src/plugin-slots/DesktopUserMenuSlot/images/desktop_user_menu_custom_component.png
+++ b/src/plugin-slots/DesktopUserMenuSlot/images/desktop_user_menu_custom_component.png
--- a/src/plugin-slots/DesktopUserMenuSlot/images/desktop_user_menu_custom_components_before_after.png
+++ b/src/plugin-slots/DesktopUserMenuSlot/images/desktop_user_menu_custom_components_before_after.png
--- a/src/plugin-slots/DesktopUserMenuSlot/images/desktop_user_menu_modify_items.png
+++ b/src/plugin-slots/DesktopUserMenuSlot/images/desktop_user_menu_modify_items.png
--- a/src/plugin-slots/DesktopUserMenuSlot/index.jsx
+++ b/src/plugin-slots/DesktopUserMenuSlot/index.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import DesktopHeaderUserMenu, { desktopUserMenuDataShape } from '../../desktop-header/DesktopHeaderUserMenu';
+
+const DesktopUserMenuSlot = ({
+  menu,
+}) => (
+  <PluginSlot
+    id="org.openedx.frontend.layout.header_desktop_user_menu.v1"
+    idAliases={['desktop_user_menu_slot']}
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <DesktopHeaderUserMenu menu={menu} />
+  </PluginSlot>
+);
+
+DesktopUserMenuSlot.propTypes = {
+  menu: desktopUserMenuDataShape,
+};
+
+export default DesktopUserMenuSlot;
--- a/src/plugin-slots/DesktopUserMenuToggleSlot/README.md
+++ b/src/plugin-slots/DesktopUserMenuToggleSlot/README.md
@@ -0,0 +1,74 @@
+# Desktop User Menu Toggle Slot
+
+### Slot ID: `org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1`
+
+## Description
+
+This slot is used to replace/modify/hide the contents of the user menu toggle button on desktop sized screens.
+
+## Examples
+
+### Modify Label Text
+
+The following `env.config.jsx` will modify the label text to be something more generic:
+
+![Screenshot of modified label](./images/desktop_user_menu_modified_toggle.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { faHouse } from '@fortawesome/free-solid-svg-icons';
+
+const modifyUserMenuToggle = ( widget ) => {
+  widget.content.label = "My Profile";
+  return widget;
+};
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_desktop_user_menu_toggle.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 learning user menu toggle button entirely (in this case with an emoji)
+
+![Screenshot of replaced with custom component](./images/desktop_user_menu_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_desktop_user_menu_toggle',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <span>🦊</span>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
--- a/src/plugin-slots/DesktopUserMenuToggleSlot/images/desktop_user_menu_custom_component.png
+++ b/src/plugin-slots/DesktopUserMenuToggleSlot/images/desktop_user_menu_custom_component.png
--- a/src/plugin-slots/DesktopUserMenuToggleSlot/images/desktop_user_menu_modified_toggle.png
+++ b/src/plugin-slots/DesktopUserMenuToggleSlot/images/desktop_user_menu_modified_toggle.png
--- a/src/plugin-slots/DesktopUserMenuToggleSlot/index.jsx
+++ b/src/plugin-slots/DesktopUserMenuToggleSlot/index.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import DesktopUserMenuToggle, { DesktopUserMenuTogglePropTypes } from '../../desktop-header/DesktopUserMenuToggle';
+
+const DesktopUserMenuToggleSlot = ({
+  avatar,
+  label,
+}) => (
+  <PluginSlot
+    id="org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1"
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <DesktopUserMenuToggle avatar={avatar} label={label} />
+  </PluginSlot>
+);
+
+DesktopUserMenuToggleSlot.propTypes = DesktopUserMenuTogglePropTypes;
+
+export default DesktopUserMenuToggleSlot;
--- a/src/plugin-slots/LearningHelpSlot/README.md
+++ b/src/plugin-slots/LearningHelpSlot/README.md
@@ -0,0 +1,44 @@
+# Learning Help Slot
+
+### Slot ID: `org.openedx.frontend.layout.header_learning_help.v1`
+
+### Slot ID Aliases
+* `learning_help_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the learning help link.
+
+## Examples
+
+### Custom Component
+
+The following `env.config.jsx` will replace the help link entirely (in this case with a centered 🗺️ `h1`)
+
+![Screenshot of replaced learning help with custom component](./images/learning_help_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_learning_help.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_learning_help_component',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🗺️</h1>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```
--- a/src/plugin-slots/LearningHelpSlot/images/learning_help_custom_component.png
+++ b/src/plugin-slots/LearningHelpSlot/images/learning_help_custom_component.png
--- a/src/plugin-slots/LearningHelpSlot/index.jsx
+++ b/src/plugin-slots/LearningHelpSlot/index.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import LearningHeaderHelpLink from '../../learning-header/LearningHeaderHelpLink';
+
+const LearningHelpSlot = () => (
+  <PluginSlot id="org.openedx.frontend.layout.header_learning_help.v1" idAliases={['learning_help_slot']}>
+    <LearningHeaderHelpLink />
+  </PluginSlot>
+);
+
+export default LearningHelpSlot;
--- a/src/plugin-slots/LearningLoggedOutItemsSlot/README.md
+++ b/src/plugin-slots/LearningLoggedOutItemsSlot/README.md
@@ -0,0 +1,135 @@
+# Learning Logged Out Items Slot
+
+### Slot ID: `org.openedx.frontend.layout.header_learning_logged_out_items.v1`
+
+### Slot ID Aliases
+* `learning_logged_out_items_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the items shown on the learning header when the user is logged out.
+
+## Examples
+
+### Modify Items
+
+The following `env.config.jsx` will modify the items shown on the learning header when the user is logged out.
+
+![Screenshot of modified items](./images/learning_logged_out_items_modified_items.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const modifyLoggedOutItems = ( widget ) => {
+  widget.content.buttonsInfo = [
+    {
+      href: 'https://docs.openedx.org/en/latest/',
+      message: 'Documentation',
+    },
+    {
+      href: 'https://discuss.openedx.org/',
+      message: 'Forums',
+    },
+    {
+      href: 'https://openedx.org/',
+      message: 'openedx.org',
+      variant: 'primary',
+    },
+  ];
+  return widget;
+};
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_learning_logged_out_items.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Modify,
+          widgetId: 'default_contents',
+          fn: modifyLoggedOutItems,
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Replace with Custom Component
+
+The following `env.config.jsx` will replace the items shown in the learning header when the user is logged out entirely (in this case with a centered 🗺️ `h1`)
+
+![Screenshot of replaced with custom component](./images/learning_logged_out_items_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_learning_logged_out_items.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_logged_out_items_component',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🗺️</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Add Custom Components before and after
+
+The following `env.config.jsx` will place custom components before and after the items shown in the learning header when the user is logged out (in this case centered `h1`s with 🌜 and 🌛).
+
+![Screenshot of added custom components before and after](./images/learning_logged_out_items_custom_components_before_after.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_learning_logged_out_items.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_before_logged_out_items_component',
+            type: DIRECT_PLUGIN,
+            priority: 10,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🌜</h1>
+            ),
+          },
+        },
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_after_logged_out_items_component',
+            type: DIRECT_PLUGIN,
+            priority: 90,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🌛</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
--- a/src/plugin-slots/LearningLoggedOutItemsSlot/images/learning_logged_out_items_custom_component.png
+++ b/src/plugin-slots/LearningLoggedOutItemsSlot/images/learning_logged_out_items_custom_component.png
--- a/src/plugin-slots/LearningLoggedOutItemsSlot/images/learning_logged_out_items_custom_components_before_after.png
+++ b/src/plugin-slots/LearningLoggedOutItemsSlot/images/learning_logged_out_items_custom_components_before_after.png
--- a/src/plugin-slots/LearningLoggedOutItemsSlot/images/learning_logged_out_items_modified_items.png
+++ b/src/plugin-slots/LearningLoggedOutItemsSlot/images/learning_logged_out_items_modified_items.png
--- a/src/plugin-slots/LearningLoggedOutItemsSlot/index.jsx
+++ b/src/plugin-slots/LearningLoggedOutItemsSlot/index.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import LearningLoggedOutButtons, { learningHeaderLoggedOutItemsDataShape } from '../../learning-header/LearningLoggedOutButtons';
+
+const LearningLoggedOutItemsSlot = ({
+  buttonsInfo,
+}) => (
+  <PluginSlot
+    id="org.openedx.frontend.layout.header_learning_logged_out_items.v1"
+    idAliases={['learning_logged_out_items_slot']}
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <LearningLoggedOutButtons buttonsInfo={buttonsInfo} />
+  </PluginSlot>
+);
+
+LearningLoggedOutItemsSlot.propTypes = learningHeaderLoggedOutItemsDataShape;
+
+export default LearningLoggedOutItemsSlot;
--- a/src/plugin-slots/LearningUserMenuSlot/README.md
+++ b/src/plugin-slots/LearningUserMenuSlot/README.md
@@ -0,0 +1,133 @@
+# Learning User Menu Slot
+
+### Slot ID: `org.openedx.frontend.layout.header_learning_user_menu.v1`
+
+### Slot ID Aliases
+* `learning_user_menu_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the learning user menu.
+
+## Examples
+
+### Modify Items
+
+The following `env.config.jsx` will modify the items in the learning user menu.
+
+![Screenshot of modified items](./images/learning_user_menu_modified_items.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const modifyUserMenu = ( widget ) => {
+  widget.content.items = [
+    {
+      href: 'https://openedx.org/',
+      message: 'openedx.org',
+    },
+    {
+      href: 'https://docs.openedx.org/en/latest/',
+      message: 'Documentation',
+    },
+    {
+      href: 'https://discuss.openedx.org/',
+      message: 'Forums',
+    }
+  ];
+  return widget;
+};
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_learning_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 items in the learning user menu entirely (in this case with a centered 🗺️ `h1`)
+
+![Screenshot of replaced with custom component](./images/learning_user_menu_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_learning_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 learning user menu (in this case centered `h1`s with 🌞 and 🌚).
+
+![Screenshot of custom components before and after](./images/learning_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_learning_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;
+```
--- a/src/plugin-slots/LearningUserMenuSlot/images/learning_user_menu_custom_component.png
+++ b/src/plugin-slots/LearningUserMenuSlot/images/learning_user_menu_custom_component.png
--- a/src/plugin-slots/LearningUserMenuSlot/images/learning_user_menu_custom_components_before_after.png
+++ b/src/plugin-slots/LearningUserMenuSlot/images/learning_user_menu_custom_components_before_after.png
--- a/src/plugin-slots/LearningUserMenuSlot/images/learning_user_menu_modified_items.png
+++ b/src/plugin-slots/LearningUserMenuSlot/images/learning_user_menu_modified_items.png
--- a/src/plugin-slots/LearningUserMenuSlot/index.jsx
+++ b/src/plugin-slots/LearningUserMenuSlot/index.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import LearningHeaderUserMenuItems, { learningHeaderUserMenuDataShape } from '../../learning-header/LearningHeaderUserMenuItems';
+
+const LearningUserMenuSlot = ({
+  items,
+}) => (
+  <PluginSlot
+    id="org.openedx.frontend.layout.header_learning_user_menu.v1"
+    idAliases={['learning_user_menu_slot']}
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <LearningHeaderUserMenuItems items={items} />
+  </PluginSlot>
+);
+
+LearningUserMenuSlot.propTypes = learningHeaderUserMenuDataShape;
+
+export default LearningUserMenuSlot;
--- a/src/plugin-slots/LearningUserMenuToggleSlot/README.md
+++ b/src/plugin-slots/LearningUserMenuToggleSlot/README.md
@@ -0,0 +1,74 @@
+# Learning User Menu Toggle Slot
+
+### Slot ID: `org.openedx.frontend.layout.header_learning_user_menu_toggle.v1`
+
+## Description
+
+This slot is used to replace/modify/hide the contents of the learning user menu toggle button.
+
+## Examples
+
+### Modify Icon
+
+The following `env.config.jsx` will modify the icon for the learning user menu toggle button. **Note:** The icon is only shown on mobile screens.
+
+![Screenshot of modified items](./images/learning_user_menu_toggle_modified_items.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { faHouse } from '@fortawesome/free-solid-svg-icons';
+
+const modifyUserMenuToggle = ( widget ) => {
+  widget.content.icon = faHouse;
+  return widget;
+};
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_learning_user_menu_toggle.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 learning user menu toggle button's contents entirely (in this case with an emoji)
+
+![Screenshot of replaced with custom component](./images/learning_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_learning_user_menu_toggle.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_learning_user_menu_toggle',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <span>🦊</span>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
--- a/src/plugin-slots/LearningUserMenuToggleSlot/images/learning_user_menu_toggle_custom_component.png
+++ b/src/plugin-slots/LearningUserMenuToggleSlot/images/learning_user_menu_toggle_custom_component.png
--- a/src/plugin-slots/LearningUserMenuToggleSlot/images/learning_user_menu_toggle_modified_items.png
+++ b/src/plugin-slots/LearningUserMenuToggleSlot/images/learning_user_menu_toggle_modified_items.png
--- a/src/plugin-slots/LearningUserMenuToggleSlot/index.jsx
+++ b/src/plugin-slots/LearningUserMenuToggleSlot/index.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import LearningUserMenuToggle, {
+  LearningUserMenuTogglePropTypes,
+} from '../../learning-header/LearningUserMenuToggle';
+
+const LearningUserMenuToggleSlot = ({
+  label, icon,
+}) => (
+  <PluginSlot
+    id="org.openedx.frontend.layout.header_learning_user_menu_toggle.v1"
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <LearningUserMenuToggle label={label} icon={icon} />
+  </PluginSlot>
+);
+
+LearningUserMenuToggleSlot.propTypes = LearningUserMenuTogglePropTypes;
+
+export default LearningUserMenuToggleSlot;
--- a/src/plugin-slots/LogoSlot/README.md
+++ b/src/plugin-slots/LogoSlot/README.md
@@ -0,0 +1,72 @@
+# Logo Slot
+
+### Slot ID: `org.openedx.frontend.layout.header_logo.v1`
+
+### Slot ID Aliases
+* `logo_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the logo.
+
+## Examples
+
+### Modify URL
+
+The following `env.config.jsx` will modify the link href for the logo.
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const modifyLogoHref = ( widget ) => {
+  widget.content.href = "https://openedx.org/";
+  return widget;
+};
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_logo.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Modify,
+          widgetId: 'default_contents',
+          fn: modifyLogoHref,
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Custom Component
+
+The following `env.config.jsx` will replace the logo entirely (in this case with a centered 🗺️ `h1`)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_logo.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_logo_component',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🗺️</h1>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```
--- a/src/plugin-slots/LogoSlot/index.jsx
+++ b/src/plugin-slots/LogoSlot/index.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import Logo, { logoDataShape } from '../../Logo';
+
+const LogoSlot = ({
+  href, src, alt, ...attributes
+}) => (
+  <PluginSlot
+    id="org.openedx.frontend.layout.header_logo.v1"
+    idAliases={['logo_slot']}
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <Logo href={href} src={src} alt={alt} {...attributes} />
+  </PluginSlot>
+);
+
+LogoSlot.propTypes = logoDataShape;
+
+export default LogoSlot;
--- a/src/plugin-slots/MobileHeaderSlot/README.md
+++ b/src/plugin-slots/MobileHeaderSlot/README.md
@@ -0,0 +1,44 @@
+# Mobile Header Slot
+
+### Slot ID: `org.openedx.frontend.layout.header_mobile.v1`
+
+### Slot ID Aliases
+* `mobile_header_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the entire mobile header.
+
+## Examples
+
+### Custom Component
+
+The following `env.config.jsx` will replace the mobile header entirely (in this case with a centered 🗺️ `h1`)
+
+![Screenshot of custom component](./images/mobile_header_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_mobile.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_mobile_header_component',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🗺️</h1>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```
--- a/src/plugin-slots/MobileHeaderSlot/images/mobile_header_custom_component.png
+++ b/src/plugin-slots/MobileHeaderSlot/images/mobile_header_custom_component.png
--- a/src/plugin-slots/MobileHeaderSlot/index.jsx
+++ b/src/plugin-slots/MobileHeaderSlot/index.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import MobileHeader, { mobileHeaderDataShape } from '../../mobile-header/MobileHeader';
+
+const MobileHeaderSlot = ({
+  props,
+}) => (
+  <PluginSlot
+    id="org.openedx.frontend.layout.header_mobile.v1"
+    idAliases={['mobile_header_slot']}
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <MobileHeader {...props} />
+  </PluginSlot>
+);
+
+MobileHeaderSlot.propTypes = mobileHeaderDataShape;
+
+export default MobileHeaderSlot;
--- a/src/plugin-slots/MobileLoggedOutItemsSlot/README.md
+++ b/src/plugin-slots/MobileLoggedOutItemsSlot/README.md
@@ -0,0 +1,136 @@
+# Mobile Logged Out Items Slot
+
+### Slot ID: `org.openedx.frontend.layout.header_mobile_logged_out_items.v1`
+
+### Slot ID Aliases
+* `mobile_logged_out_items_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the mobile user menu when logged out.
+
+## Examples
+
+### Modify Items
+
+The following `env.config.jsx` will modify the items in mobile user menu when logged out.
+
+![Screenshot of modified items](./images/mobile_logged_out_items_modify_items.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const modifyLoggedOutItems = ( widget ) => {
+  widget.content.items = [
+    {
+      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_logged_out_items.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Modify,
+          widgetId: 'default_contents',
+          fn: modifyLoggedOutItems,
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Replace Items with Custom Component
+
+The following `env.config.jsx` will replace the items in mobile user menu when logged out entirely (in this case with a centered 🗺️ `h1`)
+
+![Screenshot of custom component](./images/mobile_logged_out_items_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_mobile_logged_out_items.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_logged_out_items_component',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🗺️</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Add Custom Components before and after Items
+
+The following `env.config.jsx` will place custom components before and after the items in mobile user menu when logged out (in this case centered `h1`s with 🌞 and 🌚).
+
+![Screenshot of custom components before and after](./images/mobile_logged_out_items_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_logged_out_items.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_before_logged_out_items_component',
+            type: DIRECT_PLUGIN,
+            priority: 10,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🌞</h1>
+            ),
+          },
+        },
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_after_logged_out_items_component',
+            type: DIRECT_PLUGIN,
+            priority: 90,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🌚</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
--- a/src/plugin-slots/MobileLoggedOutItemsSlot/images/mobile_logged_out_items_custom_component.png
+++ b/src/plugin-slots/MobileLoggedOutItemsSlot/images/mobile_logged_out_items_custom_component.png
--- a/src/plugin-slots/MobileLoggedOutItemsSlot/images/mobile_logged_out_items_custom_components_before_after.png
+++ b/src/plugin-slots/MobileLoggedOutItemsSlot/images/mobile_logged_out_items_custom_components_before_after.png
--- a/src/plugin-slots/MobileLoggedOutItemsSlot/images/mobile_logged_out_items_modify_items.png
+++ b/src/plugin-slots/MobileLoggedOutItemsSlot/images/mobile_logged_out_items_modify_items.png
--- a/src/plugin-slots/MobileLoggedOutItemsSlot/index.jsx
+++ b/src/plugin-slots/MobileLoggedOutItemsSlot/index.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import MobileLoggedOutItems, { mobileHeaderLoggedOutItemsDataShape } from '../../mobile-header/MobileLoggedOutItems';
+
+const MobileLoggedOutItemsSlot = ({
+  items,
+}) => (
+  <PluginSlot
+    id="org.openedx.frontend.layout.header_mobile_logged_out_items.v1"
+    idAliases={['mobile_logged_out_items_slot']}
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <MobileLoggedOutItems items={items} />
+  </PluginSlot>
+);
+
+MobileLoggedOutItemsSlot.propTypes = {
+  items: mobileHeaderLoggedOutItemsDataShape,
+};
+
+export default MobileLoggedOutItemsSlot;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Farhaan Bukhsh	c86165180f	feat: Moves search button into a slot (#644 ) Signed-off-by: Farhaan Bukhsh <farhaan@opencraft.com>	2025-10-27 10:51:45 -04:00
renovate[bot]	97063850c6	chore(deps): update dependency @openedx/paragon to v23.15.0 (#650 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-10-27 04:33:28 +00:00
renovate[bot]	af252d2d3f	chore(deps): update dependency @edx/frontend-platform to v8.5.2 (#649 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-10-27 04:33:12 +00:00
renovate[bot]	9e850c3229	chore(deps): update dependency @openedx/paragon to v23.14.9 (#647 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-10-20 05:52:53 +00:00
Braden MacDonald	413454b6e6	refactor: update propTypes -> TypeScript in Studio Header (#643 )	2025-10-14 09:43:33 -07:00
renovate[bot]	ed7cc8a36e	chore(deps): update dependency ts-jest to v29.4.5 (#646 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-10-13 04:27:12 +00:00
renovate[bot]	a8a4ad59ed	chore(deps): update dependency @openedx/paragon to v23.14.8 (#645 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-10-13 04:27:04 +00:00
Kyle McCormick	9f2b2a4026	feat: Remove Studio Maintenance link (empty commit for release CI) This was already merged in `6d424edbd5`, but we are pushing this empty commit with BREAKING CHANGE message in order to trigger the release of a new semantic version. BREAKING CHANGE: The Studio "Maintenance" link has been removed as part of https://github.com/openedx/edx-platform/issues/36263	2025-10-07 15:28:43 -04:00
Feanil Patel	21953ec96d	Merge pull request #629 from openedx/renovate/actions-checkout-5.x chore(deps): update actions/checkout action to v5	2025-10-07 14:06:33 -04:00
renovate[bot]	57671449b1	chore(deps): update actions/checkout action to v5	2025-10-07 17:59:08 +00:00
Feanil Patel	66012905b2	Merge pull request #641 from openedx/renovate/actions-setup-node-5.x chore(deps): update actions/setup-node action to v5	2025-10-07 13:57:38 -04:00
renovate[bot]	209d52ed60	chore(deps): update actions/setup-node action to v5	2025-10-07 17:55:09 +00:00
Kyle McCormick	6d424edbd5	feat!: Remove Studio Maintenance link (#642 ) This reverts commit `48c49fe0b2`. The original commit (`a229c34535`) was merged prematurely, so it was reverted. However, now that we have properly DEPR'd the underlying feature, we can revert that revert. Part of: https://github.com/openedx/edx-platform/issues/36263	2025-10-07 13:54:30 -04:00
renovate[bot]	5a4279a7f3	chore(deps): update dependency @openedx/paragon to v23.14.4 (#640 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-10-07 13:54:01 -04:00
Peter Kulko	ef0ea1378d	docs: [FC-86] Restructure Modify Items section with Add/Replace examples (#598 ) * docs: example of adding Marketing links via the plugin slots * refactor: code refactoring * feat: added logoDestination props for Header component * refactor: after rebase * refactor: updated tests * refactor: after review * refactor: removed logoDestination prop * docs: Custom Marketing links mobile example * refactor: after review	2025-09-29 12:44:28 -04:00
oleksandr.buhaienko	b8b39bffbc	test: Remove support for Node 20	2025-09-29 12:26:17 -03:00
renovate[bot]	7f778adda9	chore(deps): update jest monorepo to v30.2.0 (#637 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-29 06:50:45 +00:00
renovate[bot]	4cf48d8ba8	chore(deps): update dependency @openedx/paragon to v23.14.3 (#636 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-29 06:50:27 +00:00
Feanil Patel	2e82ba910d	build: remove unused @edx/reactifex package Remove @edx/reactifex package from devDependencies as it is no longer needed. Translation extraction functionality has been verified to work correctly without these dependencies. Co-Authored-By: Claude <noreply@anthropic.com>	2025-09-26 09:58:55 -03:00
oleksandr.buhaienko	02533b0474	build: Upgrade to Node 24	2025-09-26 09:18:14 -03:00
Brian Smith	ecf7f1dfc1	feat!: release breaking change as breaking (#634 ) Add README note about typescript BREAKING CHANGE: release breaking change (typescript) as breaking	2025-09-24 13:51:11 -04:00
renovate[bot]	dbec796ceb	chore(deps): update jest monorepo (#633 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-22 06:06:34 +00:00
bydawen	4a797a59cc	test: Add Node 24 to CI matrix (#611 )	2025-09-16 10:35:41 -04:00
renovate[bot]	a8a7348605	chore(deps): update dependency @edx/frontend-platform to v8.5.1 (#632 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-15 04:56:33 +00:00
renovate[bot]	1ff9ecaf15	chore(deps): update dependency @openedx/frontend-build to v14.6.2 (#631 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-08 05:27:56 +00:00
Jacobo Dominguez	8f67fdba68	refactor: replacement of injectIntl (#625 )	2025-08-29 13:05:16 -04:00
renovate[bot]	43684dce91	fix(deps): update dependency @fortawesome/react-fontawesome to v0.2.6 (#630 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-08-25 06:16:18 +00:00
renovate[bot]	3ddfbab1ef	chore(deps): update dependency @openedx/paragon to v23.14.2 (#628 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-08-18 04:53:34 +00:00
renovate[bot]	030758e078	chore(deps): update dependency @edx/frontend-platform to v8.5.0 (#627 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-08-11 04:25:30 +00:00
renovate[bot]	c56b945f0d	chore(deps): update dependency @openedx/paragon to v23.14.1 (#626 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-08-11 04:25:16 +00:00
Fox Piacenti	69750674c3	feat: User menu trigger plugin slots. (#618 )	2025-08-01 09:58:35 -04:00
renovate[bot]	813cbb3156	fix(deps): update dependency @fortawesome/react-fontawesome to v0.2.3 (#624 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-07-28 06:35:01 +00:00
renovate[bot]	20aaa4f2e2	chore(deps): update jest monorepo to v30.0.5 (#623 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-07-28 06:34:40 +00:00
Braden MacDonald	4dfb1b3053	fix: remove unused jest-chain, babel-polyfill, axios-mock-adapter (#603 )	2025-07-21 10:38:01 -07:00
Braden MacDonald	171a770235	feat: enable the use of TypeScript in this repo (#604 ) * feat: enable Typescript in this repo * refactor: rename studio-header files to .ts[x] * chore: fix minor type warnings * chore: add types for frontend-platform * chore: fix type issues * chore: update name of suppressed lint check	2025-07-21 10:24:52 -07:00
renovate[bot]	f47c1ed1e6	fix(deps): update jest monorepo to v30 (#620 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-07-14 06:41:21 +00:00
renovate[bot]	c63da3051b	chore(deps): update dependency @openedx/paragon to v23.14.0 (#616 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-07-07 06:16:34 +00:00
renovate[bot]	04b35786d4	fix(deps): update font awesome to v6.7.2 (#610 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-30 12:47:21 +00:00
renovate[bot]	657e9c0190	chore(deps): update dependency @openedx/frontend-build to v14.6.1 (#609 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-30 12:47:03 +00:00
renovate[bot]	2874c9603f	chore(deps): update dependency @openedx/paragon to v23.13.0 (#614 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-30 06:47:01 +00:00
renovate[bot]	ec5381ea17	chore(deps): update dependency @openedx/paragon to v23.12.2 (#606 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-16 05:48:54 +00:00
renovate[bot]	d5ac171a5b	chore(deps): update dependency @edx/frontend-platform to v8.4.0 (#605 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-16 05:48:36 +00:00
renovate[bot]	3be690b34b	chore(deps): update dependency @openedx/paragon to v23.10.1 (#602 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-09 05:36:02 +00:00
renovate[bot]	441e1542ad	chore(deps): update dependency @edx/frontend-platform to v8.3.9 (#601 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-09 05:35:41 +00:00
renovate[bot]	c1db3d409e	chore(deps): update dependency @openedx/paragon to v23.10.0 (#600 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-02 06:36:18 +00:00
renovate[bot]	0c343cfdf0	chore(deps): update dependency @edx/frontend-platform to v8.3.8 (#599 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-02 06:36:03 +00:00
renovate[bot]	f740d0107e	chore(deps): update dependency react-router-dom to v6.30.1 (#597 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-05-26 06:57:40 +00:00
renovate[bot]	98bc20a282	chore(deps): update dependency @edx/frontend-platform to v8.3.7 (#596 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-05-26 06:57:30 +00:00
renovate[bot]	ca15863c82	chore(deps): update dependency react-router-dom to v6.30.0 (#595 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-05-19 06:08:20 +00:00
renovate[bot]	ff9cb1b238	chore(deps): update dependency @openedx/paragon to v23.6.0 (#594 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-05-19 06:08:14 +00:00
renovate[bot]	67967156f4	chore(deps): update dependency @edx/frontend-platform to v8.3.6 (#592 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-05-12 07:13:35 +00:00
renovate[bot]	e4720ff6b0	chore(deps): update dependency @openedx/paragon to v23.5.1 (#593 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-05-12 07:12:12 +00:00
renovate[bot]	df704ce6d7	chore(deps): update dependency @openedx/frontend-build to v14.6.0 (#591 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-05-05 07:44:35 +00:00
renovate[bot]	a2dc80ffb8	chore(deps): update dependency @edx/frontend-platform to v8.3.5 (#590 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-05-05 07:44:23 +00:00
Brian Smith	95efe7fedd	feat: standardize slot ids (#589 )	2025-04-23 15:45:16 -04:00
renovate[bot]	8df7d928dd	chore(deps): update dependency @openedx/paragon to v23.4.5 (#588 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-04-21 05:55:17 +00:00
renovate[bot]	5e77a47708	chore(deps): update dependency @edx/frontend-platform to v8.3.4 (#587 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-04-21 05:54:58 +00:00
Régis Behmo	8ef3a27a62	chore: remove husky 🪓🐶 We remove husky, which is triggering pre-push git hooks, including running "npm lint". This is causing failures when building Docker images, because "npm clean-install --omit=dev" automatically triggers "npm prepare", which attemps to run "husky". But husky is not listed in the build dependencies, only in devDependencies. As a consequence, package installation is failing with the following error: 14.13 > @edx/frontend-app-ora-grading@0.0.1 prepare 14.13 > husky install 14.13 14.15 sh: 1: husky: not found Similar to: https://github.com/openedx/frontend-app-learning/pull/1622	2025-04-14 11:03:03 -03:00
vladislavkeblysh	e0841996d0	feat: added laber for header dropdown btn	2025-04-07 19:30:59 -07:00
renovate[bot]	90f2e2540e	chore(deps): update dependency @openedx/paragon to v23.4.3 (#583 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-03-31 06:00:52 +00:00
renovate[bot]	6a02c517b9	chore(deps): update dependency @openedx/paragon to v23.4.2 (#582 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-03-24 06:00:25 +00:00
renovate[bot]	5076d55314	chore(deps): update dependency @edx/frontend-platform to v8.3.3 (#581 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-03-24 06:00:17 +00:00
Brian Smith	2f3b9b87ca	feat: add react 18 support (#580 )	2025-03-21 13:40:42 -04:00
Peter Kulko	7970561181	feat: added support Paragon design tokens (#351 ) Co-authored-by: Diana Catalina Olarte <diana.olarte@edunext.co>	2025-03-18 12:41:04 -04:00
Brian Smith	8d46de8fe3	feat!: remove Paragon 21 support (#578 ) BREAKING CHANGE: consumers must now use Paragon 22	2025-03-17 16:00:03 -04:00
renovate[bot]	8341f17d46	chore(deps): update dependency @openedx/paragon to v22.16.0 (#577 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-03-17 05:55:14 +00:00
renovate[bot]	d7c3e5a687	chore(deps): update dependency @edx/frontend-platform to v8.3.1 (#576 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-03-10 05:59:56 +00:00
renovate[bot]	07b1c5bde1	chore(deps): update dependency @openedx/paragon to v22.15.3 (#572 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-03-03 05:29:00 +00:00
renovate[bot]	5512faa9b0	chore(deps): update dependency @edx/frontend-platform to v8.2.1 (#570 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-02-24 05:38:39 +00:00
Kyle McCormick	48c49fe0b2	revert: fix: Remove Studio Maintenance link (#565 ) This reverts commit `a229c34535`. We are temporarily re-introducing the Maintenance link, as the Maintenance Announcements tool is still in use, as discussed on: https://github.com/openedx/edx-platform/pull/35852 For more details, see the related edx-platform revert: https://github.com/openedx/edx-platform/pull/36107 In the future, this will be re-removed: https://github.com/openedx/edx-platform/issues/36263	2025-02-19 14:25:06 -05:00
renovate[bot]	8c7778218b	chore(deps): update dependency @edx/browserslist-config to v1.5.0 (#569 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-02-17 06:14:04 +00:00
Feanil Patel	0dedbbd589	docs: Document the owner and drop the old metadata file. This is going to be changing soon with the module federation work so I think it makes sense to be maintained by the committers-frontend group. I'm also cleaning up the old openedx.yaml file which is obsolete and out of date while I'm adding the new metadata that should be up-to-date.	2025-02-14 16:55:15 -03:00
renovate[bot]	ef0b101fea	chore(deps): update dependency @edx/frontend-platform to v8.1.5 (#566 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-01-20 08:48:36 +00:00
renovate[bot]	edb22316b8	chore(deps): update dependency @openedx/paragon to v22.13.0 (#564 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-12-30 06:16:38 +00:00
renovate[bot]	227a97afa1	chore(deps): update dependency @edx/browserslist-config to v1.4.0 (#563 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-12-30 05:11:57 +00:00
renovate[bot]	d01486e5f7	chore(deps): update dependency react-router-dom to v6.28.1 (#562 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-12-23 06:17:00 +00:00
renovate[bot]	a58f1eaf19	chore(deps): update dependency @edx/frontend-platform to v8.1.3 (#561 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-12-16 06:24:09 +00:00
Brian Smith	a5024c3fde	fix: move `overflow: hidden` to address `mixed-decls` warning (#549 ) https://sass-lang.com/documentation/breaking-changes/mixed-decls/	2024-12-09 12:20:38 -05:00
renovate[bot]	d7be18e717	chore(deps): update dependency @openedx/frontend-build to v14.2.2 (#559 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-12-09 06:44:08 +00:00
renovate[bot]	5e405da37e	fix(deps): update dependency @openedx/frontend-plugin-framework to v1.4.1 (#558 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-12-02 07:19:05 +00:00
renovate[bot]	901f39f42c	chore(deps): update dependency @openedx/frontend-build to v14.2.0 (#557 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-11-25 06:30:07 +00:00
Brian Smith	346a636b76	feat: add `pluginProps` to `CourseInfoSlot` (#550 )	2024-11-18 14:22:32 -05:00
renovate[bot]	34dcc88880	chore(deps): update dependency @openedx/paragon to v22.10.0 (#554 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-11-18 05:02:52 +00:00
Kyle McCormick	a229c34535	fix: Remove Studio Maintenance link (#553 ) This Studio Maintenance app has been broken for a long time, so it is being removed from edx-platform: https://github.com/openedx/edx-platform/pull/35852	2024-11-15 10:52:36 -05:00
renovate[bot]	5d7b4fecf4	chore(deps): update dependency react-router-dom to v6.28.0 (#548 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-11-11 07:42:32 +00:00
renovate[bot]	f04130a7c6	fix(deps): update dependency @openedx/frontend-plugin-framework to v1.4.0	2024-11-04 07:18:59 +00:00
Peter Kulko	cb7774b325	feat: improved SPA routes	2024-11-01 13:03:59 -03:00
Bilal Qamar	3e4eb21d8c	test: Remove support for Node 18 (#536 )	2024-10-31 16:05:16 -04:00
Brian Smith	a346dccd4c	feat: add `frontend-plugin-framework` slots (#545 ) Add the following `frontend-plugin-framework` slots: * `logo_slot` * `desktop_main_menu_slot` * `desktop_secondary_menu_slot` * `mobile_main_menu_slot` * `course_info_slot` * `learning_help_slot` * `desktop_logged_out_items_slot` * `mobile_logged_out_items_slot` * `mobile_user_menu_slot` * `desktop_user_menu_slot` * `learning_user_menu_slot` * `learning_logged_out_items_slot` * `desktop_header_slot`	2024-10-22 12:18:11 -04:00
renovate[bot]	c64a201072	chore(deps): update dependency @openedx/paragon to v22.9.0	2024-10-21 04:45:01 +00:00
renovate[bot]	6496642643	chore(deps): update dependency react-router-dom to v6.27.0	2024-10-14 04:43:06 +00:00
renovate[bot]	a6c36654b4	chore(deps): update dependency @edx/frontend-platform to v8.1.2	2024-10-07 07:34:11 +00:00
Rômulo Penido	ae5253c822	feat: expose containerProps in StudioHeader [FC-0062] (#529 )	2024-10-01 09:20:34 -04:00
renovate[bot]	e44001e945	chore(deps): update dependency @openedx/paragon to v22.8.1	2024-09-30 10:31:20 +00:00
renovate[bot]	e07cf665a4	chore(deps): update dependency @openedx/frontend-build to v14.1.5	2024-09-30 06:36:53 +00:00
Brian Smith	8213ee7460	feat: add frontend-plugin-framework `LogoSlot` (#528 )	2024-09-26 16:07:41 -04:00
renovate[bot]	8a7d6eecdf	chore(deps): update dependency react-router-dom to v6.26.2	2024-09-23 07:57:54 +00:00
renovate[bot]	a2497eeb22	chore(deps): update dependency @openedx/frontend-build to v14.1.4	2024-09-23 07:57:36 +00:00
Bilal Qamar	a703abad76	build: Upgrade to Node 20 (#535 )	2024-09-19 17:50:06 -04:00
Bilal Qamar	3f4d987d12	test: Add Node 20 to CI matrix (#533 )	2024-09-16 11:42:21 -04:00