feat: use frontend-plugin-framework to provide a FooterSlot (#1017)

Author: brian-smith-tcril

README.rst

@@ -71,6 +71,12 @@ Profile MFE for local development via the `devstack`_.
 
 Once the dev server is up, visit http://localhost:1995/u/staff.
 
+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>`_.
+
 Configuration
 =============
 

package-lock.json

@@ -29,7 +29,6 @@
   ],
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-footer": "^14.0.0",
     "@edx/frontend-component-header": "5.3.1",
     "@edx/frontend-platform": "7.1.4",
     "@edx/openedx-atlas": "^0.6.0",
@@ -38,6 +37,7 @@
     "@fortawesome/free-regular-svg-icons": "6.5.2",
     "@fortawesome/free-solid-svg-icons": "6.5.2",
     "@fortawesome/react-fontawesome": "0.2.0",
+    "@openedx/frontend-slot-footer": "^1.0.2",
     "@openedx/paragon": "^22.2.2",
     "@pact-foundation/pact": "^11.0.2",
     "@redux-devtools/extension": "3.3.0",

package.json

@@ -17,7 +17,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import Header from '@edx/frontend-component-header';
-import Footer from '@edx/frontend-component-footer';
+import FooterSlot from '@openedx/frontend-slot-footer';
 
 import messages from './i18n';
 import configureStore from './data/configureStore';
@@ -35,7 +35,7 @@ subscribe(APP_READY, () => {
       <main id="main">
         <AppRoutes />
       </main>
-      <Footer />
+      <FooterSlot />
     </AppProvider>,
     document.getElementById('root'),
   );

src/index.jsx

@@ -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/FooterSlot/README.md

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