feat: add another FooterSlot id alias (#523)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

README.rst

@@ -95,9 +95,9 @@ This library has the following exports:
 
 Plugin
 ======
-The footer can be replaced using using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
+The footer can be replaced or modified using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
 
-Information on how to utilize the ``FooterSlot`` component to do so is available in the `frontend-slot-footer repository <https://github.com/openedx/frontend-slot-footer/>`_.
+Information on how to replace or modify the footer is available `here </src/plugin-slots>`_.
 
 Examples
 ========

package-lock.json

@@ -14,7 +14,7 @@
         "@fortawesome/free-regular-svg-icons": "6.7.2",
         "@fortawesome/free-solid-svg-icons": "6.7.2",
         "@fortawesome/react-fontawesome": "0.2.2",
-        "@openedx/frontend-plugin-framework": "^1.5.0",
+        "@openedx/frontend-plugin-framework": "^1.7.0",
         "classnames": "^2.5.1",
         "jest-environment-jsdom": "^29.7.0",
         "lodash": "^4.17.21",
@@ -4048,9 +4048,9 @@
       }
     },
     "node_modules/@openedx/frontend-plugin-framework": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@openedx/frontend-plugin-framework/-/frontend-plugin-framework-1.6.0.tgz",
-      "integrity": "sha512-zgP+/hs/cvcPmFOgVm2xt/qgX1nheNsfipzCO7I3bON4hHyOhmOyzwFZJ7pz7GzCJwKlMVguh3HcJgf4p/BPKQ==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@openedx/frontend-plugin-framework/-/frontend-plugin-framework-1.7.0.tgz",
+      "integrity": "sha512-8tGkuHvtzhbqb9dU4sXUtR0K44+Hjh1uGR6DvhZAt9wSKQC1v4RBk34ef8DFzQhoNQa/Jtn6BJuta4Un6MmHmw==",
       "license": "AGPL-3.0",
       "dependencies": {
         "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
@@ -4114,9 +4114,9 @@
       }
     },
     "node_modules/@openedx/paragon": {
-      "version": "23.4.3",
-      "resolved": "https://registry.npmjs.org/@openedx/paragon/-/paragon-23.4.3.tgz",
-      "integrity": "sha512-twzFgkVZBZKDUhepqvdH1er+0uQSBGs/r1TDIGmN/zNjmc87g7RMbeDWF+j96eOaiTet9Wcv4JHoB3zE6VycFQ==",
+      "version": "23.4.5",
+      "resolved": "https://registry.npmjs.org/@openedx/paragon/-/paragon-23.4.5.tgz",
+      "integrity": "sha512-baBTZDO6hdCjI+Jj3oSQaz5GkFTR2TEs94pPMOls7bc/Fsv4zQIN8xDPo4NzAVo/2+3eSuEzUz3xzBeb+94rtw==",
       "license": "Apache-2.0",
       "workspaces": [
         "example",

package.json

@@ -10,6 +10,7 @@
     "build": "make build",
     "i18n_extract": "fedx-scripts formatjs extract",
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
+    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
     "start:with-theme": "paragon install-theme && npm start && npm install",
@@ -55,7 +56,7 @@
     "@fortawesome/free-regular-svg-icons": "6.7.2",
     "@fortawesome/free-solid-svg-icons": "6.7.2",
     "@fortawesome/react-fontawesome": "0.2.2",
-    "@openedx/frontend-plugin-framework": "^1.5.0",
+    "@openedx/frontend-plugin-framework": "^1.7.0",
     "classnames": "^2.5.1",
     "jest-environment-jsdom": "^29.7.0",
     "lodash": "^4.17.21",

src/components/Footer.test.jsx

@@ -7,6 +7,7 @@ import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
 
 import Footer from './Footer';
+import FooterSlot from '../plugin-slots/FooterSlot';
 
 const FooterWithContext = ({ locale = 'es' }) => {
   const contextValue = useMemo(() => ({
@@ -22,7 +23,7 @@ const FooterWithContext = ({ locale = 'es' }) => {
       <AppContext.Provider
         value={contextValue}
       >
-        <Footer />
+        <FooterSlot />
       </AppContext.Provider>
     </IntlProvider>
   );

src/components/studio-footer/StudioFooter.test.jsx

@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom/extend-expect';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
-import StudioFooter from './StudioFooter';
+import StudioFooterSlot from '../../plugin-slots/StudioFooterSlot';
 import messages from './messages';
 
 const config = {
@@ -36,7 +36,7 @@ const Component = ({ updateVariable }) => {
   return (
     <IntlProvider locale="en">
       <AppContext.Provider value={contextValue}>
-        <StudioFooter />
+        <StudioFooterSlot />
       </AppContext.Provider>
     </IntlProvider>
   );

src/index.js

@@ -1,8 +1,10 @@
 import Footer, { EVENT_NAMES } from './components/Footer';
 import messages from './i18n/index';
 import StudioFooter from './components/studio-footer';
+import FooterSlot from './plugin-slots/FooterSlot';
+import StudioFooterSlot from './plugin-slots/StudioFooterSlot';
 
 export default Footer;
 export {
-  messages, EVENT_NAMES, StudioFooter,
+  messages, EVENT_NAMES, StudioFooter, FooterSlot, StudioFooterSlot,
 };

src/plugin-slots/FooterSlot/README.md

@@ -0,0 +1,51 @@
+# FooterSlot
+
+### Slot ID: `org.openedx.frontend.layout.footer.v1`
+
+### Slot ID Aliases
+* `footer_slot`
+
+## Description
+
+This slot is used to repace/modify/hide the entire 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: {
+    'org.openedx.frontend.layout.footer.v1': {
+      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,14 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import Footer from '../../components/Footer';
+
+const FooterSlot = () => (
+  <PluginSlot
+    id="org.openedx.frontend.layout.footer.v1"
+    idAliases={['footer_slot', 'footer_plugin_slot']}
+  >
+    <Footer />
+  </PluginSlot>
+);
+
+export default FooterSlot;

src/plugin-slots/README.md

@@ -1,3 +1,5 @@
 # `frontend-component-footer` Plugin Slots
 
-* [`studio_footer_logo_slot`](./StudioFooterLogoSlot/)
+* [`org.openedx.frontend.layout.footer.v1`](./FooterSlot/)
+* [`org.openedx.frontend.layout.studio_footer.v1`](./StudioFooterSlot/)
+* [`org.openedx.frontend.layout.studio_footer_logo.v1`](./StudioFooterLogoSlot/)

src/plugin-slots/StudioFooterLogoSlot/README.md

@@ -1,6 +1,9 @@
-# StudioFooterLogo Slot
+# StudioFooterLogoSlot
 
-### Slot ID: `studio_footer_logo_slot`
+### Slot ID: `org.openedx.frontend.layout.studio_footer_logo.v1`
+
+### Slot ID Aliases
+* `studio_footer_logo_slot`
 
 ## Description
 
@@ -23,13 +26,13 @@ import {
 
 const config = {
   pluginSlots: {
-    studio_footer_logo_slot: {
+    'org.openedx.frontend.layout.studio_footer_logo.v1': {
       keepDefault: true,
       plugins: [
         {
           op: PLUGIN_OPERATIONS.Insert,
           widget: {
-            id: 'studio_footer_logo_slot',
+            id: 'studio_footer_logo_addition',
             type: DIRECT_PLUGIN,
             priority: 40,
             RenderWidget: () => {

src/plugin-slots/StudioFooterLogoSlot/index.jsx

@@ -3,7 +3,7 @@ import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import { Hyperlink, Image } from '@openedx/paragon';
 
 const StudioFooterLogoSlot = () => (
-  <PluginSlot id="studio_footer_logo_slot">
+  <PluginSlot id="org.openedx.frontend.layout.studio_footer_logo.v1" idAliases={['studio_footer_logo_slot']}>
     <Hyperlink destination="https://openedx.org" className="float-right">
       <Image
         width="120px"

src/plugin-slots/StudioFooterSlot/README.md

@@ -0,0 +1,51 @@
+# StudioFooterSlot
+
+### Slot ID: `org.openedx.frontend.layout.studio_footer.v1`
+
+### Slot ID Aliases
+* `studio_footer_slot`
+
+## Description
+
+This slot is used to repace/modify/hide the entire studio footer.
+
+## Example
+
+The following `env.config.jsx` will replace the default studio footer.
+
+![Screenshot of default studio footer](./images/default_studio_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: {
+    'org.openedx.frontend.layout.studio_footer.v1': {
+      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/StudioFooterSlot/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import StudioFooter from '../../components/studio-footer';
+
+const StudioFooterSlot = () => (
+  <PluginSlot id="org.openedx.frontend.layout.studio_footer.v1" idAliases={['studio_footer_slot']}>
+    <StudioFooter />
+  </PluginSlot>
+);
+
+export default StudioFooterSlot;