feat: add learning username slot

src/learning-header/AuthenticatedUserDropdown.jsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Dropdown } from '@openedx/paragon';
 
 import LearningUserMenuSlot from '../plugin-slots/LearningUserMenuSlot';
+import LearningUsernameSlot from '../plugin-slots/LearningUsernameSlot';
 
 import messages from './messages';
 
@@ -38,10 +37,7 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
   return (
     <Dropdown className="user-dropdown ml-3">
       <Dropdown.Toggle variant="outline-primary">
-        <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
-        <span data-hj-suppress className="d-none d-md-inline">
-          {username}
-        </span>
+        <LearningUsernameSlot username={username} />
       </Dropdown.Toggle>
       <Dropdown.Menu className="dropdown-menu-right">
         <LearningUserMenuSlot items={dropdownItems} />

src/plugin-slots/LearningUsernameSlot/README.md

@@ -0,0 +1,116 @@
+# Learning Username Slot
+
+### Slot ID: `learning_username_slot`
+
+## Description
+
+This slot is used to replace/modify/hide the learning username.
+
+## Examples
+
+### Modify Username
+
+The following `env.config.jsx` will modify the username (in this case replacing it with 🤠)
+
+![Screenshot of modified username](./images/learning_username_modified.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const modifyUsername = ( widget ) => {
+  widget.content.username = "🤠";
+  return widget;
+};
+
+const config = {
+  pluginSlots: {
+    learning_username_slot: {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Modify,
+          widgetId: 'default_contents',
+          fn: modifyUsername,
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+
+### Replace Username with Custom Component
+
+The following `env.config.jsx` will replace the items in the learning username entirely (in this case with an svg circle)
+
+![Screenshot of replaced with custom component](./images/learning_username_custom_component.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    learning_username_slot: {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_username_component',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <svg height="30" width="30">
+                <circle r="15" cx="15" cy="15" fill="purple" />
+              </svg>
+            ),
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```
+
+### Add Custom Components before and after Username
+
+The following `env.config.jsx` will place custom components before and after the learning username (in this case 🖋️ and 🪄).
+
+![Screenshot of custom components before and after](./images/learning_username_custom_components_before_after.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    learning_username_slot: {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_before_username_component',
+            type: DIRECT_PLUGIN,
+            priority: 10,
+            RenderWidget: () => "🖋️",
+          },
+        },
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_after_username_component',
+            type: DIRECT_PLUGIN,
+            priority: 90,
+            RenderWidget: () => "🪄",
+          },
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```

src/plugin-slots/LearningUsernameSlot/index.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
+
+const LearningUsername = ({ username }) => (
+  <>
+    <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
+    <span data-hj-suppress className="d-none d-md-inline">
+      {username}
+    </span>
+  </>
+);
+
+const LearningUsernameSlot = ({ username }) => (
+  <PluginSlot
+    id="learning_username_slot"
+    slotOptions={{
+      mergeProps: true,
+    }}
+  >
+    <LearningUsername username={username} />
+  </PluginSlot>
+);
+
+LearningUsername.propTypes = {
+  username: PropTypes.string.isRequired,
+};
+
+LearningUsernameSlot.propTypes = LearningUsername.propTypes;
+
+export default LearningUsernameSlot;

src/plugin-slots/README.md

@@ -10,6 +10,7 @@
 * [`mobile_logged_out_items_slot`](./MobileLoggedOutItemsSlot/)
 * [`mobile_user_menu_slot`](./MobileUserMenuSlot/)
 * [`desktop_user_menu_slot`](./DesktopUserMenuSlot/)
+* [`learning_username_slot`](./LearningUsernameSlot/)
 * [`learning_user_menu_slot`](./LearningUserMenuSlot/)
 * [`learning_logged_out_items_slot`](./LearningLoggedOutItemsSlot/)
 * [`desktop_header_slot`](./DesktopHeaderSlot/)