feat: provide FooterSlot

This allows consuming MFEs to utilize a standardized Frontend Plugin Framework `PluginSlot` for replacing the footer.
chore(deps): update dependency @openedx/paragon to v22.3.2
2024-05-09 13:44:51 -03:00 · 2024-05-06 06:47:39 +00:00 · 2024-04-29 09:52:14 +00:00 · 2024-04-29 06:25:16 +00:00 · 2024-04-29 04:40:18 +00:00
8 changed files with 195 additions and 38 deletions
--- a/README.rst
+++ b/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
 ===========

--- a/package-lock.json
+++ b/package-lock.json
@@ -21,10 +21,11 @@
      "devDependencies": {
        "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
        "@edx/browserslist-config": "^1.1.1",
-        "@edx/frontend-platform": "8.0.0",
+        "@edx/frontend-platform": "8.0.1",
        "@edx/reactifex": "^2.1.1",
        "@openedx/frontend-build": "14.0.3",
-        "@openedx/paragon": "22.2.2",
+        "@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",
@@ -32,17 +33,23 @@
        "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"
      },
      "peerDependencies": {
        "@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
+        }
      }
    },
    "node_modules/@aashutoshrathi/word-wrap": {
@@ -1993,15 +2000,15 @@
      }
    },
    "node_modules/@edx/frontend-platform": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-8.0.0.tgz",
-      "integrity": "sha512-vcjo4khqi8Y3tUdhqfQ0iyJFg/kPFpuBjeDrs6nsLh5e8RT5ZGX4ImXhsdOAzJShcxapHHp3jrCtkmocslhP7g==",
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-8.0.1.tgz",
+      "integrity": "sha512-DzOl9h4QQOYUY6X9Bmd3AnboWVUy4vglGNCZFqPFYTIN29zFF3R/E8XtvS8NaJK8qQmNQrZUBWBGu0qLuMsFGA==",
      "dev": true,
      "dependencies": {
        "@cospired/i18n-iso-languages": "4.2.0",
        "@formatjs/intl-pluralrules": "4.3.3",
        "@formatjs/intl-relativetimeformat": "10.0.1",
-        "axios": "0.28.0",
+        "axios": "0.28.1",
        "axios-cache-interceptor": "0.10.7",
        "form-urlencoded": "4.1.4",
        "glob": "7.2.3",
@@ -4145,11 +4152,57 @@
      "dev": true,
      "license": "ISC"
    },
-    "node_modules/@openedx/paragon": {
-      "version": "22.2.2",
-      "resolved": "https://registry.npmjs.org/@openedx/paragon/-/paragon-22.2.2.tgz",
-      "integrity": "sha512-kHljO3JjLQzkk16aOIUN+LbSVMF9a6jkO0G9CmAYhYRDZMpWlP8qUz5uWk7pJvQdCoqD2dL9Cp9YqhWLXCa2kQ==",
+    "node_modules/@openedx/frontend-plugin-framework": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@openedx/frontend-plugin-framework/-/frontend-plugin-framework-1.1.2.tgz",
+      "integrity": "sha512-DzhkZTbmxX09xXE6yyWs9xSq40cO+CgFF80nq1M7pJAeY0mtv7TWlQT8/YnhmjHS3Kj1u9GdqpRpYu8vHuRurA==",
      "dev": true,
+      "dependencies": {
+        "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+        "classnames": "^2.3.2",
+        "core-js": "3.36.0",
+        "react-redux": "7.2.9",
+        "redux": "4.2.1",
+        "regenerator-runtime": "0.14.1"
+      },
+      "peerDependencies": {
+        "@edx/frontend-platform": "^7.0.0 || ^8.0.0",
+        "@openedx/paragon": "^21.0.0 || ^22.0.0",
+        "prop-types": "^15.8.0",
+        "react": "^17.0.0",
+        "react-dom": "^17.0.0",
+        "react-error-boundary": "^4.0.11"
+      }
+    },
+    "node_modules/@openedx/frontend-plugin-framework/node_modules/core-js": {
+      "version": "3.36.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.36.0.tgz",
+      "integrity": "sha512-mt7+TUBbTFg5+GngsAxeKBTl5/VS0guFeJacYge9OmHb+m058UwwIm41SE9T4Den7ClatV57B6TYTuJ0CX1MAw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/@openedx/frontend-plugin-framework/node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "dev": true
+    },
+    "node_modules/@openedx/paragon": {
+      "version": "22.3.2",
+      "resolved": "https://registry.npmjs.org/@openedx/paragon/-/paragon-22.3.2.tgz",
+      "integrity": "sha512-MDDGvX3DuMAYjGUwNFrdkdXOCpm0+ZqkCaJ/d18KAIuz0CwOxgZdOlmz/aWfL410G1DKAAzrVYK2ukXxv/B+3Q==",
+      "dev": true,
+      "workspaces": [
+        "example",
+        "component-generator",
+        "www",
+        "icons",
+        "dependent-usage-analyzer"
+      ],
      "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^6.1.1",
        "@fortawesome/react-fontawesome": "^0.1.18",
@@ -4192,8 +4245,9 @@
    },
    "node_modules/@openedx/paragon/node_modules/@fortawesome/react-fontawesome": {
      "version": "0.1.19",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.19.tgz",
+      "integrity": "sha512-Hyb+lB8T18cvLNX0S3llz7PcSOAJMLwiVKBuuzwM/nI5uoBw+gQjnf9il0fR1C3DKOI5Kc79pkJ4/xB0Uw9aFQ==",
      "dev": true,
-      "license": "MIT",
      "dependencies": {
        "prop-types": "^15.8.1"
      },
@@ -4204,8 +4258,9 @@
    },
    "node_modules/@openedx/paragon/node_modules/ansi-styles": {
      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
      "dev": true,
-      "license": "MIT",
      "dependencies": {
        "color-convert": "^2.0.1"
      },
@@ -4218,16 +4273,18 @@
    },
    "node_modules/@openedx/paragon/node_modules/brace-expansion": {
      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
      "dev": true,
-      "license": "MIT",
      "dependencies": {
        "balanced-match": "^1.0.0"
      }
    },
    "node_modules/@openedx/paragon/node_modules/chalk": {
      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
      "dev": true,
-      "license": "MIT",
      "dependencies": {
        "ansi-styles": "^4.1.0",
        "supports-color": "^7.1.0"
@@ -4241,8 +4298,9 @@
    },
    "node_modules/@openedx/paragon/node_modules/color-convert": {
      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
      "dev": true,
-      "license": "MIT",
      "dependencies": {
        "color-name": "~1.1.4"
      },
@@ -4252,13 +4310,15 @@
    },
    "node_modules/@openedx/paragon/node_modules/color-name": {
      "version": "1.1.4",
-      "dev": true,
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
    },
    "node_modules/@openedx/paragon/node_modules/glob": {
      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
+      "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
      "dev": true,
-      "license": "ISC",
      "dependencies": {
        "fs.realpath": "^1.0.0",
        "inflight": "^1.0.4",
@@ -4275,16 +4335,18 @@
    },
    "node_modules/@openedx/paragon/node_modules/has-flag": {
      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
      "dev": true,
-      "license": "MIT",
      "engines": {
        "node": ">=8"
      }
    },
    "node_modules/@openedx/paragon/node_modules/minimatch": {
      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+      "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
      "dev": true,
-      "license": "ISC",
      "dependencies": {
        "brace-expansion": "^2.0.1"
      },
@@ -4294,8 +4356,9 @@
    },
    "node_modules/@openedx/paragon/node_modules/supports-color": {
      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
      "dev": true,
-      "license": "MIT",
      "dependencies": {
        "has-flag": "^4.0.0"
      },
@@ -4404,9 +4467,10 @@
      }
    },
    "node_modules/@remix-run/router": {
-      "version": "1.14.2",
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz",
+      "integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==",
      "dev": true,
-      "license": "MIT",
      "engines": {
        "node": ">=14.0.0"
      }
@@ -7230,9 +7294,9 @@
      }
    },
    "node_modules/axios": {
-      "version": "0.28.0",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.28.0.tgz",
-      "integrity": "sha512-Tu7NYoGY4Yoc7I+Npf9HhUMtEEpV7ZiLH9yndTCoNhcpBH0kwcvFbzYN9/u5QKI5A6uefjsNNWaz5olJVYS62Q==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.28.1.tgz",
+      "integrity": "sha512-iUcGA5a7p0mVb4Gm/sy+FSECNkPFT4y7wt6OM/CDpO/OnNCvSs3PoMG8ibrC9jRoGYU0gUK5pXVC4NPXq6lHRQ==",
      "dev": true,
      "dependencies": {
        "follow-redirects": "^1.15.0",
@@ -21330,6 +21394,19 @@
        "react": ">= 16.8 || 18.0.0"
      }
    },
+    "node_modules/react-error-boundary": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.13.tgz",
+      "integrity": "sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
    "node_modules/react-error-overlay": {
      "version": "6.0.11",
      "dev": true,
@@ -21617,11 +21694,12 @@
      }
    },
    "node_modules/react-router": {
-      "version": "6.21.3",
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz",
+      "integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==",
      "dev": true,
-      "license": "MIT",
      "dependencies": {
-        "@remix-run/router": "1.14.2"
+        "@remix-run/router": "1.16.0"
      },
      "engines": {
        "node": ">=14.0.0"
@@ -21631,12 +21709,13 @@
      }
    },
    "node_modules/react-router-dom": {
-      "version": "6.21.3",
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz",
+      "integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==",
      "dev": true,
-      "license": "MIT",
      "dependencies": {
-        "@remix-run/router": "1.14.2",
-        "react-router": "6.21.3"
+        "@remix-run/router": "1.16.0",
+        "react-router": "6.23.0"
      },
      "engines": {
        "node": ">=14.0.0"
--- a/package.json
+++ b/package.json
@@ -36,10 +36,11 @@
  "devDependencies": {
    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
    "@edx/browserslist-config": "^1.1.1",
-    "@edx/frontend-platform": "8.0.0",
+    "@edx/frontend-platform": "8.0.1",
    "@edx/reactifex": "^2.1.1",
    "@openedx/frontend-build": "14.0.3",
-    "@openedx/paragon": "22.2.2",
+    "@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,7 +48,7 @@
    "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"
@@ -64,9 +65,15 @@
  },
  "peerDependencies": {
    "@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
+    }
  }
 }
--- a/src/components/footer-slot/README.md
+++ b/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;
+```
--- a/src/components/footer-slot/images/custom_footer.png
+++ b/src/components/footer-slot/images/custom_footer.png
--- a/src/components/footer-slot/images/default_footer.png
+++ b/src/components/footer-slot/images/default_footer.png
--- a/src/components/footer-slot/index.jsx
+++ b/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;
--- a/src/index.js
+++ b/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,
+};
Author	SHA1	Message	Date
Brian Smith	0d4ea96874	feat: provide `FooterSlot` This allows consuming MFEs to utilize a standardized Frontend Plugin Framework `PluginSlot` for replacing the footer.	2024-05-09 13:44:51 -03:00
renovate[bot]	8b9f5fa348	chore(deps): update dependency @openedx/paragon to v22.3.2	2024-05-06 06:47:39 +00:00
renovate[bot]	c014e30ca8	chore(deps): update dependency react-router-dom to v6.23.0	2024-04-29 09:52:14 +00:00
renovate[bot]	0e6ab3c358	chore(deps): update dependency @openedx/paragon to v22.3.1	2024-04-29 06:25:16 +00:00
renovate[bot]	7d0a126580	chore(deps): update dependency @edx/frontend-platform to v8.0.1	2024-04-29 04:40:18 +00:00