Merge pull request #92 from edx/align-logo-to-left

fix: align logo to left

.gitignore

@@ -6,3 +6,4 @@ node_modules
 temp
 src/i18n/transifex_input.json
 module.config.js
+.idea/

package-lock.json

@@ -1660,13 +1660,13 @@
       }
     },
     "@edx/frontend-platform": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-1.8.0.tgz",
-      "integrity": "sha512-R4LGBKaSBWC9xxG3eTN78zw5CkBes4xQgazt78ApgenxzIoun+y0tdWyc/8PpjbKmyj0nACpsfARyeQy4rnGKA==",
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-1.8.1.tgz",
+      "integrity": "sha512-oHLSamyIDuCtdS7eDzLcYs4zsAOGf4uuywnnIKg1CnlEHzUrXnfmcajbNM3Wre5jJocGH+1qACuaGLELO+3sAQ==",
       "dev": true,
       "requires": {
         "@cospired/i18n-iso-languages": "2.1.2",
-        "axios": "0.18.1",
+        "axios": "0.21.1",
         "axios-cache-adapter": "^2.5.0",
         "form-urlencoded": "4.1.4",
         "glob": "7.1.6",
@@ -4294,13 +4294,20 @@
       "dev": true
     },
     "axios": {
-      "version": "0.18.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.1.tgz",
-      "integrity": "sha512-0BfJq4NSfQXd+SkFdrvFbG7addhYSBA2mQwISr46pD6E5iqkWg02RAs8vyTT/j0RTnoYmeXauBuSv1qKwR179g==",
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
       "dev": true,
       "requires": {
-        "follow-redirects": "1.5.10",
-        "is-buffer": "^2.0.2"
+        "follow-redirects": "^1.10.0"
+      },
+      "dependencies": {
+        "follow-redirects": {
+          "version": "1.13.1",
+          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.1.tgz",
+          "integrity": "sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg==",
+          "dev": true
+        }
       }
     },
     "axios-cache-adapter": {
@@ -11687,12 +11694,6 @@
       "integrity": "sha1-mPiygDBoQhmpXzdc+9iM40Bd/5M=",
       "dev": true
     },
-    "is-buffer": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
-      "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
-      "dev": true
-    },
     "is-callable": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.4.tgz",
@@ -17907,9 +17908,9 @@
       "dev": true
     },
     "react-redux": {
-      "version": "7.1.1",
-      "resolved": false,
-      "integrity": "sha512-QsW0vcmVVdNQzEkrgzh2W3Ksvr8cqpAv5FhEk7tNEft+5pp7rXxAudTz3VOPawRkLIepItpkEIyLcN/VVXzjTg==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.1.3.tgz",
+      "integrity": "sha512-uI1wca+ECG9RoVkWQFF4jDMqmaw0/qnvaSvOoL/GA4dNxf6LoV8sUAcNDvE5NWKs4hFpn0t6wswNQnY3f7HT3w==",
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.5.5",

package.json

@@ -40,7 +40,7 @@
     "@commitlint/prompt-cli": "8.2.0",
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
     "@edx/frontend-build": "5.4.0",
-    "@edx/frontend-platform": "1.8.0",
+    "@edx/frontend-platform": "1.8.1",
     "@edx/paragon": "12.0.5",
     "codecov": "3.7.2",
     "enzyme": "3.10.0",
@@ -49,7 +49,7 @@
     "prop-types": "15.7.2",
     "react": "16.9.0",
     "react-dom": "16.9.0",
-    "react-redux": "7.1.1",
+    "react-redux": "7.1.3",
     "react-router-dom": "5.1.2",
     "react-test-renderer": "16.9.0",
     "reactifex": "1.1.1",

src/DesktopHeader.jsx

@@ -1,6 +1,7 @@
 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';
@@ -103,10 +104,11 @@ class DesktopHeader extends React.Component {
       intl,
     } = this.props;
     const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
+    const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'mw-100' : null;
 
     return (
       <header className="site-header-desktop">
-        <div className="container-fluid">
+        <div className={`container-fluid ${logoClasses}`}>
           <div className="nav-container position-relative d-flex align-items-center">
             {logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} />}
             <nav

src/Header.jsx

@@ -25,7 +25,7 @@ ensureConfig([
 
 subscribe(APP_CONFIG_INITIALIZED, () => {
   mergeConfig({
-    LOGISTRATION_MINIMAL_HEADER: !!process.env.LOGISTRATION_MINIMAL_HEADER,
+    AUTHN_MINIMAL_HEADER: !!process.env.AUTHN_MINIMAL_HEADER,
   }, 'Header additional config');
 });
 
@@ -84,9 +84,9 @@ function Header({ intl }) {
     loggedIn: authenticatedUser !== null,
     username: authenticatedUser !== null ? authenticatedUser.username : null,
     avatar: authenticatedUser !== null ? authenticatedUser.avatar : null,
-    mainMenu: getConfig().LOGISTRATION_MINIMAL_HEADER ? [] : mainMenu,
-    userMenu,
-    loggedOutItems: getConfig().LOGISTRATION_MINIMAL_HEADER ? [] : loggedOutItems,
+    mainMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : mainMenu,
+    userMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : userMenu,
+    loggedOutItems: getConfig().AUTHN_MINIMAL_HEADER ? [] : loggedOutItems,
   };
 
   return (

src/MobileHeader.jsx

@@ -1,6 +1,7 @@
 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';
@@ -91,17 +92,21 @@ class MobileHeader extends React.Component {
       stickyOnMobile,
       intl,
       mainMenu,
+      userMenu,
+      loggedOutItems,
     } = this.props;
     const logoProps = { src: logo, alt: logoAltText, href: logoDestination };
     const stickyClassName = stickyOnMobile ? 'sticky-top' : '';
+    const logoClasses = getConfig().AUTHN_MINIMAL_HEADER ? 'justify-content-left pl-3' : 'justify-content-center';
 
     return (
       <header
         aria-label={intl.formatMessage(messages['header.label.main.header'])}
         className={`site-header-mobile d-flex justify-content-between align-items-center shadow ${stickyClassName}`}
       >
-        <div className="w-100 d-flex justify-content-start">
-          {mainMenu.length > 0 ? (
+        {mainMenu.length > 0 ? (
+          <div className="w-100 d-flex justify-content-start">
+
             <Menu className="position-static">
               <MenuTrigger
                 tag="button"
@@ -119,26 +124,28 @@ class MobileHeader extends React.Component {
                 {this.renderMainMenu()}
               </MenuContent>
             </Menu>
-          ) : null}
-        </div>
-        <div className="w-100 d-flex justify-content-center">
+          </div>
+        ) : null}
+        <div className={`w-100 d-flex ${logoClasses}`}>
           { logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} itemType="http://schema.org/Organization" />}
         </div>
-        <div className="w-100 d-flex justify-content-end align-items-center">
-          <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} />
-            </MenuTrigger>
-            <MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
-              {loggedIn ? this.renderUserMenuItems() : this.renderLoggedOutItems()}
-            </MenuContent>
-          </Menu>
-        </div>
+        {userMenu.length > 0 || loggedOutItems.length > 0 ? (
+          <div className="w-100 d-flex justify-content-end align-items-center">
+            <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} />
+              </MenuTrigger>
+              <MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
+                {loggedIn ? this.renderUserMenuItems() : this.renderLoggedOutItems()}
+              </MenuContent>
+            </Menu>
+          </div>
+        ) : null}
       </header>
     );
   }

src/__snapshots__/Header.test.jsx.snap

@@ -5,7 +5,7 @@ exports[`<Header /> renders correctly for anonymous desktop 1`] = `
   className="site-header-desktop"
 >
   <div
-    className="container-fluid"
+    className="container-fluid null"
   >
     <div
       className="nav-container position-relative d-flex align-items-center"
@@ -189,7 +189,7 @@ exports[`<Header /> renders correctly for authenticated desktop 1`] = `
   className="site-header-desktop"
 >
   <div
-    className="container-fluid"
+    className="container-fluid null"
   >
     <div
       className="nav-container position-relative d-flex align-items-center"

src/index.scss

@@ -32,6 +32,8 @@ $white: #fff;
 }
 
 .site-header-mobile {
+  height: 3rem;
+
   .nav-link {
     text-decoration: none;
     cursor: pointer;