fix: exporting logo and better proptypes

refactor: dev server, config, and babel the build
BREAKING CHANGE: Defensive breaking change as this drastically changes the repo and how it gets consumed.
2019-07-03 15:42:48 -04:00 · 2019-07-03 11:10:59 -04:00
55 changed files with 24174 additions and 31677 deletions
--- a/.babelrc
+++ b/.babelrc
@@ -0,0 +1,23 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false
+      },
+    ],
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    ["@babel/plugin-proposal-object-rest-spread", {}, "object-rest-spread"],
+    ["@babel/plugin-proposal-class-properties", {}, "class-properties"]
+  ],
+  "env": {
+    "test": {
+      "presets": [
+        "@babel/preset-env",
+        "@babel/preset-react"
+      ],
+    }
+  }
+}
--- a/.env.development
+++ b/.env.development
@@ -1,24 +0,0 @@
-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
-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
-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
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,4 +1,3 @@
 coverage
 dist
-example
 node_modules
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,4 +0,0 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-const { createConfig } = require('@openedx/frontend-build');
-
-module.exports = createConfig('eslint');
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -0,0 +1,18 @@
+{
+    "extends": "eslint-config-edx",
+    "rules": {
+        "import/no-extraneous-dependencies": [
+            "error",
+            {
+                "devDependencies": [
+                    "src/lib/setupTest.js",
+                    "**/*.test.jsx",
+                    "**/*.test.js"
+                ]
+            }
+        ]
+    },
+    "env": {
+        "jest": true
+    }
+}
--- a/.github/workflows/add-depr-ticket-to-depr-board.yml
+++ b/.github/workflows/add-depr-ticket-to-depr-board.yml
@@ -1,19 +0,0 @@
-# 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 }}
--- a/.github/workflows/add-remove-label-on-comment.yml
+++ b/.github/workflows/add-remove-label-on-comment.yml
@@ -1,20 +0,0 @@
-# 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
-
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -1,36 +0,0 @@
-name: Default CI
-on:
-  push:
-    branches:
-    - master
-  pull_request:
-    branches:
-    - '**'
-jobs:
-  tests:
-    runs-on: ubuntu-latest
-    steps:
-    - name: Checkout
-      uses: actions/checkout@v4
-      with:
-        fetch-depth: 0
-    - name: Setup Nodejs Env
-      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
-    - name: Setup Nodejs
-      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: Build
-      run: npm run build
-    - name: i18n_extract
-      run: npm run i18n_extract
-    - name: Coverage
-      uses: codecov/codecov-action@v3
--- a/.github/workflows/commitlint.yml
+++ b/.github/workflows/commitlint.yml
@@ -1,10 +0,0 @@
-# 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
--- a/.github/workflows/lockfileversion-check.yml
+++ b/.github/workflows/lockfileversion-check.yml
@@ -1,13 +0,0 @@
-#check package-lock file version
-
-name: Lockfile Version check
-
-on:
-  push:
-    branches:
-    - master
-  pull_request:
-
-jobs:
-  version-check:
-    uses: openedx/.github/.github/workflows/lockfile-check.yml@master
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -1,40 +0,0 @@
-name: Release CI
-on:
-  push:
-    branches:
-    - master
-    - alpha
-jobs:
-  release:
-    name: Release
-    runs-on: ubuntu-latest
-    steps:
-    - 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@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
--- a/.github/workflows/self-assign-issue.yml
+++ b/.github/workflows/self-assign-issue.yml
@@ -1,12 +0,0 @@
-# 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
--- a/.gitignore
+++ b/.gitignore
@@ -1,13 +1,6 @@
-.DS_Store
 coverage
 dist
 node_modules
-temp

 .idea/
-
-src/i18n/transifex_input.json
-temp/babel-plugin-react-intl
-/.vscode
-module.config.js
-src/i18n/messages
+/.cache
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +0,0 @@
-18
--- a/.releaserc
+++ b/.releaserc
@@ -1,8 +1,5 @@
 {
-  "branches": [
-    "master",
-    {name: "alpha", prerelease: true}
-  ],
+  "branch": "master",
  "tagFormat": "v${version}",
  "verifyConditions": [
    "@semantic-release/npm",
--- a/.travis.yml
+++ b/.travis.yml
@@ -0,0 +1,19 @@
+language: node_js
+node_js:
+  - 8
+cache:
+  directories:
+    - "~/.npm"
+install:
+  - npm install
+script:
+  - npm run lint
+  - npm run test
+  - npm run build
+after_success:
+  - npm run travis-deploy-once "npm run semantic-release"
+  - npm run coveralls
+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=
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "restructuredtext.confPath": ""
+}
--- a/43
+++ b/43
@@ -1,39 +1,16 @@
-transifex_utils = ./node_modules/.bin/transifex-utils.js
-i18n = ./src/i18n
-transifex_input = $(i18n)/transifex_input.json
-
-# This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-formatjs
-
-build:
-	rm -rf ./dist
-	./node_modules/.bin/fedx-scripts babel src --out-dir dist --source-maps --ignore **/*.test.jsx,**/__mocks__,**/__snapshots__,**/setupTest.js --copy-files
-	@# --copy-files will bring in everything else that wasn't processed by babel. Remove what we don't want.
-	@rm -rf dist/**/*.test.jsx
-	@rm -rf dist/**/__snapshots__
-	@rm -rf dist/__mocks__
-
 requirements:
-	npm ci
-
-i18n.extract:
-	# Pulling display strings from .jsx files into .json files...
-	rm -rf $(transifex_temp)
-	npm run-script i18n_extract
-
-i18n.concat:
-	# Gathering JSON messages into one file...
-	$(transifex_utils) $(transifex_temp) $(transifex_input)
-
-extract_translations: | requirements i18n.extract i18n.concat
-
-# Despite the name, we actually need this target to detect changes in the incoming translated message files as well.
-detect_changed_source_translations:
-	# Checking for changed translations...
-	git diff --exit-code $(i18n)
-
+	npm install

 # This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:
 	# Checking for package-lock.json changes...
 	git diff --exit-code package-lock.json
+
+build:
+	rm -rf ./dist
+	./node_modules/.bin/babel src --out-dir dist --source-maps --ignore **/*.test.jsx,**/*.stories.jsx,**/__mocks__,**/__snapshots__,**/setupTest.js --copy-files
+	rm -rf ./dist/example
+	rm -rf dist/**/*.test.jsx
+	rm -rf dist/**/__snapshots__
+	rm -rf dist/**/__mocks__
+	rm -rf dist/lib/setupTest.js
--- a/README.rst
+++ b/README.rst
@@ -1,194 +1,39 @@
-#########################
 frontend-component-footer
-#########################
-
-|Build Status| |Codecov| |npm_version| |npm_downloads| |license| |semantic-release|
-
-********
-Purpose
-********
-
-A generic footer for Open edX micro-frontend applications.  It includes a logo and an optional language selector dropdown.
-
-***************
-Getting Started
-***************
-
-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:
-
-``npm i --save @edx/frontend-component-footer``
-
-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:
-
-* ``(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
-===========
-
-Install dependencies::
-
-  npm i
-
-Start the development server::
-
-  npm start
-
-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| |Coveralls| |npm_version| |npm_downloads| |license|
+|semantic-release|

-.. |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
+frontend-component-footer is a library containing a site footer component for use when building edX frontend applications.
+
+Usage
+-----
+
+To install frontend-component-footer into your project::
+
+   npm i --save @edx/frontend-component-footer
+
+The component expects properties specifying the various URLs that are
+linked in the footer. See the sample app in `src/example/index.jsx <src/example/index.jsx>`__ for an example
+of how the SiteFooter component can be specified.
+
+The distribution
+
+Development
+-----------
+
+Start the dev server::
+
+   npm i && npm start
+
+Build the component::
+
+   npm run build
+
+.. |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
 .. |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
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,3 +0,0 @@
-const { createConfig } = require('@openedx/frontend-build');
-
-module.exports = createConfig('babel-preserve-modules');
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@commitlint/config-angular'],
+};
--- a/example/index.jsx
+++ b/example/index.jsx
@@ -1,33 +0,0 @@
-import 'babel-polyfill';
-
-import React from 'react';
-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';
-
-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'),
-  );
-});
-
-initialize({
-  messages: []
-});
--- a/example/index.scss
+++ b/example/index.scss
@@ -1,6 +0,0 @@
-@import "@edx/brand/paragon/fonts";
-@import "@edx/brand/paragon/variables";
-@import "@openedx/paragon/scss/core/core";
-@import "@edx/brand/paragon/overrides";
-
-@import "@edx/frontend-component-footer/footer";
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,7 +0,0 @@
-const { createConfig } = require('@openedx/frontend-build');
-
-module.exports = createConfig('jest', {
-  setupFiles: [
-    '<rootDir>/src/setupTest.js',
-  ],
-});
--- a/openedx.yaml
+++ b/openedx.yaml
@@ -1,8 +0,0 @@
-# openedx.yaml
-
---
-owner: edx/fedx-team
-tags:
-  - library
-  - component
-  - react
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,70 +1,97 @@
 {
  "name": "@edx/frontend-component-footer",
  "version": "1.0.0-semantically-released",
-  "description": "Footer component for use when building Open edX frontend applications",
+  "description": "Site footer component for use when building edX frontend applications",
  "main": "dist/index.js",
+  "module": "dist/index.js",
  "publishConfig": {
    "access": "public"
  },
  "scripts": {
    "build": "make build",
-    "i18n_extract": "fedx-scripts formatjs extract",
-    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
-    "snapshot": "fedx-scripts jest --updateSnapshot",
-    "start": "fedx-scripts webpack-dev-server --progress",
-    "start:with-theme": "paragon install-theme && npm start && npm install",
-    "test": "fedx-scripts jest"
-  },
-  "files": [
-    "/dist"
-  ],
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint"
-    }
+    "gc": "commit",
+    "commitmsg": "commitlint -e $GIT_PARAMS",
+    "coveralls": "cat ./coverage/lcov.info | coveralls",
+    "lint": "eslint --ext .js --ext .jsx .",
+    "precommit": "npm run lint",
+    "prepublishOnly": "npm run build",
+    "semantic-release": "semantic-release",
+    "start": "./node_modules/.bin/parcel src/example/index.html",
+    "test": "jest --coverage",
+    "snapshot": "jest --updateSnapshot",
+    "travis-deploy-once": "travis-deploy-once"
  },
  "repository": {
    "type": "git",
-    "url": "git+https://github.com/openedx/frontend-component-footer.git"
+    "url": "git+https://github.com/edx/frontend-component-footer.git"
  },
  "author": "edX",
  "license": "AGPL-3.0",
  "bugs": {
-    "url": "https://github.com/openedx/frontend-component-footer/issues"
+    "url": "https://github.com/edx/frontend-component-footer/issues"
  },
-  "homepage": "https://github.com/openedx/frontend-component-footer#readme",
+  "homepage": "https://github.com/edx/frontend-component-footer#readme",
  "devDependencies": {
-    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/browserslist-config": "^1.1.1",
-    "@openedx/frontend-build": "^13.0.19",
-    "@openedx/paragon": "22.0.0",
-    "@edx/frontend-platform": "7.1.3",
-    "@edx/reactifex": "^2.1.1",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^12.1.1",
-    "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": "6.21.3",
-    "react-test-renderer": "17.0.2",
-    "redux": "4.2.1",
-    "semantic-release": "21.1.2"
+    "@babel/cli": "^7.4.4",
+    "@babel/core": "^7.4.5",
+    "@babel/plugin-proposal-class-properties": "^7.4.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
+    "@babel/preset-env": "^7.4.5",
+    "@babel/preset-react": "^7.0.0",
+    "@commitlint/cli": "^7.1.2",
+    "@commitlint/config-angular": "^6.0.2",
+    "@commitlint/prompt": "^6.0.2",
+    "@commitlint/prompt-cli": "^6.0.2",
+    "@edx/frontend-i18n": "^3.0.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.17",
+    "@fortawesome/free-brands-svg-icons": "^5.8.1",
+    "@fortawesome/free-regular-svg-icons": "^5.8.1",
+    "@fortawesome/free-solid-svg-icons": "^5.8.1",
+    "@fortawesome/react-fontawesome": "^0.1.4",
+    "babel-jest": "^24.8.0",
+    "coveralls": "^3.0.0",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "eslint": "^6.0.1",
+    "eslint-config-edx": "^4.0.4",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
+    "glob": "^7.1.3",
+    "husky": "^0.14.3",
+    "jest": "^24.8.0",
+    "parcel-bundler": "^1.12.3",
+    "prop-types": "^15.7.2",
+    "react": "^16.8.6",
+    "react-dev-utils": "^5.0.0",
+    "react-dom": "^16.8.6",
+    "react-test-renderer": "^16.6.0",
+    "reactifex": "^1.1.1",
+    "sass": "^1.22.1",
+    "semantic-release": "^15.1.7",
+    "travis-deploy-once": "^5.0.0"
+  },
+  "sass": {
+    "includePaths": [
+      "./node_modules"
+    ]
  },
  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "6.5.2",
-    "@fortawesome/free-brands-svg-icons": "6.5.2",
-    "@fortawesome/free-regular-svg-icons": "6.5.2",
-    "@fortawesome/free-solid-svg-icons": "6.5.2",
-    "@fortawesome/react-fontawesome": "0.2.0",
-    "lodash": "^4.17.21"
+    "@edx/paragon": "^6.0.2",
+    "lodash.pick": "^4.4.0",
+    "query-string": "^5.1.1"
  },
-  "peerDependencies": {
-    "@edx/frontend-platform": "^7.0.0",
-    "@openedx/paragon": ">= 21.11.3 < 23.0.0",
-    "prop-types": "^15.5.10",
-    "react": "^16.9.0 || ^17.0.0",
-    "react-dom": "^16.9.0 || ^17.0.0"
+  "jest": {
+    "setupFiles": [
+      "./src/lib/setupTest.js"
+    ],
+    "collectCoverageFrom": [
+      "src/lib/**/*.{js,jsx}",
+      "!src/lib/setupTest.js",
+      "!src/lib/index.js",
+      "!**/node_modules/**"
+    ],
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/lib/__mocks__/fileMock.js",
+      "\\.(css|scss)$": "identity-obj-proxy"
+    }
  }
 }
--- a/renovate.json
+++ b/renovate.json
@@ -1,33 +0,0 @@
-{
-  "extends": [
-    "config:base",
-    "schedule:weekly",
-    ":automergeLinters",
-    ":automergeMinor",
-    ":automergeTesters",
-    ":enableVulnerabilityAlerts",
-    ":rebaseStalePrs",
-    ":semanticCommits",
-    ":updateNotScheduled"
-  ],
-  "packageRules": [
-    {
-      "matchDepTypes": [
-        "devDependencies"
-      ],
-      "matchUpdateTypes": [
-        "lockFileMaintenance",
-        "minor",
-        "patch",
-        "pin"
-      ],
-      "automerge": true
-    },
-    {
-      "matchPackagePatterns": ["@edx", "@openedx"],
-      "matchUpdateTypes": ["minor", "patch"],
-      "automerge": true
-    }
-  ],
-  "timezone": "America/New_York"
-}
--- a/src/_footer.scss
+++ b/src/_footer.scss
@@ -1,5 +0,0 @@
-$gray-footer: #fcfcfc !default;
-
-.footer {
-  background-color: $gray-footer;
-}
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -1,95 +0,0 @@
-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';
-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');
-
-const EVENT_NAMES = {
-  FOOTER_LINK: 'edx.bi.footer.link',
-};
-
-class SiteFooter extends React.Component {
-  constructor(props) {
-    super(props);
-    this.externalLinkClickHandler = this.externalLinkClickHandler.bind(this);
-  }
-
-  externalLinkClickHandler(event) {
-    const label = event.currentTarget.getAttribute('href');
-    const eventName = EVENT_NAMES.FOOTER_LINK;
-    const properties = {
-      category: 'outbound_link',
-      label,
-    };
-    sendTrackEvent(eventName, properties);
-  }
-
-  render() {
-    const {
-      supportedLanguages,
-      onLanguageSelected,
-      logo,
-      intl,
-    } = this.props;
-    const showLanguageSelector = supportedLanguages.length > 0 && onLanguageSelected;
-    const { config } = this.context;
-
-    return (
-      <footer
-        role="contentinfo"
-        className="footer d-flex border-top py-3 px-4"
-      >
-        <div className="container-fluid d-flex">
-          <a
-            className="d-block"
-            href={config.LMS_BASE_URL}
-            aria-label={intl.formatMessage(messages['footer.logo.ariaLabel'])}
-          >
-            <img
-              style={{ maxHeight: 45 }}
-              src={logo || config.LOGO_TRADEMARK_URL}
-              alt={intl.formatMessage(messages['footer.logo.altText'])}
-            />
-          </a>
-          <div className="flex-grow-1" />
-          {showLanguageSelector && (
-            <LanguageSelector
-              options={supportedLanguages}
-              onSubmit={onLanguageSelected}
-            />
-          )}
-        </div>
-      </footer>
-    );
-  }
-}
-
-SiteFooter.contextType = AppContext;
-
-SiteFooter.propTypes = {
-  intl: intlShape.isRequired,
-  logo: PropTypes.string,
-  onLanguageSelected: PropTypes.func,
-  supportedLanguages: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    value: PropTypes.string.isRequired,
-  })),
-};
-
-SiteFooter.defaultProps = {
-  logo: undefined,
-  onLanguageSelected: undefined,
-  supportedLanguages: [],
-};
-
-export default injectIntl(SiteFooter);
-export { EVENT_NAMES };
--- a/src/components/Footer.messages.js
+++ b/src/components/Footer.messages.js
@@ -1,156 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-const messages = defineMessages({
-  'footer.socialLinks.srText.facebook': {
-    id: 'footer.socialLinks.srText.facebook',
-    defaultMessage: 'Like edX on Facebook',
-    description: 'This is screenreader text for the edX Facebook social media link in the footer.',
-  },
-  'footer.socialLinks.srText.twitter': {
-    id: 'footer.socialLinks.srText.twitter',
-    defaultMessage: 'Follow edX on Twitter',
-    description: 'This is screenreader text for the edX Twitter social media link in the footer.',
-  },
-  'footer.socialLinks.srText.youtube': {
-    id: 'footer.socialLinks.srText.youtube',
-    defaultMessage: 'Subscribe to the edX YouTube channel',
-    description: 'This is screenreader text for the edX YouTube social media link in the footer.',
-  },
-  'footer.socialLinks.srText.linkedin': {
-    id: 'footer.socialLinks.srText.linkedin',
-    defaultMessage: 'Follow edX on LinkedIn',
-    description: 'This is screenreader text for the edX LinkedIn social media link in the footer.',
-  },
-  'footer.socialLinks.srText.reddit': {
-    id: 'footer.socialLinks.srText.reddit',
-    defaultMessage: 'Subscribe to the edX subreddit',
-    description: 'This is screenreader text for the edX reddit social media link in the footer.',
-  },
-  'footer.languageForm.select.label': {
-    id: 'footer.languageForm.select.label',
-    defaultMessage: 'Choose Language',
-    description: 'The label for the laguage select part of the language selection form.',
-  },
-  'footer.languageForm.submit.label': {
-    id: 'footer.languageForm.submit.label',
-    defaultMessage: 'Apply',
-    description: 'The label for button to submit the language selection form.',
-  },
-  'footer.edxLinks.about': {
-    id: 'footer.edxLinks.about',
-    defaultMessage: 'About',
-    description: 'The label for the link to the about edX page.',
-  },
-  'footer.edxLinks.business': {
-    id: 'footer.edxLinks.business',
-    defaultMessage: 'edX for Business',
-    description: 'The label for the link to the edX for business page.',
-  },
-  'footer.edxLinks.affiliates': {
-    id: 'footer.edxLinks.affiliates',
-    defaultMessage: 'Affiliates',
-    description: 'The label for the link to the edX affiliates page.',
-  },
-  'footer.edxLinks.openEdx': {
-    id: 'footer.edxLinks.openEdx',
-    defaultMessage: 'Open edX',
-    description: 'The label for the link to the open edX site.',
-  },
-  'footer.edxLinks.careers': {
-    id: 'footer.edxLinks.careers',
-    defaultMessage: 'Careers',
-    description: 'The label for the link to the edX Careers page.',
-  },
-  'footer.edxLinks.news': {
-    id: 'footer.edxLinks.news',
-    defaultMessage: 'News',
-    description: 'The label for the link to the edX news page.',
-  },
-  'footer.legalLinks.heading': {
-    id: 'footer.legalLinks.heading',
-    defaultMessage: 'Legal',
-    description: 'Heading for the legal links section of the footer.',
-  },
-  'footer.legalLinks.termsOfService': {
-    id: 'footer.legalLinks.termsOfService',
-    defaultMessage: 'Terms of Service & Honor Code',
-    description: 'The label for the link to the edX terms of service page.',
-  },
-  'footer.legalLinks.privacyPolicy': {
-    id: 'footer.legalLinks.privacyPolicy',
-    defaultMessage: 'Privacy Policy',
-    description: 'The label for the link to the edX privacy policy page.',
-  },
-  'footer.legalLinks.a11yPolicy': {
-    id: 'footer.legalLinks.a11yPolicy',
-    defaultMessage: 'Accessibility Policy',
-    description: 'The label for the link to the edX accessibility policy page.',
-  },
-  'footer.legalLinks.trademarkPolicy': {
-    id: 'footer.legalLinks.trademarkPolicy',
-    defaultMessage: 'Trademark Policy',
-    description: 'The label for the link to the edX trademark policy page.',
-  },
-  'footer.legalLinks.sitemap': {
-    id: 'footer.legalLinks.sitemap',
-    defaultMessage: 'Sitemap',
-    description: 'The label for the link to the edX sitemap page.',
-  },
-  'footer.connectLinks.heading': {
-    id: 'footer.connectLinks.heading',
-    defaultMessage: 'Connect',
-    description: 'Heading for the connect links section of the footer.',
-  },
-  'footer.connectLinks.blog': {
-    id: 'footer.connectLinks.blog',
-    defaultMessage: 'Blog',
-    description: 'The label for the link to the edX blog.',
-  },
-  'footer.connectLinks.contact': {
-    id: 'footer.connectLinks.contact',
-    defaultMessage: 'Contact Us',
-    description: 'The label for the link to the contact edX page.',
-  },
-  'footer.connectLinks.help': {
-    id: 'footer.connectLinks.help',
-    defaultMessage: 'Help Center',
-    description: 'The label for the link to the edX help center.',
-  },
-  'footer.connectLinks.mediaKit': {
-    id: 'footer.connectLinks.mediaKit',
-    defaultMessage: 'Media Kit',
-    description: 'The label for the link to the edX media kit page.',
-  },
-  'footer.connectLinks.donate': {
-    id: 'footer.connectLinks.donate',
-    defaultMessage: 'Donate',
-    description: 'The label for the link to the edX donation page.',
-  },
-  'footer.mobileApp.apple': {
-    id: 'footer.mobileApp.apple',
-    defaultMessage: 'Download the edX mobile app from the Apple App Store',
-    description: 'The label for the link to download the apple version of the edX app.',
-  },
-  'footer.mobileApp.google': {
-    id: 'footer.mobileApp.google',
-    defaultMessage: 'Download the edX mobile app from Google Play',
-    description: 'The label for the link to download the google version of the edX app.',
-  },
-  'footer.logo.altText': {
-    id: 'footer.logo.altText',
-    defaultMessage: 'Powered by Open edX',
-    description: 'alt text for the footer logo.',
-  },
-  'footer.logo.ariaLabel': {
-    id: 'footer.logo.ariaLabel',
-    defaultMessage: 'edX Home',
-    description: 'aria-label for the footer logo.',
-  },
-  'footer.ariaLabel': {
-    id: 'footer.ariaLabel',
-    defaultMessage: 'Page Footer',
-    description: 'aria-label for the footer component',
-  },
-});
-
-export default messages;
--- a/src/components/Footer.test.jsx
+++ b/src/components/Footer.test.jsx
@@ -1,96 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { useMemo } from 'react';
-import renderer from 'react-test-renderer';
-import { render, fireEvent, screen } from '@testing-library/react';
-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(<FooterWithContext locale="en" />)
-        .toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-    it('renders without a language selector in es', () => {
-      const tree = renderer
-        .create(<FooterWithContext locale="es" />)
-        .toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-    it('renders with a language selector', () => {
-      const tree = renderer
-        .create(<FooterWithLanguageSelector />)
-        .toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-  });
-
-  describe('handles language switching', () => {
-    it('calls onLanguageSelected prop when a language is changed', () => {
-      const mockHandleLanguageSelected = jest.fn();
-      render(<FooterWithLanguageSelector languageSelected={mockHandleLanguageSelected} />);
-
-      fireEvent.submit(screen.getByTestId('site-footer-submit-btn'), {
-        target: {
-          elements: {
-            'site-footer-language-select': {
-              value: 'es',
-            },
-          },
-        },
-      });
-
-      expect(mockHandleLanguageSelected).toHaveBeenCalledWith('es');
-    });
-  });
-});
--- a/src/components/LanguageSelector.jsx
+++ b/src/components/LanguageSelector.jsx
@@ -1,58 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
-
-const LanguageSelector = ({
-  intl, options, onSubmit, ...props
-}) => {
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    const languageCode = e.target.elements['site-footer-language-select'].value;
-    onSubmit(languageCode);
-  };
-
-  return (
-    <form
-      className="form-inline"
-      onSubmit={handleSubmit}
-      {...props}
-    >
-      <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"
-            defaultMessage="Choose Language"
-            description="The label for the laguage select part of the language selection form."
-          />
-        </label>
-        <select
-          id="site-footer-language-select"
-          className="form-control-sm mx-2"
-          name="site-footer-language-select"
-          defaultValue={intl.locale}
-        >
-          {options.map(({ value, label }) => <option key={value} value={value}>{label}</option>)}
-        </select>
-        <button data-testid="site-footer-submit-btn" className="btn btn-outline-primary btn-sm" type="submit">
-          <FormattedMessage
-            id="footer.languageForm.submit.label"
-            defaultMessage="Apply"
-            description="The label for button to submit the language selection form."
-          />
-        </button>
-      </div>
-    </form>
-  );
-};
-
-LanguageSelector.propTypes = {
-  intl: intlShape.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  options: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string,
-  })).isRequired,
-};
-
-export default injectIntl(LanguageSelector);
--- a/src/components/snapshots/Footer.test.jsx.snap
+++ b/src/components/snapshots/Footer.test.jsx.snap
@@ -1,130 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Footer /> renders correctly renders with a language selector 1`] = `
-<footer
-  className="footer d-flex border-top py-3 px-4"
-  role="contentinfo"
->
-  <div
-    className="container-fluid d-flex"
-  >
-    <a
-      aria-label="edX Home"
-      className="d-block"
-      href="http://localhost:18000"
-    >
-      <img
-        alt="Powered by Open edX"
-        src="https://edx-cdn.org/v3/default/logo-trademark.svg"
-        style={
-          Object {
-            "maxHeight": 45,
-          }
-        }
-      />
-    </a>
-    <div
-      className="flex-grow-1"
-    />
-    <form
-      className="form-inline"
-      onSubmit={[Function]}
-    >
-      <div
-        className="form-group"
-      >
-        <label
-          className="d-inline-block m-0"
-          htmlFor="site-footer-language-select"
-        >
-          Choose Language
-        </label>
-        <select
-          className="form-control-sm mx-2"
-          defaultValue="en"
-          id="site-footer-language-select"
-          name="site-footer-language-select"
-        >
-          <option
-            value="en"
-          >
-            English
-          </option>
-          <option
-            value="es"
-          >
-            Español
-          </option>
-        </select>
-        <button
-          className="btn btn-outline-primary btn-sm"
-          data-testid="site-footer-submit-btn"
-          type="submit"
-        >
-          Apply
-        </button>
-      </div>
-    </form>
-  </div>
-</footer>
-`;
-
-exports[`<Footer /> renders correctly renders without a language selector 1`] = `
-<footer
-  className="footer d-flex border-top py-3 px-4"
-  role="contentinfo"
->
-  <div
-    className="container-fluid d-flex"
-  >
-    <a
-      aria-label="edX Home"
-      className="d-block"
-      href="http://localhost:18000"
-    >
-      <img
-        alt="Powered by Open edX"
-        src="https://edx-cdn.org/v3/default/logo-trademark.svg"
-        style={
-          Object {
-            "maxHeight": 45,
-          }
-        }
-      />
-    </a>
-    <div
-      className="flex-grow-1"
-    />
-  </div>
-</footer>
-`;
-
-exports[`<Footer /> renders correctly renders without a language selector in es 1`] = `
-<footer
-  className="footer d-flex border-top py-3 px-4"
-  role="contentinfo"
->
-  <div
-    className="container-fluid d-flex"
-  >
-    <a
-      aria-label="edX Home"
-      className="d-block"
-      href="http://localhost:18000"
-    >
-      <img
-        alt="Powered by Open edX"
-        src="https://edx-cdn.org/v3/default/logo-trademark.svg"
-        style={
-          Object {
-            "maxHeight": 45,
-          }
-        }
-      />
-    </a>
-    <div
-      className="flex-grow-1"
-    />
-  </div>
-</footer>
-`;
--- a/src/components/studio-footer/StudioFooter.jsx
+++ b/src/components/studio-footer/StudioFooter.jsx
@@ -1,146 +0,0 @@
-import React, { useContext, useState } from 'react';
-import _ from 'lodash';
-import { intlShape, injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
-import { ensureConfig } from '@edx/frontend-platform';
-import { AppContext } from '@edx/frontend-platform/react';
-import {
-  ActionRow,
-  Button,
-  Container,
-  Hyperlink,
-  Image,
-  TransitionReplace,
-} from '@openedx/paragon';
-import { ExpandLess, ExpandMore, Help } from '@openedx/paragon/icons';
-import messages from './messages';
-
-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 = ({
-  // injected
-  intl,
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const { config } = useContext(AppContext);
-
-  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="px-4">
-        <TransitionReplace>
-          {isOpen ? (
-            <ActionRow key="help-link-button-row" className="py-4" data-testid="helpButtonRow">
-              <ActionRow.Spacer />
-              <Button as="a" href="https://docs.edx.org/" size="sm">
-                <FormattedMessage {...messages.edxDocumentationButtonLabel} />
-              </Button>
-              <Button
-                as="a"
-                href="https://open.edx.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 />
-          <Hyperlink destination="https://open.edx.org" className="float-right">
-            <Image
-              width="120px"
-              alt="Powered by Open edX"
-              src="https://logos.openedx.org/open-edx-logo-tag.png"
-            />
-          </Hyperlink>
-        </ActionRow>
-      </Container>
-    </>
-  );
-};
-
-StudioFooter.propTypes = {
-  // injected
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(StudioFooter);
--- a/src/components/studio-footer/StudioFooter.test.jsx
+++ b/src/components/studio-footer/StudioFooter.test.jsx
@@ -1,121 +0,0 @@
-/* eslint-disable react/prop-types */
-import React, { useMemo } from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { AppContext } from '@edx/frontend-platform/react';
-import StudioFooter from './StudioFooter';
-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}>
-        <StudioFooter />
-      </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', () => {
-      render(<Component />);
-      const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      fireEvent.click(helpToggleButton);
-      expect(screen.getByText(messages.closeHelpButtonLabel.defaultMessage))
-        .toBeVisible();
-    });
-    it('help button link row should be visible', () => {
-      render(<Component />);
-      const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      fireEvent.click(helpToggleButton);
-      expect(screen.getByTestId('helpButtonRow')).toBeVisible();
-    });
-    it('Open edX portal button should be visible', () => {
-      render(<Component />);
-      const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      fireEvent.click(helpToggleButton);
-      expect(screen.getByTestId('openEdXPortalButton')).toBeVisible();
-    });
-    it('should not show contact us button', () => {
-      render(<Component />);
-      const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      fireEvent.click(helpToggleButton);
-      expect(screen.queryByTestId('contactUsButton')).toBeNull();
-    });
-    it('should show contact us button', () => {
-      render(<Component updateVariable={['SUPPORT_EMAIL', 'support@email.com']} />);
-      const helpToggleButton = screen.getByText(messages.openHelpButtonLabel.defaultMessage);
-      fireEvent.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();
-    });
-  });
-});
--- a/src/components/studio-footer/index.jsx
+++ b/src/components/studio-footer/index.jsx
@@ -1,3 +0,0 @@
-import StudioFooter from './StudioFooter';
-
-export default StudioFooter;
--- a/src/components/studio-footer/messages.js
+++ b/src/components/studio-footer/messages.js
@@ -1,61 +0,0 @@
-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;
--- a/src/config/edx-footer.png
+++ b/src/config/edx-footer.png
--- a/src/config/index.jsx
+++ b/src/config/index.jsx
@@ -0,0 +1,192 @@
+/* eslint-disable */
+
+import React from 'react';
+import pick from 'lodash.pick';
+
+import FooterLogo from './edx-footer.png';
+
+/* TODO: This file is incomplete/non-functional.  It needs some thougth about how to get
+ * messages/intl into it so that we can localize our titles here.  I think the right answer is
+ * for this file to directly import messages.js (next door) and be passed the app's `intl`
+ * object, as shown below.  Then it can call formatMessage on `intl`.  Also, the JSX below
+ * should be evaluated with the IntlProvider when it's actually rendered by the footer, so
+ * that _should_ work.
+ */
+
+
+let config = {
+  MARKETING_SITE_BASE_URL: null,
+};
+
+let intl = null;
+
+function validateConfiguration(newConfig) {
+  Object.keys(config).forEach((key) => {
+    if (newConfig[key] === undefined) {
+      throw new Error(`Footer configuration error: ${key} is required.`);
+    }
+  });
+}
+
+
+export function getDefaultConfiguration(newConfig, newIntl) {
+  validateConfiguration(newConfig);
+  config = pick(newConfig, Object.keys(config));
+  intl = newIntl;
+
+  const edXLinks = [
+    {
+      title: 'About',
+      url: `${config.MARKETING_SITE_BASE_URL}/about-us`,
+    },
+    {
+      title: 'edX for Business',
+      url: config.ENTERPRISE_MARKETING_URL,
+      queryParams: {
+        utm_campaign: config.ENTERPRISE_MARKETING_UTM_CAMPAIGN,
+        utm_medium: config.ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM,
+        utm_source: config.ENTERPRISE_MARKETING_UTM_SOURCE,
+      },
+    },
+    {
+      title: 'Affiliates',
+      url: `${config.MARKETING_SITE_BASE_URL}/affiliate-program`,
+    },
+    {
+      title: 'Open edX',
+      url: `${config.OPEN_SOURCE_URL}`,
+    },
+    {
+      title: 'Careers',
+      url: `${config.MARKETING_SITE_BASE_URL}/careers`,
+    },
+    {
+      title: 'News',
+      url: `${config.MARKETING_SITE_BASE_URL}/news-announcements`,
+    },
+  ];
+
+  const legalLinks = [
+    {
+      title: 'Terms of Service & Honor Code',
+      url: `${config.MARKETING_SITE_BASE_URL}/edx-terms-service`,
+    },
+    {
+      title: 'Privacy Policy',
+      url: `${config.MARKETING_SITE_BASE_URL}/edx-privacy-policy`,
+    },
+    {
+      title: 'Accessibility Policy',
+      url: `${config.MARKETING_SITE_BASE_URL}/accessibility`,
+    },
+    {
+      title: 'Trademark Policy',
+      url: `${config.MARKETING_SITE_BASE_URL}/trademarks`,
+    },
+    {
+      title: 'Sitemap',
+      url: `${config.MARKETING_SITE_BASE_URL}/sitemap`,
+    },
+  ];
+
+  const connectLinks = [
+    {
+      title: 'Blog',
+      url: `${config.MARKETING_SITE_BASE_URL}/blog`,
+    },
+    {
+      title: 'Contact Us',
+      url: `${config.LMS_BASE_URL}/support/contact_us`,
+    },
+    {
+      title: 'Help Center',
+      url: config.SUPPORT_URL,
+    },
+    {
+      title: 'Media Kit',
+      url: `${config.MARKETING_SITE_BASE_URL}/media-kit`,
+    },
+    {
+      title: 'Donate',
+      url: `${config.MARKETING_SITE_BASE_URL}/donate`,
+    },
+  ];
+
+  const socialLinks = [
+    {
+      title: 'Facebook',
+      url: config.FACEBOOK_URL,
+      icon: <FontAwesomeIcon icon={faFacebookSquare} className="social-icon" size="2x" />,
+      screenReaderText: 'Like edX on Facebook',
+    },
+    {
+      title: 'Twitter',
+      url: config.TWITTER_URL,
+      icon: <FontAwesomeIcon icon={faTwitterSquare} className="social-icon" size="2x" />,
+      screenReaderText: 'Follow edX on Twitter',
+    },
+    {
+      title: 'Youtube',
+      url: config.YOU_TUBE_URL,
+      icon: <FontAwesomeIcon icon={faYoutubeSquare} className="social-icon" size="2x" />,
+      screenReaderText: 'Subscribe to the edX YouTube channel',
+    },
+    {
+      title: 'LinkedIn',
+      url: config.LINKED_IN_URL,
+      icon: <FontAwesomeIcon icon={faLinkedin} className="social-icon" size="2x" />,
+      screenReaderText: 'Follow edX on LinkedIn',
+    },
+    {
+      title: 'Reddit',
+      url: config.REDDIT_URL,
+      icon: <FontAwesomeIcon icon={faRedditSquare} className="social-icon" size="2x" />,
+      screenReaderText: 'Subscribe to the edX subreddit',
+    },
+  ];
+
+
+  const copyright = <FormattedMessage
+    id="footer.site-footer.copyright-text"
+    defaultMessage="{copyrightSymbol} {startDate}–{endDate} {siteName} Inc."
+    values={{
+      copyrightSymbol: '©',
+      startDate: '2012',
+      endDate: `${new Date().getFullYear()}`,
+      siteName,
+    }}
+    description="Footer copyright text with copyright symbol and dates"
+  />
+
+  const trademark = <FormattedMessage
+    id="footer.site-footer.trademark-text"
+    defaultMessage="EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 深圳市恒宇博科技有限公司 {icpLicense}"
+    values={{ icpLicense: <a href="http://www.beian.miit.gov.cn">粤ICP备17044299号-2</a> }}
+    description="Footer trademark text"
+  />
+
+  return {
+    ariaLabel: "Page Footer",
+    siteLogo: FooterLogo,
+    marketingSiteBaseUrl: config.MARKETING_SITE_BASE_URL,
+    linkSectionOne: edXLinks,
+    linkSectionTwo: legalLinks,
+    linkSectionThree: connectLinks,
+    socialLinks,
+    showMobileLinks: true,
+    appleAppStore: {
+      url: config.APPLE_APP_STORE_URL,
+      altText: "Download the edX mobile app from the Apple App Store",
+    },
+    googlePlayUrl: {
+      url: config.GOOGLE_PLAY_URL,
+      altText: "Download the edX mobile app from Google Play",
+    },
+    supportedLanguages: [],
+    languageForm: null,
+    copyright,
+    trademark,
+  }
+};
+
+export default getDefaultConfiguration;
--- a/src/config/messages.js
+++ b/src/config/messages.js
@@ -0,0 +1,91 @@
+import { defineMessages } from '@edx/frontend-i18n';
+
+const messages = defineMessages({
+  'footer.site-footer.site-logo.alt-text': {
+    id: 'footer.site-footer.site-logo.alt-text',
+    defaultMessage: '{siteName} logo',
+    description: 'The alt description of the site logo',
+  },
+  'footer.site-footer.site-logo.aria-label': {
+    id: 'footer.site-footer.site-logo.aria-label',
+    defaultMessage: '{siteName} Home',
+    description: 'Aria label for the site logo which goes to the marketing site',
+  },
+  'footer.site-footer.facebook.title': {
+    id: 'footer.site-footer.facebook.title',
+    defaultMessage: 'Facebook',
+    description: 'Facebook button title',
+  },
+  'footer.site-footer.facebook.screen-reader-text': {
+    id: 'footer.site-footer.facebook.screen-reader-text',
+    defaultMessage: 'Like {siteName} on Facebook',
+    description: 'Facebook button screen reader text',
+  },
+  'footer.site-footer.twitter.title': {
+    id: 'footer.site-footer.twitter.title',
+    defaultMessage: 'Twitter',
+    description: 'Twitter button title',
+  },
+  'footer.site-footer.twitter.screen-reader-text': {
+    id: 'footer.site-footer.twitter.screen-reader-text',
+    defaultMessage: 'Follow {siteName} on Twitter',
+    description: 'Twitter button screen reader text',
+  },
+  'footer.site-footer.youtube.title': {
+    id: 'footer.site-footer.youtube.title',
+    defaultMessage: 'Youtube',
+    description: 'Youtube button title',
+  },
+  'footer.site-footer.youtube.screen-reader-text': {
+    id: 'footer.site-footer.youtube.screen-reader-text',
+    defaultMessage: 'Subscribe to the {siteName} YouTube channel',
+    description: 'Youtube button screen reader text',
+  },
+  'footer.site-footer.linkedin.title': {
+    id: 'footer.site-footer.linkedin.title',
+    defaultMessage: 'LinkedIn',
+    description: 'LinkedIn button title',
+  },
+  'footer.site-footer.linkedin.screen-reader-text': {
+    id: 'footer.site-footer.linkedin.screen-reader-text',
+    defaultMessage: 'Follow {siteName} on LinkedIn',
+    description: 'LinkedIn button screen reader text',
+  },
+  'footer.site-footer.google-plus.title': {
+    id: 'footer.site-footer.google-plus.title',
+    defaultMessage: 'Google+',
+    description: 'Google+ button title',
+  },
+  'footer.site-footer.google-plus.screen-reader-text': {
+    id: 'footer.site-footer.google-plus.screen-reader-text',
+    defaultMessage: 'Follow {siteName} on Google+',
+    description: 'Google+ button screen reader text',
+  },
+  'footer.site-footer.reddit.title': {
+    id: 'footer.site-footer.reddit.title',
+    defaultMessage: 'Reddit',
+    description: 'Reddit button title',
+  },
+  'footer.site-footer.reddit.screen-reader-text': {
+    id: 'footer.site-footer.reddit.screen-reader-text',
+    defaultMessage: 'Subscribe to the {siteName} subreddit',
+    description: 'Reddit button screen reader text',
+  },
+  'footer.site-footer.apple-app-store.alt-text': {
+    id: 'footer.site-footer.apple-app-store.alt-text',
+    defaultMessage: 'Download the {siteName} mobile app from the Apple App Store',
+    description: 'Apple App Store button alt description',
+  },
+  'footer.site-footer.google-play.alt-text': {
+    id: 'footer.site-footer.google-play.alt-text',
+    defaultMessage: 'Download the {siteName} mobile app from Google Play',
+    description: 'Google Play button alt description',
+  },
+  'footer.site-footer.footer.aria-label': {
+    id: 'footer.site-footer.footer.aria-label',
+    defaultMessage: 'Page Footer',
+    description: 'Aria label for the footer',
+  },
+});
+
+export default messages;
--- a/src/example/index.html
+++ b/src/example/index.html
@@ -1,11 +1,12 @@
 <!doctype html>
-<html lang="en-us" dir="ltr">
+<html lang="en-us">
  <head>
-      <title>Footer</title>
+      <title>Example Footer</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div id="root"></div>
+    <script src="./index.js"></script>
  </body>
 </html>
--- a/src/example/index.js
+++ b/src/example/index.js
@@ -0,0 +1,183 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+/* eslint-disable import/no-extraneous-dependencies */
+import {
+  faFacebookSquare,
+  faTwitterSquare,
+  faYoutubeSquare,
+  faLinkedin,
+  faRedditSquare,
+} from '@fortawesome/free-brands-svg-icons';
+import { faLanguage } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+/* eslint-enable import/no-extraneous-dependencies */
+
+import SiteFooter from '../lib/';
+import './index.scss';
+import FooterLogo from '../config/edx-footer.png';
+
+
+const edXLinks = [
+  {
+    title: 'About',
+    url: 'https://www.example.com/about-us',
+  },
+  {
+    title: 'edX for Business',
+    url: 'https://business.edx.org',
+    queryParams: { utm_test: 'utm_test_value' },
+  },
+  {
+    title: 'Affiliates',
+    url: 'https://www.example.com/affiliate-program',
+  },
+  {
+    title: 'Open edX',
+    url: 'https://www.example.com/open',
+  },
+  {
+    title: 'Careers',
+    url: 'https://www.example.com/careers',
+  },
+  {
+    title: 'News',
+    url: 'https://www.example.com/news-announcements',
+  },
+];
+
+const legalLinks = [
+  {
+    title: 'Terms of Service & Honor Code',
+    url: 'https://www.example.com/terms-of-service',
+  },
+  {
+    title: 'Privacy Policy',
+    url: 'https://www.example.com/privacy-policy',
+  },
+  {
+    title: 'Accessibility Policy',
+    url: 'https://www.example.com/accessibility',
+  },
+  {
+    title: 'Trademark Policy',
+    url: 'https://www.example.com/trademarks',
+  },
+  {
+    title: 'Sitemap',
+    url: 'https://www.example.com/sitemap',
+  },
+];
+
+const connectLinks = [
+  {
+    title: 'Blog',
+    url: 'https://www.example.com/blog',
+  },
+  {
+    title: 'Contact Us',
+    url: 'https://www.example.com/contact',
+  },
+  {
+    title: 'Help Center',
+    url: 'https://www.example.com/support',
+  },
+  {
+    title: 'Media Kit',
+    url: 'https://www.example.com/media-kit',
+  },
+  {
+    title: 'Donate',
+    url: 'https://www.example.com/donate',
+  },
+];
+
+const socialLinks = [
+  {
+    title: 'Facebook',
+    url: 'https://www.facebook.com',
+    icon: <FontAwesomeIcon icon={faFacebookSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Like edX on Facebook',
+  },
+  {
+    title: 'Twitter',
+    url: 'https://www.twitter.com',
+    icon: <FontAwesomeIcon icon={faTwitterSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Follow edX on Twitter',
+  },
+  {
+    title: 'Youtube',
+    url: 'https://www.youtube.com',
+    icon: <FontAwesomeIcon icon={faYoutubeSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Subscribe to the edX YouTube channel',
+  },
+  {
+    title: 'LinkedIn',
+    url: 'https://www.linkedin.com',
+    icon: <FontAwesomeIcon icon={faLinkedin} className="social-icon" size="2x" />,
+    screenReaderText: 'Follow edX on LinkedIn',
+  },
+  {
+    title: 'Reddit',
+    url: 'https://reddit.com',
+    icon: <FontAwesomeIcon icon={faRedditSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Subscribe to the edX subreddit',
+  },
+];
+
+
+const App = () => (
+  <SiteFooter
+    siteLogo={{
+      src: FooterLogo,
+      altText: 'edx Logo',
+      ariaLabel: 'edX Home',
+    }}
+    ariaLabel="Page Footer"
+    marketingSiteBaseUrl="https://www.example.com"
+    appleAppStore={{
+      url: 'https://store.apple.com',
+      altText: 'Download the edX mobile app from the Apple App Store',
+    }}
+    googlePlay={{
+      url: 'https://play.google.com',
+      altText: 'Download the edX mobile app from Google Play',
+    }}
+    handleAllTrackEvents={() => {}}
+    linkSectionOne={{
+      title: 'edX',
+      linkList: edXLinks,
+    }}
+    linkSectionTwo={{
+      title: 'Legal',
+      linkList: legalLinks,
+    }}
+    linkSectionThree={{
+      title: 'Connect',
+      linkList: connectLinks,
+    }}
+    socialLinks={socialLinks}
+    supportedLanguages={[
+      {
+        label: 'English',
+        value: 'en',
+      }, {
+        label: 'español',
+        value: 'es-419',
+      },
+    ]}
+    languageForm={{
+      activeLanguage: 'en',
+      screenReaderLabel: 'Choose Language',
+      submitLabel: 'Apply',
+      icon: <FontAwesomeIcon icon={faLanguage} size="2x" className="text-primary" />,
+      onLanguageSelected: () => {},
+    }}
+    copyright="© 2012–2019 edX Inc."
+    trademark={(
+      <React.Fragment>EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 深圳市恒宇博科技有限公司 <a href="http://www.beian.miit.gov.cn">粤ICP备17044299号-2</a></React.Fragment>
+    )}
+  />
+);
+
+render(<App />, document.getElementById('root'));
--- a/src/example/index.scss
+++ b/src/example/index.scss
@@ -0,0 +1,2 @@
+@import "~@edx/paragon/scss/edx/theme";
+@import '../lib/SiteFooter.scss';
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -1 +0,0 @@
-export default {};
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,5 @@
-import Footer, { EVENT_NAMES } from './components/Footer';
-import messages from './i18n/index';
-import StudioFooter from './components/studio-footer';
+import SiteFooter from './lib';

-export default Footer;
-export { messages, EVENT_NAMES, StudioFooter };
+export { default as FooterLogo } from './config/edx-footer.png';
+export { default as config } from './config';
+export default SiteFooter;
--- a/src/lib/SiteFooter.jsx
+++ b/src/lib/SiteFooter.jsx
@@ -0,0 +1,260 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import qs from 'query-string';
+
+export const EVENT_NAMES = {
+  FOOTER_LINK: 'edx.bi.footer.link',
+};
+
+export default class SiteFooter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.externalLinkClickHandler = this.externalLinkClickHandler.bind(this);
+    this.applyLanguageSelection = this.applyLanguageSelection.bind(this);
+  }
+
+  applyLanguageSelection(event) {
+    event.preventDefault();
+    const languageCode = event.target.elements['site-footer-language-select'].value;
+    const { languageForm: { onLanguageSelected } } = this.props;
+    onLanguageSelected(languageCode);
+  }
+
+  externalLinkClickHandler(event) {
+    const label = event.currentTarget.getAttribute('href');
+    const eventName = EVENT_NAMES.FOOTER_LINK;
+    const properties = {
+      category: 'outbound_link',
+      label,
+    };
+    this.props.handleAllTrackEvents(eventName, properties);
+  }
+
+  formatUrl(linkData) {
+    const {
+      queryParams,
+      url,
+    } = linkData;
+    return queryParams ? `${url}/?${qs.stringify(queryParams)}` : url;
+  }
+
+  renderLinkList({ title, linkList }) {
+    if (linkList.length > 0) {
+      return (
+        <React.Fragment>
+          <h2>{title}</h2>
+          <ul className="list-unstyled p-0 m-0">
+            {linkList.map(link => (
+              <li key={link.url}>
+                <a href={this.formatUrl(link)}>{link.title}</a>
+              </li>
+            ))}
+          </ul>
+        </React.Fragment>
+      );
+    }
+
+    return null;
+  }
+
+  renderMobileLinks() {
+    const {
+      showMobileLinks,
+      appleAppStore,
+      googlePlay,
+    } = this.props;
+
+    if (showMobileLinks) {
+      return (
+        <ul className="d-flex flex-row justify-content-between list-unstyled max-width-264 p-0 mb-5">
+          <li>
+            <a href={appleAppStore.url} rel="noopener noreferrer" target="_blank" onClick={this.externalLinkClickHandler}>
+              <img
+                className="max-height-39"
+                alt={appleAppStore.altText}
+                src="https://prod-edxapp.edx-cdn.org/static/images/app/app_store_badge_135x40.d0558d910630.svg"
+              />
+            </a>
+          </li>
+          <li>
+            <a href={googlePlay.url} rel="noopener noreferrer" target="_blank" onClick={this.externalLinkClickHandler}>
+              <img
+                className="max-height-39"
+                alt={googlePlay.altText}
+                src="https://prod-edxapp.edx-cdn.org/static/images/app/google_play_badge_45.6ea466e328da.png"
+              />
+            </a>
+          </li>
+        </ul>
+      );
+    }
+
+    return null;
+  }
+
+  render() {
+    const {
+      ariaLabel,
+      linkSectionOne,
+      linkSectionTwo,
+      linkSectionThree,
+      siteLogo,
+      socialLinks,
+      supportedLanguages,
+      languageForm,
+      marketingSiteBaseUrl,
+      copyright,
+      trademark,
+    } = this.props;
+    const showLanguageSelector = supportedLanguages.length > 0 &&
+                                 languageForm;
+    return (
+      <footer
+        role="contentinfo"
+        aria-label={ariaLabel}
+        className="footer d-flex justify-content-center border-top py-3 px-4"
+      >
+        <div className="max-width-1180 d-grid">
+          <div className="area-1">
+            <a
+              href={marketingSiteBaseUrl}
+              aria-label={siteLogo.ariaLabel}
+            >
+              <img src={siteLogo.src} alt={siteLogo.altText} />
+            </a>
+            {showLanguageSelector &&
+              <div className="i18n d-flex mt-2">
+                <form
+                  className="d-flex align-items-start"
+                  onSubmit={this.applyLanguageSelection}
+                >
+                  {/* eslint-disable-next-line jsx-a11y/label-has-for */}
+                  <label htmlFor="site-footer-language-select">
+                    {languageForm.icon}
+                    <div className="sr-only">{languageForm.screenReaderLabel}</div>
+                  </label>
+                  <select
+                    id="site-footer-language-select"
+                    className="mx-2 mt-1"
+                    name="site-footer-language-select"
+                    defaultValue={languageForm.activeLanguage}
+                  >
+                    {supportedLanguages.map(({ value, label }) =>
+                      <option key={value} value={value}>{label}</option>)}
+                  </select>
+                  <button className="mt-1" type="submit">{languageForm.submitLabel}</button>
+                </form>
+              </div>
+            }
+          </div>
+          <div className="area-2">{this.renderLinkList(linkSectionOne)}</div>
+          <div className="area-3">{this.renderLinkList(linkSectionTwo)}</div>
+          <div className="area-4">{this.renderLinkList(linkSectionThree)}</div>
+          <div className="area-5">
+            {socialLinks.length > 0 &&
+              <ul className="d-flex flex-row justify-content-between list-unstyled max-width-222 p-0 mb-4">
+                {socialLinks.map(link => (
+                  <li key={link.url}>
+                    <a
+                      href={link.url}
+                      title={link.title}
+                      rel="noopener noreferrer"
+                      target="_blank"
+                      onClick={this.externalLinkClickHandler}
+                    >
+                      {link.icon}
+                      <span className="sr-only">{link.screenReaderText}</span>
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            }
+            {this.renderMobileLinks()}
+            <p>
+              {copyright}
+              <br />
+              {trademark}
+            </p>
+          </div>
+        </div>
+      </footer>
+    );
+  }
+}
+
+const linkSectionShape = PropTypes.shape({
+  title: PropTypes.string,
+  linkList: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+    queryParams: PropTypes.shape({}),
+  })),
+});
+
+SiteFooter.propTypes = {
+  ariaLabel: PropTypes.string.isRequired,
+  siteLogo: PropTypes.shape({
+    src: PropTypes.node,
+    altText: PropTypes.string,
+    ariaLabel: PropTypes.string,
+  }).isRequired,
+  marketingSiteBaseUrl: PropTypes.string,
+  linkSectionOne: linkSectionShape,
+  linkSectionTwo: linkSectionShape,
+  linkSectionThree: linkSectionShape,
+  socialLinks: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+    icon: PropTypes.element.isRequired,
+    screenReaderText: PropTypes.string.isRequired,
+  })),
+  showMobileLinks: PropTypes.bool,
+  appleAppStore: PropTypes.shape({
+    url: PropTypes.string,
+    altText: PropTypes.string,
+  }),
+  googlePlay: PropTypes.shape({
+    url: PropTypes.string,
+    altText: PropTypes.string,
+  }),
+  supportedLanguages: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+  })),
+  languageForm: PropTypes.shape({
+    screenReaderLabel: PropTypes.string.isRequired,
+    submitLabel: PropTypes.string.isRequired,
+    onLanguageSelected: PropTypes.func.isRequired,
+    icon: PropTypes.node.isRequired,
+    activeLanguage: PropTypes.string,
+  }),
+  copyright: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.node,
+  ]),
+  trademark: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.node,
+  ]),
+  handleAllTrackEvents: PropTypes.func.isRequired,
+};
+
+const linkSectionDefault = {
+  title: null,
+  linkList: [],
+};
+
+SiteFooter.defaultProps = {
+  marketingSiteBaseUrl: null,
+  linkSectionOne: linkSectionDefault,
+  linkSectionTwo: linkSectionDefault,
+  linkSectionThree: linkSectionDefault,
+  socialLinks: [],
+  showMobileLinks: false,
+  appleAppStore: null,
+  googlePlay: null,
+  supportedLanguages: [],
+  languageForm: null,
+  copyright: null,
+  trademark: null,
+};
--- a/src/lib/SiteFooter.test.jsx
+++ b/src/lib/SiteFooter.test.jsx
@@ -0,0 +1,348 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { mount } from 'enzyme';
+
+import {
+  faFacebookSquare,
+  faTwitterSquare,
+  faYoutubeSquare,
+  faLinkedin,
+  faRedditSquare,
+} from '@fortawesome/free-brands-svg-icons';
+import { faLanguage } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import FooterLogo from '../config/edx-footer.png';
+import SiteFooter, { EVENT_NAMES } from './SiteFooter';
+
+
+const edXLinks = [
+  {
+    title: 'About',
+    url: 'https://www.example.com/about-us',
+  },
+  {
+    title: 'edX for Business',
+    url: 'https://business.edx.org',
+    queryParams: { utm_test: 'utm_test_value' },
+  },
+  {
+    title: 'Affiliates',
+    url: 'https://www.example.com/affiliate-program',
+  },
+  {
+    title: 'Open edX',
+    url: 'https://www.example.com/open',
+  },
+  {
+    title: 'Careers',
+    url: 'https://www.example.com/careers',
+  },
+  {
+    title: 'News',
+    url: 'https://www.example.com/news-announcements',
+  },
+];
+
+const legalLinks = [
+  {
+    title: 'Terms of Service & Honor Code',
+    url: 'https://www.example.com/terms-of-service',
+  },
+  {
+    title: 'Privacy Policy',
+    url: 'https://www.example.com/privacy-policy',
+  },
+  {
+    title: 'Accessibility Policy',
+    url: 'https://www.example.com/accessibility',
+  },
+  {
+    title: 'Trademark Policy',
+    url: 'https://www.example.com/trademarks',
+  },
+  {
+    title: 'Sitemap',
+    url: 'https://www.example.com/sitemap',
+  },
+];
+
+const connectLinks = [
+  {
+    title: 'Blog',
+    url: 'https://www.example.com/blog',
+  },
+  {
+    title: 'Contact Us',
+    url: 'https://www.example.com/contact',
+  },
+  {
+    title: 'Help Center',
+    url: 'https://www.example.com/support',
+  },
+  {
+    title: 'Media Kit',
+    url: 'https://www.example.com/media-kit',
+  },
+  {
+    title: 'Donate',
+    url: 'https://www.example.com/donate',
+  },
+];
+
+const socialLinks = [
+  {
+    title: 'Facebook',
+    url: 'https://www.facebook.com',
+    icon: <FontAwesomeIcon icon={faFacebookSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Like edX on Facebook',
+  },
+  {
+    title: 'Twitter',
+    url: 'https://www.twitter.com',
+    icon: <FontAwesomeIcon icon={faTwitterSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Follow edX on Twitter',
+  },
+  {
+    title: 'Youtube',
+    url: 'https://www.youtube.com',
+    icon: <FontAwesomeIcon icon={faYoutubeSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Subscribe to the edX YouTube channel',
+  },
+  {
+    title: 'LinkedIn',
+    url: 'https://www.linkedin.com',
+    icon: <FontAwesomeIcon icon={faLinkedin} className="social-icon" size="2x" />,
+    screenReaderText: 'Follow edX on LinkedIn',
+  },
+  {
+    title: 'Reddit',
+    url: 'https://reddit.com',
+    icon: <FontAwesomeIcon icon={faRedditSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Subscribe to the edX subreddit',
+  },
+];
+
+const supportedLanguages = [
+  {
+    label: 'English',
+    value: 'en',
+  }, {
+    label: 'español',
+    value: 'es-419',
+  },
+];
+
+const languageForm = {
+  activeLanguage: 'en',
+  screenReaderLabel: 'Choose Language',
+  submitLabel: 'Apply',
+  icon: <FontAwesomeIcon icon={faLanguage} size="2x" className="text-primary" />,
+  onLanguageSelected: () => {},
+};
+
+const completeSiteFooterComponent = mockHandleAllTrackEvents =>
+  (
+    <SiteFooter
+      siteLogo={{
+        src: FooterLogo,
+        altText: 'edx Logo',
+        ariaLabel: 'edX Home',
+      }}
+      ariaLabel="Page Footer"
+      marketingSiteBaseUrl="https://www.example.com"
+      appleAppStore={{
+        url: 'https://store.apple.com',
+        altText: 'Download the edX mobile app from the Apple App Store',
+      }}
+      googlePlay={{
+        url: 'https://play.google.com',
+        altText: 'Download the edX mobile app from Google Play',
+      }}
+      handleAllTrackEvents={mockHandleAllTrackEvents}
+      linkSectionOne={{
+        title: 'edX',
+        linkList: edXLinks,
+      }}
+      linkSectionTwo={{
+        title: 'Legal',
+        linkList: legalLinks,
+      }}
+      linkSectionThree={{
+        title: 'Connect',
+        linkList: connectLinks,
+      }}
+      socialLinks={socialLinks}
+      supportedLanguages={supportedLanguages}
+      languageForm={languageForm}
+      copyright="© 2012–2019 edX Inc."
+      trademark={(
+        <React.Fragment>EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 深圳市恒宇博科技有限公司 <a href="http://www.beian.miit.gov.cn">粤ICP备17044299号-2</a></React.Fragment>
+      )}
+    />
+  );
+
+describe('<SiteFooter />', () => {
+  describe('renders correctly', () => {
+    it('renders with social and mobile links', () => {
+      const mockHandleAllTrackEvents = jest.fn();
+      const tree = renderer
+        .create(completeSiteFooterComponent(mockHandleAllTrackEvents))
+        .toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('does not render social links', () => {
+      const tree = renderer
+        .create((
+          <SiteFooter
+            siteLogo={{
+              src: FooterLogo,
+              altText: 'edx Logo',
+              ariaLabel: 'edX Home',
+            }}
+            ariaLabel="Page Footer"
+            marketingSiteBaseUrl="https://www.example.com"
+            appleAppStore={{
+              url: 'https://store.apple.com',
+              altText: 'Download the edX mobile app from the Apple App Store',
+            }}
+            googlePlay={{
+              url: 'https://play.google.com',
+              altText: 'Download the edX mobile app from Google Play',
+            }}
+            handleAllTrackEvents={jest.fn()}
+            linkSectionOne={{
+              title: 'edX',
+              linkList: edXLinks,
+            }}
+            linkSectionTwo={{
+              title: 'Legal',
+              linkList: legalLinks,
+            }}
+            linkSectionThree={{
+              title: 'Connect',
+              linkList: connectLinks,
+            }}
+            supportedLanguages={supportedLanguages}
+            languageForm={languageForm}
+            copyright="© 2012–2019 edX Inc."
+            trademark={(
+              <React.Fragment>EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 深圳市恒宇博科技有限公司 <a href="http://www.beian.miit.gov.cn">粤ICP备17044299号-2</a></React.Fragment>
+            )}
+          />
+        )).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('does not render mobile links', () => {
+      const tree = renderer
+        .create((
+          <SiteFooter
+            siteLogo={{
+              src: FooterLogo,
+              altText: 'edx Logo',
+              ariaLabel: 'edX Home',
+            }}
+            ariaLabel="Page Footer"
+            marketingSiteBaseUrl="https://www.example.com"
+            appleAppStore={{
+              url: 'https://store.apple.com',
+              altText: 'Download the edX mobile app from the Apple App Store',
+            }}
+            googlePlay={{
+              url: 'https://play.google.com',
+              altText: 'Download the edX mobile app from Google Play',
+            }}
+            handleAllTrackEvents={jest.fn()}
+            linkSectionOne={{
+              title: 'edX',
+              linkList: edXLinks,
+            }}
+            linkSectionTwo={{
+              title: 'Legal',
+              linkList: legalLinks,
+            }}
+            linkSectionThree={{
+              title: 'Connect',
+              linkList: connectLinks,
+            }}
+            socialLinks={socialLinks}
+            supportedLanguages={supportedLanguages}
+            languageForm={languageForm}
+            copyright="© 2012–2019 edX Inc."
+            trademark={(
+              <React.Fragment>EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 深圳市恒宇博科技有限公司 <a href="http://www.beian.miit.gov.cn">粤ICP备17044299号-2</a></React.Fragment>
+            )}
+            showMobileLinks={false}
+          />
+        )).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('does not render language selector', () => {
+      const tree = renderer
+        .create((
+          <SiteFooter
+            siteLogo={{
+              src: FooterLogo,
+              altText: 'edx Logo',
+              ariaLabel: 'edX Home',
+            }}
+            ariaLabel="Page Footer"
+            marketingSiteBaseUrl="https://www.example.com"
+            appleAppStore={{
+              url: 'https://store.apple.com',
+              altText: 'Download the edX mobile app from the Apple App Store',
+            }}
+            googlePlay={{
+              url: 'https://play.google.com',
+              altText: 'Download the edX mobile app from Google Play',
+            }}
+            handleAllTrackEvents={jest.fn()}
+            linkSectionOne={{
+              title: 'edX',
+              linkList: edXLinks,
+            }}
+            linkSectionTwo={{
+              title: 'Legal',
+              linkList: legalLinks,
+            }}
+            linkSectionThree={{
+              title: 'Connect',
+              linkList: connectLinks,
+            }}
+            socialLinks={socialLinks}
+            supportedLanguages={supportedLanguages}
+            copyright="© 2012–2019 edX Inc."
+            trademark={(
+              <React.Fragment>EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 深圳市恒宇博科技有限公司 <a href="http://www.beian.miit.gov.cn">粤ICP备17044299号-2</a></React.Fragment>
+            )}
+          />
+        )).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+
+  describe('handles analytics', () => {
+    it('calls handleAllTrackEvents prop when external links clicked', () => {
+      const mockHandleAllTrackEvents = jest.fn();
+      const footer = mount((completeSiteFooterComponent(mockHandleAllTrackEvents)));
+      const externalLinks = footer.find("a[target='_blank']");
+
+      expect(externalLinks.length).toEqual(socialLinks.length + 2);
+
+      externalLinks.forEach((externalLink) => {
+        const callIndex = mockHandleAllTrackEvents.mock.calls.length;
+        externalLink.simulate('click');
+        expect(mockHandleAllTrackEvents.mock.calls[callIndex]).toEqual([
+          EVENT_NAMES.FOOTER_LINK,
+          {
+            category: 'outbound_link',
+            label: externalLink.prop('href'),
+          },
+        ]);
+      });
+    });
+  });
+});
--- a/src/lib/_SiteFooter.scss
+++ b/src/lib/_SiteFooter.scss
@@ -0,0 +1,165 @@
+.max-width-222 {
+  max-width: 222px;
+}
+
+.max-width-264 {
+  max-width: 264px;
+}
+
+.max-width-1180 {
+  max-width: 1180px;
+}
+
+.max-height-39 {
+  max-height: 39px;
+}
+
+.d-grid {
+  display: grid;
+}
+
+$gray-footer: #fcfcfc;
+$border-1: 1px solid $gray-200;
+
+.footer {
+  background-color: $gray-footer;
+
+  .area-1 {
+    grid-column: 1;
+    grid-row: 1;
+    border-bottom: $border-1;
+    padding-bottom: 1rem;
+  }
+
+  .area-2 {
+    grid-column: 1;
+    grid-row: 2;
+    border-bottom: $border-1;
+    padding: 1rem 0;
+  }
+
+  .area-3 {
+    grid-column: 1;
+    grid-row: 3;
+    border-bottom: $border-1;
+    padding: 1rem 0;
+  }
+
+  .area-4 {
+    grid-column: 1;
+    grid-row: 4;
+    border-bottom: $border-1;
+    padding: 1rem 0;
+  }
+
+  .area-5 {
+    grid-column: 1;
+    grid-row: 5;
+    padding: 1rem 0;
+  }
+
+  @media only screen and (min-width: 717px) {
+    .area-1 {
+      grid-column: 1 / span 2;
+      grid-row: 1;
+      border-bottom: none;
+      padding: 1rem 0;
+    }
+
+    .area-2 {
+      grid-column: 1;
+      grid-row: 2;
+    }
+
+    .area-3 {
+      grid-column: 1;
+      grid-row: 3;
+    }
+
+    .area-4 {
+      grid-column: 1;
+      grid-row: 4;
+      border-bottom: none;
+    }
+
+    .area-5 {
+      grid-column: 2;
+      grid-row: 2 / span 3;
+      border-left: $border-1;
+      padding-left: 1rem;
+      margin-left: 1rem;
+    }
+  }
+
+  @media only screen and (min-width: 870px) {
+    .area-1 {
+      grid-column: 1;
+      grid-row: 1 / span 3;
+      border-right: $border-1;
+      padding-right: 1rem;
+      margin-right: 1rem;
+    }
+
+    .area-2 {
+      grid-column: 2;
+      grid-row: 1;
+      border-bottom: none;
+      border-right: $border-1;
+      padding-right: 1rem;
+      margin-right: 1rem;
+    }
+
+    .area-3 {
+      grid-column: 3;
+      grid-row: 1;
+      border-bottom: none;
+      border-right: $border-1;
+      padding-right: 1rem;
+      margin-right: 1rem;
+    }
+
+    .area-4 {
+      grid-column: 4;
+      grid-row: 1;
+    }
+
+    .area-5 {
+      grid-column: 2 / span 3;
+      grid-row: 2;
+      border: none;
+      margin-left: 0;
+      padding-left: 0;
+    }
+  }
+
+  @media only screen and (min-width: 1188px) {
+    .area-1 {
+      grid-column: 1 / span 1;
+      grid-row: 1;
+    }
+
+    .area-2 {
+      grid-column: 2;
+      grid-row: 1;
+    }
+
+    .area-3 {
+      grid-column: 3;
+      grid-row: 1;
+    }
+
+    .area-4 {
+      grid-column: 4;
+      grid-row: 1;
+      border-right: $border-1;
+      padding-right: 1rem;
+      margin-right: 1rem;
+    }
+
+    .area-5 {
+      grid-column: 5 / span 1;
+      grid-row: 1;
+      max-width: 372px;
+    }
+  }
+}
--- a/src/lib/mocks/fileMock.js
+++ b/src/lib/mocks/fileMock.js
--- a/src/lib/snapshots/SiteFooter.test.jsx.snap
+++ b/src/lib/snapshots/SiteFooter.test.jsx.snap
@@ -0,0 +1,1503 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SiteFooter /> renders correctly does not render language selector 1`] = `
+<footer
+  aria-label="Page Footer"
+  className="footer d-flex justify-content-center border-top py-3 px-4"
+  role="contentinfo"
+>
+  <div
+    className="max-width-1180 d-grid"
+  >
+    <div
+      className="area-1"
+    >
+      <a
+        aria-label="edX Home"
+        href="https://www.example.com"
+      >
+        <img
+          alt="edx Logo"
+          src="test-file-stub"
+        />
+      </a>
+    </div>
+    <div
+      className="area-2"
+    >
+      <h2>
+        edX
+      </h2>
+      <ul
+        className="list-unstyled p-0 m-0"
+      >
+        <li>
+          <a
+            href="https://www.example.com/about-us"
+          >
+            About
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://business.edx.org/?utm_test=utm_test_value"
+          >
+            edX for Business
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/affiliate-program"
+          >
+            Affiliates
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/open"
+          >
+            Open edX
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/careers"
+          >
+            Careers
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/news-announcements"
+          >
+            News
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div
+      className="area-3"
+    >
+      <h2>
+        Legal
+      </h2>
+      <ul
+        className="list-unstyled p-0 m-0"
+      >
+        <li>
+          <a
+            href="https://www.example.com/terms-of-service"
+          >
+            Terms of Service & Honor Code
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/privacy-policy"
+          >
+            Privacy Policy
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/accessibility"
+          >
+            Accessibility Policy
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/trademarks"
+          >
+            Trademark Policy
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/sitemap"
+          >
+            Sitemap
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div
+      className="area-4"
+    >
+      <h2>
+        Connect
+      </h2>
+      <ul
+        className="list-unstyled p-0 m-0"
+      >
+        <li>
+          <a
+            href="https://www.example.com/blog"
+          >
+            Blog
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/contact"
+          >
+            Contact Us
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/support"
+          >
+            Help Center
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/media-kit"
+          >
+            Media Kit
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/donate"
+          >
+            Donate
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div
+      className="area-5"
+    >
+      <ul
+        className="d-flex flex-row justify-content-between list-unstyled max-width-222 p-0 mb-4"
+      >
+        <li>
+          <a
+            href="https://www.facebook.com"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Facebook"
+          >
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-facebook-square fa-w-14 fa-2x social-icon"
+              data-icon="facebook-square"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M448 80v352c0 26.5-21.5 48-48 48h-85.3V302.8h60.6l8.7-67.6h-69.3V192c0-19.6 5.4-32.9 33.5-32.9H384V98.7c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9H184v67.6h60.9V480H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
+            <span
+              className="sr-only"
+            >
+              Like edX on Facebook
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.twitter.com"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Twitter"
+          >
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-twitter-square fa-w-14 fa-2x social-icon"
+              data-icon="twitter-square"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
+            <span
+              className="sr-only"
+            >
+              Follow edX on Twitter
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.youtube.com"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Youtube"
+          >
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-youtube-square fa-w-14 fa-2x social-icon"
+              data-icon="youtube-square"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M186.8 202.1l95.2 54.1-95.2 54.1V202.1zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-42 176.3s0-59.6-7.6-88.2c-4.2-15.8-16.5-28.2-32.2-32.4C337.9 128 224 128 224 128s-113.9 0-142.2 7.7c-15.7 4.2-28 16.6-32.2 32.4-7.6 28.5-7.6 88.2-7.6 88.2s0 59.6 7.6 88.2c4.2 15.8 16.5 27.7 32.2 31.9C110.1 384 224 384 224 384s113.9 0 142.2-7.7c15.7-4.2 28-16.1 32.2-31.9 7.6-28.5 7.6-88.1 7.6-88.1z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
+            <span
+              className="sr-only"
+            >
+              Subscribe to the edX YouTube channel
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.linkedin.com"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            target="_blank"
+            title="LinkedIn"
+          >
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-linkedin fa-w-14 fa-2x social-icon"
+              data-icon="linkedin"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
+            <span
+              className="sr-only"
+            >
+              Follow edX on LinkedIn
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://reddit.com"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Reddit"
+          >
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-reddit-square fa-w-14 fa-2x social-icon"
+              data-icon="reddit-square"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M283.2 345.5c2.7 2.7 2.7 6.8 0 9.2-24.5 24.5-93.8 24.6-118.4 0-2.7-2.4-2.7-6.5 0-9.2 2.4-2.4 6.5-2.4 8.9 0 18.7 19.2 81 19.6 100.5 0 2.4-2.3 6.6-2.3 9 0zm-91.3-53.8c0-14.9-11.9-26.8-26.5-26.8-14.9 0-26.8 11.9-26.8 26.8 0 14.6 11.9 26.5 26.8 26.5 14.6 0 26.5-11.9 26.5-26.5zm90.7-26.8c-14.6 0-26.5 11.9-26.5 26.8 0 14.6 11.9 26.5 26.5 26.5 14.9 0 26.8-11.9 26.8-26.5 0-14.9-11.9-26.8-26.8-26.8zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-99.7 140.6c-10.1 0-19 4.2-25.6 10.7-24.1-16.7-56.5-27.4-92.5-28.6l18.7-84.2 59.5 13.4c0 14.6 11.9 26.5 26.5 26.5 14.9 0 26.8-12.2 26.8-26.8 0-14.6-11.9-26.8-26.8-26.8-10.4 0-19.3 6.2-23.8 14.9l-65.7-14.6c-3.3-.9-6.5 1.5-7.4 4.8l-20.5 92.8c-35.7 1.5-67.8 12.2-91.9 28.9-6.5-6.8-15.8-11-25.9-11-37.5 0-49.8 50.4-15.5 67.5-1.2 5.4-1.8 11-1.8 16.7 0 56.5 63.7 102.3 141.9 102.3 78.5 0 142.2-45.8 142.2-102.3 0-5.7-.6-11.6-2.1-17 33.6-17.2 21.2-67.2-16.1-67.2z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
+            <span
+              className="sr-only"
+            >
+              Subscribe to the edX subreddit
+            </span>
+          </a>
+        </li>
+      </ul>
+      <ul
+        className="d-flex flex-row justify-content-between list-unstyled max-width-264 p-0 mb-5"
+      >
+        <li>
+          <a
+            href="https://store.apple.com"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <img
+              alt="Download the edX mobile app from the Apple App Store"
+              className="max-height-39"
+              src="https://prod-edxapp.edx-cdn.org/static/images/app/app_store_badge_135x40.d0558d910630.svg"
+            />
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://play.google.com"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <img
+              alt="Download the edX mobile app from Google Play"
+              className="max-height-39"
+              src="https://prod-edxapp.edx-cdn.org/static/images/app/google_play_badge_45.6ea466e328da.png"
+            />
+          </a>
+        </li>
+      </ul>
+      <p>
+        © 2012–2019 edX Inc.
+        <br />
+        EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 深圳市恒宇博科技有限公司 
+        <a
+          href="http://www.beian.miit.gov.cn"
+        >
+          粤ICP备17044299号-2
+        </a>
+      </p>
+    </div>
+  </div>
+</footer>
+`;
+
+exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
+<footer
+  aria-label="Page Footer"
+  className="footer d-flex justify-content-center border-top py-3 px-4"
+  role="contentinfo"
+>
+  <div
+    className="max-width-1180 d-grid"
+  >
+    <div
+      className="area-1"
+    >
+      <a
+        aria-label="edX Home"
+        href="https://www.example.com"
+      >
+        <img
+          alt="edx Logo"
+          src="test-file-stub"
+        />
+      </a>
+      <div
+        className="i18n d-flex mt-2"
+      >
+        <form
+          className="d-flex align-items-start"
+          onSubmit={[Function]}
+        >
+          <label
+            htmlFor="site-footer-language-select"
+          >
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-language fa-w-20 fa-2x text-primary"
+              data-icon="language"
+              data-prefix="fas"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 640 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M152.1 236.2c-3.5-12.1-7.8-33.2-7.8-33.2h-.5s-4.3 21.1-7.8 33.2l-11.1 37.5H163zM616 96H336v320h280c13.3 0 24-10.7 24-24V120c0-13.3-10.7-24-24-24zm-24 120c0 6.6-5.4 12-12 12h-11.4c-6.9 23.6-21.7 47.4-42.7 69.9 8.4 6.4 17.1 12.5 26.1 18 5.5 3.4 7.3 10.5 4.1 16.2l-7.9 13.9c-3.4 5.9-10.9 7.8-16.7 4.3-12.6-7.8-24.5-16.1-35.4-24.9-10.9 8.7-22.7 17.1-35.4 24.9-5.8 3.5-13.3 1.6-16.7-4.3l-7.9-13.9c-3.2-5.6-1.4-12.8 4.2-16.2 9.3-5.7 18-11.7 26.1-18-7.9-8.4-14.9-17-21-25.7-4-5.7-2.2-13.6 3.7-17.1l6.5-3.9 7.3-4.3c5.4-3.2 12.4-1.7 16 3.4 5 7 10.8 14 17.4 20.9 13.5-14.2 23.8-28.9 30-43.2H412c-6.6 0-12-5.4-12-12v-16c0-6.6 5.4-12 12-12h64v-16c0-6.6 5.4-12 12-12h16c6.6 0 12 5.4 12 12v16h64c6.6 0 12 5.4 12 12zM0 120v272c0 13.3 10.7 24 24 24h280V96H24c-13.3 0-24 10.7-24 24zm58.9 216.1L116.4 167c1.7-4.9 6.2-8.1 11.4-8.1h32.5c5.1 0 9.7 3.3 11.4 8.1l57.5 169.1c2.6 7.8-3.1 15.9-11.4 15.9h-22.9a12 12 0 0 1-11.5-8.6l-9.4-31.9h-60.2l-9.1 31.8c-1.5 5.1-6.2 8.7-11.5 8.7H70.3c-8.2 0-14-8.1-11.4-15.9z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
+            <div
+              className="sr-only"
+            >
+              Choose Language
+            </div>
+          </label>
+          <select
+            className="mx-2 mt-1"
+            defaultValue="en"
+            id="site-footer-language-select"
+            name="site-footer-language-select"
+          >
+            <option
+              value="en"
+            >
+              English
+            </option>
+            <option
+              value="es-419"
+            >
+              español
+            </option>
+          </select>
+          <button
+            className="mt-1"
+            type="submit"
+          >
+            Apply
+          </button>
+        </form>
+      </div>
+    </div>
+    <div
+      className="area-2"
+    >
+      <h2>
+        edX
+      </h2>
+      <ul
+        className="list-unstyled p-0 m-0"
+      >
+        <li>
+          <a
+            href="https://www.example.com/about-us"
+          >
+            About
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://business.edx.org/?utm_test=utm_test_value"
+          >
+            edX for Business
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/affiliate-program"
+          >
+            Affiliates
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/open"
+          >
+            Open edX
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/careers"
+          >
+            Careers
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/news-announcements"
+          >
+            News
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div
+      className="area-3"
+    >
+      <h2>
+        Legal
+      </h2>
+      <ul
+        className="list-unstyled p-0 m-0"
+      >
+        <li>
+          <a
+            href="https://www.example.com/terms-of-service"
+          >
+            Terms of Service & Honor Code
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/privacy-policy"
+          >
+            Privacy Policy
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/accessibility"
+          >
+            Accessibility Policy
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/trademarks"
+          >
+            Trademark Policy
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/sitemap"
+          >
+            Sitemap
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div
+      className="area-4"
+    >
+      <h2>
+        Connect
+      </h2>
+      <ul
+        className="list-unstyled p-0 m-0"
+      >
+        <li>
+          <a
+            href="https://www.example.com/blog"
+          >
+            Blog
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/contact"
+          >
+            Contact Us
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/support"
+          >
+            Help Center
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/media-kit"
+          >
+            Media Kit
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/donate"
+          >
+            Donate
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div
+      className="area-5"
+    >
+      <ul
+        className="d-flex flex-row justify-content-between list-unstyled max-width-222 p-0 mb-4"
+      >
+        <li>
+          <a
+            href="https://www.facebook.com"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Facebook"
+          >
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-facebook-square fa-w-14 fa-2x social-icon"
+              data-icon="facebook-square"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M448 80v352c0 26.5-21.5 48-48 48h-85.3V302.8h60.6l8.7-67.6h-69.3V192c0-19.6 5.4-32.9 33.5-32.9H384V98.7c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9H184v67.6h60.9V480H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
+            <span
+              className="sr-only"
+            >
+              Like edX on Facebook
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.twitter.com"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Twitter"
+          >
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-twitter-square fa-w-14 fa-2x social-icon"
+              data-icon="twitter-square"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
+            <span
+              className="sr-only"
+            >
+              Follow edX on Twitter
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.youtube.com"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Youtube"
+          >
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-youtube-square fa-w-14 fa-2x social-icon"
+              data-icon="youtube-square"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M186.8 202.1l95.2 54.1-95.2 54.1V202.1zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-42 176.3s0-59.6-7.6-88.2c-4.2-15.8-16.5-28.2-32.2-32.4C337.9 128 224 128 224 128s-113.9 0-142.2 7.7c-15.7 4.2-28 16.6-32.2 32.4-7.6 28.5-7.6 88.2-7.6 88.2s0 59.6 7.6 88.2c4.2 15.8 16.5 27.7 32.2 31.9C110.1 384 224 384 224 384s113.9 0 142.2-7.7c15.7-4.2 28-16.1 32.2-31.9 7.6-28.5 7.6-88.1 7.6-88.1z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
+            <span
+              className="sr-only"
+            >
+              Subscribe to the edX YouTube channel
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.linkedin.com"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            target="_blank"
+            title="LinkedIn"
+          >
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-linkedin fa-w-14 fa-2x social-icon"
+              data-icon="linkedin"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
+            <span
+              className="sr-only"
+            >
+              Follow edX on LinkedIn
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://reddit.com"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Reddit"
+          >
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-reddit-square fa-w-14 fa-2x social-icon"
+              data-icon="reddit-square"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M283.2 345.5c2.7 2.7 2.7 6.8 0 9.2-24.5 24.5-93.8 24.6-118.4 0-2.7-2.4-2.7-6.5 0-9.2 2.4-2.4 6.5-2.4 8.9 0 18.7 19.2 81 19.6 100.5 0 2.4-2.3 6.6-2.3 9 0zm-91.3-53.8c0-14.9-11.9-26.8-26.5-26.8-14.9 0-26.8 11.9-26.8 26.8 0 14.6 11.9 26.5 26.8 26.5 14.6 0 26.5-11.9 26.5-26.5zm90.7-26.8c-14.6 0-26.5 11.9-26.5 26.8 0 14.6 11.9 26.5 26.5 26.5 14.9 0 26.8-11.9 26.8-26.5 0-14.9-11.9-26.8-26.8-26.8zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-99.7 140.6c-10.1 0-19 4.2-25.6 10.7-24.1-16.7-56.5-27.4-92.5-28.6l18.7-84.2 59.5 13.4c0 14.6 11.9 26.5 26.5 26.5 14.9 0 26.8-12.2 26.8-26.8 0-14.6-11.9-26.8-26.8-26.8-10.4 0-19.3 6.2-23.8 14.9l-65.7-14.6c-3.3-.9-6.5 1.5-7.4 4.8l-20.5 92.8c-35.7 1.5-67.8 12.2-91.9 28.9-6.5-6.8-15.8-11-25.9-11-37.5 0-49.8 50.4-15.5 67.5-1.2 5.4-1.8 11-1.8 16.7 0 56.5 63.7 102.3 141.9 102.3 78.5 0 142.2-45.8 142.2-102.3 0-5.7-.6-11.6-2.1-17 33.6-17.2 21.2-67.2-16.1-67.2z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
+            <span
+              className="sr-only"
+            >
+              Subscribe to the edX subreddit
+            </span>
+          </a>
+        </li>
+      </ul>
+      <p>
+        © 2012–2019 edX Inc.
+        <br />
+        EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 深圳市恒宇博科技有限公司 
+        <a
+          href="http://www.beian.miit.gov.cn"
+        >
+          粤ICP备17044299号-2
+        </a>
+      </p>
+    </div>
+  </div>
+</footer>
+`;
+
+exports[`<SiteFooter /> renders correctly does not render social links 1`] = `
+<footer
+  aria-label="Page Footer"
+  className="footer d-flex justify-content-center border-top py-3 px-4"
+  role="contentinfo"
+>
+  <div
+    className="max-width-1180 d-grid"
+  >
+    <div
+      className="area-1"
+    >
+      <a
+        aria-label="edX Home"
+        href="https://www.example.com"
+      >
+        <img
+          alt="edx Logo"
+          src="test-file-stub"
+        />
+      </a>
+      <div
+        className="i18n d-flex mt-2"
+      >
+        <form
+          className="d-flex align-items-start"
+          onSubmit={[Function]}
+        >
+          <label
+            htmlFor="site-footer-language-select"
+          >
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-language fa-w-20 fa-2x text-primary"
+              data-icon="language"
+              data-prefix="fas"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 640 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M152.1 236.2c-3.5-12.1-7.8-33.2-7.8-33.2h-.5s-4.3 21.1-7.8 33.2l-11.1 37.5H163zM616 96H336v320h280c13.3 0 24-10.7 24-24V120c0-13.3-10.7-24-24-24zm-24 120c0 6.6-5.4 12-12 12h-11.4c-6.9 23.6-21.7 47.4-42.7 69.9 8.4 6.4 17.1 12.5 26.1 18 5.5 3.4 7.3 10.5 4.1 16.2l-7.9 13.9c-3.4 5.9-10.9 7.8-16.7 4.3-12.6-7.8-24.5-16.1-35.4-24.9-10.9 8.7-22.7 17.1-35.4 24.9-5.8 3.5-13.3 1.6-16.7-4.3l-7.9-13.9c-3.2-5.6-1.4-12.8 4.2-16.2 9.3-5.7 18-11.7 26.1-18-7.9-8.4-14.9-17-21-25.7-4-5.7-2.2-13.6 3.7-17.1l6.5-3.9 7.3-4.3c5.4-3.2 12.4-1.7 16 3.4 5 7 10.8 14 17.4 20.9 13.5-14.2 23.8-28.9 30-43.2H412c-6.6 0-12-5.4-12-12v-16c0-6.6 5.4-12 12-12h64v-16c0-6.6 5.4-12 12-12h16c6.6 0 12 5.4 12 12v16h64c6.6 0 12 5.4 12 12zM0 120v272c0 13.3 10.7 24 24 24h280V96H24c-13.3 0-24 10.7-24 24zm58.9 216.1L116.4 167c1.7-4.9 6.2-8.1 11.4-8.1h32.5c5.1 0 9.7 3.3 11.4 8.1l57.5 169.1c2.6 7.8-3.1 15.9-11.4 15.9h-22.9a12 12 0 0 1-11.5-8.6l-9.4-31.9h-60.2l-9.1 31.8c-1.5 5.1-6.2 8.7-11.5 8.7H70.3c-8.2 0-14-8.1-11.4-15.9z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
+            <div
+              className="sr-only"
+            >
+              Choose Language
+            </div>
+          </label>
+          <select
+            className="mx-2 mt-1"
+            defaultValue="en"
+            id="site-footer-language-select"
+            name="site-footer-language-select"
+          >
+            <option
+              value="en"
+            >
+              English
+            </option>
+            <option
+              value="es-419"
+            >
+              español
+            </option>
+          </select>
+          <button
+            className="mt-1"
+            type="submit"
+          >
+            Apply
+          </button>
+        </form>
+      </div>
+    </div>
+    <div
+      className="area-2"
+    >
+      <h2>
+        edX
+      </h2>
+      <ul
+        className="list-unstyled p-0 m-0"
+      >
+        <li>
+          <a
+            href="https://www.example.com/about-us"
+          >
+            About
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://business.edx.org/?utm_test=utm_test_value"
+          >
+            edX for Business
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/affiliate-program"
+          >
+            Affiliates
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/open"
+          >
+            Open edX
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/careers"
+          >
+            Careers
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/news-announcements"
+          >
+            News
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div
+      className="area-3"
+    >
+      <h2>
+        Legal
+      </h2>
+      <ul
+        className="list-unstyled p-0 m-0"
+      >
+        <li>
+          <a
+            href="https://www.example.com/terms-of-service"
+          >
+            Terms of Service & Honor Code
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/privacy-policy"
+          >
+            Privacy Policy
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/accessibility"
+          >
+            Accessibility Policy
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/trademarks"
+          >
+            Trademark Policy
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/sitemap"
+          >
+            Sitemap
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div
+      className="area-4"
+    >
+      <h2>
+        Connect
+      </h2>
+      <ul
+        className="list-unstyled p-0 m-0"
+      >
+        <li>
+          <a
+            href="https://www.example.com/blog"
+          >
+            Blog
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/contact"
+          >
+            Contact Us
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/support"
+          >
+            Help Center
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/media-kit"
+          >
+            Media Kit
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/donate"
+          >
+            Donate
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div
+      className="area-5"
+    >
+      <ul
+        className="d-flex flex-row justify-content-between list-unstyled max-width-264 p-0 mb-5"
+      >
+        <li>
+          <a
+            href="https://store.apple.com"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <img
+              alt="Download the edX mobile app from the Apple App Store"
+              className="max-height-39"
+              src="https://prod-edxapp.edx-cdn.org/static/images/app/app_store_badge_135x40.d0558d910630.svg"
+            />
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://play.google.com"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <img
+              alt="Download the edX mobile app from Google Play"
+              className="max-height-39"
+              src="https://prod-edxapp.edx-cdn.org/static/images/app/google_play_badge_45.6ea466e328da.png"
+            />
+          </a>
+        </li>
+      </ul>
+      <p>
+        © 2012–2019 edX Inc.
+        <br />
+        EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 深圳市恒宇博科技有限公司 
+        <a
+          href="http://www.beian.miit.gov.cn"
+        >
+          粤ICP备17044299号-2
+        </a>
+      </p>
+    </div>
+  </div>
+</footer>
+`;
+
+exports[`<SiteFooter /> renders correctly renders with social and mobile links 1`] = `
+<footer
+  aria-label="Page Footer"
+  className="footer d-flex justify-content-center border-top py-3 px-4"
+  role="contentinfo"
+>
+  <div
+    className="max-width-1180 d-grid"
+  >
+    <div
+      className="area-1"
+    >
+      <a
+        aria-label="edX Home"
+        href="https://www.example.com"
+      >
+        <img
+          alt="edx Logo"
+          src="test-file-stub"
+        />
+      </a>
+      <div
+        className="i18n d-flex mt-2"
+      >
+        <form
+          className="d-flex align-items-start"
+          onSubmit={[Function]}
+        >
+          <label
+            htmlFor="site-footer-language-select"
+          >
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-language fa-w-20 fa-2x text-primary"
+              data-icon="language"
+              data-prefix="fas"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 640 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M152.1 236.2c-3.5-12.1-7.8-33.2-7.8-33.2h-.5s-4.3 21.1-7.8 33.2l-11.1 37.5H163zM616 96H336v320h280c13.3 0 24-10.7 24-24V120c0-13.3-10.7-24-24-24zm-24 120c0 6.6-5.4 12-12 12h-11.4c-6.9 23.6-21.7 47.4-42.7 69.9 8.4 6.4 17.1 12.5 26.1 18 5.5 3.4 7.3 10.5 4.1 16.2l-7.9 13.9c-3.4 5.9-10.9 7.8-16.7 4.3-12.6-7.8-24.5-16.1-35.4-24.9-10.9 8.7-22.7 17.1-35.4 24.9-5.8 3.5-13.3 1.6-16.7-4.3l-7.9-13.9c-3.2-5.6-1.4-12.8 4.2-16.2 9.3-5.7 18-11.7 26.1-18-7.9-8.4-14.9-17-21-25.7-4-5.7-2.2-13.6 3.7-17.1l6.5-3.9 7.3-4.3c5.4-3.2 12.4-1.7 16 3.4 5 7 10.8 14 17.4 20.9 13.5-14.2 23.8-28.9 30-43.2H412c-6.6 0-12-5.4-12-12v-16c0-6.6 5.4-12 12-12h64v-16c0-6.6 5.4-12 12-12h16c6.6 0 12 5.4 12 12v16h64c6.6 0 12 5.4 12 12zM0 120v272c0 13.3 10.7 24 24 24h280V96H24c-13.3 0-24 10.7-24 24zm58.9 216.1L116.4 167c1.7-4.9 6.2-8.1 11.4-8.1h32.5c5.1 0 9.7 3.3 11.4 8.1l57.5 169.1c2.6 7.8-3.1 15.9-11.4 15.9h-22.9a12 12 0 0 1-11.5-8.6l-9.4-31.9h-60.2l-9.1 31.8c-1.5 5.1-6.2 8.7-11.5 8.7H70.3c-8.2 0-14-8.1-11.4-15.9z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
+            <div
+              className="sr-only"
+            >
+              Choose Language
+            </div>
+          </label>
+          <select
+            className="mx-2 mt-1"
+            defaultValue="en"
+            id="site-footer-language-select"
+            name="site-footer-language-select"
+          >
+            <option
+              value="en"
+            >
+              English
+            </option>
+            <option
+              value="es-419"
+            >
+              español
+            </option>
+          </select>
+          <button
+            className="mt-1"
+            type="submit"
+          >
+            Apply
+          </button>
+        </form>
+      </div>
+    </div>
+    <div
+      className="area-2"
+    >
+      <h2>
+        edX
+      </h2>
+      <ul
+        className="list-unstyled p-0 m-0"
+      >
+        <li>
+          <a
+            href="https://www.example.com/about-us"
+          >
+            About
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://business.edx.org/?utm_test=utm_test_value"
+          >
+            edX for Business
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/affiliate-program"
+          >
+            Affiliates
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/open"
+          >
+            Open edX
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/careers"
+          >
+            Careers
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/news-announcements"
+          >
+            News
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div
+      className="area-3"
+    >
+      <h2>
+        Legal
+      </h2>
+      <ul
+        className="list-unstyled p-0 m-0"
+      >
+        <li>
+          <a
+            href="https://www.example.com/terms-of-service"
+          >
+            Terms of Service & Honor Code
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/privacy-policy"
+          >
+            Privacy Policy
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/accessibility"
+          >
+            Accessibility Policy
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/trademarks"
+          >
+            Trademark Policy
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/sitemap"
+          >
+            Sitemap
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div
+      className="area-4"
+    >
+      <h2>
+        Connect
+      </h2>
+      <ul
+        className="list-unstyled p-0 m-0"
+      >
+        <li>
+          <a
+            href="https://www.example.com/blog"
+          >
+            Blog
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/contact"
+          >
+            Contact Us
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/support"
+          >
+            Help Center
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/media-kit"
+          >
+            Media Kit
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/donate"
+          >
+            Donate
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div
+      className="area-5"
+    >
+      <ul
+        className="d-flex flex-row justify-content-between list-unstyled max-width-222 p-0 mb-4"
+      >
+        <li>
+          <a
+            href="https://www.facebook.com"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Facebook"
+          >
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-facebook-square fa-w-14 fa-2x social-icon"
+              data-icon="facebook-square"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M448 80v352c0 26.5-21.5 48-48 48h-85.3V302.8h60.6l8.7-67.6h-69.3V192c0-19.6 5.4-32.9 33.5-32.9H384V98.7c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9H184v67.6h60.9V480H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
+            <span
+              className="sr-only"
+            >
+              Like edX on Facebook
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.twitter.com"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Twitter"
+          >
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-twitter-square fa-w-14 fa-2x social-icon"
+              data-icon="twitter-square"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
+            <span
+              className="sr-only"
+            >
+              Follow edX on Twitter
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.youtube.com"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Youtube"
+          >
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-youtube-square fa-w-14 fa-2x social-icon"
+              data-icon="youtube-square"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M186.8 202.1l95.2 54.1-95.2 54.1V202.1zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-42 176.3s0-59.6-7.6-88.2c-4.2-15.8-16.5-28.2-32.2-32.4C337.9 128 224 128 224 128s-113.9 0-142.2 7.7c-15.7 4.2-28 16.6-32.2 32.4-7.6 28.5-7.6 88.2-7.6 88.2s0 59.6 7.6 88.2c4.2 15.8 16.5 27.7 32.2 31.9C110.1 384 224 384 224 384s113.9 0 142.2-7.7c15.7-4.2 28-16.1 32.2-31.9 7.6-28.5 7.6-88.1 7.6-88.1z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
+            <span
+              className="sr-only"
+            >
+              Subscribe to the edX YouTube channel
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.linkedin.com"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            target="_blank"
+            title="LinkedIn"
+          >
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-linkedin fa-w-14 fa-2x social-icon"
+              data-icon="linkedin"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
+            <span
+              className="sr-only"
+            >
+              Follow edX on LinkedIn
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://reddit.com"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Reddit"
+          >
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-reddit-square fa-w-14 fa-2x social-icon"
+              data-icon="reddit-square"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M283.2 345.5c2.7 2.7 2.7 6.8 0 9.2-24.5 24.5-93.8 24.6-118.4 0-2.7-2.4-2.7-6.5 0-9.2 2.4-2.4 6.5-2.4 8.9 0 18.7 19.2 81 19.6 100.5 0 2.4-2.3 6.6-2.3 9 0zm-91.3-53.8c0-14.9-11.9-26.8-26.5-26.8-14.9 0-26.8 11.9-26.8 26.8 0 14.6 11.9 26.5 26.8 26.5 14.6 0 26.5-11.9 26.5-26.5zm90.7-26.8c-14.6 0-26.5 11.9-26.5 26.8 0 14.6 11.9 26.5 26.5 26.5 14.9 0 26.8-11.9 26.8-26.5 0-14.9-11.9-26.8-26.8-26.8zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-99.7 140.6c-10.1 0-19 4.2-25.6 10.7-24.1-16.7-56.5-27.4-92.5-28.6l18.7-84.2 59.5 13.4c0 14.6 11.9 26.5 26.5 26.5 14.9 0 26.8-12.2 26.8-26.8 0-14.6-11.9-26.8-26.8-26.8-10.4 0-19.3 6.2-23.8 14.9l-65.7-14.6c-3.3-.9-6.5 1.5-7.4 4.8l-20.5 92.8c-35.7 1.5-67.8 12.2-91.9 28.9-6.5-6.8-15.8-11-25.9-11-37.5 0-49.8 50.4-15.5 67.5-1.2 5.4-1.8 11-1.8 16.7 0 56.5 63.7 102.3 141.9 102.3 78.5 0 142.2-45.8 142.2-102.3 0-5.7-.6-11.6-2.1-17 33.6-17.2 21.2-67.2-16.1-67.2z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
+            <span
+              className="sr-only"
+            >
+              Subscribe to the edX subreddit
+            </span>
+          </a>
+        </li>
+      </ul>
+      <ul
+        className="d-flex flex-row justify-content-between list-unstyled max-width-264 p-0 mb-5"
+      >
+        <li>
+          <a
+            href="https://store.apple.com"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <img
+              alt="Download the edX mobile app from the Apple App Store"
+              className="max-height-39"
+              src="https://prod-edxapp.edx-cdn.org/static/images/app/app_store_badge_135x40.d0558d910630.svg"
+            />
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://play.google.com"
+            onClick={[Function]}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <img
+              alt="Download the edX mobile app from Google Play"
+              className="max-height-39"
+              src="https://prod-edxapp.edx-cdn.org/static/images/app/google_play_badge_45.6ea466e328da.png"
+            />
+          </a>
+        </li>
+      </ul>
+      <p>
+        © 2012–2019 edX Inc.
+        <br />
+        EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 深圳市恒宇博科技有限公司 
+        <a
+          href="http://www.beian.miit.gov.cn"
+        >
+          粤ICP备17044299号-2
+        </a>
+      </p>
+    </div>
+  </div>
+</footer>
+`;
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -0,0 +1,3 @@
+import SiteFooter from './SiteFooter';
+
+export default SiteFooter;
--- a/src/lib/setupTest.js
+++ b/src/lib/setupTest.js
@@ -0,0 +1,4 @@
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });
--- a/src/setupTest.js
+++ b/src/setupTest.js
@@ -1,22 +0,0 @@
-// 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';
-process.env.ENABLE_ACCESSIBILITY_PAGE = 'false';
--- a/webpack.dev.config.js
+++ b/webpack.dev.config.js
@@ -1,15 +0,0 @@
-const path = require('path');
-const { createConfig } = require('@openedx/frontend-build');
-
-module.exports = createConfig('webpack-dev', {
-  entry: path.resolve(__dirname, 'example'),
-  output: {
-    path: path.resolve(__dirname, 'example/dist'),
-    publicPath: '/',
-  },
-  resolve: {
-    alias: {
-      '@edx/frontend-component-footer': path.resolve(__dirname, 'src'),
-    },
-  },
-});
Author	SHA1	Message	Date
David Joy	9667a5cee4	fix: exporting logo and better proptypes	2019-07-03 15:42:48 -04:00
David Joy	9df6e12174	refactor: dev server, config, and babel the build BREAKING CHANGE: Defensive breaking change as this drastically changes the repo and how it gets consumed.	2019-07-03 11:10:59 -04:00