Merge pull request 'Andal LND - Header styling customizations and logo slot' (#2 ) from andal-lnd/front-end into master

Reviewed-on: #2 Reviewed-by: Damar <damar@noreply.git.andalsoftware.com> Reviewed-by: tauficls <tauficls@noreply.git.andalsoftware.com>
Andal LND - Header styling customizations and logo slot
2026-04-01 08:39:51 +07:00 · 2026-03-31 13:38:29 +07:00 · 2026-01-27 09:14:11 -05:00 · 2025-12-22 06:40:46 +00:00 · 2025-12-15 05:54:58 +00:00 · 2025-12-01 08:59:11 +00:00
100 changed files with 16288 additions and 4484 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -11,11 +11,11 @@ jobs:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
-      uses: actions/checkout@v4
+      uses: actions/checkout@v5
      with:
        fetch-depth: 0
    - name: Setup Nodejs
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v5
      with:
        node-version-file: '.nvmrc'
    - name: Install dependencies
@@ -24,6 +24,8 @@ jobs:
      run: make validate-no-uncommitted-package-lock-changes
    - name: Lint
      run: npm run lint
+    - name: Type check
+      run: npm run types
    - name: Test
      run: npm run test
    - name: Build
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -4,19 +4,26 @@ 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@v4
+      uses: actions/checkout@v5
      with:
        fetch-depth: 0
    - name: Setup Nodejs Env
      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
    - name: Setup Node.js
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v5
      with:
        node-version: ${{ env.NODE_VER }}
    - name: Install dependencies
@@ -25,6 +32,8 @@ jobs:
      run: make validate-no-uncommitted-package-lock-changes
    - name: Lint
      run: npm run lint
+    - name: Type check
+      run: npm run types
    - name: Test
      run: npm run test
    - name: i18n_extract
@@ -37,9 +46,6 @@ 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 }}
-        NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
+      run: npx semantic-release@25
--- a/.gitignore
+++ b/.gitignore
@@ -9,4 +9,4 @@ module.config.js
 .idea/

 .vscode
-src/i18n/messages
+src/i18n/messages
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-20
+24
--- a/Logo.svg
+++ b/Logo.svg
@@ -0,0 +1,17 @@
+<svg width="518" height="87" viewBox="0 0 518 87" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M512.654 43.4098C512.654 35.747 509.327 31.2325 503.564 31.2325C497.861 31.2325 494.474 35.747 494.474 43.4098C494.474 51.0726 497.861 55.5871 503.564 55.5871C509.327 55.5871 512.654 51.0726 512.654 43.4098ZM518 56.0029C518 67.111 513.188 72.3978 503.029 72.3978C499.286 72.3978 496.019 71.8632 492.87 70.6751V65.5072C496.019 67.1704 499.049 68.0021 502.198 68.0021C509.148 68.0021 512.654 64.3786 512.654 56.9534V54.3397C510.455 58.1414 507.01 60.0422 502.257 60.0422C498.277 60.0422 495.009 58.5572 492.573 55.5277C490.137 52.4982 488.949 48.4589 488.949 43.4098C488.949 38.3607 490.137 34.3807 492.573 31.3513C495.009 28.3218 498.277 26.7773 502.257 26.7773C507.01 26.7773 510.455 28.6782 512.654 32.4799V27.5496H518V56.0029Z" fill="black"/>
+<path d="M484.03 50.3004C484.149 55.7653 484.209 59.864 484.209 59.864L478.743 59.9234C478.743 59.9234 478.862 60.7551 478.683 51.0726C478.565 45.4294 478.565 40.6179 478.565 40.6179C478.565 34.4401 476.129 31.4107 471.376 31.4107C465.613 31.4107 462.049 35.3312 462.049 41.6871V60.0422H456.702C456.702 60.0422 456.702 46.7363 456.702 37.1726C456.702 32.5987 453.375 33.0145 453.375 33.0145V27.5496C453.375 27.5496 456.88 27.5496 458.841 29.688C460.564 31.5889 460.623 33.7273 460.623 33.7273C461.811 29.7474 466.802 26.7773 472.03 26.7773C479.456 26.7773 483.911 31.4701 483.911 40.4397C483.911 40.4397 483.911 41.5089 484.03 50.3004Z" fill="black"/>
+<path d="M443.611 27.5485H448.958C448.958 27.5485 448.661 42.8147 448.779 51.4873C448.779 55.5861 452.166 55.1702 452.166 55.1702V60.2194C452.166 60.2194 443.492 60.0412 443.611 52.2002C443.73 42.6365 443.611 27.5485 443.611 27.5485ZM446.225 14.3613C444.264 14.3613 442.66 15.9652 442.66 17.9254C442.66 19.8857 444.264 21.4895 446.225 21.4895C448.185 21.4895 449.789 19.9451 449.789 17.9254C449.789 15.9058 448.185 14.3613 446.225 14.3613Z" fill="black"/>
+<path d="M436.376 50.3004C436.495 55.7653 436.554 59.864 436.554 59.864L431.089 59.9234C431.089 59.9234 431.207 60.7551 431.029 51.0726C430.91 45.4294 430.91 40.6179 430.91 40.6179C430.91 34.4401 428.475 31.4107 423.722 31.4107C417.959 31.4107 414.395 35.3312 414.395 41.6871V60.0422H409.048C409.048 60.0422 409.048 46.7363 409.048 37.1726C409.048 32.5987 405.721 33.0145 405.721 33.0145V27.5496C405.721 27.5496 409.226 27.5496 411.186 29.688C412.909 31.5889 412.969 33.7273 412.969 33.7273C414.157 29.7474 419.147 26.7773 424.375 26.7773C431.801 26.7773 436.257 31.4701 436.257 40.4397C436.257 40.4397 436.257 41.5089 436.376 50.3004Z" fill="black"/>
+<path d="M403.931 32.4208C402.208 32.5396 400.961 32.5396 399 33.49C396.386 34.7969 393.237 37.7076 393.237 42.9349C393.237 49.8849 393.237 60.0426 393.237 60.0426H387.891V27.5499H393.237V32.599C395.257 29.5695 397.337 27.3717 401.911 27.1935C402.684 27.1341 402.446 27.1341 403.931 27.1935V32.4208Z" fill="black"/>
+<path d="M369.696 43.7068C365.359 43.7068 362.388 44.182 360.725 45.1918C359.061 46.2017 358.23 47.8649 358.23 50.241C358.23 54.0427 360.903 56.4187 365.181 56.4187C371.122 56.4187 374.983 51.8448 374.983 44.8948V43.7068H369.696ZM380.271 51.9636C380.271 56.1811 384.251 55.8247 384.251 55.8247V59.9234C384.251 59.9234 381.221 60.2799 379.142 58.6166C377.241 57.1316 376.112 54.9337 376.112 54.9337C373.676 58.9136 369.042 60.8739 363.755 60.8739C357.101 60.8739 352.883 56.8346 352.883 50.5974C352.883 43.291 357.814 39.5487 367.498 39.5487H374.983V39.0141C374.983 34.0837 372.191 31.2919 366.309 31.2919C363.577 31.2919 360.071 33.3709 360.19 36.935L355.259 37.0538C355.378 28.6782 362.923 26.7773 366.428 26.7773C375.577 26.7773 380.33 31.5889 380.33 41.5089C380.33 41.5089 380.211 47.8055 380.271 51.9636Z" fill="black"/>
+<path d="M349.423 42.4594V45.073H324.887C325.362 52.4388 329.402 56.3593 336.472 56.3593C340.571 56.3593 344.374 55.4089 348.176 53.3299V58.379C344.374 60.0422 340.274 60.8739 336.175 60.8739C331.006 60.8739 326.848 59.3888 323.818 56.3593C320.788 53.3299 319.303 49.2906 319.303 44.1226C319.303 38.8359 320.729 34.6184 323.58 31.4701C326.491 28.3218 330.353 26.7773 335.224 26.7773C339.621 26.7773 343.067 28.203 345.621 30.9949C348.176 33.7867 349.423 37.6478 349.423 42.4594ZM344.076 40.9149C344.017 35.0342 340.571 31.2919 335.284 31.2919C329.343 31.2919 325.6 34.7966 325.065 40.9149H344.076Z" fill="black"/>
+<path d="M308.35 14.897H313.696C313.696 14.897 313.875 38.4794 313.875 51.1914C313.875 55.4089 319.459 55.3495 319.459 55.3495L319.4 60.161C319.4 60.161 313.578 60.3392 310.488 56.0029C309.003 53.9832 308.35 51.726 308.35 48.7559C308.35 35.3905 308.35 14.897 308.35 14.897Z" fill="black"/>
+<path d="M279.439 14.897H284.786C284.786 14.897 284.965 38.4794 284.965 51.1914C284.965 55.4089 290.549 55.3495 290.549 55.3495L290.49 60.161C290.49 60.161 284.667 60.3392 281.578 56.0029C280.093 53.9832 279.439 51.726 279.439 48.7559C279.439 35.3905 279.439 14.897 279.439 14.897Z" fill="black"/>
+<path d="M261.065 43.7068C256.728 43.7068 253.757 44.182 252.094 45.1918C250.431 46.2017 249.599 47.8649 249.599 50.241C249.599 54.0427 252.272 56.4187 256.55 56.4187C262.491 56.4187 266.352 51.8448 266.352 44.8948V43.7068H261.065ZM271.64 51.9636C271.64 56.1811 275.62 55.8247 275.62 55.8247V59.9234C275.62 59.9234 272.59 60.2799 270.511 58.6166C268.61 57.1316 267.481 54.9337 267.481 54.9337C265.045 58.9136 260.411 60.8739 255.124 60.8739C248.47 60.8739 244.252 56.8346 244.252 50.5974C244.252 43.291 249.183 39.5487 258.867 39.5487H266.352V39.0141C266.352 34.0837 263.56 31.2919 257.678 31.2919C254.946 31.2919 251.44 33.3709 251.559 36.935L246.628 37.0538C246.747 28.6782 254.292 26.7773 257.797 26.7773C266.946 26.7773 271.699 31.5889 271.699 41.5089C271.699 41.5089 271.58 47.8055 271.64 51.9636Z" fill="black"/>
+<path d="M233.216 32.4799V14.897H238.563C238.563 14.897 238.682 38.42 238.682 50.8943C238.682 55.2901 238.682 59.864 238.682 59.864L233.81 59.9234L233.87 55.4089C231.671 59.27 227.572 60.8738 222.819 60.8738C218.898 60.8738 215.69 59.3294 213.195 56.1811C210.759 53.0328 209.512 48.9341 209.512 43.8256C209.512 38.717 210.759 34.6183 213.195 31.47C215.69 28.3217 218.898 26.7773 222.819 26.7773C227.572 26.7773 231.018 28.6187 233.216 32.4799ZM215.037 43.8256C215.037 51.6666 218.423 56.4187 224.126 56.4187C229.77 56.4187 233.216 51.6666 233.216 43.8256C233.216 35.9845 229.77 31.2324 224.126 31.2324C218.423 31.2324 215.037 35.9845 215.037 43.8256Z" fill="black"/>
+<path d="M204.591 50.3004C204.71 55.7653 204.769 59.864 204.769 59.864L199.303 59.9234C199.303 59.9234 199.422 60.7551 199.244 51.0726C199.125 45.4294 199.125 40.6179 199.125 40.6179C199.125 34.4401 196.689 31.4107 191.937 31.4107C186.174 31.4107 182.609 35.3312 182.609 41.6871V60.0422H177.262C177.262 60.0422 177.262 46.7363 177.262 37.1726C177.262 32.5987 173.936 33.0145 173.936 33.0145V27.5496C173.936 27.5496 177.441 27.5496 179.401 29.688C181.124 31.5889 181.183 33.7273 181.183 33.7273C182.372 29.7474 187.362 26.7773 192.59 26.7773C200.016 26.7773 204.472 31.4701 204.472 40.4397C204.472 40.4397 204.472 41.5089 204.591 50.3004Z" fill="black"/>
+<path d="M159.067 43.7068C154.73 43.7068 151.759 44.182 150.096 45.1918C148.432 46.2017 147.601 47.8649 147.601 50.241C147.601 54.0427 150.274 56.4187 154.552 56.4187C160.493 56.4187 164.354 51.8448 164.354 44.8948V43.7068H159.067ZM169.642 51.9636C169.642 56.1811 173.622 55.8247 173.622 55.8247V59.9234C173.622 59.9234 170.592 60.2799 168.513 58.6166C166.612 57.1316 165.483 54.9337 165.483 54.9337C163.047 58.9136 158.413 60.8739 153.126 60.8739C146.472 60.8739 142.254 56.8346 142.254 50.5974C142.254 43.291 147.185 39.5487 156.869 39.5487H164.354V39.0141C164.354 34.0837 161.562 31.2919 155.68 31.2919C152.948 31.2919 149.442 33.3709 149.561 36.935L144.63 37.0538C144.749 28.6782 152.294 26.7773 155.799 26.7773C164.948 26.7773 169.701 31.5889 169.701 41.5089C169.701 41.5089 169.582 47.8055 169.642 51.9636Z" fill="black"/>
+<path d="M8.40549 86.8917C3.76365 86.8917 0 83.0908 0 78.4008V55.9119C0 51.2229 3.76265 47.421 8.40549 47.421H121.955C121.91 52.4182 121.875 57.4144 121.851 62.4106C121.821 68.5717 121.808 74.7338 121.81 80.8959C124.658 80.8726 127.506 80.8482 130.355 80.8249V86.8907L8.40549 86.8917Z" fill="#FF4F00"/>
+<path d="M124.912 40.1348H9.02975C4.08481 40.1348 0.0752715 36.3339 0.0752715 31.6439V8.49088C0.0752715 3.80189 4.08481 0 9.02975 0H130.282C130.264 1.47615 130.246 2.95331 130.229 4.42945C129.018 4.43249 127.808 4.43554 126.596 4.43858C125.745 8.73218 124.895 13.0268 124.045 17.3204C122.613 23.2077 121.182 29.0951 119.749 34.9814H124.935C124.927 36.6989 124.919 38.4173 124.912 40.1348Z" fill="#FF4F00"/>
+</svg>
--- a/README.rst
+++ b/README.rst
@@ -35,6 +35,7 @@ Requirements

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

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

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

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

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

-    The current version of the micro-frontend build scripts support node 18.
+    The current version of the micro-frontend build scripts support node 24.
    Using other major versions of node *may* work, but this is unsupported.  For
    convenience, this repository includes an .nvmrc file to help in setting the
    correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
@@ -190,4 +191,4 @@ Please do not report security issues in public. Please email security@openedx.or
 .. |license| image:: https://img.shields.io/npm/l/@edx/frontend-component-header.svg
   :target: @edx/frontend-component-header
 .. |semantic-release| image:: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
-   :target: https://github.com/semantic-release/semantic-release
+   :target: https://github.com/semantic-release/semantic-release
--- a/Logogram.svg
+++ b/Logogram.svg
@@ -0,0 +1,4 @@
+<svg width="81" height="54" viewBox="0 0 81 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.2088 53.8455C2.3323 53.8455 0 51.4901 0 48.5838V34.6478C0 31.7421 2.33168 29.3861 5.2088 29.3861H75.5746C75.5466 32.4828 75.5248 35.5788 75.5099 38.6749C75.4912 42.4928 75.4831 46.3114 75.4844 50.1299C77.2495 50.1155 79.0145 50.1004 80.7796 50.086V53.8448L5.2088 53.8455Z" fill="#FF4F00"/>
+<path d="M77.4068 24.8709H5.59565C2.53132 24.8709 0.046645 22.5156 0.046645 19.6092V5.26167C0.046645 2.35597 2.53132 0 5.59565 0H80.7342C80.7237 0.914745 80.7125 1.83012 80.7019 2.74486C79.9512 2.74675 79.2011 2.74864 78.4504 2.75052C77.923 5.4112 77.3962 8.0725 76.8695 10.7332C75.9819 14.3815 75.095 18.0298 74.2075 21.6775H77.4211C77.4161 22.7417 77.4112 23.8066 77.4068 24.8709Z" fill="#FF4F00"/>
+</svg>
--- a/catalog-info.yaml
+++ b/catalog-info.yaml
@@ -0,0 +1,14 @@
+# This file records information about this repo. Its use is described in OEP-55:
+# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
+
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: "frontend-component-header"
+  description: "A generic header for the Open edX micro-frontend applications."
+  annotations:
+    openedx.org/arch-interest-groups: ""
+spec:
+  owner: group:committers-frontend
+  type: "library"
+  lifecycle: "production"
--- a/example/index.js
+++ b/example/index.js
@@ -1,5 +1,3 @@
-import 'babel-polyfill';
-
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { initialize, getConfig, subscribe, APP_READY } from '@edx/frontend-platform';
--- a/example/index.scss
+++ b/example/index.scss
@@ -1,6 +1,4 @@
-@import "@edx/brand/paragon/fonts";
-@import "@edx/brand/paragon/variables";
-@import "@openedx/paragon/scss/core/core";
-@import "@edx/brand/paragon/overrides";
+@use "@openedx/paragon/dist/core.min.css" as paragonCore;
+@use "@openedx/paragon/dist/light.min.css" as paragonLight;

@import "@edx/frontend-component-header/index";
--- a/openedx.yaml
+++ b/openedx.yaml
@@ -1,8 +0,0 @@
-# openedx.yaml
-
---
-owner: edx/fedx-team
-tags:
-  - library
-  - component
-  - react
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -10,18 +10,16 @@
    "build": "make build",
    "i18n_extract": "fedx-scripts formatjs extract",
    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
+    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
    "snapshot": "fedx-scripts jest --updateSnapshot",
    "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "fedx-scripts jest --coverage"
+    "test": "fedx-scripts jest --coverage",
+    "test:dev": "fedx-scripts jest --watchAll",
+    "types": "tsc --noEmit"
  },
  "files": [
    "/dist"
  ],
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint"
-    }
-  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/openedx/frontend-component-header.git"
@@ -35,45 +33,41 @@
  "devDependencies": {
    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
    "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-platform": "8.1.2",
-    "@edx/reactifex": "^2.1.1",
-    "@openedx/frontend-build": "14.2.0",
-    "@openedx/paragon": "22.10.0",
-    "@testing-library/dom": "10.4.0",
+    "@edx/frontend-platform": "^8.3.1",
+    "@openedx/frontend-build": "^14.3.2",
+    "@openedx/paragon": "^23.0.0",
+    "@testing-library/dom": "^10.4.0",
    "@testing-library/jest-dom": "5.17.0",
-    "@testing-library/react": "10.4.9",
-    "husky": "8.0.3",
-    "jest": "29.7.0",
-    "jest-chain": "1.1.6",
+    "@testing-library/react": "^16.2.0",
+    "jest": "30.2.0",
+    "jest-environment-jsdom": "^30.0.0",
    "prop-types": "15.8.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-redux": "7.2.9",
-    "react-router-dom": "6.28.0",
-    "react-test-renderer": "17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-redux": "^8.1.1",
+    "react-router-dom": "6.30.2",
+    "react-test-renderer": "^18.3.1",
    "redux": "4.2.1",
-    "redux-saga": "1.3.0"
+    "redux-saga": "1.4.2",
+    "ts-jest": "^29.4.4"
  },
  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.6.0",
-    "@fortawesome/free-brands-svg-icons": "6.6.0",
-    "@fortawesome/free-regular-svg-icons": "6.6.0",
-    "@fortawesome/free-solid-svg-icons": "6.6.0",
+    "@fortawesome/fontawesome-svg-core": "6.7.2",
+    "@fortawesome/free-brands-svg-icons": "6.7.2",
+    "@fortawesome/free-regular-svg-icons": "6.7.2",
+    "@fortawesome/free-solid-svg-icons": "6.7.2",
    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@openedx/frontend-plugin-framework": "^1.3.0",
-    "axios-mock-adapter": "1.22.0",
-    "babel-polyfill": "6.26.0",
+    "@openedx/frontend-plugin-framework": "^1.7.0",
    "classnames": "^2.5.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": ">= 21.5.7 < 23.0.0",
+    "@openedx/paragon": ">= 22.0.0 < 24.0.0",
    "prop-types": "^15.5.10",
-    "react": "^16.9.0 || ^17.0.0",
-    "react-dom": "^16.9.0 || ^17.0.0",
+    "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0",
    "react-router-dom": "^6.14.2"
  }
 }
--- a/src/Header.jsx
+++ b/src/Header.jsx
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import Responsive from 'react-responsive';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
 import {
  APP_CONFIG_INITIALIZED,
@@ -47,9 +47,10 @@ subscribe(APP_CONFIG_INITIALIZED, () => {
 * See the documentation for the structure of user menu item.
 */
 const Header = ({
-  intl, mainMenuItems, secondaryMenuItems, userMenuItems,
+  mainMenuItems, secondaryMenuItems, userMenuItems,
 }) => {
  const { authenticatedUser, config } = useContext(AppContext);
+  const intl = useIntl();

  const defaultMainMenu = [
    {
@@ -139,7 +140,6 @@ Header.defaultProps = {
 };

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

-export default injectIntl(Header);
+export default Header;
--- a/src/Header.test.jsx
+++ b/src/Header.test.jsx
@@ -33,6 +33,7 @@ describe('<Header />', () => {
    };
    const component = <HeaderComponent width={{ width: 1280 }} contextValue={contextValue} />;

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

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

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

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

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

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

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

 .menu-dropdown-exit {
  transform-origin: 75% 0;
  transform: scale3d(1, 1, 1);
  opacity: 1;
 }
+
 .menu-dropdown-exit-active {
  transform-origin: 75% 0;
  transform: scale3d(0.8, 0.8, 1);
  transition: all 250ms cubic-bezier(0.8, 0, 0.6, 1);
  opacity: 0;
 }
-.menu-dropdown-exit-done {
-}
--- a/src/assets/complete-logo.svg
+++ b/src/assets/complete-logo.svg
@@ -0,0 +1,17 @@
+<svg width="518" height="87" viewBox="0 0 518 87" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M512.654 43.4098C512.654 35.747 509.327 31.2325 503.564 31.2325C497.861 31.2325 494.474 35.747 494.474 43.4098C494.474 51.0726 497.861 55.5871 503.564 55.5871C509.327 55.5871 512.654 51.0726 512.654 43.4098ZM518 56.0029C518 67.111 513.188 72.3978 503.029 72.3978C499.286 72.3978 496.019 71.8632 492.87 70.6751V65.5072C496.019 67.1704 499.049 68.0021 502.198 68.0021C509.148 68.0021 512.654 64.3786 512.654 56.9534V54.3397C510.455 58.1414 507.01 60.0422 502.257 60.0422C498.277 60.0422 495.009 58.5572 492.573 55.5277C490.137 52.4982 488.949 48.4589 488.949 43.4098C488.949 38.3607 490.137 34.3807 492.573 31.3513C495.009 28.3218 498.277 26.7773 502.257 26.7773C507.01 26.7773 510.455 28.6782 512.654 32.4799V27.5496H518V56.0029Z" fill="black"/>
+<path d="M484.03 50.3004C484.149 55.7653 484.209 59.864 484.209 59.864L478.743 59.9234C478.743 59.9234 478.862 60.7551 478.683 51.0726C478.565 45.4294 478.565 40.6179 478.565 40.6179C478.565 34.4401 476.129 31.4107 471.376 31.4107C465.613 31.4107 462.049 35.3312 462.049 41.6871V60.0422H456.702C456.702 60.0422 456.702 46.7363 456.702 37.1726C456.702 32.5987 453.375 33.0145 453.375 33.0145V27.5496C453.375 27.5496 456.88 27.5496 458.841 29.688C460.564 31.5889 460.623 33.7273 460.623 33.7273C461.811 29.7474 466.802 26.7773 472.03 26.7773C479.456 26.7773 483.911 31.4701 483.911 40.4397C483.911 40.4397 483.911 41.5089 484.03 50.3004Z" fill="black"/>
+<path d="M443.611 27.5485H448.958C448.958 27.5485 448.661 42.8147 448.779 51.4873C448.779 55.5861 452.166 55.1702 452.166 55.1702V60.2194C452.166 60.2194 443.492 60.0412 443.611 52.2002C443.73 42.6365 443.611 27.5485 443.611 27.5485ZM446.225 14.3613C444.264 14.3613 442.66 15.9652 442.66 17.9254C442.66 19.8857 444.264 21.4895 446.225 21.4895C448.185 21.4895 449.789 19.9451 449.789 17.9254C449.789 15.9058 448.185 14.3613 446.225 14.3613Z" fill="black"/>
+<path d="M436.376 50.3004C436.495 55.7653 436.554 59.864 436.554 59.864L431.089 59.9234C431.089 59.9234 431.207 60.7551 431.029 51.0726C430.91 45.4294 430.91 40.6179 430.91 40.6179C430.91 34.4401 428.475 31.4107 423.722 31.4107C417.959 31.4107 414.395 35.3312 414.395 41.6871V60.0422H409.048C409.048 60.0422 409.048 46.7363 409.048 37.1726C409.048 32.5987 405.721 33.0145 405.721 33.0145V27.5496C405.721 27.5496 409.226 27.5496 411.186 29.688C412.909 31.5889 412.969 33.7273 412.969 33.7273C414.157 29.7474 419.147 26.7773 424.375 26.7773C431.801 26.7773 436.257 31.4701 436.257 40.4397C436.257 40.4397 436.257 41.5089 436.376 50.3004Z" fill="black"/>
+<path d="M403.931 32.4208C402.208 32.5396 400.961 32.5396 399 33.49C396.386 34.7969 393.237 37.7076 393.237 42.9349C393.237 49.8849 393.237 60.0426 393.237 60.0426H387.891V27.5499H393.237V32.599C395.257 29.5695 397.337 27.3717 401.911 27.1935C402.684 27.1341 402.446 27.1341 403.931 27.1935V32.4208Z" fill="black"/>
+<path d="M369.696 43.7068C365.359 43.7068 362.388 44.182 360.725 45.1918C359.061 46.2017 358.23 47.8649 358.23 50.241C358.23 54.0427 360.903 56.4187 365.181 56.4187C371.122 56.4187 374.983 51.8448 374.983 44.8948V43.7068H369.696ZM380.271 51.9636C380.271 56.1811 384.251 55.8247 384.251 55.8247V59.9234C384.251 59.9234 381.221 60.2799 379.142 58.6166C377.241 57.1316 376.112 54.9337 376.112 54.9337C373.676 58.9136 369.042 60.8739 363.755 60.8739C357.101 60.8739 352.883 56.8346 352.883 50.5974C352.883 43.291 357.814 39.5487 367.498 39.5487H374.983V39.0141C374.983 34.0837 372.191 31.2919 366.309 31.2919C363.577 31.2919 360.071 33.3709 360.19 36.935L355.259 37.0538C355.378 28.6782 362.923 26.7773 366.428 26.7773C375.577 26.7773 380.33 31.5889 380.33 41.5089C380.33 41.5089 380.211 47.8055 380.271 51.9636Z" fill="black"/>
+<path d="M349.423 42.4594V45.073H324.887C325.362 52.4388 329.402 56.3593 336.472 56.3593C340.571 56.3593 344.374 55.4089 348.176 53.3299V58.379C344.374 60.0422 340.274 60.8739 336.175 60.8739C331.006 60.8739 326.848 59.3888 323.818 56.3593C320.788 53.3299 319.303 49.2906 319.303 44.1226C319.303 38.8359 320.729 34.6184 323.58 31.4701C326.491 28.3218 330.353 26.7773 335.224 26.7773C339.621 26.7773 343.067 28.203 345.621 30.9949C348.176 33.7867 349.423 37.6478 349.423 42.4594ZM344.076 40.9149C344.017 35.0342 340.571 31.2919 335.284 31.2919C329.343 31.2919 325.6 34.7966 325.065 40.9149H344.076Z" fill="black"/>
+<path d="M308.35 14.897H313.696C313.696 14.897 313.875 38.4794 313.875 51.1914C313.875 55.4089 319.459 55.3495 319.459 55.3495L319.4 60.161C319.4 60.161 313.578 60.3392 310.488 56.0029C309.003 53.9832 308.35 51.726 308.35 48.7559C308.35 35.3905 308.35 14.897 308.35 14.897Z" fill="black"/>
+<path d="M279.439 14.897H284.786C284.786 14.897 284.965 38.4794 284.965 51.1914C284.965 55.4089 290.549 55.3495 290.549 55.3495L290.49 60.161C290.49 60.161 284.667 60.3392 281.578 56.0029C280.093 53.9832 279.439 51.726 279.439 48.7559C279.439 35.3905 279.439 14.897 279.439 14.897Z" fill="black"/>
+<path d="M261.065 43.7068C256.728 43.7068 253.757 44.182 252.094 45.1918C250.431 46.2017 249.599 47.8649 249.599 50.241C249.599 54.0427 252.272 56.4187 256.55 56.4187C262.491 56.4187 266.352 51.8448 266.352 44.8948V43.7068H261.065ZM271.64 51.9636C271.64 56.1811 275.62 55.8247 275.62 55.8247V59.9234C275.62 59.9234 272.59 60.2799 270.511 58.6166C268.61 57.1316 267.481 54.9337 267.481 54.9337C265.045 58.9136 260.411 60.8739 255.124 60.8739C248.47 60.8739 244.252 56.8346 244.252 50.5974C244.252 43.291 249.183 39.5487 258.867 39.5487H266.352V39.0141C266.352 34.0837 263.56 31.2919 257.678 31.2919C254.946 31.2919 251.44 33.3709 251.559 36.935L246.628 37.0538C246.747 28.6782 254.292 26.7773 257.797 26.7773C266.946 26.7773 271.699 31.5889 271.699 41.5089C271.699 41.5089 271.58 47.8055 271.64 51.9636Z" fill="black"/>
+<path d="M233.216 32.4799V14.897H238.563C238.563 14.897 238.682 38.42 238.682 50.8943C238.682 55.2901 238.682 59.864 238.682 59.864L233.81 59.9234L233.87 55.4089C231.671 59.27 227.572 60.8738 222.819 60.8738C218.898 60.8738 215.69 59.3294 213.195 56.1811C210.759 53.0328 209.512 48.9341 209.512 43.8256C209.512 38.717 210.759 34.6183 213.195 31.47C215.69 28.3217 218.898 26.7773 222.819 26.7773C227.572 26.7773 231.018 28.6187 233.216 32.4799ZM215.037 43.8256C215.037 51.6666 218.423 56.4187 224.126 56.4187C229.77 56.4187 233.216 51.6666 233.216 43.8256C233.216 35.9845 229.77 31.2324 224.126 31.2324C218.423 31.2324 215.037 35.9845 215.037 43.8256Z" fill="black"/>
+<path d="M204.591 50.3004C204.71 55.7653 204.769 59.864 204.769 59.864L199.303 59.9234C199.303 59.9234 199.422 60.7551 199.244 51.0726C199.125 45.4294 199.125 40.6179 199.125 40.6179C199.125 34.4401 196.689 31.4107 191.937 31.4107C186.174 31.4107 182.609 35.3312 182.609 41.6871V60.0422H177.262C177.262 60.0422 177.262 46.7363 177.262 37.1726C177.262 32.5987 173.936 33.0145 173.936 33.0145V27.5496C173.936 27.5496 177.441 27.5496 179.401 29.688C181.124 31.5889 181.183 33.7273 181.183 33.7273C182.372 29.7474 187.362 26.7773 192.59 26.7773C200.016 26.7773 204.472 31.4701 204.472 40.4397C204.472 40.4397 204.472 41.5089 204.591 50.3004Z" fill="black"/>
+<path d="M159.067 43.7068C154.73 43.7068 151.759 44.182 150.096 45.1918C148.432 46.2017 147.601 47.8649 147.601 50.241C147.601 54.0427 150.274 56.4187 154.552 56.4187C160.493 56.4187 164.354 51.8448 164.354 44.8948V43.7068H159.067ZM169.642 51.9636C169.642 56.1811 173.622 55.8247 173.622 55.8247V59.9234C173.622 59.9234 170.592 60.2799 168.513 58.6166C166.612 57.1316 165.483 54.9337 165.483 54.9337C163.047 58.9136 158.413 60.8739 153.126 60.8739C146.472 60.8739 142.254 56.8346 142.254 50.5974C142.254 43.291 147.185 39.5487 156.869 39.5487H164.354V39.0141C164.354 34.0837 161.562 31.2919 155.68 31.2919C152.948 31.2919 149.442 33.3709 149.561 36.935L144.63 37.0538C144.749 28.6782 152.294 26.7773 155.799 26.7773C164.948 26.7773 169.701 31.5889 169.701 41.5089C169.701 41.5089 169.582 47.8055 169.642 51.9636Z" fill="black"/>
+<path d="M8.40549 86.8917C3.76365 86.8917 0 83.0908 0 78.4008V55.9119C0 51.2229 3.76265 47.421 8.40549 47.421H121.955C121.91 52.4182 121.875 57.4144 121.851 62.4106C121.821 68.5717 121.808 74.7338 121.81 80.8959C124.658 80.8726 127.506 80.8482 130.355 80.8249V86.8907L8.40549 86.8917Z" fill="#FF4F00"/>
+<path d="M124.912 40.1348H9.02975C4.08481 40.1348 0.0752715 36.3339 0.0752715 31.6439V8.49088C0.0752715 3.80189 4.08481 0 9.02975 0H130.282C130.264 1.47615 130.246 2.95331 130.229 4.42945C129.018 4.43249 127.808 4.43554 126.596 4.43858C125.745 8.73218 124.895 13.0268 124.045 17.3204C122.613 23.2077 121.182 29.0951 119.749 34.9814H124.935C124.927 36.6989 124.919 38.4173 124.912 40.1348Z" fill="#FF4F00"/>
+</svg>
--- a/src/desktop-header/DesktopHeader.jsx
+++ b/src/desktop-header/DesktopHeader.jsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+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 Avatar from '../Avatar';
 import LogoSlot from '../plugin-slots/LogoSlot';
 import DesktopLoggedOutItemsSlot from '../plugin-slots/DesktopLoggedOutItemsSlot';
 import { desktopLoggedOutItemsDataShape } from './DesktopLoggedOutItems';
@@ -19,94 +20,76 @@ import { desktopUserMenuDataShape } from './DesktopHeaderUserMenu';
 import messages from '../Header.messages';

 // Assets
-import { CaretIcon } from '../Icons';
+import andalLogo from '../assets/complete-logo.svg';

-class DesktopHeader extends React.Component {
-  constructor(props) { // eslint-disable-line no-useless-constructor
-    super(props);
-  }
+const DesktopHeader = ({
+  mainMenu,
+  secondaryMenu,
+  userMenu,
+  loggedOutItems,
+  logo,
+  logoAltText,
+  logoDestination,
+  avatar,
+  username,
+  loggedIn,
+}) => {
+  const intl = useIntl();

-  renderMainMenu() {
-    const { mainMenu } = this.props;
-    return <DesktopMainMenuSlot menu={mainMenu} />;
-  }
+  const renderMainMenu = () => <DesktopMainMenuSlot menu={mainMenu} />;

-  renderSecondaryMenu() {
-    const { secondaryMenu } = this.props;
-    return <DesktopSecondaryMenuSlot menu={secondaryMenu} />;
-  }
+  const renderSecondaryMenu = () => <DesktopSecondaryMenuSlot menu={secondaryMenu} />;

-  renderUserMenu() {
-    const {
-      userMenu,
-      avatar,
-      username,
-      intl,
-    } = this.props;
+  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>
+  );

-    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">
-          <DesktopUserMenuSlot menu={userMenu} />
-        </MenuContent>
-      </Menu>
-    );
-  }
+  const renderLoggedOutItems = () => <DesktopLoggedOutItemsSlot items={loggedOutItems} />;

-  renderLoggedOutItems() {
-    const { loggedOutItems } = this.props;
-    return <DesktopLoggedOutItemsSlot items={loggedOutItems} />;
-  }
+  // Use local Andal logo instead of passed logo prop
+  const logoProps = { src: andalLogo, alt: 'Andal Learning', href: logoDestination || getConfig().LMS_BASE_URL };
+  const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'mw-100' : null;

-  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">
-            <LogoSlot {...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>
+  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>
-      </header>
-    );
-  }
-}
+      </div>
+    </header>
+  );
+};

 export const desktopHeaderDataShape = {
  mainMenu: desktopHeaderMainOrSecondaryMenuDataShape,
@@ -123,18 +106,15 @@ export const desktopHeaderDataShape = {

 DesktopHeader.propTypes = {
  mainMenu: desktopHeaderDataShape.mainMenu,
-  secondaryMenu: desktopHeaderDataShape.secondaryMenumainMenu,
-  userMenu: desktopHeaderDataShape.userMenumainMenu,
-  loggedOutItems: desktopHeaderDataShape.loggedOutItemsmainMenu,
-  logo: desktopHeaderDataShape.logomainMenu,
-  logoAltText: desktopHeaderDataShape.logoAltTextmainMenu,
-  logoDestination: desktopHeaderDataShape.logoDestinationmainMenu,
-  avatar: desktopHeaderDataShape.avatarmainMenu,
-  username: desktopHeaderDataShape.usernamemainMenu,
-  loggedIn: desktopHeaderDataShape.loggedInmainMenu,
-
-  // i18n
-  intl: intlShape.isRequired,
+  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 = {
@@ -150,4 +130,4 @@ DesktopHeader.defaultProps = {
  loggedIn: false,
 };

-export default injectIntl(DesktopHeader);
+export default DesktopHeader;
--- a/src/desktop-header/DesktopUserMenuToggle.jsx
+++ b/src/desktop-header/DesktopUserMenuToggle.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CaretIcon } from '../Icons';
+import Avatar from '../Avatar';
+
+const DesktopUserMenuToggle = ({ avatar, label }) => (
+  <>
+    <Avatar size="1.5em" src={avatar} alt="" className="mr-2" />
+    {label} <CaretIcon role="img" aria-hidden focusable="false" />
+  </>
+);
+
+export const DesktopUserMenuTogglePropTypes = {
+  avatar: PropTypes.string,
+  label: PropTypes.string,
+};
+
+DesktopUserMenuToggle.propTypes = DesktopUserMenuTogglePropTypes;
+
+export default DesktopUserMenuToggle;
--- a/src/frontend-platform.d.ts
+++ b/src/frontend-platform.d.ts
@@ -0,0 +1,41 @@
+// frontend-platform currently doesn't provide types... do it ourselves for i18n module at least.
+// We can remove this in the future when we migrate to frontend-shell, or when frontend-platform gets types
+// (whichever comes first).
+
+declare module '@edx/frontend-platform/i18n' {
+  // eslint-disable-next-line import/no-extraneous-dependencies
+  import { injectIntl as _injectIntl } from 'react-intl';
+  /** @deprecated Use useIntl() hook instead. */
+  export const injectIntl: typeof _injectIntl;
+  /** @deprecated Use useIntl() hook instead. */
+  export const intlShape: any;
+
+  // eslint-disable-next-line import/no-extraneous-dependencies
+  export {
+    createIntl,
+    FormattedDate,
+    FormattedTime,
+    FormattedRelativeTime,
+    FormattedNumber,
+    FormattedPlural,
+    FormattedMessage,
+    defineMessages,
+    IntlProvider,
+    useIntl,
+  } from 'react-intl';
+
+  // Other exports from the i18n module:
+  export const configure: any;
+  export const getPrimaryLanguageSubtag: (code: string) => string;
+  export const getLocale: (locale?: string) => string;
+  export const getMessages: any;
+  export const isRtl: (locale?: string) => boolean;
+  export const handleRtl: any;
+  export const mergeMessages: any;
+  export const LOCALE_CHANGED: any;
+  export const LOCALE_TOPIC: any;
+  export const getCountryList: any;
+  export const getCountryMessages: any;
+  export const getLanguageList: any;
+  export const getLanguageMessages: any;
+}
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,6 +1,55 @@
 $spacer: 1rem;
-$blue: #007db8;
+$blue: #ff4f00;
 $white: #fff;
+$component-active-bg: #ff4f00 !default;
+$component-active-color: $white !default;
+$rounded-pill: 50rem  !default;
+
+// Andal Learning Brand Colors - Override Paragon variables
+$primary: #ff4f00;
+:root {
+  --pgn-color-primary: #ff4f00;
+  --pgn-color-primary-100: #ffe6cc;
+  --pgn-color-primary-200: #ffcc99;
+  --pgn-color-primary-300: #ffb366;
+  --pgn-color-primary-400: #ff9933;
+  --pgn-color-primary-500: #ff4f00;
+  --pgn-color-primary-600: #cc3f00;
+  --pgn-color-primary-700: #992f00;
+  --pgn-color-primary-800: #661f00;
+  --pgn-color-primary-900: #330f00;
+  --pgn-color-action-primary: #ff4f00;
+  --pgn-color-action-primary-hover: #cc3f00;
+  --pgn-color-action-primary-focus: #992f00;
+  --pgn-color-action-primary-active: #992f00;
+}
+
+// Override all button variants to use Andal orange
+.btn-primary {
+  background-color: #ff4f00 !important;
+  border-color: #ff4f00 !important;
+
+  &:hover {
+    background-color: #cc3f00 !important;
+    border-color: #cc3f00 !important;
+  }
+}
+
+.btn-outline-primary {
+  color: #ff4f00 !important;
+  border-color: #ff4f00 !important;
+
+  &:hover {
+    background-color: #ff4f00 !important;
+    color: #fff !important;
+  }
+}
+
+.btn-brand {
+  background-color: #ff4f00 !important;
+  border-color: #ff4f00 !important;
+  color: #fff !important;
+}

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

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

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

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


 .site-header-desktop {
-  box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
-  background: $white;
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, .1);
+  background: var(--pgn-color-white, $white);
+
  .nav-link {
    text-decoration: none;
  }
+
  .logo {
    display: block;
    box-sizing: content-box;
    position: relative;
    top: -.05em;
    height: 1.75rem;
-    padding: 1rem 0;
-    margin-right: 1rem;
+    padding: var(--pgn-spacing-spacer-base, $spacer) 0;
+    margin-right: var(--pgn-spacing-spacer-base, $spacer);
+
    img {
      display: block;
      height: 100%;
@@ -93,38 +142,42 @@ $white: #fff;
    .nav-link:focus,
    .nav-link.active,
    .expanded .nav-link {
-      background: $component-active-bg;
-      color: $component-active-color;
+      background: var(--pgn-color-bg-active, $component-active-bg);
+      color: var(--pgn-color-active, $component-active-color);
    }
  }
  .main-nav {
    .nav-link {
-      padding: 1.125rem 1rem;
+      padding: 1.125rem var(--pgn-spacing-spacer-base, $spacer);
      text-decoration: none;
      font-weight: 500;
      letter-spacing: .01em;
    }
+
    .nav-link:hover,
    .nav-link:focus,
    .nav-link.active,
    .expanded .nav-link {
-      background: $component-active-bg;
-      color: $component-active-color;
+      background: var(--pgn-color-bg-active, $component-active-bg);
+      color: var(--pgn-color-active, $component-active-color);
    }
+
    .menu {
      position: static;
+
      .menu-content {
-        border-top: solid 2px $component-active-bg;
+        border-top: solid 2px var(--pgn-color-bg-active);
        left: 0;
        right: 0;
-        box-shadow: 0 1px 2px rgba(0,0,0,.25);
+        box-shadow: var(--pgn-elevation-box-shadow-down-1, 0 1px 2px rgba(0,0,0,.25));
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
-        padding: 1rem;
+        padding: var(--pgn-spacing-spacer-base, $spacer);
      }
    }
  }
+
  .search-input {
-    border-radius: $rounded-pill;
+    border-radius: var(--pgn-size-rounded-pill, $rounded-pill);
  }
 }
--- a/src/learning-header/AnonymousUserMenu.jsx
+++ b/src/learning-header/AnonymousUserMenu.jsx
@@ -2,12 +2,13 @@ import React from 'react';

 import { getConfig } from '@edx/frontend-platform';
 import { getLoginRedirectUrl } from '@edx/frontend-platform/auth';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import LearningLoggedOutItemsSlot from '../plugin-slots/LearningLoggedOutItemsSlot';

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

-const AnonymousUserMenu = ({ intl }) => {
+const AnonymousUserMenu = () => {
+  const intl = useIntl();
  const buttonsInfo = [
    {
      message: intl.formatMessage(genericMessages.registerSentenceCase),
@@ -23,8 +24,4 @@ const AnonymousUserMenu = ({ intl }) => {
  return <LearningLoggedOutItemsSlot buttonsInfo={buttonsInfo} />;
 };

-AnonymousUserMenu.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(AnonymousUserMenu);
+export default AnonymousUserMenu;
--- a/src/learning-header/AuthenticatedUserDropdown.jsx
+++ b/src/learning-header/AuthenticatedUserDropdown.jsx
@@ -1,17 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
 import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Dropdown } from '@openedx/paragon';

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

 import messages from './messages';

-const AuthenticatedUserDropdown = ({ intl, username }) => {
+const AuthenticatedUserDropdown = ({ username }) => {
+  const intl = useIntl();
  const dropdownItems = [
    {
      message: intl.formatMessage(messages.dashboard),
@@ -37,11 +38,8 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {

  return (
    <Dropdown className="user-dropdown ml-3">
-      <Dropdown.Toggle variant="outline-primary">
-        <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
-        <span data-hj-suppress className="d-none d-md-inline">
-          {username}
-        </span>
+      <Dropdown.Toggle variant="outline-primary" aria-label={intl.formatMessage(messages.userOptionsDropdownLabel)}>
+        <LearningUserMenuToggleSlot label={username} icon={faUserCircle} />
      </Dropdown.Toggle>
      <Dropdown.Menu className="dropdown-menu-right">
        <LearningUserMenuSlot items={dropdownItems} />
@@ -51,8 +49,7 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
 };

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

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

 import AnonymousUserMenu from './AnonymousUserMenu';
@@ -13,8 +13,12 @@ import messages from './messages';
 import LearningHelpSlot from '../plugin-slots/LearningHelpSlot';

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

  const headerLogo = (
@@ -53,7 +57,6 @@ LearningHeader.propTypes = {
  courseOrg: courseInfoDataShape.courseOrg,
  courseNumber: courseInfoDataShape.courseNumber,
  courseTitle: courseInfoDataShape.courseTitle,
-  intl: intlShape.isRequired,
  showUserDropdown: PropTypes.bool,
 };

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

-export default injectIntl(LearningHeader);
+export default LearningHeader;
--- a/src/learning-header/LearningUserMenuToggle.jsx
+++ b/src/learning-header/LearningUserMenuToggle.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import PropTypes from 'prop-types';
+
+const LearningUserMenuToggle = ({
+  label,
+  icon,
+}) => (
+  <>
+    <FontAwesomeIcon icon={icon} className="d-md-none" size="lg" />
+    <span data-hj-suppress className="d-none d-md-inline">
+      {label}
+    </span>
+  </>
+);
+
+export const LearningUserMenuTogglePropTypes = {
+  label: PropTypes.string.isRequired,
+  // Full shape available by examining @fortawesome/fontawesome-common-types/index.d.ts.
+  icon: PropTypes.shape({
+    prefix: PropTypes.string.isRequired,
+    iconName: PropTypes.string.isRequired,
+  }).isRequired,
+};
+
+LearningUserMenuToggle.propTypes = LearningUserMenuTogglePropTypes;
+
+export default LearningUserMenuToggle;
--- a/src/learning-header/messages.js
+++ b/src/learning-header/messages.js
@@ -36,6 +36,11 @@ const messages = defineMessages({
    defaultMessage: 'Sign Out',
    description: 'The label for the user menu Sign Out action.',
  },
+  userOptionsDropdownLabel: {
+    id: 'header.menu.aria-label',
+    defaultMessage: 'User Options',
+    description: 'The aria-label for the user options dropdown.',
+  },
 });

 export default messages;
--- a/src/mobile-header/MobileHeader.jsx
+++ b/src/mobile-header/MobileHeader.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+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 Avatar from '../Avatar';
 import LogoSlot from '../plugin-slots/LogoSlot';
 import MobileLoggedOutItemsSlot from '../plugin-slots/MobileLoggedOutItemsSlot';
 import { mobileHeaderLoggedOutItemsDataShape } from './MobileLoggedOutItems';
@@ -18,98 +18,88 @@ import { mobileHeaderUserMenuDataShape } from './MobileHeaderUserMenu';
 import messages from '../Header.messages';

 // Assets
+import andalLogo from '../assets/complete-logo.svg';
 import { MenuIcon } from '../Icons';

-class MobileHeader extends React.Component {
-  constructor(props) { // eslint-disable-line no-useless-constructor
-    super(props);
-  }
+const MobileHeader = ({
+  mainMenu,
+  secondaryMenu,
+  userMenu,
+  loggedOutItems,
+  logo,
+  logoAltText,
+  logoDestination,
+  avatar,
+  username,
+  loggedIn,
+  stickyOnMobile,
+}) => {
+  const intl = useIntl();

-  renderMainMenu() {
-    const { mainMenu, secondaryMenu } = this.props;
-    return <MobileMainMenuSlot menu={[...mainMenu, ...secondaryMenu]} />;
-  }
+  const renderMainMenu = () => <MobileMainMenuSlot menu={[...mainMenu, ...secondaryMenu]} />;

-  renderUserMenuItems() {
-    const { userMenu } = this.props;
-    return <MobileUserMenuSlot menu={userMenu} />;
-  }
+  const renderUserMenuItems = () => <MobileUserMenuSlot menu={userMenu} />;

-  renderLoggedOutItems() {
-    const { loggedOutItems } = this.props;
-    return <MobileLoggedOutItemsSlot items={loggedOutItems} />;
-  }
+  const renderLoggedOutItems = () => <MobileLoggedOutItemsSlot items={loggedOutItems} />;

-  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';
+  const renderUserMenuToggle = () => <MobileUserMenuToggleSlot avatar={avatar} label={username} />;

-    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">
+  // Use local Andal logo instead of passed logo prop
+  const logoProps = { src: andalLogo, alt: 'Andal Learning', href: logoDestination };
+  const stickyClassName = stickyOnMobile ? 'sticky-top' : '';
+  const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'justify-content-left pl-3' : 'justify-content-center';

-            <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()}
-              </MenuContent>
-            </Menu>
-          </div>
-        ) : null}
-        <div className={`w-100 d-flex ${logoClasses}`}>
-          <LogoSlot {...logoProps} itemType="http://schema.org/Organization" />
+  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>
-        {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>
-    );
-  }
-}
+      ) : 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,
@@ -137,9 +127,6 @@ MobileHeader.propTypes = {
  username: mobileHeaderDataShape.username,
  loggedIn: mobileHeaderDataShape.loggedIn,
  stickyOnMobile: mobileHeaderDataShape.stickyOnMobile,
-
-  // i18n
-  intl: intlShape.isRequired,
 };

 MobileHeader.defaultProps = {
@@ -157,4 +144,4 @@ MobileHeader.defaultProps = {

 };

-export default injectIntl(MobileHeader);
+export default MobileHeader;
--- a/src/mobile-header/MobileUserMenuToggle.jsx
+++ b/src/mobile-header/MobileUserMenuToggle.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Avatar from '../Avatar';
+
+const MobileUserMenuToggle = ({ avatar, username }) => <Avatar size="1.5rem" src={avatar} alt={username} />;
+
+export const MobileUserMenuTogglePropTypes = {
+  avatar: PropTypes.string,
+  username: PropTypes.string,
+};
+
+MobileUserMenuToggle.propTypes = MobileUserMenuTogglePropTypes;
+
+export default MobileUserMenuToggle;
--- a/src/plugin-slots/CourseInfoSlot/README.md
+++ b/src/plugin-slots/CourseInfoSlot/README.md
@@ -1,6 +1,9 @@
 # Course Info Slot

-### Slot ID: `course_info_slot`
+### Slot ID: `org.openedx.frontend.layout.header_learning_course_info.v1`
+
+### Slot ID Aliases
+* `course_info_slot`

 ## Description

@@ -24,7 +27,7 @@ const replaceCourseTitle = ( widget ) => {

 const config = {
  pluginSlots: {
-    course_info_slot: {
+    'org.openedx.frontend.layout.header_learning_course_info.v1': {
      keepDefault: true,
      plugins: [
        {
@@ -51,7 +54,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame

 const config = {
  pluginSlots: {
-    course_info_slot: {
+    'org.openedx.frontend.layout.header_learning_course_info.v1': {
      keepDefault: false,
      plugins: [
        {
@@ -83,7 +86,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame

 const config = {
  pluginSlots: {
-    course_info_slot: {
+    'org.openedx.frontend.layout.header_learning_course_info.v1': {
      keepDefault: true,
      plugins: [
        {
--- a/src/plugin-slots/CourseInfoSlot/index.jsx
+++ b/src/plugin-slots/CourseInfoSlot/index.jsx
@@ -9,7 +9,8 @@ const CourseInfoSlot = ({
  ...attributes
 }) => (
  <PluginSlot
-    id="course_info_slot"
+    id="org.openedx.frontend.layout.header_learning_course_info.v1"
+    idAliases={['course_info_slot']}
    slotOptions={{
      mergeProps: true,
    }}
--- a/src/plugin-slots/DesktopHeaderSlot/README.md
+++ b/src/plugin-slots/DesktopHeaderSlot/README.md
@@ -1,6 +1,9 @@
 # Desktop Header Slot

-### Slot ID: `desktop_header_slot`
+### Slot ID: `org.openedx.frontend.layout.header_desktop.v1`
+
+### Slot ID Aliases
+* `desktop_header_slot`

 ## Description

@@ -19,7 +22,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame

 const config = {
  pluginSlots: {
-    desktop_header_slot: {
+    'org.openedx.frontend.layout.header_desktop.v1': {
      keepDefault: false,
      plugins: [
        {
@@ -38,4 +41,4 @@ const config = {
 }

 export default config;
-```
+```
--- a/src/plugin-slots/DesktopHeaderSlot/index.jsx
+++ b/src/plugin-slots/DesktopHeaderSlot/index.jsx
@@ -6,7 +6,8 @@ const DesktopHeaderSlot = ({
  props,
 }) => (
  <PluginSlot
-    id="desktop_header_slot"
+    id="org.openedx.frontend.layout.header_desktop.v1"
+    idAliases={['desktop_header_slot']}
    slotOptions={{
      mergeProps: true,
    }}
--- a/src/plugin-slots/DesktopLoggedOutItemsSlot/README.md
+++ b/src/plugin-slots/DesktopLoggedOutItemsSlot/README.md
@@ -1,6 +1,9 @@
 # Desktop Logged Out Items Slot

-### Slot ID: `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

@@ -40,7 +43,7 @@ const modifyLoggedOutItems = ( widget ) => {

 const config = {
  pluginSlots: {
-    desktop_logged_out_items_slot: {
+    'org.openedx.frontend.layout.header_desktop_logged_out_items.v1': {
      keepDefault: true,
      plugins: [
        {
@@ -67,7 +70,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame

 const config = {
  pluginSlots: {
-    desktop_logged_out_items_slot: {
+    'org.openedx.frontend.layout.header_desktop_logged_out_items.v1': {
      keepDefault: false,
      plugins: [
        {
@@ -99,7 +102,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame

 const config = {
  pluginSlots: {
-    desktop_logged_out_items_slot: {
+    'org.openedx.frontend.layout.header_desktop_logged_out_items.v1': {
      keepDefault: true,
      plugins: [
        {
--- a/src/plugin-slots/DesktopLoggedOutItemsSlot/index.jsx
+++ b/src/plugin-slots/DesktopLoggedOutItemsSlot/index.jsx
@@ -6,7 +6,8 @@ const DesktopLoggedOutItemsSlot = ({
  items,
 }) => (
  <PluginSlot
-    id="desktop_logged_out_items_slot"
+    id="org.openedx.frontend.layout.header_desktop_logged_out_items.v1"
+    idAliases={['desktop_logged_out_items_slot']}
    slotOptions={{
      mergeProps: true,
    }}
--- a/src/plugin-slots/DesktopMainMenuSlot/README.md
+++ b/src/plugin-slots/DesktopMainMenuSlot/README.md
@@ -1,6 +1,9 @@
 # Desktop Main Menu Slot

-### Slot ID: `desktop_main_menu_slot`
+### Slot ID: `org.openedx.frontend.layout.header_desktop_main_menu.v1`
+
+### Slot ID Aliases
+* `desktop_main_menu_slot`

 ## Description

@@ -10,9 +13,11 @@ This slot is used to replace/modify/hide the desktop main menu.

 ### Modify Items

-The following `env.config.jsx` will modify the items in the desktop main menu.
+#### Replace All Items

-![Screenshot of modified items](./images/desktop_main_menu_modify_items.png)
+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';
@@ -40,7 +45,59 @@ const modifyMainMenu = ( widget ) => {

 const config = {
  pluginSlots: {
-    desktop_main_menu_slot: {
+    '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: [
        {
@@ -67,7 +124,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame

 const config = {
  pluginSlots: {
-    desktop_main_menu_slot: {
+    'org.openedx.frontend.layout.header_desktop_main_menu.v1': {
      keepDefault: false,
      plugins: [
        {
@@ -99,7 +156,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame

 const config = {
  pluginSlots: {
-    desktop_main_menu_slot: {
+    'org.openedx.frontend.layout.header_desktop_main_menu.v1': {
      keepDefault: true,
      plugins: [
        {
@@ -131,4 +188,3 @@ const config = {

 export default config;
 ```
-
--- a/src/plugin-slots/DesktopMainMenuSlot/images/desktop_main_menu_add_items.png
+++ b/src/plugin-slots/DesktopMainMenuSlot/images/desktop_main_menu_add_items.png
--- a/src/plugin-slots/DesktopMainMenuSlot/images/desktop_main_menu_replace_all_items.png
+++ b/src/plugin-slots/DesktopMainMenuSlot/images/desktop_main_menu_replace_all_items.png
--- a/src/plugin-slots/DesktopMainMenuSlot/index.jsx
+++ b/src/plugin-slots/DesktopMainMenuSlot/index.jsx
@@ -6,7 +6,8 @@ const DesktopMainMenuSlot = ({
  menu,
 }) => (
  <PluginSlot
-    id="desktop_main_menu_slot"
+    id="org.openedx.frontend.layout.header_desktop_main_menu.v1"
+    idAliases={['desktop_main_menu_slot']}
    slotOptions={{
      mergeProps: true,
    }}
--- a/src/plugin-slots/DesktopSecondaryMenuSlot/README.md
+++ b/src/plugin-slots/DesktopSecondaryMenuSlot/README.md
@@ -1,6 +1,9 @@
 # Desktop Secondary Menu Slot

-### Slot ID: `desktop_secondary_menu_slot`
+### Slot ID: `org.openedx.frontend.layout.header_desktop_secondary_menu.v1`
+
+### Slot ID Aliases
+* `desktop_secondary_menu_slot`

 ## Description

@@ -35,7 +38,7 @@ const modifySecondaryMenu = ( widget ) => {

 const config = {
  pluginSlots: {
-    desktop_secondary_menu_slot: {
+    'org.openedx.frontend.layout.header_desktop_secondary_menu.v1': {
      keepDefault: true,
      plugins: [
        {
@@ -62,7 +65,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame

 const config = {
  pluginSlots: {
-    desktop_secondary_menu_slot: {
+    'org.openedx.frontend.layout.header_desktop_secondary_menu.v1': {
      keepDefault: false,
      plugins: [
        {
@@ -94,7 +97,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame

 const config = {
  pluginSlots: {
-    desktop_secondary_menu_slot: {
+    'org.openedx.frontend.layout.header_desktop_secondary_menu.v1': {
      keepDefault: true,
      plugins: [
        {
--- a/src/plugin-slots/DesktopSecondaryMenuSlot/index.jsx
+++ b/src/plugin-slots/DesktopSecondaryMenuSlot/index.jsx
@@ -6,7 +6,8 @@ const DesktopSecondaryMenuSlot = ({
  menu,
 }) => (
  <PluginSlot
-    id="desktop_secondary_menu_slot"
+    id="org.openedx.frontend.layout.header_desktop_secondary_menu.v1"
+    idAliases={['desktop_secondary_menu_slot']}
    slotOptions={{
      mergeProps: true,
    }}
--- a/src/plugin-slots/DesktopUserMenuSlot/README.md
+++ b/src/plugin-slots/DesktopUserMenuSlot/README.md
@@ -1,6 +1,9 @@
 # Desktop User Menu Slot

-### Slot ID: `desktop_user_menu_slot`
+### Slot ID: `org.openedx.frontend.layout.header_desktop_user_menu.v1`
+
+### Slot ID Aliases
+* `desktop_user_menu_slot`

 ## Description

@@ -48,7 +51,7 @@ const modifyUserMenu = ( widget ) => {

 const config = {
  pluginSlots: {
-    desktop_user_menu_slot: {
+    'org.openedx.frontend.layout.header_desktop_user_menu.v1': {
      keepDefault: true,
      plugins: [
        {
@@ -75,7 +78,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame

 const config = {
  pluginSlots: {
-    desktop_user_menu_slot: {
+    'org.openedx.frontend.layout.header_desktop_user_menu.v1': {
      keepDefault: false,
      plugins: [
        {
@@ -107,7 +110,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame

 const config = {
  pluginSlots: {
-    desktop_user_menu_slot: {
+    'org.openedx.frontend.layout.header_desktop_user_menu.v1': {
      keepDefault: true,
      plugins: [
        {
--- a/src/plugin-slots/DesktopUserMenuSlot/index.jsx
+++ b/src/plugin-slots/DesktopUserMenuSlot/index.jsx
@@ -6,7 +6,8 @@ const DesktopUserMenuSlot = ({
  menu,
 }) => (
  <PluginSlot
-    id="desktop_user_menu_slot"
+    id="org.openedx.frontend.layout.header_desktop_user_menu.v1"
+    idAliases={['desktop_user_menu_slot']}
    slotOptions={{
      mergeProps: true,
    }}
--- a/src/plugin-slots/DesktopUserMenuToggleSlot/README.md
+++ b/src/plugin-slots/DesktopUserMenuToggleSlot/README.md
@@ -0,0 +1,74 @@
+# Desktop User Menu Toggle Slot
+
+### Slot ID: `org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1`
+
+## Description
+
+This slot is used to replace/modify/hide the contents of the user menu toggle button on desktop sized screens.
+
+## Examples
+
+### Modify Label Text
+
+The following `env.config.jsx` will modify the label text to be something more generic:
+
+![Screenshot of modified label](./images/desktop_user_menu_modified_toggle.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { faHouse } from '@fortawesome/free-solid-svg-icons';
+
+const modifyUserMenuToggle = ( widget ) => {
+  widget.content.label = "My Profile";
+  return widget;
+};
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Modify,
+          widgetId: 'default_contents',
+          fn: modifyUserMenuToggle,
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Replace Menu toggle contents with Custom Component
+
+The following `env.config.jsx` will replace the contents of the learning user menu toggle button entirely (in this case with an emoji)
+
+![Screenshot of replaced with custom component](./images/desktop_user_menu_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_desktop_user_menu_toggle',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <span>🦊</span>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
--- a/src/plugin-slots/DesktopUserMenuToggleSlot/images/desktop_user_menu_custom_component.png
+++ b/src/plugin-slots/DesktopUserMenuToggleSlot/images/desktop_user_menu_custom_component.png
--- a/src/plugin-slots/DesktopUserMenuToggleSlot/images/desktop_user_menu_modified_toggle.png
+++ b/src/plugin-slots/DesktopUserMenuToggleSlot/images/desktop_user_menu_modified_toggle.png
--- a/src/plugin-slots/DesktopUserMenuToggleSlot/index.jsx
+++ b/src/plugin-slots/DesktopUserMenuToggleSlot/index.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import DesktopUserMenuToggle, { DesktopUserMenuTogglePropTypes } from '../../desktop-header/DesktopUserMenuToggle';
+
+const DesktopUserMenuToggleSlot = ({
+  avatar,
+  label,
+}) => (
+  <PluginSlot
+    id="org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1"
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <DesktopUserMenuToggle avatar={avatar} label={label} />
+  </PluginSlot>
+);
+
+DesktopUserMenuToggleSlot.propTypes = DesktopUserMenuTogglePropTypes;
+
+export default DesktopUserMenuToggleSlot;
--- a/src/plugin-slots/LearningHelpSlot/README.md
+++ b/src/plugin-slots/LearningHelpSlot/README.md
@@ -1,6 +1,9 @@
 # Learning Help Slot

-### Slot ID: `learning_help_slot`
+### Slot ID: `org.openedx.frontend.layout.header_learning_help.v1`
+
+### Slot ID Aliases
+* `learning_help_slot`

 ## Description

@@ -19,7 +22,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame

 const config = {
  pluginSlots: {
-    learning_help_slot: {
+    'org.openedx.frontend.layout.header_learning_help.v1': {
      keepDefault: false,
      plugins: [
        {
--- a/src/plugin-slots/LearningHelpSlot/index.jsx
+++ b/src/plugin-slots/LearningHelpSlot/index.jsx
@@ -3,7 +3,7 @@ import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import LearningHeaderHelpLink from '../../learning-header/LearningHeaderHelpLink';

 const LearningHelpSlot = () => (
-  <PluginSlot id="learning_help_slot">
+  <PluginSlot id="org.openedx.frontend.layout.header_learning_help.v1" idAliases={['learning_help_slot']}>
    <LearningHeaderHelpLink />
  </PluginSlot>
 );
--- a/src/plugin-slots/LearningLoggedOutItemsSlot/README.md
+++ b/src/plugin-slots/LearningLoggedOutItemsSlot/README.md
@@ -1,6 +1,9 @@
 # Learning Logged Out Items Slot

-### Slot ID: `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

@@ -38,7 +41,7 @@ const modifyLoggedOutItems = ( widget ) => {

 const config = {
  pluginSlots: {
-    learning_logged_out_items_slot: {
+    'org.openedx.frontend.layout.header_learning_logged_out_items.v1': {
      keepDefault: true,
      plugins: [
        {
@@ -65,7 +68,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame

 const config = {
  pluginSlots: {
-    learning_logged_out_items_slot: {
+    'org.openedx.frontend.layout.header_learning_logged_out_items.v1': {
      keepDefault: false,
      plugins: [
        {
@@ -97,7 +100,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame

 const config = {
  pluginSlots: {
-    learning_logged_out_items_slot: {
+    'org.openedx.frontend.layout.header_learning_logged_out_items.v1': {
      keepDefault: true,
      plugins: [
        {
--- a/src/plugin-slots/LearningLoggedOutItemsSlot/index.jsx
+++ b/src/plugin-slots/LearningLoggedOutItemsSlot/index.jsx
@@ -6,7 +6,8 @@ const LearningLoggedOutItemsSlot = ({
  buttonsInfo,
 }) => (
  <PluginSlot
-    id="learning_logged_out_items_slot"
+    id="org.openedx.frontend.layout.header_learning_logged_out_items.v1"
+    idAliases={['learning_logged_out_items_slot']}
    slotOptions={{
      mergeProps: true,
    }}
--- a/src/plugin-slots/LearningUserMenuSlot/README.md
+++ b/src/plugin-slots/LearningUserMenuSlot/README.md
@@ -1,6 +1,9 @@
 # Learning User Menu Slot

-### Slot ID: `learning_user_menu_slot`
+### Slot ID: `org.openedx.frontend.layout.header_learning_user_menu.v1`
+
+### Slot ID Aliases
+* `learning_user_menu_slot`

 ## Description

@@ -37,7 +40,7 @@ const modifyUserMenu = ( widget ) => {

 const config = {
  pluginSlots: {
-    learning_user_menu_slot: {
+    'org.openedx.frontend.layout.header_learning_user_menu.v1': {
      keepDefault: true,
      plugins: [
        {
@@ -64,7 +67,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame

 const config = {
  pluginSlots: {
-    learning_user_menu_slot: {
+    'org.openedx.frontend.layout.header_learning_user_menu.v1': {
      keepDefault: false,
      plugins: [
        {
@@ -96,7 +99,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame

 const config = {
  pluginSlots: {
-    learning_user_menu_slot: {
+    'org.openedx.frontend.layout.header_learning_user_menu.v1': {
      keepDefault: true,
      plugins: [
        {
--- a/src/plugin-slots/LearningUserMenuSlot/index.jsx
+++ b/src/plugin-slots/LearningUserMenuSlot/index.jsx
@@ -6,7 +6,8 @@ const LearningUserMenuSlot = ({
  items,
 }) => (
  <PluginSlot
-    id="learning_user_menu_slot"
+    id="org.openedx.frontend.layout.header_learning_user_menu.v1"
+    idAliases={['learning_user_menu_slot']}
    slotOptions={{
      mergeProps: true,
    }}
--- a/src/plugin-slots/LearningUserMenuToggleSlot/README.md
+++ b/src/plugin-slots/LearningUserMenuToggleSlot/README.md
@@ -0,0 +1,74 @@
+# Learning User Menu Toggle Slot
+
+### Slot ID: `org.openedx.frontend.layout.header_learning_user_menu_toggle.v1`
+
+## Description
+
+This slot is used to replace/modify/hide the contents of the learning user menu toggle button.
+
+## Examples
+
+### Modify Icon
+
+The following `env.config.jsx` will modify the icon for the learning user menu toggle button. **Note:** The icon is only shown on mobile screens.
+
+![Screenshot of modified items](./images/learning_user_menu_toggle_modified_items.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { faHouse } from '@fortawesome/free-solid-svg-icons';
+
+const modifyUserMenuToggle = ( widget ) => {
+  widget.content.icon = faHouse;
+  return widget;
+};
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_learning_user_menu_toggle.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Modify,
+          widgetId: 'default_contents',
+          fn: modifyUserMenuToggle,
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Replace Menu toggle contents with Custom Component
+
+The following `env.config.jsx` will replace the contents of the learning user menu toggle button's contents entirely (in this case with an emoji)
+
+![Screenshot of replaced with custom component](./images/learning_user_menu_toggle_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_learning_user_menu_toggle.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_learning_user_menu_toggle',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <span>🦊</span>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
--- a/src/plugin-slots/LearningUserMenuToggleSlot/images/learning_user_menu_toggle_custom_component.png
+++ b/src/plugin-slots/LearningUserMenuToggleSlot/images/learning_user_menu_toggle_custom_component.png
--- a/src/plugin-slots/LearningUserMenuToggleSlot/images/learning_user_menu_toggle_modified_items.png
+++ b/src/plugin-slots/LearningUserMenuToggleSlot/images/learning_user_menu_toggle_modified_items.png
--- a/src/plugin-slots/LearningUserMenuToggleSlot/index.jsx
+++ b/src/plugin-slots/LearningUserMenuToggleSlot/index.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import LearningUserMenuToggle, {
+  LearningUserMenuTogglePropTypes,
+} from '../../learning-header/LearningUserMenuToggle';
+
+const LearningUserMenuToggleSlot = ({
+  label, icon,
+}) => (
+  <PluginSlot
+    id="org.openedx.frontend.layout.header_learning_user_menu_toggle.v1"
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <LearningUserMenuToggle label={label} icon={icon} />
+  </PluginSlot>
+);
+
+LearningUserMenuToggleSlot.propTypes = LearningUserMenuTogglePropTypes;
+
+export default LearningUserMenuToggleSlot;
--- a/src/plugin-slots/LogoSlot/README.md
+++ b/src/plugin-slots/LogoSlot/README.md
@@ -1,6 +1,9 @@
 # Logo Slot

-### Slot ID: `logo_slot`
+### Slot ID: `org.openedx.frontend.layout.header_logo.v1`
+
+### Slot ID Aliases
+* `logo_slot`

 ## Description

@@ -22,7 +25,7 @@ const modifyLogoHref = ( widget ) => {

 const config = {
  pluginSlots: {
-    logo_slot: {
+    'org.openedx.frontend.layout.header_logo.v1': {
      keepDefault: true,
      plugins: [
        {
@@ -47,7 +50,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame

 const config = {
  pluginSlots: {
-    logo_slot: {
+    'org.openedx.frontend.layout.header_logo.v1': {
      keepDefault: false,
      plugins: [
        {
--- a/src/plugin-slots/LogoSlot/index.jsx
+++ b/src/plugin-slots/LogoSlot/index.jsx
@@ -1,20 +1,25 @@
 import React from 'react';
 import { PluginSlot } from '@openedx/frontend-plugin-framework';
-import Logo, { logoDataShape } from '../../Logo';
+import { Image, Hyperlink } from '@openedx/paragon';
+import { getConfig } from '@edx/frontend-platform';
+import andalLogo from '../../assets/complete-logo.svg';

-const LogoSlot = ({
-  href, src, alt, ...attributes
-}) => (
+const LogoSlot = ({ src, alt, href }) => (
  <PluginSlot
-    id="logo_slot"
+    id="org.openedx.frontend.layout.header_logo.v1"
+    idAliases={['logo_slot']}
    slotOptions={{
      mergeProps: true,
    }}
  >
-    <Logo href={href} src={src} alt={alt} {...attributes} />
+    <Hyperlink destination={href || getConfig().LMS_BASE_URL} className="logo">
+      <Image
+        src={src || andalLogo}
+        alt={alt || 'Andal Learning'}
+        style={{ height: '40px' }}
+      />
+    </Hyperlink>
  </PluginSlot>
 );

-LogoSlot.propTypes = logoDataShape;
-
 export default LogoSlot;
--- a/src/plugin-slots/MobileHeaderSlot/README.md
+++ b/src/plugin-slots/MobileHeaderSlot/README.md
@@ -1,6 +1,9 @@
 # Mobile Header Slot

-### Slot ID: `mobile_header_slot`
+### Slot ID: `org.openedx.frontend.layout.header_mobile.v1`
+
+### Slot ID Aliases
+* `mobile_header_slot`

 ## Description

@@ -19,7 +22,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame

 const config = {
  pluginSlots: {
-    mobile_header_slot: {
+    'org.openedx.frontend.layout.header_mobile.v1': {
      keepDefault: false,
      plugins: [
        {
--- a/src/plugin-slots/MobileHeaderSlot/index.jsx
+++ b/src/plugin-slots/MobileHeaderSlot/index.jsx
@@ -6,7 +6,8 @@ const MobileHeaderSlot = ({
  props,
 }) => (
  <PluginSlot
-    id="mobile_header_slot"
+    id="org.openedx.frontend.layout.header_mobile.v1"
+    idAliases={['mobile_header_slot']}
    slotOptions={{
      mergeProps: true,
    }}
--- a/src/plugin-slots/MobileLoggedOutItemsSlot/README.md
+++ b/src/plugin-slots/MobileLoggedOutItemsSlot/README.md
@@ -1,6 +1,9 @@
 # Mobile Logged Out Items Slot

-### Slot ID: `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

@@ -40,7 +43,7 @@ const modifyLoggedOutItems = ( widget ) => {

 const config = {
  pluginSlots: {
-    mobile_logged_out_items_slot: {
+    'org.openedx.frontend.layout.header_mobile_logged_out_items.v1': {
      keepDefault: true,
      plugins: [
        {
@@ -67,7 +70,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame

 const config = {
  pluginSlots: {
-    mobile_logged_out_items_slot: {
+    'org.openedx.frontend.layout.header_mobile_logged_out_items.v1': {
      keepDefault: false,
      plugins: [
        {
@@ -99,7 +102,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame

 const config = {
  pluginSlots: {
-    mobile_logged_out_items_slot: {
+    'org.openedx.frontend.layout.header_mobile_logged_out_items.v1': {
      keepDefault: true,
      plugins: [
        {
@@ -131,4 +134,3 @@ const config = {

 export default config;
 ```
-
--- a/src/plugin-slots/MobileLoggedOutItemsSlot/index.jsx
+++ b/src/plugin-slots/MobileLoggedOutItemsSlot/index.jsx
@@ -6,7 +6,8 @@ const MobileLoggedOutItemsSlot = ({
  items,
 }) => (
  <PluginSlot
-    id="mobile_logged_out_items_slot"
+    id="org.openedx.frontend.layout.header_mobile_logged_out_items.v1"
+    idAliases={['mobile_logged_out_items_slot']}
    slotOptions={{
      mergeProps: true,
    }}
--- a/src/plugin-slots/MobileMainMenuSlot/README.md
+++ b/src/plugin-slots/MobileMainMenuSlot/README.md
@@ -1,6 +1,9 @@
 # Mobile Main Menu Slot

-### Slot ID: `mobile_main_menu_slot`
+### Slot ID: `org.openedx.frontend.layout.header_mobile_main_menu.v1`
+
+### Slot ID Aliases
+* `mobile_main_menu_slot`

 ## Description

@@ -10,9 +13,11 @@ This slot is used to replace/modify/hide the mobile main menu.

 ### Modify Items

-The following `env.config.jsx` will modify the items in the mobile main menu.
+#### Replace All Items

-![Screenshot of modified items](./images/mobile_main_menu_modify_items.png)
+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';
@@ -40,7 +45,59 @@ const modifyMainMenu = ( widget ) => {

 const config = {
  pluginSlots: {
-    mobile_main_menu_slot: {
+    '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: [
        {
@@ -67,7 +124,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame

 const config = {
  pluginSlots: {
-    mobile_main_menu_slot: {
+    'org.openedx.frontend.layout.header_mobile_main_menu.v1': {
      keepDefault: false,
      plugins: [
        {
@@ -99,7 +156,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame

 const config = {
  pluginSlots: {
-    mobile_main_menu_slot: {
+    'org.openedx.frontend.layout.header_mobile_main_menu.v1': {
      keepDefault: true,
      plugins: [
        {
@@ -131,4 +188,3 @@ const config = {

 export default config;
 ```
-
--- a/src/plugin-slots/MobileMainMenuSlot/images/mobile_main_menu_add_items.png
+++ b/src/plugin-slots/MobileMainMenuSlot/images/mobile_main_menu_add_items.png
--- a/src/plugin-slots/MobileMainMenuSlot/images/mobile_main_menu_replace_all_items.png
+++ b/src/plugin-slots/MobileMainMenuSlot/images/mobile_main_menu_replace_all_items.png
--- a/src/plugin-slots/MobileMainMenuSlot/index.jsx
+++ b/src/plugin-slots/MobileMainMenuSlot/index.jsx
@@ -6,7 +6,8 @@ const MobileMainMenuSlot = ({
  menu,
 }) => (
  <PluginSlot
-    id="mobile_main_menu_slot"
+    id="org.openedx.frontend.layout.header_mobile_main_menu.v1"
+    idAliases={['mobile_main_menu_slot']}
    slotOptions={{
      mergeProps: true,
    }}
--- a/src/plugin-slots/MobileUserMenuSlot/README.md
+++ b/src/plugin-slots/MobileUserMenuSlot/README.md
@@ -1,6 +1,9 @@
 # Mobile User Menu Slot

-### Slot ID: `mobile_user_menu_slot`
+### Slot ID: `org.openedx.frontend.layout.header_mobile_user_menu.v1`
+
+### Slot ID Aliases
+* `mobile_user_menu_slot`

 ## Description

@@ -48,7 +51,7 @@ const modifyUserMenu = ( widget ) => {

 const config = {
  pluginSlots: {
-    mobile_user_menu_slot: {
+    'org.openedx.frontend.layout.header_mobile_user_menu.v1': {
      keepDefault: true,
      plugins: [
        {
@@ -75,7 +78,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame

 const config = {
  pluginSlots: {
-    mobile_user_menu_slot: {
+    'org.openedx.frontend.layout.header_mobile_user_menu.v1': {
      keepDefault: false,
      plugins: [
        {
@@ -107,7 +110,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame

 const config = {
  pluginSlots: {
-    mobile_user_menu_slot: {
+    'org.openedx.frontend.layout.header_mobile_user_menu.v1': {
      keepDefault: true,
      plugins: [
        {
@@ -139,4 +142,3 @@ const config = {

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

-* [`logo_slot`](./LogoSlot/)
-* [`desktop_main_menu_slot`](./DesktopMainMenuSlot/)
-* [`desktop_secondary_menu_slot`](./DesktopSecondaryMenuSlot/)
-* [`mobile_main_menu_slot`](./MobileMainMenuSlot/)
-* [`course_info_slot`](./CourseInfoSlot/)
-* [`learning_help_slot`](./LearningHelpSlot/)
-* [`desktop_logged_out_items_slot`](./DesktopLoggedOutItemsSlot/)
-* [`mobile_logged_out_items_slot`](./MobileLoggedOutItemsSlot/)
-* [`mobile_user_menu_slot`](./MobileUserMenuSlot/)
-* [`desktop_user_menu_slot`](./DesktopUserMenuSlot/)
-* [`learning_user_menu_slot`](./LearningUserMenuSlot/)
-* [`learning_logged_out_items_slot`](./LearningLoggedOutItemsSlot/)
-* [`desktop_header_slot`](./DesktopHeaderSlot/)
+### Shared
+* [`org.openedx.frontend.layout.header_logo.v1`](./LogoSlot/)
+
+### Desktop Header
+* [`org.openedx.frontend.layout.header_desktop.v1`](./DesktopHeaderSlot/)
+* [`org.openedx.frontend.layout.header_desktop_logged_out_items.v1`](./DesktopLoggedOutItemsSlot/)
+* [`org.openedx.frontend.layout.header_desktop_main_menu.v1`](./DesktopMainMenuSlot/)
+* [`org.openedx.frontend.layout.header_desktop_secondary_menu.v1`](./DesktopSecondaryMenuSlot/)
+* [`org.openedx.frontend.layout.header_desktop_user_menu.v1`](./DesktopUserMenuSlot/)
+* [`org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1`](./DesktopUserMenuToggleSlot/)
+
+### Learning Header
+* [`org.openedx.frontend.layout.header_learning_course_info.v1`](./CourseInfoSlot/)
+* [`org.openedx.frontend.layout.header_learning_help.v1`](./LearningHelpSlot/)
+* [`org.openedx.frontend.layout.header_learning_logged_out_items.v1`](./LearningLoggedOutItemsSlot/)
+* [`org.openedx.frontend.layout.header_learning_user_menu.v1`](./LearningUserMenuSlot/)
+* [`org.openedx.frontend.layout.header_learning_user_menu.v1`](./LearningUserMenuSlot/)
+
+### Mobile Header
+* [`org.openedx.frontend.layout.header_mobile.v1`](./MobileHeaderSlot/)
+* [`org.openedx.frontend.layout.header_mobile_logged_out_items.v1`](./MobileLoggedOutItemsSlot/)
+* [`org.openedx.frontend.layout.header_mobile_main_menu.v1`](./MobileMainMenuSlot/)
+* [`org.openedx.frontend.layout.header_mobile_user_menu.v1`](./MobileUserMenuSlot/)
+* [`org.openedx.frontend.layout.header_mobile_user_menu_trigger.v1`](./MobileUserMenuToggleSlot/)
+
+### Studio Header
+* [`org.openedx.frontend.layout.studio_header_search_button_slot.v1`](./StudioHeaderSearchButtonSlot/)
--- a/src/plugin-slots/StudioHeaderSearchButtonSlot/README.md
+++ b/src/plugin-slots/StudioHeaderSearchButtonSlot/README.md
@@ -0,0 +1,89 @@
+# Studio Header Search Button Slot
+
+### Slot ID: `org.openedx.frontend.layout.studio_header_search_button_slot.v1`
+
+## Description
+
+This slot is used to replace/modify/hide the search button in the studio header.
+
+## Examples
+
+### Replace search with custom component
+
+The following `env.config.jsx` will replace the search button entirely (in this case with a custom emoji icon):
+
+![Search button being replaced](./images/studio_header_search_button_replace.png)
+
+```jsx
+import {
+  DIRECT_PLUGIN,
+  PLUGIN_OPERATIONS,
+} from "@openedx/frontend-plugin-framework";
+
+const config = {
+  pluginSlots: {
+    "org.openedx.frontend.layout.studio_header_search_button_slot.v1": {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: "custom_notification_tray",
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => <span>🔔</span>,
+          },
+        },
+      ],
+    },
+  },
+};
+
+export default config;
+```
+
+### Add custom component before and after search button
+
+The following `env.config.jsx` will insert emoji after and before the search button
+
+![Add custom component before and after search button](./images/studio_header_search_button_before_after.png)
+
+```jsx
+import {
+  DIRECT_PLUGIN,
+  PLUGIN_OPERATIONS,
+} from "@openedx/frontend-plugin-framework";
+
+const config = {
+  pluginSlots: {
+    "org.openedx.frontend.layout.studio_header_search_button_slot.v1": {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            priority: 10,
+            id: 'custom_notification_tray_before',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => <span>🔔</span>,
+          },
+        },
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            priority: 90,
+            id: 'custom_notification_tray_after',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => <span>🔕</span>,
+          },
+        },
+      ],
+  },
+};
+
+export default config;
+```
+
+## API
+
+- **Slot ID:** `org.openedx.frontend.layout.studio_header_search_button_slot.v1`
+- **Component:** Uses the [PluginSlot](https://github.com/openedx/frontend-plugin-framework#pluginslot) from the Open edX Frontend Plugin Framework for plugin injection.
--- a/src/plugin-slots/StudioHeaderSearchButtonSlot/images/studio_header_search_button_before_after.png
+++ b/src/plugin-slots/StudioHeaderSearchButtonSlot/images/studio_header_search_button_before_after.png
--- a/src/plugin-slots/StudioHeaderSearchButtonSlot/images/studio_header_search_button_replace.png
+++ b/src/plugin-slots/StudioHeaderSearchButtonSlot/images/studio_header_search_button_replace.png
--- a/src/plugin-slots/StudioHeaderSearchButtonSlot/index.jsx
+++ b/src/plugin-slots/StudioHeaderSearchButtonSlot/index.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import { Nav, IconButton, Icon } from '@openedx/paragon';
+import { Search } from '@openedx/paragon/icons';
+import PropTypes from 'prop-types';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import messages from '../../studio-header/messages';
+
+const StudioHeaderSearchButtonSlot = ({ searchButtonAction }) => {
+  const intl = useIntl();
+  return (
+    <PluginSlot
+      id="org.openedx.frontend.layout.studio_header_search_button_slot.v1"
+    >
+      {searchButtonAction && (
+        <Nav>
+          <IconButton
+            src={Search}
+            iconAs={Icon}
+            onClick={searchButtonAction}
+            aria-label={intl.formatMessage(messages['header.label.search.nav'])}
+            alt={intl.formatMessage(messages['header.label.search.nav'])}
+          />
+        </Nav>
+      )}
+    </PluginSlot>
+  );
+};
+
+StudioHeaderSearchButtonSlot.propTypes = {
+  searchButtonAction: PropTypes.func,
+};
+
+export default StudioHeaderSearchButtonSlot;
--- a/src/setupTest.js
+++ b/src/setupTest.js
@@ -4,8 +4,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/extend-expect';
-import 'babel-polyfill';
-import 'jest-chain';
 import { getConfig, mergeConfig } from '@edx/frontend-platform';
 import { configure as configureLogging } from '@edx/frontend-platform/logging';
 import { configure as configureI18n } from '@edx/frontend-platform/i18n';
--- a/src/studio-header/BrandNav.test.tsx
+++ b/src/studio-header/BrandNav.test.tsx
@@ -34,7 +34,7 @@ describe('BrandNav Component', () => {
  it('displays a link that navigates to studioBaseUrl', () => {
    render(<RootWrapper />);

-    const link = screen.getByRole('link');
+    const link = screen.getByRole('link') as HTMLAnchorElement;
    expect(link.href).toBe(studioBaseUrl);
  });
 });
--- a/src/studio-header/BrandNav.tsx
+++ b/src/studio-header/BrandNav.tsx
@@ -1,8 +1,13 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { type FunctionComponent } from 'react';
 import { Link } from 'react-router-dom';

-const BrandNav = ({
+interface Props {
+  studioBaseUrl: string;
+  logo: string;
+  logoAltText: string;
+}
+
+const BrandNav: FunctionComponent<Props> = ({
  studioBaseUrl,
  logo,
  logoAltText,
@@ -16,10 +21,4 @@ const BrandNav = ({
  </Link>
 );

-BrandNav.propTypes = {
-  studioBaseUrl: PropTypes.string.isRequired,
-  logo: PropTypes.string.isRequired,
-  logoAltText: PropTypes.string.isRequired,
-};
-
 export default BrandNav;
--- a/src/studio-header/CourseLockUp.jsx
+++ b/src/studio-header/CourseLockUp.jsx
@@ -1,56 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import {
-  OverlayTrigger,
-  Tooltip,
-} from '@openedx/paragon';
-import { Link } from 'react-router-dom';
-
-import messages from './messages';
-
-const CourseLockUp = ({
-  outlineLink,
-  org,
-  number,
-  title,
-  // injected
-  intl,
-}) => (
-  <OverlayTrigger
-    placement="bottom"
-    overlay={(
-      <Tooltip id="course-lock-up">
-        {title}
-      </Tooltip>
-    )}
-  >
-    <Link
-      className="course-title-lockup mr-2"
-      to={outlineLink}
-      aria-label={intl.formatMessage(messages['header.label.courseOutline'])}
-      data-testid="course-lock-up-block"
-    >
-      <span className="d-block small m-0 text-gray-800" data-testid="course-org-number">{org} {number}</span>
-      <span className="d-block m-0 font-weight-bold text-gray-800" data-testid="course-title">{title}</span>
-    </Link>
-  </OverlayTrigger>
-);
-
-CourseLockUp.propTypes = {
-  number: PropTypes.string,
-  org: PropTypes.string,
-  title: PropTypes.string,
-  outlineLink: PropTypes.string,
-  // injected
-  intl: intlShape.isRequired,
-};
-
-CourseLockUp.defaultProps = {
-  number: null,
-  org: null,
-  title: null,
-  outlineLink: null,
-};
-
-export default injectIntl(CourseLockUp);
--- a/src/studio-header/CourseLockUp.test.tsx
+++ b/src/studio-header/CourseLockUp.test.tsx
@@ -16,7 +16,7 @@ const mockProps = {

 const RootWrapper = (props) => (
  <MemoryRouter>
-    <IntlProvider locale="en" messages={messages}>
+    <IntlProvider locale="en" messages={{}}>
      <CourseLockUp {...props} />
    </IntlProvider>
  </MemoryRouter>
@@ -52,7 +52,8 @@ describe('CourseLockUp Component', () => {
  it('navigates to an absolute URL when clicked', () => {
    render(<RootWrapper {...mockProps} />);

-    const link = screen.getByTestId('course-lock-up-block');
+    // FIXME: don't use testId - https://testing-library.com/docs/queries/about#priority
+    const link = screen.getByTestId('course-lock-up-block') as HTMLAnchorElement;
    expect(link.href).toBe(mockProps.outlineLink);
  });
 });
--- a/src/studio-header/CourseLockUp.tsx
+++ b/src/studio-header/CourseLockUp.tsx
@@ -0,0 +1,48 @@
+import React, { type FunctionComponent } from 'react';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  OverlayTrigger,
+  Tooltip,
+} from '@openedx/paragon';
+import { Link } from 'react-router-dom';
+
+import messages from './messages';
+
+interface Props {
+  outlineLink?: string;
+  org?: string;
+  number?: string;
+  title?: string;
+}
+
+const CourseLockUp: FunctionComponent<Props> = ({
+  outlineLink = '',
+  org = '',
+  number = '',
+  title = '',
+}) => {
+  const intl = useIntl();
+
+  return (
+    <OverlayTrigger
+      placement="bottom"
+      overlay={(
+        <Tooltip id="course-lock-up">
+          {title}
+        </Tooltip>
+      )}
+    >
+      <Link
+        className="course-title-lockup mr-2"
+        to={outlineLink}
+        aria-label={intl.formatMessage(messages['header.label.courseOutline'])}
+        data-testid="course-lock-up-block"
+      >
+        <span className="d-block small m-0 text-gray-800" data-testid="course-org-number">{org} {number}</span>
+        <span className="d-block m-0 font-weight-bold text-gray-800" data-testid="course-title">{title}</span>
+      </Link>
+    </OverlayTrigger>
+  );
+};
+
+export default CourseLockUp;
--- a/src/studio-header/HeaderBody.test.tsx
+++ b/src/studio-header/HeaderBody.test.tsx
@@ -35,7 +35,7 @@ const defaultProps = {

 const RootWrapper = (props) => (
  <MemoryRouter>
-    <IntlProvider locale="en" messages={messages}>
+    <IntlProvider locale="en" messages={{}}>
      <HeaderBody {...props} />
    </IntlProvider>
  </MemoryRouter>
--- a/src/studio-header/HeaderBody.tsx
+++ b/src/studio-header/HeaderBody.tsx
@@ -1,23 +1,45 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import React, { type ReactNode, type ComponentProps } from 'react';
 import classNames from 'classnames';
 import {
  ActionRow,
  Button,
  Container,
-  Icon,
-  IconButton,
  Nav,
  Row,
 } from '@openedx/paragon';
-import { Close, MenuIcon, Search } from '@openedx/paragon/icons';
+import { Close, MenuIcon } from '@openedx/paragon/icons';

 import CourseLockUp from './CourseLockUp';
 import UserMenu from './UserMenu';
 import BrandNav from './BrandNav';
 import NavDropdownMenu from './NavDropdownMenu';
-import messages from './messages';
+import StudioHeaderSearchButtonSlot from '../plugin-slots/StudioHeaderSearchButtonSlot';
+
+export interface HeaderBodyProps {
+  studioBaseUrl: string;
+  logoutUrl: string;
+  setModalPopupTarget?: ((instance: HTMLButtonElement | null) => void) | null;
+  toggleModalPopup?: React.MouseEventHandler<HTMLButtonElement>;
+  isModalPopupOpen?: boolean;
+  number?: string;
+  org?: string;
+  title: string;
+  logo: string;
+  logoAltText: string;
+  authenticatedUserAvatar?: string;
+  username?: string;
+  isAdmin?: boolean;
+  isMobile?: boolean;
+  isHiddenMainMenu?: boolean;
+  mainMenuDropdowns?: {
+    id: string;
+    buttonTitle: ReactNode;
+    items: { title: ReactNode; href: string; }[];
+  }[];
+  outlineLink?: string;
+  searchButtonAction?: React.MouseEventHandler<HTMLButtonElement>;
+  containerProps?: Omit<ComponentProps<typeof Container>, 'children'>;
+}

 const HeaderBody = ({
  logo,
@@ -31,16 +53,15 @@ const HeaderBody = ({
  logoutUrl,
  authenticatedUserAvatar,
  isMobile,
-  setModalPopupTarget,
+  setModalPopupTarget = null,
  toggleModalPopup,
-  isModalPopupOpen,
-  isHiddenMainMenu,
-  mainMenuDropdowns,
+  isModalPopupOpen = false,
+  isHiddenMainMenu = false,
+  mainMenuDropdowns = [],
  outlineLink,
  searchButtonAction,
-  containerProps,
-}) => {
-  const intl = useIntl();
+  containerProps = {},
+}: HeaderBodyProps) => {

  const renderBrandNav = (
    <BrandNav
@@ -52,7 +73,7 @@ const HeaderBody = ({
    />
  );

-  const { className: containerClassName, ...restContainerProps } = containerProps || {};
+  const { className: containerClassName, ...restContainerProps } = containerProps;

  return (
    <Container
@@ -116,17 +137,9 @@ const HeaderBody = ({
          </>
        )}
        <ActionRow.Spacer />
-        {searchButtonAction && (
-          <Nav>
-            <IconButton
-              src={Search}
-              iconAs={Icon}
-              onClick={searchButtonAction}
-              aria-label={intl.formatMessage(messages['header.label.search.nav'])}
-              alt={intl.formatMessage(messages['header.label.search.nav'])}
-            />
-          </Nav>
-        )}
+        <StudioHeaderSearchButtonSlot
+          searchButtonAction={searchButtonAction}
+        />
        <Nav>
          <UserMenu
            {...{
@@ -135,6 +148,7 @@ const HeaderBody = ({
              logoutUrl,
              authenticatedUserAvatar,
              isAdmin,
+              isMobile,
            }}
          />
        </Nav>
@@ -143,53 +157,4 @@ const HeaderBody = ({
  );
 };

-HeaderBody.propTypes = {
-  studioBaseUrl: PropTypes.string.isRequired,
-  logoutUrl: PropTypes.string.isRequired,
-  setModalPopupTarget: PropTypes.func,
-  toggleModalPopup: PropTypes.func,
-  isModalPopupOpen: PropTypes.bool,
-  number: PropTypes.string,
-  org: PropTypes.string,
-  title: PropTypes.string,
-  logo: PropTypes.string,
-  logoAltText: PropTypes.string,
-  authenticatedUserAvatar: PropTypes.string,
-  username: PropTypes.string,
-  isAdmin: PropTypes.bool,
-  isMobile: PropTypes.bool,
-  isHiddenMainMenu: PropTypes.bool,
-  mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    buttonTitle: PropTypes.node,
-    items: PropTypes.arrayOf(PropTypes.shape({
-      href: PropTypes.string,
-      title: PropTypes.node,
-    })),
-  })),
-  outlineLink: PropTypes.string,
-  searchButtonAction: PropTypes.func,
-  containerProps: PropTypes.shape(Container.propTypes),
-};
-
-HeaderBody.defaultProps = {
-  setModalPopupTarget: null,
-  toggleModalPopup: null,
-  isModalPopupOpen: false,
-  logo: null,
-  logoAltText: null,
-  number: '',
-  org: '',
-  title: '',
-  authenticatedUserAvatar: null,
-  username: null,
-  isAdmin: false,
-  isMobile: false,
-  isHiddenMainMenu: false,
-  mainMenuDropdowns: [],
-  outlineLink: null,
-  searchButtonAction: null,
-  containerProps: {},
-};
-
 export default HeaderBody;
--- a/src/studio-header/MobileHeader.jsx
+++ b/src/studio-header/MobileHeader.jsx
@@ -1,73 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { useToggle, ModalPopup } from '@openedx/paragon';
-import HeaderBody from './HeaderBody';
-import MobileMenu from './MobileMenu';
-
-const MobileHeader = ({
-  mainMenuDropdowns,
-  ...props
-}) => {
-  const [isOpen, , close, toggle] = useToggle(false);
-  const [target, setTarget] = useState(null);
-
-  return (
-    <>
-      <HeaderBody
-        {...props}
-        isMobile
-        setModalPopupTarget={setTarget}
-        toggleModalPopup={toggle}
-        isModalPopupOpen={isOpen}
-      />
-      <ModalPopup
-        hasArrow
-        placement="bottom"
-        positionRef={target}
-        isOpen={isOpen}
-        onClose={close}
-        onEscapeKey={close}
-        className="mobile-menu-container"
-      >
-        <MobileMenu {...{ mainMenuDropdowns }} />
-      </ModalPopup>
-    </>
-  );
-};
-
-MobileHeader.propTypes = {
-  studioBaseUrl: PropTypes.string.isRequired,
-  logoutUrl: PropTypes.string.isRequired,
-  number: PropTypes.string,
-  org: PropTypes.string,
-  title: PropTypes.string,
-  logo: PropTypes.string,
-  logoAltText: PropTypes.string,
-  authenticatedUserAvatar: PropTypes.string,
-  username: PropTypes.string,
-  isAdmin: PropTypes.bool,
-  mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    buttonTitle: PropTypes.node,
-    items: PropTypes.arrayOf(PropTypes.shape({
-      href: PropTypes.string,
-      title: PropTypes.node,
-    })),
-  })),
-  outlineLink: PropTypes.string,
-};
-
-MobileHeader.defaultProps = {
-  logo: null,
-  logoAltText: null,
-  number: null,
-  org: null,
-  title: null,
-  authenticatedUserAvatar: null,
-  username: null,
-  isAdmin: false,
-  mainMenuDropdowns: [],
-  outlineLink: null,
-};
-
-export default MobileHeader;
--- a/src/studio-header/MobileHeader.tsx
+++ b/src/studio-header/MobileHeader.tsx
@@ -0,0 +1,52 @@
+import React, { type FunctionComponent, useState } from 'react';
+import { useToggle, ModalPopup } from '@openedx/paragon';
+import HeaderBody, { type HeaderBodyProps } from './HeaderBody';
+import MobileMenu from './MobileMenu';
+
+type Props = Pick<HeaderBodyProps,
+| 'studioBaseUrl'
+| 'logoutUrl'
+| 'number'
+| 'org'
+| 'title'
+| 'logo'
+| 'logoAltText'
+| 'authenticatedUserAvatar'
+| 'username'
+| 'isAdmin'
+| 'mainMenuDropdowns'
+| 'outlineLink'
+>;
+
+const MobileHeader: FunctionComponent<Props> = ({
+  mainMenuDropdowns,
+  ...props
+}) => {
+  const [isOpen, , close, toggle] = useToggle(false);
+  const [target, setTarget] = useState<HTMLButtonElement | null>(null);
+
+  return (
+    <>
+      <HeaderBody
+        {...props}
+        isMobile
+        setModalPopupTarget={setTarget}
+        toggleModalPopup={toggle}
+        isModalPopupOpen={isOpen}
+      />
+      <ModalPopup
+        hasArrow
+        placement="bottom"
+        positionRef={target}
+        isOpen={isOpen}
+        onClose={close}
+        onEscapeKey={close}
+        className="mobile-menu-container"
+      >
+        <MobileMenu {...{ mainMenuDropdowns }} />
+      </ModalPopup>
+    </>
+  );
+};
+
+export default MobileHeader;
--- a/src/studio-header/MobileMenu.test.tsx
+++ b/src/studio-header/MobileMenu.test.tsx
--- a/src/studio-header/MobileMenu.tsx
+++ b/src/studio-header/MobileMenu.tsx
--- a/src/studio-header/NavDropdownMenu.test.tsx
+++ b/src/studio-header/NavDropdownMenu.test.tsx
--- a/src/studio-header/NavDropdownMenu.tsx
+++ b/src/studio-header/NavDropdownMenu.tsx
@@ -1,16 +1,21 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { type ReactNode } from 'react';
 import {
  Dropdown,
  DropdownButton,
 } from '@openedx/paragon';
 import { Link } from 'react-router-dom';

+interface Props {
+  id: string;
+  buttonTitle: ReactNode;
+  items: { title: ReactNode; href: string; }[];
+}
+
 const NavDropdownMenu = ({
  id,
  buttonTitle,
  items,
-}) => (
+}: Props) => (
  <DropdownButton
    id={id}
    title={buttonTitle}
@@ -30,13 +35,4 @@ const NavDropdownMenu = ({
  </DropdownButton>
 );

-NavDropdownMenu.propTypes = {
-  id: PropTypes.string.isRequired,
-  buttonTitle: PropTypes.node.isRequired,
-  items: PropTypes.arrayOf(PropTypes.shape({
-    href: PropTypes.string.isRequired,
-    title: PropTypes.node.isRequired,
-  })).isRequired,
-};
-
 export default NavDropdownMenu;
--- a/src/studio-header/StudioHeader.scss
+++ b/src/studio-header/StudioHeader.scss
@@ -7,10 +7,10 @@ $white: #FFFFFF;

  height: 3.75rem;
  box-shadow: 0 1px 0 0 rgb(0 0 0 / .1);
-  background: $white;
+  background: var(--pgn-color-white, $white);

  .btn-outline-primary {
-    border-color: $white;
+    border-color: var(--pgn-color-white, $white);
  }

  .logo {
@@ -19,8 +19,8 @@ $white: #FFFFFF;
    position: relative;
    top: -.05em;
    height: 1.75rem;
-    padding: $spacer 0;
-    margin-right: $spacer;
+    padding: var(--pgn-spacing-spacer-base, $spacer) 0;
+    margin-right: var(--pgn-spacing-spacer-base, $spacer);

    img {
      display: block;
@@ -29,17 +29,17 @@ $white: #FFFFFF;
  }

  .course-title-lockup {
+    overflow: hidden;
+
    @media only screen and (min-width: 769px) {
      padding: .5rem;
-      padding-right: $spacer;
+      padding-right: var(--pgn-spacing-spacer-base, $spacer);
      border-right: 1px solid #E5E5E5;
      width: 70%;
    }
  
-    overflow: hidden;
-  
    span {
-      color: #333333;
+      color: var(--pgn-color-gray-800, #333333);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
--- a/src/studio-header/StudioHeader.test.tsx
+++ b/src/studio-header/StudioHeader.test.tsx
@@ -25,7 +25,7 @@ let screenWidth = 1280;

 const RootWrapper = ({
  ...props
-}) => {
+}: React.ComponentProps<typeof StudioHeader>) => {
  const appContextValue = useMemo(() => ({
    authenticatedUser: currentUser,
    config: {
@@ -54,7 +54,7 @@ const RootWrapper = ({
  );
 };

-const props = {
+const props: React.ComponentProps<typeof StudioHeader> = {
  number: '123',
  org: 'Ed',
  title: 'test',
@@ -71,7 +71,7 @@ const props = {
    },
  ],
  outlineLink: 'tEsTLInK',
-  searchButtonAction: null,
+  searchButtonAction: undefined,
  isNewHomePage: true,
 };

@@ -142,7 +142,7 @@ describe('Header', () => {
    });

    it('should not show search button', async () => {
-      const testProps = { ...props, searchButtonAction: null };
+      const testProps = { ...props, searchButtonAction: undefined };
      const { queryByRole } = render(<RootWrapper {...testProps} />);
      expect(queryByRole('button', { name: 'Search content' })).not.toBeInTheDocument();
    });
--- a/src/studio-header/StudioHeader.tsx
+++ b/src/studio-header/StudioHeader.tsx
@@ -1,11 +1,10 @@
-import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
+import React, { type FunctionComponent, useContext } from 'react';
 import Responsive from 'react-responsive';
 import { AppContext } from '@edx/frontend-platform/react';
 import { ensureConfig } from '@edx/frontend-platform';

 import MobileHeader from './MobileHeader';
-import HeaderBody from './HeaderBody';
+import HeaderBody, { HeaderBodyProps } from './HeaderBody';

 ensureConfig([
  'STUDIO_BASE_URL',
@@ -15,10 +14,31 @@ ensureConfig([
  'LOGO_URL',
 ], 'Studio Header component');

-const StudioHeader = ({
-  number, org, title, containerProps, isHiddenMainMenu, mainMenuDropdowns,
-  outlineLink, searchButtonAction, isNewHomePage,
+type Props = Pick<HeaderBodyProps,
+| 'number'
+| 'org'
+| 'title'
+| 'containerProps'
+| 'isHiddenMainMenu'
+| 'mainMenuDropdowns'
+| 'outlineLink'
+| 'searchButtonAction'
+> & {
+  isNewHomePage: boolean;
+};
+
+const StudioHeader: FunctionComponent<Props> = ({
+  number,
+  org,
+  title,
+  containerProps,
+  isHiddenMainMenu,
+  mainMenuDropdowns,
+  outlineLink,
+  searchButtonAction,
+  isNewHomePage,
 }) => {
+  // @ts-expect-error - frontend-platform doesn't yet have type information :/
  const { authenticatedUser, config } = useContext(AppContext);
  const props = {
    logo: config.LOGO_URL,
@@ -51,33 +71,4 @@ const StudioHeader = ({
  );
 };

-StudioHeader.propTypes = {
-  number: PropTypes.string,
-  org: PropTypes.string,
-  title: PropTypes.string.isRequired,
-  containerProps: HeaderBody.propTypes.containerProps,
-  isHiddenMainMenu: PropTypes.bool,
-  mainMenuDropdowns: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    buttonTitle: PropTypes.node,
-    items: PropTypes.arrayOf(PropTypes.shape({
-      href: PropTypes.string,
-      title: PropTypes.node,
-    })),
-  })),
-  outlineLink: PropTypes.string,
-  searchButtonAction: PropTypes.func,
-  isNewHomePage: PropTypes.bool.isRequired,
-};
-
-StudioHeader.defaultProps = {
-  number: '',
-  org: '',
-  containerProps: {},
-  isHiddenMainMenu: false,
-  mainMenuDropdowns: [],
-  outlineLink: null,
-  searchButtonAction: null,
-};
-
 export default StudioHeader;
--- a/src/studio-header/UserMenu.tsx
+++ b/src/studio-header/UserMenu.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
  Avatar,
 } from '@openedx/paragon';
@@ -14,9 +14,8 @@ const UserMenu = ({
  authenticatedUserAvatar,
  isMobile,
  isAdmin,
-  // injected
-  intl,
 }) => {
+  const intl = useIntl();
  const avatar = authenticatedUserAvatar ? (
    <img
      className="d-block w-100 h-100"
@@ -55,8 +54,6 @@ UserMenu.propTypes = {
  authenticatedUserAvatar: PropTypes.string,
  isMobile: PropTypes.bool,
  isAdmin: PropTypes.bool,
-  // injected
-  intl: intlShape.isRequired,
 };

 UserMenu.defaultProps = {
@@ -66,4 +63,4 @@ UserMenu.defaultProps = {
  username: null,
 };

-export default injectIntl(UserMenu);
+export default UserMenu;
--- a/src/studio-header/index.ts
+++ b/src/studio-header/index.ts
--- a/src/studio-header/messages.ts
+++ b/src/studio-header/messages.ts
--- a/src/studio-header/utils.ts
+++ b/src/studio-header/utils.ts
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,12 @@
+{
+    "extends": "@edx/typescript-config",
+    "compilerOptions": {
+      "noEmit": true,
+      "baseUrl": "./src",
+      "paths": {
+        "*": ["*"]
+      }
+    },
+    "include": ["*.js", ".eslintrc.js", "src/**/*", "plugins/**/*"],
+    "exclude": ["dist", "node_modules"]
+}
--- a/webpack.dev.config.js
+++ b/webpack.dev.config.js
@@ -2,7 +2,9 @@ const path = require('path');
 const { createConfig } = require('@openedx/frontend-build');

 module.exports = createConfig('webpack-dev', {
-  entry: path.resolve(__dirname, 'example'),
+  entry: {
+    app: path.resolve(__dirname, 'example'),
+  },
  output: {
    path: path.resolve(__dirname, 'example/dist'),
    publicPath: '/',
Author	SHA1	Message	Date
tauficls	7045ccd7a1	Merge pull request 'Andal LND - Header styling customizations and logo slot' (#2 ) from andal-lnd/front-end into master Reviewed-on: #2 Reviewed-by: Damar <damar@noreply.git.andalsoftware.com> Reviewed-by: tauficls <tauficls@noreply.git.andalsoftware.com>	2026-04-01 08:39:51 +07:00
Banu	4e21db20b0	Andal LND - Header styling customizations and logo slot	2026-03-31 13:38:29 +07:00
Brian Smith	af6fe9fcdb	chore(ci): update semantic release workflow to use OIDC (#660 )	2026-01-27 09:14:11 -05:00
renovate[bot]	1118dca6c8	chore(deps): update dependency @openedx/paragon to v23.18.2 (#661 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-12-22 06:40:46 +00:00
renovate[bot]	59ac43b1cc	chore(deps): update dependency ts-jest to v29.4.6 (#659 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-12-15 05:54:58 +00:00
renovate[bot]	aaa849a697	chore(deps): update dependency @openedx/paragon to v23.18.1 (#658 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-12-01 08:59:11 +00:00
renovate[bot]	840b042606	chore(deps): update dependency @openedx/paragon to v23.18.0 (#657 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-11-24 05:03:19 +00:00
renovate[bot]	93d62e35e8	chore(deps): update dependency react-router-dom to v6.30.2 (#656 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-11-17 06:10:50 +00:00
renovate[bot]	0c305651b0	chore(deps): update dependency @openedx/paragon to v23.16.0 (#654 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-11-10 06:36:21 +00:00
renovate[bot]	dfad1edcb9	chore(deps): update dependency redux-saga to v1.4.2 (#652 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-11-03 07:02:31 +00:00
renovate[bot]	af46ef756e	chore(deps): update dependency @openedx/paragon to v23.15.2 (#651 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-11-03 07:02:10 +00:00
Farhaan Bukhsh	c86165180f	feat: Moves search button into a slot (#644 ) Signed-off-by: Farhaan Bukhsh <farhaan@opencraft.com>	2025-10-27 10:51:45 -04:00
renovate[bot]	97063850c6	chore(deps): update dependency @openedx/paragon to v23.15.0 (#650 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-10-27 04:33:28 +00:00
renovate[bot]	af252d2d3f	chore(deps): update dependency @edx/frontend-platform to v8.5.2 (#649 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-10-27 04:33:12 +00:00
renovate[bot]	9e850c3229	chore(deps): update dependency @openedx/paragon to v23.14.9 (#647 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-10-20 05:52:53 +00:00
Braden MacDonald	413454b6e6	refactor: update propTypes -> TypeScript in Studio Header (#643 )	2025-10-14 09:43:33 -07:00
renovate[bot]	ed7cc8a36e	chore(deps): update dependency ts-jest to v29.4.5 (#646 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-10-13 04:27:12 +00:00
renovate[bot]	a8a4ad59ed	chore(deps): update dependency @openedx/paragon to v23.14.8 (#645 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-10-13 04:27:04 +00:00
Kyle McCormick	9f2b2a4026	feat: Remove Studio Maintenance link (empty commit for release CI) This was already merged in `6d424edbd5`, but we are pushing this empty commit with BREAKING CHANGE message in order to trigger the release of a new semantic version. BREAKING CHANGE: The Studio "Maintenance" link has been removed as part of https://github.com/openedx/edx-platform/issues/36263	2025-10-07 15:28:43 -04:00
Feanil Patel	21953ec96d	Merge pull request #629 from openedx/renovate/actions-checkout-5.x chore(deps): update actions/checkout action to v5	2025-10-07 14:06:33 -04:00
renovate[bot]	57671449b1	chore(deps): update actions/checkout action to v5	2025-10-07 17:59:08 +00:00
Feanil Patel	66012905b2	Merge pull request #641 from openedx/renovate/actions-setup-node-5.x chore(deps): update actions/setup-node action to v5	2025-10-07 13:57:38 -04:00
renovate[bot]	209d52ed60	chore(deps): update actions/setup-node action to v5	2025-10-07 17:55:09 +00:00
Kyle McCormick	6d424edbd5	feat!: Remove Studio Maintenance link (#642 ) This reverts commit `48c49fe0b2`. The original commit (`a229c34535`) was merged prematurely, so it was reverted. However, now that we have properly DEPR'd the underlying feature, we can revert that revert. Part of: https://github.com/openedx/edx-platform/issues/36263	2025-10-07 13:54:30 -04:00
renovate[bot]	5a4279a7f3	chore(deps): update dependency @openedx/paragon to v23.14.4 (#640 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-10-07 13:54:01 -04:00
Peter Kulko	ef0ea1378d	docs: [FC-86] Restructure Modify Items section with Add/Replace examples (#598 ) * docs: example of adding Marketing links via the plugin slots * refactor: code refactoring * feat: added logoDestination props for Header component * refactor: after rebase * refactor: updated tests * refactor: after review * refactor: removed logoDestination prop * docs: Custom Marketing links mobile example * refactor: after review	2025-09-29 12:44:28 -04:00
oleksandr.buhaienko	b8b39bffbc	test: Remove support for Node 20	2025-09-29 12:26:17 -03:00
renovate[bot]	7f778adda9	chore(deps): update jest monorepo to v30.2.0 (#637 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-29 06:50:45 +00:00
renovate[bot]	4cf48d8ba8	chore(deps): update dependency @openedx/paragon to v23.14.3 (#636 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-29 06:50:27 +00:00
Feanil Patel	2e82ba910d	build: remove unused @edx/reactifex package Remove @edx/reactifex package from devDependencies as it is no longer needed. Translation extraction functionality has been verified to work correctly without these dependencies. Co-Authored-By: Claude <noreply@anthropic.com>	2025-09-26 09:58:55 -03:00
oleksandr.buhaienko	02533b0474	build: Upgrade to Node 24	2025-09-26 09:18:14 -03:00
Brian Smith	ecf7f1dfc1	feat!: release breaking change as breaking (#634 ) Add README note about typescript BREAKING CHANGE: release breaking change (typescript) as breaking	2025-09-24 13:51:11 -04:00
renovate[bot]	dbec796ceb	chore(deps): update jest monorepo (#633 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-22 06:06:34 +00:00
bydawen	4a797a59cc	test: Add Node 24 to CI matrix (#611 )	2025-09-16 10:35:41 -04:00
renovate[bot]	a8a7348605	chore(deps): update dependency @edx/frontend-platform to v8.5.1 (#632 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-15 04:56:33 +00:00
renovate[bot]	1ff9ecaf15	chore(deps): update dependency @openedx/frontend-build to v14.6.2 (#631 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-09-08 05:27:56 +00:00
Jacobo Dominguez	8f67fdba68	refactor: replacement of injectIntl (#625 )	2025-08-29 13:05:16 -04:00
renovate[bot]	43684dce91	fix(deps): update dependency @fortawesome/react-fontawesome to v0.2.6 (#630 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-08-25 06:16:18 +00:00
renovate[bot]	3ddfbab1ef	chore(deps): update dependency @openedx/paragon to v23.14.2 (#628 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-08-18 04:53:34 +00:00
renovate[bot]	030758e078	chore(deps): update dependency @edx/frontend-platform to v8.5.0 (#627 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-08-11 04:25:30 +00:00
renovate[bot]	c56b945f0d	chore(deps): update dependency @openedx/paragon to v23.14.1 (#626 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-08-11 04:25:16 +00:00
Fox Piacenti	69750674c3	feat: User menu trigger plugin slots. (#618 )	2025-08-01 09:58:35 -04:00
renovate[bot]	813cbb3156	fix(deps): update dependency @fortawesome/react-fontawesome to v0.2.3 (#624 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-07-28 06:35:01 +00:00
renovate[bot]	20aaa4f2e2	chore(deps): update jest monorepo to v30.0.5 (#623 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-07-28 06:34:40 +00:00
Braden MacDonald	4dfb1b3053	fix: remove unused jest-chain, babel-polyfill, axios-mock-adapter (#603 )	2025-07-21 10:38:01 -07:00
Braden MacDonald	171a770235	feat: enable the use of TypeScript in this repo (#604 ) * feat: enable Typescript in this repo * refactor: rename studio-header files to .ts[x] * chore: fix minor type warnings * chore: add types for frontend-platform * chore: fix type issues * chore: update name of suppressed lint check	2025-07-21 10:24:52 -07:00
renovate[bot]	f47c1ed1e6	fix(deps): update jest monorepo to v30 (#620 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-07-14 06:41:21 +00:00
renovate[bot]	c63da3051b	chore(deps): update dependency @openedx/paragon to v23.14.0 (#616 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-07-07 06:16:34 +00:00
renovate[bot]	04b35786d4	fix(deps): update font awesome to v6.7.2 (#610 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-30 12:47:21 +00:00
renovate[bot]	657e9c0190	chore(deps): update dependency @openedx/frontend-build to v14.6.1 (#609 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-30 12:47:03 +00:00
renovate[bot]	2874c9603f	chore(deps): update dependency @openedx/paragon to v23.13.0 (#614 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-30 06:47:01 +00:00
renovate[bot]	ec5381ea17	chore(deps): update dependency @openedx/paragon to v23.12.2 (#606 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-16 05:48:54 +00:00
renovate[bot]	d5ac171a5b	chore(deps): update dependency @edx/frontend-platform to v8.4.0 (#605 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-16 05:48:36 +00:00
renovate[bot]	3be690b34b	chore(deps): update dependency @openedx/paragon to v23.10.1 (#602 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-09 05:36:02 +00:00
renovate[bot]	441e1542ad	chore(deps): update dependency @edx/frontend-platform to v8.3.9 (#601 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-09 05:35:41 +00:00
renovate[bot]	c1db3d409e	chore(deps): update dependency @openedx/paragon to v23.10.0 (#600 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-02 06:36:18 +00:00
renovate[bot]	0c343cfdf0	chore(deps): update dependency @edx/frontend-platform to v8.3.8 (#599 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-06-02 06:36:03 +00:00
renovate[bot]	f740d0107e	chore(deps): update dependency react-router-dom to v6.30.1 (#597 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-05-26 06:57:40 +00:00
renovate[bot]	98bc20a282	chore(deps): update dependency @edx/frontend-platform to v8.3.7 (#596 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-05-26 06:57:30 +00:00
renovate[bot]	ca15863c82	chore(deps): update dependency react-router-dom to v6.30.0 (#595 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-05-19 06:08:20 +00:00
renovate[bot]	ff9cb1b238	chore(deps): update dependency @openedx/paragon to v23.6.0 (#594 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-05-19 06:08:14 +00:00
renovate[bot]	67967156f4	chore(deps): update dependency @edx/frontend-platform to v8.3.6 (#592 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-05-12 07:13:35 +00:00
renovate[bot]	e4720ff6b0	chore(deps): update dependency @openedx/paragon to v23.5.1 (#593 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-05-12 07:12:12 +00:00
renovate[bot]	df704ce6d7	chore(deps): update dependency @openedx/frontend-build to v14.6.0 (#591 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-05-05 07:44:35 +00:00
renovate[bot]	a2dc80ffb8	chore(deps): update dependency @edx/frontend-platform to v8.3.5 (#590 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-05-05 07:44:23 +00:00
Brian Smith	95efe7fedd	feat: standardize slot ids (#589 )	2025-04-23 15:45:16 -04:00
renovate[bot]	8df7d928dd	chore(deps): update dependency @openedx/paragon to v23.4.5 (#588 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-04-21 05:55:17 +00:00
renovate[bot]	5e77a47708	chore(deps): update dependency @edx/frontend-platform to v8.3.4 (#587 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-04-21 05:54:58 +00:00
Régis Behmo	8ef3a27a62	chore: remove husky 🪓🐶 We remove husky, which is triggering pre-push git hooks, including running "npm lint". This is causing failures when building Docker images, because "npm clean-install --omit=dev" automatically triggers "npm prepare", which attemps to run "husky". But husky is not listed in the build dependencies, only in devDependencies. As a consequence, package installation is failing with the following error: 14.13 > @edx/frontend-app-ora-grading@0.0.1 prepare 14.13 > husky install 14.13 14.15 sh: 1: husky: not found Similar to: https://github.com/openedx/frontend-app-learning/pull/1622	2025-04-14 11:03:03 -03:00
vladislavkeblysh	e0841996d0	feat: added laber for header dropdown btn	2025-04-07 19:30:59 -07:00
renovate[bot]	90f2e2540e	chore(deps): update dependency @openedx/paragon to v23.4.3 (#583 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-03-31 06:00:52 +00:00
renovate[bot]	6a02c517b9	chore(deps): update dependency @openedx/paragon to v23.4.2 (#582 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-03-24 06:00:25 +00:00
renovate[bot]	5076d55314	chore(deps): update dependency @edx/frontend-platform to v8.3.3 (#581 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-03-24 06:00:17 +00:00
Brian Smith	2f3b9b87ca	feat: add react 18 support (#580 )	2025-03-21 13:40:42 -04:00
Peter Kulko	7970561181	feat: added support Paragon design tokens (#351 ) Co-authored-by: Diana Catalina Olarte <diana.olarte@edunext.co>	2025-03-18 12:41:04 -04:00
Brian Smith	8d46de8fe3	feat!: remove Paragon 21 support (#578 ) BREAKING CHANGE: consumers must now use Paragon 22	2025-03-17 16:00:03 -04:00
renovate[bot]	8341f17d46	chore(deps): update dependency @openedx/paragon to v22.16.0 (#577 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-03-17 05:55:14 +00:00
renovate[bot]	d7c3e5a687	chore(deps): update dependency @edx/frontend-platform to v8.3.1 (#576 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-03-10 05:59:56 +00:00
renovate[bot]	07b1c5bde1	chore(deps): update dependency @openedx/paragon to v22.15.3 (#572 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-03-03 05:29:00 +00:00
renovate[bot]	5512faa9b0	chore(deps): update dependency @edx/frontend-platform to v8.2.1 (#570 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-02-24 05:38:39 +00:00
Kyle McCormick	48c49fe0b2	revert: fix: Remove Studio Maintenance link (#565 ) This reverts commit `a229c34535`. We are temporarily re-introducing the Maintenance link, as the Maintenance Announcements tool is still in use, as discussed on: https://github.com/openedx/edx-platform/pull/35852 For more details, see the related edx-platform revert: https://github.com/openedx/edx-platform/pull/36107 In the future, this will be re-removed: https://github.com/openedx/edx-platform/issues/36263	2025-02-19 14:25:06 -05:00
renovate[bot]	8c7778218b	chore(deps): update dependency @edx/browserslist-config to v1.5.0 (#569 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-02-17 06:14:04 +00:00
Feanil Patel	0dedbbd589	docs: Document the owner and drop the old metadata file. This is going to be changing soon with the module federation work so I think it makes sense to be maintained by the committers-frontend group. I'm also cleaning up the old openedx.yaml file which is obsolete and out of date while I'm adding the new metadata that should be up-to-date.	2025-02-14 16:55:15 -03:00
renovate[bot]	ef0b101fea	chore(deps): update dependency @edx/frontend-platform to v8.1.5 (#566 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-01-20 08:48:36 +00:00
renovate[bot]	edb22316b8	chore(deps): update dependency @openedx/paragon to v22.13.0 (#564 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-12-30 06:16:38 +00:00
renovate[bot]	227a97afa1	chore(deps): update dependency @edx/browserslist-config to v1.4.0 (#563 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-12-30 05:11:57 +00:00
renovate[bot]	d01486e5f7	chore(deps): update dependency react-router-dom to v6.28.1 (#562 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-12-23 06:17:00 +00:00
renovate[bot]	a58f1eaf19	chore(deps): update dependency @edx/frontend-platform to v8.1.3 (#561 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-12-16 06:24:09 +00:00
Brian Smith	a5024c3fde	fix: move `overflow: hidden` to address `mixed-decls` warning (#549 ) https://sass-lang.com/documentation/breaking-changes/mixed-decls/	2024-12-09 12:20:38 -05:00
renovate[bot]	d7be18e717	chore(deps): update dependency @openedx/frontend-build to v14.2.2 (#559 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-12-09 06:44:08 +00:00