fix: updated frontend-build to bump eslint version (#312)

* chore: updated frontend-build to bump eslint version

* refactor: updated package-lock

.env.development

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

.eslintignore

@@ -1,3 +1,4 @@
 coverage
 dist
+example
 node_modules

.eslintrc.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 const { createConfig } = require('@edx/frontend-build');
 
 module.exports = createConfig('eslint');

.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/add-remove-label-on-comment.yml

@@ -0,0 +1,20 @@
+# This workflow runs when a comment is made on the ticket
+# If the comment starts with "label: " it tries to apply
+# the label indicated in rest of comment.
+# If the comment starts with "remove label: ", it tries
+# to remove the indicated label.
+# Note: Labels are allowed to have spaces and this script does
+# not parse spaces (as often a space is legitimate), so the command
+# "label: really long lots of words label" will apply the
+# label "really long lots of words label"
+
+name: Allows for the adding and removing of labels via comment
+
+on:
+  issue_comment:
+    types: [created]
+
+jobs:
+  add_remove_labels:
+    uses: openedx/.github/.github/workflows/add-remove-label-on-comment.yml@master
+

.github/workflows/ci.yml

@@ -0,0 +1,36 @@
+name: Default CI
+on:
+  push:
+    branches:
+    - master
+  pull_request:
+    branches:
+    - '**'
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v3
+      with:
+        fetch-depth: 0
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
+    - name: Setup Nodejs
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ env.NODE_VER }}
+    - 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: Build
+      run: npm run build
+    - name: i18n_extract
+      run: npm run i18n_extract
+    - name: Coverage
+      uses: codecov/codecov-action@v3

.github/workflows/commitlint.yml

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

.github/workflows/lockfileversion-check.yml

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

.github/workflows/release.yml

@@ -0,0 +1,39 @@
+name: Release CI
+on:
+  push:
+    branches:
+    - master
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v3
+      with:
+        fetch-depth: 0
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
+    - name: Setup Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ env.NODE_VER }}
+    - 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
+      env:
+        GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
+        NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
+      run: npx semantic-release

.github/workflows/self-assign-issue.yml

@@ -0,0 +1,12 @@
+# This workflow runs when a comment is made on the ticket
+# If the comment starts with "assign me" it assigns the author to the
+# ticket (case insensitive)
+
+name: Assign comment author to ticket if they say "assign me"
+on:
+  issue_comment:
+    types: [created]
+
+jobs:
+  self_assign_by_comment:
+    uses: openedx/.github/.github/workflows/self-assign-issue.yml@master

.gitignore

@@ -9,3 +9,4 @@ temp
 src/i18n/transifex_input.json
 temp/babel-plugin-react-intl
 /.vscode
+module.config.js

.nvmrc

@@ -0,0 +1 @@
+18

.travis.yml

@@ -1,19 +0,0 @@
-language: node_js
-node_js: 12
-before_install:
-- npm install -g npm@6
-install:
- - npm install
-script:
-- make validate-no-uncommitted-package-lock-changes
-- npm run lint
-- npm run i18n_extract
-- npm run test
-- npm run build
-after_success:
-- npx semantic-release
-- codecov
-env:
-  global:
-    - secure: dxQadqP6tsoJzHcqs/Hs5AjE42z45q8ZeWKP5HcjbXoJURB4gc1uIxLky0FA6ZpulaTgRVTLcWQbx9yOODc9PQuFnFEDWlCg5EP8tONzeu7BVlJvV5eakgGUhl9w2pekBKsTGhK5dDg2y2D8bGfIL55UX81uiWeytp8s/y8QNs/FNXx9ScJnfhnC+2RfW52fB7iW12F1VYdQfVe43o5PsHze+YhB3FU/ztGe3iMaQiq9QplZWpvqQMpI7pTjyUAX8ITiiPS6UvLFObgpXpfjZdgd+yveFoi3z8o8F0NkmzBphFeSYFjFZE0qJ8bnGNIZldanMeuUgHmDeTwVmKQFhH2LqqnfcdGgW6UsKcHkSN1G51zzad2dEwAHrgxj1NkMp3JfEed2C7Kvntl6KRjVDmYZqHJvt+e+AHNbpjzblOW8tYMIrdz0TeJdk4D9pP3B3tRCtP6fvQ3GLzAMnaCrSsN6hZ9YVxWku8sg8WNEDHl14sZsdgk312MlHIdiUw97FHGrqx/NCix4IkUlCBDbKYbKzbZp20FfzZcwNRNH74+k6xpOnMGSfq8gByEhm9y02MBL76HiAI2VGct2La1ExaUfoikYGoNaZpFcZyOZKo6PYTYHpiUJmqrEnDyVQEOOXUaVsxWXwnYq/mU4nOEPKCRbNpPoksZdNxf6jlmMi8s=
-    - secure: lrlV0WQaXTRJ2lqDkFZ+1RkRb7YM/STOViOHUNboXb5+1ReVwY0wklFDVk/Qigp3jkbqWfzkBmEjSDVGDLD61QjpGY4BsxZ/Jn3+KUdo0n82Ym6cI/je1fH2gqDLi4U8bylmnkI5oEjV/1txDxkj4hF5w/Leo/oGue3xQohpi//ihhm/PxzExj+QiDqyZPZ5RQZeqLfPEU3Wff04vLE5bRmy1nDTZrgm5Wb1n5ItGsyrUyrCGuAM9kIEun65Snb8hxCuU9pSm1w/xF73iOGLiiC8KZhLu6SxSKoC872ai1GpUXNIqA8kpVeH0Erf5opMtqJT3jTTan/VOFQEoOeAKhR0ga+5rfK2jkhhN77B98dGVndNCfBpDlgQxVv42H6riFk3payZT262QiUqDejiBDtSPTokTGxf7xFtQkQQahhxVXzC2HRKEkDTXNSP8cvk2JJ4zCcUgxJpycudLMuC/Xv0upK+Q0caItBrHxfVNnRKkjKqlDxRhA8nXTY8d2n19FNi7wahCECbyweJJ76EaJaa/Ib6remUBrbGLoQ2PkaSMBHAcn3+7+H/6x11b2s1RHj5qyfIyrvZcDDyNuxdXwpOkhtrkwZsjgtOfXL6IuxW5FExgPPr8B9nNwJJKdTxyxgfqtwBR5+m9nrMixzT6AMe95torZ6eX40gKZ/O9EU=

.tx/config

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

Makefile

@@ -1,11 +1,9 @@
-transifex_resource = frontend-component-footer
-transifex_langs = "ar,fr,es_419,zh_CN"
+export TRANSIFEX_RESOURCE = frontend-component-footer
+transifex_langs = "ar,fr,es_419,zh_CN,pt,it,de,uk,ru,hi,fr_CA,it_IT,pt_PT,de_DE"
 
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
-tx_url1 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/translation/en/strings/
-tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/source/
 
 # This directory must match .babelrc .
 transifex_temp = ./temp/babel-plugin-react-intl
@@ -42,15 +40,15 @@ push_translations:
 	# Pushing strings to Transifex...
 	tx push -s
 	# Fetching hashes from Transifex...
-	./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
+	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
 	# Writing out comments to file...
-	$(transifex_utils) $(transifex_temp) --comments
+	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
 	# Pushing comments to Transifex...
-	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)
+	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
 
 # Pulls translations from Transifex.
 pull_translations:
-	tx pull -f --mode reviewed --language=$(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

@@ -1,61 +1,96 @@
+#########################
 frontend-component-footer
-=========================
+#########################
 
-|Build Status| |Coveralls| |npm_version| |npm_downloads| |license|
-|semantic-release|
+|Build Status| |Codecov| |npm_version| |npm_downloads| |license| |semantic-release|
 
-frontend-component-footer is a library containing a site footer
-component for use when building Open edX frontend applications.
-
-Usage
------
-
-To install frontend-component-footer into your project::
-
-   npm i --save @edx/frontend-component-footer
-
-Component Usage::
-
-   import Footer, { messages } from '@edx/frontend-component-footer';
-
-   ...
-
-   <Footer
-      onLanguageSelected={(languageCode) => {/* set language */}}
-      supportedLanguages={[
-         { label: 'English', value: 'en'},
-         { label: 'Español', value: 'es' },
-      ]}
-   />
-
-- onLanguageSelected (optional)
-- supportedLanguages (optional)
-
-Styles (project.scss)::
-
-   @import '@edx/frontend-component-footer/src/footer.scss';
+********
+Overview
+********
 
+A generic footer for Open edX micro-frontend applications.  It includes a logo and an optional language selector dropdown.
 
+************
 Requirements
-------------
+************
 
-This component uses ``@edx/frontend-i18n``. Any containing app must provide ``@edx/frontend-i18n`` as a peer dependency, and be wrapped inside an ``IntlProvider`` element, whether or not your consuming application is actually localized. For a basic default locale (English) version, follow the ``IntlProvider`` example in the sample application in `src/index.jsx <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/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx>`_
 
+Environment Variables
+=====================
+
+This component requires that the following environment variable be set by the consuming micro-frontend.
+
+* ``LMS_BASE_URL`` - The URL of the LMS of your Open edX instance.
+* ``LOGO_TRADEMARK_URL`` - This is a URL to a logo for use in the footer.  This is a different environment variable than ``LOGO_URL`` (used in frontend-component-header) to accommodate sites that would like to have additional trademark information on a logo in the footer, such as a (tm) or (r) symbol.
+
+************
+Installation
+************
+
+To install this footer into your Open edX micro-frontend, run the following command in your MFE:
+
+``npm i --save @edx/frontend-component-footer``
+
+This will make the component available to be imported into your application.
+
+*****
+Usage
+*****
+
+This library has the following exports:
+
+* ``(default)``: The footer as a React component.
+* ``messages``: Internationalization messages suitable for use with `@edx/frontend-platform/i18n <https://edx.github.io/frontend-platform/module-Internationalization.html>`_
+* ``dist/footer.scss``: A SASS file which contains style information for the component.  It should be imported into the micro-frontend's own SCSS file.
+
+<Footer /> component props
+==========================
+
+* onLanguageSelected: Provides the footer with an event handler for when the user selects a
+  language from its dropdown.
+* supportedLanguages: An array of objects representing available languages.  See example below for object shape.
+
+Examples
+========
+
+Component Usage Example::
+
+  import Footer, { messages } from '@edx/frontend-component-footer';
+
+  ...
+
+  <Footer
+    onLanguageSelected={(languageCode) => {/* set language */}}
+    supportedLanguages={[
+      { label: 'English', value: 'en'},
+      { label: 'Español', value: 'es' },
+    ]}
+  />
+
+* `An example of minimal component and messages usage. <https://github.com/openedx/frontend-template-application/blob/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx#L23>`_
+* `An example of SCSS file usage. <https://github.com/openedx/frontend-template-application/blob/3cd5485bf387b8c479baf6b02bf59e3061dc3465/src/index.scss#L9>`_
+
+***********
 Development
------------
+***********
 
-Start the dev server::
+Install dependencies::
 
-   npm i && npm start
+  npm i
 
-Build the component::
+Start the development server::
 
-   npm run build
+  npm start
 
-.. |Build Status| image:: https://api.travis-ci.org/edx/frontend-component-footer.svg?branch=master
-   :target: https://travis-ci.org/edx/frontend-component-footer
-.. |Coveralls| image:: https://img.shields.io/coveralls/edx/frontend-component-footer.svg?branch=master
-   :target: https://coveralls.io/github/edx/frontend-component-footer
+Build a production distribution::
+
+  npm run build
+
+.. |Build Status| image:: https://api.travis-ci.com/edx/frontend-component-footer.svg?branch=master
+   :target: https://travis-ci.com/edx/frontend-component-footer
+.. |Codecov| image:: https://img.shields.io/codecov/c/github/edx/frontend-component-footer
+   :target: @edx/frontend-component-footer
 .. |npm_version| image:: https://img.shields.io/npm/v/@edx/frontend-component-footer.svg
    :target: @edx/frontend-component-footer
 .. |npm_downloads| image:: https://img.shields.io/npm/dt/@edx/frontend-component-footer.svg

commitlint.config.js

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

example/index.jsx

@@ -1,22 +1,33 @@
+import 'babel-polyfill';
+
 import React from 'react';
-import { render } from 'react-dom';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import ReactDOM from 'react-dom';
+import { initialize, getConfig, subscribe, APP_READY } from '@edx/frontend-platform';
+import { AppContext, AppProvider } from '@edx/frontend-platform/react';
+import Footer from '@edx/frontend-component-footer';
 
 import './index.scss';
-import Footer from '../src';
 
-const App = () => (
-  <div>
-    <IntlProvider locale="en">
-      <Footer
-        onLanguageSelected={() => {}}
-        supportedLanguages={[
-          { label: 'English', value: 'en' },
-          { label: 'Español', value: 'es' },
-        ]}
-      />
-    </IntlProvider>
-  </div>
-);
+subscribe(APP_READY, () => {
+  ReactDOM.render(
+    <AppProvider>
+      <AppContext.Provider value={{
+        authenticatedUser: null,
+        config: getConfig(),
+      }}>
+        <Footer
+          onLanguageSelected={() => {}}
+          supportedLanguages={[
+            { label: 'English', value: 'en' },
+            { label: 'Español', value: 'es' },
+          ]}
+        />
+      </AppContext.Provider>
+    </AppProvider>,
+    document.getElementById('root'),
+  );
+});
 
-render(<App />, document.getElementById('root'));
+initialize({
+  messages: []
+});

example/index.scss

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

package.json

@@ -19,50 +19,49 @@
   ],
   "husky": {
     "hooks": {
-      "pre-commit": "npm run lint",
-      "commit-msg": "commitlint -e $GIT_PARAMS"
+      "pre-commit": "npm run lint"
     }
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/edx/frontend-component-footer.git"
+    "url": "git+https://github.com/openedx/frontend-component-footer.git"
   },
   "author": "edX",
   "license": "AGPL-3.0",
   "bugs": {
-    "url": "https://github.com/edx/frontend-component-footer/issues"
+    "url": "https://github.com/openedx/frontend-component-footer/issues"
   },
-  "homepage": "https://github.com/edx/frontend-component-footer#readme",
+  "homepage": "https://github.com/openedx/frontend-component-footer#readme",
   "devDependencies": {
-    "@commitlint/cli": "8.2.0",
-    "@commitlint/config-angular": "8.2.0",
-    "@commitlint/prompt": "8.2.0",
-    "@commitlint/prompt-cli": "8.2.0",
-    "@edx/frontend-build": "^2.0.4",
-    "@edx/frontend-platform": "1.1.6",
-    "@edx/paragon": "7.1.5",
-    "codecov": "3.6.5",
-    "enzyme": "3.10.0",
-    "enzyme-adapter-react-16": "1.14.0",
-    "husky": "3.0.9",
-    "prop-types": "15.7.2",
-    "react": "16.10.2",
-    "react-dom": "16.10.2",
-    "react-test-renderer": "16.10.2",
-    "reactifex": "1.1.1"
+    "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
+    "@edx/browserslist-config": "^1.1.1",
+    "@edx/frontend-build": "12.8.58",
+    "@edx/frontend-platform": "4.6.0",
+    "@edx/paragon": "^20.44.0",
+    "@edx/reactifex": "^2.1.1",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
+    "enzyme": "3.11.0",
+    "husky": "8.0.3",
+    "prop-types": "15.8.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-redux": "7.2.9",
+    "react-router-dom": "5.3.4",
+    "react-test-renderer": "17.0.2",
+    "redux": "4.2.1",
+    "semantic-release": "21.0.6"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "1.2.27",
-    "@fortawesome/free-brands-svg-icons": "5.8.2",
-    "@fortawesome/free-regular-svg-icons": "5.8.2",
-    "@fortawesome/free-solid-svg-icons": "5.8.2",
-    "@fortawesome/react-fontawesome": "0.1.9"
+    "@fortawesome/fontawesome-svg-core": "6.4.0",
+    "@fortawesome/free-brands-svg-icons": "6.4.0",
+    "@fortawesome/free-regular-svg-icons": "6.4.0",
+    "@fortawesome/free-solid-svg-icons": "6.4.0",
+    "@fortawesome/react-fontawesome": "0.2.0"
   },
   "peerDependencies": {
-    "@edx/frontend-platform": "^1.1.4",
-    "@edx/paragon": "^7.0.0",
+    "@edx/frontend-platform": "^4.0.0",
     "prop-types": "^15.5.10",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0"
+    "react": "^16.9.0 || ^17.0.0",
+    "react-dom": "^16.9.0 || ^17.0.0"
   }
 }

renovate.json

@@ -1,9 +1,33 @@
 {
   "extends": [
-    "config:base"
+    "config:base",
+    "schedule:weekly",
+    ":automergeLinters",
+    ":automergeMinor",
+    ":automergeTesters",
+    ":enableVulnerabilityAlerts",
+    ":rebaseStalePrs",
+    ":semanticCommits",
+    ":updateNotScheduled"
   ],
-  "patch": {
-    "automerge": true
-  },
-  "rebaseStalePrs": true
+  "packageRules": [
+    {
+      "matchDepTypes": [
+        "devDependencies"
+      ],
+      "matchUpdateTypes": [
+        "lockFileMaintenance",
+        "minor",
+        "patch",
+        "pin"
+      ],
+      "automerge": true
+    },
+    {
+      "matchPackagePatterns": ["@edx"],
+      "matchUpdateTypes": ["minor", "patch"],
+      "automerge": true
+    }
+  ],
+  "timezone": "America/New_York"
 }

src/components/Footer.jsx

@@ -2,11 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { ensureConfig } from '@edx/frontend-platform/config';
+import { AppContext } from '@edx/frontend-platform/react';
 
 import messages from './Footer.messages';
-import FooterLogo from '../edx-openedx-logo-tag.png';
 import LanguageSelector from './LanguageSelector';
 
+ensureConfig([
+  'LMS_BASE_URL',
+  'LOGO_TRADEMARK_URL',
+], 'Footer component');
+
 const EVENT_NAMES = {
   FOOTER_LINK: 'edx.bi.footer.link',
 };
@@ -17,14 +23,6 @@ class SiteFooter extends React.Component {
     this.externalLinkClickHandler = this.externalLinkClickHandler.bind(this);
   }
 
-  getLocalePrefix(locale) {
-    const twoLetterPrefix = locale.substring(0, 2).toLowerCase();
-    if (twoLetterPrefix === 'en') {
-      return '';
-    }
-    return `/${twoLetterPrefix}`;
-  }
-
   externalLinkClickHandler(event) {
     const label = event.currentTarget.getAttribute('href');
     const eventName = EVENT_NAMES.FOOTER_LINK;
@@ -43,38 +41,40 @@ class SiteFooter extends React.Component {
       intl,
     } = this.props;
     const showLanguageSelector = supportedLanguages.length > 0 && onLanguageSelected;
+    const { config } = this.context;
 
     return (
       <footer
         role="contentinfo"
-        aria-label={intl.formatMessage(messages['footer.logo.ariaLabel'])}
         className="footer d-flex border-top py-3 px-4"
       >
-        <div className="container d-flex">
+        <div className="container-fluid d-flex">
           <a
-            className="d-block mb-3"
-            href="https://open.edx.org"
+            className="d-block"
+            href={config.LMS_BASE_URL}
             aria-label={intl.formatMessage(messages['footer.logo.ariaLabel'])}
           >
             <img
-              style={{ maxWidth: 150 }}
-              src={logo || FooterLogo}
+              style={{ maxHeight: 45 }}
+              src={logo || config.LOGO_TRADEMARK_URL}
               alt={intl.formatMessage(messages['footer.logo.altText'])}
             />
           </a>
           <div className="flex-grow-1" />
-          {showLanguageSelector &&
+          {showLanguageSelector && (
             <LanguageSelector
               options={supportedLanguages}
               onSubmit={onLanguageSelected}
             />
-          }
+          )}
         </div>
       </footer>
     );
   }
 }
 
+SiteFooter.contextType = AppContext;
+
 SiteFooter.propTypes = {
   intl: intlShape.isRequired,
   logo: PropTypes.string,

src/components/Footer.test.jsx

@@ -1,45 +1,75 @@
-import React from 'react';
+/* eslint-disable react/prop-types */
+import React, { useMemo } from 'react';
 import renderer from 'react-test-renderer';
 import { mount } from 'enzyme';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppContext } from '@edx/frontend-platform/react';
 
 import Footer from './Footer';
 
+const FooterWithContext = ({ locale = 'es' }) => {
+  const contextValue = useMemo(() => ({
+    authenticatedUser: null,
+    config: {
+      LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
+      LMS_BASE_URL: process.env.LMS_BASE_URL,
+    },
+  }), []);
+
+  return (
+    <IntlProvider locale={locale}>
+      <AppContext.Provider
+        value={contextValue}
+      >
+        <Footer />
+      </AppContext.Provider>
+    </IntlProvider>
+  );
+};
+
+const FooterWithLanguageSelector = ({ languageSelected = () => {} }) => {
+  const contextValue = useMemo(() => ({
+    authenticatedUser: null,
+    config: {
+      LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
+      LMS_BASE_URL: process.env.LMS_BASE_URL,
+    },
+  }), []);
+
+  return (
+    <IntlProvider locale="en">
+      <AppContext.Provider
+        value={contextValue}
+      >
+        <Footer
+          onLanguageSelected={languageSelected}
+          supportedLanguages={[
+            { label: 'English', value: 'en' },
+            { label: 'Español', value: 'es' },
+          ]}
+        />
+      </AppContext.Provider>
+    </IntlProvider>
+  );
+};
+
 describe('<Footer />', () => {
   describe('renders correctly', () => {
     it('renders without a language selector', () => {
       const tree = renderer
-        .create((
-          <IntlProvider locale="en">
-            <Footer />
-          </IntlProvider>
-        ))
+        .create(<FooterWithContext locale="en" />)
         .toJSON();
       expect(tree).toMatchSnapshot();
     });
     it('renders without a language selector in es', () => {
       const tree = renderer
-        .create((
-          <IntlProvider locale="es">
-            <Footer />
-          </IntlProvider>
-        ))
+        .create(<FooterWithContext locale="es" />)
         .toJSON();
       expect(tree).toMatchSnapshot();
     });
     it('renders with a language selector', () => {
       const tree = renderer
-        .create((
-          <IntlProvider locale="en">
-            <Footer
-              onLanguageSelected={() => {}}
-              supportedLanguages={[
-                { label: 'English', value: 'en' },
-                { label: 'Español', value: 'es' },
-              ]}
-            />
-          </IntlProvider>
-        ))
+        .create(<FooterWithLanguageSelector />)
         .toJSON();
       expect(tree).toMatchSnapshot();
     });
@@ -48,17 +78,7 @@ describe('<Footer />', () => {
   describe('handles language switching', () => {
     it('calls onLanguageSelected prop when a language is changed', () => {
       const mockHandleLanguageSelected = jest.fn();
-      const wrapper = mount((
-        <IntlProvider locale="en">
-          <Footer
-            onLanguageSelected={mockHandleLanguageSelected}
-            supportedLanguages={[
-              { label: 'English', value: 'en' },
-              { label: 'Español', value: 'es' },
-            ]}
-          />
-        </IntlProvider>
-      ));
+      const wrapper = mount(<FooterWithLanguageSelector languageSelected={mockHandleLanguageSelected} />);
 
       wrapper.find('form').simulate('submit', {
         target: {

src/components/LanguageSelector.jsx

@@ -17,8 +17,8 @@ const LanguageSelector = ({
       onSubmit={handleSubmit}
       {...props}
     >
-      {/* eslint-disable-next-line jsx-a11y/label-has-for */}
       <div className="form-group">
+        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
         <label htmlFor="site-footer-language-select" className="d-inline-block m-0">
           <FormattedMessage
             id="footer.languageForm.select.label"
@@ -32,8 +32,7 @@ const LanguageSelector = ({
           name="site-footer-language-select"
           defaultValue={intl.locale}
         >
-          {options.map(({ value, label }) =>
-            <option key={value} value={value}>{label}</option>)}
+          {options.map(({ value, label }) => <option key={value} value={value}>{label}</option>)}
         </select>
         <button className="btn btn-outline-primary btn-sm" type="submit">
           <FormattedMessage

src/components/__snapshots__/Footer.test.jsx.snap

@@ -2,24 +2,23 @@
 
 exports[`<Footer /> renders correctly renders with a language selector 1`] = `
 <footer
-  aria-label="edX Home"
   className="footer d-flex border-top py-3 px-4"
   role="contentinfo"
 >
   <div
-    className="container d-flex"
+    className="container-fluid d-flex"
   >
     <a
       aria-label="edX Home"
-      className="d-block mb-3"
-      href="https://open.edx.org"
+      className="d-block"
+      href="http://localhost:18000"
     >
       <img
         alt="Powered by Open edX"
-        src="test-file-stub"
+        src="https://edx-cdn.org/v3/default/logo-trademark.svg"
         style={
           Object {
-            "maxWidth": 150,
+            "maxHeight": 45,
           }
         }
       />
@@ -38,9 +37,7 @@ exports[`<Footer /> renders correctly renders with a language selector 1`] = `
           className="d-inline-block m-0"
           htmlFor="site-footer-language-select"
         >
-          <span>
-            Choose Language
-          </span>
+          Choose Language
         </label>
         <select
           className="form-control-sm mx-2"
@@ -63,9 +60,7 @@ exports[`<Footer /> renders correctly renders with a language selector 1`] = `
           className="btn btn-outline-primary btn-sm"
           type="submit"
         >
-          <span>
-            Apply
-          </span>
+          Apply
         </button>
       </div>
     </form>
@@ -75,24 +70,23 @@ exports[`<Footer /> renders correctly renders with a language selector 1`] = `
 
 exports[`<Footer /> renders correctly renders without a language selector 1`] = `
 <footer
-  aria-label="edX Home"
   className="footer d-flex border-top py-3 px-4"
   role="contentinfo"
 >
   <div
-    className="container d-flex"
+    className="container-fluid d-flex"
   >
     <a
       aria-label="edX Home"
-      className="d-block mb-3"
-      href="https://open.edx.org"
+      className="d-block"
+      href="http://localhost:18000"
     >
       <img
         alt="Powered by Open edX"
-        src="test-file-stub"
+        src="https://edx-cdn.org/v3/default/logo-trademark.svg"
         style={
           Object {
-            "maxWidth": 150,
+            "maxHeight": 45,
           }
         }
       />
@@ -106,24 +100,23 @@ exports[`<Footer /> renders correctly renders without a language selector 1`] =
 
 exports[`<Footer /> renders correctly renders without a language selector in es 1`] = `
 <footer
-  aria-label="edX Home"
   className="footer d-flex border-top py-3 px-4"
   role="contentinfo"
 >
   <div
-    className="container d-flex"
+    className="container-fluid d-flex"
   >
     <a
       aria-label="edX Home"
-      className="d-block mb-3"
-      href="https://open.edx.org"
+      className="d-block"
+      href="http://localhost:18000"
     >
       <img
         alt="Powered by Open edX"
-        src="test-file-stub"
+        src="https://edx-cdn.org/v3/default/logo-trademark.svg"
         style={
           Object {
-            "maxWidth": 150,
+            "maxHeight": 45,
           }
         }
       />

src/i18n/index.js

@@ -1,32 +1,34 @@
 import arMessages from './messages/ar.json';
-import caMessages from './messages/ca.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 es419Messages from './messages/es_419.json';
 import zhcnMessages from './messages/zh_CN.json';
-import heMessages from './messages/he.json';
-import idMessages from './messages/id.json';
-import kokrMessages from './messages/ko_kr.json';
-import plMessages from './messages/pl.json';
-import ptbrMessages from './messages/pt_br.json';
-import ruMessages from './messages/ru.json';
-import thMessages from './messages/th.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';
+import dedeCAMessages from './messages/de_DE.json';
+import ititCAMessages from './messages/it_IT.json';
+import ptptCAMessages from './messages/pt_PT.json';
+// no need to import en messages-- they are in the defaultMessage field
 
 const messages = {
   ar: arMessages,
   'es-419': es419Messages,
   fr: frMessages,
   'zh-cn': zhcnMessages,
-  ca: caMessages,
-  he: heMessages,
-  id: idMessages,
-  'ko-kr': kokrMessages,
-  pl: plMessages,
-  'pt-br': ptbrMessages,
+  pt: ptMessages,
+  it: itMessages,
+  de: deMessages,
+  hi: hiMessages,
+  'fr-ca': frCAMessages,
   ru: ruMessages,
-  th: thMessages,
   uk: ukMessages,
+  'de-de': dedeCAMessages,
+  'it-it': ititCAMessages,
+  'pt-pt': ptptCAMessages,
 };
 
 export default messages;

src/i18n/messages/ar.json

@@ -1,32 +1 @@
-{
-  "footer.socialLinks.srText.facebook": "Like edX on Facebook",
-  "footer.socialLinks.srText.twitter": "Follow edX on Twitter",
-  "footer.socialLinks.srText.youtube": "Subscribe to the edX YouTube channel",
-  "footer.socialLinks.srText.linkedin": "Follow edX on LinkedIn",
-  "footer.socialLinks.srText.reddit": "Subscribe to the edX subreddit",
-  "footer.languageForm.select.label": "Choose Language",
-  "footer.languageForm.submit.label": "Apply",
-  "footer.edxLinks.about": "About",
-  "footer.edxLinks.business": "edX for Business",
-  "footer.edxLinks.affiliates": "Affiliates",
-  "footer.edxLinks.openEdx": "Open edX",
-  "footer.edxLinks.careers": "Careers",
-  "footer.edxLinks.news": "News",
-  "footer.legalLinks.heading": "Legal",
-  "footer.legalLinks.termsOfService": "Terms of Service & Honor Code",
-  "footer.legalLinks.privacyPolicy": "Privacy Policy",
-  "footer.legalLinks.a11yPolicy": "Accessibility Policy",
-  "footer.legalLinks.trademarkPolicy": "Trademark Policy",
-  "footer.legalLinks.sitemap": "Sitemap",
-  "footer.connectLinks.heading": "Connect",
-  "footer.connectLinks.blog": "Blog",
-  "footer.connectLinks.contact": "Contact Us",
-  "footer.connectLinks.help": "Help Center",
-  "footer.connectLinks.mediaKit": "Media Kit",
-  "footer.connectLinks.donate": "Donate",
-  "footer.mobileApp.apple": "Download the edX mobile app from the Apple App Store",
-  "footer.mobileApp.google": "Download the edX mobile app from Google Play",
-  "footer.logo.altText": "Powered by Open edX",
-  "footer.logo.ariaLabel": "edX Home",
-  "footer.ariaLabel": "Page Footer"
-}
+{}

src/i18n/messages/es_419.json

@@ -1,32 +1 @@
-{
-  "footer.socialLinks.srText.facebook": "Like edX on Facebook",
-  "footer.socialLinks.srText.twitter": "Follow edX on Twitter",
-  "footer.socialLinks.srText.youtube": "Subscribe to the edX YouTube channel",
-  "footer.socialLinks.srText.linkedin": "Follow edX on LinkedIn",
-  "footer.socialLinks.srText.reddit": "Subscribe to the edX subreddit",
-  "footer.languageForm.select.label": "Choose Language",
-  "footer.languageForm.submit.label": "Apply",
-  "footer.edxLinks.about": "About",
-  "footer.edxLinks.business": "edX for Business",
-  "footer.edxLinks.affiliates": "Affiliates",
-  "footer.edxLinks.openEdx": "Open edX",
-  "footer.edxLinks.careers": "Careers",
-  "footer.edxLinks.news": "News",
-  "footer.legalLinks.heading": "Legal",
-  "footer.legalLinks.termsOfService": "Terms of Service & Honor Code",
-  "footer.legalLinks.privacyPolicy": "Privacy Policy",
-  "footer.legalLinks.a11yPolicy": "Accessibility Policy",
-  "footer.legalLinks.trademarkPolicy": "Trademark Policy",
-  "footer.legalLinks.sitemap": "Sitemap",
-  "footer.connectLinks.heading": "Connect",
-  "footer.connectLinks.blog": "Blog",
-  "footer.connectLinks.contact": "Contact Us",
-  "footer.connectLinks.help": "Help Center",
-  "footer.connectLinks.mediaKit": "Media Kit",
-  "footer.connectLinks.donate": "Donate",
-  "footer.mobileApp.apple": "Download the edX mobile app from the Apple App Store",
-  "footer.mobileApp.google": "Download the edX mobile app from Google Play",
-  "footer.logo.altText": "Powered by Open edX",
-  "footer.logo.ariaLabel": "edX Home",
-  "footer.ariaLabel": "Page Footer"
-}
+{}

src/i18n/messages/fr.json

@@ -1,32 +1 @@
-{
-  "footer.socialLinks.srText.facebook": "Like edX on Facebook",
-  "footer.socialLinks.srText.twitter": "Follow edX on Twitter",
-  "footer.socialLinks.srText.youtube": "Subscribe to the edX YouTube channel",
-  "footer.socialLinks.srText.linkedin": "Follow edX on LinkedIn",
-  "footer.socialLinks.srText.reddit": "Subscribe to the edX subreddit",
-  "footer.languageForm.select.label": "Choose Language",
-  "footer.languageForm.submit.label": "Apply",
-  "footer.edxLinks.about": "About",
-  "footer.edxLinks.business": "edX for Business",
-  "footer.edxLinks.affiliates": "Affiliates",
-  "footer.edxLinks.openEdx": "Open edX",
-  "footer.edxLinks.careers": "Careers",
-  "footer.edxLinks.news": "News",
-  "footer.legalLinks.heading": "Legal",
-  "footer.legalLinks.termsOfService": "Terms of Service & Honor Code",
-  "footer.legalLinks.privacyPolicy": "Privacy Policy",
-  "footer.legalLinks.a11yPolicy": "Accessibility Policy",
-  "footer.legalLinks.trademarkPolicy": "Trademark Policy",
-  "footer.legalLinks.sitemap": "Sitemap",
-  "footer.connectLinks.heading": "Connect",
-  "footer.connectLinks.blog": "Blog",
-  "footer.connectLinks.contact": "Contact Us",
-  "footer.connectLinks.help": "Help Center",
-  "footer.connectLinks.mediaKit": "Media Kit",
-  "footer.connectLinks.donate": "Donate",
-  "footer.mobileApp.apple": "Download the edX mobile app from the Apple App Store",
-  "footer.mobileApp.google": "Download the edX mobile app from Google Play",
-  "footer.logo.altText": "Powered by Open edX",
-  "footer.logo.ariaLabel": "edX Home",
-  "footer.ariaLabel": "Page Footer"
-}
+{}

src/i18n/messages/pt_PT.json

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

src/i18n/messages/zh_CN.json

@@ -1,32 +1 @@
-{
-  "footer.socialLinks.srText.facebook": "Like edX on Facebook",
-  "footer.socialLinks.srText.twitter": "Follow edX on Twitter",
-  "footer.socialLinks.srText.youtube": "Subscribe to the edX YouTube channel",
-  "footer.socialLinks.srText.linkedin": "Follow edX on LinkedIn",
-  "footer.socialLinks.srText.reddit": "Subscribe to the edX subreddit",
-  "footer.languageForm.select.label": "Choose Language",
-  "footer.languageForm.submit.label": "Apply",
-  "footer.edxLinks.about": "About",
-  "footer.edxLinks.business": "edX for Business",
-  "footer.edxLinks.affiliates": "Affiliates",
-  "footer.edxLinks.openEdx": "Open edX",
-  "footer.edxLinks.careers": "Careers",
-  "footer.edxLinks.news": "News",
-  "footer.legalLinks.heading": "Legal",
-  "footer.legalLinks.termsOfService": "Terms of Service & Honor Code",
-  "footer.legalLinks.privacyPolicy": "Privacy Policy",
-  "footer.legalLinks.a11yPolicy": "Accessibility Policy",
-  "footer.legalLinks.trademarkPolicy": "Trademark Policy",
-  "footer.legalLinks.sitemap": "Sitemap",
-  "footer.connectLinks.heading": "Connect",
-  "footer.connectLinks.blog": "Blog",
-  "footer.connectLinks.contact": "Contact Us",
-  "footer.connectLinks.help": "Help Center",
-  "footer.connectLinks.mediaKit": "Media Kit",
-  "footer.connectLinks.donate": "Donate",
-  "footer.mobileApp.apple": "Download the edX mobile app from the Apple App Store",
-  "footer.mobileApp.google": "Download the edX mobile app from Google Play",
-  "footer.logo.altText": "Powered by Open edX",
-  "footer.logo.ariaLabel": "edX Home",
-  "footer.ariaLabel": "Page Footer"
-}
+{}

src/setupTest.js

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

webpack.dev.config.js

@@ -7,4 +7,9 @@ module.exports = createConfig('webpack-dev', {
     path: path.resolve(__dirname, 'example/dist'),
     publicPath: '/',
   },
+  resolve: {
+    alias: {
+      '@edx/frontend-component-footer': path.resolve(__dirname, 'src'),
+    },
+  },
 });