feat: use PluginSlot to add your site logo to studio footer (#520)

Author: Faraz32123

package-lock.json

@@ -35,7 +35,6 @@
     "@edx/frontend-platform": "^8.2.1",
     "@edx/reactifex": "^2.1.1",
     "@openedx/frontend-build": "^14.3.1",
-    "@openedx/frontend-plugin-framework": "^1.5.0",
     "@openedx/paragon": "^23.3.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^16.2.0",
@@ -56,6 +55,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",
     "classnames": "^2.5.1",
     "jest-environment-jsdom": "^29.7.0",
     "lodash": "^4.17.21",

package.json

@@ -8,14 +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',
@@ -134,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://openedx.org" className="float-right">
-            <Image
-              width="120px"
-              alt="Powered by Open edX"
-              src="https://logos.openedx.org/open-edx-logo-tag.png"
-            />
-          </Hyperlink>
+          <StudioFooterLogoSlot />
         </ActionRow>
       </Container>
     </>

src/components/studio-footer/StudioFooter.jsx

@@ -0,0 +1,3 @@
+# `frontend-component-footer` Plugin Slots
+
+* [`studio_footer_logo_slot`](./StudioFooterLogoSlot/)

src/plugin-slots/README.md

@@ -0,0 +1,54 @@
+# StudioFooterLogo Slot
+
+### Slot ID: `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: {
+    studio_footer_logo_slot: {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'studio_footer_logo_slot',
+            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/README.md

@@ -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="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;