feat: add another FooterSlot id alias (#523)

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

.github/workflows/ci.yml

@@ -14,12 +14,10 @@ jobs:
       uses: actions/checkout@v4
       with:
         fetch-depth: 0
-    - name: Setup Nodejs Env
-      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
     - name: Setup Nodejs
       uses: actions/setup-node@v4
       with:
-        node-version: ${{ env.NODE_VER }}
+        node-version-file: '.nvmrc'
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes
@@ -33,4 +31,7 @@ jobs:
     - name: i18n_extract
       run: npm run i18n_extract
     - name: Coverage
-      uses: codecov/codecov-action@v3
+      uses: codecov/codecov-action@v4
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
+        fail_ci_if_error: true

.github/workflows/lockfileversion-check.yml

@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: openedx/.github/.github/workflows/lockfile-check.yml@master
+    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master

.github/workflows/release.yml

@@ -30,7 +30,10 @@ jobs:
     - name: i18n_extract
       run: npm run i18n_extract
     - name: Coverage
-      uses: codecov/codecov-action@v3
+      uses: codecov/codecov-action@v4
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
+        fail_ci_if_error: false
     - name: Build
       run: npm run build
     - name: Release

.gitignore

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

.nvmrc

@@ -1 +1 @@
-18
+20

.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

@@ -93,6 +93,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
+======
+The footer can be replaced or modified using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
+
+Information on how to replace or modify the footer is available `here </src/plugin-slots>`_.
+
 Examples
 ========
 
@@ -113,6 +119,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
 ===========
 

catalog-info.yaml

@@ -0,0 +1,14 @@
+# This file records information about this repo. Its use is described in OEP-55:
+# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
+
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: "frontend-component-footer"
+  description: "A generic footer for the Open edX micro-frontend applications."
+  annotations:
+    openedx.org/arch-interest-groups: ""
+spec:
+  owner: group:committers-frontend
+  type: "library"
+  lifecycle: "production"

example/index.scss

@@ -1,6 +1,4 @@
-@import "@edx/brand/paragon/fonts";
+@use "@openedx/paragon/dist/core.min.css" as paragonCore;
-@import "@edx/brand/paragon/variables";
+@use "@openedx/paragon/dist/light.min.css" as paragonLight;
-@import "@openedx/paragon/scss/core/core";
-@import "@edx/brand/paragon/overrides";
 
 @import "@edx/frontend-component-footer/footer";

openedx.yaml

@@ -1,8 +0,0 @@
-# openedx.yaml
-
----
-owner: edx/fedx-team
-tags:
-  - library
-  - component
-  - react

package.json

@@ -10,19 +10,16 @@
     "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",
-    "test": "fedx-scripts jest"
+    "test": "fedx-scripts jest --coverage",
+    "test:watch": "npm run test -- --watch"
   },
   "files": [
     "/dist"
   ],
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint"
-    }
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/openedx/frontend-component-footer.git"
@@ -36,35 +33,40 @@
   "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.2.1",
-    "@openedx/paragon": "22.0.0",
-    "@edx/frontend-platform": "6.2.0",
     "@edx/reactifex": "^2.1.1",
+    "@openedx/frontend-build": "^14.3.1",
+    "@openedx/paragon": "^23.3.0",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^12.1.1",
+    "@testing-library/react": "^16.2.0",
-    "husky": "8.0.3",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/user-event": "^14.6.1",
     "prop-types": "15.8.1",
-    "react": "17.0.2",
+    "react": "^18.3.1",
-    "react-dom": "17.0.2",
+    "react-dom": "^18.3.1",
-    "react-redux": "7.2.9",
+    "react-redux": "8.1.3",
-    "react-router-dom": "6.21.3",
+    "react-router-dom": "6.30.0",
-    "react-test-renderer": "17.0.2",
+    "react-test-renderer": "18.3.1",
     "redux": "4.2.1",
     "semantic-release": "21.1.2"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.5.1",
+    "@fortawesome/fontawesome-svg-core": "6.7.2",
-    "@fortawesome/free-brands-svg-icons": "6.5.1",
+    "@fortawesome/free-brands-svg-icons": "6.7.2",
-    "@fortawesome/free-regular-svg-icons": "6.5.1",
+    "@fortawesome/free-regular-svg-icons": "6.7.2",
-    "@fortawesome/free-solid-svg-icons": "6.5.1",
+    "@fortawesome/free-solid-svg-icons": "6.7.2",
-    "@fortawesome/react-fontawesome": "0.2.0",
+    "@fortawesome/react-fontawesome": "0.2.2",
-    "lodash": "^4.17.21"
+    "@openedx/frontend-plugin-framework": "^1.7.0",
+    "classnames": "^2.5.1",
+    "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/paragon": ">= 21.11.3 < 23.0.0",
+    "@openedx/paragon": ">= 21.11.3 < 24.0.0",
     "prop-types": "^15.5.10",
-    "react": "^16.9.0 || ^17.0.0",
+    "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.9.0 || ^17.0.0"
+    "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0"
   }
 }

src/_footer.scss

@@ -1,5 +1,5 @@
 $gray-footer: #fcfcfc !default;
 
 .footer {
-  background-color: $gray-footer;
+  background-color: var(--pgn-color-light-100, $gray-footer);
 }

src/components/Footer.test.jsx

@@ -1,11 +1,13 @@
 /* eslint-disable react/prop-types */
 import React, { useMemo } from 'react';
 import renderer from 'react-test-renderer';
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 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(() => ({
@@ -21,7 +23,7 @@ const FooterWithContext = ({ locale = 'es' }) => {
       <AppContext.Provider
         value={contextValue}
       >
-        <Footer />
+        <FooterSlot />
       </AppContext.Provider>
     </IntlProvider>
   );
@@ -76,19 +78,13 @@ describe('<Footer />', () => {
   });
 
   describe('handles language switching', () => {
-    it('calls onLanguageSelected prop when a language is changed', () => {
+    it('calls onLanguageSelected prop when a language is changed', async () => {
+      const user = userEvent.setup();
       const mockHandleLanguageSelected = jest.fn();
       render(<FooterWithLanguageSelector languageSelected={mockHandleLanguageSelected} />);
 
-      fireEvent.submit(screen.getByTestId('site-footer-submit-btn'), {
+      await user.selectOptions(screen.getByRole('combobox'), 'es');
-        target: {
+      await user.click(screen.getByTestId('site-footer-submit-btn'));
-          elements: {
-            'site-footer-language-select': {
-              value: 'es',
-            },
-          },
-        },
-      });
 
       expect(mockHandleLanguageSelected).toHaveBeenCalledWith('es');
     });

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/studio-footer/StudioFooter.jsx

@@ -1,6 +1,6 @@
 import React, { useContext, useState } from 'react';
-import _ from 'lodash';
+import isEmpty from 'lodash/isEmpty';
-import { intlShape, injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { ensureConfig } from '@edx/frontend-platform';
 import { AppContext } from '@edx/frontend-platform/react';
 import {
@@ -8,11 +8,14 @@ import {
   Button,
   Container,
   Hyperlink,
-  Image,
   TransitionReplace,
 } from '@openedx/paragon';
 import { ExpandLess, ExpandMore, Help } from '@openedx/paragon/icons';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
 import messages from './messages';
+import StudioFooterLogoSlot from '../../plugin-slots/StudioFooterLogoSlot';
 
 ensureConfig([
   'LMS_BASE_URL',
@@ -26,12 +29,14 @@ ensureConfig([
 ], 'Studio Footer component');
 
 const StudioFooter = ({
-  // injected
+  containerProps,
-  intl,
 }) => {
+  const intl = useIntl();
   const [isOpen, setIsOpen] = useState(false);
   const { config } = useContext(AppContext);
 
+  const { containerClassName, ...restContainerProps } = containerProps || {};
+
   return (
     <>
       <div className="m-0 mt-6 row align-items-center justify-content-center">
@@ -49,17 +54,21 @@ const StudioFooter = ({
         </Button>
         <div className="col border-top ml-2" />
       </div>
-      <Container size="xl" className="px-4">
+      <Container
+        size="xl"
+        className={classNames('px-4', containerClassName)}
+        {...restContainerProps}
+      >
         <TransitionReplace>
           {isOpen ? (
             <ActionRow key="help-link-button-row" className="py-4" data-testid="helpButtonRow">
               <ActionRow.Spacer />
-              <Button as="a" href="https://docs.edx.org/" size="sm">
+              <Button as="a" href="https://docs.openedx.org/" size="sm">
                 <FormattedMessage {...messages.edxDocumentationButtonLabel} />
               </Button>
               <Button
                 as="a"
-                href="https://open.edx.org/"
+                href="https://openedx.org/"
                 size="sm"
                 data-testid="openEdXPortalButton"
               >
@@ -79,7 +88,7 @@ const StudioFooter = ({
               >
                 <FormattedMessage {...messages.studioXButtonLabel} />
               </Button>
-              {!_.isEmpty(config.SUPPORT_EMAIL) && (
+              {!isEmpty(config.SUPPORT_EMAIL) && (
                 <Button
                   as="a"
                   href={`mailto:${config.SUPPORT_EMAIL}`}
@@ -96,11 +105,11 @@ const StudioFooter = ({
         <ActionRow className="pt-3 m-0 x-small">
           © {new Date().getFullYear()} <Hyperlink destination={config.MARKETING_SITE_BASE_URL} target="_blank" className="ml-2">{config.SITE_NAME}</Hyperlink>
           <ActionRow.Spacer />
-          {!_.isEmpty(config.TERMS_OF_SERVICE_URL) && (
+          {!isEmpty(config.TERMS_OF_SERVICE_URL) && (
             <Hyperlink destination={config.TERMS_OF_SERVICE_URL} data-testid="termsOfService">
               {intl.formatMessage(messages.termsOfServiceLinkLabel)}
             </Hyperlink>
-          )}{!_.isEmpty(config.PRIVACY_POLICY_URL) && (
+          )}{!isEmpty(config.PRIVACY_POLICY_URL) && (
             <Hyperlink destination={config.PRIVACY_POLICY_URL} data-testid="privacyPolicy">
               {intl.formatMessage(messages.privacyPolicyLinkLabel)}
             </Hyperlink>
@@ -125,13 +134,7 @@ const StudioFooter = ({
           <FormattedMessage {...messages.trademarkMessage} />
           <Hyperlink className="ml-1" destination="https://www.edx.org">edX Inc</Hyperlink>.
           <ActionRow.Spacer />
-          <Hyperlink destination="https://open.edx.org" className="float-right">
+          <StudioFooterLogoSlot />
-            <Image
-              width="120px"
-              alt="Powered by Open edX"
-              src="https://logos.openedx.org/open-edx-logo-tag.png"
-            />
-          </Hyperlink>
         </ActionRow>
       </Container>
     </>
@@ -139,8 +142,11 @@ const StudioFooter = ({
 };
 
 StudioFooter.propTypes = {
-  // injected
+  containerProps: PropTypes.shape(Container.propTypes),
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(StudioFooter);
+StudioFooter.defaultProps = {
+  containerProps: {},
+};
+
+export default StudioFooter;

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

@@ -1,10 +1,11 @@
 /* eslint-disable react/prop-types */
 import React, { useMemo } from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+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 = {
@@ -35,7 +36,7 @@ const Component = ({ updateVariable }) => {
   return (
     <IntlProvider locale="en">
       <AppContext.Provider value={contextValue}>
-        <StudioFooter />
+        <StudioFooterSlot />
       </AppContext.Provider>
     </IntlProvider>
   );
@@ -56,35 +57,40 @@ describe('Footer', () => {
     });
   });
   describe('help section expanded view', () => {
-    it('help button should read Hide Studio help', () => {
+    it('help button should read Hide Studio help', async () => {
+      const user = userEvent.setup();
       render(<Component />);
       const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      fireEvent.click(helpToggleButton);
+      await user.click(helpToggleButton);
       expect(screen.getByText(messages.closeHelpButtonLabel.defaultMessage))
         .toBeVisible();
     });
-    it('help button link row should be visible', () => {
+    it('help button link row should be visible', async () => {
+      const user = userEvent.setup();
       render(<Component />);
       const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      fireEvent.click(helpToggleButton);
+      await user.click(helpToggleButton);
       expect(screen.getByTestId('helpButtonRow')).toBeVisible();
     });
-    it('Open edX portal button should be visible', () => {
+    it('Open edX portal button should be visible', async () => {
+      const user = userEvent.setup();
       render(<Component />);
       const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      fireEvent.click(helpToggleButton);
+      await user.click(helpToggleButton);
       expect(screen.getByTestId('openEdXPortalButton')).toBeVisible();
     });
-    it('should not show contact us button', () => {
+    it('should not show contact us button', async () => {
+      const user = userEvent.setup();
       render(<Component />);
       const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      fireEvent.click(helpToggleButton);
+      await user.click(helpToggleButton);
       expect(screen.queryByTestId('contactUsButton')).toBeNull();
     });
-    it('should show contact us button', () => {
+    it('should show contact us button', async () => {
+      const user = userEvent.setup();
       render(<Component updateVariable={['SUPPORT_EMAIL', 'support@email.com']} />);
       const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      fireEvent.click(helpToggleButton);
+      await user.click(helpToggleButton);
       expect(screen.getByTestId('contactUsButton')).toBeVisible();
     });
   });

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,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 };
+export {
+  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

@@ -0,0 +1,5 @@
+# `frontend-component-footer` Plugin Slots
+
+* [`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

@@ -0,0 +1,57 @@
+# StudioFooterLogoSlot
+
+### Slot ID: `org.openedx.frontend.layout.studio_footer_logo.v1`
+
+### Slot ID Aliases
+* `studio_footer_logo_slot`
+
+## Description
+
+This slot is used to add your site logo to the studio footer.
+
+## Examples
+
+### Add your site logo.
+
+The following `env.config.jsx` will add your site logo to the studio footer.
+
+![Screenshot of modified Studio Footer Logo](./images/add_your_site_logo.png)
+
+```jsx
+import { PLUGIN_OPERATIONS, DIRECT_PLUGIN } from '@openedx/frontend-plugin-framework';
+import {
+  Hyperlink,
+  Image,
+} from '@openedx/paragon';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.studio_footer_logo.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'studio_footer_logo_addition',
+            type: DIRECT_PLUGIN,
+            priority: 40,
+            RenderWidget: () => {
+              return (
+                <Hyperlink destination="https://example.com/" className="float-right">
+                  <Image
+                    height="48px"
+                    alt="Hosted by MySite"
+                    src="https://logos.openedx.org/generic-logo.svg"
+                  />
+                </Hyperlink>
+              )
+            }
+          }
+        },
+      ],
+    }
+  },
+};
+
+export default config;
+```

src/plugin-slots/StudioFooterLogoSlot/index.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import { Hyperlink, Image } from '@openedx/paragon';
+
+const StudioFooterLogoSlot = () => (
+  <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"
+        alt="Powered by Open edX"
+        src="https://logos.openedx.org/open-edx-logo-tag.png"
+      />
+    </Hyperlink>
+  </PluginSlot>
+);
+
+export default StudioFooterLogoSlot;

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;

webpack.dev.config.js

@@ -2,7 +2,9 @@ const path = require('path');
 const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('webpack-dev', {
-  entry: path.resolve(__dirname, 'example'),
+  entry: {
+    app: path.resolve(__dirname, 'example'),
+  },
   output: {
     path: path.resolve(__dirname, 'example/dist'),
     publicPath: '/',