feat: update MFE to use dynamically injected theme

Updates the MFE to use alpha version of frontend build, platform and paragon to support runtime theming.
open-craft · Jul 25, 2024 · 67c27ff · 67c27ff
1 parent c8a95eb
commit 67c27ff
Show file tree

Hide file tree

Showing 19 changed files with 1,743 additions and 440 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,21 +30,22 @@
     "url": "https://github.com/openedx/frontend-app-learning/issues"
   },
   "dependencies": {
-    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-header": "^5.0.2",
-    "@edx/frontend-lib-learning-assistant": "^2.0.0",
-    "@edx/frontend-lib-special-exams": "^3.0.1",
-    "@edx/frontend-platform": "^7.1.2",
+    "@edx/brand": "npm:@edx/[email protected]",
+    "@edx/frontend-component-header": "github:PKulkoRaccoonGang/frontend-component-header#Peter_Kulko/support-design-tokens",
+    "@edx/frontend-component-footer": "github:PKulkoRaccoonGang/frontend-component-footer#Peter_Kulko/support-design-tokens",
+    "@edx/frontend-lib-learning-assistant": "https://github.com/open-craft/frontend-lib-learning-assistant/releases/download/v2.0.0-token-asu-moe/edx-frontend-lib-learning-assistant-2.0.0.tgz",
+    "@edx/frontend-lib-special-exams": "https://github.com/ArturGaspar/openedx-frontend-lib-special-exams/releases/download/v3.0.1-tokens-release/edx-frontend-lib-special-exams-3.0.1.tgz",
+    "@edx/frontend-platform": "https://github.com/open-craft/frontend-platform/releases/download/v7.0.1-token-asu-moe/edx-frontend-platform-7.0.1.tgz",
     "@edx/openedx-atlas": "^0.6.0",
-    "@edx/react-unit-test-utils": "^2.0.0",
+    "@edx/react-unit-test-utils": "https://github.com/open-craft/react-unit-test-utils/releases/download/v2.0.0-token-asu-moe/edx-react-unit-test-utils-2.0.0.tgz",
     "@fortawesome/fontawesome-svg-core": "1.3.0",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.4",
-    "@openedx/frontend-plugin-framework": "^1.1.2",
+    "@openedx/frontend-plugin-framework": "https://github.com/ArturGaspar/openedx-frontend-plugin-framework/releases/download/v1.1.2-token-asu-moe/openedx-frontend-plugin-framework-1.1.2.tgz",
     "@openedx/frontend-slot-footer": "^1.0.2",
-    "@openedx/paragon": "^22.3.0",
+    "@openedx/paragon": "23.0.0-alpha.1",
     "@popperjs/core": "2.11.8",
     "@reduxjs/toolkit": "1.8.1",
     "classnames": "2.3.2",
@@ -71,7 +72,7 @@
   "devDependencies": {
     "@edx/browserslist-config": "1.2.0",
     "@edx/reactifex": "2.2.0",
-    "@openedx/frontend-build": "13.1.4",
+    "@openedx/frontend-build": "github:open-craft/frontend-build#asu-moe/redwood-css",
     "@pact-foundation/pact": "^11.0.2",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.5",

diff --git a/src/course-home/courseware-search/courseware-search.scss b/src/course-home/courseware-search/courseware-search.scss
@@ -5,8 +5,8 @@
   left: 0;
   right: 0;
   bottom: 0;
-  border-top: 1px solid $light-300;
-  z-index: $zindex-modal; // Bootstrap's z-index layer for Modals.
+  border-top: 1px solid var(--pgn-color-light-300);
+  z-index: var(--pgn-elevation-modal-zindex); // Bootstrap's z-index layer for Modals.
 
   &__close {
     position: absolute !important; // For some reason it gets overridden
@@ -35,7 +35,7 @@
 
   &__results-summary {
     font-size: .9rem;
-    color: $gray-500;
+    color: var(--pgn-color-gray-500);
     padding: 1rem 0 .5rem;
   }
 
@@ -50,7 +50,7 @@
   margin-top: 1.5rem;
 
   &__empty {
-    color: $gray-500;
+    color: var(--pgn-color-gray-500);
     padding: 6rem 0;
     text-align: center;
   }
@@ -64,17 +64,17 @@
 
     &:hover {
       text-decoration: none;
-      background: $light-300;
+      background: var(--pgn-color-light-300);
     }
 
     &:not(:first-child) {
-      border-top: 1px solid $light-300;
+      border-top: 1px solid var(--pgn-color-light-300);
     }
   }
 
   &__icon {
     padding: 0.375rem 0 0 0.375rem;
-    color: $gray-300;
+    color: var(--pgn-color-gray-300);
   }
 
   &__info {
@@ -87,7 +87,7 @@
     align-items: center;
     line-height: 2.5;
     font-size: 0.875rem;
-    color: $black;
+    color: var(--pgn-color-black);
 
     > span {
       display: block;
@@ -101,7 +101,7 @@
       font-variant-numeric: lining-nums tabular-nums;
       min-width: 1.25rem;
       line-height: 1rem;
-      background: $light-300;
+      background: var(--pgn-color-light-300);
       border-radius: 99rem;
       font-style: normal;
       margin-left: 0.375rem;
@@ -113,7 +113,7 @@
   &__breadcrumbs {
     display: flex;
     gap: 1.25rem;
-    color: $gray-500;
+    color: var(--pgn-color-gray-500);
     overflow: hidden;
     list-style: none;
     padding: 0;
@@ -144,14 +144,14 @@
 }
 
 .courseware-search-results-tabs {
-  border-bottom-color: $gray-400 !important;
+  border-bottom-color: var(--pgn-color-gray-400) !important;
 
   &.nav-tabs .nav-link.active {
     border-bottom-width: 4px !important;
   }
 }
 
-@media (min-width: map-get($grid-breakpoints, 'md')) {
+@media (--pgn-size-breakpoint-min-width-md) {
   .courseware-search__content {
     padding-top: 8rem;
   }

diff --git a/src/course-home/outline-tab/widgets/FlagButton.scss b/src/course-home/outline-tab/widgets/FlagButton.scss
@@ -1,22 +1,18 @@
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
-
 .flag-button {
-  background-color: $white;
-  border: 1px solid $light-400;
+  background-color: var(--pgn-color-white);
+  border: 1px solid var(--pgn-color-light-400);
   border-radius: .2rem;
-  box-shadow: 0 0 0 2px $light-400;
+  box-shadow: 0 0 0 2px var(--pgn-color-light-400);
 
   &:hover {
-    border: 1px solid $primary-300;
-    box-shadow: 0 0 0 2px $white;
+    border: 1px solid var(--pgn-color-primary-300);
+    box-shadow: 0 0 0 2px var(--pgn-color-white);
   }
 }
 
 .flag-button-selected {
-  border: 1px solid $primary-300;
-  box-shadow: 0 0 0 2px $primary-300;
+  border: 1px solid var(--pgn-color-primary-300);
+  box-shadow: 0 0 0 2px var(--pgn-color-primary-300);
   pointer-events: none;
 }
 

diff --git a/src/course-home/outline-tab/widgets/ProctoringInfoPanel.scss b/src/course-home/outline-tab/widgets/ProctoringInfoPanel.scss
@@ -1,10 +1,10 @@
 .outline-sidebar-proctoring-panel {
-  border: 1px solid $dark-500;
-  border-top: 5px solid $brand-600;
+  border: 1px solid var(--pgn-color-dark-500);
+  border-top: 5px solid var(--pgn-color-brand-600);
 }
 .proctoring-onboarding-success {
-  border-top: 5px solid $primary-500;
+  border-top: 5px solid var(--pgn-color-primary-500);
 }
 .proctoring-onboarding-submitted {
-  border-top: 5px solid $dark-500;
+  border-top: 5px solid var(--pgn-color-dark-500);
 }
diff --git a/src/course-home/progress-tab/course-completion/CompletionDonutChart.scss b/src/course-home/progress-tab/course-completion/CompletionDonutChart.scss
@@ -7,18 +7,18 @@
 
 .donut-chart-label {
   font: {
-    family: $font-family-sans-serif;
+    family: var(--pgn-typography-font-family-sans-serif);
     size: .2rem;
-    weight: $font-weight-normal;
+    weight: var(--pgn-typography-font-weight-normal);
   }
   text-anchor: middle;
 }
 
 .donut-chart-number {
   font: {
-    family: $font-family-monospace;
+    family: var(--pgn-typography-font-family-monospace);
     size: .5rem;
-    weight: $font-weight-bold;
+    weight: var(--pgn-typography-font-weight-bold);
   }
   line-height: 1rem;
   text-anchor: middle;
@@ -29,7 +29,7 @@
 }
 
 .donut-chart-text {
-  fill: $primary-500;
+  fill: var(--pgn-color-primary-500);
   -moz-transform: translateY(0.25em);
   -ms-transform: translateY(0.25em);
   -webkit-transform: translateY(0.25em);
@@ -56,7 +56,7 @@
 
 .donut-ring, .donut-segment, .donut-hole {
   &.complete-stroke {
-    stroke: $info-500;
+    stroke: var(--pgn-color-info-500);
   }
 
   &.divider-stroke {
@@ -65,10 +65,10 @@
   }
 
   &.incomplete-stroke {
-    stroke: $light-300;
+    stroke: var(--pgn-color-light-300);
   }
 
   &.locked-stroke {
-    stroke: $primary-500;
+    stroke: var(--pgn-color-primary-500);
   }
 }
diff --git a/src/course-home/progress-tab/grades/course-grade/GradeBar.scss b/src/course-home/progress-tab/grades/course-grade/GradeBar.scss
@@ -4,24 +4,24 @@
   }
 
   .grade-bar__base {
-    fill: $light-300;
+    fill: var(--pgn-color-light-300);
   }
 
   .grade-bar__divider {
-    fill: $primary-500;
+    fill: var(--pgn-color-primary-500);
     width: 1px;
   }
 
   .grade-bar--passing {
-    fill: $primary-500;
+    fill: var(--pgn-color-primary-500);
   }
 
   .grade-bar--current-passing {
-    fill: $success-500;
+    fill: var(--pgn-color-success-500);
   }
 
   .grade-bar--current-non-passing {
-    fill: $accent-b;
+    fill: var(--pgn-color-accent-b);
   }
 }
 
@@ -31,22 +31,22 @@
 
 #minimum-grade-tooltip {
   .arrow::after {
-    border-bottom-color: $primary-500;
+    border-bottom-color: var(--pgn-color-primary-500);
   }
 }
 
 #passing-grade-tooltip {
   .arrow::after {
-    border-top-color: $success-500;
+    border-top-color: var(--pgn-color-success-500);
   }
 
-  background: $success-500;
+  background: var(--pgn-color-success-500);
 }
 
 #non-passing-grade-tooltip {
   .arrow::after {
-    border-top-color: $accent-b;
+    border-top-color: var(--pgn-color-accent-b);
   }
 
-  background: $accent-b;
+  background: var(--pgn-color-accent-b);
 }
diff --git a/src/course-tabs/course-tabs-navigation.scss b/src/course-tabs/course-tabs-navigation.scss
@@ -5,13 +5,13 @@
   .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;
     }
   }

diff --git a/src/courseware/course/celebration/CelebrationModal.scss b/src/courseware/course/celebration/CelebrationModal.scss
@@ -22,7 +22,6 @@
     justify-content: center;
 
     button {
-      @extend .btn-primary;
       font-size: 1.2rem;
       width: 50%;
     }

diff --git a/src/courseware/course/sequence/Unit/ContentIFrame.jsx b/src/courseware/course/sequence/Unit/ContentIFrame.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import { ErrorPage } from '@edx/frontend-platform/react';
 import { StrictDict } from '@edx/react-unit-test-utils';
-import { ModalDialog, Modal } from '@openedx/paragon';
+import { ModalDialog } from '@openedx/paragon';
 
 import PageLoading from '@src/generic/PageLoading';
 import * as hooks from './hooks';
@@ -89,28 +89,18 @@ const ContentIFrame = ({
           <iframe title={title} {...contentIFrameProps} data-testid={testIDs.contentIFrame} />
         </div>
       )}
-      {modalOptions.isOpen && (modalOptions.isFullscreen
-        ? (
-          <ModalDialog
-            dialogClassName="modal-lti"
-            onClose={handleModalClose}
-            size="fullscreen"
-            isOpen
-            hasCloseButton={false}
-          >
-            <ModalDialog.Body className={modalOptions.modalBodyClassName}>
-              {modalContent}
-            </ModalDialog.Body>
-          </ModalDialog>
-
-        ) : (
-          <Modal
-            body={modalContent}
-            dialogClassName="modal-lti"
-            onClose={handleModalClose}
-            open
-          />
-        )
+      {modalOptions.isOpen && (
+        <ModalDialog
+          dialogClassName="modal-lti"
+          onClose={handleModalClose}
+          size={modalOptions.isFullscreen ? 'fullscreen' : 'md'}
+          isOpen
+          hasCloseButton={false}
+        >
+          <ModalDialog.Body className={modalOptions.modalBodyClassName}>
+            {modalContent}
+          </ModalDialog.Body>
+        </ModalDialog>
       )}
     </>
   );