diff --git a/src/plugin-slots/PageBannerSlot/Readme.md b/src/plugin-slots/PageBannerSlot/Readme.md new file mode 100644 index 0000000000..234b762876 --- /dev/null +++ b/src/plugin-slots/PageBannerSlot/Readme.md @@ -0,0 +1,52 @@ +# Page Banner Slot + +### Slot ID: `org.openedx.frontend.authoring.page_banner.v1` + +### Slot ID Aliases +* `page_banner_slot` + +## Description + +This slot wraps the Paragon `PageBanner` component to allow plugins to replace, modify, or hide the banner shown on pages like Schedule & Details. By default, it renders the standard `PageBanner` with the provided props and children. + +## Example + +The following `env.config.jsx` example replaces the default banner message with a custom message. + +![Screenshot of Custom Page Banner](./screenshot_custom_banner_msg.png) + +```jsx +import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; + +const config = { + pluginSlots: { + 'org.openedx.frontend.authoring.page_banner.v1': { + plugins: [ + { + // Hide the default banner contents + op: PLUGIN_OPERATIONS.Hide, + widgetId: 'default_contents', + }, + { + // Insert a custom banner contents + op: PLUGIN_OPERATIONS.Insert, + widget: { + id: 'custom_page_banner_contents', + type: DIRECT_PLUGIN, + RenderWidget: () => ( + <> +

Custom Banner Title

+ + This message was injected via the PageBanner plugin slot. + + + ), + }, + }, + ], + }, + }, +}; + +export default config; +``` \ No newline at end of file diff --git a/src/plugin-slots/PageBannerSlot/index.tsx b/src/plugin-slots/PageBannerSlot/index.tsx new file mode 100644 index 0000000000..c174838559 --- /dev/null +++ b/src/plugin-slots/PageBannerSlot/index.tsx @@ -0,0 +1,45 @@ +import React, { ReactNode } from 'react'; +import { PluginSlot } from '@openedx/frontend-plugin-framework'; +import { PageBanner } from '@openedx/paragon'; + +export interface PageBannerSlotProps { + show: boolean; + dismissible: boolean; + onDismiss: () => void; + className: string; + children: ReactNode; + variant?: string; + dismissAltText?: string; +} + +const PageBannerSlot: React.FC = ({ + show, + dismissible, + onDismiss, + className, + children, + variant = 'info', + dismissAltText = 'Dismiss', +}) => ( + +
+ + {children} + +
+
+); + +export default PageBannerSlot; diff --git a/src/plugin-slots/PageBannerSlot/screenshot_custom_banner_msg.png b/src/plugin-slots/PageBannerSlot/screenshot_custom_banner_msg.png new file mode 100644 index 0000000000..59ae560bff Binary files /dev/null and b/src/plugin-slots/PageBannerSlot/screenshot_custom_banner_msg.png differ diff --git a/src/schedule-and-details/basic-section/index.jsx b/src/schedule-and-details/basic-section/index.jsx index 57146d3350..b3628b1a69 100644 --- a/src/schedule-and-details/basic-section/index.jsx +++ b/src/schedule-and-details/basic-section/index.jsx @@ -2,8 +2,9 @@ import React, { useState } from 'react'; import PropTypes from 'prop-types'; import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n'; import { - PageBanner, Button, Card, MailtoLink, Hyperlink, + Button, Card, MailtoLink, Hyperlink, } from '@openedx/paragon'; +import PageBannerSlot from '@src/plugin-slots/PageBannerSlot'; import { Email as EmailIcon } from '@openedx/paragon/icons'; import SectionSubHeader from '../../generic/section-sub-header'; @@ -78,7 +79,7 @@ const BasicSection = ({ ); const renderPageBanner = () => ( - setShowPageBanner(false)} @@ -88,7 +89,7 @@ const BasicSection = ({ {intl.formatMessage(messages.basicBannerText)} - + ); const renderCoursePromotion = () => (