feat: add frontend-plugin-framework header slot (#1504)

src/plugin-slots/HeaderSlot/README.md

@@ -0,0 +1,51 @@
+# Header Slot
+
+### Slot ID: `header_slot`
+### Props:
+* `courseOrg`
+* `courseNumber`
+* `courseTitle`
+* `showUserDropdown`
+
+## Description
+
+This slot is used to replace/modify/hide the entire learning header.
+
+## Example
+
+The following `env.config.jsx` will replace the learning header entirely.
+
+![Screenshot of custom component](./images/header_custom_component.png)
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    header_slot: {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_header_component',
+            type: DIRECT_PLUGIN,
+            RenderWidget: ({courseOrg, courseNumber, courseTitle, showUserDropdown}) => (
+              <>
+                <h1 style={{textAlign: 'center'}}>🌞</h1>
+                <p style={{textAlign: 'center'}}>courseOrg: {courseOrg}</p>
+                <p style={{textAlign: 'center'}}>courseNumber: {courseNumber}</p>
+                <p style={{textAlign: 'center'}}>courseTitle: {courseTitle}</p>
+                <p style={{textAlign: 'center'}}>showUserDropdown: {showUserDropdown ? '👍' : '👎'}</p>
+                <h1 style={{textAlign: 'center'}}>🌚</h1>
+              </>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

src/plugin-slots/HeaderSlot/index.jsx

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+
+import { LearningHeader as Header } from '@edx/frontend-component-header';
+
+const HeaderSlot = ({
+  courseOrg, courseNumber, courseTitle, showUserDropdown,
+}) => (
+  <PluginSlot
+    id="header_slot"
+    slotOptions={{
+      mergeProps: true,
+    }}
+    pluginProps={{
+      courseOrg,
+      courseNumber,
+      courseTitle,
+      showUserDropdown,
+    }}
+  >
+    <Header
+      courseOrg={courseOrg}
+      courseNumber={courseNumber}
+      courseTitle={courseTitle}
+      showUserDropdown={showUserDropdown}
+    />
+  </PluginSlot>
+);
+
+HeaderSlot.propTypes = {
+  courseOrg: PropTypes.string,
+  courseNumber: PropTypes.string,
+  courseTitle: PropTypes.string,
+  showUserDropdown: PropTypes.bool,
+};
+
+HeaderSlot.defaultProps = {
+  courseOrg: null,
+  courseNumber: null,
+  courseTitle: null,
+  showUserDropdown: true,
+};
+
+export default HeaderSlot;

src/plugin-slots/README.md

@@ -1,5 +1,6 @@
 # `frontend-app-learning` Plugin Slots
 
+* [`header_slot`](./HeaderSlot/)
 * [`footer_slot`](./FooterSlot/)
 * [`sequence_container_slot`](./SequenceContainerSlot/)
 * [`unit_title_slot`](./UnitTitleSlot/)