feat(quince): add css support and cdn compatibility

package.json

@@ -17,7 +17,8 @@
     "prepare": "husky install",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "fedx-scripts jest --coverage --passWithNoTests"
+    "test": "fedx-scripts jest --coverage --passWithNoTests",
+    "replace-variables": "paragon replace-variables -p src -t usage"
   },
   "author": "edX",
   "license": "AGPL-3.0",
@@ -30,13 +31,13 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@edx/[email protected]",
-    "@edx/frontend-component-footer": "12.2.1",
-    "@edx/frontend-component-header": "4.6.0",
-    "@edx/frontend-lib-learning-assistant": "^1.14.0",
-    "@edx/frontend-lib-special-exams": "2.23.2",
-    "@edx/frontend-platform": "5.5.2",
-    "@edx/paragon": "20.46.0",
-    "@edx/react-unit-test-utils": "npm:@edx/[email protected]",
+    "@edx/frontend-component-footer": "npm:@edunext/frontend-component-footer@12.2.1-alpha.2",
+    "@edx/frontend-component-header": "npm:@edunext/frontend-component-header@^4.6.0-alpha.1",
+    "@edx/frontend-lib-learning-assistant": "npm:@edunext/frontend-lib-learning-assistant@^1.14.0-alpha.1",
+    "@edx/frontend-lib-special-exams": "npm:@edunext/frontend-lib-special-exams@^2.23.2-alpha.2",
+    "@edx/frontend-platform": "npm:@edunext/frontend-platform@5.5.4-alpha.4",
+    "@edx/paragon": "npm:@openedx/[email protected]",
+    "@edx/react-unit-test-utils": "npm:@edunext/react-unit-test-utils@^1.7.0-alpha.1",
     "@fortawesome/fontawesome-svg-core": "1.3.0",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
@@ -66,7 +67,7 @@
   },
   "devDependencies": {
     "@edx/browserslist-config": "1.2.0",
-    "@edx/frontend-build": "^12.9.10",
+    "@edx/frontend-build": "github:edunext/frontend-build#ednx-release/css-variables-13.0.1",
     "@edx/reactifex": "2.2.0",
     "@pact-foundation/pact": "^11.0.2",
     "@testing-library/jest-dom": "5.16.5",

src/course-home/outline-tab/widgets/FlagButton.scss

@@ -1,22 +1,21 @@
 @import "~@edx/brand/paragon/variables";
-@import "~@edx/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;
 }
 

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);
 }

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);
   }
 }

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);
 }

src/courseware/CoursewareContainer.test.jsx

@@ -13,7 +13,7 @@ import MockAdapter from 'axios-mock-adapter';
 
 import { UserMessagesProvider } from '../generic/user-messages';
 import tabMessages from '../tab-page/messages';
-import { initializeMockApp, waitFor } from '../setupTest';
+import { initializeMockApp } from '../setupTest';
 import { DECODE_ROUTES } from '../constants';
 
 import CoursewareContainer from './CoursewareContainer';
@@ -212,7 +212,7 @@ describe('CoursewareContainer', () => {
         });
 
         history.push(`/course/${courseId}`);
-        const container = await waitFor(() => loadContainer());
+        const container = await loadContainer();
 
         assertLoadedHeader(container);
         assertSequenceNavigation(container);
@@ -235,7 +235,7 @@ describe('CoursewareContainer', () => {
         axiosMock.onGet(`${getConfig().LMS_BASE_URL}/api/courseware/resume/${courseId}`).reply(200, {});
 
         history.push(`/course/${courseId}`);
-        const container = await waitFor(() => loadContainer());
+        const container = await loadContainer();
 
         assertLoadedHeader(container);
         assertSequenceNavigation(container);
@@ -285,7 +285,7 @@ describe('CoursewareContainer', () => {
       describe('when the URL does not contain a unit ID', () => {
         it('should choose a unit within the section\'s first sequence', async () => {
           setUrl(sectionTree[1].id);
-          const container = await waitFor(() => loadContainer());
+          const container = await loadContainer();
           assertLoadedHeader(container);
           assertSequenceNavigation(container, 2);
           assertLocation(container, sequenceTree[1][0].id, unitTree[1][0][0].id);
@@ -360,7 +360,7 @@ describe('CoursewareContainer', () => {
 
       it('should pick the first unit if position was not defined (activeUnitIndex becomes 0)', async () => {
         history.push(`/course/${courseId}/${sequenceBlock.id}`);
-        const container = await waitFor(() => loadContainer());
+        const container = await loadContainer();
 
         assertLoadedHeader(container);
         assertSequenceNavigation(container);
@@ -379,7 +379,7 @@ describe('CoursewareContainer', () => {
         setUpMockRequests({ sequenceMetadatas: [sequenceMetadata] });
 
         history.push(`/course/${courseId}/${sequenceBlock.id}`);
-        const container = await waitFor(() => loadContainer());
+        const container = await loadContainer();
 
         assertLoadedHeader(container);
         assertSequenceNavigation(container);
@@ -396,7 +396,7 @@ describe('CoursewareContainer', () => {
 
       it('should load the specified unit', async () => {
         history.push(`/course/${courseId}/${sequenceBlock.id}/${unitBlocks[2].id}`);
-        const container = await waitFor(() => loadContainer());
+        const container = await loadContainer();
 
         assertLoadedHeader(container);
         assertSequenceNavigation(container);
@@ -412,7 +412,7 @@ describe('CoursewareContainer', () => {
         });
 
         history.push(`/course/${courseId}/${sequenceBlock.id}/${unitBlocks[0].id}`);
-        const container = await waitFor(() => loadContainer());
+        const container = await loadContainer();
 
         const sequenceNavButtons = container.querySelectorAll('nav.sequence-navigation a, nav.sequence-navigation button');
         const sequenceNextButton = sequenceNavButtons[4];

src/courseware/course/celebration/CelebrationModal.scss

@@ -22,7 +22,6 @@
     justify-content: center;
 
     button {
-      @extend .btn-primary;
       font-size: 1.2rem;
       width: 50%;
     }

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 { Modal } from '@edx/paragon';
+import { ModalDialog } from '@edx/paragon';
 
 import PageLoading from '../../../../generic/PageLoading';
 import * as hooks from './hooks';
@@ -75,22 +75,25 @@ const ContentIFrame = ({
         </div>
       )}
       {modalOptions.isOpen && (
-        <Modal
-          body={modalOptions.body
-            ? <div className="unit-modal">{ modalOptions.body }</div>
-            : (
-              <iframe
-                title={modalOptions.title}
-                allow={IFRAME_FEATURE_POLICY}
-                frameBorder="0"
-                src={modalOptions.url}
-                style={{ width: '100%', height: modalOptions.height }}
-              />
-            )}
+        <ModalDialog
           dialogClassName="modal-lti"
           onClose={handleModalClose}
-          open
-        />
+          isOpen
+        >
+          <ModalDialog.Body>
+            {modalOptions.body
+              ? <div className="unit-modal">{ modalOptions.body }</div>
+              : (
+                <iframe
+                  title={modalOptions.title}
+                  allow={IFRAME_FEATURE_POLICY}
+                  frameBorder="0"
+                  src={modalOptions.url}
+                  style={{ width: '100%', height: modalOptions.height }}
+                />
+              )}
+          </ModalDialog.Body>
+        </ModalDialog>
       )}
     </>
   );

src/courseware/course/sequence/Unit/ContentIFrame.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { ErrorPage } from '@edx/frontend-platform/react';
-import { Modal } from '@edx/paragon';
+import { ModalDialog } from '@edx/paragon';
 import { shallow } from '@edx/react-unit-test-utils';
 
 import PageLoading from '../../../../generic/PageLoading';
@@ -11,7 +11,13 @@ import ContentIFrame, { IFRAME_FEATURE_POLICY, testIDs } from './ContentIFrame';
 
 jest.mock('@edx/frontend-platform/react', () => ({ ErrorPage: 'ErrorPage' }));
 
-jest.mock('@edx/paragon', () => ({ Modal: 'Modal' }));
+jest.mock('@edx/paragon', () => jest.requireActual('@edx/react-unit-test-utils')
+  .mockComponents({
+    Modal: 'Modal',
+    ModalDialog: {
+      Body: 'ModalDialog.Body',
+    },
+  }));
 
 jest.mock('../../../../generic/PageLoading', () => 'PageLoading');
 
@@ -132,7 +138,7 @@ describe('ContentIFrame Component', () => {
     });
     it('does not display modal if modalOptions returns isOpen: false', () => {
       el = shallow(<ContentIFrame {...props} />);
-      expect(el.instance.findByType(Modal).length).toEqual(0);
+      expect(el.instance.findByType(ModalDialog).length).toEqual(0);
     });
     describe('if modalOptions.isOpen', () => {
       const testModalOpenAndHandleClose = () => {
@@ -144,30 +150,34 @@ describe('ContentIFrame Component', () => {
         beforeEach(() => {
           hooks.useModalIFrameData.mockReturnValueOnce({ ...modalIFrameData, modalOptions: modalOptions.withBody });
           el = shallow(<ContentIFrame {...props} />);
-          [component] = el.instance.findByType(Modal);
+          [component] = el.instance.findByType(ModalDialog);
         });
         it('displays Modal with div wrapping provided body content if modal.body is provided', () => {
-          expect(component.props.body).toEqual(<div className="unit-modal">{modalOptions.withBody.body}</div>);
+          const content = component.findByType(ModalDialog.Body)[0].children[0];
+          expect(content.matches(shallow(
+            <div className="unit-modal">{modalOptions.withBody.body}</div>,
+          ))).toEqual(true);
         });
         testModalOpenAndHandleClose();
       });
       describe('url modal', () => {
         beforeEach(() => {
           hooks.useModalIFrameData.mockReturnValueOnce({ ...modalIFrameData, modalOptions: modalOptions.withUrl });
           el = shallow(<ContentIFrame {...props} />);
-          [component] = el.instance.findByType(Modal);
+          [component] = el.instance.findByType(ModalDialog);
         });
         testModalOpenAndHandleClose();
         it('displays Modal with iframe to provided url if modal.body is not provided', () => {
-          expect(component.props.body).toEqual(
+          const content = component.findByType(ModalDialog.Body)[0].children[0];
+          expect(content.matches(shallow(
             <iframe
               title={modalOptions.withUrl.title}
               allow={IFRAME_FEATURE_POLICY}
               frameBorder="0"
               src={modalOptions.withUrl.url}
               style={{ width: '100%', height: modalOptions.withUrl.height }}
             />,
-          );
+          ))).toEqual(true);
         });
       });
     });