Merge pull request #256 from openedx/abdullahwaheed/transifex-languages-list-update

Supported Transifex languages in Makefile

.github/workflows/commitlint.yml

@@ -7,4 +7,4 @@ on:
 
 jobs:
   commitlint:
-    uses: edx/.github/.github/workflows/commitlint.yml@master
+    uses: openedx/.github/.github/workflows/commitlint.yml@master

.gitignore

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

Makefile

@@ -1,5 +1,5 @@
 transifex_resource = frontend-component-header
-transifex_langs = "ar,fr,fr_CA,es_419,zh_CN"
+transifex_langs = "ar,fr,es_419,zh_CN,pt,it,de,uk,ru,hi,fr_CA"
 
 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 --languages=$(transifex_langs)
+	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
 
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:

README.rst

@@ -14,7 +14,7 @@ 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>`_
+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/openedx/frontend-template-application/blob/master/src/index.jsx>`_
 
 Environment Variables
 =====================
@@ -53,8 +53,8 @@ This library has the following exports:
 Examples
 ========
 
-* `An example of component and messages usage. <https://github.com/edx/frontend-template-application/blob/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx#L21>`_
+* `An example of component and messages usage. <https://github.com/openedx/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>`_
+* `An example of SCSS file usage. <https://github.com/openedx/frontend-template-application/blob/3cd5485bf387b8c479baf6b02bf59e3061dc3465/src/index.scss#L8>`_
 
 
 ***********

package-lock.json

@@ -21,22 +21,22 @@
       "devDependencies": {
         "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
         "@edx/frontend-build": "11.0.2",
-        "@edx/frontend-platform": "2.5.2",
+        "@edx/frontend-platform": "2.6.2",
         "@edx/paragon": "19.25.3",
-        "@testing-library/dom": "8.16.0",
+        "@testing-library/dom": "8.18.1",
-        "@testing-library/jest-dom": "5.16.4",
+        "@testing-library/jest-dom": "5.16.5",
         "@testing-library/react": "10.4.9",
         "codecov": "3.8.3",
         "enzyme": "3.11.0",
         "enzyme-adapter-react-16": "1.15.6",
         "husky": "7.0.4",
         "jest": "28.1.3",
-        "jest-chain": "1.1.5",
+        "jest-chain": "1.1.6",
         "prop-types": "15.8.1",
         "react": "16.14.0",
         "react-dom": "16.14.0",
-        "react-redux": "7.2.8",
+        "react-redux": "7.2.9",
-        "react-router-dom": "5.3.3",
+        "react-router-dom": "5.3.4",
         "react-test-renderer": "16.14.0",
         "reactifex": "1.1.1",
         "redux": "4.2.0",
@@ -50,6 +50,12 @@
         "react-dom": "^16.9.0"
       }
     },
+    "node_modules/@adobe/css-tools": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.0.1.tgz",
+      "integrity": "sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g==",
+      "dev": true
+    },
     "node_modules/@babel/cli": {
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.16.0.tgz",
@@ -3143,9 +3149,9 @@
       }
     },
     "node_modules/@edx/frontend-platform": {
-      "version": "2.5.2",
+      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-2.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-2.6.2.tgz",
-      "integrity": "sha512-ER/Gb8unT8W0cBg94S0ZuZZtjPa7MPP211EYMh0l2LrEpT0Fk1X8fiWY0ikUcLj5YRLDIbqsxJOIO+iro0LxIA==",
+      "integrity": "sha512-h+gYLkPYw41krGiSGs59o2jaq/g3Yk6ay/3rBq0y1/KM6eeaq/F7o14YOhfTRLTpld9Hg+MPKzfOuHyqQN2TEw==",
       "dev": true,
       "dependencies": {
         "@cospired/i18n-iso-languages": "2.2.0",
@@ -5820,9 +5826,9 @@
       }
     },
     "node_modules/@testing-library/dom": {
-      "version": "8.16.0",
+      "version": "8.18.1",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.16.0.tgz",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.18.1.tgz",
-      "integrity": "sha512-uxF4zmnLHHDlmW4l+0WDjcgLVwCvH+OVLpD8Dfp+Bjfz85prwxWGbwXgJdLtkgjD0qfOzkJF9SmA6YZPsMYX4w==",
+      "integrity": "sha512-oEvsm2B/WtcHKE+IcEeeCqNU/ltFGaVyGbpcm4g/2ytuT49jrlH9x5qRKL/H3A6yfM4YAbSbC0ceT5+9CEXnLg==",
       "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
@@ -5941,16 +5947,16 @@
       }
     },
     "node_modules/@testing-library/jest-dom": {
-      "version": "5.16.4",
+      "version": "5.16.5",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.4.tgz",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.5.tgz",
-      "integrity": "sha512-Gy+IoFutbMQcky0k+bqqumXZ1cTGswLsFqmNLzNdSKkU9KGV2u9oXhukCbbJ9/LRPKiqwxEE8VpV/+YZlfkPUA==",
+      "integrity": "sha512-N5ixQ2qKpi5OLYfwQmUb/5mSV9LneAcaUfp32pn4yCnpb8r/Yz0pXFPck21dIicKmi+ta5WRAknkZCfA8refMA==",
       "dev": true,
       "dependencies": {
+        "@adobe/css-tools": "^4.0.1",
         "@babel/runtime": "^7.9.2",
         "@types/testing-library__jest-dom": "^5.9.1",
         "aria-query": "^5.0.0",
         "chalk": "^3.0.0",
-        "css": "^3.0.0",
         "css.escape": "^1.5.1",
         "dom-accessibility-api": "^0.5.6",
         "lodash": "^4.17.15",
@@ -9533,17 +9539,6 @@
         "node": "*"
       }
     },
-    "node_modules/css": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
-      "integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==",
-      "dev": true,
-      "dependencies": {
-        "inherits": "^2.0.4",
-        "source-map": "^0.6.1",
-        "source-map-resolve": "^0.6.0"
-      }
-    },
     "node_modules/css-declaration-sorter": {
       "version": "6.1.4",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.1.4.tgz",
@@ -9681,15 +9676,6 @@
       "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=",
       "dev": true
     },
-    "node_modules/css/node_modules/source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -15585,9 +15571,9 @@
       }
     },
     "node_modules/jest-chain": {
-      "version": "1.1.5",
+      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/jest-chain/-/jest-chain-1.1.5.tgz",
+      "resolved": "https://registry.npmjs.org/jest-chain/-/jest-chain-1.1.6.tgz",
-      "integrity": "sha512-bTx51vQP/6/XVDrMtz0WmT3wZoXvj5QAAnw1to+o6pvtjcwTIVuB6uR5URRXH/9rHf1WuM1UgsfVTWhTC/QAzw==",
+      "integrity": "sha512-eIkGzVBGQ1VuEErDceMYAET53pcwYVVTXtJEbY+x60Dwi+2M2uOt4rhKAej+wfVOAlE4G0plI9mstmv6GBtJjw==",
       "dev": true
     },
     "node_modules/jest-changed-files": {
@@ -19949,20 +19935,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/mini-create-react-context": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
-      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
-      "dev": true,
-      "dependencies": {
-        "@babel/runtime": "^7.12.1",
-        "tiny-warning": "^1.0.3"
-      },
-      "peerDependencies": {
-        "prop-types": "^15.0.0",
-        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
-      }
-    },
     "node_modules/mini-css-extract-plugin": {
       "version": "1.6.2",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.2.tgz",
@@ -22858,9 +22830,9 @@
       "dev": true
     },
     "node_modules/react-redux": {
-      "version": "7.2.8",
+      "version": "7.2.9",
-      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.8.tgz",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz",
-      "integrity": "sha512-6+uDjhs3PSIclqoCk0kd6iX74gzrGc3W5zcAjbrFgEdIjRSQObdIwfx80unTkVUYvbQ95Y8Av3OvFHq1w5EOUw==",
+      "integrity": "sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==",
       "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.15.4",
@@ -22974,16 +22946,15 @@
       }
     },
     "node_modules/react-router": {
-      "version": "5.3.3",
+      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.3.tgz",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
-      "integrity": "sha512-mzQGUvS3bM84TnbtMYR8ZjKnuPJ71IjSzR+DE6UkUqvN4czWIqEs17yLL8xkAycv4ev0AiN+IGrWu88vJs/p2w==",
+      "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
       "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.12.13",
         "history": "^4.9.0",
         "hoist-non-react-statics": "^3.1.0",
         "loose-envify": "^1.3.1",
-        "mini-create-react-context": "^0.4.0",
         "path-to-regexp": "^1.7.0",
         "prop-types": "^15.6.2",
         "react-is": "^16.6.0",
@@ -22995,16 +22966,16 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "5.3.3",
+      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz",
-      "integrity": "sha512-Ov0tGPMBgqmbu5CDmN++tv2HQ9HlWDuWIIqn4b88gjlAN5IHI+4ZUZRcpz9Hl0azFIwihbLDYw1OiHGRo7ZIng==",
+      "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==",
       "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.12.13",
         "history": "^4.9.0",
         "loose-envify": "^1.3.1",
         "prop-types": "^15.6.2",
-        "react-router": "5.3.3",
+        "react-router": "5.3.4",
         "tiny-invariant": "^1.0.2",
         "tiny-warning": "^1.0.0"
       },
@@ -24739,17 +24710,6 @@
         "node": ">=4.0.0"
       }
     },
-    "node_modules/source-map-resolve": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
-      "integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
-      "deprecated": "See https://github.com/lydell/source-map-resolve#deprecated",
-      "dev": true,
-      "dependencies": {
-        "atob": "^2.1.2",
-        "decode-uri-component": "^0.2.0"
-      }
-    },
     "node_modules/source-map-support": {
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
@@ -27519,6 +27479,12 @@
     }
   },
   "dependencies": {
+    "@adobe/css-tools": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.0.1.tgz",
+      "integrity": "sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g==",
+      "dev": true
+    },
     "@babel/cli": {
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.16.0.tgz",
@@ -29778,9 +29744,9 @@
       }
     },
     "@edx/frontend-platform": {
-      "version": "2.5.2",
+      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-2.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-2.6.2.tgz",
-      "integrity": "sha512-ER/Gb8unT8W0cBg94S0ZuZZtjPa7MPP211EYMh0l2LrEpT0Fk1X8fiWY0ikUcLj5YRLDIbqsxJOIO+iro0LxIA==",
+      "integrity": "sha512-h+gYLkPYw41krGiSGs59o2jaq/g3Yk6ay/3rBq0y1/KM6eeaq/F7o14YOhfTRLTpld9Hg+MPKzfOuHyqQN2TEw==",
       "dev": true,
       "requires": {
         "@cospired/i18n-iso-languages": "2.2.0",
@@ -31825,9 +31791,9 @@
       }
     },
     "@testing-library/dom": {
-      "version": "8.16.0",
+      "version": "8.18.1",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.16.0.tgz",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.18.1.tgz",
-      "integrity": "sha512-uxF4zmnLHHDlmW4l+0WDjcgLVwCvH+OVLpD8Dfp+Bjfz85prwxWGbwXgJdLtkgjD0qfOzkJF9SmA6YZPsMYX4w==",
+      "integrity": "sha512-oEvsm2B/WtcHKE+IcEeeCqNU/ltFGaVyGbpcm4g/2ytuT49jrlH9x5qRKL/H3A6yfM4YAbSbC0ceT5+9CEXnLg==",
       "dev": true,
       "requires": {
         "@babel/code-frame": "^7.10.4",
@@ -31917,16 +31883,16 @@
       }
     },
     "@testing-library/jest-dom": {
-      "version": "5.16.4",
+      "version": "5.16.5",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.4.tgz",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.5.tgz",
-      "integrity": "sha512-Gy+IoFutbMQcky0k+bqqumXZ1cTGswLsFqmNLzNdSKkU9KGV2u9oXhukCbbJ9/LRPKiqwxEE8VpV/+YZlfkPUA==",
+      "integrity": "sha512-N5ixQ2qKpi5OLYfwQmUb/5mSV9LneAcaUfp32pn4yCnpb8r/Yz0pXFPck21dIicKmi+ta5WRAknkZCfA8refMA==",
       "dev": true,
       "requires": {
+        "@adobe/css-tools": "^4.0.1",
         "@babel/runtime": "^7.9.2",
         "@types/testing-library__jest-dom": "^5.9.1",
         "aria-query": "^5.0.0",
         "chalk": "^3.0.0",
-        "css": "^3.0.0",
         "css.escape": "^1.5.1",
         "dom-accessibility-api": "^0.5.6",
         "lodash": "^4.17.15",
@@ -34853,25 +34819,6 @@
       "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs=",
       "dev": true
     },
-    "css": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
-      "integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==",
-      "dev": true,
-      "requires": {
-        "inherits": "^2.0.4",
-        "source-map": "^0.6.1",
-        "source-map-resolve": "^0.6.0"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        }
-      }
-    },
     "css-declaration-sorter": {
       "version": "6.1.4",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.1.4.tgz",
@@ -39536,9 +39483,9 @@
       }
     },
     "jest-chain": {
-      "version": "1.1.5",
+      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/jest-chain/-/jest-chain-1.1.5.tgz",
+      "resolved": "https://registry.npmjs.org/jest-chain/-/jest-chain-1.1.6.tgz",
-      "integrity": "sha512-bTx51vQP/6/XVDrMtz0WmT3wZoXvj5QAAnw1to+o6pvtjcwTIVuB6uR5URRXH/9rHf1WuM1UgsfVTWhTC/QAzw==",
+      "integrity": "sha512-eIkGzVBGQ1VuEErDceMYAET53pcwYVVTXtJEbY+x60Dwi+2M2uOt4rhKAej+wfVOAlE4G0plI9mstmv6GBtJjw==",
       "dev": true
     },
     "jest-changed-files": {
@@ -42838,16 +42785,6 @@
       "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
       "dev": true
     },
-    "mini-create-react-context": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
-      "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
-      "dev": true,
-      "requires": {
-        "@babel/runtime": "^7.12.1",
-        "tiny-warning": "^1.0.3"
-      }
-    },
     "mini-css-extract-plugin": {
       "version": "1.6.2",
       "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.2.tgz",
@@ -44966,9 +44903,9 @@
       "dev": true
     },
     "react-redux": {
-      "version": "7.2.8",
+      "version": "7.2.9",
-      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.8.tgz",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz",
-      "integrity": "sha512-6+uDjhs3PSIclqoCk0kd6iX74gzrGc3W5zcAjbrFgEdIjRSQObdIwfx80unTkVUYvbQ95Y8Av3OvFHq1w5EOUw==",
+      "integrity": "sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==",
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.15.4",
@@ -45044,16 +44981,15 @@
       }
     },
     "react-router": {
-      "version": "5.3.3",
+      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.3.tgz",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
-      "integrity": "sha512-mzQGUvS3bM84TnbtMYR8ZjKnuPJ71IjSzR+DE6UkUqvN4czWIqEs17yLL8xkAycv4ev0AiN+IGrWu88vJs/p2w==",
+      "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.12.13",
         "history": "^4.9.0",
         "hoist-non-react-statics": "^3.1.0",
         "loose-envify": "^1.3.1",
-        "mini-create-react-context": "^0.4.0",
         "path-to-regexp": "^1.7.0",
         "prop-types": "^15.6.2",
         "react-is": "^16.6.0",
@@ -45062,16 +44998,16 @@
       }
     },
     "react-router-dom": {
-      "version": "5.3.3",
+      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz",
-      "integrity": "sha512-Ov0tGPMBgqmbu5CDmN++tv2HQ9HlWDuWIIqn4b88gjlAN5IHI+4ZUZRcpz9Hl0azFIwihbLDYw1OiHGRo7ZIng==",
+      "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==",
       "dev": true,
       "requires": {
         "@babel/runtime": "^7.12.13",
         "history": "^4.9.0",
         "loose-envify": "^1.3.1",
         "prop-types": "^15.6.2",
-        "react-router": "5.3.3",
+        "react-router": "5.3.4",
         "tiny-invariant": "^1.0.2",
         "tiny-warning": "^1.0.0"
       }
@@ -46463,16 +46399,6 @@
         }
       }
     },
-    "source-map-resolve": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
-      "integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
-      "dev": true,
-      "requires": {
-        "atob": "^2.1.2",
-        "decode-uri-component": "^0.2.0"
-      }
-    },
     "source-map-support": {
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",

package.json

@@ -24,18 +24,18 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/edx/frontend-component-header.git"
+    "url": "git+https://github.com/openedx/frontend-component-header.git"
   },
   "author": "edX",
   "license": "AGPL-3.0",
   "bugs": {
-    "url": "https://github.com/edx/frontend-component-header/issues"
+    "url": "https://github.com/openedx/frontend-component-header/issues"
   },
-  "homepage": "https://github.com/edx/frontend-component-header#readme",
+  "homepage": "https://github.com/openedx/frontend-component-header#readme",
   "devDependencies": {
     "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
     "@edx/frontend-build": "11.0.2",
-    "@edx/frontend-platform": "2.5.2",
+    "@edx/frontend-platform": "2.6.2",
     "@edx/paragon": "19.25.3",
     "codecov": "3.8.3",
     "enzyme": "3.11.0",
@@ -44,16 +44,16 @@
     "prop-types": "15.8.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "react-redux": "7.2.8",
+    "react-redux": "7.2.9",
-    "react-router-dom": "5.3.3",
+    "react-router-dom": "5.3.4",
     "react-test-renderer": "16.14.0",
     "reactifex": "1.1.1",
     "redux": "4.2.0",
     "redux-saga": "1.1.3",
-    "@testing-library/dom": "8.16.0",
+    "@testing-library/dom": "8.18.1",
-    "@testing-library/jest-dom": "5.16.4",
+    "@testing-library/jest-dom": "5.16.5",
     "jest": "28.1.3",
-    "jest-chain": "1.1.5",
+    "jest-chain": "1.1.6",
     "@testing-library/react": "10.4.9"
   },
   "dependencies": {

src/StudioHeader.jsx

@@ -5,11 +5,17 @@ import { AppContext } from '@edx/frontend-platform/react';
 import {
   APP_CONFIG_INITIALIZED,
   ensureConfig,
+  getConfig,
   mergeConfig,
   subscribe,
 } from '@edx/frontend-platform';
+import { ActionRow } from '@edx/paragon';
 
-import DesktopHeader from './DesktopHeader';
+import { Menu, MenuTrigger, MenuContent } from './Menu';
+import Avatar from './Avatar';
+import { LinkedLogo, Logo } from './Logo';
+
+import { CaretIcon } from './Icons';
 
 import messages from './Header.messages';
 
@@ -28,7 +34,124 @@ subscribe(APP_CONFIG_INITIALIZED, () => {
   }, 'StudioHeader additional config');
 });
 
-function StudioHeader({ intl, mainMenu, appMenu }) {
+class StudioDesktopHeaderBase extends React.Component {
+  constructor(props) { // eslint-disable-line no-useless-constructor
+    super(props);
+  }
+
+  renderUserMenu() {
+    const {
+      userMenu,
+      avatar,
+      username,
+      intl,
+    } = this.props;
+
+    return (
+      <Menu transitionClassName="menu-dropdown" transitionTimeout={250}>
+        <MenuTrigger
+          tag="button"
+          aria-label={intl.formatMessage(messages['header.label.account.menu.for'], { username })}
+          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" />
+        </MenuTrigger>
+        <MenuContent className="mb-0 dropdown-menu show dropdown-menu-right pin-right shadow py-2">
+          {userMenu.map(({ type, href, content }) => (
+            <a className={`dropdown-${type}`} key={`${type}-${content}`} href={href}>{content}</a>
+          ))}
+        </MenuContent>
+      </Menu>
+    );
+  }
+
+  renderLoggedOutItems() {
+    const { loggedOutItems } = this.props;
+
+    return loggedOutItems.map((item, i, arr) => (
+      <a
+        key={`${item.type}-${item.content}`}
+        className={i < arr.length - 1 ? 'btn mr-2 btn-link' : 'btn mr-2 btn-outline-primary'}
+        href={item.href}
+      >
+        {item.content}
+      </a>
+    ));
+  }
+
+  render() {
+    const {
+      logo,
+      logoAltText,
+      logoDestination,
+      loggedIn,
+      intl,
+      actionRowContent,
+    } = 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">
+        <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} />}
+            <ActionRow>
+              {actionRowContent}
+              <nav
+                aria-label={intl.formatMessage(messages['header.label.secondary.nav'])}
+                className="nav secondary-menu-container align-items-center ml-auto"
+              >
+                {loggedIn ? this.renderUserMenu() : this.renderLoggedOutItems()}
+              </nav>
+            </ActionRow>
+          </div>
+        </div>
+      </header>
+    );
+  }
+}
+
+StudioDesktopHeaderBase.propTypes = {
+  userMenu: PropTypes.arrayOf(PropTypes.shape({
+    type: PropTypes.oneOf(['item', 'menu']),
+    href: PropTypes.string,
+    content: PropTypes.string,
+  })),
+  loggedOutItems: PropTypes.arrayOf(PropTypes.shape({
+    type: PropTypes.oneOf(['item', 'menu']),
+    href: PropTypes.string,
+    content: PropTypes.string,
+  })),
+  logo: PropTypes.string,
+  logoAltText: PropTypes.string,
+  logoDestination: PropTypes.string,
+  avatar: PropTypes.string,
+  username: PropTypes.string,
+  loggedIn: PropTypes.bool,
+  actionRowContent: PropTypes.element,
+
+  // i18n
+  intl: intlShape.isRequired,
+};
+
+StudioDesktopHeaderBase.defaultProps = {
+  userMenu: [],
+  loggedOutItems: [],
+  logo: null,
+  logoAltText: null,
+  logoDestination: null,
+  avatar: null,
+  username: null,
+  loggedIn: false,
+  actionRowContent: null,
+};
+
+const StudioDesktopHeader = injectIntl(StudioDesktopHeaderBase);
+
+function StudioHeader({ intl, actionRowContent }) {
   const { authenticatedUser, config } = useContext(AppContext);
 
   const userMenu = authenticatedUser === null ? [] : [
@@ -56,44 +179,21 @@ function StudioHeader({ intl, mainMenu, appMenu }) {
     loggedIn: authenticatedUser !== null,
     username: authenticatedUser !== null ? authenticatedUser.username : null,
     avatar: authenticatedUser !== null ? authenticatedUser.avatar : null,
-    mainMenu,
+    actionRowContent,
     userMenu,
-    appMenu,
     loggedOutItems: [],
   };
 
-  return <DesktopHeader {...props} />;
+  return <StudioDesktopHeader {...props} />;
 }
 
 StudioHeader.propTypes = {
   intl: intlShape.isRequired,
-  appMenu: PropTypes.shape(
+  actionRowContent: PropTypes.element,
-    {
-      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,
+  actionRowContent: <></>,
-  mainMenu: [],
 };
 
 export default injectIntl(StudioHeader);

src/StudioHeader.test.jsx

@@ -1,7 +1,13 @@
 import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import TestRenderer from 'react-test-renderer';
+import { Link } from 'react-router-dom';
 import { AppContext } from '@edx/frontend-platform/react';
+import {
+  ActionRow,
+  Button,
+  Dropdown,
+} from '@edx/paragon';
 
 import { StudioHeader } from './index';
 
@@ -36,74 +42,31 @@ describe('<StudioHeader />', () => {
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
 
-  it('renders correctly with the optional app menu', () => {
+  it('renders correctly with optional action row content', () => {
-    const appMenu = {
+    const actionRowContent = (
-      content: 'App Menu',
+      <>
-      menuItems: [
+        <Dropdown>
-        {
+          <Dropdown.Toggle variant="outline-primary" id="library-header-menu-dropdown">
-          type: 'dropdown',
+            Settings
-          href: 'https://menu-href-url.org',
+          </Dropdown.Toggle>
-          content: 'Content 1',
+          <Dropdown.Menu>
-        },
+            <Dropdown.Item as={Link} to="#">Dropdown Item 1</Dropdown.Item>
-        {
+            <Dropdown.Item as={Link} to="#">Dropdown Item 2</Dropdown.Item>
-          type: 'dropdown',
+            <Dropdown.Item as={Link} to="#">Dropdown Item 3</Dropdown.Item>
-          href: 'https://menu-href-url.org',
+          </Dropdown.Menu>
-          content: 'Content 2',
+        </Dropdown>
-        },
+        <ActionRow.Spacer />
-        {
+        <Button
-          type: 'dropdown',
+          variant="tertiary"
-          href: 'https://menu-href-url.org',
+          href="#"
-          content: 'Content 3',
+          rel="noopener noreferrer"
-        },
+          target="_blank"
-      ],
+          title="Help Button"
-    };
+        >Help
-    const component = (
+        </Button>
-      <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
@@ -123,7 +86,7 @@ describe('<StudioHeader />', () => {
             },
           }}
         >
-          <StudioHeader mainMenu={mainMenu} />
+          <StudioHeader actionRowContent={actionRowContent} />
         </AppContext.Provider>
       </IntlProvider>
     );

src/__snapshots__/StudioHeader.test.jsx.snap

@@ -21,83 +21,83 @@ exports[`<StudioHeader /> renders correctly 1`] = `
         className="logo"
         src="https://edx-cdn.org/v3/default/logo.svg"
       />
-      <nav
+      <div
-        aria-label="Main"
+        className="pgn__action-row"
-        className="nav main-nav"
-      />
-      <nav
-        aria-label="Secondary"
-        className="nav secondary-menu-container align-items-center ml-auto"
       >
-        <div
+        <nav
-          className="menu null"
+          aria-label="Secondary"
-          onKeyDown={[Function]}
+          className="nav secondary-menu-container align-items-center ml-auto"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
         >
-          <button
+          <div
-            aria-expanded={false}
+            className="menu null"
-            aria-haspopup="menu"
+            onKeyDown={[Function]}
-            aria-label="Account menu for edX"
+            onMouseEnter={[Function]}
-            className="menu-trigger btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
+            onMouseLeave={[Function]}
-            onClick={[Function]}
           >
-            <span
+            <button
-              className="avatar overflow-hidden d-inline-flex rounded-circle mr-2"
+              aria-expanded={false}
-              style={
+              aria-haspopup="menu"
-                Object {
+              aria-label="Account menu for edX"
-                  "height": "1.5em",
+              className="menu-trigger btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
-                  "width": "1.5em",
+              onClick={[Function]}
-                }
-              }
             >
-              <svg
+              <span
-                aria-hidden={true}
+                className="avatar overflow-hidden d-inline-flex rounded-circle mr-2"
-                focusable="false"
-                height="24px"
-                role="img"
                 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 24 24"
+                viewBox="0 0 16 16"
-                width="24px"
+                width="16px"
               >
                 <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"
+                  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>
-            </span>
+            </button>
-            edX
+          </div>
-             
+        </nav>
-            <svg
+      </div>
-              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`] = `
+exports[`<StudioHeader /> renders correctly with optional action row content 1`] = `
 <header
   className="site-header-desktop"
 >
@@ -118,307 +118,108 @@ exports[`<StudioHeader /> renders correctly with the optional app menu 1`] = `
         className="logo"
         src="https://edx-cdn.org/v3/default/logo.svg"
       />
-      <nav
+      <div
-        aria-label="Main"
+        className="pgn__action-row"
-        className="nav main-nav"
-      />
-      <nav
-        aria-label="App"
-        className="nav app-nav"
       >
         <div
-          className="menu null"
+          className="dropdown"
-          onKeyDown={[Function]}
+          data-testid="dropdown"
-          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-haspopup={true}
-            aria-label="Account menu for edX"
+            className="dropdown-toggle btn btn-outline-primary"
-            className="menu-trigger btn btn-outline-primary d-inline-flex align-items-center pl-2 pr-3"
+            disabled={false}
+            id="library-header-menu-dropdown"
             onClick={[Function]}
+            type="button"
           >
-            <span
+            Settings
-              className="avatar overflow-hidden d-inline-flex rounded-circle mr-2"
+          </button>
-              style={
+        </div>
-                Object {
+        <span
-                  "height": "1.5em",
+          className="pgn__action-row-spacer"
-                  "width": "1.5em",
+        />
-                }
+        <a
-              }
+          className="btn btn-tertiary"
+          href="#"
+          onClick={[Function]}
+          onKeyDown={[Function]}
+          rel="noopener noreferrer"
+          role="button"
+          target="_blank"
+          title="Help Button"
+        >
+          Help
+        </a>
+        <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]}
             >
-              <svg
+              <span
-                aria-hidden={true}
+                className="avatar overflow-hidden d-inline-flex rounded-circle mr-2"
-                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
+                <svg
-                  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"
+                  aria-hidden={true}
-                  fill="currentColor"
+                  focusable="false"
-                />
+                  height="24px"
-              </svg>
+                  role="img"
-            </span>
+                  style={
-            edX
+                    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"
+                height="16px"
                 role="img"
-                style={
-                  Object {
-                    "height": "1.5em",
-                    "width": "1.5em",
-                  }
-                }
                 version="1.1"
-                viewBox="0 0 24 24"
+                viewBox="0 0 16 16"
-                width="24px"
+                width="16px"
               >
                 <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"
+                  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>
-            </span>
+            </button>
-            edX
+          </div>
-             
+        </nav>
-            <svg
+      </div>
-              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/index.js

@@ -1,34 +1,28 @@
 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';
-import kokrMessages from './messages/ko_KR.json';
+import es419Messages from './messages/es_419.json';
-import ptbrMessages from './messages/pt_BR.json';
 import zhcnMessages from './messages/zh_CN.json';
+import ptMessages from './messages/pt.json';
+import itMessages from './messages/it.json';
+import ukMessages from './messages/uk.json';
+import deMessages from './messages/de.json';
+import ruMessages from './messages/ru.json';
+import hiMessages from './messages/hi.json';
+import frCAMessages from './messages/fr_CA.json';
+// no need to import en messages-- they are in the defaultMessage field
 
 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,
-  'ko-kr': kokrMessages,
+  pt: ptMessages,
-  'pt-br': ptbrMessages,
+  it: itMessages,
+  de: deMessages,
+  hi: hiMessages,
+  'fr-ca': frCAMessages,
+  ru: ruMessages,
+  uk: ukMessages,
 };
 
 export default messages;

src/i18n/messages/ar.json

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

src/i18n/messages/ca.json

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

src/i18n/messages/de.json

@@ -0,0 +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/i18n/messages/he.json

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

src/i18n/messages/hi.json

@@ -0,0 +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/i18n/messages/id.json

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

src/i18n/messages/it.json

@@ -0,0 +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/i18n/messages/ko_KR.json

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

src/i18n/messages/pl.json

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

src/i18n/messages/pt.json

@@ -0,0 +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/i18n/messages/pt_BR.json

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

src/i18n/messages/ru.json

@@ -1 +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/i18n/messages/th.json

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

src/i18n/messages/uk.json

@@ -1 +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"
+}