feat: update dependencies and replace SCSS variables with CSS

.eslintrc.js

@@ -1,4 +1,4 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('eslint');

.github/workflows/ci.yml

@@ -32,5 +32,3 @@ jobs:
       run: npm run build
     - name: i18n_extract
       run: npm run i18n_extract
-    - name: Coverage
-      uses: codecov/codecov-action@v3

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@edx/frontend-component-header",
-  "version": "1.0.0-semantically-released",
+  "name": "@raccoongang/frontend-component-header",
+  "version": "5.0.2-tokens.4",
   "description": "The standard header for Open edX",
   "main": "dist/index.js",
   "publishConfig": {
@@ -12,7 +12,8 @@
     "lint": "fedx-scripts eslint --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",
+    "replace-variables": "paragon replace-variables -p src -t usage"
   },
   "files": [
     "/dist"
@@ -24,21 +25,21 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/openedx/frontend-component-header.git"
+    "url": "git+https://github.com/raccoongang/frontend-component-header.git"
   },
   "author": "edX",
   "license": "AGPL-3.0",
   "bugs": {
-    "url": "https://github.com/openedx/frontend-component-header/issues"
+    "url": "https://github.com/raccoongang/frontend-component-header/issues"
   },
-  "homepage": "https://github.com/openedx/frontend-component-header#readme",
+  "homepage": "https://github.com/raccoongang/frontend-component-header#readme",
   "devDependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-platform": "6.2.0",
+    "@edx/frontend-platform": "npm:@raccoongang/[email protected]",
     "@edx/reactifex": "^2.1.1",
-    "@openedx/frontend-build": "13.0.27",
-    "@openedx/paragon": "22.0.0",
+    "@openedx/frontend-build": "npm:@raccoongang/frontend-build@13.1.4-tokens.2",
+    "@openedx/paragon": "^23.0.0",
     "@testing-library/dom": "9.3.4",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "10.4.9",
@@ -66,10 +67,10 @@
     "react-transition-group": "4.4.5"
   },
   "peerDependencies": {
-    "@edx/frontend-platform": "^7.0.0",
+    "@edx/frontend-platform": "^7.0.0 || ^7.1.2-tokens.1",
     "prop-types": "^15.5.10",
     "react": "^16.9.0 || ^17.0.0",
     "react-dom": "^16.9.0 || ^17.0.0",
-    "@openedx/paragon": ">= 21.5.7 < 23.0.0"
+    "@openedx/paragon": ">= 21.5.7 < 24.0.0 || ^23.0.0-alpha.1"
   }
 }

src/index.scss

@@ -71,7 +71,7 @@ $white: #fff;
 
 .site-header-desktop {
   box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
-  background: $white;
+  background: var(--pgn-color-white);
   .nav-link {
     text-decoration: none;
   }
@@ -99,13 +99,13 @@ $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);
+      color: var(--pgn-color-active);
     }
     .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);
@@ -116,6 +116,6 @@ $white: #fff;
     }
   }
   .search-input {
-    border-radius: $rounded-pill;
+    border-radius: var(--pgn-size-rounded-pill);
   }
 }

src/learning-header/LearningHeader.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  authenticatedUser, initializeMockApp, render, screen,
+  authenticatedUser, initializeMockApp, render, screen, waitFor,
 } from '../setupTest';
 import { LearningHeader as Header } from '../index';
 
@@ -11,8 +11,10 @@ describe('Header', () => {
   });
 
   it('displays user button', () => {
-    render(<Header />);
-    expect(screen.getByText(authenticatedUser.username)).toBeInTheDocument();
+    render(<Header showUserDropdown />);
+    waitFor(() => {
+      expect(screen.getByText(authenticatedUser.username)).toBeInTheDocument();
+    });
   });
 
   it('displays course data', () => {
@@ -23,7 +25,9 @@ describe('Header', () => {
     };
     render(<Header {...courseData} />);
 
-    expect(screen.getByText(`${courseData.courseOrg} ${courseData.courseNumber}`)).toBeInTheDocument();
-    expect(screen.getByText(courseData.courseTitle)).toBeInTheDocument();
+    waitFor(() => {
+      expect(screen.getByText(`${courseData.courseOrg} ${courseData.courseNumber}`)).toBeInTheDocument();
+      expect(screen.getByText(courseData.courseTitle)).toBeInTheDocument();
+    });
   });
 });

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);
 
   .btn-outline-primary {
-    border-color: $white;
+    border-color: var(--pgn-color-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) 0;
+    margin-right: var(--pgn-spacing-spacer-base);
 
     img {
       display: block;
@@ -31,7 +31,7 @@ $white: #FFFFFF;
   .course-title-lockup {
     @media only screen and (min-width: 769px) {
       padding: .5rem;
-      padding-right: $spacer;
+      padding-right: var(--pgn-spacing-spacer-base);
       border-right: 1px solid #E5E5E5;
       width: 70%;
     }