perf: update redwood branch with upstream (#11)

* feat: use frontend-plugin-framework to provide a FooterSlot

* fix: import `FooterSlot` from `frontend-slot-footer` package

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

* fix: solve peer deps issue

* fix: tests failed because axios lib errors

* refactor: update plugin framework branch name

---------

Co-authored-by: Brian Smith <[email protected]>

README.rst

@@ -69,6 +69,11 @@ Tests use `jest` and `react-test-library`. To run all the tests for this repo:
 
       npm test
 
+Plugins
+=======
+This MFE can be customized using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
+
+The parts of this MFE that can be customized in that manner are documented `here </src/plugin-slots>`_.
 
 **Production Build**
 

jest.config.js

@@ -10,4 +10,8 @@ module.exports = createConfig('jest', {
     'src/setupTest.js',
     'src/i18n',
   ],
+  // see https://github.com/axios/axios/issues/5026
+  moduleNameMapper: {
+    "^axios$": "axios/dist/axios.js",
+  },
 });

package.json

@@ -35,7 +35,6 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "npm:@edunext/[email protected]",
     "@edx/frontend-component-header": "npm:@edunext/[email protected]",
     "@edx/frontend-platform": "npm:@edunext/[email protected]",
     "@edx/openedx-atlas": "^0.6.0",
@@ -45,6 +44,8 @@
     "@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": "github:edunext/frontend-plugin-framework#ednx-release/css-variables-1.2.2",
+    "@openedx/frontend-slot-footer": "^1.0.2",
     "@openedx/paragon": "23.0.0-alpha.1",
     "@tinymce/tinymce-react": "3.14.0",
     "axios": "0.27.2",

src/components/page-container/PageContainer.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useParams } from 'react-router-dom';
 
 import { LearningHeader as Header } from '@edx/frontend-component-header';
-import Footer from '@edx/frontend-component-footer';
+import FooterSlot from '@openedx/frontend-slot-footer';
 import { Spinner } from '@openedx/paragon';
 
 import { getCohorts, getCourseHomeCourseMetadata } from './data/api';
@@ -72,7 +72,7 @@ export default function PageContainer(props) {
               {children}
             </main>
           </div>
-          <Footer />
+          <FooterSlot />
         </>
       </CourseMetadataContext.Provider>
     );

src/plugin-slots/FooterSlot/README.md

@@ -0,0 +1,50 @@
+# Footer Slot
+
+### Slot ID: `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/).
+
+## Example
+
+The following `env.config.jsx` will replace the default footer.
+
+![Screenshot of Default Footer](./images/default_footer.png)
+
+with a simple custom footer
+
+![Screenshot of Custom Footer](./images/custom_footer.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    footer_slot: {
+      plugins: [
+        {
+          // Hide the default footer
+          op: PLUGIN_OPERATIONS.Hide,
+          widgetId: 'default_contents',
+        },
+        {
+          // Insert a custom footer
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_footer',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🦶</h1>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

src/plugin-slots/README.md

@@ -0,0 +1,3 @@
+# `frontend-app-communications` Plugin Slots
+
+* [`footer_slot`](./FooterSlot/)