diff --git a/src/desktop-header/DesktopHeader.jsx b/src/desktop-header/DesktopHeader.jsx index 4b5e4939f..d28a399d4 100644 --- a/src/desktop-header/DesktopHeader.jsx +++ b/src/desktop-header/DesktopHeader.jsx @@ -5,7 +5,6 @@ import { getConfig } from '@edx/frontend-platform'; // Local Components import { Menu, MenuTrigger, MenuContent } from '../Menu'; -import Avatar from '../Avatar'; import LogoSlot from '../plugin-slots/LogoSlot'; import DesktopLoggedOutItemsSlot from '../plugin-slots/DesktopLoggedOutItemsSlot'; import { desktopLoggedOutItemsDataShape } from './DesktopLoggedOutItems'; @@ -14,13 +13,11 @@ import { desktopHeaderMainOrSecondaryMenuDataShape } from './DesktopHeaderMainOr import DesktopSecondaryMenuSlot from '../plugin-slots/DesktopSecondaryMenuSlot'; import DesktopUserMenuSlot from '../plugin-slots/DesktopUserMenuSlot'; import { desktopUserMenuDataShape } from './DesktopHeaderUserMenu'; +import DesktopUsernameSlot from '../plugin-slots/DesktopUsernameSlot'; // i18n import messages from '../Header.messages'; -// Assets -import { CaretIcon } from '../Icons'; - class DesktopHeader extends React.Component { constructor(props) { // eslint-disable-line no-useless-constructor super(props); @@ -51,8 +48,7 @@ class DesktopHeader extends React.Component { aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { username })} className="btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3" > - - {username} + diff --git a/src/learning-header/AuthenticatedUserDropdown.jsx b/src/learning-header/AuthenticatedUserDropdown.jsx index 4a912281e..523522e58 100644 --- a/src/learning-header/AuthenticatedUserDropdown.jsx +++ b/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 ( - - - {username} - + diff --git a/src/plugin-slots/DesktopUsernameSlot/README.md b/src/plugin-slots/DesktopUsernameSlot/README.md new file mode 100644 index 000000000..9c4b99fdb --- /dev/null +++ b/src/plugin-slots/DesktopUsernameSlot/README.md @@ -0,0 +1,116 @@ +# Desktop Username Slot + +### Slot ID: `desktop_username_slot` + +## Description + +This slot is used to replace/modify/hide the desktop username. + +## Examples + +### Modify Username + +The following `env.config.jsx` will modify the username (in this case replacing it with 🤠) + +![Screenshot of modified username](./images/desktop_username_modified.png) + +```jsx +import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; + +const modifyUsername = ( widget ) => { + widget.content.username = "🤠"; + return widget; +}; + +const config = { + pluginSlots: { + desktop_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 desktop username entirely (in this case with an svg circle) + +![Screenshot of replaced with custom component](./images/desktop_username_custom_component.png) + +```jsx +import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; + +const config = { + pluginSlots: { + desktop_username_slot: { + keepDefault: false, + plugins: [ + { + op: PLUGIN_OPERATIONS.Insert, + widget: { + id: 'custom_username_component', + type: DIRECT_PLUGIN, + RenderWidget: () => ( + + + + ), + }, + }, + ] + }, + }, +} + +export default config; +``` + +### Add Custom Components before and after Username + +The following `env.config.jsx` will place custom components before and after the desktop username (in this case 🖋️ and 🪄). + +![Screenshot of custom components before and after](./images/desktop_username_custom_components_before_after.png) + +```jsx +import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework'; + +const config = { + pluginSlots: { + desktop_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; +``` diff --git a/src/plugin-slots/DesktopUsernameSlot/images/desktop_username_custom_component.png b/src/plugin-slots/DesktopUsernameSlot/images/desktop_username_custom_component.png new file mode 100644 index 000000000..27d94659e Binary files /dev/null and b/src/plugin-slots/DesktopUsernameSlot/images/desktop_username_custom_component.png differ diff --git a/src/plugin-slots/DesktopUsernameSlot/images/desktop_username_custom_components_before_after.png b/src/plugin-slots/DesktopUsernameSlot/images/desktop_username_custom_components_before_after.png new file mode 100644 index 000000000..79d7ded32 Binary files /dev/null and b/src/plugin-slots/DesktopUsernameSlot/images/desktop_username_custom_components_before_after.png differ diff --git a/src/plugin-slots/DesktopUsernameSlot/images/desktop_username_modified.png b/src/plugin-slots/DesktopUsernameSlot/images/desktop_username_modified.png new file mode 100644 index 000000000..4ffec7087 Binary files /dev/null and b/src/plugin-slots/DesktopUsernameSlot/images/desktop_username_modified.png differ diff --git a/src/plugin-slots/DesktopUsernameSlot/index.jsx b/src/plugin-slots/DesktopUsernameSlot/index.jsx new file mode 100644 index 000000000..5daacd6a8 --- /dev/null +++ b/src/plugin-slots/DesktopUsernameSlot/index.jsx @@ -0,0 +1,38 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { PluginSlot } from '@openedx/frontend-plugin-framework'; + +import Avatar from '../../Avatar'; +import { CaretIcon } from '../../Icons'; + +const DesktopUsername = ({ username, avatar }) => ( + <> + + {username} + +); + +const DesktopUsernameSlot = ({ username, avatar }) => ( + + + +); + +DesktopUsername.propTypes = { + avatar: PropTypes.string, + username: PropTypes.string.isRequired, +}; + +DesktopUsername.defaultProps = { + avatar: null, +}; + +DesktopUsernameSlot.propTypes = DesktopUsername.propTypes; +DesktopUsernameSlot.defaultProps = DesktopUsername.defaultProps; + +export default DesktopUsernameSlot; diff --git a/src/plugin-slots/LearningUsernameSlot/README.md b/src/plugin-slots/LearningUsernameSlot/README.md new file mode 100644 index 000000000..3c760be94 --- /dev/null +++ b/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: () => ( + + + + ), + }, + }, + ] + }, + }, +} + +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; +``` diff --git a/src/plugin-slots/LearningUsernameSlot/images/learning_username_custom_component.png b/src/plugin-slots/LearningUsernameSlot/images/learning_username_custom_component.png new file mode 100644 index 000000000..f7230df79 Binary files /dev/null and b/src/plugin-slots/LearningUsernameSlot/images/learning_username_custom_component.png differ diff --git a/src/plugin-slots/LearningUsernameSlot/images/learning_username_custom_components_before_after.png b/src/plugin-slots/LearningUsernameSlot/images/learning_username_custom_components_before_after.png new file mode 100644 index 000000000..f0f51f1d0 Binary files /dev/null and b/src/plugin-slots/LearningUsernameSlot/images/learning_username_custom_components_before_after.png differ diff --git a/src/plugin-slots/LearningUsernameSlot/images/learning_username_modified.png b/src/plugin-slots/LearningUsernameSlot/images/learning_username_modified.png new file mode 100644 index 000000000..2b12cfc49 Binary files /dev/null and b/src/plugin-slots/LearningUsernameSlot/images/learning_username_modified.png differ diff --git a/src/plugin-slots/LearningUsernameSlot/index.jsx b/src/plugin-slots/LearningUsernameSlot/index.jsx new file mode 100644 index 000000000..65d0fe816 --- /dev/null +++ b/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 }) => ( + <> + + + {username} + + +); + +const LearningUsernameSlot = ({ username }) => ( + + + +); + +LearningUsername.propTypes = { + username: PropTypes.string.isRequired, +}; + +LearningUsernameSlot.propTypes = LearningUsername.propTypes; + +export default LearningUsernameSlot; diff --git a/src/plugin-slots/README.md b/src/plugin-slots/README.md index 12071fb4c..6a4927e28 100644 --- a/src/plugin-slots/README.md +++ b/src/plugin-slots/README.md @@ -9,7 +9,9 @@ * [`desktop_logged_out_items_slot`](./DesktopLoggedOutItemsSlot/) * [`mobile_logged_out_items_slot`](./MobileLoggedOutItemsSlot/) * [`mobile_user_menu_slot`](./MobileUserMenuSlot/) +* [`desktop_username_slot`](./DesktopUsernameSlot/) * [`desktop_user_menu_slot`](./DesktopUserMenuSlot/) +* [`learning_username_slot`](./LearningUsernameSlot/) * [`learning_user_menu_slot`](./LearningUserMenuSlot/) * [`learning_logged_out_items_slot`](./LearningLoggedOutItemsSlot/) * [`desktop_header_slot`](./DesktopHeaderSlot/)