diff --git a/src/containers/CourseCard/components/CourseCardBanners/__snapshots__/index.test.jsx.snap b/src/containers/CourseCard/components/CourseCardBanners/__snapshots__/index.test.jsx.snap index 3da6b261a..dd664041f 100644 --- a/src/containers/CourseCard/components/CourseCardBanners/__snapshots__/index.test.jsx.snap +++ b/src/containers/CourseCard/components/CourseCardBanners/__snapshots__/index.test.jsx.snap @@ -8,7 +8,7 @@ exports[`CourseCardBanners render with isEnrolled false 1`] = ` - - { return (
- + {isEnrolled && } {isEnrolled && } diff --git a/src/plugin-slots/CourseBannerSlot/README.md b/src/plugin-slots/CourseBannerSlot/README.md new file mode 100644 index 000000000..aaf0a0acf --- /dev/null +++ b/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 }) => ( + + Course banner for course with {cardId} + + ), + }, + }, + ], + }, + }, +} + +export default config; +``` diff --git a/src/plugin-slots/CourseBannerSlot/images/course_banner_slot_default.png b/src/plugin-slots/CourseBannerSlot/images/course_banner_slot_default.png new file mode 100644 index 000000000..9098bcf78 Binary files /dev/null and b/src/plugin-slots/CourseBannerSlot/images/course_banner_slot_default.png differ diff --git a/src/plugin-slots/CourseBannerSlot/images/custom_course_banner.png b/src/plugin-slots/CourseBannerSlot/images/custom_course_banner.png new file mode 100644 index 000000000..405d38709 Binary files /dev/null and b/src/plugin-slots/CourseBannerSlot/images/custom_course_banner.png differ diff --git a/src/plugin-slots/CourseBannerSlot/index.jsx b/src/plugin-slots/CourseBannerSlot/index.jsx new file mode 100644 index 000000000..78bb52c99 --- /dev/null +++ b/src/plugin-slots/CourseBannerSlot/index.jsx @@ -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 }) => ( + + + +); + +CourseBannerSlot.propTypes = { + cardId: PropTypes.string.isRequired, +}; + +export default CourseBannerSlot;