feat!:Indigo header changes test for ci

BREAKING CHANGES: Upgrade to Redwood
edly-io · Jun 20, 2024 · 982feea · 982feea
1 parent 49942ea
commit 982feea
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 115 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@edx/frontend-component-header",
-  "version": "1.0.0-semantically-released",
+  "name": "@edly-io/indigo-frontend-component-header",
+  "version": "2.0.0",
   "description": "The standard header for Open edX",
   "main": "dist/index.js",
   "publishConfig": {

diff --git a/src/Header.jsx b/src/Header.jsx
@@ -102,10 +102,10 @@ const Header = ({ intl }) => {
 
   return (
     <>
-      <Responsive maxWidth={768}>
+      <Responsive maxWidth={991}>
         <MobileHeader {...props} />
       </Responsive>
-      <Responsive minWidth={769}>
+      <Responsive minWidth={992}>
         <DesktopHeader {...props} />
       </Responsive>
     </>

diff --git a/src/MobileHeader.jsx b/src/MobileHeader.jsx
@@ -5,7 +5,6 @@ import { getConfig } from '@edx/frontend-platform';
 
 // Local Components
 import { Menu, MenuTrigger, MenuContent } from './Menu';
-import Avatar from './Avatar';
 import { LinkedLogo, Logo } from './Logo';
 
 // i18n
@@ -87,8 +86,6 @@ class MobileHeader extends React.Component {
       logoAltText,
       logoDestination,
       loggedIn,
-      avatar,
-      username,
       stickyOnMobile,
       intl,
       mainMenu,
@@ -106,7 +103,7 @@ class MobileHeader extends React.Component {
       >
         <a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
         {mainMenu.length > 0 ? (
-          <div className="w-100 d-flex justify-content-start">
+          <div className="w-100 d-flex justify-content-start sr-only">
 
             <Menu className="position-static">
               <MenuTrigger
@@ -127,19 +124,23 @@ class MobileHeader extends React.Component {
             </Menu>
           </div>
         ) : null}
-        <div className={`w-100 d-flex ${logoClasses}`}>
+        <div className={`logo-holder ${logoClasses}`}>
           { logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} itemType="http://schema.org/Organization" />}
         </div>
         {userMenu.length > 0 || loggedOutItems.length > 0 ? (
-          <div className="w-100 d-flex justify-content-end align-items-center">
+          <div className="mobile-menu">
             <Menu tag="nav" aria-label={intl.formatMessage(messages['header.label.secondary.nav'])} className="position-static">
               <MenuTrigger
                 tag="button"
-                className="icon-button"
                 aria-label={intl.formatMessage(messages['header.label.account.menu'])}
                 title={intl.formatMessage(messages['header.label.account.menu'])}
               >
-                <Avatar size="1.5rem" src={avatar} alt={username} />
+                <div className="hamburger-menu">
+                  <span className="line" />
+                  <span className="line" />
+                  <span className="line" />
+                  <span className="line" />
+                </div>
               </MenuTrigger>
               <MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
                 {loggedIn ? this.renderUserMenuItems() : this.renderLoggedOutItems()}

diff --git a/src/__snapshots__/Header.test.jsx.snap b/src/__snapshots__/Header.test.jsx.snap
@@ -71,7 +71,7 @@ exports[`<Header /> renders correctly for anonymous mobile 1`] = `
     Skip to main content
   </a>
   <div
-    className="w-100 d-flex justify-content-start"
+    className="w-100 d-flex justify-content-start sr-only"
   >
     <div
       className="menu position-static"
@@ -128,7 +128,7 @@ exports[`<Header /> renders correctly for anonymous mobile 1`] = `
     </div>
   </div>
   <div
-    className="w-100 d-flex justify-content-center"
+    className="logo-holder justify-content-center"
   >
     <a
       className="logo"
@@ -143,7 +143,7 @@ exports[`<Header /> renders correctly for anonymous mobile 1`] = `
     </a>
   </div>
   <div
-    className="w-100 d-flex justify-content-end align-items-center"
+    className="mobile-menu"
   >
     <nav
       aria-label="Secondary"
@@ -156,40 +156,26 @@ exports[`<Header /> renders correctly for anonymous mobile 1`] = `
         aria-expanded={false}
         aria-haspopup="menu"
         aria-label="Account Menu"
-        className="menu-trigger icon-button"
+        className="menu-trigger null"
         onClick={[Function]}
         title="Account Menu"
       >
-        <span
-          className="avatar overflow-hidden d-inline-flex rounded-circle null"
-          style={
-            Object {
-              "height": "1.5rem",
-              "width": "1.5rem",
-            }
-          }
+        <div
+          className="hamburger-menu"
         >
-          <svg
-            aria-hidden={true}
-            focusable="false"
-            height="24px"
-            role="img"
-            style={
-              Object {
-                "height": "1.5rem",
-                "width": "1.5rem",
-              }
-            }
-            version="1.1"
-            viewBox="0 0 24 24"
-            width="24px"
-          >
-            <path
-              d="M4.10255106,18.1351061 C4.7170266,16.0581859 8.01891846,14.4720277 12,14.4720277 C15.9810815,14.4720277 19.2829734,16.0581859 19.8974489,18.1351061 C21.215206,16.4412566 22,14.3122775 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,14.3122775 2.78479405,16.4412566 4.10255106,18.1351061 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z M12,13 C9.790861,13 8,11.209139 8,9 C8,6.790861 9.790861,5 12,5 C14.209139,5 16,6.790861 16,9 C16,11.209139 14.209139,13 12,13 Z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
+          <span
+            className="line"
+          />
+          <span
+            className="line"
+          />
+          <span
+            className="line"
+          />
+          <span
+            className="line"
+          />
+        </div>
       </button>
     </nav>
   </div>
@@ -317,7 +303,7 @@ exports[`<Header /> renders correctly for authenticated mobile 1`] = `
     Skip to main content
   </a>
   <div
-    className="w-100 d-flex justify-content-start"
+    className="w-100 d-flex justify-content-start sr-only"
   >
     <div
       className="menu position-static"
@@ -374,7 +360,7 @@ exports[`<Header /> renders correctly for authenticated mobile 1`] = `
     </div>
   </div>
   <div
-    className="w-100 d-flex justify-content-center"
+    className="logo-holder justify-content-center"
   >
     <a
       className="logo"
@@ -389,7 +375,7 @@ exports[`<Header /> renders correctly for authenticated mobile 1`] = `
     </a>
   </div>
   <div
-    className="w-100 d-flex justify-content-end align-items-center"
+    className="mobile-menu"
   >
     <nav
       aria-label="Secondary"
@@ -402,40 +388,26 @@ exports[`<Header /> renders correctly for authenticated mobile 1`] = `
         aria-expanded={false}
         aria-haspopup="menu"
         aria-label="Account Menu"
-        className="menu-trigger icon-button"
+        className="menu-trigger null"
         onClick={[Function]}
         title="Account Menu"
       >
-        <span
-          className="avatar overflow-hidden d-inline-flex rounded-circle null"
-          style={
-            Object {
-              "height": "1.5rem",
-              "width": "1.5rem",
-            }
-          }
+        <div
+          className="hamburger-menu"
         >
-          <svg
-            aria-hidden={true}
-            focusable="false"
-            height="24px"
-            role="img"
-            style={
-              Object {
-                "height": "1.5rem",
-                "width": "1.5rem",
-              }
-            }
-            version="1.1"
-            viewBox="0 0 24 24"
-            width="24px"
-          >
-            <path
-              d="M4.10255106,18.1351061 C4.7170266,16.0581859 8.01891846,14.4720277 12,14.4720277 C15.9810815,14.4720277 19.2829734,16.0581859 19.8974489,18.1351061 C21.215206,16.4412566 22,14.3122775 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,14.3122775 2.78479405,16.4412566 4.10255106,18.1351061 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z M12,13 C9.790861,13 8,11.209139 8,9 C8,6.790861 9.790861,5 12,5 C14.209139,5 16,6.790861 16,9 C16,11.209139 14.209139,13 12,13 Z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
+          <span
+            className="line"
+          />
+          <span
+            className="line"
+          />
+          <span
+            className="line"
+          />
+          <span
+            className="line"
+          />
+        </div>
       </button>
     </nav>
   </div>

diff --git a/src/learning-header/AuthenticatedUserDropdown.jsx b/src/learning-header/AuthenticatedUserDropdown.jsx
@@ -1,8 +1,6 @@
 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';
@@ -17,34 +15,38 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
   );
 
   return (
-    <>
-      <a className="text-gray-700" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>
-      <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>
-        </Dropdown.Toggle>
-        <Dropdown.Menu className="dropdown-menu-right">
-          {dashboardMenuItem}
-          <Dropdown.Item href={`${getConfig().ACCOUNT_PROFILE_URL}/u/${username}`}>
-            {intl.formatMessage(messages.profile)}
-          </Dropdown.Item>
-          <Dropdown.Item href={getConfig().ACCOUNT_SETTINGS_URL}>
-            {intl.formatMessage(messages.account)}
-          </Dropdown.Item>
-          { getConfig().ORDER_HISTORY_URL && (
-            <Dropdown.Item href={getConfig().ORDER_HISTORY_URL}>
-              {intl.formatMessage(messages.orderHistory)}
-            </Dropdown.Item>
-          )}
-          <Dropdown.Item href={getConfig().LOGOUT_URL}>
-            {intl.formatMessage(messages.signOut)}
-          </Dropdown.Item>
-        </Dropdown.Menu>
-      </Dropdown>
-    </>
+    <Dropdown className="user-dropdown ml-3">
+      <Dropdown.Toggle variant="outline-primary">
+        <div className="hamburger-menu">
+          <span className="line" />
+          <span className="line" />
+          <span className="line" />
+          <span className="line" />
+        </div>
+        <span data-hj-suppress className="d-none d-md-inline">
+          {username}
+        </span>
+      </Dropdown.Toggle>
+      <Dropdown.Menu className="dropdown-menu-right">
+        <a href={`${getConfig().LMS_BASE_URL}/dashboard`} className="pgn__dropdown-item dropdown-item h-desktop">My Courses</a>
+        <a href={`${getConfig().LMS_BASE_URL}/courses`} className="pgn__dropdown-item dropdown-item h-desktop">Discover</a>
+        {dashboardMenuItem}
+        <Dropdown.Item href={`${getConfig().ACCOUNT_PROFILE_URL}/u/${username}`}>
+          {intl.formatMessage(messages.profile)}
+        </Dropdown.Item>
+        <Dropdown.Item href={getConfig().ACCOUNT_SETTINGS_URL}>
+          {intl.formatMessage(messages.account)}
+        </Dropdown.Item>
+        { getConfig().ORDER_HISTORY_URL && (
+        <Dropdown.Item href={getConfig().ORDER_HISTORY_URL}>
+          {intl.formatMessage(messages.orderHistory)}
+        </Dropdown.Item>
+        )}
+        <Dropdown.Item href={getConfig().LOGOUT_URL}>
+          {intl.formatMessage(messages.signOut)}
+        </Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown>
   );
 };
 

diff --git a/src/learning-header/LearningHeader.jsx b/src/learning-header/LearningHeader.jsx
@@ -40,13 +40,25 @@ const LearningHeader = ({
   );
 
   return (
-    <header className="learning-header">
+    <header className="learning-header customise indigo-header">
       <a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
       <div className="container-xl py-2 d-flex align-items-center">
         {headerLogo}
         <div className="flex-grow-1 course-title-lockup" style={{ lineHeight: 1 }}>
-          <span className="d-block small m-0">{courseOrg} {courseNumber}</span>
-          <span className="d-block m-0 font-weight-bold course-title">{courseTitle}</span>
+          <div className="course-info-header">
+            <span className="d-block title">{courseTitle}</span>
+            <span className="d-block org">{courseOrg} {courseNumber}</span>
+          </div>
+          <div className="nav-course">
+            <a href={`${getConfig().LMS_BASE_URL}/dashboard`}>
+              My Courses
+            </a>
+          </div>
+          <div className="nav-course">
+            <a href={`${getConfig().LMS_BASE_URL}/courses`}>
+              Discover
+            </a>
+          </div>
         </div>
         {showUserDropdown && authenticatedUser && (
         <AuthenticatedUserDropdown