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

README.rst

@@ -63,6 +63,12 @@ This MFE is bundled with `Devstack <https://github.com/openedx/devstack>`_, see
 
    .. image:: ./docs/images/localhost_preview.png
 
+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>`_.
+
 Environment Variables/Setup Notes
 =================================
 

package.json

@@ -37,6 +37,7 @@
     "@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.1",
     "@openedx/paragon": "22.0.0",
     "@tensorflow-models/blazeface": "0.0.7",
     "@tensorflow/tfjs-converter": "3.21.0",

src/index.jsx

@@ -11,7 +11,7 @@ import ReactDOM from 'react-dom';
 import { Route, Routes, Outlet } from 'react-router-dom';
 
 import Header from '@edx/frontend-component-header';
-import Footer from '@edx/frontend-component-footer';
+import FooterSlot from './plugin-slots/FooterSlot';
 
 import configureStore from './data/configureStore';
 import AccountSettingsPage, { NotFoundPage } from './account-settings';
@@ -34,7 +34,7 @@ subscribe(APP_READY, () => {
             <main className="flex-grow-1" id="main">
               <Outlet />
             </main>
-            <Footer />
+            <FooterSlot />
           </div>
         )}
         >

src/plugin-slots/FooterSlot/README.md

@@ -0,0 +1,48 @@
+# Footer Slot
+
+### Slot ID: `footer_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the 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)
+
+```js
+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/FooterSlot/index.jsx

@@ -0,0 +1,10 @@
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import Footer from '@edx/frontend-component-footer';
+
+const FooterSlot = () => (
+  <PluginSlot id="footer_slot">
+    <Footer />
+  </PluginSlot>
+);
+
+export default FooterSlot;

src/plugin-slots/README.md

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