From a346dccd4ce5273c8f9e977dfc0fa6199d71ef3f Mon Sep 17 00:00:00 2001 From: Brian Smith <112954497+brian-smith-tcril@users.noreply.github.com> Date: Tue, 22 Oct 2024 12:18:11 -0400 Subject: [PATCH] feat: add `frontend-plugin-framework` slots (#545) Add the following `frontend-plugin-framework` slots: * `logo_slot` * `desktop_main_menu_slot` * `desktop_secondary_menu_slot` * `mobile_main_menu_slot` * `course_info_slot` * `learning_help_slot` * `desktop_logged_out_items_slot` * `mobile_logged_out_items_slot` * `mobile_user_menu_slot` * `desktop_user_menu_slot` * `learning_user_menu_slot` * `learning_logged_out_items_slot` * `desktop_header_slot` --- src/DesktopHeader.jsx | 222 ------------------ src/Header.jsx | 8 +- src/Logo.jsx | 4 +- src/desktop-header/DesktopHeader.jsx | 153 ++++++++++++ .../DesktopHeaderMainOrSecondaryMenu.jsx | 59 +++++ src/desktop-header/DesktopHeaderUserMenu.jsx | 39 +++ src/desktop-header/DesktopLoggedOutItems.jsx | 24 ++ src/learning-header/AnonymousUserMenu.jsx | 34 ++- .../AuthenticatedUserDropdown.jsx | 68 +++--- src/learning-header/LearningHeader.jsx | 23 +- .../LearningHeaderCourseInfo.jsx | 23 ++ .../LearningHeaderHelpLink.jsx | 14 ++ .../LearningHeaderUserMenuItems.jsx | 21 ++ .../LearningLoggedOutButtons.jsx | 26 ++ src/{ => mobile-header}/MobileHeader.jsx | 141 +++-------- src/mobile-header/MobileHeaderMainMenu.jsx | 58 +++++ src/mobile-header/MobileHeaderUserMenu.jsx | 35 +++ src/mobile-header/MobileLoggedOutItems.jsx | 25 ++ src/plugin-slots/CourseInfoSlot/README.md | 125 ++++++++++ ...omponents_before_and_after_course_info.png | Bin 0 -> 17506 bytes ...lace_course_info_with_custom_component.png | Bin 0 -> 13292 bytes .../images/replace_course_title.png | Bin 0 -> 14889 bytes src/plugin-slots/CourseInfoSlot/index.jsx | 28 +++ src/plugin-slots/DesktopHeaderSlot/README.md | 41 ++++ .../desktop_header_custom_component.png | Bin 0 -> 27763 bytes src/plugin-slots/DesktopHeaderSlot/index.jsx | 20 ++ .../DesktopLoggedOutItemsSlot/README.md | 134 +++++++++++ ...ktop_logged_out_items_custom_component.png | Bin 0 -> 10817 bytes ...t_items_custom_components_before_after.png | Bin 0 -> 14297 bytes .../desktop_logged_out_items_modify_items.png | Bin 0 -> 12915 bytes .../DesktopLoggedOutItemsSlot/index.jsx | 22 ++ .../DesktopMainMenuSlot/README.md | 134 +++++++++++ .../desktop_main_menu_custom_component.png | Bin 0 -> 9023 bytes ...in_menu_custom_components_before_after.png | Bin 0 -> 15401 bytes .../images/desktop_main_menu_modify_items.png | Bin 0 -> 10583 bytes .../DesktopMainMenuSlot/index.jsx | 22 ++ .../DesktopSecondaryMenuSlot/README.md | 129 ++++++++++ ...esktop_secondary_menu_custom_component.png | Bin 0 -> 14173 bytes ...ry_menu_custom_components_before_after.png | Bin 0 -> 15494 bytes .../desktop_secondary_menu_modify_items.png | Bin 0 -> 16145 bytes .../DesktopSecondaryMenuSlot/index.jsx | 22 ++ .../DesktopUserMenuSlot/README.md | 141 +++++++++++ .../desktop_user_menu_custom_component.png | Bin 0 -> 9245 bytes ...er_menu_custom_components_before_after.png | Bin 0 -> 17714 bytes .../images/desktop_user_menu_modify_items.png | Bin 0 -> 11521 bytes .../DesktopUserMenuSlot/index.jsx | 22 ++ src/plugin-slots/LearningHelpSlot/README.md | 41 ++++ .../images/learning_help_custom_component.png | Bin 0 -> 18483 bytes src/plugin-slots/LearningHelpSlot/index.jsx | 11 + .../LearningLoggedOutItemsSlot/README.md | 132 +++++++++++ ...ning_logged_out_items_custom_component.png | Bin 0 -> 16286 bytes ...t_items_custom_components_before_after.png | Bin 0 -> 20319 bytes ...arning_logged_out_items_modified_items.png | Bin 0 -> 18555 bytes .../LearningLoggedOutItemsSlot/index.jsx | 20 ++ .../LearningUserMenuSlot/README.md | 130 ++++++++++ .../learning_user_menu_custom_component.png | Bin 0 -> 7642 bytes ...er_menu_custom_components_before_after.png | Bin 0 -> 20360 bytes .../learning_user_menu_modified_items.png | Bin 0 -> 9626 bytes .../LearningUserMenuSlot/index.jsx | 20 ++ src/plugin-slots/LogoSlot/index.jsx | 9 +- src/plugin-slots/MobileHeaderSlot/README.md | 41 ++++ .../images/mobile_header_custom_component.png | Bin 0 -> 15830 bytes src/plugin-slots/MobileHeaderSlot/index.jsx | 20 ++ .../MobileLoggedOutItemsSlot/README.md | 134 +++++++++++ ...bile_logged_out_items_custom_component.png | Bin 0 -> 5701 bytes ...t_items_custom_components_before_after.png | Bin 0 -> 12654 bytes .../mobile_logged_out_items_modify_items.png | Bin 0 -> 10042 bytes .../MobileLoggedOutItemsSlot/index.jsx | 22 ++ src/plugin-slots/MobileMainMenuSlot/README.md | 134 +++++++++++ .../mobile_main_menu_custom_component.png | Bin 0 -> 8549 bytes ...in_menu_custom_components_before_after.png | Bin 0 -> 17362 bytes .../images/mobile_main_menu_modify_items.png | Bin 0 -> 9200 bytes src/plugin-slots/MobileMainMenuSlot/index.jsx | 22 ++ src/plugin-slots/MobileUserMenuSlot/README.md | 142 +++++++++++ .../mobile_user_menu_custom_component.png | Bin 0 -> 7939 bytes ...er_menu_custom_components_before_after.png | Bin 0 -> 13713 bytes .../images/mobile_user_menu_modify_items.png | Bin 0 -> 9173 bytes src/plugin-slots/MobileUserMenuSlot/index.jsx | 22 ++ src/plugin-slots/README.md | 12 + 79 files changed, 2328 insertions(+), 401 deletions(-) delete mode 100644 src/DesktopHeader.jsx create mode 100644 src/desktop-header/DesktopHeader.jsx create mode 100644 src/desktop-header/DesktopHeaderMainOrSecondaryMenu.jsx create mode 100644 src/desktop-header/DesktopHeaderUserMenu.jsx create mode 100644 src/desktop-header/DesktopLoggedOutItems.jsx create mode 100644 src/learning-header/LearningHeaderCourseInfo.jsx create mode 100644 src/learning-header/LearningHeaderHelpLink.jsx create mode 100644 src/learning-header/LearningHeaderUserMenuItems.jsx create mode 100644 src/learning-header/LearningLoggedOutButtons.jsx rename src/{ => mobile-header}/MobileHeader.jsx (57%) create mode 100644 src/mobile-header/MobileHeaderMainMenu.jsx create mode 100644 src/mobile-header/MobileHeaderUserMenu.jsx create mode 100644 src/mobile-header/MobileLoggedOutItems.jsx create mode 100644 src/plugin-slots/CourseInfoSlot/README.md create mode 100644 src/plugin-slots/CourseInfoSlot/images/add_custom_components_before_and_after_course_info.png create mode 100644 src/plugin-slots/CourseInfoSlot/images/replace_course_info_with_custom_component.png create mode 100644 src/plugin-slots/CourseInfoSlot/images/replace_course_title.png create mode 100644 src/plugin-slots/CourseInfoSlot/index.jsx create mode 100644 src/plugin-slots/DesktopHeaderSlot/README.md create mode 100644 src/plugin-slots/DesktopHeaderSlot/images/desktop_header_custom_component.png create mode 100644 src/plugin-slots/DesktopHeaderSlot/index.jsx create mode 100644 src/plugin-slots/DesktopLoggedOutItemsSlot/README.md create mode 100644 src/plugin-slots/DesktopLoggedOutItemsSlot/images/desktop_logged_out_items_custom_component.png create mode 100644 src/plugin-slots/DesktopLoggedOutItemsSlot/images/desktop_logged_out_items_custom_components_before_after.png create mode 100644 src/plugin-slots/DesktopLoggedOutItemsSlot/images/desktop_logged_out_items_modify_items.png create mode 100644 src/plugin-slots/DesktopLoggedOutItemsSlot/index.jsx create mode 100644 src/plugin-slots/DesktopMainMenuSlot/README.md create mode 100644 src/plugin-slots/DesktopMainMenuSlot/images/desktop_main_menu_custom_component.png create mode 100644 src/plugin-slots/DesktopMainMenuSlot/images/desktop_main_menu_custom_components_before_after.png create mode 100644 src/plugin-slots/DesktopMainMenuSlot/images/desktop_main_menu_modify_items.png create mode 100644 src/plugin-slots/DesktopMainMenuSlot/index.jsx create mode 100644 src/plugin-slots/DesktopSecondaryMenuSlot/README.md create mode 100644 src/plugin-slots/DesktopSecondaryMenuSlot/images/desktop_secondary_menu_custom_component.png create mode 100644 src/plugin-slots/DesktopSecondaryMenuSlot/images/desktop_secondary_menu_custom_components_before_after.png create mode 100644 src/plugin-slots/DesktopSecondaryMenuSlot/images/desktop_secondary_menu_modify_items.png create mode 100644 src/plugin-slots/DesktopSecondaryMenuSlot/index.jsx create mode 100644 src/plugin-slots/DesktopUserMenuSlot/README.md create mode 100644 src/plugin-slots/DesktopUserMenuSlot/images/desktop_user_menu_custom_component.png create mode 100644 src/plugin-slots/DesktopUserMenuSlot/images/desktop_user_menu_custom_components_before_after.png create mode 100644 src/plugin-slots/DesktopUserMenuSlot/images/desktop_user_menu_modify_items.png create mode 100644 src/plugin-slots/DesktopUserMenuSlot/index.jsx create mode 100644 src/plugin-slots/LearningHelpSlot/README.md create mode 100644 src/plugin-slots/LearningHelpSlot/images/learning_help_custom_component.png create mode 100644 src/plugin-slots/LearningHelpSlot/index.jsx create mode 100644 src/plugin-slots/LearningLoggedOutItemsSlot/README.md create mode 100644 src/plugin-slots/LearningLoggedOutItemsSlot/images/learning_logged_out_items_custom_component.png create mode 100644 src/plugin-slots/LearningLoggedOutItemsSlot/images/learning_logged_out_items_custom_components_before_after.png create mode 100644 src/plugin-slots/LearningLoggedOutItemsSlot/images/learning_logged_out_items_modified_items.png create mode 100644 src/plugin-slots/LearningLoggedOutItemsSlot/index.jsx create mode 100644 src/plugin-slots/LearningUserMenuSlot/README.md create mode 100644 src/plugin-slots/LearningUserMenuSlot/images/learning_user_menu_custom_component.png create mode 100644 src/plugin-slots/LearningUserMenuSlot/images/learning_user_menu_custom_components_before_after.png create mode 100644 src/plugin-slots/LearningUserMenuSlot/images/learning_user_menu_modified_items.png create mode 100644 src/plugin-slots/LearningUserMenuSlot/index.jsx create mode 100644 src/plugin-slots/MobileHeaderSlot/README.md create mode 100644 src/plugin-slots/MobileHeaderSlot/images/mobile_header_custom_component.png create mode 100644 src/plugin-slots/MobileHeaderSlot/index.jsx create mode 100644 src/plugin-slots/MobileLoggedOutItemsSlot/README.md create mode 100644 src/plugin-slots/MobileLoggedOutItemsSlot/images/mobile_logged_out_items_custom_component.png create mode 100644 src/plugin-slots/MobileLoggedOutItemsSlot/images/mobile_logged_out_items_custom_components_before_after.png create mode 100644 src/plugin-slots/MobileLoggedOutItemsSlot/images/mobile_logged_out_items_modify_items.png create mode 100644 src/plugin-slots/MobileLoggedOutItemsSlot/index.jsx create mode 100644 src/plugin-slots/MobileMainMenuSlot/README.md create mode 100644 src/plugin-slots/MobileMainMenuSlot/images/mobile_main_menu_custom_component.png create mode 100644 src/plugin-slots/MobileMainMenuSlot/images/mobile_main_menu_custom_components_before_after.png create mode 100644 src/plugin-slots/MobileMainMenuSlot/images/mobile_main_menu_modify_items.png create mode 100644 src/plugin-slots/MobileMainMenuSlot/index.jsx create mode 100644 src/plugin-slots/MobileUserMenuSlot/README.md create mode 100644 src/plugin-slots/MobileUserMenuSlot/images/mobile_user_menu_custom_component.png create mode 100644 src/plugin-slots/MobileUserMenuSlot/images/mobile_user_menu_custom_components_before_after.png create mode 100644 src/plugin-slots/MobileUserMenuSlot/images/mobile_user_menu_modify_items.png create mode 100644 src/plugin-slots/MobileUserMenuSlot/index.jsx diff --git a/src/DesktopHeader.jsx b/src/DesktopHeader.jsx deleted file mode 100644 index 10c2a71..0000000 --- a/src/DesktopHeader.jsx +++ /dev/null @@ -1,222 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; -import { getConfig } from '@edx/frontend-platform'; - -// Local Components -import { Menu, MenuTrigger, MenuContent } from './Menu'; -import Avatar from './Avatar'; -import LogoSlot from './plugin-slots/LogoSlot'; - -// 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); - } - - renderMenu(menu) { - // Nodes are accepted as a prop - if (!Array.isArray(menu)) { - return menu; - } - - return menu.map((menuItem) => { - const { - type, - href, - content, - submenuContent, - disabled, - isActive, - onClick, - } = menuItem; - - if (type === 'item') { - return ( - - {content} - - ); - } - - return ( -
- ); - }); - } - - renderMainMenu() { - const { mainMenu } = this.props; - return this.renderMenu(mainMenu); - } - - renderSecondaryMenu() { - const { secondaryMenu } = this.props; - return this.renderMenu(secondaryMenu); - } - - renderUserMenu() { - const { - userMenu, - avatar, - username, - intl, - } = this.props; - - return ( - - ); - } - - renderLoggedOutItems() { - const { loggedOutItems } = this.props; - - return loggedOutItems.map((item, i, arr) => ( - - {item.content} - - )); - } - - render() { - const { - logo, - logoAltText, - logoDestination, - loggedIn, - intl, - } = this.props; - const logoProps = { src: logo, alt: logoAltText, href: logoDestination }; - const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'mw-100' : null; - - return ( -P6tWO&&;BYc=6?9!pGmI%kVotICCc=g+<(-MI|0X#)*}
zOclJX(6}~vC3EYwx4{Btn4fFikF#-axEtY%xg&Qt)%{Z&?^^QQ^ft%lG4FXzSxaYs
zFihaiT%VLX=kmxMn-myd6eI|u;QazBQfkgaaIl`jxi#JS_Rro6Ph3GThSSQ1V9)=}
zSC9HP*tXuivfi7Dg~|v3SD*n-& vF@K-kLO
zREO`3h5-`i_U#1zvQl8foSdC|V18oQ;sc_bUI==)Y1Pv5@{cnT9Gt{3t`M&C`rp5S
zmYtjwoH!`Ne(5~07SOd;tcnjb*$Oq*l3q+7nqYxpmjRGeD+i=^?}l#i9vhF1fUst_
z)l^@9o0K#wQ;`ul^9P4 Rdw$6aazEM0C}o!-x5*6Pi0H@Wzu7XPr)DY90X^fFf1RL4N1
zz-6G+>YORV@uFds)YE#gmC;0zu4!uuTTU*x^_yL7fyp%)%}V%0^bv>Yt6g)m#||%P
z&@Pq=N;tenDxd_1Giw8g;)4n`y@5KK=BK3
zgotD*fvdtB#ukuj02YJ_T^zmJoT!*vU&pMS^1SQ-oCCd=`tp3sla+<#HQ*&AivZ3L
zV5@G`!nO_P>Y#$>D-~o8APrcYcl2P>!i2JgQ=52g7cs%ZP!BP(J=c_!mevG4{b;jd
z3&|OzE9a0QrrZxnK{wf39q
@6^qjp8!@*$)Vo0cr&pd_uqkW!850kpgYF7>6Zvr4Qh`
zxkF6s@8fd~d?5Xqs$W6ePLxac>aXB{dSBPo6$IMs?DFzQI0CdA`Vzqss4|2VF?;yU
zJrN?SSGT}*07KT>q@;%k^U*>bFiXI;^uVBt0D-&(2$)j0W42mXfmFcAO+n
πΊοΈ
+ ),
+ },
+ },
+ ]
+ }
+ },
+}
+
+export default config;
+```
\ No newline at end of file
diff --git a/src/plugin-slots/DesktopHeaderSlot/images/desktop_header_custom_component.png b/src/plugin-slots/DesktopHeaderSlot/images/desktop_header_custom_component.png
new file mode 100644
index 0000000000000000000000000000000000000000..3d663f719c506d00bd211773280579d1671ff2b0
GIT binary patch
literal 27763
zcmeFYWmHvB*EW3U?(R@JMCmRGQ6!|KySuwfT1AoW5Tr!9OOQsoOG3IE&btoY_cPux
zzCX|RsD>G7hZ;(e{_=YydP#AzI!ewfhUrfe@MK6>DweepyfvYE
zB=Vvk19gNC+LV~Ijg&OFU9EiaQ{$?UXe;{3<5D}KmDSWjK^*e$)ouS|aD056Wkp_-
zD4XjmP{&C`Ip`3XdxiCWoC_mF+Y|zs