fix: expose app entrypoint in webpack dev config for example app

.github/workflows/ci.yml

@@ -11,21 +11,21 @@ jobs:
     runs-on: ubuntu-latest
     steps:
     - name: Checkout
-      uses: actions/checkout@v5
+      uses: actions/checkout@v4
       with:
         fetch-depth: 0
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Nodejs
-      uses: actions/setup-node@v5
+      uses: actions/setup-node@v4
       with:
-        node-version-file: '.nvmrc'
+        node-version: ${{ env.NODE_VER }}
     - 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

.github/workflows/lockfileversion-check.yml

@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master
+    uses: openedx/.github/.github/workflows/lockfile-check.yml@master

.github/workflows/release.yml

@@ -4,26 +4,19 @@ on:
     branches:
     - master
     - alpha
-permissions:
-  contents: read # for checkout
 jobs:
   release:
     name: Release
     runs-on: ubuntu-latest
-    permissions:
-      contents: write # to be able to publish a GitHub release
-      issues: write # to be able to comment on released issues
-      pull-requests: write # to be able to comment on released pull requests
-      id-token: write # to enable use of OIDC for trusted publishing and npm provenance
     steps:
     - name: Checkout
-      uses: actions/checkout@v5
+      uses: actions/checkout@v4
       with:
         fetch-depth: 0
     - name: Setup Nodejs Env
       run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Node.js
-      uses: actions/setup-node@v5
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ env.NODE_VER }}
     - name: Install dependencies
@@ -32,8 +25,6 @@ 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
@@ -46,6 +37,9 @@ jobs:
     - name: Build
       run: npm run build
     - name: Release
+      uses: cycjimmy/semantic-release-action@v3
+      with:
+        semantic_version: 16
       env:
         GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
-      run: npx semantic-release@25
+        NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}

.nvmrc

@@ -1 +1 @@
-24
+18

README.rst

@@ -35,7 +35,6 @@ 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
 ====================
@@ -72,9 +71,9 @@ Cloning and Startup
 
     ``git clone https://github.com/openedx/frontend-component-header.git``
 
-  2. Use node v24.x.
+  2. Use node v18.x.
 
-    The current version of the micro-frontend build scripts support node 24.
+    The current version of the micro-frontend build scripts support node 18.
     Using other major versions of node *may* work, but this is unsupported.  For
     convenience, this repository includes an .nvmrc file to help in setting the
     correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
@@ -96,12 +95,6 @@ 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
 ========
 

catalog-info.yaml

@@ -1,14 +0,0 @@
-# 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"

example/index.js

@@ -1,3 +1,5 @@
+import 'babel-polyfill';
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { initialize, getConfig, subscribe, APP_READY } from '@edx/frontend-platform';

example/index.scss

@@ -1,4 +1,6 @@
-@use "@openedx/paragon/dist/core.min.css" as paragonCore;
+@import "@edx/brand/paragon/fonts";
-@use "@openedx/paragon/dist/light.min.css" as paragonLight;
+@import "@edx/brand/paragon/variables";
+@import "@openedx/paragon/scss/core/core";
+@import "@edx/brand/paragon/overrides";
 
 @import "@edx/frontend-component-header/index";

openedx.yaml

@@ -0,0 +1,8 @@
+# openedx.yaml
+
+---
+owner: edx/fedx-team
+tags:
+  - library
+  - component
+  - react

package.json

@@ -10,16 +10,18 @@
     "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"
@@ -33,41 +35,42 @@
   "devDependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-platform": "^8.3.1",
+    "@edx/frontend-platform": "8.1.1",
-    "@openedx/frontend-build": "^14.3.2",
+    "@edx/reactifex": "^2.1.1",
-    "@openedx/paragon": "^23.0.0",
+    "@openedx/frontend-build": "14.1.2",
-    "@testing-library/dom": "^10.4.0",
+    "@openedx/paragon": "22.7.0",
+    "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/react": "10.4.9",
-    "jest": "30.2.0",
+    "husky": "8.0.3",
-    "jest-environment-jsdom": "^30.0.0",
+    "jest": "29.7.0",
+    "jest-chain": "1.1.6",
     "prop-types": "15.8.1",
-    "react": "^18.3.1",
+    "react": "17.0.2",
-    "react-dom": "^18.3.1",
+    "react-dom": "17.0.2",
-    "react-redux": "^8.1.1",
+    "react-redux": "7.2.9",
-    "react-router-dom": "6.30.2",
+    "react-router-dom": "6.26.1",
-    "react-test-renderer": "^18.3.1",
+    "react-test-renderer": "17.0.2",
     "redux": "4.2.1",
-    "redux-saga": "1.4.2",
+    "redux-saga": "1.3.0"
-    "ts-jest": "^29.4.4"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.7.2",
+    "@fortawesome/fontawesome-svg-core": "6.6.0",
-    "@fortawesome/free-brands-svg-icons": "6.7.2",
+    "@fortawesome/free-brands-svg-icons": "6.6.0",
-    "@fortawesome/free-regular-svg-icons": "6.7.2",
+    "@fortawesome/free-regular-svg-icons": "6.6.0",
-    "@fortawesome/free-solid-svg-icons": "6.7.2",
+    "@fortawesome/free-solid-svg-icons": "6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@openedx/frontend-plugin-framework": "^1.7.0",
+    "axios-mock-adapter": "1.22.0",
-    "classnames": "^2.5.1",
+    "babel-polyfill": "6.26.0",
-    "react-responsive": "10.0.1",
+    "jest-environment-jsdom": "^29.7.0",
+    "react-responsive": "8.2.0",
     "react-transition-group": "4.4.5"
   },
   "peerDependencies": {
     "@edx/frontend-platform": "^7.0.0 || ^8.0.0",
-    "@openedx/paragon": ">= 22.0.0 < 24.0.0",
+    "@openedx/paragon": ">= 21.5.7 < 23.0.0",
     "prop-types": "^15.5.10",
-    "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+    "react": "^16.9.0 || ^17.0.0",
-    "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.9.0 || ^17.0.0"
-    "react-router-dom": "^6.14.2"
   }
 }

src/DesktopHeader.jsx

@@ -0,0 +1,222 @@
+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);

src/Header.jsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import Responsive from 'react-responsive';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } 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 DesktopHeaderSlot from './plugin-slots/DesktopHeaderSlot';
+import DesktopHeader from './DesktopHeader';
-import MobileHeaderSlot from './plugin-slots/MobileHeaderSlot';
+import MobileHeader from './MobileHeader';
 
 import messages from './Header.messages';
 
@@ -47,10 +47,9 @@ subscribe(APP_CONFIG_INITIALIZED, () => {
  * See the documentation for the structure of user menu item.
  */
 const Header = ({
-  mainMenuItems, secondaryMenuItems, userMenuItems,
+  intl, mainMenuItems, secondaryMenuItems, userMenuItems,
 }) => {
   const { authenticatedUser, config } = useContext(AppContext);
-  const intl = useIntl();
 
   const defaultMainMenu = [
     {
@@ -124,10 +123,10 @@ const Header = ({
   return (
     <>
       <Responsive maxWidth={769}>
-        <MobileHeaderSlot props={props} />
+        <MobileHeader {...props} />
       </Responsive>
       <Responsive minWidth={769}>
-        <DesktopHeaderSlot props={props} />
+        <DesktopHeader {...props} />
       </Responsive>
     </>
   );
@@ -140,6 +139,7 @@ Header.defaultProps = {
 };
 
 Header.propTypes = {
+  intl: intlShape.isRequired,
   mainMenuItems: PropTypes.oneOfType([
     PropTypes.node,
     PropTypes.array,
@@ -159,4 +159,4 @@ Header.propTypes = {
   })),
 };
 
-export default Header;
+export default injectIntl(Header);

src/Header.messages.jsx

@@ -61,6 +61,11 @@ 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',

src/Header.test.jsx

@@ -33,7 +33,6 @@ 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();
@@ -57,7 +56,6 @@ 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();
@@ -76,7 +74,6 @@ 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();

src/Logo.jsx

@@ -1,23 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Logo = ({
+const Logo = ({ src, alt, ...attributes }) => (
+  <img src={src} alt={alt} {...attributes} />
+);
+
+Logo.propTypes = {
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string.isRequired,
+};
+
+const LinkedLogo = ({
   href,
   src,
   alt,
   ...attributes
 }) => (
-  <a href={href} className="logo" {...attributes}>
+  <a href={href} {...attributes}>
     <img className="d-block" src={src} alt={alt} />
   </a>
 );
 
-export const logoDataShape = {
+LinkedLogo.propTypes = {
   href: PropTypes.string.isRequired,
   src: PropTypes.string.isRequired,
   alt: PropTypes.string.isRequired,
 };
 
-Logo.propTypes = logoDataShape;
+export { LinkedLogo, Logo };
-
 export default Logo;

src/Menu/menu.scss

@@ -1,45 +1,45 @@
 .menu {
   position: relative;
 }
-
 .menu-content {
   position: absolute;
   top: 100%;
   z-index: 10;
-  background: var(--pgn-color-white, #fff);
+  background: #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 {
+}

src/MobileHeader.jsx

@@ -0,0 +1,233 @@
+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);

src/desktop-header/DesktopHeader.jsx

@@ -1,131 +0,0 @@
-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;

src/desktop-header/DesktopHeaderMainOrSecondaryMenu.jsx

@@ -1,59 +0,0 @@
-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;

src/desktop-header/DesktopHeaderUserMenu.jsx

@@ -1,39 +0,0 @@
-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;

src/desktop-header/DesktopLoggedOutItems.jsx

@@ -1,24 +0,0 @@
-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;

src/desktop-header/DesktopUserMenuToggle.jsx

@@ -1,20 +0,0 @@
-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;

src/frontend-platform.d.ts

@@ -1,41 +0,0 @@
-// 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;
-}

src/index.scss

@@ -1,9 +1,6 @@
 $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';
@@ -24,9 +21,8 @@ $rounded-pill: 50rem  !default;
   padding: .75rem;
   justify-content: center;
   align-items:center;
-
   &:hover, &:focus {
-    background: rgba(0, 0, 0, .1);
+    background: rgba(0,0,0,.1);
   }
 }
 
@@ -40,12 +36,17 @@ $rounded-pill: 50rem  !default;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      padding-bottom: calc(var(--pgn-spacing-spacer-base, $spacer)* 0.1);
+      padding-bottom: 0.1rem;
     }
   }
 
-  .user-dropdown .btn {
+  .user-dropdown {
-    height: 3rem;
+    .btn {
+      height: 3rem;
+      // @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+      //   padding: 0 0.5rem;
+      // }
+    }
   }
 }
 
@@ -62,7 +63,6 @@ $rounded-pill: 50rem  !default;
     text-decoration: none;
     cursor: pointer;
   }
-
   img {
     height: 1.5rem;
   }
@@ -70,22 +70,19 @@ $rounded-pill: 50rem  !default;
 
 
 .site-header-desktop {
-  box-shadow: 0 1px 0 0 rgba(0, 0, 0, .1);
+  box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
-  background: var(--pgn-color-white, $white);
+  background: $white;
-
   .nav-link {
     text-decoration: none;
   }
-
   .logo {
     display: block;
     box-sizing: content-box;
     position: relative;
     top: -.05em;
     height: 1.75rem;
-    padding: var(--pgn-spacing-spacer-base, $spacer) 0;
+    padding: 1rem 0;
-    margin-right: var(--pgn-spacing-spacer-base, $spacer);
+    margin-right: 1rem;
-
     img {
       display: block;
       height: 100%;
@@ -96,42 +93,38 @@ $rounded-pill: 50rem  !default;
     .nav-link:focus,
     .nav-link.active,
     .expanded .nav-link {
-      background: var(--pgn-color-bg-active, $component-active-bg);
+      background: $component-active-bg;
-      color: var(--pgn-color-active, $component-active-color);
+      color: $component-active-color;
     }
   }
   .main-nav {
     .nav-link {
-      padding: 1.125rem var(--pgn-spacing-spacer-base, $spacer);
+      padding: 1.125rem 1rem;
       text-decoration: none;
       font-weight: 500;
       letter-spacing: .01em;
     }
-
     .nav-link:hover,
     .nav-link:focus,
     .nav-link.active,
     .expanded .nav-link {
-      background: var(--pgn-color-bg-active, $component-active-bg);
+      background: $component-active-bg;
-      color: var(--pgn-color-active, $component-active-color);
+      color: $component-active-color;
     }
-
     .menu {
       position: static;
-
       .menu-content {
-        border-top: solid 2px var(--pgn-color-bg-active);
+        border-top: solid 2px $component-active-bg;
         left: 0;
         right: 0;
-        box-shadow: var(--pgn-elevation-box-shadow-down-1, 0 1px 2px rgba(0,0,0,.25));
+        box-shadow: 0 1px 2px rgba(0,0,0,.25);
         border-bottom-left-radius: 2px;
         border-bottom-right-radius: 2px;
-        padding: var(--pgn-spacing-spacer-base, $spacer);
+        padding: 1rem;
       }
     }
   }
-
   .search-input {
-    border-radius: var(--pgn-size-rounded-pill, $rounded-pill);
+    border-radius: $rounded-pill;
   }
 }

src/learning-header/AnonymousUserMenu.jsx

@@ -2,26 +2,31 @@ import React from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { getLoginRedirectUrl } from '@edx/frontend-platform/auth';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import LearningLoggedOutItemsSlot from '../plugin-slots/LearningLoggedOutItemsSlot';
+import { Button } from '@openedx/paragon';
 
 import genericMessages from '../generic/messages';
 
-const AnonymousUserMenu = () => {
+const AnonymousUserMenu = ({ intl }) => (
-  const intl = useIntl();
+  <div>
-  const buttonsInfo = [
+    <Button
-    {
+      className="mr-3"
-      message: intl.formatMessage(genericMessages.registerSentenceCase),
+      variant="outline-primary"
-      href: `${getConfig().LMS_BASE_URL}/register?next=${encodeURIComponent(global.location.href)}`,
+      href={`${getConfig().LMS_BASE_URL}/register?next=${encodeURIComponent(global.location.href)}`}
-    },
+    >
-    {
+      {intl.formatMessage(genericMessages.registerSentenceCase)}
-      message: intl.formatMessage(genericMessages.signInSentenceCase),
+    </Button>
-      href: getLoginRedirectUrl(global.location.href),
+    <Button
-      variant: 'primary',
+      variant="primary"
-    },
+      href={`${getLoginRedirectUrl(global.location.href)}`}
-  ];
+    >
+      {intl.formatMessage(genericMessages.signInSentenceCase)}
+    </Button>
+  </div>
+);
 
-  return <LearningLoggedOutItemsSlot buttonsInfo={buttonsInfo} />;
+AnonymousUserMenu.propTypes = {
+  intl: intlShape.isRequired,
 };
 
-export default AnonymousUserMenu;
+export default injectIntl(AnonymousUserMenu);

src/learning-header/AuthenticatedUserDropdown.jsx

@@ -1,55 +1,56 @@
 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 { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } 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 = ({ username }) => {
+const AuthenticatedUserDropdown = ({ intl, username }) => {
-  const intl = useIntl();
+  const dashboardMenuItem = (
-  const dropdownItems = [
+    <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>
-    {
+      {intl.formatMessage(messages.dashboard)}
-      message: intl.formatMessage(messages.dashboard),
+    </Dropdown.Item>
-      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 (
-    <Dropdown className="user-dropdown ml-3">
+    <>
-      <Dropdown.Toggle variant="outline-primary" aria-label={intl.formatMessage(messages.userOptionsDropdownLabel)}>
+      <a className="text-gray-700" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>
-        <LearningUserMenuToggleSlot label={username} icon={faUserCircle} />
+      <Dropdown className="user-dropdown ml-3">
-      </Dropdown.Toggle>
+        <Dropdown.Toggle variant="outline-primary">
-      <Dropdown.Menu className="dropdown-menu-right">
+          <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
-        <LearningUserMenuSlot items={dropdownItems} />
+          <span data-hj-suppress className="d-none d-md-inline">
-      </Dropdown.Menu>
+            {username}
-    </Dropdown>
+          </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>
+    </>
   );
 };
 
 AuthenticatedUserDropdown.propTypes = {
+  intl: intlShape.isRequired,
   username: PropTypes.string.isRequired,
 };
 
-export default AuthenticatedUserDropdown;
+export default injectIntl(AuthenticatedUserDropdown);

src/learning-header/LearningHeader.jsx

@@ -1,28 +1,38 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } 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';
-import LearningHelpSlot from '../plugin-slots/LearningHelpSlot';
+
+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,
+};
 
 const LearningHeader = ({
-  courseOrg,
+  courseOrg, courseNumber, courseTitle, intl, showUserDropdown,
-  courseNumber,
-  courseTitle,
-  showUserDropdown,
 }) => {
-  const intl = useIntl();
   const { authenticatedUser } = useContext(AppContext);
 
   const headerLogo = (
-    <LogoSlot
+    <LinkedLogo
+      className="logo"
       href={`${getConfig().LMS_BASE_URL}/dashboard`}
       src={getConfig().LOGO_URL}
       alt={getConfig().SITE_NAME}
@@ -34,16 +44,14 @@ 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 d-flex" style={{ lineHeight: 1 }}>
+        <div className="flex-grow-1 course-title-lockup" style={{ lineHeight: 1 }}>
-          <CourseInfoSlot courseOrg={courseOrg} courseNumber={courseNumber} courseTitle={courseTitle} />
+          <span className="d-block small m-0">{courseOrg} {courseNumber}</span>
+          <span className="d-block m-0 font-weight-bold course-title">{courseTitle}</span>
         </div>
         {showUserDropdown && authenticatedUser && (
-        <>
+        <AuthenticatedUserDropdown
-          <LearningHelpSlot />
+          username={authenticatedUser.username}
-          <AuthenticatedUserDropdown
+        />
-            username={authenticatedUser.username}
-          />
-        </>
         )}
         {showUserDropdown && !authenticatedUser && (
         <AnonymousUserMenu />
@@ -54,9 +62,10 @@ const LearningHeader = ({
 };
 
 LearningHeader.propTypes = {
-  courseOrg: courseInfoDataShape.courseOrg,
+  courseOrg: PropTypes.string,
-  courseNumber: courseInfoDataShape.courseNumber,
+  courseNumber: PropTypes.string,
-  courseTitle: courseInfoDataShape.courseTitle,
+  courseTitle: PropTypes.string,
+  intl: intlShape.isRequired,
   showUserDropdown: PropTypes.bool,
 };
 
@@ -67,4 +76,4 @@ LearningHeader.defaultProps = {
   showUserDropdown: true,
 };
 
-export default LearningHeader;
+export default injectIntl(LearningHeader);

src/learning-header/LearningHeaderCourseInfo.jsx

@@ -1,23 +0,0 @@
-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;

src/learning-header/LearningHeaderHelpLink.jsx

@@ -1,14 +0,0 @@
-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;

src/learning-header/LearningHeaderUserMenuItems.jsx

@@ -1,21 +0,0 @@
-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;

src/learning-header/LearningLoggedOutButtons.jsx

@@ -1,26 +0,0 @@
-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;

src/learning-header/LearningUserMenuToggle.jsx

@@ -1,28 +0,0 @@
-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;

src/learning-header/messages.js

@@ -36,11 +36,6 @@ 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;

src/mobile-header/MobileHeader.jsx

@@ -1,145 +0,0 @@
-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;

src/mobile-header/MobileHeaderMainMenu.jsx

@@ -1,58 +0,0 @@
-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;

src/mobile-header/MobileHeaderUserMenu.jsx

@@ -1,35 +0,0 @@
-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;

src/mobile-header/MobileLoggedOutItems.jsx

@@ -1,25 +0,0 @@
-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;

src/mobile-header/MobileUserMenuToggle.jsx

@@ -1,14 +0,0 @@
-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;

src/plugin-slots/CourseInfoSlot/README.md

@@ -1,128 +0,0 @@
-# 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;
-```

src/plugin-slots/CourseInfoSlot/index.jsx

@@ -1,34 +0,0 @@
-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;

src/plugin-slots/DesktopHeaderSlot/README.md

@@ -1,44 +0,0 @@
-# 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;
-```

src/plugin-slots/DesktopHeaderSlot/index.jsx

@@ -1,21 +0,0 @@
-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;

src/plugin-slots/DesktopLoggedOutItemsSlot/README.md

@@ -1,137 +0,0 @@
-# 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;
-```
-

src/plugin-slots/DesktopLoggedOutItemsSlot/index.jsx

@@ -1,23 +0,0 @@
-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;

src/plugin-slots/DesktopMainMenuSlot/README.md

@@ -1,190 +0,0 @@
-# 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;
-```

src/plugin-slots/DesktopMainMenuSlot/index.jsx

@@ -1,23 +0,0 @@
-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;

src/plugin-slots/DesktopSecondaryMenuSlot/README.md

@@ -1,132 +0,0 @@
-# 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;
-```
-

src/plugin-slots/DesktopSecondaryMenuSlot/index.jsx

@@ -1,23 +0,0 @@
-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;

src/plugin-slots/DesktopUserMenuSlot/README.md

@@ -1,144 +0,0 @@
-# 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;
-```

src/plugin-slots/DesktopUserMenuSlot/index.jsx

@@ -1,23 +0,0 @@
-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;

src/plugin-slots/DesktopUserMenuToggleSlot/README.md

@@ -1,74 +0,0 @@
-# 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;
-```

src/plugin-slots/DesktopUserMenuToggleSlot/index.jsx

@@ -1,21 +0,0 @@
-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;

src/plugin-slots/LearningHelpSlot/README.md

@@ -1,44 +0,0 @@
-# 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;
-```

src/plugin-slots/LearningHelpSlot/index.jsx

@@ -1,11 +0,0 @@
-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;

src/plugin-slots/LearningLoggedOutItemsSlot/README.md

@@ -1,135 +0,0 @@
-# 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;
-```
-

src/plugin-slots/LearningLoggedOutItemsSlot/index.jsx

@@ -1,21 +0,0 @@
-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;

src/plugin-slots/LearningUserMenuSlot/README.md

@@ -1,133 +0,0 @@
-# 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;
-```

src/plugin-slots/LearningUserMenuSlot/index.jsx

@@ -1,21 +0,0 @@
-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;

src/plugin-slots/LearningUserMenuToggleSlot/README.md

@@ -1,74 +0,0 @@
-# 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;
-```

src/plugin-slots/LearningUserMenuToggleSlot/index.jsx

@@ -1,22 +0,0 @@
-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;

src/plugin-slots/LogoSlot/README.md

@@ -1,72 +0,0 @@
-# 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;
-```

src/plugin-slots/LogoSlot/index.jsx

@@ -1,21 +0,0 @@
-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;

src/plugin-slots/MobileHeaderSlot/README.md

@@ -1,44 +0,0 @@
-# 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;
-```

src/plugin-slots/MobileHeaderSlot/index.jsx

@@ -1,21 +0,0 @@
-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;

src/plugin-slots/MobileLoggedOutItemsSlot/README.md

@@ -1,136 +0,0 @@
-# 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;
-```

src/plugin-slots/MobileLoggedOutItemsSlot/index.jsx

@@ -1,23 +0,0 @@
-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;

src/plugin-slots/MobileMainMenuSlot/README.md

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