fix: studio dropdown hover styles (#433 )

chore(deps): update actions/setup-node action to v4 (#429 )
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2023-11-16 11:18:00 -05:00 · 2023-11-16 11:46:31 +05:00 · 2023-11-15 17:21:06 +05:00
14 changed files with 300 additions and 270 deletions
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -17,7 +17,7 @@ jobs:
    - name: Setup Nodejs Env
      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
    - name: Setup Nodejs
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
      with:
        node-version: ${{ env.NODE_VER }}
    - name: Install dependencies
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -15,7 +15,7 @@ jobs:
    - name: Setup Nodejs Env
      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
    - name: Setup Node.js
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
      with:
        node-version: ${{ env.NODE_VER }}
    - name: Install dependencies
--- a/example/index.js
+++ b/example/index.js
@@ -7,6 +7,7 @@ import { AppContext, AppProvider } from '@edx/frontend-platform/react';
 import Header from '@edx/frontend-component-header';

 import './index.scss';
+import StudioHeader from '../src/studio-header/StudioHeader';

 subscribe(APP_READY, () => {
  ReactDOM.render(
@@ -32,7 +33,35 @@ subscribe(APP_READY, () => {
      }}>
        <Header />
      </AppContext.Provider>
-      <h5 className="mt-2">Logged in state</h5>
+      <h5 className="mt-2  mb-5">Logged in state</h5>
+      <AppContext.Provider value={{
+        authenticatedUser: {
+          userId: '123abc',
+          username: 'testuser',
+          roles: [],
+          administrator: false,
+        },
+        config: getConfig(),
+      }}>
+        <StudioHeader
+          number="run123"
+          org="testX"
+          title="Course Name"
+          isHiddenMainMenu={false}
+          mainMenuDropdowns={[
+            {
+              id: 'content-dropdown',
+              buttonTitle: 'Content',
+              items: [{
+                href: '#',
+                title: 'Outline',
+              }],
+            },
+          ]}
+          outlineLink="#"
+        />
+      </AppContext.Provider>
+      <h5 className="mt-2">Logged in state for Studio header</h5>
    </AppProvider>,
    document.getElementById('root'),
  );
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,7 +24,7 @@
        "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
        "@edx/browserslist-config": "^1.1.1",
        "@edx/frontend-build": "13.0.5",
-        "@edx/frontend-platform": "6.0.2",
+        "@edx/frontend-platform": "6.1.0",
        "@edx/reactifex": "^2.1.1",
        "@testing-library/dom": "9.3.3",
        "@testing-library/jest-dom": "5.17.0",
@@ -3371,9 +3371,9 @@
      }
    },
    "node_modules/@edx/frontend-platform": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-6.0.2.tgz",
-      "integrity": "sha512-aO8NvwVxD1CpUY12YtfTdO6zZQddE0gB5OeBRepNIKH0+Fh7L+sQSm7Vlm7P4yK1o98UvmYHby3bAZeeng18jQ==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-6.1.0.tgz",
+      "integrity": "sha512-O9pejnYPbmijVTsJhXEj6wq4pqA5V5njNeiYh4O5RkRDPYPzC/jxulHNGEj0oH6Kvf41IlonlSjrynJIwX/cwQ==",
      "dev": true,
      "dependencies": {
        "@cospired/i18n-iso-languages": "4.1.0",
@@ -3393,7 +3393,7 @@
        "lodash.merge": "4.6.2",
        "lodash.snakecase": "4.1.1",
        "pubsub-js": "1.9.4",
-        "react-intl": "^5.25.0",
+        "react-intl": "6.4.7",
        "universal-cookie": "4.0.4"
      },
      "bin": {
@@ -3735,53 +3735,88 @@
      "version": "1.11.4",
      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
      "integrity": "sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==",
+      "dev": true,
      "dependencies": {
        "@formatjs/intl-localematcher": "0.2.25",
        "tslib": "^2.1.0"
      }
    },
    "node_modules/@formatjs/fast-memoize": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.1.tgz",
-      "integrity": "sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.0.tgz",
+      "integrity": "sha512-hnk/nY8FyrL5YxwP9e4r9dqeM6cAbo8PeU9UjyXojZMNvVad2Z06FAVHyR3Ecw6fza+0GH7vdJgiKIVXTMbSBA==",
      "dependencies": {
-        "tslib": "^2.1.0"
+        "tslib": "^2.4.0"
      }
    },
    "node_modules/@formatjs/icu-messageformat-parser": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.1.0.tgz",
-      "integrity": "sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==",
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.6.2.tgz",
+      "integrity": "sha512-nF/Iww7sc5h+1MBCDRm68qpHTCG4xvGzYs/x9HFcDETSGScaJ1Fcadk5U/NXjXeCtzD+DhN4BAwKFVclHfKMdA==",
      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/icu-skeleton-parser": "1.3.6",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.17.2",
+        "@formatjs/icu-skeleton-parser": "1.6.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/icu-messageformat-parser/node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.17.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.2.tgz",
+      "integrity": "sha512-k2mTh0m+IV1HRdU0xXM617tSQTi53tVR2muvYOsBeYcUgEAyxV1FOC7Qj279th3fBVQ+Dj6muvNJZcHSPNdbKg==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.4.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/icu-messageformat-parser/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.4.2.tgz",
+      "integrity": "sha512-BGdtJFmaNJy5An/Zan4OId/yR9Ih1OojFjcduX/xOvq798OgWSyDtd6Qd5jqJXwJs1ipe4Fxu9+cshic5Ox2tA==",
+      "dependencies": {
+        "tslib": "^2.4.0"
      }
    },
    "node_modules/@formatjs/icu-skeleton-parser": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.6.tgz",
-      "integrity": "sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==",
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.6.2.tgz",
+      "integrity": "sha512-VtB9Slo4ZL6QgtDFJ8Injvscf0xiDd4bIV93SOJTBjUF4xe2nAWOoSjLEtqIG+hlIs1sNrVKAaFo3nuTI4r5ZA==",
      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.17.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/icu-skeleton-parser/node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.17.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.2.tgz",
+      "integrity": "sha512-k2mTh0m+IV1HRdU0xXM617tSQTi53tVR2muvYOsBeYcUgEAyxV1FOC7Qj279th3fBVQ+Dj6muvNJZcHSPNdbKg==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.4.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/icu-skeleton-parser/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.4.2.tgz",
+      "integrity": "sha512-BGdtJFmaNJy5An/Zan4OId/yR9Ih1OojFjcduX/xOvq798OgWSyDtd6Qd5jqJXwJs1ipe4Fxu9+cshic5Ox2tA==",
+      "dependencies": {
+        "tslib": "^2.4.0"
      }
    },
    "node_modules/@formatjs/intl": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.2.1.tgz",
-      "integrity": "sha512-vgvyUOOrzqVaOFYzTf2d3+ToSkH2JpR7x/4U1RyoHQLmvEaTQvXJ7A2qm1Iy3brGNXC/+/7bUlc3lpH+h/LOJA==",
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-2.9.3.tgz",
+      "integrity": "sha512-hclPdyCF1zk2XmhgdXfl5Sd30QEdRBnIijH7Vc1AWz2K0/saVRrxuL3UYn+m3xEyfOa4yDbTWVbmXDL0XEzlsQ==",
      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/fast-memoize": "1.2.1",
-        "@formatjs/icu-messageformat-parser": "2.1.0",
-        "@formatjs/intl-displaynames": "5.4.3",
-        "@formatjs/intl-listformat": "6.5.3",
-        "intl-messageformat": "9.13.0",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.17.2",
+        "@formatjs/fast-memoize": "2.2.0",
+        "@formatjs/icu-messageformat-parser": "2.6.2",
+        "@formatjs/intl-displaynames": "6.5.2",
+        "@formatjs/intl-listformat": "7.4.2",
+        "intl-messageformat": "10.5.3",
+        "tslib": "^2.4.0"
      },
      "peerDependencies": {
-        "typescript": "^4.5"
+        "typescript": "^4.7 || 5"
      },
      "peerDependenciesMeta": {
        "typescript": {
@@ -3790,29 +3825,64 @@
      }
    },
    "node_modules/@formatjs/intl-displaynames": {
-      "version": "5.4.3",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-5.4.3.tgz",
-      "integrity": "sha512-4r12A3mS5dp5hnSaQCWBuBNfi9Amgx2dzhU4lTFfhSxgb5DOAiAbMpg6+7gpWZgl4ahsj3l2r/iHIjdmdXOE2Q==",
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-6.5.2.tgz",
+      "integrity": "sha512-uC2VBlz+WydGTDDpJwMTQuPH3CUpTricr91WH1QMfz5oEHg2sB7mUERcZONE/lu8MOe1jREIx4vBciZEVTqkmA==",
      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/intl-localematcher": "0.2.25",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.17.2",
+        "@formatjs/intl-localematcher": "0.4.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/intl-displaynames/node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.17.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.2.tgz",
+      "integrity": "sha512-k2mTh0m+IV1HRdU0xXM617tSQTi53tVR2muvYOsBeYcUgEAyxV1FOC7Qj279th3fBVQ+Dj6muvNJZcHSPNdbKg==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.4.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/intl-displaynames/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.4.2.tgz",
+      "integrity": "sha512-BGdtJFmaNJy5An/Zan4OId/yR9Ih1OojFjcduX/xOvq798OgWSyDtd6Qd5jqJXwJs1ipe4Fxu9+cshic5Ox2tA==",
+      "dependencies": {
+        "tslib": "^2.4.0"
      }
    },
    "node_modules/@formatjs/intl-listformat": {
-      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-6.5.3.tgz",
-      "integrity": "sha512-ozpz515F/+3CU+HnLi5DYPsLa6JoCfBggBSSg/8nOB5LYSFW9+ZgNQJxJ8tdhKYeODT+4qVHX27EeJLoxLGLNg==",
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-7.4.2.tgz",
+      "integrity": "sha512-+6bSVudEQkf12Hh7kuKt8Xv/MyFlqdwA4V4NLnTZW8uYdF9RxlOELDD0rPaOc2++TMKIzI5o6XXwHPvpL6VrPA==",
      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/intl-localematcher": "0.2.25",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.17.2",
+        "@formatjs/intl-localematcher": "0.4.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/intl-listformat/node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.17.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.2.tgz",
+      "integrity": "sha512-k2mTh0m+IV1HRdU0xXM617tSQTi53tVR2muvYOsBeYcUgEAyxV1FOC7Qj279th3fBVQ+Dj6muvNJZcHSPNdbKg==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.4.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/intl-listformat/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.4.2.tgz",
+      "integrity": "sha512-BGdtJFmaNJy5An/Zan4OId/yR9Ih1OojFjcduX/xOvq798OgWSyDtd6Qd5jqJXwJs1ipe4Fxu9+cshic5Ox2tA==",
+      "dependencies": {
+        "tslib": "^2.4.0"
      }
    },
    "node_modules/@formatjs/intl-localematcher": {
      "version": "0.2.25",
      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.25.tgz",
      "integrity": "sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==",
+      "dev": true,
      "dependencies": {
        "tslib": "^2.1.0"
      }
@@ -3839,6 +3909,23 @@
        "tslib": "^2.1.0"
      }
    },
+    "node_modules/@formatjs/intl/node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.17.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.2.tgz",
+      "integrity": "sha512-k2mTh0m+IV1HRdU0xXM617tSQTi53tVR2muvYOsBeYcUgEAyxV1FOC7Qj279th3fBVQ+Dj6muvNJZcHSPNdbKg==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.4.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@formatjs/intl/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.4.2.tgz",
+      "integrity": "sha512-BGdtJFmaNJy5An/Zan4OId/yR9Ih1OojFjcduX/xOvq798OgWSyDtd6Qd5jqJXwJs1ipe4Fxu9+cshic5Ox2tA==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
    "node_modules/@fortawesome/fontawesome-common-types": {
      "version": "6.4.2",
      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
@@ -7781,16 +7868,6 @@
        "tslib": "^2.4.0"
      }
    },
-    "node_modules/babel-plugin-formatjs/node_modules/@formatjs/icu-skeleton-parser": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.6.2.tgz",
-      "integrity": "sha512-VtB9Slo4ZL6QgtDFJ8Injvscf0xiDd4bIV93SOJTBjUF4xe2nAWOoSjLEtqIG+hlIs1sNrVKAaFo3nuTI4r5ZA==",
-      "dev": true,
-      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.17.2",
-        "tslib": "^2.4.0"
-      }
-    },
    "node_modules/babel-plugin-formatjs/node_modules/@formatjs/intl-localematcher": {
      "version": "0.4.2",
      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.4.2.tgz",
@@ -13324,14 +13401,31 @@
      }
    },
    "node_modules/intl-messageformat": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.13.0.tgz",
-      "integrity": "sha512-7sGC7QnSQGa5LZP7bXLDhVDtQOeKGeBFGHF2Y8LVBwYZoQZCgWeKoPGTa5GMG8g/TzDgeXuYJQis7Ggiw2xTOw==",
+      "version": "10.5.3",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.5.3.tgz",
+      "integrity": "sha512-TzKn1uhJBMyuKTO4zUX47SU+d66fu1W9tVzIiZrQ6hBqQQeYscBMIzKL/qEXnFbJrH9uU5VV3+T5fWib4SIcKA==",
      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/fast-memoize": "1.2.1",
-        "@formatjs/icu-messageformat-parser": "2.1.0",
-        "tslib": "^2.1.0"
+        "@formatjs/ecma402-abstract": "1.17.2",
+        "@formatjs/fast-memoize": "2.2.0",
+        "@formatjs/icu-messageformat-parser": "2.6.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/intl-messageformat/node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.17.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.2.tgz",
+      "integrity": "sha512-k2mTh0m+IV1HRdU0xXM617tSQTi53tVR2muvYOsBeYcUgEAyxV1FOC7Qj279th3fBVQ+Dj6muvNJZcHSPNdbKg==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.4.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/intl-messageformat/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.4.2.tgz",
+      "integrity": "sha512-BGdtJFmaNJy5An/Zan4OId/yR9Ih1OojFjcduX/xOvq798OgWSyDtd6Qd5jqJXwJs1ipe4Fxu9+cshic5Ox2tA==",
+      "dependencies": {
+        "tslib": "^2.4.0"
      }
    },
    "node_modules/invariant": {
@@ -21167,24 +21261,24 @@
      }
    },
    "node_modules/react-intl": {
-      "version": "5.25.1",
-      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-5.25.1.tgz",
-      "integrity": "sha512-pkjdQDvpJROoXLMltkP/5mZb0/XqrqLoPGKUCfbdkP8m6U9xbK40K51Wu+a4aQqTEvEK5lHBk0fWzUV72SJ3Hg==",
+      "version": "6.4.7",
+      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-6.4.7.tgz",
+      "integrity": "sha512-0hnOHAZhxTFqD1hGTxrF40qNyZJPPYiGhWIIxIz0Udz+3e3c7sdN80qlxArR+AbJ+jb5ALXZkJYH20+GPFCM0Q==",
      "dependencies": {
-        "@formatjs/ecma402-abstract": "1.11.4",
-        "@formatjs/icu-messageformat-parser": "2.1.0",
-        "@formatjs/intl": "2.2.1",
-        "@formatjs/intl-displaynames": "5.4.3",
-        "@formatjs/intl-listformat": "6.5.3",
+        "@formatjs/ecma402-abstract": "1.17.2",
+        "@formatjs/icu-messageformat-parser": "2.6.2",
+        "@formatjs/intl": "2.9.3",
+        "@formatjs/intl-displaynames": "6.5.2",
+        "@formatjs/intl-listformat": "7.4.2",
        "@types/hoist-non-react-statics": "^3.3.1",
        "@types/react": "16 || 17 || 18",
        "hoist-non-react-statics": "^3.3.2",
-        "intl-messageformat": "9.13.0",
-        "tslib": "^2.1.0"
+        "intl-messageformat": "10.5.3",
+        "tslib": "^2.4.0"
      },
      "peerDependencies": {
-        "react": "^16.3.0 || 17 || 18",
-        "typescript": "^4.5"
+        "react": "^16.6.0 || 17 || 18",
+        "typescript": "^4.7 || 5"
      },
      "peerDependenciesMeta": {
        "typescript": {
@@ -21192,6 +21286,23 @@
        }
      }
    },
+    "node_modules/react-intl/node_modules/@formatjs/ecma402-abstract": {
+      "version": "1.17.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.17.2.tgz",
+      "integrity": "sha512-k2mTh0m+IV1HRdU0xXM617tSQTi53tVR2muvYOsBeYcUgEAyxV1FOC7Qj279th3fBVQ+Dj6muvNJZcHSPNdbKg==",
+      "dependencies": {
+        "@formatjs/intl-localematcher": "0.4.2",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/react-intl/node_modules/@formatjs/intl-localematcher": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.4.2.tgz",
+      "integrity": "sha512-BGdtJFmaNJy5An/Zan4OId/yR9Ih1OojFjcduX/xOvq798OgWSyDtd6Qd5jqJXwJs1ipe4Fxu9+cshic5Ox2tA==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
    "node_modules/react-is": {
      "version": "17.0.2",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
    "@edx/browserslist-config": "^1.1.1",
    "@edx/frontend-build": "13.0.5",
-    "@edx/frontend-platform": "6.0.2",
+    "@edx/frontend-platform": "6.1.0",
    "@edx/reactifex": "^2.1.1",
    "@testing-library/dom": "9.3.3",
    "@testing-library/jest-dom": "5.17.0",
--- a/src/index.scss
+++ b/src/index.scss
@@ -3,7 +3,7 @@ $blue: #007db8;
 $white: #fff;

@import './Menu/menu.scss';
-@import './studio-header/header.scss';
+@import './studio-header/StudioHeader.scss';

 .dropdown-item a {
  text-decoration: none;
@@ -43,9 +43,9 @@ $white: #fff;
  .user-dropdown {
    .btn {
      height: 3rem;
-      @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
-        padding: 0 0.5rem;
-      }
+      // @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+      //   padding: 0 0.5rem;
+      // }
    }
  }
 }
--- a/src/studio-header/CourseLockUp.jsx
+++ b/src/studio-header/CourseLockUp.jsx
@@ -24,7 +24,7 @@ const CourseLockUp = ({
    )}
  >
    <a
-      className="course-title-lockup w-25 mr-2"
+      className="course-title-lockup mr-2"
      href={outlineLink}
      aria-label={intl.formatMessage(messages['header.label.courseOutline'])}
      data-testid="course-lock-up-block"
--- a/src/studio-header/HeaderBody.jsx
+++ b/src/studio-header/HeaderBody.jsx
@@ -44,7 +44,7 @@ const HeaderBody = ({
  );

  return (
-    <Container size="xl" className="px-4">
+    <Container size="xl" className="px-2.5">
      <ActionRow as="header">
        {isHiddenMainMenu ? (
          <Row className="flex-nowrap ml-4">
@@ -64,17 +64,19 @@ const HeaderBody = ({
                Menu
              </Button>
            ) : (
-              <Row className="flex-nowrap m-0">
-                {renderBrandNav}
-                <CourseLockUp
-                  {...{
-                    outlineLink,
-                    number,
-                    org,
-                    title,
-                  }}
-                />
-              </Row>
+              <div className="w-25">
+                <Row className="m-0 flex-nowrap">
+                  {renderBrandNav}
+                  <CourseLockUp
+                    {...{
+                      outlineLink,
+                      number,
+                      org,
+                      title,
+                    }}
+                  />
+                </Row>
+              </div>
            )}
            {isMobile ? (
              <>
@@ -82,11 +84,11 @@ const HeaderBody = ({
                {renderBrandNav}
              </>
            ) : (
-              <Nav data-testid="desktop-menu" className="ml-4">
+              <Nav data-testid="desktop-menu" className="ml-2">
                {mainMenuDropdowns.map(dropdown => {
                  const { id, buttonTitle, items } = dropdown;
                  return (
-                    <NavDropdownMenu {...{ id, buttonTitle, items }} />
+                    <NavDropdownMenu key={id} {...{ id, buttonTitle, items }} />
                  );
                })}
              </Nav>
@@ -113,9 +115,9 @@ const HeaderBody = ({
 HeaderBody.propTypes = {
  studioBaseUrl: PropTypes.string.isRequired,
  logoutUrl: PropTypes.string.isRequired,
-  setModalPopupTarget: PropTypes.func.isRequired,
-  toggleModalPopup: PropTypes.func.isRequired,
-  isModalPopupOpen: PropTypes.bool.isRequired,
+  setModalPopupTarget: PropTypes.func,
+  toggleModalPopup: PropTypes.func,
+  isModalPopupOpen: PropTypes.bool,
  number: PropTypes.string,
  org: PropTypes.string,
  title: PropTypes.string,
@@ -138,6 +140,9 @@ HeaderBody.propTypes = {
 };

 HeaderBody.defaultProps = {
+  setModalPopupTarget: null,
+  toggleModalPopup: null,
+  isModalPopupOpen: false,
  logo: null,
  logoAltText: null,
  number: '',
--- a/src/studio-header/MobileHeader.jsx
+++ b/src/studio-header/MobileHeader.jsx
@@ -38,9 +38,6 @@ const MobileHeader = ({
 MobileHeader.propTypes = {
  studioBaseUrl: PropTypes.string.isRequired,
  logoutUrl: PropTypes.string.isRequired,
-  setModalPopupTarget: PropTypes.func.isRequired,
-  toggleModalPopup: PropTypes.func.isRequired,
-  isModalPopupOpen: PropTypes.bool.isRequired,
  number: PropTypes.string,
  org: PropTypes.string,
  title: PropTypes.string,
--- a/src/studio-header/NavDropdownMenu.jsx
+++ b/src/studio-header/NavDropdownMenu.jsx
@@ -13,10 +13,12 @@ const NavDropdownMenu = ({
  <DropdownButton
    id={id}
    title={buttonTitle}
-    variant="tertiary"
+    variant="outline-primary"
+    className="mr-2"
  >
    {items.map(item => (
      <Dropdown.Item
+        key={`${item.title}-dropdown-item`}
        href={item.href}
        className="small"
      >
--- a/src/studio-header/StudioHeader.jsx
+++ b/src/studio-header/StudioHeader.jsx
@@ -36,14 +36,15 @@ const StudioHeader = ({
  };

  return (
-    <>
-      <Responsive maxWidth={768}>
+    <div className="studio-header">
+      <a className="nav-skip sr-only sr-only-focusable" href="#main">Skip to content</a>
+      <Responsive maxWidth={841}>
        <MobileHeader {...props} />
      </Responsive>
-      <Responsive minWidth={769}>
+      <Responsive minWidth={842}>
        <HeaderBody {...props} />
      </Responsive>
-    </>
+    </div>
  );
 };

--- a/src/studio-header/StudioHeader.scss
+++ b/src/studio-header/StudioHeader.scss
@@ -0,0 +1,49 @@
+$spacer: 1rem;
+$white: #FFFFFF;
+
+.studio-header {
+  position: relative;
+  z-index: 1000;
+
+  height: 3.75rem;
+  box-shadow: 0 1px 0 0 rgb(0 0 0 / .1);
+  background: $white;
+
+  .btn-outline-primary {
+    border-color: $white;
+  }
+
+  .logo {
+    display: block;
+    box-sizing: content-box;
+    position: relative;
+    top: -.05em;
+    height: 1.75rem;
+    padding: $spacer 0;
+    margin-right: $spacer;
+
+    img {
+      display: block;
+      height: 100%;
+    }
+  }
+
+  .course-title-lockup {
+    @media only screen and (min-width: 769px) {
+      padding: .5rem;
+      padding-right: $spacer;
+      border-right: 1px solid #E5E5E5;
+      width: 70%;
+    }
+  
+    overflow: hidden;
+  
+    span {
+      color: #333333;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 1.375rem;
+    }
+  }
+}
--- a/src/studio-header/header.scss
+++ b/src/studio-header/header.scss
@@ -1,64 +0,0 @@
-// This SCSS was partly copied from edx/frontend-app-support-tools/src/support-header/index.scss.
-$spacer: 1rem;
-$white: #FFFFFF;
-
-.btn-tertiary:hover {
-  color: white;
-  background-color: #00262B;
-}
-
-.course-title-lockup {
-  @media only screen and (max-width: 768px) {
-    padding-left: .5rem;
-    max-width: 70%;
-  }
-
-  @media only screen and (min-width: 769px) {
-    padding: .5rem;
-    padding-right: $spacer;
-    border-right: 1px solid #E5E5E5;
-    min-width: 70%;
-  }
-
-  overflow: hidden;
-
-  span {
-    color: #333333;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    line-height: 1.375rem;
-  }
-}
-
-.site-header-mobile,
-.site-header-desktop {
-  position: relative;
-  z-index: 1000;
-}
-
-.site-header-mobile {img {
-    height: 1.5rem;
-  }
-}
-
-.site-header-desktop {
-  height: 3.75rem;
-  box-shadow: 0 1px 0 0 rgb(0 0 0 / .1);
-  background: $white;
-
-  .logo {
-    display: block;
-    box-sizing: content-box;
-    position: relative;
-    top: -.05em;
-    height: 1.75rem;
-    padding: $spacer 0;
-    margin-right: $spacer;
-
-    img {
-      display: block;
-      height: 100%;
-    }
-  }
-}
--- a/src/studio-header/messages.js
+++ b/src/studio-header/messages.js
@@ -1,106 +1,6 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';

 const messages = defineMessages({
-  'header.links.content': {
-    id: 'header.links.content',
-    defaultMessage: 'Content',
-    description: 'Label for Content menu trigger',
-  },
-  'header.links.settings': {
-    id: 'header.links.settings',
-    defaultMessage: 'Settings',
-    description: 'Label for Settings menu trigger',
-  },
-  'header.links.tools': {
-    id: 'header.links.content.tools',
-    defaultMessage: 'Tools',
-    description: 'Label for Tools menu trigger',
-  },
-  'header.links.outline': {
-    id: 'header.links.outline',
-    defaultMessage: 'Outline',
-    description: 'Link to Studio Outline page',
-  },
-  'header.links.updates': {
-    id: 'header.links.updates',
-    defaultMessage: 'Updates',
-    description: 'Link to Studio Updates page',
-  },
-  'header.links.pages': {
-    id: 'header.links.pages',
-    defaultMessage: 'Pages & Resources',
-    description: 'Link to Studio Pages page',
-  },
-  'header.links.filesAndUploads': {
-    id: 'header.links.filesAndUploads',
-    defaultMessage: 'Files & Uploads',
-    description: 'Link to Studio Files & Uploads page',
-  },
-  'header.links.textbooks': {
-    id: 'header.links.textbooks',
-    defaultMessage: 'Textbooks',
-    description: 'Link to Studio Textbooks page',
-  },
-  'header.links.videoUploads': {
-    id: 'header.links.videoUploads',
-    defaultMessage: 'Video Uploads',
-    description: 'Link to Studio Video Uploads page',
-  },
-  'header.links.scheduleAndDetails': {
-    id: 'header.links.scheduleAndDetails',
-    defaultMessage: 'Schedule & Details',
-    description: 'Link to Studio Schedule & Details page',
-  },
-  'header.links.grading': {
-    id: 'header.links.grading',
-    defaultMessage: 'Grading',
-    description: 'Link to Studio Grading page',
-  },
-  'header.links.courseTeam': {
-    id: 'header.links.courseTeam',
-    defaultMessage: 'Course Team',
-    description: 'Link to Studio Course Team page',
-  },
-  'header.links.groupConfigurations': {
-    id: 'header.links.groupConfigurations',
-    defaultMessage: 'Group Configurations',
-    description: 'Link to Studio Group Configurations page',
-  },
-  'header.links.proctoredExamSettings': {
-    id: 'header.links.proctoredExamSettings',
-    defaultMessage: 'Proctored Exam Settings',
-    description: 'Link to Studio Proctored Exam Settings page',
-  },
-  'header.links.advancedSettings': {
-    id: 'header.links.advancedSettings',
-    defaultMessage: 'Advanced Settings',
-    description: 'Link to Studio Advanced Settings page',
-  },
-  'header.links.certificates': {
-    id: 'header.links.certificates',
-    defaultMessage: 'Certificates',
-    description: 'Link to Studio Certificates page',
-  },
-  'header.links.publisher': {
-    id: 'header.links.publisher',
-    defaultMessage: 'Publisher',
-    description: 'Link to Publisher',
-  },
-  'header.links.import': {
-    id: 'header.links.import',
-    defaultMessage: 'Import',
-    description: 'Link to Studio Import page',
-  },
-  'header.links.export': {
-    id: 'header.links.export',
-    defaultMessage: 'Export',
-    description: 'Link to Studio Export page',
-  },
-  'header.links.checklists': {
-    id: 'header.links.checklists',
-    defaultMessage: 'Checklists',
-    description: 'Link to Studio Checklists page',
-  },
  'header.user.menu.studio': {
    id: 'header.user.menu.studio',
    defaultMessage: 'Studio Home',
Author	SHA1	Message	Date
Kristin Aoki	bace8286fd	fix: studio dropdown hover styles (#433 )	2023-11-16 11:18:00 -05:00
renovate[bot]	665653e9a5	chore(deps): update actions/setup-node action to v4 (#429 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2023-11-16 11:46:31 +05:00
Bilal Qamar	0cc2282c44	feat: bumped frontend-platform version (#432 )	2023-11-15 17:21:06 +05:00