feat: course banner slot (#559)

Author: MaxFrank13

src/containers/CourseCard/components/CourseCardBanners/__snapshots__/index.test.jsx.snap

@@ -8,7 +8,7 @@ exports[`CourseCardBanners render with isEnrolled false 1`] = `
   <RelatedProgramsBanner
     cardId="test-card-id"
   />
-  <CourseBanner
+  <CourseBannerSlot
     cardId="test-card-id"
   />
   <EntitlementBanner
@@ -25,7 +25,7 @@ exports[`CourseCardBanners renders default CourseCardBanners 1`] = `
   <RelatedProgramsBanner
     cardId="test-card-id"
   />
-  <CourseBanner
+  <CourseBannerSlot
     cardId="test-card-id"
   />
   <EntitlementBanner

src/containers/CourseCard/components/CourseCardBanners/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import { reduxHooks } from 'hooks';
 
-import CourseBanner from './CourseBanner';
+import CourseBannerSlot from 'plugin-slots/CourseBannerSlot';
 import CertificateBanner from './CertificateBanner';
 import CreditBanner from './CreditBanner';
 import EntitlementBanner from './EntitlementBanner';
@@ -14,7 +14,7 @@ export const CourseCardBanners = ({ cardId }) => {
   return (
     <div className="course-card-banners" data-testid="CourseCardBanners">
       <RelatedProgramsBanner cardId={cardId} />
-      <CourseBanner cardId={cardId} />
+      <CourseBannerSlot cardId={cardId} />
       <EntitlementBanner cardId={cardId} />
       {isEnrolled && <CertificateBanner cardId={cardId} />}
       {isEnrolled && <CreditBanner cardId={cardId} />}

src/plugin-slots/CourseBannerSlot/README.md

@@ -0,0 +1,47 @@
+# Course Card Action Slot
+
+### Slot ID: `course_banner_slot`
+### Props:
+* `cardId`
+
+## Description
+
+This slot is used for replacing or adding content for the `CourseBanner` component. This banner is rendered as a child of the `CourseCard`.
+
+The default CourseBanner looks like this when audit access has expired for the course:
+![Screenshot of the default CourseBanner when audit access has expired](./images/course_banner_slot_default.png)
+
+## Example
+
+The following `env.config.jsx` will render a custom implemenation of a CourseBanner under every `CourseCard`.
+
+![Screenshot of custom banner added under CourseCard](./images/course_banner_slot_default.png)
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    course_banner_slot: {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_course_banner',
+            type: DIRECT_PLUGIN,
+            priority: 60,
+            RenderWidget: ({ cardId }) => (
+              <Alert variant="info" className="mb-0">
+                Course banner for course with {cardId}
+              </Alert>
+            ),
+          },
+        },
+      ],
+    },
+  },
+}
+
+export default config;
+```

src/plugin-slots/CourseBannerSlot/images/course_banner_slot_default.png

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import CourseBanner from 'containers/CourseCard/components/CourseCardBanners/CourseBanner';
+
+const CourseBannerSlot = ({ cardId }) => (
+  <PluginSlot
+    id="course_banner_slot"
+    pluginProps={{
+      cardId,
+    }}
+  >
+    <CourseBanner
+      cardId={cardId}
+    />
+  </PluginSlot>
+);
+
+CourseBannerSlot.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+
+export default CourseBannerSlot;