@nauedu/frontend-component-header 20.1.0 → 20.1.2

package/dist/plugin-slots/DesktopSecondaryMenuSlot/README.md

@@ -0,0 +1,132 @@
+# Desktop Secondary Menu Slot
+
+### Slot ID: `org.openedx.frontend.layout.header_desktop_secondary_menu.v1`
+
+### Slot ID Aliases
+* `desktop_secondary_menu_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the desktop secondary menu.
+
+## Examples
+
+### Modify Items
+
+The following `env.config.jsx` will modify the items in the desktop secondary menu.
+
+![Screenshot of modified items](./images/desktop_secondary_menu_modify_items.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const modifySecondaryMenu = ( widget ) => {
+  widget.content.menu = [
+    {
+      type: 'item',
+      href: 'https://www.youtube.com/c/openedx',
+      content: 'Open edX on YouTube',
+    },
+    {
+      type: 'item',
+      href: 'https://github.com/openedx/',
+      content: 'Open edX on GitHub',
+    }
+  ];
+  return widget;
+};
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_desktop_secondary_menu.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Modify,
+          widgetId: 'default_contents',
+          fn: modifySecondaryMenu,
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Replace Menu with Custom Component
+
+The following `env.config.jsx` will replace the desktop secondary menu entirely (in this case with a centered 🗺️ `h1`)
+
+![Screenshot of custom component](./images/desktop_secondary_menu_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_desktop_secondary_menu.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_secondary_menu_component',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🗺️</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Add Custom Components before and after Menu
+
+The following `env.config.jsx` will place custom components before and after the desktop secondary menu  (in this case centered `h1`s with 🌜 and 🌛).
+
+![Screenshot of custom components before and after](./images/desktop_secondary_menu_custom_components_before_after.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_desktop_secondary_menu.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_before_secondary_menu_component',
+            type: DIRECT_PLUGIN,
+            priority: 10,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🌜</h1>
+            ),
+          },
+        },
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_after_secondary_menu_component',
+            type: DIRECT_PLUGIN,
+            priority: 90,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🌛</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+

package/dist/plugin-slots/DesktopSecondaryMenuSlot/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import DesktopHeaderMainOrSecondaryMenu, { desktopHeaderMainOrSecondaryMenuDataShape } from '../../desktop-header/DesktopHeaderMainOrSecondaryMenu';
+var DesktopSecondaryMenuSlot = function DesktopSecondaryMenuSlot(_ref) {
+  var menu = _ref.menu;
+  return /*#__PURE__*/React.createElement(PluginSlot, {
+    id: "org.openedx.frontend.layout.header_desktop_secondary_menu.v1",
+    idAliases: ['desktop_secondary_menu_slot'],
+    slotOptions: {
+      mergeProps: true
+    }
+  }, /*#__PURE__*/React.createElement(DesktopHeaderMainOrSecondaryMenu, {
+    menu: menu
+  }));
+};
+DesktopSecondaryMenuSlot.propTypes = {
+  menu: desktopHeaderMainOrSecondaryMenuDataShape
+};
+export default DesktopSecondaryMenuSlot;
+//# sourceMappingURL=index.js.map

package/dist/plugin-slots/DesktopSecondaryMenuSlot/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","PluginSlot","DesktopHeaderMainOrSecondaryMenu","desktopHeaderMainOrSecondaryMenuDataShape","DesktopSecondaryMenuSlot","_ref","menu","createElement","id","idAliases","slotOptions","mergeProps","propTypes"],"sources":["../../../src/plugin-slots/DesktopSecondaryMenuSlot/index.jsx"],"sourcesContent":["import React from 'react';\nimport { PluginSlot } from '@openedx/frontend-plugin-framework';\nimport DesktopHeaderMainOrSecondaryMenu, { desktopHeaderMainOrSecondaryMenuDataShape } from '../../desktop-header/DesktopHeaderMainOrSecondaryMenu';\n\nconst DesktopSecondaryMenuSlot = ({\n  menu,\n}) => (\n  <PluginSlot\n    id=\"org.openedx.frontend.layout.header_desktop_secondary_menu.v1\"\n    idAliases={['desktop_secondary_menu_slot']}\n    slotOptions={{\n      mergeProps: true,\n    }}\n  >\n    <DesktopHeaderMainOrSecondaryMenu menu={menu} />\n  </PluginSlot>\n);\n\nDesktopSecondaryMenuSlot.propTypes = {\n  menu: desktopHeaderMainOrSecondaryMenuDataShape,\n};\n\nexport default DesktopSecondaryMenuSlot;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,oCAAoC;AAC/D,OAAOC,gCAAgC,IAAIC,yCAAyC,QAAQ,uDAAuD;AAEnJ,IAAMC,wBAAwB,GAAG,SAA3BA,wBAAwBA,CAAAC,IAAA;EAAA,IAC5BC,IAAI,GAAAD,IAAA,CAAJC,IAAI;EAAA,oBAEJN,KAAA,CAAAO,aAAA,CAACN,UAAU;IACTO,EAAE,EAAC,8DAA8D;IACjEC,SAAS,EAAE,CAAC,6BAA6B,CAAE;IAC3CC,WAAW,EAAE;MACXC,UAAU,EAAE;IACd;EAAE,gBAEFX,KAAA,CAAAO,aAAA,CAACL,gCAAgC;IAACI,IAAI,EAAEA;EAAK,CAAE,CACrC,CAAC;AAAA,CACd;AAEDF,wBAAwB,CAACQ,SAAS,GAAG;EACnCN,IAAI,EAAEH;AACR,CAAC;AAED,eAAeC,wBAAwB","ignoreList":[]}

package/dist/plugin-slots/DesktopUserMenuSlot/README.md

@@ -0,0 +1,144 @@
+# Desktop User Menu Slot
+
+### Slot ID: `org.openedx.frontend.layout.header_desktop_user_menu.v1`
+
+### Slot ID Aliases
+* `desktop_user_menu_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the desktop user menu.
+
+## Examples
+
+### Modify Items
+
+The following `env.config.jsx` will modify the items in the desktop user menu.
+
+![Screenshot of modified items](./images/desktop_user_menu_modify_items.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const modifyUserMenu = ( widget ) => {
+  widget.content.menu = [
+    {
+      items: [
+        {
+          type: 'item',
+          href: 'https://openedx.org/',
+          content: 'openedx.org',
+        },
+        {
+          type: 'item',
+          href: 'https://docs.openedx.org/en/latest/',
+          content: 'Documentation',
+        },
+      ]
+    },
+    {
+      items: [
+        {
+          type: 'item',
+          href: 'https://discuss.openedx.org/',
+          content: 'Forums',
+        }
+      ]
+    }
+  ];
+  return widget;
+};
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_desktop_user_menu.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Modify,
+          widgetId: 'default_contents',
+          fn: modifyUserMenu,
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Replace Menu with Custom Component
+
+The following `env.config.jsx` will replace the desktop user menu entirely (in this case with a centered 🗺️ `h1`)
+
+![Screenshot of custom component](./images/desktop_user_menu_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_desktop_user_menu.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_user_menu_component',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🗺️</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Add Custom Components before and after Menu
+
+The following `env.config.jsx` will place custom components before and after the desktop user menu (in this case centered `h1`s with 🌞 and 🌚).
+
+![Screenshot of custom components before and after](./images/desktop_user_menu_custom_components_before_after.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_desktop_user_menu.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_before_user_menu_component',
+            type: DIRECT_PLUGIN,
+            priority: 10,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🌞</h1>
+            ),
+          },
+        },
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_after_user_menu_component',
+            type: DIRECT_PLUGIN,
+            priority: 90,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🌚</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```

package/dist/plugin-slots/DesktopUserMenuSlot/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import DesktopHeaderUserMenu, { desktopUserMenuDataShape } from '../../desktop-header/DesktopHeaderUserMenu';
+var DesktopUserMenuSlot = function DesktopUserMenuSlot(_ref) {
+  var menu = _ref.menu;
+  return /*#__PURE__*/React.createElement(PluginSlot, {
+    id: "org.openedx.frontend.layout.header_desktop_user_menu.v1",
+    idAliases: ['desktop_user_menu_slot'],
+    slotOptions: {
+      mergeProps: true
+    }
+  }, /*#__PURE__*/React.createElement(DesktopHeaderUserMenu, {
+    menu: menu
+  }));
+};
+DesktopUserMenuSlot.propTypes = {
+  menu: desktopUserMenuDataShape
+};
+export default DesktopUserMenuSlot;
+//# sourceMappingURL=index.js.map

package/dist/plugin-slots/DesktopUserMenuSlot/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","PluginSlot","DesktopHeaderUserMenu","desktopUserMenuDataShape","DesktopUserMenuSlot","_ref","menu","createElement","id","idAliases","slotOptions","mergeProps","propTypes"],"sources":["../../../src/plugin-slots/DesktopUserMenuSlot/index.jsx"],"sourcesContent":["import React from 'react';\nimport { PluginSlot } from '@openedx/frontend-plugin-framework';\nimport DesktopHeaderUserMenu, { desktopUserMenuDataShape } from '../../desktop-header/DesktopHeaderUserMenu';\n\nconst DesktopUserMenuSlot = ({\n  menu,\n}) => (\n  <PluginSlot\n    id=\"org.openedx.frontend.layout.header_desktop_user_menu.v1\"\n    idAliases={['desktop_user_menu_slot']}\n    slotOptions={{\n      mergeProps: true,\n    }}\n  >\n    <DesktopHeaderUserMenu menu={menu} />\n  </PluginSlot>\n);\n\nDesktopUserMenuSlot.propTypes = {\n  menu: desktopUserMenuDataShape,\n};\n\nexport default DesktopUserMenuSlot;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,oCAAoC;AAC/D,OAAOC,qBAAqB,IAAIC,wBAAwB,QAAQ,4CAA4C;AAE5G,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAAC,IAAA;EAAA,IACvBC,IAAI,GAAAD,IAAA,CAAJC,IAAI;EAAA,oBAEJN,KAAA,CAAAO,aAAA,CAACN,UAAU;IACTO,EAAE,EAAC,yDAAyD;IAC5DC,SAAS,EAAE,CAAC,wBAAwB,CAAE;IACtCC,WAAW,EAAE;MACXC,UAAU,EAAE;IACd;EAAE,gBAEFX,KAAA,CAAAO,aAAA,CAACL,qBAAqB;IAACI,IAAI,EAAEA;EAAK,CAAE,CAC1B,CAAC;AAAA,CACd;AAEDF,mBAAmB,CAACQ,SAAS,GAAG;EAC9BN,IAAI,EAAEH;AACR,CAAC;AAED,eAAeC,mBAAmB","ignoreList":[]}

package/dist/plugin-slots/DesktopUserMenuToggleSlot/README.md

@@ -0,0 +1,74 @@
+# Desktop User Menu Toggle Slot
+
+### Slot ID: `org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1`
+
+## Description
+
+This slot is used to replace/modify/hide the contents of the user menu toggle button on desktop sized screens.
+
+## Examples
+
+### Modify Label Text
+
+The following `env.config.jsx` will modify the label text to be something more generic:
+
+![Screenshot of modified label](./images/desktop_user_menu_modified_toggle.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { faHouse } from '@fortawesome/free-solid-svg-icons';
+
+const modifyUserMenuToggle = ( widget ) => {
+  widget.content.label = "My Profile";
+  return widget;
+};
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Modify,
+          widgetId: 'default_contents',
+          fn: modifyUserMenuToggle,
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Replace Menu toggle contents with Custom Component
+
+The following `env.config.jsx` will replace the contents of the learning user menu toggle button entirely (in this case with an emoji)
+
+![Screenshot of replaced with custom component](./images/desktop_user_menu_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_desktop_user_menu_toggle',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <span>🦊</span>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```

package/dist/plugin-slots/DesktopUserMenuToggleSlot/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import DesktopUserMenuToggle, { DesktopUserMenuTogglePropTypes } from '../../desktop-header/DesktopUserMenuToggle';
+var DesktopUserMenuToggleSlot = function DesktopUserMenuToggleSlot(_ref) {
+  var avatar = _ref.avatar,
+    label = _ref.label;
+  return /*#__PURE__*/React.createElement(PluginSlot, {
+    id: "org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1",
+    slotOptions: {
+      mergeProps: true
+    }
+  }, /*#__PURE__*/React.createElement(DesktopUserMenuToggle, {
+    avatar: avatar,
+    label: label
+  }));
+};
+DesktopUserMenuToggleSlot.propTypes = DesktopUserMenuTogglePropTypes;
+export default DesktopUserMenuToggleSlot;
+//# sourceMappingURL=index.js.map

package/dist/plugin-slots/DesktopUserMenuToggleSlot/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","PluginSlot","DesktopUserMenuToggle","DesktopUserMenuTogglePropTypes","DesktopUserMenuToggleSlot","_ref","avatar","label","createElement","id","slotOptions","mergeProps","propTypes"],"sources":["../../../src/plugin-slots/DesktopUserMenuToggleSlot/index.jsx"],"sourcesContent":["import React from 'react';\nimport { PluginSlot } from '@openedx/frontend-plugin-framework';\nimport DesktopUserMenuToggle, { DesktopUserMenuTogglePropTypes } from '../../desktop-header/DesktopUserMenuToggle';\n\nconst DesktopUserMenuToggleSlot = ({\n  avatar,\n  label,\n}) => (\n  <PluginSlot\n    id=\"org.openedx.frontend.layout.header_desktop_user_menu_toggle.v1\"\n    slotOptions={{\n      mergeProps: true,\n    }}\n  >\n    <DesktopUserMenuToggle avatar={avatar} label={label} />\n  </PluginSlot>\n);\n\nDesktopUserMenuToggleSlot.propTypes = DesktopUserMenuTogglePropTypes;\n\nexport default DesktopUserMenuToggleSlot;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,oCAAoC;AAC/D,OAAOC,qBAAqB,IAAIC,8BAA8B,QAAQ,4CAA4C;AAElH,IAAMC,yBAAyB,GAAG,SAA5BA,yBAAyBA,CAAAC,IAAA;EAAA,IAC7BC,MAAM,GAAAD,IAAA,CAANC,MAAM;IACNC,KAAK,GAAAF,IAAA,CAALE,KAAK;EAAA,oBAELP,KAAA,CAAAQ,aAAA,CAACP,UAAU;IACTQ,EAAE,EAAC,gEAAgE;IACnEC,WAAW,EAAE;MACXC,UAAU,EAAE;IACd;EAAE,gBAEFX,KAAA,CAAAQ,aAAA,CAACN,qBAAqB;IAACI,MAAM,EAAEA,MAAO;IAACC,KAAK,EAAEA;EAAM,CAAE,CAC5C,CAAC;AAAA,CACd;AAEDH,yBAAyB,CAACQ,SAAS,GAAGT,8BAA8B;AAEpE,eAAeC,yBAAyB","ignoreList":[]}

package/dist/plugin-slots/LearningHelpSlot/README.md

@@ -0,0 +1,44 @@
+# Learning Help Slot
+
+### Slot ID: `org.openedx.frontend.layout.header_learning_help.v1`
+
+### Slot ID Aliases
+* `learning_help_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the learning help link.
+
+## Examples
+
+### Custom Component
+
+The following `env.config.jsx` will replace the help link entirely (in this case with a centered 🗺️ `h1`)
+
+![Screenshot of replaced learning help with custom component](./images/learning_help_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_learning_help.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_learning_help_component',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🗺️</h1>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

package/dist/plugin-slots/LearningHelpSlot/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import LearningHeaderHelpLink from '../../learning-header/LearningHeaderHelpLink';
+var LearningHelpSlot = function LearningHelpSlot() {
+  return /*#__PURE__*/React.createElement(PluginSlot, {
+    id: "org.openedx.frontend.layout.header_learning_help.v1",
+    idAliases: ['learning_help_slot']
+  }, /*#__PURE__*/React.createElement(LearningHeaderHelpLink, null));
+};
+export default LearningHelpSlot;
+//# sourceMappingURL=index.js.map

package/dist/plugin-slots/LearningHelpSlot/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","PluginSlot","LearningHeaderHelpLink","LearningHelpSlot","createElement","id","idAliases"],"sources":["../../../src/plugin-slots/LearningHelpSlot/index.jsx"],"sourcesContent":["import React from 'react';\nimport { PluginSlot } from '@openedx/frontend-plugin-framework';\nimport LearningHeaderHelpLink from '../../learning-header/LearningHeaderHelpLink';\n\nconst LearningHelpSlot = () => (\n  <PluginSlot id=\"org.openedx.frontend.layout.header_learning_help.v1\" idAliases={['learning_help_slot']}>\n    <LearningHeaderHelpLink />\n  </PluginSlot>\n);\n\nexport default LearningHelpSlot;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,oCAAoC;AAC/D,OAAOC,sBAAsB,MAAM,8CAA8C;AAEjF,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAA;EAAA,oBACpBH,KAAA,CAAAI,aAAA,CAACH,UAAU;IAACI,EAAE,EAAC,qDAAqD;IAACC,SAAS,EAAE,CAAC,oBAAoB;EAAE,gBACrGN,KAAA,CAAAI,aAAA,CAACF,sBAAsB,MAAE,CACf,CAAC;AAAA,CACd;AAED,eAAeC,gBAAgB","ignoreList":[]}

package/dist/plugin-slots/LearningLoggedOutItemsSlot/README.md

@@ -0,0 +1,135 @@
+# Learning Logged Out Items Slot
+
+### Slot ID: `org.openedx.frontend.layout.header_learning_logged_out_items.v1`
+
+### Slot ID Aliases
+* `learning_logged_out_items_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the items shown on the learning header when the user is logged out.
+
+## Examples
+
+### Modify Items
+
+The following `env.config.jsx` will modify the items shown on the learning header when the user is logged out.
+
+![Screenshot of modified items](./images/learning_logged_out_items_modified_items.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const modifyLoggedOutItems = ( widget ) => {
+  widget.content.buttonsInfo = [
+    {
+      href: 'https://docs.openedx.org/en/latest/',
+      message: 'Documentation',
+    },
+    {
+      href: 'https://discuss.openedx.org/',
+      message: 'Forums',
+    },
+    {
+      href: 'https://openedx.org/',
+      message: 'openedx.org',
+      variant: 'primary',
+    },
+  ];
+  return widget;
+};
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_learning_logged_out_items.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Modify,
+          widgetId: 'default_contents',
+          fn: modifyLoggedOutItems,
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Replace with Custom Component
+
+The following `env.config.jsx` will replace the items shown in the learning header when the user is logged out entirely (in this case with a centered 🗺️ `h1`)
+
+![Screenshot of replaced with custom component](./images/learning_logged_out_items_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_learning_logged_out_items.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_logged_out_items_component',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🗺️</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Add Custom Components before and after
+
+The following `env.config.jsx` will place custom components before and after the items shown in the learning header when the user is logged out (in this case centered `h1`s with 🌜 and 🌛).
+
+![Screenshot of added custom components before and after](./images/learning_logged_out_items_custom_components_before_after.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.header_learning_logged_out_items.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_before_logged_out_items_component',
+            type: DIRECT_PLUGIN,
+            priority: 10,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🌜</h1>
+            ),
+          },
+        },
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_after_logged_out_items_component',
+            type: DIRECT_PLUGIN,
+            priority: 90,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🌛</h1>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+

package/dist/plugin-slots/LearningLoggedOutItemsSlot/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import LearningLoggedOutButtons, { learningHeaderLoggedOutItemsDataShape } from '../../learning-header/LearningLoggedOutButtons';
+var LearningLoggedOutItemsSlot = function LearningLoggedOutItemsSlot(_ref) {
+  var buttonsInfo = _ref.buttonsInfo;
+  return /*#__PURE__*/React.createElement(PluginSlot, {
+    id: "org.openedx.frontend.layout.header_learning_logged_out_items.v1",
+    idAliases: ['learning_logged_out_items_slot'],
+    slotOptions: {
+      mergeProps: true
+    }
+  }, /*#__PURE__*/React.createElement(LearningLoggedOutButtons, {
+    buttonsInfo: buttonsInfo
+  }));
+};
+LearningLoggedOutItemsSlot.propTypes = learningHeaderLoggedOutItemsDataShape;
+export default LearningLoggedOutItemsSlot;
+//# sourceMappingURL=index.js.map