feat: [RGInt-346] update dependencies and replace SCSS variables with…

… CSS
raccoongang · Jan 28, 2025 · 31f680f · 31f680f
1 parent d454f46
commit 31f680f
Show file tree

Hide file tree

Showing 8 changed files with 14,989 additions and 10,278 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -32,5 +32,5 @@ jobs:
       run: npm run build
     - name: i18n_extract
       run: npm run i18n_extract
-    - name: Coverage
-      uses: codecov/codecov-action@v3
+#    - name: Coverage
+#      uses: codecov/codecov-action@v3
diff --git a/jest.config.js b/jest.config.js
@@ -11,4 +11,8 @@ module.exports = createConfig('jest', {
     'src/setupTest.jsx',
     'src/i18n',
   ],
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    url: 'http://localhost/',
+  },
 });
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,7 +16,8 @@
     "lint:fix": "fedx-scripts eslint --ext .js --ext .jsx . --fix",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "fedx-scripts jest --coverage --passWithNoTests"
+    "test": "jest --coverage --passWithNoTests",
+    "replace-variables": "paragon replace-variables -p src -t usage"
   },
   "husky": {
     "hooks": {
@@ -34,11 +35,13 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-header": "^5.0.2",
-    "@edx/frontend-platform": "^7.1.0",
+    "@edx/frontend-component-footer": "npm:@raccoongang/frontend-component-footer@^13.2.0-tokens.4",
+    "@edx/frontend-component-header": "npm:@raccoongang/frontend-component-header@^5.0.2-tokens.4",
+    "@edx/frontend-platform": "npm:@raccoongang/frontend-platform@^7.1.2-tokens.2",
     "@edx/openedx-atlas": "^0.6.0",
+    "@openedx/frontend-plugin-framework": "npm:@raccoongang/frontend-plugin-framework@^1.1.2-tokens.2",
     "@openedx/frontend-slot-footer": "^1.0.2",
-    "@openedx/paragon": "^22.1.1",
+    "@openedx/paragon": "23.0.0",
     "@reduxjs/toolkit": "1.9.7",
     "@tinymce/tinymce-react": "3.13.1",
     "babel-polyfill": "6.26.0",
@@ -64,7 +67,7 @@
   "devDependencies": {
     "@edx/browserslist-config": "1.2.0",
     "@edx/reactifex": "1.1.0",
-    "@openedx/frontend-build": "^13.0.28",
+    "@openedx/frontend-build": "npm:@raccoongang/frontend-build@^13.1.4-tokens.2",
     "@testing-library/jest-dom": "5.17.0",
     "@testing-library/react": "12.1.5",
     "@testing-library/user-event": "13.5.0",
@@ -74,7 +77,7 @@
     "eslint-plugin-simple-import-sort": "7.0.0",
     "glob": "7.2.0",
     "husky": "7.0.4",
-    "jest": "27.5.1",
+    "jest": "^29.7.0",
     "rosie": "2.1.1"
   }
 }
diff --git a/src/components/NavigationBar/navBar.scss b/src/components/NavigationBar/navBar.scss
@@ -1,24 +1,16 @@
-@import "~@edx/brand/paragon/fonts.scss";
-@import "~@edx/brand/paragon/variables.scss";
-@import "~@openedx/paragon/scss/core/core.scss";
-@import "~@edx/brand/paragon/overrides.scss";
-
-$fa-font-path: "~font-awesome/fonts";
-@import "~font-awesome/scss/font-awesome";
-
 .course-tabs-navigation {
   border-bottom: solid 1px #eaeaea;
 
   .nav a,
   .nav button {
     &:hover {
-      background-color: $light-400;
+      background-color: var(--pgn-color-light-400);
     }
   }
 
   .nav a {
     &:not(.active):hover {
-      background-color: $light-400;
+      background-color: var(--pgn-color-light-400);
       border-bottom: none;
     }
   }
@@ -30,7 +22,7 @@ $fa-font-path: "~font-awesome/fonts";
   .nav-link {
     border-bottom: 4px solid transparent;
     border-top: 4px solid transparent;
-    color: $gray-700;
+    color: var(--pgn-color-gray-700);
 
     // temporary until we can remove .btn class from dropdowns
     border-left: 0;
@@ -40,9 +32,9 @@ $fa-font-path: "~font-awesome/fonts";
     &:hover,
     &:focus,
     &.active {
-      font-weight: $font-weight-normal;
-      color: $primary-500;
-      border-bottom-color: $primary-500;
+      font-weight: var(--pgn-typography-font-weight-normal);
+      color: var(--pgn-color-primary-500);
+      border-bottom-color: var(--pgn-color-primary-500);
     }
   }
 }
diff --git a/src/discussions/common/HoverCard.test.jsx b/src/discussions/common/HoverCard.test.jsx
@@ -107,7 +107,7 @@ describe('HoverCard', () => {
 
   test('it should have hover card on post', async () => {
     await waitFor(() => renderComponent(discussionPostId));
-    const post = screen.getByTestId('post-thread-1');
+    const post = await screen.findByTestId('post-thread-1');
     expect(within(post).getByTestId('hover-card-thread-1')).toBeInTheDocument();
   });
 

diff --git a/src/discussions/in-context-topics/TopicsView.test.jsx b/src/discussions/in-context-topics/TopicsView.test.jsx
@@ -148,14 +148,18 @@ describe('InContext Topics View', () => {
   it('A section group should have only a title and required subsections.', async () => {
     await setupMockResponse();
     renderComponent();
-    const sectionGroups = await screen.getAllByTestId('section-group');
+
+    const componentWrapper = await screen.findByTestId('redux-provider');
+    expect(componentWrapper).toBeInTheDocument();
+
+    const sectionGroups = await screen.findAllByTestId('section-group');
 
     coursewareTopics.forEach(async (topic, index) => {
       await waitFor(async () => {
         const stats = await sectionGroups[index].querySelectorAll('.icon-size:not([data-testid="subsection-group"].icon-size)');
         const subsectionGroups = await within(sectionGroups[index]).getAllByTestId('subsection-group');
 
-        expect(within(sectionGroups[index]).queryByText(topic.displayName)).toBeInTheDocument();
+        await expect(within(sectionGroups[index]).findByText(topic.displayName)).toBeInTheDocument();
         expect(stats).toHaveLength(0);
         expect(subsectionGroups).toHaveLength(2);
       });
@@ -165,6 +169,10 @@ describe('InContext Topics View', () => {
   it('The subsection should have a title name, be clickable, and have the stats', async () => {
     await setupMockResponse();
     renderComponent();
+
+    const componentWrapper = await screen.findByTestId('redux-provider');
+    expect(componentWrapper).toBeInTheDocument();
+
     const subsectionObject = coursewareTopics[0].children[0];
     const subSection = await container.querySelector(`[data-subsection-id=${subsectionObject.id}]`);
     const subSectionTitle = await within(subSection).queryByText(subsectionObject.displayName);
@@ -178,6 +186,9 @@ describe('InContext Topics View', () => {
     await setupMockResponse();
     renderComponent();
 
+    const componentWrapper = await screen.findByTestId('redux-provider');
+    expect(componentWrapper).toBeInTheDocument();
+
     const subsectionObject = coursewareTopics[0].children[0];
     const subSection = await container.querySelector(`[data-subsection-id=${subsectionObject.id}]`);
 
@@ -198,6 +209,10 @@ describe('InContext Topics View', () => {
   it('The number of units should be matched with the actual unit length.', async () => {
     await setupMockResponse();
     renderComponent();
+
+    const componentWrapper = await screen.findByTestId('redux-provider');
+    expect(componentWrapper).toBeInTheDocument();
+
     const subSection = await container.querySelector(`[data-subsection-id=${coursewareTopics[0].children[0].id}]`);
 
     await act(async () => { fireEvent.click(subSection); });
@@ -214,6 +229,9 @@ describe('InContext Topics View', () => {
     const subSectionObject = coursewareTopics[0].children[0];
     const unitObject = subSectionObject.children[0];
 
+    const componentWrapper = await screen.findByTestId('redux-provider');
+    expect(componentWrapper).toBeInTheDocument();
+
     const subSection = await container.querySelector(`[data-subsection-id=${subSectionObject.id}]`);
 
     await act(async () => { fireEvent.click(subSection); });

diff --git a/src/index.scss b/src/index.scss
@@ -1,14 +1,10 @@
 @import "~@edx/brand/paragon/fonts.scss";
 @import "~@edx/brand/paragon/variables.scss";
-@import "~@openedx/paragon/scss/core/core.scss";
 @import "~@edx/brand/paragon/overrides.scss";
 
 @import "~@edx/frontend-component-footer/dist/footer";
 @import "~@edx/frontend-component-header/dist/index";
 
-$fa-font-path: "~font-awesome/fonts";
-@import "~font-awesome/scss/font-awesome";
-
 #post,
 #comment,
 #reply,
@@ -22,23 +18,23 @@ $fa-font-path: "~font-awesome/fonts";
 }
 
 .text-staff-color {
-  color: $warning-700;
+  color: var(--pgn-color-warning-700);
 }
 
 .outline-staff-color {
-  outline: $warning-700 solid 2px;
+  outline: var(--pgn-color-warning-700) solid 2px;
 }
 
 .text-TA-color {
-  color: $success-700;
+  color: var(--pgn-color-success-700);
 }
 
 .outline-TA-color {
-  outline: $success-700 solid 2px;
+  outline: var(--pgn-color-success-700) solid 2px;
 }
 
 .outline-anonymous {
-  outline: $light-400 solid 2px;
+  outline: var(--pgn-color-light-400) solid 2px;
 }
 
 .font-size-16 {
@@ -166,7 +162,7 @@ $fa-font-path: "~font-awesome/fonts";
 }
 
 .learner > a:hover {
-  background-color: $light-300;
+  background-color: var(--pgn-color-light-300);
 }
 
 .py-10px {
@@ -245,12 +241,12 @@ header {
 }
 
 .border-light-400-2 {
-  border: 2px solid $light-400 !important;
+  border: 2px solid var(--pgn-color-light-400) !important;
   border-width: 2px !important;
 }
 
 .border-primary-500-2 {
-  border: 2px solid $primary-500 !important;
+  border: 2px solid var(--pgn-color-primary-500) !important;
   border-width: 2px !important;
 }
 
@@ -373,8 +369,8 @@ header {
 }
 
 .btn-icon.btn-icon-primary:hover {
-  background-color: $light-300 !important;
-  color: $primary-500 !important
+  background-color: var(--pgn-color-light-300) !important;
+  color: var(--pgn-color-primary-500) !important
 }
 
 
@@ -416,38 +412,38 @@ header {
 }
 
 .hover-button:hover {
-  background-color: $light-300 !important;
+  background-color: var(--pgn-color-light-300) !important;
   height: 36px !important;
   border: none !important;
 }
 
 .btn-tertiary:hover {
-  background-color: $light-300 !important;
+  background-color: var(--pgn-color-light-300) !important;
 }
 
 .nav-button-group {
   .nav-link {
     &:hover {
-      background-color: $light-300 !important;
+      background-color: var(--pgn-color-light-300) !important;
     }
   }
 
   .nav-link.active,
   .show>.nav-link {
-    background-color: $primary-500 !important;
+    background-color: var(--pgn-color-primary-500) !important;
   }
 }
 
 .course-tabs-navigation {
   .nav a {
     &:hover {
-      background-color: $light-300 !important;;
+      background-color: var(--pgn-color-light-300) !important;;
     }
   }
 }
 
 .btn-tertiary:disabled {
-  color: $gray-700 !important;
+  color: var(--pgn-color-gray-700) !important;
   background-color: transparent !important;
 }
 
@@ -524,14 +520,14 @@ code {
 .post-preview,
 .discussion-comments {
   blockquote {
-    border-left: 2px solid $gray-200;
+    border-left: 2px solid var(--pgn-color-gray-200);
     margin-left: 1.5rem;
     padding-left: 1rem;
   }
 }
 
 .add-comment-btn {
-  border: 1px solid $light-300 !important;
+  border: 1px solid var(--pgn-color-light-300) !important;
 }
 
 .icon-size-24 {
@@ -577,7 +573,7 @@ code {
 }
 
 th, td {
-  border: 1px dashed $gray-200;
+  border: 1px dashed var(--pgn-color-gray-200);
   padding: 0.4rem;
   white-space: nowrap;
 }