Merge pull request #89 from edx/aehsan/logistration-renmaed-to-authn

fix: logistration renamed to authn

.env

@@ -1,33 +0,0 @@
-BASE_URL=localhost:1995
-SITE_NAME=Open edX
-LMS_BASE_URL=http://localhost:18000
-CREDENTIALS_BASE_URL=http://localhost:18150
-ECOMMERCE_BASE_URL=http://localhost:18130
-LOGIN_URL=http://localhost:18000/login
-LOGOUT_URL=http://localhost:18000/login
-CSRF_TOKEN_API_PATH=/csrf/api/v1/token
-REFRESH_ACCESS_TOKEN_ENDPOINT=http://localhost:18000/login_refresh
-SEGMENT_KEY=ul
-ACCESS_TOKEN_COOKIE_NAME=edx-jwt-cookie-header-payload
-USER_INFO_COOKIE_NAME=edx-user-info
-CSRF_COOKIE_NAME=csrftoken
-LANGUAGE_PREFERENCE_COOKIE_NAME=openedx-language-preference
-SITE_NAME=edX
-MARKETING_SITE_BASE_URL=http://localhost:18000
-ENTERPRISE_MARKETING_URL=http://example.com
-ENTERPRISE_MARKETING_UTM_CAMPAIGN=my_campaign
-ENTERPRISE_MARKETING_UTM_SOURCE=edX profile
-ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=Footer
-SUPPORT_URL=http://localhost:18000/support
-CONTACT_URL=http://localhost:18000/contact
-OPEN_SOURCE_URL=http://localhost:18000/openedx
-TERMS_OF_SERVICE_URL=http://localhost:18000/terms-of-service
-PRIVACY_POLICY_URL=http://localhost:18000/privacy-policy
-FACEBOOK_URL=https://www.facebook.com
-TWITTER_URL=https://twitter.com
-YOU_TUBE_URL=https://www.youtube.com
-LINKED_IN_URL=https://www.linkedin.com
-REDDIT_URL=https://www.reddit.com
-APPLE_APP_STORE_URL=https://www.apple.com/ios/app-store/
-GOOGLE_PLAY_URL=https://play.google.com/store
-ORDER_HISTORY_URL=localhost:1996/orders

.env.development

@@ -0,0 +1,19 @@
+ACCESS_TOKEN_COOKIE_NAME=edx-jwt-cookie-header-payload
+BASE_URL=localhost:8080
+CREDENTIALS_BASE_URL=http://localhost:18150
+CSRF_TOKEN_API_PATH=/csrf/api/v1/token
+ECOMMERCE_BASE_URL=http://localhost:18130
+LANGUAGE_PREFERENCE_COOKIE_NAME=openedx-language-preference
+LMS_BASE_URL=http://localhost:18000
+LOGIN_URL=http://localhost:18000/login
+LOGOUT_URL=http://localhost:18000/login
+MARKETING_SITE_BASE_URL=http://localhost:18000
+ORDER_HISTORY_URL=localhost:1996/orders
+REFRESH_ACCESS_TOKEN_ENDPOINT=http://localhost:18000/login_refresh
+SEGMENT_KEY=null
+SITE_NAME=Open edX
+USER_INFO_COOKIE_NAME=edx-user-info
+LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
+LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
+LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
+FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico

.eslintrc.js

@@ -0,0 +1,3 @@
+const { createConfig } = require('@edx/frontend-build');
+
+module.exports = createConfig('eslint');

.eslintrc.json

@@ -1,19 +0,0 @@
-{
-    "extends": "eslint-config-edx",
-    "parser": "babel-eslint",
-    "rules": {
-        "import/no-extraneous-dependencies": [
-            "error",
-            {
-                "devDependencies": [
-                    "webpack.config.js",
-                    "**/*.test.jsx",
-                    "**/*.test.js"
-                ]
-            }
-        ]
-    },
-    "env": {
-        "jest": true
-    }
-}

.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

.gitignore

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

.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:
-- npm run 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=

Makefile

@@ -12,7 +12,7 @@ transifex_temp = ./temp/babel-plugin-react-intl
 
 build:
 	rm -rf ./dist
-	./node_modules/.bin/babel src --out-dir dist --source-maps --ignore **/*.test.jsx,**/__mocks__,**/__snapshots__,**/setupTest.js --copy-files
+	./node_modules/.bin/fedx-scripts babel src --out-dir dist --source-maps --ignore **/*.test.jsx,**/__mocks__,**/__snapshots__,**/setupTest.js --copy-files
 	@# --copy-files will bring in everything else that wasn't processed by babel. Remove what we don't want.
 	@rm -rf dist/**/*.test.jsx
 	@rm -rf dist/**/__snapshots__

README.rst

@@ -7,15 +7,15 @@ This is the standard Open edX header for use in React applications. It has two e
   - **default**: The Header Component
   - **messages**: for i18n in the form of ``{ locale: { key: translatedString } }``
 
-.. |Build Status| image:: https://api.travis-ci.org/edx/frontend-component-header.svg?branch=master-edx
-   :target: https://travis-ci.org/edx/frontend-component-header
+.. |Build Status| image:: https://api.travis-ci.com/edx/frontend-component-header.svg?branch=master
+   :target: https://travis-ci.com/edx/frontend-component-header
 .. |Codecov| image:: https://img.shields.io/codecov/c/github/edx/frontend-component-header
    :target: @edx/frontend-component-header
-.. |npm_version| image:: https://img.shields.io/npm/v/@edx/frontend-component-header.svg-edx
+.. |npm_version| image:: https://img.shields.io/npm/v/@edx/frontend-component-header.svg
    :target: @edx/frontend-component-header
-.. |npm_downloads| image:: https://img.shields.io/npm/dt/@edx/frontend-component-header.svg-edx
+.. |npm_downloads| image:: https://img.shields.io/npm/dt/@edx/frontend-component-header.svg
    :target: @edx/frontend-component-header
-.. |license| image:: https://img.shields.io/npm/l/@edx/frontend-component-header.svg-edx
+.. |license| image:: https://img.shields.io/npm/l/@edx/frontend-component-header.svg
    :target: @edx/frontend-component-header
 .. |semantic-release| image:: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
    :target: https://github.com/semantic-release/semantic-release

babel.config.js

@@ -1,33 +1,3 @@
-module.exports = {
-  presets: [
-    [
-      '@babel/preset-env',
-      {
-        modules: false,
-      },
-    ],
-    '@babel/preset-react',
-  ],
-  plugins: [
-    '@babel/plugin-proposal-object-rest-spread',
-    '@babel/plugin-proposal-class-properties',
-  ],
-  env: {
-    i18n: {
-      plugins: [
-        [
-          'react-intl',
-          {
-            messagesDir: './temp/babel-plugin-react-intl',
-            moduleSourceName: '@edx/frontend-i18n',
-          },
-        ],
-      ],
-    },
-    test: {
-      presets: [
-        '@babel/preset-env',
-      ],
-    },
-  },
-};
+const { createConfig } = require('@edx/frontend-build');
+
+module.exports = createConfig('babel-preserve-modules');

example/.sassrc.js

@@ -1,10 +0,0 @@
-const path = require('path');
-
-// Resolve ~tilda paths used in paragon to
-// node_modules. This is used to reference
-// bootstrap specifically.
-module.exports = {
-  includePaths: [
-    path.resolve(__dirname, '../node_modules'),
-  ],
-};

example/index.html

@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en-us">
-  <head>
-    <title>Example</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  </head>
-  <body>
-    <div id="root"></div>
-    <script src="./index.js"></script>
-  </body>
-</html>

example/index.js

@@ -1,35 +1,43 @@
+import 'babel-polyfill';
+
 import React from 'react';
-import { render } from 'react-dom';
-import { IntlProvider } from '@edx/frontend-i18n';
-import { AuthenticationContext } from '@edx/frontend-base';
+import ReactDOM from 'react-dom';
+import { initialize, getConfig, subscribe, APP_READY } from '@edx/frontend-platform';
+import { AppContext, AppProvider } from '@edx/frontend-platform/react';
+import Header from '@edx/frontend-component-header';
 
 import './index.scss';
-import SiteHeader from '../src/';
 
-const App = () => (
-  <div>
-    <IntlProvider locale="en">
-      <>
-        <AuthenticationContext.Provider value={{
-          userId: null,
-          username: null,
-          administrator: false,
-        }}>
-          <SiteHeader />
-        </AuthenticationContext.Provider>
-        <h5 className="mt-2 mb-5">Logged out state</h5>
+subscribe(APP_READY, () => {
+  ReactDOM.render(
+    <AppProvider>
+      {/* We can fake out authentication by including another provider here with the data we want */}
+      <AppContext.Provider value={{
+        authenticatedUser: null,
+        config: getConfig(),
+      }}>
+        <Header />
+      </AppContext.Provider>
+      <h5 className="mt-2 mb-5">Logged out state</h5>
 
-        <AuthenticationContext.Provider value={{
-          userId: null,
+      {/* We can fake out authentication by including another provider here with the data we want */}
+      <AppContext.Provider value={{
+        authenticatedUser: {
+          userId: '123abc',
           username: 'testuser',
+          roles: [],
           administrator: false,
-        }}>
-          <SiteHeader />
-        </AuthenticationContext.Provider>
-        <h5 className="mt-2">Logged in state</h5>
-      </>
-    </IntlProvider>
-  </div>
-);
+        },
+        config: getConfig(),
+      }}>
+        <Header />
+      </AppContext.Provider>
+      <h5 className="mt-2">Logged in state</h5>
+    </AppProvider>,
+    document.getElementById('root'),
+  );
+});
 
-render(<App />, document.getElementById('root'));
+initialize({
+  messages: []
+});

example/index.scss

@@ -1,2 +1,6 @@
-@import "~@edx/paragon/scss/core/core.scss";
-@import '../src/index.scss';
+@import "@edx/brand/paragon/fonts";
+@import "@edx/brand/paragon/variables";
+@import "@edx/paragon/scss/core/core";
+@import "@edx/brand/paragon/overrides";
+
+@import "@edx/frontend-component-header/index";

jest.config.js

@@ -0,0 +1,7 @@
+const { createConfig } = require('@edx/frontend-build');
+
+module.exports = createConfig('jest', {
+  setupFiles: [
+    '<rootDir>/src/setupTest.js',
+  ],
+});

package.json

@@ -2,22 +2,27 @@
   "name": "@edx/frontend-component-header",
   "version": "1.0.0-semantically-released",
   "description": "The standard header for Open edX",
+  "main": "dist/index.js",
   "publishConfig": {
     "access": "public"
   },
-  "main": "dist/index.js",
   "scripts": {
     "build": "make build",
-    "i18n_extract": "BABEL_ENV=i18n babel src --quiet > /dev/null",
-    "lint": "eslint --ext .js --ext .jsx .",
-    "semantic-release": "semantic-release",
-    "start": "parcel ./example/index.html --no-source-maps --out-dir example/dist",
-    "test": "jest --coverage --passWithNoTests"
+    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
+    "snapshot": "fedx-scripts jest --updateSnapshot",
+    "start": "fedx-scripts webpack-dev-server --progress",
+    "test": "fedx-scripts jest --coverage"
   },
   "files": [
-    "/dist",
-    "/src"
+    "/dist"
   ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint",
+      "commit-msg": "commitlint -e $GIT_PARAMS"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/edx/frontend-component-header.git"
@@ -29,66 +34,38 @@
   },
   "homepage": "https://github.com/edx/frontend-component-header#readme",
   "devDependencies": {
-    "@babel/cli": "^7.6.0",
-    "@babel/core": "^7.6.0",
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
-    "@babel/preset-env": "^7.6.0",
-    "@babel/preset-react": "^7.0.0",
-    "@edx/frontend-analytics": "^2.0.0",
-    "@edx/frontend-auth": "^6.0.1",
-    "@edx/frontend-base": "^1.1.1",
-    "@edx/frontend-i18n": "^3.0.2",
-    "@edx/frontend-logging": "^3.0.1",
-    "@edx/paragon": "^7.1.2",
-    "babel-eslint": "^10.0.3",
-    "babel-plugin-react-intl": "^4.1.18",
-    "dotenv": "^8.1.0",
-    "enzyme": "^3.10.0",
-    "eslint": "^6.3.0",
-    "eslint-config-edx": "^4.0.4",
-    "jest": "^24.9.0",
-    "parcel-bundler": "^1.12.3",
-    "prop-types": "^15.7.2",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "react-redux": "^7.1.1",
-    "react-router-dom": "^5.0.1",
-    "react-test-renderer": "^16.9.0",
-    "reactifex": "^1.1.1",
-    "redux": "^4.0.4",
-    "redux-saga": "^1.0.5",
-    "sass": "^1.22.12",
-    "semantic-release": "^15.13.24"
-  },
-  "peerDependencies": {
-    "@edx/frontend-analytics": "^2.0.0",
-    "@edx/frontend-base": "^1.1.1",
-    "@edx/frontend-i18n": "^3.0.2",
-    "prop-types": "^15.7.2",
-    "react": "^16.9.0"
+    "@commitlint/cli": "8.2.0",
+    "@commitlint/config-angular": "8.2.0",
+    "@commitlint/prompt": "8.2.0",
+    "@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.1",
+    "@edx/paragon": "12.0.5",
+    "codecov": "3.7.2",
+    "enzyme": "3.10.0",
+    "enzyme-adapter-react-16": "1.14.0",
+    "husky": "3.0.9",
+    "prop-types": "15.7.2",
+    "react": "16.9.0",
+    "react-dom": "16.9.0",
+    "react-redux": "7.1.3",
+    "react-router-dom": "5.1.2",
+    "react-test-renderer": "16.9.0",
+    "reactifex": "1.1.1",
+    "redux": "4.0.4",
+    "redux-saga": "1.1.1"
   },
   "dependencies": {
-    "react-responsive": "^8.0.1",
-    "react-transition-group": "^4.3.0"
+    "babel-polyfill": "6.26.0",
+    "react-responsive": "8.0.3",
+    "react-transition-group": "4.3.0"
   },
-  "jest": {
-    "transform": {
-      "^.+\\.jsx?$": "babel-jest"
-    },
-    "collectCoverageFrom": [
-      "src/**/*.{js,jsx}",
-      "!**/node_modules/**",
-      "!**/dist/**"
-    ],
-    "moduleNameMapper": {
-      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/__mocks__/fileMock.js"
-    },
-    "transformIgnorePatterns": [
-      "/node_modules/(?!@edx)"
-    ],
-    "setupFiles": [
-      "dotenv/config"
-    ]
+  "peerDependencies": {
+    "@edx/frontend-platform": "^1.8.0",
+    "@edx/paragon": "^7.0.0",
+    "prop-types": "^15.5.10",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0"
   }
 }

public/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en-us" dir="ltr">
+  <head>
+      <title>Header</title>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

renovate.json

@@ -1,5 +1,9 @@
 {
   "extends": [
     "config:base"
-  ]
+  ],
+  "patch": {
+    "automerge": true
+  },
+  "rebaseStalePrs": true
 }

src/Avatar.jsx

@@ -12,7 +12,7 @@ function Avatar({
   const avatar = src ? (
     <img className="d-block w-100 h-100" src={src} alt={alt} />
   ) : (
-    <AvatarIcon className="text-muted" style={{ width: size, height: size }} role="img" aria-hidden focusable="false" />
+    <AvatarIcon style={{ width: size, height: size }} role="img" aria-hidden focusable="false" />
   );
 
   return (

src/DesktopHeader.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 // Local Components
 import { Menu, MenuTrigger, MenuContent } from './Menu';
@@ -8,7 +8,7 @@ import Avatar from './Avatar';
 import { LinkedLogo, Logo } from './Logo';
 
 // i18n
-import messages from './SiteHeader.messages';
+import messages from './Header.messages';
 
 // Assets
 import { CaretIcon } from './Icons';
@@ -22,7 +22,9 @@ class DesktopHeader extends React.Component {
     const { mainMenu } = this.props;
 
     // Nodes are accepted as a prop
-    if (!Array.isArray(mainMenu)) return mainMenu;
+    if (!Array.isArray(mainMenu)) {
+      return mainMenu;
+    }
 
     return mainMenu.map((menuItem) => {
       const {
@@ -64,7 +66,7 @@ class DesktopHeader extends React.Component {
         <MenuTrigger
           tag="button"
           aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { username })}
-          className="btn btn-light d-inline-flex align-items-center pl-2 pr-3"
+          className="btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
         >
           <Avatar size="1.5em" src={avatar} alt="" className="mr-2" />
           {username} <CaretIcon role="img" aria-hidden focusable="false" />
@@ -106,7 +108,7 @@ class DesktopHeader extends React.Component {
       <header className="site-header-desktop">
         <div className="container-fluid">
           <div className="nav-container position-relative d-flex align-items-center">
-            { logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} />}
+            {logoDestination === null ? <Logo className="logo" src={logo} alt={logoAltText} /> : <LinkedLogo className="logo" {...logoProps} />}
             <nav
               aria-label={intl.formatMessage(messages['header.label.main.nav'])}
               className="nav main-nav"

src/Header.jsx

@@ -0,0 +1,108 @@
+import React, { useContext } from 'react';
+import Responsive from 'react-responsive';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { AppContext } from '@edx/frontend-platform/react';
+import {
+  APP_CONFIG_INITIALIZED,
+  ensureConfig,
+  mergeConfig,
+  getConfig,
+  subscribe,
+} from '@edx/frontend-platform';
+
+import DesktopHeader from './DesktopHeader';
+import MobileHeader from './MobileHeader';
+
+import messages from './Header.messages';
+
+ensureConfig([
+  'LMS_BASE_URL',
+  'LOGOUT_URL',
+  'LOGIN_URL',
+  'SITE_NAME',
+  'LOGO_URL',
+], 'Header component');
+
+subscribe(APP_CONFIG_INITIALIZED, () => {
+  mergeConfig({
+    AUTHN_MINIMAL_HEADER: !!process.env.AUTHN_MINIMAL_HEADER,
+  }, 'Header additional config');
+});
+
+function Header({ intl }) {
+  const { authenticatedUser, config } = useContext(AppContext);
+
+  const mainMenu = [
+    {
+      type: 'item',
+      href: `${config.LMS_BASE_URL}/dashboard`,
+      content: intl.formatMessage(messages['header.links.courses']),
+    },
+  ];
+
+  const userMenu = authenticatedUser === null ? [] : [
+    {
+      type: 'item',
+      href: `${config.LMS_BASE_URL}/dashboard`,
+      content: intl.formatMessage(messages['header.user.menu.dashboard']),
+    },
+    {
+      type: 'item',
+      href: `${config.LMS_BASE_URL}/u/${authenticatedUser.username}`,
+      content: intl.formatMessage(messages['header.user.menu.profile']),
+    },
+    {
+      type: 'item',
+      href: `${config.LMS_BASE_URL}/account/settings`,
+      content: intl.formatMessage(messages['header.user.menu.account.settings']),
+    },
+    {
+      type: 'item',
+      href: config.LOGOUT_URL,
+      content: intl.formatMessage(messages['header.user.menu.logout']),
+    },
+  ];
+
+  const loggedOutItems = [
+    {
+      type: 'item',
+      href: config.LOGIN_URL,
+      content: intl.formatMessage(messages['header.user.menu.login']),
+    },
+    {
+      type: 'item',
+      href: `${config.LMS_BASE_URL}/register`,
+      content: intl.formatMessage(messages['header.user.menu.register']),
+    },
+  ];
+
+  const props = {
+    logo: config.LOGO_URL,
+    logoAltText: config.SITE_NAME,
+    siteName: config.SITE_NAME,
+    logoDestination: `${config.LMS_BASE_URL}/dashboard`,
+    loggedIn: authenticatedUser !== null,
+    username: authenticatedUser !== null ? authenticatedUser.username : null,
+    avatar: authenticatedUser !== null ? authenticatedUser.avatar : null,
+    mainMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : mainMenu,
+    userMenu: getConfig().AUTHN_MINIMAL_HEADER ? [] : userMenu,
+    loggedOutItems: getConfig().AUTHN_MINIMAL_HEADER ? [] : loggedOutItems,
+  };
+
+  return (
+    <>
+      <Responsive maxWidth={768}>
+        <MobileHeader {...props} />
+      </Responsive>
+      <Responsive minWidth={769}>
+        <DesktopHeader {...props} />
+      </Responsive>
+    </>
+  );
+}
+
+Header.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(Header);

src/Header.messages.jsx

@@ -1,4 +1,4 @@
-import { defineMessages } from '@edx/frontend-i18n';
+import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
   'header.links.courses': {
@@ -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

@@ -0,0 +1,127 @@
+import React from 'react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import TestRenderer from 'react-test-renderer';
+import { AppContext } from '@edx/frontend-platform/react';
+import { Context as ResponsiveContext } from 'react-responsive';
+
+import Header from './index';
+
+describe('<Header />', () => {
+  it('renders correctly for anonymous desktop', () => {
+    const component = (
+      <ResponsiveContext.Provider value={{ width: 1280 }}>
+        <IntlProvider locale="en" messages={{}}>
+          <AppContext.Provider
+            value={{
+              authenticatedUser: null,
+              config: {
+                LMS_BASE_URL: process.env.LMS_BASE_URL,
+                SITE_NAME: process.env.SITE_NAME,
+                LOGIN_URL: process.env.LOGIN_URL,
+                LOGOUT_URL: process.env.LOGOUT_URL,
+                LOGO_URL: process.env.LOGO_URL,
+              },
+            }}
+          >
+            <Header />
+          </AppContext.Provider>
+        </IntlProvider>
+      </ResponsiveContext.Provider>
+    );
+
+    const wrapper = TestRenderer.create(component);
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly for authenticated desktop', () => {
+    const component = (
+      <ResponsiveContext.Provider value={{ width: 1280 }}>
+        <IntlProvider locale="en" messages={{}}>
+          <AppContext.Provider
+            value={{
+              authenticatedUser: {
+                userId: 'abc123',
+                username: 'edX',
+                roles: [],
+                administrator: false,
+              },
+              config: {
+                LMS_BASE_URL: process.env.LMS_BASE_URL,
+                SITE_NAME: process.env.SITE_NAME,
+                LOGIN_URL: process.env.LOGIN_URL,
+                LOGOUT_URL: process.env.LOGOUT_URL,
+                LOGO_URL: process.env.LOGO_URL,
+              },
+            }}
+          >
+            <Header />
+          </AppContext.Provider>
+        </IntlProvider>
+      </ResponsiveContext.Provider>
+    );
+
+    const wrapper = TestRenderer.create(component);
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly for anonymous mobile', () => {
+    const component = (
+      <ResponsiveContext.Provider value={{ width: 500 }}>
+        <IntlProvider locale="en" messages={{}}>
+          <AppContext.Provider
+            value={{
+              authenticatedUser: null,
+              config: {
+                LMS_BASE_URL: process.env.LMS_BASE_URL,
+                SITE_NAME: process.env.SITE_NAME,
+                LOGIN_URL: process.env.LOGIN_URL,
+                LOGOUT_URL: process.env.LOGOUT_URL,
+                LOGO_URL: process.env.LOGO_URL,
+              },
+            }}
+          >
+            <Header />
+          </AppContext.Provider>
+        </IntlProvider>
+      </ResponsiveContext.Provider>
+    );
+
+    const wrapper = TestRenderer.create(component);
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly for authenticated mobile', () => {
+    const component = (
+      <ResponsiveContext.Provider value={{ width: 500 }}>
+        <IntlProvider locale="en" messages={{}}>
+          <AppContext.Provider
+            value={{
+              authenticatedUser: {
+                userId: 'abc123',
+                username: 'edX',
+                roles: [],
+                administrator: false,
+              },
+              config: {
+                LMS_BASE_URL: process.env.LMS_BASE_URL,
+                SITE_NAME: process.env.SITE_NAME,
+                LOGIN_URL: process.env.LOGIN_URL,
+                LOGOUT_URL: process.env.LOGOUT_URL,
+                LOGO_URL: process.env.LOGO_URL,
+              },
+            }}
+          >
+            <Header />
+          </AppContext.Provider>
+        </IntlProvider>
+      </ResponsiveContext.Provider>
+    );
+
+    const wrapper = TestRenderer.create(component);
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});

src/Logo.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-
 function Logo({ src, alt, ...attributes }) {
   return (
     <img src={src} alt={alt} {...attributes} />

src/Menu/Menu.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { CSSTransition } from 'react-transition-group';
 import PropTypes from 'prop-types';
 
-
 function MenuTrigger({ tag, className, ...attributes }) {
   return React.createElement(tag, {
     className: `menu-trigger ${className}`,
@@ -19,7 +18,6 @@ MenuTrigger.defaultProps = {
 };
 const MenuTriggerType = <MenuTrigger />.type;
 
-
 function MenuContent({ tag, className, ...attributes }) {
   return React.createElement(tag, {
     className: ['menu-content', className].join(' '),
@@ -35,6 +33,17 @@ MenuContent.defaultProps = {
   className: null,
 };
 
+const menuPropTypes = {
+  tag: PropTypes.string,
+  onClose: PropTypes.func,
+  onOpen: PropTypes.func,
+  closeOnDocumentClick: PropTypes.bool,
+  respondToPointerEvents: PropTypes.bool,
+  className: PropTypes.string,
+  transitionTimeout: PropTypes.number,
+  transitionClassName: PropTypes.string,
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+};
 
 class Menu extends React.Component {
   constructor(props) {
@@ -66,10 +75,14 @@ class Menu extends React.Component {
 
   // Event handlers
   onDocumentClick(e) {
-    if (!this.props.closeOnDocumentClick) return;
+    if (!this.props.closeOnDocumentClick) {
+      return;
+    }
 
     const clickIsInMenu = this.menu.current === e.target || this.menu.current.contains(e.target);
-    if (clickIsInMenu) return;
+    if (clickIsInMenu) {
+      return;
+    }
 
     this.close();
   }
@@ -77,7 +90,9 @@ class Menu extends React.Component {
   onTriggerClick(e) {
     // Let the browser follow the link of the trigger if the menu
     // is already expanded and the trigger has an href attribute
-    if (this.state.expanded && e.target.getAttribute('href')) return;
+    if (this.state.expanded && e.target.getAttribute('href')) {
+      return;
+    }
 
     e.preventDefault();
     this.toggle();
@@ -89,7 +104,9 @@ class Menu extends React.Component {
   }
 
   onKeyDown(e) {
-    if (!this.state.expanded) return;
+    if (!this.state.expanded) {
+      return;
+    }
     switch (e.key) {
       case 'Escape': {
         e.preventDefault();
@@ -131,16 +148,19 @@ class Menu extends React.Component {
   }
 
   onMouseEnter() {
-    if (!this.props.respondToPointerEvents) return;
+    if (!this.props.respondToPointerEvents) {
+      return;
+    }
     this.open();
   }
 
   onMouseLeave() {
-    if (!this.props.respondToPointerEvents) return;
+    if (!this.props.respondToPointerEvents) {
+      return;
+    }
     this.close();
   }
 
-
   // Internal functions
 
   getFocusableElements() {
@@ -151,7 +171,7 @@ class Menu extends React.Component {
     // Any extra props are attributes for the menu
     const attributes = {};
     Object.keys(this.props)
-      .filter(property => Menu.propTypes[property] === undefined)
+      .filter(property => menuPropTypes[property] === undefined)
       .forEach((property) => {
         attributes[property] = this.props[property];
       });
@@ -173,7 +193,9 @@ class Menu extends React.Component {
   }
 
   open() {
-    if (this.props.onOpen) this.props.onOpen();
+    if (this.props.onOpen) {
+      this.props.onOpen();
+    }
     this.setState({ expanded: true });
     // Listen to touchend and click events to ensure the menu
     // can be closed on mobile, pointer, and mixed input devices
@@ -182,7 +204,9 @@ class Menu extends React.Component {
   }
 
   close() {
-    if (this.props.onClose) this.props.onClose();
+    if (this.props.onClose) {
+      this.props.onClose();
+    }
     this.setState({ expanded: false });
     document.removeEventListener('touchend', this.onDocumentClick, true);
     document.removeEventListener('click', this.onDocumentClick, true);
@@ -240,18 +264,7 @@ class Menu extends React.Component {
   }
 }
 
-
-Menu.propTypes = {
-  tag: PropTypes.string,
-  onClose: PropTypes.func,
-  onOpen: PropTypes.func,
-  closeOnDocumentClick: PropTypes.bool,
-  respondToPointerEvents: PropTypes.bool,
-  className: PropTypes.string,
-  transitionTimeout: PropTypes.number,
-  transitionClassName: PropTypes.string,
-  children: PropTypes.arrayOf(PropTypes.node).isRequired,
-};
+Menu.propTypes = menuPropTypes;
 Menu.defaultProps = {
   tag: 'div',
   className: null,
@@ -263,5 +276,4 @@ Menu.defaultProps = {
   transitionClassName: 'menu-content',
 };
 
-
 export { Menu, MenuTrigger, MenuContent };

src/MobileHeader.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 // Local Components
 import { Menu, MenuTrigger, MenuContent } from './Menu';
@@ -8,7 +8,7 @@ import Avatar from './Avatar';
 import { LinkedLogo, Logo } from './Logo';
 
 // i18n
-import messages from './SiteHeader.messages';
+import messages from './Header.messages';
 
 // Assets
 import { MenuIcon } from './Icons';
@@ -22,7 +22,9 @@ class MobileHeader extends React.Component {
     const { mainMenu } = this.props;
 
     // Nodes are accepted as a prop
-    if (!Array.isArray(mainMenu)) return mainMenu;
+    if (!Array.isArray(mainMenu)) {
+      return mainMenu;
+    }
 
     return mainMenu.map((menuItem) => {
       const {
@@ -89,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' : '';
@@ -99,7 +103,7 @@ class MobileHeader extends React.Component {
         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 ? (
             <Menu className="position-static">
               <MenuTrigger
                 tag="button"
@@ -116,25 +120,28 @@ class MobileHeader extends React.Component {
               >
                 {this.renderMainMenu()}
               </MenuContent>
-            </Menu> : null }
+            </Menu>
+          ) : null}
         </div>
         <div className="w-100 d-flex justify-content-center">
           { 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>
+          {userMenu.length > 0 || loggedOutItems.length > 0 ? (
+            <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>
+          ) : null}
         </div>
       </header>
     );

src/SiteHeader.jsx

@@ -1,103 +0,0 @@
-import React, { useContext } from 'react';
-import Responsive from 'react-responsive';
-import { injectIntl, intlShape } from '@edx/frontend-i18n';
-import { App, AuthenticationContext } from '@edx/frontend-base';
-
-import DesktopHeader from './DesktopHeader';
-import MobileHeader from './MobileHeader';
-
-import LogoSVG from './logo.svg';
-
-import messages from './SiteHeader.messages';
-
-App.requireConfig([
-  'LMS_BASE_URL',
-  'LOGOUT_URL',
-  'LOGIN_URL',
-  'SITE_NAME',
-], 'Header component');
-
-const {
-  LMS_BASE_URL,
-  LOGOUT_URL,
-  LOGIN_URL,
-  SITE_NAME,
-} = App.config;
-
-function SiteHeader({ intl }) {
-  const { username, avatar } = useContext(AuthenticationContext);
-
-  const mainMenu = [
-    {
-      type: 'item',
-      href: `${LMS_BASE_URL}/dashboard`,
-      content: intl.formatMessage(messages['header.links.courses']),
-    },
-  ];
-
-  const userMenu = [
-    {
-      type: 'item',
-      href: `${LMS_BASE_URL}/dashboard`,
-      content: intl.formatMessage(messages['header.user.menu.dashboard']),
-    },
-    {
-      type: 'item',
-      href: `${LMS_BASE_URL}/u/${username}`,
-      content: intl.formatMessage(messages['header.user.menu.profile']),
-    },
-    {
-      type: 'item',
-      href: `${LMS_BASE_URL}/account/settings`,
-      content: intl.formatMessage(messages['header.user.menu.account.settings']),
-    },
-    {
-      type: 'item',
-      href: LOGOUT_URL,
-      content: intl.formatMessage(messages['header.user.menu.logout']),
-    },
-  ];
-
-  const loggedOutItems = [
-    {
-      type: 'item',
-      href: LOGIN_URL,
-      content: intl.formatMessage(messages['header.user.menu.login']),
-    },
-    {
-      type: 'item',
-      href: `${LMS_BASE_URL}/register`,
-      content: intl.formatMessage(messages['header.user.menu.register']),
-    },
-  ];
-
-  const props = {
-    logo: LogoSVG,
-    logoAltText: SITE_NAME,
-    siteName: SITE_NAME,
-    logoDestination: `${LMS_BASE_URL}/dashboard`,
-    loggedIn: !!username,
-    username,
-    avatar,
-    mainMenu,
-    userMenu,
-    loggedOutItems,
-  };
-
-  return (
-    <React.Fragment>
-      <Responsive maxWidth={768}>
-        <MobileHeader {...props} />
-      </Responsive>
-      <Responsive minWidth={769}>
-        <DesktopHeader {...props} />
-      </Responsive>
-    </React.Fragment>
-  );
-}
-
-SiteHeader.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(SiteHeader);

src/SiteHeader.test.jsx

@@ -1,54 +0,0 @@
-
-import React from 'react';
-import { IntlProvider } from '@edx/frontend-i18n';
-import TestRenderer from 'react-test-renderer';
-import { AuthenticationContext } from '@edx/frontend-base';
-import { Context as ResponsiveContext } from 'react-responsive';
-
-import SiteHeader from './index';
-
-describe('<SiteHeader />', () => {
-  it('renders correctly for desktop', () => {
-    const component = (
-      <ResponsiveContext.Provider value={{ width: 1280 }}>
-        <IntlProvider locale="en" messages={{}}>
-          <AuthenticationContext.Provider
-            value={{
-              userId: null,
-              username: null,
-              administrator: false,
-            }}
-          >
-            <SiteHeader />
-          </AuthenticationContext.Provider>
-        </IntlProvider>
-      </ResponsiveContext.Provider>
-    );
-
-    const wrapper = TestRenderer.create(component);
-
-    expect(wrapper.toJSON()).toMatchSnapshot();
-  });
-
-  it('renders correctly for mobile', () => {
-    const component = (
-      <ResponsiveContext.Provider value={{ width: 500 }}>
-        <IntlProvider locale="en" messages={{}}>
-          <AuthenticationContext.Provider
-            value={{
-              userId: null,
-              username: null,
-              administrator: false,
-            }}
-          >
-            <SiteHeader />
-          </AuthenticationContext.Provider>
-        </IntlProvider>
-      </ResponsiveContext.Provider>
-    );
-
-    const wrapper = TestRenderer.create(component);
-
-    expect(wrapper.toJSON()).toMatchSnapshot();
-  });
-});

src/__mocks__/fileMock.js

@@ -1,3 +0,0 @@
-// __mocks__/fileMock.js
-
-module.exports = 'test-file-stub';

src/__snapshots__/Header.test.jsx.snap

@@ -0,0 +1,419 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Header /> renders correctly for anonymous desktop 1`] = `
+<header
+  className="site-header-desktop"
+>
+  <div
+    className="container-fluid"
+  >
+    <div
+      className="nav-container position-relative d-flex align-items-center"
+    >
+      <a
+        className="logo"
+        href="http://localhost:18000/dashboard"
+      >
+        <img
+          alt="edX"
+          className="d-block"
+          src="https://edx-cdn.org/v3/default/logo.svg"
+        />
+      </a>
+      <nav
+        aria-label="Main"
+        className="nav main-nav"
+      >
+        <a
+          className="nav-link"
+          href="http://localhost:18000/dashboard"
+        >
+          Courses
+        </a>
+      </nav>
+      <nav
+        aria-label="Secondary"
+        className="nav secondary-menu-container align-items-center ml-auto"
+      >
+        <a
+          className="btn mr-2 btn-link"
+          href="http://localhost:18000/login"
+        >
+          Login
+        </a>
+        <a
+          className="btn mr-2 btn-outline-primary"
+          href="http://localhost:18000/register"
+        >
+          Sign Up
+        </a>
+      </nav>
+    </div>
+  </div>
+</header>
+`;
+
+exports[`<Header /> renders correctly for anonymous mobile 1`] = `
+<header
+  aria-label="Main"
+  className="site-header-mobile d-flex justify-content-between align-items-center shadow sticky-top"
+>
+  <div
+    className="w-100 d-flex justify-content-start"
+  >
+    <div
+      className="menu position-static"
+      onKeyDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+    >
+      <button
+        aria-expanded={false}
+        aria-haspopup="menu"
+        aria-label="Main Menu"
+        className="menu-trigger icon-button"
+        onClick={[Function]}
+        title="Main 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"
+        >
+          <rect
+            fill="currentColor"
+            height="2"
+            width="20"
+            x="2"
+            y="5"
+          />
+          <rect
+            fill="currentColor"
+            height="2"
+            width="20"
+            x="2"
+            y="11"
+          />
+          <rect
+            fill="currentColor"
+            height="2"
+            width="20"
+            x="2"
+            y="17"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+  <div
+    className="w-100 d-flex justify-content-center"
+  >
+    <a
+      className="logo"
+      href="http://localhost:18000/dashboard"
+      itemType="http://schema.org/Organization"
+    >
+      <img
+        alt="edX"
+        className="d-block"
+        src="https://edx-cdn.org/v3/default/logo.svg"
+      />
+    </a>
+  </div>
+  <div
+    className="w-100 d-flex justify-content-end align-items-center"
+  >
+    <nav
+      aria-label="Secondary"
+      className="menu position-static"
+      onKeyDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+    >
+      <button
+        aria-expanded={false}
+        aria-haspopup="menu"
+        aria-label="Account Menu"
+        className="menu-trigger icon-button"
+        onClick={[Function]}
+        title="Account Menu"
+      >
+        <span
+          className="avatar overflow-hidden d-inline-flex rounded-circle null"
+          style={
+            Object {
+              "height": "1.5rem",
+              "width": "1.5rem",
+            }
+          }
+        >
+          <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>
+      </button>
+    </nav>
+  </div>
+</header>
+`;
+
+exports[`<Header /> renders correctly for authenticated desktop 1`] = `
+<header
+  className="site-header-desktop"
+>
+  <div
+    className="container-fluid"
+  >
+    <div
+      className="nav-container position-relative d-flex align-items-center"
+    >
+      <a
+        className="logo"
+        href="http://localhost:18000/dashboard"
+      >
+        <img
+          alt="edX"
+          className="d-block"
+          src="https://edx-cdn.org/v3/default/logo.svg"
+        />
+      </a>
+      <nav
+        aria-label="Main"
+        className="nav main-nav"
+      >
+        <a
+          className="nav-link"
+          href="http://localhost:18000/dashboard"
+        >
+          Courses
+        </a>
+      </nav>
+      <nav
+        aria-label="Secondary"
+        className="nav secondary-menu-container align-items-center ml-auto"
+      >
+        <div
+          className="menu null"
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <button
+            aria-expanded={false}
+            aria-haspopup="menu"
+            aria-label="Account menu for edX"
+            className="menu-trigger btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
+            onClick={[Function]}
+          >
+            <span
+              className="avatar overflow-hidden d-inline-flex rounded-circle mr-2"
+              style={
+                Object {
+                  "height": "1.5em",
+                  "width": "1.5em",
+                }
+              }
+            >
+              <svg
+                aria-hidden={true}
+                focusable="false"
+                height="24px"
+                role="img"
+                style={
+                  Object {
+                    "height": "1.5em",
+                    "width": "1.5em",
+                  }
+                }
+                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>
+            edX
+             
+            <svg
+              aria-hidden={true}
+              focusable="false"
+              height="16px"
+              role="img"
+              version="1.1"
+              viewBox="0 0 16 16"
+              width="16px"
+            >
+              <path
+                d="M7,4 L7,8 L11,8 L11,10 L5,10 L5,4 L7,4 Z"
+                fill="currentColor"
+                transform="translate(8.000000, 7.000000) rotate(-45.000000) translate(-8.000000, -7.000000) "
+              />
+            </svg>
+          </button>
+        </div>
+      </nav>
+    </div>
+  </div>
+</header>
+`;
+
+exports[`<Header /> renders correctly for authenticated mobile 1`] = `
+<header
+  aria-label="Main"
+  className="site-header-mobile d-flex justify-content-between align-items-center shadow sticky-top"
+>
+  <div
+    className="w-100 d-flex justify-content-start"
+  >
+    <div
+      className="menu position-static"
+      onKeyDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+    >
+      <button
+        aria-expanded={false}
+        aria-haspopup="menu"
+        aria-label="Main Menu"
+        className="menu-trigger icon-button"
+        onClick={[Function]}
+        title="Main 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"
+        >
+          <rect
+            fill="currentColor"
+            height="2"
+            width="20"
+            x="2"
+            y="5"
+          />
+          <rect
+            fill="currentColor"
+            height="2"
+            width="20"
+            x="2"
+            y="11"
+          />
+          <rect
+            fill="currentColor"
+            height="2"
+            width="20"
+            x="2"
+            y="17"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+  <div
+    className="w-100 d-flex justify-content-center"
+  >
+    <a
+      className="logo"
+      href="http://localhost:18000/dashboard"
+      itemType="http://schema.org/Organization"
+    >
+      <img
+        alt="edX"
+        className="d-block"
+        src="https://edx-cdn.org/v3/default/logo.svg"
+      />
+    </a>
+  </div>
+  <div
+    className="w-100 d-flex justify-content-end align-items-center"
+  >
+    <nav
+      aria-label="Secondary"
+      className="menu position-static"
+      onKeyDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+    >
+      <button
+        aria-expanded={false}
+        aria-haspopup="menu"
+        aria-label="Account Menu"
+        className="menu-trigger icon-button"
+        onClick={[Function]}
+        title="Account Menu"
+      >
+        <span
+          className="avatar overflow-hidden d-inline-flex rounded-circle null"
+          style={
+            Object {
+              "height": "1.5rem",
+              "width": "1.5rem",
+            }
+          }
+        >
+          <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>
+      </button>
+    </nav>
+  </div>
+</header>
+`;

src/__snapshots__/SiteHeader.test.jsx.snap

@@ -1,186 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<SiteHeader /> renders correctly for desktop 1`] = `
-<header
-  className="site-header-desktop"
->
-  <div
-    className="container-fluid"
-  >
-    <div
-      className="nav-container position-relative d-flex align-items-center"
-    >
-      <a
-        className="logo"
-        href="http://localhost:18000/dashboard"
-      >
-        <img
-          alt="edX"
-          className="d-block"
-          src="test-file-stub"
-        />
-      </a>
-      <nav
-        aria-label="Main"
-        className="nav main-nav"
-      >
-        <a
-          className="nav-link"
-          href="http://localhost:18000/dashboard"
-        >
-          Courses
-        </a>
-      </nav>
-      <nav
-        aria-label="Secondary"
-        className="nav secondary-menu-container align-items-center ml-auto"
-      >
-        <a
-          className="btn mr-2 btn-link"
-          href="http://localhost:18000/login"
-        >
-          Login
-        </a>
-        <a
-          className="btn mr-2 btn-outline-primary"
-          href="http://localhost:18000/register"
-        >
-          Sign Up
-        </a>
-      </nav>
-    </div>
-  </div>
-</header>
-`;
-
-exports[`<SiteHeader /> renders correctly for mobile 1`] = `
-<header
-  aria-label="Main"
-  className="site-header-mobile d-flex justify-content-between align-items-center shadow sticky-top"
->
-  <div
-    className="w-100 d-flex justify-content-start"
-  >
-    <div
-      className="menu position-static"
-      onKeyDown={[Function]}
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
-    >
-      <button
-        aria-expanded={false}
-        aria-haspopup="menu"
-        aria-label="Main Menu"
-        className="menu-trigger icon-button"
-        onClick={[Function]}
-        title="Main 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"
-        >
-          <rect
-            fill="currentColor"
-            height="2"
-            width="20"
-            x="2"
-            y="5"
-          />
-          <rect
-            fill="currentColor"
-            height="2"
-            width="20"
-            x="2"
-            y="11"
-          />
-          <rect
-            fill="currentColor"
-            height="2"
-            width="20"
-            x="2"
-            y="17"
-          />
-        </svg>
-      </button>
-    </div>
-  </div>
-  <div
-    className="w-100 d-flex justify-content-center"
-  >
-    <a
-      className="logo"
-      href="http://localhost:18000/dashboard"
-      itemType="http://schema.org/Organization"
-    >
-      <img
-        alt="edX"
-        className="d-block"
-        src="test-file-stub"
-      />
-    </a>
-  </div>
-  <div
-    className="w-100 d-flex justify-content-end align-items-center"
-  >
-    <nav
-      aria-label="Secondary"
-      className="menu position-static"
-      onKeyDown={[Function]}
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
-    >
-      <button
-        aria-expanded={false}
-        aria-haspopup="menu"
-        aria-label="Account Menu"
-        className="menu-trigger icon-button"
-        onClick={[Function]}
-        title="Account Menu"
-      >
-        <span
-          className="avatar overflow-hidden d-inline-flex rounded-circle null"
-          style={
-            Object {
-              "height": "1.5rem",
-              "width": "1.5rem",
-            }
-          }
-        >
-          <svg
-            aria-hidden={true}
-            className="text-muted"
-            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>
-      </button>
-    </nav>
-  </div>
-</header>
-`;

src/index.jsx

@@ -1,6 +1,6 @@
-import SiteHeader from './SiteHeader';
+import Header from './Header';
 import messages from './i18n/index';
 
 export { messages };
 
-export default SiteHeader;
+export default Header;

src/index.scss

@@ -32,6 +32,8 @@ $white: #fff;
 }
 
 .site-header-mobile {
+  height: 3rem;
+
   .nav-link {
     text-decoration: none;
     cursor: pointer;
@@ -43,7 +45,6 @@ $white: #fff;
 
 
 .site-header-desktop {
-  height: 3.75rem;
   box-shadow: 0 1px 0 0 rgba(0,0,0,.1);
   background: $white;
   .nav-link {

src/setupTest.js

@@ -0,0 +1,29 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import 'babel-polyfill';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+// These configuration values are usually set in webpack's EnvironmentPlugin however
+// Jest does not use webpack so we need to set these so for testing
+process.env.ACCESS_TOKEN_COOKIE_NAME = 'edx-jwt-cookie-header-payload';
+process.env.BASE_URL = 'localhost:1995';
+process.env.CREDENTIALS_BASE_URL = 'http://localhost:18150';
+process.env.CSRF_TOKEN_API_PATH = '/csrf/api/v1/token';
+process.env.ECOMMERCE_BASE_URL = 'http://localhost:18130';
+process.env.LANGUAGE_PREFERENCE_COOKIE_NAME = 'openedx-language-preference';
+process.env.LMS_BASE_URL = 'http://localhost:18000';
+process.env.LOGIN_URL = 'http://localhost:18000/login';
+process.env.LOGOUT_URL = 'http://localhost:18000/login';
+process.env.MARKETING_SITE_BASE_URL = 'http://localhost:18000';
+process.env.ORDER_HISTORY_URL = 'localhost:1996/orders';
+process.env.REFRESH_ACCESS_TOKEN_ENDPOINT = 'http://localhost:18000/login_refresh';
+process.env.SEGMENT_KEY = 'segment_whoa';
+process.env.SITE_NAME = 'edX';
+process.env.USER_INFO_COOKIE_NAME = 'edx-user-info';
+process.env.LOGO_URL = 'https://edx-cdn.org/v3/default/logo.svg';
+process.env.LOGO_TRADEMARK_URL = 'https://edx-cdn.org/v3/default/logo-trademark.svg';
+process.env.LOGO_WHITE_URL = 'https://edx-cdn.org/v3/default/logo-white.svg';
+process.env.FAVICON_URL = 'https://edx-cdn.org/v3/default/favicon.ico';

webpack.dev.config.js

@@ -0,0 +1,15 @@
+const path = require('path');
+const { createConfig } = require('@edx/frontend-build');
+
+module.exports = createConfig('webpack-dev', {
+  entry: path.resolve(__dirname, 'example'),
+  output: {
+    path: path.resolve(__dirname, 'example/dist'),
+    publicPath: '/',
+  },
+  resolve: {
+    alias: {
+      '@edx/frontend-component-header': path.resolve(__dirname, 'src'),
+    },
+  },
+});