perf: add css-variables support to redwood (#6)

eduNEXT · Jul 22, 2024 · 3e3796a · 3e3796a
1 parent 5219606
commit 3e3796a
Show file tree

Hide file tree

Showing 14 changed files with 11,195 additions and 6,696 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,8 @@
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests"
+    "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests",
+    "replace-variables": "paragon replace-variables -p src -t usage"
   },
   "bugs": {
     "url": "https://github.com/openedx/frontend-app-account/issues"
@@ -28,17 +29,17 @@
   ],
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "^13.2.0",
-    "@edx/frontend-component-header": "5.3.0",
-    "@edx/frontend-platform": "8.0.1",
+    "@edx/frontend-component-footer": "npm:@edunext/frontend-component-footer@13.0.4-alpha.1",
+    "@edx/frontend-component-header": "npm:@edunext/frontend-component-header@5.0.2-alpha.1",
+    "@edx/frontend-platform": "npm:@edunext/frontend-platform@7.1.2-alpha.1",
     "@edx/openedx-atlas": "^0.6.0",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@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.2.0",
     "@openedx/frontend-plugin-framework": "^1.1.2",
-    "@openedx/paragon": "22.0.0",
+    "@openedx/paragon": "23.0.0-alpha.1",
     "@tensorflow-models/blazeface": "0.0.7",
     "@tensorflow/tfjs-converter": "3.21.0",
     "@tensorflow/tfjs-core": "3.21.0",
@@ -84,7 +85,7 @@
   "devDependencies": {
     "@edx/browserslist-config": "1.2.0",
     "@edx/reactifex": "1.1.0",
-    "@openedx/frontend-build": "14.0.3",
+    "@openedx/frontend-build": "github:edunext/frontend-build#ednx-release/css-variables-13.1.4",
     "@testing-library/jest-dom": "6.4.5",
     "@testing-library/react": "12.1.5",
     "react-test-renderer": "17.0.2",

diff --git a/src/account-settings/AccountSettingsPage.jsx b/src/account-settings/AccountSettingsPage.jsx
@@ -843,12 +843,12 @@ class AccountSettingsPage extends React.Component {
         </h1>
         <div>
           <div className="row">
-            <div className="col-md-2">
+            <div className="col-md-3">
               <JumpNav
                 displayDemographicsLink={this.props.formValues.shouldDisplayDemographicsSection}
               />
             </div>
-            <div className="col-md-10">
+            <div className="col-md-9">
               {loading ? this.renderLoading() : null}
               {loaded ? this.renderContent() : null}
               {loadingError ? this.renderError() : null}

diff --git a/...nt-settings/certificate-preference/test/__snapshots__/CertificatePreference.test.jsx.snap b/...nt-settings/certificate-preference/test/__snapshots__/CertificatePreference.test.jsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NameChange does not render if there is no verified name 1`] = `
-{
+Object {
   "asFragment": [Function],
   "baseElement": <body>
     <div />

diff --git a/src/account-settings/delete-account/ConfirmationModal.jsx b/src/account-settings/delete-account/ConfirmationModal.jsx
@@ -2,8 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 import {
-  AlertModal,
-  Button, Input, ValidationFormGroup, ActionRow,
+  AlertModal, Button, Form, ActionRow,
 } from '@openedx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { faExclamationCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
@@ -107,22 +106,23 @@ export class ConfirmationModal extends Component {
               <PrintingInstructions />
             </p>
           </Alert>
-          <ValidationFormGroup
-            for={passwordFieldId}
-            invalid={errorType !== null}
-            invalidMessage={intl.formatMessage(invalidMessage)}
-          >
-            <label className="d-block" htmlFor={passwordFieldId}>
+          <Form.Group isInvalid={errorType !== null} controlId={passwordFieldId}>
+            <Form.Label className="d-block" htmlFor={passwordFieldId}>
               {intl.formatMessage(messages['account.settings.delete.account.modal.enter.password'])}
-            </label>
-            <Input
+            </Form.Label>
+            <Form.Control
               name="password"
               id={passwordFieldId}
               type="password"
               value={password}
               onChange={onChange}
             />
-          </ValidationFormGroup>
+            {errorType !== null && (
+              <Form.Control.Feedback type="invalid">
+                {intl.formatMessage(invalidMessage)}
+              </Form.Control.Feedback>
+            )}
+          </Form.Group>
         </div>
 
       </AlertModal>

diff --git a/src/account-settings/delete-account/__snapshots__/BeforeProceedingBanner.test.jsx.snap b/src/account-settings/delete-account/__snapshots__/BeforeProceedingBanner.test.jsx.snap
@@ -12,14 +12,14 @@ exports[`BeforeProceedingBanner should match the snapshot if SUPPORT_URL_TO_UNLI
       data-prefix="fas"
       focusable="false"
       role="img"
-      style={{}}
+      style={Object {}}
       viewBox="0 0 576 512"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
         d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
         fill="currentColor"
-        style={{}}
+        style={Object {}}
       />
     </svg>
   </div>
@@ -41,14 +41,14 @@ exports[`BeforeProceedingBanner should match the snapshot when SUPPORT_URL_TO_UN
       data-prefix="fas"
       focusable="false"
       role="img"
-      style={{}}
+      style={Object {}}
       viewBox="0 0 576 512"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
         d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
         fill="currentColor"
-        style={{}}
+        style={Object {}}
       />
     </svg>
   </div>

diff --git a/src/account-settings/delete-account/__snapshots__/ConfirmationModal.test.jsx.snap b/src/account-settings/delete-account/__snapshots__/ConfirmationModal.test.jsx.snap
@@ -3,11 +3,11 @@
 exports[`ConfirmationModal should match default closed confirmation modal snapshot 1`] = `null`;
 
 exports[`ConfirmationModal should match empty password confirmation modal snapshot 1`] = `
-[
+Array [
   <div
     data-focus-guard={true}
     style={
-      {
+      Object {
         "height": "0px",
         "left": "1px",
         "overflow": "hidden",
@@ -41,7 +41,7 @@ exports[`ConfirmationModal should match empty password confirmation modal snapsh
       />
       <div
         aria-label="Are you sure?"
-        className="pgn__modal pgn__modal-md pgn__modal-default pgn__alert-modal"
+        className="pgn__modal pgn__modal-md pgn__modal-default pgn__modal-visible-overflow pgn__alert-modal"
         role="dialog"
       >
         <div
@@ -74,14 +74,14 @@ exports[`ConfirmationModal should match empty password confirmation modal snapsh
                     data-prefix="fas"
                     focusable="false"
                     role="img"
-                    style={{}}
+                    style={Object {}}
                     viewBox="0 0 512 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
                       d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
                       fill="currentColor"
-                      style={{}}
+                      style={Object {}}
                     />
                   </svg>
                 </div>
@@ -107,14 +107,14 @@ exports[`ConfirmationModal should match empty password confirmation modal snapsh
                     data-prefix="fas"
                     focusable="false"
                     role="img"
-                    style={{}}
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
                       d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
                       fill="currentColor"
-                      style={{}}
+                      style={Object {}}
                     />
                   </svg>
                 </div>
@@ -131,30 +131,55 @@ exports[`ConfirmationModal should match empty password confirmation modal snapsh
                 </div>
               </div>
               <div
-                className="form-group"
-                data-testid="validation-form-group"
+                className="pgn__form-group"
               >
                 <label
-                  className="d-block"
+                  className="pgn__form-label d-block"
                   htmlFor="passwordFieldId"
                 >
                   If you still wish to continue and delete your account, please enter your account password:
                 </label>
-                <input
-                  aria-describedby="passwordFieldId-invalid-feedback"
-                  className="form-control is-invalid"
-                  id="passwordFieldId"
-                  name="password"
-                  onChange={[MockFunction]}
-                  type="password"
-                  value="fluffy bunnies"
-                />
-                <strong
-                  className="invalid-feedback"
-                  id="passwordFieldId-invalid-feedback"
+                <div
+                  className="pgn__form-control-decorator-group"
                 >
-                  A password is required
-                </strong>
+                  <input
+                    aria-describedby="passwordFieldId-3"
+                    className="has-value form-control is-invalid"
+                    id="passwordFieldId"
+                    name="password"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    type="password"
+                    value="fluffy bunnies"
+                  />
+                </div>
+                <div
+                  className="pgn__form-control-description pgn__form-text pgn__form-text-invalid"
+                  id="passwordFieldId-3"
+                >
+                  <span
+                    className="pgn__icon"
+                  >
+                    <svg
+                      aria-hidden={true}
+                      fill="none"
+                      focusable={false}
+                      height={24}
+                      role="img"
+                      viewBox="0 0 24 24"
+                      width={24}
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </span>
+                  <div>
+                    A password is required
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -190,7 +215,7 @@ exports[`ConfirmationModal should match empty password confirmation modal snapsh
   <div
     data-focus-guard={true}
     style={
-      {
+      Object {
         "height": "0px",
         "left": "1px",
         "overflow": "hidden",
@@ -206,11 +231,11 @@ exports[`ConfirmationModal should match empty password confirmation modal snapsh
 `;
 
 exports[`ConfirmationModal should match open confirmation modal snapshot 1`] = `
-[
+Array [
   <div
     data-focus-guard={true}
     style={
-      {
+      Object {
         "height": "0px",
         "left": "1px",
         "overflow": "hidden",
@@ -242,7 +267,7 @@ exports[`ConfirmationModal should match open confirmation modal snapshot 1`] = `
       />
       <div
         aria-label="Are you sure?"
-        className="pgn__modal pgn__modal-md pgn__modal-default pgn__alert-modal"
+        className="pgn__modal pgn__modal-md pgn__modal-default pgn__modal-visible-overflow pgn__alert-modal"
         role="dialog"
       >
         <div
@@ -275,14 +300,14 @@ exports[`ConfirmationModal should match open confirmation modal snapshot 1`] = `
                     data-prefix="fas"
                     focusable="false"
                     role="img"
-                    style={{}}
+                    style={Object {}}
                     viewBox="0 0 576 512"
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
                       d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
                       fill="currentColor"
-                      style={{}}
+                      style={Object {}}
                     />
                   </svg>
                 </div>
@@ -299,30 +324,27 @@ exports[`ConfirmationModal should match open confirmation modal snapshot 1`] = `
                 </div>
               </div>
               <div
-                className="form-group"
-                data-testid="validation-form-group"
+                className="pgn__form-group"
               >
                 <label
-                  className="d-block"
+                  className="pgn__form-label d-block"
                   htmlFor="passwordFieldId"
                 >
                   If you still wish to continue and delete your account, please enter your account password:
                 </label>
-                <input
-                  aria-describedby=""
-                  className="form-control"
-                  id="passwordFieldId"
-                  name="password"
-                  onChange={[MockFunction]}
-                  type="password"
-                  value="fluffy bunnies"
-                />
-                <strong
-                  className="invalid-feedback"
-                  id="passwordFieldId-invalid-feedback"
+                <div
+                  className="pgn__form-control-decorator-group"
                 >
-                  Unable to delete account
-                </strong>
+                  <input
+                    className="has-value form-control"
+                    id="passwordFieldId"
+                    name="password"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    type="password"
+                    value="fluffy bunnies"
+                  />
+                </div>
               </div>
             </div>
           </div>
@@ -358,7 +380,7 @@ exports[`ConfirmationModal should match open confirmation modal snapshot 1`] = `
   <div
     data-focus-guard={true}
     style={
-      {
+      Object {
         "height": "0px",
         "left": "1px",
         "overflow": "hidden",