Merge pull request #233 from openedx/feat--upgrade-frontend-build-

feat: upgrade frontend-build

.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,20 @@
+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
+STUDIO_BASE_URL=http://localhost:18010
+LOGIN_URL=http://localhost:18000/login
+LOGOUT_URL=http://localhost:18000/logout
+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/add-depr-ticket-to-depr-board.yml

@@ -0,0 +1,19 @@
+# Run the workflow that adds new tickets that are either:
+# - labelled "DEPR"
+# - title starts with "[DEPR]"
+# - body starts with "Proposal Date" (this is the first template field)
+# to the org-wide DEPR project board
+
+name: Add newly created DEPR issues to the DEPR project board
+
+on:
+  issues:
+    types: [opened]
+
+jobs:
+  routeissue:
+    uses: openedx/.github/.github/workflows/add-depr-ticket-to-depr-board.yml@master
+    secrets:
+      GITHUB_APP_ID: ${{ secrets.GRAPHQL_AUTH_APP_ID }}
+      GITHUB_APP_PRIVATE_KEY: ${{ secrets.GRAPHQL_AUTH_APP_PEM }}
+      SLACK_BOT_TOKEN: ${{ secrets.SLACK_ISSUE_BOT_TOKEN }}

.github/workflows/ci.yml

@@ -0,0 +1,35 @@
+name: Default CI
+on:
+  push:
+    branches:
+    - master
+  pull_request:
+    branches:
+    - '**'
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: [16]
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+      with:
+        fetch-depth: 0
+    - name: Setup Nodejs
+      uses: actions/setup-node@v2
+      with:
+        node-version: ${{ matrix.node }}
+    - 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@v2

.github/workflows/commitlint.yml

@@ -0,0 +1,10 @@
+# Run commitlint on the commit messages in a pull request.
+
+name: Lint Commit Messages
+
+on:
+  - pull_request
+
+jobs:
+  commitlint:
+    uses: edx/.github/.github/workflows/commitlint.yml@master

.github/workflows/lockfileversion-check.yml

@@ -0,0 +1,14 @@
+#check package-lock file version
+
+name: lockfileVersion check
+
+on:
+  push:
+    branches:
+    - master
+  pull_request:
+
+jobs:
+  version-check:
+    uses: openedx/.github/.github/workflows/lockfileversion-check.yml@master
+    

.github/workflows/release.yml

@@ -0,0 +1,39 @@
+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@v2
+      with:
+        node-version: 16
+    - 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@v2
+    - name: Build
+      run: npm run build
+    - name: Release
+      uses: cycjimmy/semantic-release-action@v2
+      with:
+        semantic_version: 16
+      env:
+        GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
+        NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}

.gitignore

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

.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=

.tx/config

@@ -1,8 +1,9 @@
 [main]
 host = https://www.transifex.com
 
-[edx-platform.frontend-component-header]
+[o:open-edx:p:edx-platform:r:frontend-component-header]
 file_filter = src/i18n/messages/<lang>.json
 source_file = src/i18n/transifex_input.json
 source_lang = en
-type = KEYVALUEJSON
+type        = KEYVALUEJSON
+

Makefile

@@ -1,5 +1,5 @@
 transifex_resource = frontend-component-header
-transifex_langs = "ar,fr,es_419,zh_CN"
+transifex_langs = "ar,fr,fr_CA,es_419,zh_CN"
 
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
@@ -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__
@@ -50,7 +50,7 @@ push_translations:
 
 # Pulls translations from Transifex.
 pull_translations:
-	tx pull -f --mode reviewed --language=$(transifex_langs)
+	tx pull -f --mode reviewed --languages=$(transifex_langs)
 
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:

README.rst

@@ -1,11 +1,77 @@
+#########################
 frontend-component-header
-=========================
+#########################
 
 |Build Status| |Codecov| |npm_version| |npm_downloads| |license| |semantic-release|
 
-This is the standard Open edX header for use in React applications. It has two exports:
-  - **default**: The Header Component
-  - **messages**: for i18n in the form of ``{ locale: { key: translatedString } }``
+********
+Overview
+********
+
+A generic header for Open edX micro-frontend applications.
+
+************
+Requirements
+************
+
+This component uses ``@edx/frontend-platform`` services such as i18n, analytics, configuration, and the ``AppContext`` React component, and expects that it has been loaded into a micro-frontend that has been properly initialized via ``@edx/frontend-platform``'s ``initialize`` function. `Please visit the frontend template application to see an example. <https://github.com/edx/frontend-template-application/blob/master/src/index.jsx>`_
+
+Environment Variables
+=====================
+
+* ``LMS_BASE_URL`` - The URL of the LMS of your Open edX instance.
+* ``LOGOUT_URL`` - The URL of the API endpoint which performs a user logout.
+* ``LOGIN_URL`` - The URL of the login page where a user can sign into their account.
+* ``SITE_NAME`` - The user-facing name of the site, used as `alt` text on the logo in the header.
+  Defaults to "localhost" in development.
+* ``LOGO_URL`` - The URL of the site's logo.  This logo is displayed in the header.
+* ``ORDER_HISTORY_URL`` - The URL of the order history page.
+* ``AUTHN_MINIMAL_HEADER`` - A boolean flag which hides the main menu, user menu, and logged-out
+  menu items when truthy.  This is intended to be used in micro-frontends like
+  frontend-app-authentication in which these menus are considered distractions from the user's task.
+
+************
+Installation
+************
+
+To install this header into your Open edX micro-frontend, run the following command in your MFE:
+
+``npm i --save @edx/frontend-component-header``
+
+This will make the component available to be imported into your application.
+
+*****
+Usage
+*****
+
+This library has the following exports:
+
+* ``(default)``: The header as a React component.
+* ``messages``: Internationalization messages suitable for use with `@edx/frontend-platform/i18n <https://edx.github.io/frontend-platform/module-Internationalization.html>`_
+* ``dist/index.scss``: A SASS file which contains style information for the component.  It should be imported into the micro-frontend's own SCSS file.
+
+Examples
+========
+
+* `An example of component and messages usage. <https://github.com/edx/frontend-template-application/blob/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx#L21>`_
+* `An example of SCSS file usage. <https://github.com/edx/frontend-template-application/blob/3cd5485bf387b8c479baf6b02bf59e3061dc3465/src/index.scss#L8>`_
+
+
+***********
+Development
+***********
+
+Install dependencies::
+
+  npm i
+
+Start the development server::
+
+  npm start
+
+Build a production distribution::
+
+  npm run build
 
 .. |Build Status| image:: https://api.travis-ci.com/edx/frontend-component-header.svg?branch=master
    :target: https://travis-ci.com/edx/frontend-component-header

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');

commitlint.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  extends: ['@commitlint/config-angular'],
-};

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

@@ -2,39 +2,35 @@ import 'babel-polyfill';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { App, AppContext, APP_READY, AppProvider } from '@edx/frontend-base';
-import { NewRelicLoggingService } from '@edx/frontend-logging';
-import './index.scss';
-import SiteHeader from '../src/';
+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';
 
-App.subscribe(APP_READY, () => {
+import './index.scss';
+
+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: {
-          userId: null,
-          username: null,
-          roles: [],
-          administrator: false,
-        },
-        config: App.config
+        authenticatedUser: null,
+        config: getConfig(),
       }}>
-        <SiteHeader />
+        <Header />
       </AppContext.Provider>
       <h5 className="mt-2 mb-5">Logged out state</h5>
 
       {/* We can fake out authentication by including another provider here with the data we want */}
       <AppContext.Provider value={{
         authenticatedUser: {
-          userId: null,
+          userId: '123abc',
           username: 'testuser',
           roles: [],
           administrator: false,
         },
-        config: App.config
+        config: getConfig(),
       }}>
-        <SiteHeader />
+        <Header />
       </AppContext.Provider>
       <h5 className="mt-2">Logged in state</h5>
     </AppProvider>,
@@ -42,4 +38,6 @@ App.subscribe(APP_READY, () => {
   );
 });
 
-App.initialize({ messages: [], loggingService: NewRelicLoggingService });
+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', {
+  setupFilesAfterEnv: [
+    '<rootDir>/src/setupTest.js',
+  ],
+});

package.json

@@ -2,22 +2,26 @@
   "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"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/edx/frontend-component-header.git"
@@ -29,69 +33,44 @@
   },
   "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": "3.0.0",
-    "@edx/frontend-auth": "7.0.1",
-    "@edx/frontend-base": "4.0.0",
-    "@edx/frontend-i18n": "3.0.3",
-    "@edx/frontend-logging": "3.0.1",
-    "@edx/paragon": "7.1.4",
-    "babel-eslint": "10.0.3",
-    "babel-plugin-react-intl": "4.1.18",
-    "dotenv": "8.1.0",
-    "enzyme": "3.10.0",
-    "enzyme-adapter-react-16": "1.14.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",
+    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
+    "@edx/frontend-build": "11.0.2",
+    "@edx/frontend-platform": "2.4.0",
+    "@edx/paragon": "19.25.3",
+    "codecov": "3.8.3",
+    "enzyme": "3.11.0",
+    "enzyme-adapter-react-16": "1.15.6",
+    "husky": "7.0.4",
+    "prop-types": "15.8.1",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "react-redux": "7.2.8",
+    "react-router-dom": "5.3.3",
+    "react-test-renderer": "16.14.0",
     "reactifex": "1.1.1",
-    "redux": "4.0.4",
-    "redux-saga": "1.0.5",
-    "sass": "1.22.12",
-    "semantic-release": "15.13.24"
+    "redux": "4.2.0",
+    "redux-saga": "1.1.3",
+    "@testing-library/dom": "8.14.0",
+    "@testing-library/jest-dom": "5.16.4",
+    "jest": "27.5.1",
+    "jest-chain": "1.1.5",
+    "@testing-library/react": "10.4.9"
   },
   "dependencies": {
     "babel-polyfill": "6.26.0",
-    "react-responsive": "8.0.1",
-    "react-transition-group": "4.3.0"
+    "react-responsive": "8.2.0",
+    "react-transition-group": "4.4.2",
+    "@fortawesome/fontawesome-svg-core": "1.2.36",
+    "@fortawesome/free-brands-svg-icons": "5.15.4",
+    "@fortawesome/free-regular-svg-icons": "5.15.4",
+    "@fortawesome/free-solid-svg-icons": "5.15.4",
+    "@fortawesome/react-fontawesome": "^0.1.14"
   },
   "peerDependencies": {
-    "@edx/frontend-analytics": "^3.0.0",
-    "@edx/frontend-base": "^4.0.0",
-    "@edx/frontend-i18n": "^3.0.3",
-    "prop-types": "^15.7.2",
-    "react": "^16.9.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": [
-      "./src/setupTest.js",
-      "dotenv/config"
-    ]
+    "@edx/frontend-platform": "^2.0.0",
+    "@edx/paragon": ">= 7.0.0 < 20.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,28 @@
 {
   "extends": [
-    "config:base"
-  ]
+    "config:base",
+    "schedule:weekly",
+    ":automergeLinters",
+    ":automergeMinor",
+    ":automergeTesters",
+    ":enableVulnerabilityAlerts",
+    ":rebaseStalePrs",
+    ":semanticCommits",
+    ":updateNotScheduled"
+  ],
+  "packageRules": [
+    {
+      "matchDepTypes": [
+        "devDependencies"
+      ],
+      "matchUpdateTypes": [
+        "lockFileMaintenance",
+        "minor",
+        "patch",
+        "pin"
+      ],
+      "automerge": true
+    }
+  ],
+  "timezone": "America/New_York"
 }

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,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
 
 // Local Components
 import { Menu, MenuTrigger, MenuContent } from './Menu';
@@ -8,7 +9,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 +23,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 {
@@ -51,6 +54,24 @@ class DesktopHeader extends React.Component {
     });
   }
 
+  // Renders an optional App Menu for
+  renderAppMenu() {
+    const { appMenu } = this.props;
+    const { content: appMenuContent, menuItems } = appMenu;
+    return (
+      <Menu transitionClassName="menu-dropdown" transitionTimeout={250}>
+        <MenuTrigger tag="a" className="nav-link d-inline-flex align-items-center">
+          {appMenuContent} <CaretIcon role="img" aria-hidden focusable="false" />
+        </MenuTrigger>
+        <MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
+          {menuItems.map(({ type, href, content }) => (
+            <a className={`dropdown-${type}`} key={`${type}-${content}`} href={href}>{content}</a>
+          ))}
+        </MenuContent>
+      </Menu>
+    );
+  }
+
   renderUserMenu() {
     const {
       userMenu,
@@ -64,7 +85,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" />
@@ -99,20 +120,31 @@ class DesktopHeader extends React.Component {
       logoDestination,
       loggedIn,
       intl,
+      appMenu,
     } = 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">
+        <a className="nav-skip sr-only sr-only-focusable" href="#main">{intl.formatMessage(messages['header.label.skip.nav'])}</a>
+        <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} />}
+            {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"
             >
               {this.renderMainMenu()}
             </nav>
+            {appMenu ? (
+              <nav
+                aria-label={intl.formatMessage(messages['header.label.app.nav'])}
+                className="nav app-nav"
+              >
+                {this.renderAppMenu()}
+              </nav>
+            ) : null}
             <nav
               aria-label={intl.formatMessage(messages['header.label.secondary.nav'])}
               className="nav secondary-menu-container align-items-center ml-auto"
@@ -150,6 +182,20 @@ DesktopHeader.propTypes = {
 
   // i18n
   intl: intlShape.isRequired,
+
+  // appMenu
+  appMenu: PropTypes.shape(
+    {
+      content: PropTypes.string,
+      menuItems: PropTypes.arrayOf(
+        PropTypes.shape({
+          type: PropTypes.string,
+          href: PropTypes.string,
+          content: PropTypes.string,
+        }),
+      ),
+    },
+  ),
 };
 
 DesktopHeader.defaultProps = {
@@ -162,6 +208,7 @@ DesktopHeader.defaultProps = {
   avatar: null,
   username: null,
   loggedIn: false,
+  appMenu: null,
 };
 
 export default injectIntl(DesktopHeader);

src/Header.jsx

@@ -1,23 +1,36 @@
 import React, { useContext } from 'react';
 import Responsive from 'react-responsive';
-import { injectIntl, intlShape } from '@edx/frontend-i18n';
-import { App, AppContext } from '@edx/frontend-base';
+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 LogoSVG from './logo.svg';
+import messages from './Header.messages';
 
-import messages from './SiteHeader.messages';
-
-App.ensureConfig([
+ensureConfig([
   'LMS_BASE_URL',
   'LOGOUT_URL',
   'LOGIN_URL',
   'SITE_NAME',
+  'LOGO_URL',
+  'ORDER_HISTORY_URL',
 ], 'Header component');
 
-function SiteHeader({ intl }) {
+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 = [
@@ -28,7 +41,13 @@ function SiteHeader({ intl }) {
     },
   ];
 
-  const userMenu = [
+  const orderHistoryItem = {
+    type: 'item',
+    href: config.ORDER_HISTORY_URL,
+    content: intl.formatMessage(messages['header.user.menu.order.history']),
+  };
+
+  const userMenu = authenticatedUser === null ? [] : [
     {
       type: 'item',
       href: `${config.LMS_BASE_URL}/dashboard`,
@@ -51,6 +70,11 @@ function SiteHeader({ intl }) {
     },
   ];
 
+  // Users should only see Order History if have a ORDER_HISTORY_URL define in the environment.
+  if (config.ORDER_HISTORY_URL) {
+    userMenu.splice(-1, 0, orderHistoryItem);
+  }
+
   const loggedOutItems = [
     {
       type: 'item',
@@ -65,32 +89,31 @@ function SiteHeader({ intl }) {
   ];
 
   const props = {
-    logo: LogoSVG,
+    logo: config.LOGO_URL,
     logoAltText: config.SITE_NAME,
-    siteName: config.SITE_NAME,
     logoDestination: `${config.LMS_BASE_URL}/dashboard`,
-    loggedIn: !!authenticatedUser.username,
-    username: authenticatedUser.username,
-    avatar: authenticatedUser.avatar,
-    mainMenu,
-    userMenu,
-    loggedOutItems,
+    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 (
-    <React.Fragment>
+    <>
       <Responsive maxWidth={768}>
         <MobileHeader {...props} />
       </Responsive>
       <Responsive minWidth={769}>
         <DesktopHeader {...props} />
       </Responsive>
-    </React.Fragment>
+    </>
   );
 }
 
-SiteHeader.propTypes = {
+Header.propTypes = {
   intl: intlShape.isRequired,
 };
 
-export default injectIntl(SiteHeader);
+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': {
@@ -56,6 +56,16 @@ const messages = defineMessages({
     defaultMessage: 'Sign Up',
     description: 'Link to registration',
   },
+  'header.user.menu.studio.home': {
+    id: 'header.user.menu.studio.home',
+    defaultMessage: 'Studio Home',
+    description: 'Link to the Studio Home',
+  },
+  'header.user.menu.studio.maintenance': {
+    id: 'header.user.menu.studio.maintenance',
+    defaultMessage: 'Maintenance',
+    description: 'Link to the Studio Maintenance',
+  },
   'header.label.account.nav': {
     id: 'header.label.account.nav',
     defaultMessage: 'Account',
@@ -67,7 +77,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',
   },
@@ -91,6 +101,16 @@ const messages = defineMessages({
     defaultMessage: 'Secondary',
     description: 'The aria label for the seconary nav',
   },
+  'header.label.skip.nav': {
+    id: 'header.label.skip.nav',
+    defaultMessage: 'Skip to main content',
+    description: 'A link used by screen readers to allow users to skip to the main content of the page.',
+  },
+  'header.label.app.nav': {
+    id: 'header.label.app.nav',
+    defaultMessage: 'App',
+    description: 'The aria label for the app Nav',
+  },
 });
 
 export default messages;

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,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
 
 // Local Components
 import { Menu, MenuTrigger, MenuContent } from './Menu';
@@ -8,7 +9,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 +23,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,17 +92,22 @@ 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 ?
+        <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">
+
             <Menu className="position-static">
               <MenuTrigger
                 tag="button"
@@ -116,26 +124,29 @@ class MobileHeader extends React.Component {
               >
                 {this.renderMainMenu()}
               </MenuContent>
-            </Menu> : null }
-        </div>
-        <div className="w-100 d-flex justify-content-center">
+            </Menu>
+          </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/SiteHeader.test.jsx

@@ -1,70 +0,0 @@
-
-import React from 'react';
-import { IntlProvider } from '@edx/frontend-i18n';
-import TestRenderer from 'react-test-renderer';
-import { AppContext } 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={{}}>
-          <AppContext.Provider value={{
-            authenticatedUser: {
-              userId: null,
-              username: null,
-              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,
-            },
-            }}
-          >
-            <SiteHeader />
-          </AppContext.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={{}}>
-          <AppContext.Provider value={{
-            authenticatedUser: {
-              userId: null,
-              username: null,
-              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,
-            },
-            }}
-          >
-            <SiteHeader />
-          </AppContext.Provider>
-        </IntlProvider>
-      </ResponsiveContext.Provider>
-    );
-
-    const wrapper = TestRenderer.create(component);
-
-    expect(wrapper.toJSON()).toMatchSnapshot();
-  });
-});

src/StudioHeader.jsx

@@ -0,0 +1,99 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { AppContext } from '@edx/frontend-platform/react';
+import {
+  APP_CONFIG_INITIALIZED,
+  ensureConfig,
+  mergeConfig,
+  subscribe,
+} from '@edx/frontend-platform';
+
+import DesktopHeader from './DesktopHeader';
+
+import messages from './Header.messages';
+
+ensureConfig([
+  'STUDIO_BASE_URL',
+  'LOGOUT_URL',
+  'LOGIN_URL',
+  'SITE_NAME',
+  'LOGO_URL',
+  'ORDER_HISTORY_URL',
+], 'StudioHeader component');
+
+subscribe(APP_CONFIG_INITIALIZED, () => {
+  mergeConfig({
+    AUTHN_MINIMAL_HEADER: !!process.env.AUTHN_MINIMAL_HEADER,
+  }, 'StudioHeader additional config');
+});
+
+function StudioHeader({ intl, mainMenu, appMenu }) {
+  const { authenticatedUser, config } = useContext(AppContext);
+
+  const userMenu = authenticatedUser === null ? [] : [
+    {
+      type: 'item',
+      href: `${config.STUDIO_BASE_URL}`,
+      content: intl.formatMessage(messages['header.user.menu.studio.home']),
+    },
+    {
+      type: 'item',
+      href: `${config.STUDIO_BASE_URL}/maintenance`,
+      content: intl.formatMessage(messages['header.user.menu.studio.maintenance']),
+    },
+    {
+      type: 'item',
+      href: config.LOGOUT_URL,
+      content: intl.formatMessage(messages['header.user.menu.logout']),
+    },
+  ];
+
+  const props = {
+    logo: config.LOGO_URL,
+    logoAltText: config.SITE_NAME,
+    logoDestination: config.STUDIO_BASE_URL,
+    loggedIn: authenticatedUser !== null,
+    username: authenticatedUser !== null ? authenticatedUser.username : null,
+    avatar: authenticatedUser !== null ? authenticatedUser.avatar : null,
+    mainMenu,
+    userMenu,
+    appMenu,
+    loggedOutItems: [],
+  };
+
+  return <DesktopHeader {...props} />;
+}
+
+StudioHeader.propTypes = {
+  intl: intlShape.isRequired,
+  appMenu: PropTypes.shape(
+    {
+      content: PropTypes.string,
+      href: PropTypes.string,
+      menuItems: PropTypes.arrayOf(
+        PropTypes.shape({
+          type: PropTypes.string,
+          href: PropTypes.string,
+          content: PropTypes.string,
+        }),
+      ),
+    },
+  ),
+  mainMenu: PropTypes.arrayOf(
+    PropTypes.shape(
+      {
+        type: PropTypes.string,
+        href: PropTypes.string,
+        content: PropTypes.string,
+      },
+    ),
+  ),
+};
+
+StudioHeader.defaultProps = {
+  appMenu: null,
+  mainMenu: [],
+};
+
+export default injectIntl(StudioHeader);

src/StudioHeader.test.jsx

@@ -0,0 +1,135 @@
+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 { StudioHeader } from './index';
+
+describe('<StudioHeader />', () => {
+  it('renders correctly', () => {
+    const component = (
+      <IntlProvider locale="en" messages={{}}>
+        <AppContext.Provider
+          value={{
+            authenticatedUser: {
+              userId: 'abc123',
+              username: 'edX',
+              roles: [],
+              administrator: false,
+            },
+            config: {
+              STUDIO_BASE_URL: process.env.STUDIO_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,
+            },
+          }}
+        >
+          <StudioHeader />
+        </AppContext.Provider>
+      </IntlProvider>
+    );
+
+    const wrapper = TestRenderer.create(component);
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly with the optional app menu', () => {
+    const appMenu = {
+      content: 'App Menu',
+      menuItems: [
+        {
+          type: 'dropdown',
+          href: 'https://menu-href-url.org',
+          content: 'Content 1',
+        },
+        {
+          type: 'dropdown',
+          href: 'https://menu-href-url.org',
+          content: 'Content 2',
+        },
+        {
+          type: 'dropdown',
+          href: 'https://menu-href-url.org',
+          content: 'Content 3',
+        },
+      ],
+    };
+    const component = (
+      <IntlProvider locale="en" messages={{}}>
+        <AppContext.Provider
+          value={{
+            authenticatedUser: {
+              userId: 'abc123',
+              username: 'edX',
+              roles: [],
+              administrator: false,
+            },
+            config: {
+              STUDIO_BASE_URL: process.env.STUDIO_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,
+            },
+          }}
+        >
+          <StudioHeader appMenu={appMenu} />
+        </AppContext.Provider>
+      </IntlProvider>
+    );
+
+    const wrapper = TestRenderer.create(component);
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly with the optional main menu', () => {
+    const mainMenu = [
+      {
+        type: 'dropdown',
+        href: 'https://menu-href-url.org',
+        content: 'Content 1',
+      },
+      {
+        type: 'dropdown',
+        href: 'https://menu-href-url.org',
+        content: 'Content 2',
+      },
+      {
+        type: 'dropdown',
+        href: 'https://menu-href-url.org',
+        content: 'Content 3',
+      },
+    ];
+    const component = (
+      <IntlProvider locale="en" messages={{}}>
+        <AppContext.Provider
+          value={{
+            authenticatedUser: {
+              userId: 'abc123',
+              username: 'edX',
+              roles: [],
+              administrator: false,
+            },
+            config: {
+              STUDIO_BASE_URL: process.env.STUDIO_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,
+            },
+          }}
+        >
+          <StudioHeader mainMenu={mainMenu} />
+        </AppContext.Provider>
+      </IntlProvider>
+    );
+
+    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,443 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Header /> renders correctly for anonymous desktop 1`] = `
+<header
+  className="site-header-desktop"
+>
+  <a
+    className="nav-skip sr-only sr-only-focusable"
+    href="#main"
+  >
+    Skip to main content
+  </a>
+  <div
+    className="container-fluid null"
+  >
+    <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"
+>
+  <a
+    className="nav-skip sr-only sr-only-focusable"
+    href="#main"
+  >
+    Skip to main content
+  </a>
+  <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"
+>
+  <a
+    className="nav-skip sr-only sr-only-focusable"
+    href="#main"
+  >
+    Skip to main content
+  </a>
+  <div
+    className="container-fluid null"
+  >
+    <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"
+>
+  <a
+    className="nav-skip sr-only sr-only-focusable"
+    href="#main"
+  >
+    Skip to main content
+  </a>
+  <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/__snapshots__/StudioHeader.test.jsx.snap

@@ -0,0 +1,425 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<StudioHeader /> renders correctly 1`] = `
+<header
+  className="site-header-desktop"
+>
+  <a
+    className="nav-skip sr-only sr-only-focusable"
+    href="#main"
+  >
+    Skip to main content
+  </a>
+  <div
+    className="container-fluid null"
+  >
+    <div
+      className="nav-container position-relative d-flex align-items-center"
+    >
+      <img
+        alt="edX"
+        className="logo"
+        src="https://edx-cdn.org/v3/default/logo.svg"
+      />
+      <nav
+        aria-label="Main"
+        className="nav main-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[`<StudioHeader /> renders correctly with the optional app menu 1`] = `
+<header
+  className="site-header-desktop"
+>
+  <a
+    className="nav-skip sr-only sr-only-focusable"
+    href="#main"
+  >
+    Skip to main content
+  </a>
+  <div
+    className="container-fluid null"
+  >
+    <div
+      className="nav-container position-relative d-flex align-items-center"
+    >
+      <img
+        alt="edX"
+        className="logo"
+        src="https://edx-cdn.org/v3/default/logo.svg"
+      />
+      <nav
+        aria-label="Main"
+        className="nav main-nav"
+      />
+      <nav
+        aria-label="App"
+        className="nav app-nav"
+      >
+        <div
+          className="menu null"
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <a
+            aria-expanded={false}
+            aria-haspopup="menu"
+            className="menu-trigger nav-link d-inline-flex align-items-center"
+            onClick={[Function]}
+          >
+            App Menu
+             
+            <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>
+          </a>
+        </div>
+      </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[`<StudioHeader /> renders correctly with the optional main menu 1`] = `
+<header
+  className="site-header-desktop"
+>
+  <a
+    className="nav-skip sr-only sr-only-focusable"
+    href="#main"
+  >
+    Skip to main content
+  </a>
+  <div
+    className="container-fluid null"
+  >
+    <div
+      className="nav-container position-relative d-flex align-items-center"
+    >
+      <img
+        alt="edX"
+        className="logo"
+        src="https://edx-cdn.org/v3/default/logo.svg"
+      />
+      <nav
+        aria-label="Main"
+        className="nav main-nav"
+      >
+        <div
+          className="menu nav-item"
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <a
+            aria-expanded={false}
+            aria-haspopup="menu"
+            className="menu-trigger nav-link d-inline-flex align-items-center"
+            href="https://menu-href-url.org"
+            onClick={[Function]}
+          >
+            Content 1
+             
+            <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>
+          </a>
+        </div>
+        <div
+          className="menu nav-item"
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <a
+            aria-expanded={false}
+            aria-haspopup="menu"
+            className="menu-trigger nav-link d-inline-flex align-items-center"
+            href="https://menu-href-url.org"
+            onClick={[Function]}
+          >
+            Content 2
+             
+            <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>
+          </a>
+        </div>
+        <div
+          className="menu nav-item"
+          onKeyDown={[Function]}
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <a
+            aria-expanded={false}
+            aria-haspopup="menu"
+            className="menu-trigger nav-link d-inline-flex align-items-center"
+            href="https://menu-href-url.org"
+            onClick={[Function]}
+          >
+            Content 3
+             
+            <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>
+          </a>
+        </div>
+      </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>
+`;

src/generic/messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  registerSentenceCase: {
+    id: 'general.register.sentenceCase',
+    defaultMessage: 'Register',
+    description: 'Text in a button, prompting the user to register.',
+  },
+  signInSentenceCase: {
+    id: 'general.signIn.sentenceCase',
+    defaultMessage: 'Sign in',
+    description: 'Text in a button, prompting the user to log in.',
+  },
+});
+
+export default messages;

src/i18n/index.js

@@ -1,4 +1,13 @@
 import arMessages from './messages/ar.json';
+
+import caMessages from './messages/ca.json';
+import heMessages from './messages/he.json';
+import idMessages from './messages/id.json';
+import plMessages from './messages/pl.json';
+import ruMessages from './messages/ru.json';
+import thMessages from './messages/th.json';
+import ukMessages from './messages/uk.json';
+
 // no need to import en messages-- they are in the defaultMessage field
 import es419Messages from './messages/es_419.json';
 import frMessages from './messages/fr.json';
@@ -8,6 +17,13 @@ import zhcnMessages from './messages/zh_CN.json';
 
 const messages = {
   ar: arMessages,
+  ca: caMessages,
+  he: heMessages,
+  id: idMessages,
+  pl: plMessages,
+  ru: ruMessages,
+  th: thMessages,
+  uk: ukMessages,
   'es-419': es419Messages,
   fr: frMessages,
   'zh-cn': zhcnMessages,

src/i18n/messages/ar.json

@@ -1,2 +1,33 @@
 {
-}
+  "general.register.sentenceCase": "التسجيل",
+  "general.signIn.sentenceCase": "تسجيل الدخول",
+  "header.links.courses": "مساقات",
+  "header.links.programs": "برامج",
+  "header.links.content.search": "استكشف الجديد",
+  "header.links.schools": "المدارس والشركاء",
+  "header.user.menu.dashboard": "لوحة المعلومات",
+  "header.user.menu.profile": "الملف الشخصي",
+  "header.user.menu.account.settings": "حساب",
+  "header.user.menu.order.history": "سجل الطلبات",
+  "header.user.menu.logout": "تسجيل الخروج",
+  "header.user.menu.login": "تسجيل الدخول",
+  "header.user.menu.register": "تسجيل ",
+  "header.user.menu.studio.home": "Studio Home",
+  "header.user.menu.studio.maintenance": "Maintenance",
+  "header.label.account.nav": "حساب",
+  "header.label.account.menu": "قائمة الحساب",
+  "header.label.account.menu.for": "قائمة الحساب للمستخدم {username}",
+  "header.label.main.nav": "الرئيسية",
+  "header.label.main.menu": "القائمة الرئيسية",
+  "header.label.main.header": "الرئيسية",
+  "header.label.secondary.nav": "فرعي",
+  "header.label.skip.nav": "التخطي إلى المحتوى الرئيسي",
+  "header.label.app.nav": "App",
+  "header.menu.dashboard.label": "لوحة المعلومات",
+  "header.help.label": "مساعدة",
+  "header.menu.profile.label": "الملف الشخصي",
+  "header.menu.account.label": "حساب",
+  "header.menu.orderHistory.label": "سجل الطلبات",
+  "header.navigation.skipNavLink": "التخطي إلى المحتوى الرئيسي",
+  "header.menu.signOut.label": "تسجيل الخروج"
+}

src/i18n/messages/ca.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/es_419.json

@@ -1,2 +1,33 @@
 {
-}
+  "general.register.sentenceCase": "Registrarse",
+  "general.signIn.sentenceCase": "Iniciar sesión",
+  "header.links.courses": "Cursos",
+  "header.links.programs": "Programas",
+  "header.links.content.search": "Encontrar nuevo",
+  "header.links.schools": "Escuelas y Socios",
+  "header.user.menu.dashboard": "Panel de Control",
+  "header.user.menu.profile": "Perfil",
+  "header.user.menu.account.settings": "Cuenta",
+  "header.user.menu.order.history": "Historial de órdenes",
+  "header.user.menu.logout": "Cerrar sesión",
+  "header.user.menu.login": "Login",
+  "header.user.menu.register": "Registrarse",
+  "header.user.menu.studio.home": "Studio Home",
+  "header.user.menu.studio.maintenance": "Maintenance",
+  "header.label.account.nav": "Cuenta",
+  "header.label.account.menu": "Menú de la cuenta",
+  "header.label.account.menu.for": "Menú de la cuenta para {username}",
+  "header.label.main.nav": "Principal",
+  "header.label.main.menu": "Menú Principal",
+  "header.label.main.header": "Principal",
+  "header.label.secondary.nav": "Secondary",
+  "header.label.skip.nav": "Ir al contenido principal",
+  "header.label.app.nav": "App",
+  "header.menu.dashboard.label": "Panel de Control",
+  "header.help.label": "Ayuda",
+  "header.menu.profile.label": "Perfil",
+  "header.menu.account.label": "Cuenta",
+  "header.menu.orderHistory.label": "Historial de órdenes",
+  "header.navigation.skipNavLink": "Dirígete al contenido principal.",
+  "header.menu.signOut.label": "Cerrar sesión"
+}

src/i18n/messages/fr.json

@@ -1,2 +1,33 @@
 {
-}
+  "general.register.sentenceCase": "S'inscrire",
+  "general.signIn.sentenceCase": "Connectez-vous",
+  "header.links.courses": "Cours",
+  "header.links.programs": "Programmes",
+  "header.links.content.search": "Explorer les cours",
+  "header.links.schools": "Écoles et partenaires",
+  "header.user.menu.dashboard": "Tableau de bord",
+  "header.user.menu.profile": "Profil",
+  "header.user.menu.account.settings": "Compte",
+  "header.user.menu.order.history": "Historique des commandes",
+  "header.user.menu.logout": "Déconnexion",
+  "header.user.menu.login": "Connexion",
+  "header.user.menu.register": "S'inscrire",
+  "header.user.menu.studio.home": "Accueil Studio",
+  "header.user.menu.studio.maintenance": "Maintenance",
+  "header.label.account.nav": "Compte",
+  "header.label.account.menu": "Menu du compte",
+  "header.label.account.menu.for": "Menu du compte pour {username}",
+  "header.label.main.nav": "Principal",
+  "header.label.main.menu": "Menu Principal",
+  "header.label.main.header": "Principal",
+  "header.label.secondary.nav": "Secondaire",
+  "header.label.skip.nav": "Passer au contenu principal",
+  "header.label.app.nav": "Application",
+  "header.menu.dashboard.label": "Tableau de bord",
+  "header.help.label": "Aide",
+  "header.menu.profile.label": "Profil",
+  "header.menu.account.label": "Compte",
+  "header.menu.orderHistory.label": "Historique des commandes",
+  "header.navigation.skipNavLink": "Passer au contenu principal",
+  "header.menu.signOut.label": "Se déconnecter"
+}

src/i18n/messages/fr_CA.json

@@ -0,0 +1,33 @@
+{
+  "general.register.sentenceCase": "Inscription",
+  "general.signIn.sentenceCase": "Connexion",
+  "header.links.courses": "Cours",
+  "header.links.programs": "Programmes",
+  "header.links.content.search": "Découvrir les nouveautés",
+  "header.links.schools": "Écoles et Partenaires",
+  "header.user.menu.dashboard": "Tableau de bord",
+  "header.user.menu.profile": "Profil",
+  "header.user.menu.account.settings": "Compte",
+  "header.user.menu.order.history": "Historique des commandes",
+  "header.user.menu.logout": "Déconnexion",
+  "header.user.menu.login": "Connexion",
+  "header.user.menu.register": "S'inscrire",
+  "header.user.menu.studio.home": "Accueil Studio",
+  "header.user.menu.studio.maintenance": "Entretien",
+  "header.label.account.nav": "Compte",
+  "header.label.account.menu": "Menu de compte",
+  "header.label.account.menu.for": "Menu de compte pour {username}",
+  "header.label.main.nav": "Principal",
+  "header.label.main.menu": "Menu principal",
+  "header.label.main.header": "Principal",
+  "header.label.secondary.nav": "Secondaire",
+  "header.label.skip.nav": "Passer au contenu de cette vue",
+  "header.label.app.nav": "Application",
+  "header.menu.dashboard.label": "Tableau de bord",
+  "header.help.label": "Aide",
+  "header.menu.profile.label": "Profil",
+  "header.menu.account.label": "Compte",
+  "header.menu.orderHistory.label": "Historique des commandes",
+  "header.navigation.skipNavLink": "Passer au contenu principal.",
+  "header.menu.signOut.label": "Se déconnecter"
+}

src/i18n/messages/he.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/id.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/pl.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/ru.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/th.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/uk.json

@@ -0,0 +1 @@
+{}

src/i18n/messages/zh_CN.json

@@ -1,2 +1,33 @@
 {
-}
+  "general.register.sentenceCase": "Register",
+  "general.signIn.sentenceCase": "Sign in",
+  "header.links.courses": "Courses",
+  "header.links.programs": "Programs",
+  "header.links.content.search": "Discover New",
+  "header.links.schools": "Schools & Partners",
+  "header.user.menu.dashboard": "Dashboard",
+  "header.user.menu.profile": "Profile",
+  "header.user.menu.account.settings": "Account",
+  "header.user.menu.order.history": "Order History",
+  "header.user.menu.logout": "Logout",
+  "header.user.menu.login": "Login",
+  "header.user.menu.register": "Sign Up",
+  "header.user.menu.studio.home": "Studio Home",
+  "header.user.menu.studio.maintenance": "Maintenance",
+  "header.label.account.nav": "Account",
+  "header.label.account.menu": "Account Menu",
+  "header.label.account.menu.for": "Account menu for {username}",
+  "header.label.main.nav": "Main",
+  "header.label.main.menu": "Main Menu",
+  "header.label.main.header": "Main",
+  "header.label.secondary.nav": "Secondary",
+  "header.label.skip.nav": "Skip to main content",
+  "header.label.app.nav": "App",
+  "header.menu.dashboard.label": "Dashboard",
+  "header.help.label": "Help",
+  "header.menu.profile.label": "Profile",
+  "header.menu.account.label": "Account",
+  "header.menu.orderHistory.label": "Order History",
+  "header.navigation.skipNavLink": "Skip to main content.",
+  "header.menu.signOut.label": "Sign Out"
+}

src/index.jsx

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

src/index.scss

@@ -25,6 +25,30 @@ $white: #fff;
   }
 }
 
+.learning-header {
+  min-width: 0;
+  
+  .course-title-lockup {
+    min-width: 0;
+
+    span {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding-bottom: 0.1rem;
+    }
+  }
+
+  .user-dropdown {
+    .btn {
+      height: 3rem;
+      @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+        padding: 0 0.5rem;
+      }
+    }
+  }
+}
+
 .site-header-mobile,
 .site-header-desktop {
   position: relative;
@@ -32,6 +56,8 @@ $white: #fff;
 }
 
 .site-header-mobile {
+  height: 3rem;
+
   .nav-link {
     text-decoration: none;
     cursor: pointer;
@@ -43,7 +69,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/learning-header/AnonymousUserMenu.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { getLoginRedirectUrl } from '@edx/frontend-platform/auth';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Button } from '@edx/paragon';
+
+import genericMessages from '../generic/messages';
+
+function AnonymousUserMenu({ intl }) {
+  return (
+    <div>
+      <Button
+        className="mr-3"
+        variant="outline-primary"
+        href={`${getConfig().LMS_BASE_URL}/register?next=${encodeURIComponent(global.location.href)}`}
+      >
+        {intl.formatMessage(genericMessages.registerSentenceCase)}
+      </Button>
+      <Button
+        variant="primary"
+        href={`${getLoginRedirectUrl(global.location.href)}`}
+      >
+        {intl.formatMessage(genericMessages.signInSentenceCase)}
+      </Button>
+    </div>
+  );
+}
+
+AnonymousUserMenu.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(AnonymousUserMenu);

src/learning-header/AuthenticatedUserDropdown.jsx

@@ -0,0 +1,57 @@
+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 '@edx/paragon';
+
+import messages from './messages';
+
+function AuthenticatedUserDropdown({ intl, username }) {
+  const dashboardMenuItem = (
+    <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>
+      {intl.formatMessage(messages.dashboard)}
+    </Dropdown.Item>
+  );
+
+  return (
+    <>
+      <a className="text-gray-700 mr-3" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>
+      <Dropdown className="user-dropdown">
+        <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().LMS_BASE_URL}/u/${username}`}>
+            {intl.formatMessage(messages.profile)}
+          </Dropdown.Item>
+          <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/account/settings`}>
+            {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>
+    </>
+  );
+}
+
+AuthenticatedUserDropdown.propTypes = {
+  intl: intlShape.isRequired,
+  username: PropTypes.string.isRequired,
+};
+
+export default injectIntl(AuthenticatedUserDropdown);

src/learning-header/LearningHeader.jsx

@@ -0,0 +1,81 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { getConfig } from '@edx/frontend-platform';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { AppContext } from '@edx/frontend-platform/react';
+
+import AnonymousUserMenu from './AnonymousUserMenu';
+import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
+import messages from './messages';
+
+function LinkedLogo({
+  href,
+  src,
+  alt,
+  ...attributes
+}) {
+  return (
+    <a href={href} {...attributes}>
+      <img className="d-block" src={src} alt={alt} />
+    </a>
+  );
+}
+
+LinkedLogo.propTypes = {
+  href: PropTypes.string.isRequired,
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string.isRequired,
+};
+
+function LearningHeader({
+  courseOrg, courseNumber, courseTitle, intl, showUserDropdown,
+}) {
+  const { authenticatedUser } = useContext(AppContext);
+
+  const headerLogo = (
+    <LinkedLogo
+      className="logo"
+      href={`${getConfig().LMS_BASE_URL}/dashboard`}
+      src={getConfig().LOGO_URL}
+      alt={getConfig().SITE_NAME}
+    />
+  );
+
+  return (
+    <header className="learning-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>
+        {showUserDropdown && authenticatedUser && (
+          <AuthenticatedUserDropdown
+            username={authenticatedUser.username}
+          />
+        )}
+        {showUserDropdown && !authenticatedUser && (
+          <AnonymousUserMenu />
+        )}
+      </div>
+    </header>
+  );
+}
+
+LearningHeader.propTypes = {
+  courseOrg: PropTypes.string,
+  courseNumber: PropTypes.string,
+  courseTitle: PropTypes.string,
+  intl: intlShape.isRequired,
+  showUserDropdown: PropTypes.bool,
+};
+
+LearningHeader.defaultProps = {
+  courseOrg: null,
+  courseNumber: null,
+  courseTitle: null,
+  showUserDropdown: true,
+};
+
+export default injectIntl(LearningHeader);

src/learning-header/LearningHeader.test.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import {
+  authenticatedUser, initializeMockApp, render, screen,
+} from '../setupTest';
+import { LearningHeader as Header } from '../index';
+
+describe('Header', () => {
+  beforeAll(async () => {
+    // We need to mock AuthService to implicitly use `getAuthenticatedUser` within `AppContext.Provider`.
+    await initializeMockApp();
+  });
+
+  it('displays user button', () => {
+    render(<Header />);
+    expect(screen.getByRole('button')).toHaveTextContent(authenticatedUser.username);
+  });
+
+  it('displays course data', () => {
+    const courseData = {
+      courseOrg: 'course-org',
+      courseNumber: 'course-number',
+      courseTitle: 'course-title',
+    };
+    render(<Header {...courseData} />);
+
+    expect(screen.getByText(`${courseData.courseOrg} ${courseData.courseNumber}`)).toBeInTheDocument();
+    expect(screen.getByText(courseData.courseTitle)).toBeInTheDocument();
+  });
+});

src/learning-header/messages.js

@@ -0,0 +1,41 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  dashboard: {
+    id: 'header.menu.dashboard.label',
+    defaultMessage: 'Dashboard',
+    description: 'The text for the user menu Dashboard navigation link.',
+  },
+  help: {
+    id: 'header.help.label',
+    defaultMessage: 'Help',
+    description: 'The text for the link to the Help Center',
+  },
+  profile: {
+    id: 'header.menu.profile.label',
+    defaultMessage: 'Profile',
+    description: 'The text for the user menu Profile navigation link.',
+  },
+  account: {
+    id: 'header.menu.account.label',
+    defaultMessage: 'Account',
+    description: 'The text for the user menu Account navigation link.',
+  },
+  orderHistory: {
+    id: 'header.menu.orderHistory.label',
+    defaultMessage: 'Order History',
+    description: 'The text for the user menu Order History navigation link.',
+  },
+  skipNavLink: {
+    id: 'header.navigation.skipNavLink',
+    defaultMessage: 'Skip to main content.',
+    description: 'A link used by screen readers to allow users to skip to the main content of the page.',
+  },
+  signOut: {
+    id: 'header.menu.signOut.label',
+    defaultMessage: 'Sign Out',
+    description: 'The label for the user menu Sign Out action.',
+  },
+});
+
+export default messages;

src/setupTest.js

@@ -1,8 +1,21 @@
 /* eslint-disable import/no-extraneous-dependencies */
 
 import Enzyme from 'enzyme';
+import React from 'react';
+import PropTypes from 'prop-types';
 import Adapter from 'enzyme-adapter-react-16';
+import '@testing-library/jest-dom';
+import '@testing-library/jest-dom/extend-expect';
 import 'babel-polyfill';
+import 'jest-chain';
+import { getConfig, mergeConfig } from '@edx/frontend-platform';
+import { configure as configureLogging } from '@edx/frontend-platform/logging';
+import { configure as configureI18n } from '@edx/frontend-platform/i18n';
+import { configure as configureAuth, MockAuthService } from '@edx/frontend-platform/auth';
+import { render as rtlRender } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import AppProvider from '@edx/frontend-platform/react/AppProvider';
+import appMessages from './i18n';
 
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -11,16 +24,106 @@ Enzyme.configure({ adapter: new Adapter() });
 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_COOKIE_NAME = 'csrftoken';
 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.LOGOUT_URL = 'http://localhost:18000/logout';
 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';
+
+class MockLoggingService {
+  logInfo = jest.fn();
+
+  logError = jest.fn();
+}
+
+export const authenticatedUser = {
+  userId: 'abc123',
+  username: 'Mock User',
+  roles: [],
+  administrator: false,
+};
+
+export function initializeMockApp() {
+  mergeConfig({
+    INSIGHTS_BASE_URL: process.env.INSIGHTS_BASE_URL || null,
+    STUDIO_BASE_URL: process.env.STUDIO_BASE_URL || null,
+    TWITTER_URL: process.env.TWITTER_URL || null,
+    BASE_URL: process.env.BASE_URL || null,
+    LMS_BASE_URL: process.env.LMS_BASE_URL || null,
+    LOGIN_URL: process.env.LOGIN_URL || null,
+    LOGOUT_URL: process.env.LOGOUT_URL || null,
+    REFRESH_ACCESS_TOKEN_ENDPOINT: process.env.REFRESH_ACCESS_TOKEN_ENDPOINT || null,
+    ACCESS_TOKEN_COOKIE_NAME: process.env.ACCESS_TOKEN_COOKIE_NAME || null,
+    CSRF_TOKEN_API_PATH: process.env.CSRF_TOKEN_API_PATH || null,
+    LOGO_URL: process.env.LOGO_URL || null,
+    SITE_NAME: process.env.SITE_NAME || null,
+
+    authenticatedUser: {
+      userId: 'abc123',
+      username: 'Mock User',
+      roles: [],
+      administrator: false,
+    },
+  });
+
+  const loggingService = configureLogging(MockLoggingService, {
+    config: getConfig(),
+  });
+  const authService = configureAuth(MockAuthService, {
+    config: getConfig(),
+    loggingService,
+  });
+
+  // i18n doesn't have a service class to return.
+  configureI18n({
+    config: getConfig(),
+    loggingService,
+    messages: [appMessages],
+  });
+
+  return { loggingService, authService };
+}
+
+function render(
+  ui,
+  {
+    store = null,
+    ...renderOptions
+  } = {},
+) {
+  function Wrapper({ children }) {
+    return (
+    // eslint-disable-next-line react/jsx-filename-extension
+      <IntlProvider locale="en">
+        <AppProvider store={store}>
+          {children}
+        </AppProvider>
+      </IntlProvider>
+    );
+  }
+
+  Wrapper.propTypes = {
+    children: PropTypes.node.isRequired,
+  };
+
+  return rtlRender(ui, { wrapper: Wrapper, ...renderOptions });
+}
+
+// Re-export everything.
+export * from '@testing-library/react';
+
+// Override `render` method.
+export {
+  render,
+};

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'),
+    },
+  },
+});