feat: provide FooterSlot

This allows consuming MFEs to utilize a standardized Frontend
Plugin Framework `PluginSlot` for replacing the footer.

.gitignore

@@ -10,3 +10,4 @@ src/i18n/transifex_input.json
 temp/babel-plugin-react-intl
 /.vscode
 module.config.js
+src/i18n/messages

.tx/config

@@ -1,9 +0,0 @@
-[main]
-host = https://www.transifex.com
-
-[o:open-edx:p:edx-platform:r:frontend-component-footer]
-file_filter = src/i18n/messages/<lang>.json
-source_file = src/i18n/transifex_input.json
-source_lang = en
-type        = KEYVALUEJSON
-

Makefile

@@ -1,6 +1,3 @@
-export TRANSIFEX_RESOURCE = frontend-component-footer
-transifex_langs = "ar,fr,es_419,zh_CN,pt,it,de,uk,ru,hi,fr_CA,it_IT,pt_PT,de_DE"
-
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
@@ -35,20 +32,6 @@ detect_changed_source_translations:
 	# Checking for changed translations...
 	git diff --exit-code $(i18n)
 
-# Pushes translations to Transifex.  You must run make extract_translations first.
-push_translations:
-	# Pushing strings to Transifex...
-	tx push -s
-	# Fetching hashes from Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
-	# Writing out comments to file...
-	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
-	# Pushing comments to Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
-
-# Pulls translations from Transifex.
-pull_translations:
-	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
 
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:

README.rst

@@ -85,6 +85,7 @@ This library has the following exports:
 * ``(default)``: The footer as a React component.
 * ``messages``: Internationalization messages suitable for use with `@edx/frontend-platform/i18n <https://edx.github.io/frontend-platform/module-Internationalization.html>`_
 * ``dist/footer.scss``: A SASS file which contains style information for the component.  It should be imported into the micro-frontend's own SCSS file.
+* ``FooterSlot``: The footer wrapped in a `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_ ``PluginSlot``.
 
 <Footer /> component props
 ==========================
@@ -93,6 +94,12 @@ This library has the following exports:
   language from its dropdown.
 * supportedLanguages: An array of objects representing available languages.  See example below for object shape.
 
+Plugin
+======
+This package provides a wrapped version of the footer using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
+
+Information on how to utilize the ``FooterSlot`` is available `here </src/components/footer-slot>`_.
+
 Examples
 ========
 
@@ -113,6 +120,8 @@ Component Usage Example::
 * `An example of minimal component and messages usage. <https://github.com/openedx/frontend-template-application/blob/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx#L23>`_
 * `An example of SCSS file usage. <https://github.com/openedx/frontend-template-application/blob/3cd5485bf387b8c479baf6b02bf59e3061dc3465/src/index.scss#L9>`_
 
+
+
 Development
 ===========
 

package.json

@@ -36,10 +36,11 @@
   "devDependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/browserslist-config": "^1.1.1",
-    "@openedx/frontend-build": "^13.0.19",
+    "@edx/frontend-platform": "8.0.1",
-    "@openedx/paragon": "22.0.0",
-    "@edx/frontend-platform": "6.2.0",
     "@edx/reactifex": "^2.1.1",
+    "@openedx/frontend-build": "14.0.3",
+    "@openedx/frontend-plugin-framework": "^1.1.2",
+    "@openedx/paragon": "22.3.2",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.1",
     "husky": "8.0.3",
@@ -47,24 +48,32 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-redux": "7.2.9",
-    "react-router-dom": "6.21.3",
+    "react-router-dom": "6.23.0",
     "react-test-renderer": "17.0.2",
     "redux": "4.2.1",
     "semantic-release": "21.1.2"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.5.1",
+    "@fortawesome/fontawesome-svg-core": "6.5.2",
-    "@fortawesome/free-brands-svg-icons": "6.5.1",
+    "@fortawesome/free-brands-svg-icons": "6.5.2",
-    "@fortawesome/free-regular-svg-icons": "6.5.1",
+    "@fortawesome/free-regular-svg-icons": "6.5.2",
-    "@fortawesome/free-solid-svg-icons": "6.5.1",
+    "@fortawesome/free-solid-svg-icons": "6.5.2",
     "@fortawesome/react-fontawesome": "0.2.0",
-    "lodash": "^4.17.21"
+    "jest-environment-jsdom": "^29.7.0",
+    "lodash": "^4.17.21",
+    "ts-jest": "^29.1.2"
   },
   "peerDependencies": {
-    "@edx/frontend-platform": "^7.0.0",
+    "@edx/frontend-platform": "^7.0.0 || ^8.0.0",
+    "@openedx/frontend-plugin-framework": "^1.1.2",
     "@openedx/paragon": ">= 21.11.3 < 23.0.0",
     "prop-types": "^15.5.10",
     "react": "^16.9.0 || ^17.0.0",
     "react-dom": "^16.9.0 || ^17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@openedx/frontend-plugin-framework": {
+      "optional": true
+    }
   }
 }

src/components/__snapshots__/Footer.test.jsx.snap

@@ -17,7 +17,7 @@ exports[`<Footer /> renders correctly renders with a language selector 1`] = `
         alt="Powered by Open edX"
         src="https://edx-cdn.org/v3/default/logo-trademark.svg"
         style={
-          Object {
+          {
             "maxHeight": 45,
           }
         }
@@ -86,7 +86,7 @@ exports[`<Footer /> renders correctly renders without a language selector 1`] =
         alt="Powered by Open edX"
         src="https://edx-cdn.org/v3/default/logo-trademark.svg"
         style={
-          Object {
+          {
             "maxHeight": 45,
           }
         }
@@ -116,7 +116,7 @@ exports[`<Footer /> renders correctly renders without a language selector in es
         alt="Powered by Open edX"
         src="https://edx-cdn.org/v3/default/logo-trademark.svg"
         style={
-          Object {
+          {
             "maxHeight": 45,
           }
         }

src/components/footer-slot/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/components/footer-slot/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import Footer from '../Footer';
+
+const FooterSlot = () => (
+  <PluginSlot id="footer_slot">
+    <Footer />
+  </PluginSlot>
+);
+
+export default FooterSlot;

src/i18n/index.js

@@ -1,34 +1 @@
-import arMessages from './messages/ar.json';
+export default {};
-import frMessages from './messages/fr.json';
-import es419Messages from './messages/es_419.json';
-import zhcnMessages from './messages/zh_CN.json';
-import ptMessages from './messages/pt.json';
-import itMessages from './messages/it.json';
-import ukMessages from './messages/uk.json';
-import deMessages from './messages/de.json';
-import ruMessages from './messages/ru.json';
-import hiMessages from './messages/hi.json';
-import frCAMessages from './messages/fr_CA.json';
-import dedeCAMessages from './messages/de_DE.json';
-import ititCAMessages from './messages/it_IT.json';
-import ptptCAMessages from './messages/pt_PT.json';
-// no need to import en messages-- they are in the defaultMessage field
-
-const messages = {
-  ar: arMessages,
-  'es-419': es419Messages,
-  fr: frMessages,
-  'zh-cn': zhcnMessages,
-  pt: ptMessages,
-  it: itMessages,
-  de: deMessages,
-  hi: hiMessages,
-  'fr-ca': frCAMessages,
-  ru: ruMessages,
-  uk: ukMessages,
-  'de-de': dedeCAMessages,
-  'it-it': ititCAMessages,
-  'pt-pt': ptptCAMessages,
-};
-
-export default messages;

src/i18n/messages/ar.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/de.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/de_DE.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/es_419.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/fr.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/fr_CA.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/hi.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/it.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/it_IT.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/pt.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/pt_PT.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/ru.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/uk.json

@@ -1 +0,0 @@
-{}

src/i18n/messages/zh_CN.json

@@ -1 +0,0 @@
-{}

src/index.js

@@ -1,6 +1,9 @@
 import Footer, { EVENT_NAMES } from './components/Footer';
 import messages from './i18n/index';
 import StudioFooter from './components/studio-footer';
+import FooterSlot from './components/footer-slot';
 
 export default Footer;
-export { messages, EVENT_NAMES, StudioFooter };
+export {
+  messages, EVENT_NAMES, StudioFooter, FooterSlot,
+};