fix: logistration hide user menu icon on mobile screens (#84)

VAN-227

.github/workflows/ci.yml

@@ -0,0 +1,26 @@
+name: Default CI
+on: [push, pull_request]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+      with:
+        fetch-depth: 0
+    - name: Setup Nodejs
+      uses: actions/setup-node@v1
+      with:
+        node-version: 12
+    - name: Install dependencies
+      run: npm ci
+    - name: Validate package-lock.json changes
+      run: make validate-no-uncommitted-package-lock-changes
+    - name: Lint
+      run: npm run lint
+    - name: Test
+      run: npm run test
+    - name: i18n_extract
+      run: npm run i18n_extract
+    - name: Coverage
+      uses: codecov/codecov-action@v1

.github/workflows/release.yml

@@ -0,0 +1,37 @@
+name: Release CI
+on:
+  push:
+    branches:
+      - master
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Setup Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Install dependencies
+        run: npm ci
+      - name: Validate package-lock.json changes
+        run: make validate-no-uncommitted-package-lock-changes
+      - name: Lint
+        run: npm run lint
+      - name: Test
+        run: npm run test
+      - name: i18n_extract
+        run: npm run i18n_extract
+      - name: Coverage
+        uses: codecov/codecov-action@v1
+      - name: Build
+        run: npm run build
+      - name: Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
+        run: npx semantic-release

.travis.yml

@@ -1,17 +0,0 @@
-language: node_js
-node_js: 12
-install:
-- npm install
-script:
-- npm run lint
-- npm run test
-- npm run build
-after_success:
-- npx semantic-release
-- codecov
-env:
-  global:
-  # GH_TOKEN
-  - secure: CFN/uOByWC+7S+AAXECLQ0mNgoiyCDl1ZB5AT5+/qP+xEVs0ysFKDWrD9W8KeQqHqCMPUKNt23nrgxwvFCkSx+n1MAnxZmOdVJWbzGbUB9TsqrwVUALkqof1MrRB8UFVEzIRaO60iRN/L3zVXML+4GsycYX6rHyptbAypxplpljDyKrY8tc/mM7AGZ9eVFGSq+7CXXmdvkhP9kLkH1tIYvR7wjTKvZHbHf6YRjIVCiyzxM4S/E9l8JRnbERp02XosRD62PUJXXk6EJVn6Qoub6CaPnpew5crW0iRF1UJs54U29zWd/S+LuW66WkLfJu7rDq6AFJNMtMNusJxwVkOv4X+p0oJDWZEhojW+/Wm10UAu8/g5oAqeePZEGiSbT3Hp1VqOc4FY/kmOLiM+L6oq/AA2XX6iiE8lA64IH5R8ApQamF4GTUYTvKHeLPgXnGJH7A95Xy9/+jmX9I9wJREMrHrkyPjoX/NTRdG+RrebB1+An9Bt9vAbG862gbOZfgTcuWHDOlG5gcA964Fr7RqR5a62yr45Gw+Q0lTrLj5mGAjjSpMRIAQzi9e7oXmoMZnvenu/WJAe5M+u+/gv82HeXcMwLvNNGSvz+0i1xNUOoX1zHG046oGKiX0Zu+l0JfNwihJTO7vJlaITmjhfOyufwpk74xEyrhf8nLF9e5Frec=
-  # NPM_TOKEN
-  - secure: fuV04Ctf0mgbw6nTJhsTzGZ6dyafZtGVj30ZkvSWsB9hUU8KDtl7wWVW9EayCQsSyyFgPY9RVav5olgC/zljAjDGg0nfF7n8uKIABA0TXdP683WZd06bVOmDXfL26B3yM83aW2xgHZN6VCCvCE8bLP1V6eV8nsr38gDgxVbHa0YasDMmvtYrog+IjxwjcJx7fD0RbYyi7iJC++pdw9kcFqOad28Us7L/jCn+rC3CmUT4kOwPjP5g1v5sB2FA7ouN5s1hUUTKuttV32VJgRP7wbZzoHeHX5BRGSqijdXNSaK5UwzqRnM1sGZkuNDZhJbSB3q90SQrPRgV+fRizwN8zs8Htb+Kk8+wGY6zNhmi9C+lUIv7UpDYbstMWYIf39+P/24Oj+vJBjMY30M9NWB8gt1OQ0dJUoK53v1+BMVmDB0doL6I53xwzUjQetvqOF0Wm3E3OrqJP00OJdzIcAeh2DzcIRW1SrBhI4HAsl7QJZNpRw11QzJ3K2iQSiWNd8qIuX+XJjzQdn1v09gCstvbP33Vn8tP1x0XTSi8wIhTDqE0bII/Sc80Jh76nu0ItQ8pmX4lGsER4C0N3Dp7Zz51yW7E70AWWLsUrMNdF0oHoP437ZRGPhYs5OI6x5AM2jlU8fJ5aUroEsYFCwkH0OO37THohpAQpApe9zL10miTEbw=

src/Header.jsx

@@ -20,7 +20,7 @@ ensureConfig([
   'LOGOUT_URL',
   'LOGIN_URL',
   'SITE_NAME',
-  'LOGO_TRADEMARK_URL',
+  'LOGO_URL',
 ], 'Header component');
 
 subscribe(APP_CONFIG_INITIALIZED, () => {
@@ -77,7 +77,7 @@ function Header({ intl }) {
   ];
 
   const props = {
-    logo: config.LOGO_TRADEMARK_URL,
+    logo: config.LOGO_URL,
     logoAltText: config.SITE_NAME,
     siteName: config.SITE_NAME,
     logoDestination: `${config.LMS_BASE_URL}/dashboard`,
@@ -85,7 +85,7 @@ function Header({ intl }) {
     username: authenticatedUser !== null ? authenticatedUser.username : null,
     avatar: authenticatedUser !== null ? authenticatedUser.avatar : null,
     mainMenu: getConfig().LOGISTRATION_MINIMAL_HEADER ? [] : mainMenu,
-    userMenu,
+    userMenu: getConfig().LOGISTRATION_MINIMAL_HEADER ? [] : userMenu,
     loggedOutItems: getConfig().LOGISTRATION_MINIMAL_HEADER ? [] : loggedOutItems,
   };
 

src/Header.messages.jsx

@@ -67,7 +67,7 @@ const messages = defineMessages({
     description: 'The aria label for the account menu trigger',
   },
   'header.label.account.menu.for': {
-    id: 'header.label.account.menu',
+    id: 'header.label.account.menu.for',
     defaultMessage: 'Account menu for {username}',
     description: 'The aria label for the account menu trigger when the username is displayed in it',
   },

src/Header.test.jsx

@@ -19,7 +19,7 @@ describe('<Header />', () => {
                 SITE_NAME: process.env.SITE_NAME,
                 LOGIN_URL: process.env.LOGIN_URL,
                 LOGOUT_URL: process.env.LOGOUT_URL,
-                LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
+                LOGO_URL: process.env.LOGO_URL,
               },
             }}
           >
@@ -51,7 +51,7 @@ describe('<Header />', () => {
                 SITE_NAME: process.env.SITE_NAME,
                 LOGIN_URL: process.env.LOGIN_URL,
                 LOGOUT_URL: process.env.LOGOUT_URL,
-                LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
+                LOGO_URL: process.env.LOGO_URL,
               },
             }}
           >
@@ -78,7 +78,7 @@ describe('<Header />', () => {
                 SITE_NAME: process.env.SITE_NAME,
                 LOGIN_URL: process.env.LOGIN_URL,
                 LOGOUT_URL: process.env.LOGOUT_URL,
-                LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
+                LOGO_URL: process.env.LOGO_URL,
               },
             }}
           >
@@ -110,7 +110,7 @@ describe('<Header />', () => {
                 SITE_NAME: process.env.SITE_NAME,
                 LOGIN_URL: process.env.LOGIN_URL,
                 LOGOUT_URL: process.env.LOGOUT_URL,
-                LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
+                LOGO_URL: process.env.LOGO_URL,
               },
             }}
           >

src/MobileHeader.jsx

@@ -91,6 +91,8 @@ 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' : '';
@@ -125,19 +127,21 @@ class MobileHeader extends React.Component {
           { 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">
+          {userMenu.length > 0 || loggedOutItems.length > 0 ? (
-            <MenuTrigger
+            <Menu tag="nav" aria-label={intl.formatMessage(messages['header.label.secondary.nav'])} className="position-static">
-              tag="button"
+              <MenuTrigger
-              className="icon-button"
+                tag="button"
-              aria-label={intl.formatMessage(messages['header.label.account.menu'])}
+                className="icon-button"
-              title={intl.formatMessage(messages['header.label.account.menu'])}
+                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>
+                <Avatar size="1.5rem" src={avatar} alt={username} />
-            <MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
+              </MenuTrigger>
-              {loggedIn ? this.renderUserMenuItems() : this.renderLoggedOutItems()}
+              <MenuContent tag="ul" className="nav flex-column pin-left pin-right border-top shadow py-2">
-            </MenuContent>
+                {loggedIn ? this.renderUserMenuItems() : this.renderLoggedOutItems()}
-          </Menu>
+              </MenuContent>
+            </Menu>
+          ) : null}
         </div>
       </header>
     );

src/__snapshots__/Header.test.jsx.snap

@@ -17,7 +17,7 @@ exports[`<Header /> renders correctly for anonymous desktop 1`] = `
         <img
           alt="edX"
           className="d-block"
-          src="https://edx-cdn.org/v3/default/logo-trademark.svg"
+          src="https://edx-cdn.org/v3/default/logo.svg"
         />
       </a>
       <nav
@@ -126,7 +126,7 @@ exports[`<Header /> renders correctly for anonymous mobile 1`] = `
       <img
         alt="edX"
         className="d-block"
-        src="https://edx-cdn.org/v3/default/logo-trademark.svg"
+        src="https://edx-cdn.org/v3/default/logo.svg"
       />
     </a>
   </div>
@@ -201,7 +201,7 @@ exports[`<Header /> renders correctly for authenticated desktop 1`] = `
         <img
           alt="edX"
           className="d-block"
-          src="https://edx-cdn.org/v3/default/logo-trademark.svg"
+          src="https://edx-cdn.org/v3/default/logo.svg"
         />
       </a>
       <nav
@@ -360,7 +360,7 @@ exports[`<Header /> renders correctly for authenticated mobile 1`] = `
       <img
         alt="edX"
         className="d-block"
-        src="https://edx-cdn.org/v3/default/logo-trademark.svg"
+        src="https://edx-cdn.org/v3/default/logo.svg"
       />
     </a>
   </div>

src/index.scss

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