Merge branch 'master' of https://github.com/openedx/frontend-component-header into maman/codecov-update

`npm run build` script in Github CI

.env.development

@@ -5,6 +5,7 @@ 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

.github/CODEOWNERS

@@ -1 +0,0 @@
-* @edx/community-engineering

.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

@@ -1,8 +1,17 @@
 name: Default CI
-on: [push, pull_request]
+on:
+  push:
+    branches:
+    - master
+  pull_request:
+    branches:
+    - '**'
 jobs:
-  build:
+  tests:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: [16]
     steps:
     - name: Checkout
       uses: actions/checkout@v2
@@ -11,7 +20,7 @@ jobs:
     - name: Setup Nodejs
       uses: actions/setup-node@v2
       with:
-        node-version: 12
+        node-version: ${{ matrix.node }}
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes
@@ -20,7 +29,9 @@ jobs:
       run: npm run lint
     - name: Test
       run: npm run test
+    - name: Build
+      run: npm run build
     - name: i18n_extract
       run: npm run i18n_extract
     - name: Coverage
-      uses: codecov/codecov-action@v2
+      uses: codecov/codecov-action@v3

.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

@@ -2,38 +2,38 @@ name: Release CI
 on:
   push:
     branches:
-      - master
+    - 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: 12
-      - name: Install dependencies
-        run: npm ci
-      - name: Validate package-lock.json changes
-        run: make validate-no-uncommitted-package-lock-changes
-      - name: Lint
-        run: npm run lint
-      - name: Test
-        run: npm run test
-      - name: i18n_extract
-        run: npm run i18n_extract
-      - name: Coverage
-        uses: codecov/codecov-action@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 }}
+    - 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@v3
+    - 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 }}

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

@@ -56,6 +56,7 @@ 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
 ***********

package.json

@@ -34,41 +34,43 @@
   "homepage": "https://github.com/edx/frontend-component-header#readme",
   "devDependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-build": "5.6.14",
-    "@edx/frontend-platform": "1.14.1",
-    "@edx/paragon": "12.8.0",
+    "@edx/frontend-build": "11.0.2",
+    "@edx/frontend-platform": "2.6.1",
+    "@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.7.2",
+    "jest": "27.5.1",
+    "jest-chain": "1.1.5",
+    "prop-types": "15.8.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "react-redux": "7.2.6",
-    "react-router-dom": "5.3.0",
+    "react-redux": "7.2.8",
+    "react-router-dom": "5.3.3",
     "react-test-renderer": "16.14.0",
     "reactifex": "1.1.1",
-    "redux": "4.1.2",
+    "redux": "4.2.0",
     "redux-saga": "1.1.3",
-    "@testing-library/dom": "7.16.3",
-    "@testing-library/jest-dom": "5.15.1",
-    "jest": "27.3.1",
+    "@testing-library/dom": "8.16.0",
+    "@testing-library/jest-dom": "5.16.5",
+    "jest": "28.1.3",
     "jest-chain": "1.1.5",
-    "@testing-library/react": "10.3.0"
+    "@testing-library/react": "10.4.9"
   },
   "dependencies": {
     "babel-polyfill": "6.26.0",
     "react-responsive": "8.2.0",
-    "react-transition-group": "4.4.2",
+    "react-transition-group": "4.4.5",
     "@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"
+    "@fortawesome/react-fontawesome": "^0.2.0"
   },
   "peerDependencies": {
-    "@edx/frontend-platform": "^1.8.0",
-    "@edx/paragon": "^7.0.0",
+    "@edx/frontend-platform": "^2.0.0",
+    "@edx/paragon": ">= 7.0.0 < 21.0.0",
     "prop-types": "^15.5.10",
     "react": "^16.9.0",
     "react-dom": "^16.9.0"

src/DesktopHeader.jsx

@@ -54,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,
@@ -102,6 +120,7 @@ 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;
@@ -118,6 +137,14 @@ class DesktopHeader extends React.Component {
             >
               {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"
@@ -155,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 = {
@@ -167,6 +208,7 @@ DesktopHeader.defaultProps = {
   avatar: null,
   username: null,
   loggedIn: false,
+  appMenu: null,
 };
 
 export default injectIntl(DesktopHeader);

src/Header.messages.jsx

@@ -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',
@@ -96,6 +106,11 @@ const messages = defineMessages({
     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/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/__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/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/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": "Inicio Studio",
+  "header.user.menu.studio.maintenance": "Mantenimiento",
+  "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": "Aplicación",
+  "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/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,7 +1,8 @@
 import Header from './Header';
 import LearningHeader from './learning-header/LearningHeader';
 import messages from './i18n/index';
+import StudioHeader from './StudioHeader';
 
-export { LearningHeader, messages };
+export { LearningHeader, messages, StudioHeader };
 
 export default Header;