fix(deps): update dependency @openedx/paragon to v23.14.0 (#1230)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.env

@@ -29,3 +29,5 @@ APP_ID=''
 MFE_CONFIG_API_URL=''
 SEARCH_CATALOG_URL=''
 ENABLE_SKILLS_BUILDER_PROFILE=''
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.development

@@ -30,3 +30,5 @@ APP_ID=''
 MFE_CONFIG_API_URL=''
 SEARCH_CATALOG_URL='http://localhost:18000/courses'
 ENABLE_SKILLS_BUILDER_PROFILE=''
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.test

@@ -25,3 +25,4 @@ LEARNER_RECORD_MFE_BASE_URL='http://localhost:1990'
 COLLECT_YEAR_OF_BIRTH=true
 APP_ID=''
 MFE_CONFIG_API_URL=''
+PARAGON_THEME_URLS={}

package.json

@@ -14,6 +14,7 @@
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
+    "dev": "PUBLIC_PATH=/profile/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
     "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests",
     "stubs": "pact-stub-service ./src/pacts/frontend-app-profile-edx-platform.json --port 18000"
   },
@@ -29,32 +30,32 @@
   ],
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-header": "^5.6.0",
-    "@edx/frontend-platform": "8.1.5",
-    "@edx/openedx-atlas": "^0.6.0",
+    "@edx/frontend-component-footer": "^14.6.0",
+    "@edx/frontend-component-header": "^6.2.0",
+    "@edx/frontend-platform": "^8.3.1",
+    "@edx/openedx-atlas": "^0.7.0",
     "@fortawesome/fontawesome-svg-core": "6.7.2",
     "@fortawesome/free-brands-svg-icons": "6.7.2",
     "@fortawesome/free-regular-svg-icons": "6.7.2",
     "@fortawesome/free-solid-svg-icons": "6.7.2",
     "@fortawesome/react-fontawesome": "0.2.2",
-    "@openedx/frontend-slot-footer": "^1.0.2",
-    "@openedx/paragon": "^22.2.2",
+    "@openedx/paragon": "^23.4.5",
     "@pact-foundation/pact": "^11.0.2",
     "@redux-devtools/extension": "3.3.0",
     "classnames": "2.5.1",
-    "core-js": "3.40.0",
+    "core-js": "3.43.0",
     "history": "5.3.0",
     "lodash.camelcase": "4.3.0",
     "lodash.get": "4.4.2",
     "lodash.pick": "4.4.0",
     "lodash.snakecase": "4.1.1",
     "prop-types": "15.8.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-helmet": "6.1.0",
     "react-redux": "7.2.9",
-    "react-router": "6.29.0",
-    "react-router-dom": "6.29.0",
+    "react-router": "6.30.1",
+    "react-router-dom": "6.30.1",
     "redux": "4.2.1",
     "redux-logger": "3.0.6",
     "redux-saga": "1.3.0",
@@ -64,14 +65,14 @@
     "universal-cookie": "4.0.4"
   },
   "devDependencies": {
-    "@commitlint/cli": "19.8.0",
-    "@commitlint/config-angular": "19.8.0",
+    "@commitlint/cli": "19.8.1",
+    "@commitlint/config-angular": "19.8.1",
     "@edx/browserslist-config": "^1.1.1",
     "@edx/reactifex": "2.2.0",
-    "@openedx/frontend-build": "14.3.2",
+    "@openedx/frontend-build": "^14.3.3",
     "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "12.1.5",
-    "glob": "11.0.1",
+    "@testing-library/react": "14.3.1",
+    "glob": "11.0.3",
     "reactifex": "1.1.1",
     "redux-mock-store": "1.5.5"
   }

src/index.jsx

@@ -13,11 +13,12 @@ import {
   ErrorPage,
 } from '@edx/frontend-platform/react';
 
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React, { StrictMode } from 'react';
+// eslint-disable-next-line import/no-unresolved
+import { createRoot } from 'react-dom/client';
 
 import Header from '@edx/frontend-component-header';
-import FooterSlot from '@openedx/frontend-slot-footer';
+import { FooterSlot } from '@edx/frontend-component-footer';
 
 import messages from './i18n';
 import configureStore from './data/configureStore';
@@ -27,22 +28,24 @@ import Head from './head/Head';
 
 import AppRoutes from './routes/AppRoutes';
 
+const rootNode = createRoot(document.getElementById('root'));
 subscribe(APP_READY, () => {
-  ReactDOM.render(
-    <AppProvider store={configureStore()}>
-      <Head />
-      <Header />
-      <main id="main">
-        <AppRoutes />
-      </main>
-      <FooterSlot />
-    </AppProvider>,
-    document.getElementById('root'),
+  rootNode.render(
+    <StrictMode>
+      <AppProvider store={configureStore()}>
+        <Head />
+        <Header />
+        <main id="main">
+          <AppRoutes />
+        </main>
+        <FooterSlot />
+      </AppProvider>
+    </StrictMode>,
   );
 });
 
 subscribe(APP_INIT_ERROR, (error) => {
-  ReactDOM.render(<ErrorPage message={error.message} />, document.getElementById('root'));
+  rootNode.render(<ErrorPage message={error.message} />);
 });
 
 initialize({

src/index.scss

@@ -1,7 +1,5 @@
-@import "~@edx/brand/paragon/fonts";
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
+@use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
+
 @import "~@edx/frontend-component-header/dist/index";
 @import "~@edx/frontend-component-footer/dist/footer";
 

src/plugin-slots/FooterSlot/README.md

@@ -1,12 +1,15 @@
 # Footer Slot
 
-### Slot ID: `footer_slot`
+### Slot ID: `org.openedx.frontend.layout.footer.v1`
+
+### Slot ID Aliases
+* `footer_slot`
 
 ## Description
 
 This slot is used to replace/modify/hide the footer.
 
-The implementation of the `FooterSlot` component lives in [the `frontend-slot-footer` repository](https://github.com/openedx/frontend-slot-footer/).
+The implementation of the `FooterSlot` component lives in [the `frontend-component-footer` repository](https://github.com/openedx/frontend-component-footer/).
 
 ## Example
 
@@ -23,7 +26,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    footer_slot: {
+    'org.openedx.frontend.layout.footer.v1': {
       plugins: [
         {
           // Hide the default footer

src/plugin-slots/README.md

@@ -1,3 +1,3 @@
 # `frontend-app-profile` Plugin Slots
 
-* [`footer_slot`](./FooterSlot/)
+* [`org.openedx.frontend.layout.footer.v1`](./FooterSlot/)

src/profile/__snapshots__/ProfilePage.test.jsx.snap

@@ -65,9 +65,10 @@ exports[`<ProfilePage /> Renders correctly in various states successfully redire
                     Upload Photo
                   </button>
                 </div>
-                <iconmock
+                <div
                   aria-hidden="true"
                   class="text-muted"
+                  data-testid="IconMock"
                   focusable="false"
                   role="img"
                   viewbox="0 0 24 24"
@@ -5767,9 +5768,10 @@ exports[`<ProfilePage /> Renders correctly in various states viewing other profi
               <div
                 class="profile-avatar rounded-circle bg-light"
               >
-                <iconmock
+                <div
                   aria-hidden="true"
                   class="text-muted"
+                  data-testid="IconMock"
                   focusable="false"
                   role="img"
                   viewbox="0 0 24 24"

src/profile/index.scss

@@ -28,7 +28,7 @@
   position: absolute;
   left: 1.5rem;
   top: 5.25rem;
-  color: $gray-500;
+  color: var(--pgn-color-gray-500);
   line-height: 0.9rem;
   font-size: 0.8rem;
   font-style: normal;
@@ -42,12 +42,12 @@
 
 .icon-visibility-off {
   height: 1rem;
-  color: $gray-500;
+  color: var(--pgn-color-gray-500);
 }
 
 .profile-page {
   .edit-section-header {
-    @extend .h6;
+    font-size: var(--pgn-typography-font-size-h6-base);
     display: block;
     font-weight: normal;
     letter-spacing: 0;
@@ -55,11 +55,11 @@
   }
 
   label.edit-section-header {
-    margin-bottom: $spacer * .5;
+    margin-bottom: calc(var(--pgn-spacing-spacer-base) * .5);
   }
 
   .profile-avatar-wrap {
-    @include media-breakpoint-up(md) {
+    @media (--pgn-size-breakpoint-min-width-md) {
       max-width: 12rem;
       margin-right: 0;
       margin-top: -8rem;
@@ -77,25 +77,25 @@
     align-items: center;
     border-radius: 50%;
 
-    @include media-breakpoint-up(md) {
+     @media (--pgn-size-breakpoint-min-width-md) {
       background: linear-gradient(to top, rgba(0,0,0,.65) 4rem, rgba(0,0,0,0) 4rem);
       align-items: flex-end;
     }
 
     .btn {
       text-decoration: none;
-      @include media-breakpoint-up(md) {
+      @media (--pgn-size-breakpoint-min-width-md) {
         margin-bottom: 1.2rem;
       }
     }
 
     .dropdown {
-      @include media-breakpoint-up(md) {
+      @media (--pgn-size-breakpoint-min-width-md) {
         margin-bottom: 1.2rem;
       }
 
       .btn {
-        color: $white;
+        color: var(--pgn-color-white);
         background: transparent;
         border-color: transparent;
         margin: 0;
@@ -108,7 +108,7 @@
     height: 5rem;
     position: relative;
 
-    @include media-breakpoint-up(md) {
+    @media (--pgn-size-breakpoint-min-width-md) {
       width: 12rem;
       height: 12rem;
     }
@@ -128,7 +128,7 @@
       border-radius:0;
       transition: opacity 200ms ease;
 
-      @include media-breakpoint-up(md) {
+      @media (--pgn-size-breakpoint-min-width-md) {
         height: 4rem;
       }
 
@@ -142,7 +142,7 @@
     position: relative;
 
     .certificate-title {
-      font-family: $font-family-serif;
+      font-family: var(--pgn-typography-font-family-serif);
       font-weight: 400;
     }