feat: move FooterSlot and StudioFooterSlot in from slot-footer (#521)

Co-authored-by: Muhammad Anas <88967643+Anas12091101@users.noreply.github.com>

.env.development

@@ -8,6 +8,11 @@ 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
+TERMS_OF_SERVICE_URL=null
+PRIVACY_POLICY_URL=null
+SUPPORT_EMAIL=null
+STUDIO_BASE_URL=http://localhost:18010
+ENABLE_ACCESSIBILITY_PAGE=false
 ORDER_HISTORY_URL=localhost:1996/orders
 REFRESH_ACCESS_TOKEN_ENDPOINT=http://localhost:18000/login_refresh
 SEGMENT_KEY=null

.eslintrc.js

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

.github/CODEOWNERS

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

.github/workflows/add-depr-ticket-to-depr-board.yml

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

.github/workflows/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

@@ -1,17 +1,23 @@
 name: Default CI
-on: [push, pull_request]
+on:
+  push:
+    branches:
+    - master
+  pull_request:
+    branches:
+    - '**'
 jobs:
-  build:
+  tests:
     runs-on: ubuntu-latest
     steps:
     - name: Checkout
-      uses: actions/checkout@v2
+      uses: actions/checkout@v4
       with:
         fetch-depth: 0
     - name: Setup Nodejs
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v4
       with:
-        node-version: 12
+        node-version-file: '.nvmrc'
     - name: Install dependencies
       run: npm ci
     - name: Validate package-lock.json changes
@@ -20,7 +26,12 @@ jobs:
       run: npm run lint
     - name: Test
       run: npm run test
+    - name: Build
+      run: npm run build
     - name: i18n_extract
       run: npm run i18n_extract
     - name: Coverage
-      uses: codecov/codecov-action@v1
+      uses: codecov/codecov-action@v4
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
+        fail_ci_if_error: true

.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

@@ -2,36 +2,42 @@ name: Release CI
 on:
   push:
     branches:
-      - master
+    - master
+    - alpha
 jobs:
   release:
     name: Release
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-      - name: Setup Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: 12
-      - name: Install dependencies
-        run: npm ci
-      - name: Validate package-lock.json changes
-        run: make validate-no-uncommitted-package-lock-changes
-      - name: Lint
-        run: npm run lint
-      - name: Test
-        run: npm run test
-      - name: i18n_extract
-        run: npm run i18n_extract
-      - name: Coverage
-        uses: codecov/codecov-action@v1
-      - name: Build
-        run: npm run build
-      - name: Release
-        env:
-          GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
-        run: npx semantic-release
+    - name: Checkout
+      uses: actions/checkout@v4
+      with:
+        fetch-depth: 0
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      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@v4
+      with:
+        token: ${{ secrets.CODECOV_TOKEN }}
+        fail_ci_if_error: false
+    - 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

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

.nvmrc

@@ -0,0 +1 @@
+20

.releaserc

@@ -1,5 +1,8 @@
 {
-  "branch": "master",
+  "branches": [
+    "master",
+    {name: "alpha", prerelease: true}
+  ],
   "tagFormat": "v${version}",
   "verifyConditions": [
     "@semantic-release/npm",

.tx/config

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

Makefile

@@ -1,14 +1,9 @@
-transifex_resource = frontend-component-footer
-transifex_langs = "ar,fr,es_419,zh_CN"
-
 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
+transifex_temp = ./temp/babel-plugin-formatjs
 
 build:
 	rm -rf ./dist
@@ -19,7 +14,7 @@ build:
 	@rm -rf dist/__mocks__
 
 requirements:
-	npm install
+	npm ci
 
 i18n.extract:
 	# Pulling display strings from .jsx files into .json files...
@@ -37,20 +32,6 @@ detect_changed_source_translations:
 	# Checking for changed translations...
 	git diff --exit-code $(i18n)
 
-# Pushes translations to Transifex.  You must run make extract_translations first.
-push_translations:
-	# Pushing strings to Transifex...
-	tx push -s
-	# Fetching hashes from Transifex...
-	./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
-	# Writing out comments to file...
-	$(transifex_utils) $(transifex_temp) --comments
-	# Pushing comments to Transifex...
-	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)
-
-# Pulls translations from Transifex.
-pull_translations:
-	tx pull -f --mode reviewed --language=$(transifex_langs)
 
 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:

README.rst

@@ -5,27 +5,46 @@ frontend-component-footer
 |Build Status| |Codecov| |npm_version| |npm_downloads| |license| |semantic-release|
 
 ********
-Overview
+Purpose
 ********
 
 A generic footer for Open edX micro-frontend applications.  It includes a logo and an optional language selector dropdown.
 
-************
-Requirements
-************
+***************
+Getting Started
+***************
 
-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/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx>`_
+Prerequisites
+=============
+
+The `devstack`_ is currently recommended as a development environment for your
+new MFE.  If you start it with ``make dev.up.lms`` that should give you
+everything you need as a companion to this frontend.
+
+Note that it is also possible to use `Tutor`_ to develop an MFE.  You can refer
+to the `relevant tutor-mfe documentation`_ to get started using it.
+
+.. _Devstack: https://github.com/openedx/devstack
+
+.. _Tutor: https://github.com/overhangio/tutor
+
+.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe#mfe-development
+
+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/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:
 
@@ -33,9 +52,33 @@ To install this footer into your Open edX micro-frontend, run the following comm
 
 This will make the component available to be imported into your application.
 
-*****
+Cloning and Startup
+===================
+
+.. code-block::
+
+
+  1. Clone your new repo:
+
+    ``git clone https://github.com/openedx/frontend-component-footer.git``
+
+  2. Use node v18.x.
+
+    The current version of the micro-frontend build scripts support node 18.
+    Using other major versions of node *may* work, but this is unsupported.  For
+    convenience, this repository includes an .nvmrc file to help in setting the
+    correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
+
+  3. Install npm dependencies:
+
+    ``cd frontend-component-footer && npm ci``
+
+  4. Start the dev server:
+
+    ``npm start``
+
 Usage
-*****
+=====
 
 This library has the following exports:
 
@@ -50,6 +93,12 @@ This library has the following exports:
   language from its dropdown.
 * supportedLanguages: An array of objects representing available languages.  See example below for object shape.
 
+Plugin
+======
+The footer can be replaced or modified using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
+
+Information on how to replace or modify the footer is available `here </src/plugin-slots>`_.
+
 Examples
 ========
 
@@ -67,12 +116,13 @@ Component Usage Example::
     ]}
   />
 
-* `An example of minimal component and messages usage. <https://github.com/edx/frontend-template-application/blob/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx#L23>`_
-* `An example of SCSS file usage. <https://github.com/edx/frontend-template-application/blob/3cd5485bf387b8c479baf6b02bf59e3061dc3465/src/index.scss#L9>`_
+* `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
-***********
+===========
 
 Install dependencies::
 
@@ -86,6 +136,63 @@ Build a production distribution::
 
   npm run build
 
+License
+=======
+
+The code in this repository is licensed under the AGPLv3 unless otherwise
+noted.
+
+Please see `LICENSE <LICENSE>`_ for details.
+
+Contributing
+============
+
+Contributions are very welcome.  Please read `How To Contribute`_ for details.
+
+.. _How To Contribute: https://openedx.org/r/how-to-contribute
+
+This project is currently accepting all types of contributions, bug fixes,
+security fixes, maintenance work, or new features.  However, please make sure
+to have a discussion about your new feature idea with the maintainers prior to
+beginning development to maximize the chances of your change being accepted.
+You can start a conversation by creating a new issue on this repo summarizing
+your idea.
+
+Getting Help
+===========
+
+If you're having trouble, we have discussion forums at
+https://discuss.openedx.org where you can connect with others in the community.
+
+Our real-time conversations are on Slack. You can request a `Slack
+invitation`_, then join our `community Slack workspace`_.  Because this is a
+frontend repository, the best place to discuss it would be in the `#wg-frontend
+channel`_.
+
+For anything non-trivial, the best path is to open an issue in this repository
+with as many details about the issue you are facing as you can provide.
+
+https://github.com/openedx/frontend-component-footer/issues
+
+For more information about these options, see the `Getting Help`_ page.
+
+.. _Slack invitation: https://openedx.org/slack
+.. _community Slack workspace: https://openedx.slack.com/
+.. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6
+.. _Getting Help: https://openedx.org/community/connect
+
+The Open edX Code of Conduct
+============================
+
+All community members are expected to follow the `Open edX Code of Conduct`_.
+
+.. _Open edX Code of Conduct: https://openedx.org/code-of-conduct/
+
+Reporting Security Issues
+=========================
+
+Please do not report security issues in public. Please email security@openedx.org.
+
 .. |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

babel.config.js

@@ -1,3 +1,3 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('babel-preserve-modules');

catalog-info.yaml

@@ -0,0 +1,14 @@
+# This file records information about this repo. Its use is described in OEP-55:
+# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
+
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: "frontend-component-footer"
+  description: "A generic footer for the Open edX micro-frontend applications."
+  annotations:
+    openedx.org/arch-interest-groups: ""
+spec:
+  owner: group:committers-frontend
+  type: "library"
+  lifecycle: "production"

commitlint.config.js

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

example/index.scss

@@ -1,6 +1,4 @@
-@import "@edx/brand/paragon/fonts";
-@import "@edx/brand/paragon/variables";
-@import "@edx/paragon/scss/core/core";
-@import "@edx/brand/paragon/overrides";
+@use "@openedx/paragon/dist/core.min.css" as paragonCore;
+@use "@openedx/paragon/dist/light.min.css" as paragonLight;
 
 @import "@edx/frontend-component-footer/footer";

jest.config.js

@@ -1,4 +1,4 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('jest', {
   setupFiles: [

openedx.yaml

@@ -1,8 +0,0 @@
-# openedx.yaml
-
----
-owner: edx/fedx-team
-tags:
-  - library
-  - component
-  - react

package.json

@@ -8,64 +8,65 @@
   },
   "scripts": {
     "build": "make build",
-    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "i18n_extract": "fedx-scripts formatjs extract",
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
+    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx .",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "fedx-scripts jest --coverage"
+    "start:with-theme": "paragon install-theme && npm start && npm install",
+    "test": "fedx-scripts jest --coverage",
+    "test:watch": "npm run test -- --watch"
   },
   "files": [
     "/dist"
   ],
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint",
-      "commit-msg": "commitlint -e $GIT_PARAMS"
-    }
-  },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/edx/frontend-component-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.3.5",
-    "@commitlint/config-angular": "8.3.4",
-    "@commitlint/prompt": "8.3.5",
-    "@commitlint/prompt-cli": "8.3.5",
-    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
-    "@edx/frontend-build": "5.4.0",
-    "@edx/frontend-platform": "1.8.4",
-    "@edx/paragon": "12.0.5",
-    "codecov": "3.8.2",
-    "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.6",
-    "husky": "3.1.0",
-    "prop-types": "15.7.2",
-    "react": "16.10.2",
-    "react-dom": "16.10.2",
-    "react-redux": "7.1.1",
-    "react-router-dom": "5.1.2",
-    "react-test-renderer": "16.10.2",
-    "reactifex": "1.1.1",
-    "redux": "4.0.4"
+    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+    "@edx/browserslist-config": "^1.1.1",
+    "@edx/frontend-platform": "^8.2.1",
+    "@edx/reactifex": "^2.1.1",
+    "@openedx/frontend-build": "^14.3.1",
+    "@openedx/paragon": "^23.3.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/user-event": "^14.6.1",
+    "prop-types": "15.8.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-redux": "8.1.3",
+    "react-router-dom": "6.30.0",
+    "react-test-renderer": "18.3.1",
+    "redux": "4.2.1",
+    "semantic-release": "21.1.2"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "1.2.35",
-    "@fortawesome/free-brands-svg-icons": "5.15.3",
-    "@fortawesome/free-regular-svg-icons": "5.15.3",
-    "@fortawesome/free-solid-svg-icons": "5.15.3",
-    "@fortawesome/react-fontawesome": "0.1.14"
+    "@fortawesome/fontawesome-svg-core": "6.7.2",
+    "@fortawesome/free-brands-svg-icons": "6.7.2",
+    "@fortawesome/free-regular-svg-icons": "6.7.2",
+    "@fortawesome/free-solid-svg-icons": "6.7.2",
+    "@fortawesome/react-fontawesome": "0.2.2",
+    "@openedx/frontend-plugin-framework": "^1.7.0",
+    "classnames": "^2.5.1",
+    "jest-environment-jsdom": "^29.7.0",
+    "lodash": "^4.17.21",
+    "ts-jest": "^29.1.2"
   },
   "peerDependencies": {
-    "@edx/frontend-platform": "^1.8.0",
+    "@edx/frontend-platform": "^7.0.0 || ^8.0.0",
+    "@openedx/paragon": ">= 21.11.3 < 24.0.0",
     "prop-types": "^15.5.10",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0"
+    "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0"
   }
 }

renovate.json

@@ -2,7 +2,9 @@
   "extends": [
     "config:base",
     "schedule:weekly",
+    ":automergeLinters",
     ":automergeMinor",
+    ":automergeTesters",
     ":enableVulnerabilityAlerts",
     ":rebaseStalePrs",
     ":semanticCommits",
@@ -11,9 +13,19 @@
   "packageRules": [
     {
       "matchDepTypes": [
-        "devDependencies",
-        "lockFileMaintenance"
+        "devDependencies"
       ],
+      "matchUpdateTypes": [
+        "lockFileMaintenance",
+        "minor",
+        "patch",
+        "pin"
+      ],
+      "automerge": true
+    },
+    {
+      "matchPackagePatterns": ["@edx", "@openedx"],
+      "matchUpdateTypes": ["minor", "patch"],
       "automerge": true
     }
   ],

src/_footer.scss

@@ -1,5 +1,5 @@
 $gray-footer: #fcfcfc !default;
 
 .footer {
-  background-color: $gray-footer;
+  background-color: var(--pgn-color-light-100, $gray-footer);
 }

src/components/Footer.jsx

@@ -2,13 +2,14 @@ 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 { ensureConfig } from '@edx/frontend-platform';
 import { AppContext } from '@edx/frontend-platform/react';
 
 import messages from './Footer.messages';
 import LanguageSelector from './LanguageSelector';
 
 ensureConfig([
+  'LMS_BASE_URL',
   'LOGO_TRADEMARK_URL',
 ], 'Footer component');
 
@@ -22,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;
@@ -58,7 +51,7 @@ class SiteFooter extends React.Component {
         <div className="container-fluid d-flex">
           <a
             className="d-block"
-            href="https://open.edx.org"
+            href={config.LMS_BASE_URL}
             aria-label={intl.formatMessage(messages['footer.logo.ariaLabel'])}
           >
             <img

src/components/Footer.test.jsx

@@ -1,111 +1,90 @@
-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 { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
 
 import Footer from './Footer';
+import FooterSlot from '../plugin-slots/FooterSlot';
+
+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}
+      >
+        <FooterSlot />
+      </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">
-            <AppContext.Provider
-              value={{
-                authenticatedUser: null,
-                config: {
-                  LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
-                },
-              }}
-            >
-              <Footer />
-            </AppContext.Provider>
-          </IntlProvider>
-        ))
+        .create(<FooterWithContext locale="en" />)
         .toJSON();
       expect(tree).toMatchSnapshot();
     });
     it('renders without a language selector in es', () => {
       const tree = renderer
-        .create((
-          <IntlProvider locale="es">
-            <AppContext.Provider
-              value={{
-                authenticatedUser: null,
-                config: {
-                  LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
-                },
-              }}
-            >
-              <Footer />
-            </AppContext.Provider>
-          </IntlProvider>
-        ))
+        .create(<FooterWithContext locale="es" />)
         .toJSON();
       expect(tree).toMatchSnapshot();
     });
     it('renders with a language selector', () => {
       const tree = renderer
-        .create((
-          <IntlProvider locale="en">
-            <AppContext.Provider
-              value={{
-                authenticatedUser: null,
-                config: {
-                  LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
-                },
-              }}
-            >
-              <Footer
-                onLanguageSelected={() => {}}
-                supportedLanguages={[
-                  { label: 'English', value: 'en' },
-                  { label: 'Español', value: 'es' },
-                ]}
-              />
-            </AppContext.Provider>
-          </IntlProvider>
-        ))
+        .create(<FooterWithLanguageSelector />)
         .toJSON();
       expect(tree).toMatchSnapshot();
     });
   });
 
   describe('handles language switching', () => {
-    it('calls onLanguageSelected prop when a language is changed', () => {
+    it('calls onLanguageSelected prop when a language is changed', async () => {
+      const user = userEvent.setup();
       const mockHandleLanguageSelected = jest.fn();
-      const wrapper = mount((
-        <IntlProvider locale="en">
-          <AppContext.Provider
-            value={{
-              authenticatedUser: null,
-              config: {
-                LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
-              },
-            }}
-          >
-            <Footer
-              onLanguageSelected={mockHandleLanguageSelected}
-              supportedLanguages={[
-                { label: 'English', value: 'en' },
-                { label: 'Español', value: 'es' },
-              ]}
-            />
-          </AppContext.Provider>
-        </IntlProvider>
-      ));
+      render(<FooterWithLanguageSelector languageSelected={mockHandleLanguageSelected} />);
 
-      wrapper.find('form').simulate('submit', {
-        target: {
-          elements: {
-            'site-footer-language-select': {
-              value: 'es',
-            },
-          },
-        },
-      });
+      await user.selectOptions(screen.getByRole('combobox'), 'es');
+      await user.click(screen.getByTestId('site-footer-submit-btn'));
 
       expect(mockHandleLanguageSelected).toHaveBeenCalledWith('es');
     });

src/components/LanguageSelector.jsx

@@ -34,7 +34,7 @@ const LanguageSelector = ({
         >
           {options.map(({ value, label }) => <option key={value} value={value}>{label}</option>)}
         </select>
-        <button className="btn btn-outline-primary btn-sm" type="submit">
+        <button data-testid="site-footer-submit-btn" className="btn btn-outline-primary btn-sm" type="submit">
           <FormattedMessage
             id="footer.languageForm.submit.label"
             defaultMessage="Apply"

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

@@ -11,13 +11,13 @@ exports[`<Footer /> renders correctly renders with a language selector 1`] = `
     <a
       aria-label="edX Home"
       className="d-block"
-      href="https://open.edx.org"
+      href="http://localhost:18000"
     >
       <img
         alt="Powered by Open edX"
         src="https://edx-cdn.org/v3/default/logo-trademark.svg"
         style={
-          Object {
+          {
             "maxHeight": 45,
           }
         }
@@ -37,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"
@@ -60,11 +58,10 @@ exports[`<Footer /> renders correctly renders with a language selector 1`] = `
         </select>
         <button
           className="btn btn-outline-primary btn-sm"
+          data-testid="site-footer-submit-btn"
           type="submit"
         >
-          <span>
-            Apply
-          </span>
+          Apply
         </button>
       </div>
     </form>
@@ -83,13 +80,13 @@ exports[`<Footer /> renders correctly renders without a language selector 1`] =
     <a
       aria-label="edX Home"
       className="d-block"
-      href="https://open.edx.org"
+      href="http://localhost:18000"
     >
       <img
         alt="Powered by Open edX"
         src="https://edx-cdn.org/v3/default/logo-trademark.svg"
         style={
-          Object {
+          {
             "maxHeight": 45,
           }
         }
@@ -113,13 +110,13 @@ exports[`<Footer /> renders correctly renders without a language selector in es
     <a
       aria-label="edX Home"
       className="d-block"
-      href="https://open.edx.org"
+      href="http://localhost:18000"
     >
       <img
         alt="Powered by Open edX"
         src="https://edx-cdn.org/v3/default/logo-trademark.svg"
         style={
-          Object {
+          {
             "maxHeight": 45,
           }
         }

src/components/studio-footer/StudioFooter.jsx

@@ -0,0 +1,152 @@
+import React, { useContext, useState } from 'react';
+import isEmpty from 'lodash/isEmpty';
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { ensureConfig } from '@edx/frontend-platform';
+import { AppContext } from '@edx/frontend-platform/react';
+import {
+  ActionRow,
+  Button,
+  Container,
+  Hyperlink,
+  TransitionReplace,
+} from '@openedx/paragon';
+import { ExpandLess, ExpandMore, Help } from '@openedx/paragon/icons';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import messages from './messages';
+import StudioFooterLogoSlot from '../../plugin-slots/StudioFooterLogoSlot';
+
+ensureConfig([
+  'LMS_BASE_URL',
+  'MARKETING_SITE_BASE_URL',
+  'TERMS_OF_SERVICE_URL',
+  'PRIVACY_POLICY_URL',
+  'SUPPORT_EMAIL',
+  'SITE_NAME',
+  'STUDIO_BASE_URL',
+  'ENABLE_ACCESSIBILITY_PAGE',
+], 'Studio Footer component');
+
+const StudioFooter = ({
+  containerProps,
+}) => {
+  const intl = useIntl();
+  const [isOpen, setIsOpen] = useState(false);
+  const { config } = useContext(AppContext);
+
+  const { containerClassName, ...restContainerProps } = containerProps || {};
+
+  return (
+    <>
+      <div className="m-0 mt-6 row align-items-center justify-content-center">
+        <div className="col border-top mr-2" />
+        <Button
+          data-testid="helpToggleButton"
+          variant="outline-primary"
+          onClick={() => setIsOpen(!isOpen)}
+          iconBefore={Help}
+          iconAfter={isOpen ? ExpandLess : ExpandMore}
+          size="sm"
+        >
+          {isOpen ? intl.formatMessage(messages.closeHelpButtonLabel)
+            : intl.formatMessage(messages.openHelpButtonLabel)}
+        </Button>
+        <div className="col border-top ml-2" />
+      </div>
+      <Container
+        size="xl"
+        className={classNames('px-4', containerClassName)}
+        {...restContainerProps}
+      >
+        <TransitionReplace>
+          {isOpen ? (
+            <ActionRow key="help-link-button-row" className="py-4" data-testid="helpButtonRow">
+              <ActionRow.Spacer />
+              <Button as="a" href="https://docs.openedx.org/" size="sm">
+                <FormattedMessage {...messages.edxDocumentationButtonLabel} />
+              </Button>
+              <Button
+                as="a"
+                href="https://openedx.org/"
+                size="sm"
+                data-testid="openEdXPortalButton"
+              >
+                <FormattedMessage {...messages.openEdxPortalButtonLabel} />
+              </Button>
+              <Button
+                as="a"
+                href="https://www.edx.org/course/edx101-overview-of-creating-an-edx-course#.VO4eaLPF-n1"
+                size="sm"
+              >
+                <FormattedMessage {...messages.edx101ButtonLabel} />
+              </Button>
+              <Button
+                as="a"
+                href="https://www.edx.org/course/studiox-creating-a-course-with-edx-studio"
+                size="sm"
+              >
+                <FormattedMessage {...messages.studioXButtonLabel} />
+              </Button>
+              {!isEmpty(config.SUPPORT_EMAIL) && (
+                <Button
+                  as="a"
+                  href={`mailto:${config.SUPPORT_EMAIL}`}
+                  size="sm"
+                  data-testid="contactUsButton"
+                >
+                  <FormattedMessage {...messages.contactUsButtonLabel} />
+                </Button>
+              )}
+              <ActionRow.Spacer />
+            </ActionRow>
+          ) : null}
+        </TransitionReplace>
+        <ActionRow className="pt-3 m-0 x-small">
+          © {new Date().getFullYear()} <Hyperlink destination={config.MARKETING_SITE_BASE_URL} target="_blank" className="ml-2">{config.SITE_NAME}</Hyperlink>
+          <ActionRow.Spacer />
+          {!isEmpty(config.TERMS_OF_SERVICE_URL) && (
+            <Hyperlink destination={config.TERMS_OF_SERVICE_URL} data-testid="termsOfService">
+              {intl.formatMessage(messages.termsOfServiceLinkLabel)}
+            </Hyperlink>
+          )}{!isEmpty(config.PRIVACY_POLICY_URL) && (
+            <Hyperlink destination={config.PRIVACY_POLICY_URL} data-testid="privacyPolicy">
+              {intl.formatMessage(messages.privacyPolicyLinkLabel)}
+            </Hyperlink>
+          )}
+          {config.ENABLE_ACCESSIBILITY_PAGE === 'true' && (
+            <Hyperlink
+              destination={`${config.STUDIO_BASE_URL}/accessibility`}
+              data-testid="accessibilityRequest"
+            >
+              {intl.formatMessage(messages.accessibilityRequestLinkLabel)}
+            </Hyperlink>
+          )}
+          <Hyperlink destination={config.LMS_BASE_URL}>LMS</Hyperlink>
+        </ActionRow>
+        <ActionRow className="mt-3 pb-4 x-small">
+          {/*
+            Site operators: Please do not remove this paragraph! this attributes back to edX and
+              makes your acknowledgement of edX's trademarks clear.
+            Translators: 'edX' and 'Open edX' are trademarks of 'edX Inc.'. Please do not translate
+              any of these trademarks and company names.
+          */}
+          <FormattedMessage {...messages.trademarkMessage} />
+          <Hyperlink className="ml-1" destination="https://www.edx.org">edX Inc</Hyperlink>.
+          <ActionRow.Spacer />
+          <StudioFooterLogoSlot />
+        </ActionRow>
+      </Container>
+    </>
+  );
+};
+
+StudioFooter.propTypes = {
+  containerProps: PropTypes.shape(Container.propTypes),
+};
+
+StudioFooter.defaultProps = {
+  containerProps: {},
+};
+
+export default StudioFooter;

src/components/studio-footer/StudioFooter.test.jsx

@@ -0,0 +1,127 @@
+/* eslint-disable react/prop-types */
+import React, { useMemo } from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppContext } from '@edx/frontend-platform/react';
+import StudioFooterSlot from '../../plugin-slots/StudioFooterSlot';
+import messages from './messages';
+
+const config = {
+  LMS_BASE_URL: process.env.LMS_BASE_URL,
+  MARKETING_SITE_BASE_URL: process.env.MARKETING_SITE_BASE_URL,
+  TERMS_OF_SERVICE_URL: process.env.TERMS_OF_SERVICE_URL,
+  PRIVACY_POLICY_URL: process.env.PRIVACY_POLICY_URL,
+  SUPPORT_EMAIL: process.env.SUPPORT_EMAIL,
+  SITE_NAME: process.env.SITE_NAME,
+  STUDIO_BASE_URL: process.env.STUDIO_BASE_URL,
+  ENABLE_ACCESSIBILITY_PAGE: process.env.ENABLE_ACCESSIBILITY_PAGE,
+};
+
+let currentConfig = config;
+const Component = ({ updateVariable }) => {
+  if (updateVariable) {
+    const [variable, value] = updateVariable;
+    currentConfig = {
+      ...config,
+      [variable]: value,
+    };
+  }
+  const contextValue = useMemo(() => ({
+    authenticatedUser: null,
+    config: currentConfig,
+  }), []);
+
+  return (
+    <IntlProvider locale="en">
+      <AppContext.Provider value={contextValue}>
+        <StudioFooterSlot />
+      </AppContext.Provider>
+    </IntlProvider>
+  );
+};
+
+jest.unmock('@openedx/paragon');
+
+describe('Footer', () => {
+  describe('help section default view', () => {
+    it('help button should read Looking for help with Studio?', () => {
+      render(<Component />);
+      expect(screen.getByText(messages.openHelpButtonLabel.defaultMessage))
+        .toBeVisible();
+    });
+    it('help button link row should not be visible', () => {
+      render(<Component />);
+      expect(screen.queryByTestId('helpButtonRow')).toBeNull();
+    });
+  });
+  describe('help section expanded view', () => {
+    it('help button should read Hide Studio help', async () => {
+      const user = userEvent.setup();
+      render(<Component />);
+      const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
+      await user.click(helpToggleButton);
+      expect(screen.getByText(messages.closeHelpButtonLabel.defaultMessage))
+        .toBeVisible();
+    });
+    it('help button link row should be visible', async () => {
+      const user = userEvent.setup();
+      render(<Component />);
+      const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
+      await user.click(helpToggleButton);
+      expect(screen.getByTestId('helpButtonRow')).toBeVisible();
+    });
+    it('Open edX portal button should be visible', async () => {
+      const user = userEvent.setup();
+      render(<Component />);
+      const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
+      await user.click(helpToggleButton);
+      expect(screen.getByTestId('openEdXPortalButton')).toBeVisible();
+    });
+    it('should not show contact us button', async () => {
+      const user = userEvent.setup();
+      render(<Component />);
+      const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
+      await user.click(helpToggleButton);
+      expect(screen.queryByTestId('contactUsButton')).toBeNull();
+    });
+    it('should show contact us button', async () => {
+      const user = userEvent.setup();
+      render(<Component updateVariable={['SUPPORT_EMAIL', 'support@email.com']} />);
+      const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
+      await user.click(helpToggleButton);
+      expect(screen.getByTestId('contactUsButton')).toBeVisible();
+    });
+  });
+  describe('policy link row', () => {
+    it('should only show LMS link', () => {
+      render(<Component />);
+      expect(screen.getByText('LMS')).toBeVisible();
+      expect(screen.queryByTestId('termsOfService')).toBeNull();
+      expect(screen.queryByTestId('privacyPolicy')).toBeNull();
+      expect(screen.queryByTestId('accessibilityRequest')).toBeNull();
+    });
+    it('should show terms of service link', () => {
+      render(<Component updateVariable={['TERMS_OF_SERVICE_URL', 'termsofserviceurl']} />);
+      expect(screen.getByText('LMS')).toBeVisible();
+      expect(screen.queryByTestId('termsOfService')).toBeVisible();
+      expect(screen.queryByTestId('privacyPolicy')).toBeNull();
+      expect(screen.queryByTestId('accessibilityRequest')).toBeNull();
+    });
+    it('should show privacy policy link', () => {
+      render(<Component updateVariable={['PRIVACY_POLICY_URL', 'privacypolicyurl']} />);
+      expect(screen.getByText('LMS')).toBeVisible();
+      expect(screen.queryByTestId('termsOfService')).toBeNull();
+      expect(screen.queryByTestId('privacyPolicy')).toBeVisible();
+      expect(screen.queryByTestId('accessibilityRequest')).toBeNull();
+    });
+    it('should show accessibilty request link', () => {
+      render(<Component updateVariable={['ENABLE_ACCESSIBILITY_PAGE', 'true']} />);
+      expect(screen.getByText('LMS')).toBeVisible();
+      expect(screen.queryByTestId('termsOfService')).toBeNull();
+      expect(screen.queryByTestId('privacyPolicy')).toBeNull();
+      expect(screen.queryByTestId('accessibilityRequest')).toBeVisible();
+    });
+  });
+});

src/components/studio-footer/index.jsx

@@ -0,0 +1,3 @@
+import StudioFooter from './StudioFooter';
+
+export default StudioFooter;

src/components/studio-footer/messages.js

@@ -0,0 +1,61 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  openHelpButtonLabel: {
+    id: 'authoring.footer.help.openHelp.button.label',
+    defaultMessage: 'Looking for help with Studio?',
+    description: 'Label for button that opens the collapsed section with help buttons',
+  },
+  closeHelpButtonLabel: {
+    id: 'authoring.footer.help.closeHelp.button.label',
+    defaultMessage: 'Hide Studio help',
+    description: 'Label for button that closes the collapsed section with help buttons',
+  },
+  edxDocumentationButtonLabel: {
+    id: 'authoring.footer.help.edxDocumentation.button.label',
+    defaultMessage: 'edX documentation',
+    description: 'Label for button that links to the edX documentation site',
+  },
+  openEdxPortalButtonLabel: {
+    id: 'authoring.footer.help.openEdxPortal.button.label',
+    defaultMessage: 'Open edX portal',
+    description: 'Label for button that links to the Open edX portal',
+  },
+  edx101ButtonLabel: {
+    id: 'authoring.footer.help.edx101.button.label',
+    defaultMessage: 'Enroll in edX 101',
+    description: 'Label for button that links to the edX 101 course',
+  },
+  studioXButtonLabel: {
+    id: 'authoring.footer.help.studioX.button.label',
+    defaultMessage: 'Enroll in StudioX',
+    description: 'Label for button that links to the edX StudioX course',
+  },
+  contactUsButtonLabel: {
+    id: 'authoring.footer.help.contactUs.button.label',
+    defaultMessage: 'Contact us',
+    description: 'Label for button that links to the email for partner support',
+  },
+  termsOfServiceLinkLabel: {
+    id: 'authoring.footer.termsOfService.link.label',
+    defaultMessage: 'Terms of Service',
+    description: 'Label for button that links to the terms of service page',
+  },
+  privacyPolicyLinkLabel: {
+    id: 'authoring.footer.privacyPolicy.link.label',
+    defaultMessage: 'Privacy Policy',
+    description: 'Label for button that links to the privacy policy page',
+  },
+  accessibilityRequestLinkLabel: {
+    id: 'authoring.footer.accessibilityRequest.link.label',
+    defaultMessage: 'Accessibility Accomodation Request',
+    description: 'Label for button that links to the accessibility accomodation requests page',
+  },
+  trademarkMessage: {
+    id: 'authoring.footer.trademark.message',
+    defaultMessage: 'edX and Open edX, and the edX and Open edX logos are registered trademarks of',
+    description: 'Message about the use of logos and names edX and Open edX',
+  },
+});
+
+export default messages;

src/i18n/index.js

@@ -1,32 +1 @@
-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 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 ukMessages from './messages/uk.json';
-
-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,
-  ru: ruMessages,
-  th: thMessages,
-  uk: ukMessages,
-};
-
-export default messages;
+export default {};

src/i18n/messages/ar.json

@@ -1,32 +0,0 @@
-{
-  "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/ca.json

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

src/i18n/messages/es_419.json

@@ -1,32 +0,0 @@
-{
-  "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 +0,0 @@
-{
-  "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/he.json

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

src/i18n/messages/id.json

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

src/i18n/messages/ko_kr.json

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

src/i18n/messages/pl.json

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

src/i18n/messages/pt_br.json

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

src/i18n/messages/ru.json

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

src/i18n/messages/th.json

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

src/i18n/messages/uk.json

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

src/i18n/messages/zh_CN.json

@@ -1,32 +0,0 @@
-{
-  "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/index.js

@@ -1,5 +1,10 @@
 import Footer, { EVENT_NAMES } from './components/Footer';
 import messages from './i18n/index';
+import StudioFooter from './components/studio-footer';
+import FooterSlot from './plugin-slots/FooterSlot';
+import StudioFooterSlot from './plugin-slots/StudioFooterSlot';
 
 export default Footer;
-export { messages, EVENT_NAMES };
+export {
+  messages, EVENT_NAMES, StudioFooter, FooterSlot, StudioFooterSlot,
+};

src/plugin-slots/FooterSlot/README.md

@@ -0,0 +1,51 @@
+# FooterSlot
+
+### Slot ID: `org.openedx.frontend.layout.footer.v1`
+
+### Slot ID Aliases
+* `footer_slot`
+
+## Description
+
+This slot is used to repace/modify/hide the entire footer.
+
+## Example
+
+The following `env.config.jsx` will replace the default footer.
+
+![Screenshot of default footer](./images/default_footer.png)
+
+with a simple custom footer
+
+![Screenshot of custom footer](./images/custom_footer.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.footer.v1': {
+      plugins: [
+        {
+          // Hide the default footer
+          op: PLUGIN_OPERATIONS.Hide,
+          widgetId: 'default_contents',
+        },
+        {
+          // Insert a custom footer
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_footer',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🦶</h1>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

src/plugin-slots/FooterSlot/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import Footer from '../../components/Footer';
+
+const FooterSlot = () => (
+  <PluginSlot id="org.openedx.frontend.layout.footer.v1" idAliases={['footer_slot']}>
+    <Footer />
+  </PluginSlot>
+);
+
+export default FooterSlot;

src/plugin-slots/README.md

@@ -0,0 +1,5 @@
+# `frontend-component-footer` Plugin Slots
+
+* [`org.openedx.frontend.layout.footer.v1`](./FooterSlot/)
+* [`org.openedx.frontend.layout.studio_footer.v1`](./StudioFooterSlot/)
+* [`org.openedx.frontend.layout.studio_footer_logo.v1`](./StudioFooterLogoSlot/)

src/plugin-slots/StudioFooterLogoSlot/README.md

@@ -0,0 +1,57 @@
+# StudioFooterLogoSlot
+
+### Slot ID: `org.openedx.frontend.layout.studio_footer_logo.v1`
+
+### Slot ID Aliases
+* `studio_footer_logo_slot`
+
+## Description
+
+This slot is used to add your site logo to the studio footer.
+
+## Examples
+
+### Add your site logo.
+
+The following `env.config.jsx` will add your site logo to the studio footer.
+
+![Screenshot of modified Studio Footer Logo](./images/add_your_site_logo.png)
+
+```jsx
+import { PLUGIN_OPERATIONS, DIRECT_PLUGIN } from '@openedx/frontend-plugin-framework';
+import {
+  Hyperlink,
+  Image,
+} from '@openedx/paragon';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.studio_footer_logo.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'studio_footer_logo_addition',
+            type: DIRECT_PLUGIN,
+            priority: 40,
+            RenderWidget: () => {
+              return (
+                <Hyperlink destination="https://example.com/" className="float-right">
+                  <Image
+                    height="48px"
+                    alt="Hosted by MySite"
+                    src="https://logos.openedx.org/generic-logo.svg"
+                  />
+                </Hyperlink>
+              )
+            }
+          }
+        },
+      ],
+    }
+  },
+};
+
+export default config;
+```

src/plugin-slots/StudioFooterLogoSlot/index.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import { Hyperlink, Image } from '@openedx/paragon';
+
+const StudioFooterLogoSlot = () => (
+  <PluginSlot id="org.openedx.frontend.layout.studio_footer_logo.v1" idAliases={['studio_footer_logo_slot']}>
+    <Hyperlink destination="https://openedx.org" className="float-right">
+      <Image
+        width="120px"
+        alt="Powered by Open edX"
+        src="https://logos.openedx.org/open-edx-logo-tag.png"
+      />
+    </Hyperlink>
+  </PluginSlot>
+);
+
+export default StudioFooterLogoSlot;

src/plugin-slots/StudioFooterSlot/README.md

@@ -0,0 +1,51 @@
+# StudioFooterSlot
+
+### Slot ID: `org.openedx.frontend.layout.studio_footer.v1`
+
+### Slot ID Aliases
+* `studio_footer_slot`
+
+## Description
+
+This slot is used to repace/modify/hide the entire studio footer.
+
+## Example
+
+The following `env.config.jsx` will replace the default studio footer.
+
+![Screenshot of default studio footer](./images/default_studio_footer.png)
+
+with a simple custom footer
+
+![Screenshot of custom footer](./images/custom_footer.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.studio_footer.v1': {
+      plugins: [
+        {
+          // Hide the default footer
+          op: PLUGIN_OPERATIONS.Hide,
+          widgetId: 'default_contents',
+        },
+        {
+          // Insert a custom footer
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_footer',
+            type: DIRECT_PLUGIN,
+            RenderWidget: () => (
+              <h1 style={{textAlign: 'center'}}>🦶</h1>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

src/plugin-slots/StudioFooterSlot/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import StudioFooter from '../../components/studio-footer';
+
+const StudioFooterSlot = () => (
+  <PluginSlot id="org.openedx.frontend.layout.studio_footer.v1" idAliases={['studio_footer_slot']}>
+    <StudioFooter />
+  </PluginSlot>
+);
+
+export default StudioFooterSlot;

src/setupTest.js

@@ -1,8 +1,3 @@
-import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-
-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';
@@ -24,3 +19,4 @@ 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';
+process.env.ENABLE_ACCESSIBILITY_PAGE = 'false';

webpack.dev.config.js

@@ -1,8 +1,10 @@
 const path = require('path');
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('webpack-dev', {
-  entry: path.resolve(__dirname, 'example'),
+  entry: {
+    app: path.resolve(__dirname, 'example'),
+  },
   output: {
     path: path.resolve(__dirname, 'example/dist'),
     publicPath: '/',