feat: make this the open edx footer

BREAKING CHANGE: This footer now serves as the Open edX footer. For the edX footer see edx/frontend-component-footer-edx on github
feat: refactor build and dev server
2019-09-27 10:19:34 -04:00 · 2019-09-26 18:11:03 -04:00 · 2019-09-26 15:35:05 -04:00
35 changed files with 9955 additions and 19651 deletions
--- a/.babelrc
+++ b/.babelrc
@@ -1,28 +0,0 @@
-{
-  "presets": [
-    ["env", {
-      "targets": {
-        "browsers": ["last 2 versions", "ie 11"]
-      }
-    }],
-    "babel-preset-react"
-  ],
-  "plugins": [
-    "transform-object-rest-spread"
-  ],
-  "env": {
-    "test": {
-      "plugins": [
-        "rewire"
-      ]
-    },
-    "i18n": {
-      "plugins": [
-        ["react-intl", {
-          "messagesDir": "./temp/babel-plugin-react-intl",
-          "moduleSourceName": "@edx/frontend-i18n"
-        }]
-      ]
-    }
-  }
-}
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,19 +0,0 @@
-{
-    "extends": "eslint-config-edx",
-    "rules": {
-        "import/no-extraneous-dependencies": [
-            "error",
-            {
-                "devDependencies": [
-                    "webpack.config.js",
-                    "src/tests/setupTest.js",
-                    "**/*.test.jsx",
-                    "**/*.test.js"
-                ]
-            }
-        ]
-    },
-    "env": {
-        "jest": true
-    }
-}
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
+.DS_Store
 coverage
 dist
 node_modules
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,9 +1,5 @@
 language: node_js
-node_js:
-  - 8
-cache:
-  directories:
-    - "~/.npm"
+node_js: 12
 install:
  - npm install
 script:
@@ -11,9 +7,8 @@ script:
  - npm run i18n_extract
  - npm run test
  - npm run build
-  - npm run is-es5
 after_success:
-  - npm run travis-deploy-once "npm run semantic-release"
+  - npx semantic-release
  - npm run coveralls
 env:
  global:
--- a/8
+++ b/8
@@ -10,6 +10,14 @@ tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transi
 # This directory must match .babelrc .
 transifex_temp = ./temp/babel-plugin-react-intl

+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 install

--- a/README.rst
+++ b/README.rst
@@ -5,9 +5,7 @@ frontend-component-footer
 |semantic-release|

 frontend-component-footer is a library containing a site footer
-component for use when building edX frontend applications.
-
-At this time, this component is hard-coded to match the legacy LMS site footer, including all of its links. As implemented, this component should probably be called the ``frontend-component-lms-footer``.
+component for use when building Open edX frontend applications.

 Usage
 -----
@@ -16,9 +14,30 @@ 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/index.jsx <src/index.jsx>`__ for an example
-of how the SiteFooter component can be specified.
+Component Usage::
+
+   import Footer from '@edx/frontend-component-footer';
+   import footerMessages from '@edx/frontend-component-footer/src/i18n/index';
+
+   ...
+
+   <Footer
+      handleAllTrackEvents={(eventName, properties) => {/* track click event */}}
+      onLanguageSelected={(languageCode) => {/* set language */}}
+      supportedLanguages={[
+         { label: 'English', value: 'en'},
+         { label: 'Español', value: 'es' },
+      ]}
+   />
+
+- handleAllTrackEvents (required)
+- onLanguageSelected (optional)
+- supportedLanguages (optional)
+
+Styles (project.scss)::
+
+   @import '@edx/frontend-component-footer/src/footer.scss';
+

 Requirements
 ------------
--- a/babel.config.js
+++ b/babel.config.js
@@ -0,0 +1,35 @@
+// These preset packages are included by frontend-build.
+// TODO: Add to frontend-build and leverage that config.
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        modules: false,
+      },
+    ],
+    '@babel/preset-react',
+  ],
+  plugins: [
+    '@babel/plugin-proposal-object-rest-spread',
+    '@babel/plugin-proposal-class-properties',
+  ],
+  env: {
+    i18n: {
+      plugins: [
+        [
+          'react-intl',
+          {
+            messagesDir: './temp/babel-plugin-react-intl',
+            moduleSourceName: '@edx/frontend-i18n',
+          },
+        ],
+      ],
+    },
+    test: {
+      presets: [
+        '@babel/preset-env',
+      ],
+    },
+  },
+};
--- a/config/webpack.common.config.js
+++ b/config/webpack.common.config.js
@@ -1,15 +0,0 @@
-// This is the common Webpack config. The dev and prod Webpack configs both
-// inherit config defined here.
-const path = require('path');
-
-module.exports = {
-  entry: {
-    app: path.resolve(__dirname, '../src/index.jsx'),
-  },
-  output: {
-    path: path.resolve(__dirname, '../dist'),
-  },
-  resolve: {
-    extensions: ['.js', '.jsx'],
-  },
-};
--- a/config/webpack.dev.config.js
+++ b/config/webpack.dev.config.js
@@ -1,115 +0,0 @@
-// This is the dev Webpack config. All settings here should prefer a fast build
-// time at the expense of creating larger, unoptimized bundles.
-const Merge = require('webpack-merge'); // eslint-disable-line import/no-extraneous-dependencies
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin'); // eslint-disable-line import/no-extraneous-dependencies
-const webpack = require('webpack'); // eslint-disable-line import/no-extraneous-dependencies
-
-const commonConfig = require('./webpack.common.config.js');
-
-module.exports = Merge.smart(commonConfig, {
-  mode: 'development',
-  entry: [
-    // enable react's custom hot dev client so we get errors reported in the browser
-    require.resolve('react-dev-utils/webpackHotDevClient'),
-    path.resolve(__dirname, '../src/index.jsx'),
-  ],
-  module: {
-    // Specify file-by-file rules to Webpack. Some file-types need a particular kind of loader.
-    rules: [
-      // The babel-loader transforms newer ES2015+ syntax to older ES5 for older browsers.
-      // Babel is configured with the .babelrc file at the root of the project.
-      {
-        test: /\.(js|jsx)$/,
-        include: [
-          path.resolve(__dirname, '../src'),
-        ],
-        loader: 'babel-loader',
-        options: {
-          // Caches result of loader to the filesystem. Future builds will attempt to read from the
-          // cache to avoid needing to run the expensive recompilation process on each run.
-          cacheDirectory: true,
-        },
-      },
-      // We are not extracting CSS from the javascript bundles in development because extracting
-      // prevents hot-reloading from working, it increases build time, and we don't care about
-      // flash-of-unstyled-content issues in development.
-      {
-        test: /(.scss|.css)$/,
-        use: [
-          'style-loader', // creates style nodes from JS strings
-          {
-            loader: 'css-loader', // translates CSS into CommonJS
-            options: {
-              sourceMap: true,
-            },
-          },
-          {
-            loader: 'sass-loader', // compiles Sass to CSS
-            options: {
-              sourceMap: true,
-              includePaths: [
-                path.join(__dirname, '../node_modules'),
-                path.join(__dirname, '../src'),
-              ],
-            },
-          },
-        ],
-      },
-      // Webpack, by default, uses the url-loader for images and fonts that are required/included by
-      // files it processes, which just base64 encodes them and inlines them in the javascript
-      // bundles. This makes the javascript bundles ginormous and defeats caching so we will use the
-      // file-loader instead to copy the files directly to the output directory.
-      {
-        test: /\.(woff2?|ttf|svg|eot)(\?v=\d+\.\d+\.\d+)?$/,
-        loader: 'file-loader',
-      },
-      {
-        test: /\.(jpe?g|png|gif|ico)(\?v=\d+\.\d+\.\d+)?$/,
-        use: [
-          'file-loader',
-          {
-            loader: 'image-webpack-loader',
-            options: {
-              optimizationlevel: 7,
-              mozjpeg: {
-                progressive: true,
-              },
-              gifsicle: {
-                interlaced: false,
-              },
-              pngquant: {
-                quality: '65-90',
-                speed: 4,
-              },
-            },
-          },
-        ],
-      },
-    ],
-  },
-  // Specify additional processing or side-effects done on the Webpack output bundles as a whole.
-  plugins: [
-    // Generates an HTML file in the output directory.
-    new HtmlWebpackPlugin({
-      inject: true, // Appends script tags linking to the webpack bundles at the end of the body
-      template: path.resolve(__dirname, '../public/index.html'),
-    }),
-    new webpack.EnvironmentPlugin({
-      NODE_ENV: 'development',
-    }),
-    // when the --hot option is not passed in as part of the command
-    // the HotModuleReplacementPlugin has to be specified in the Webpack configuration
-    // https://webpack.js.org/configuration/dev-server/#devserver-hot
-    new webpack.HotModuleReplacementPlugin(),
-  ],
-  // This configures webpack-dev-server which serves bundles from memory and provides live
-  // reloading.
-  devServer: {
-    host: '0.0.0.0',
-    port: 3000,
-    historyApiFallback: true,
-    hot: true,
-    inline: true,
-  },
-});
--- a/config/webpack.prod.config.js
+++ b/config/webpack.prod.config.js
@@ -1,71 +0,0 @@
-// This is the prod Webpack config. All settings here should prefer smaller,
-// optimized bundles at the expense of a longer build time.
-const Merge = require('webpack-merge'); // eslint-disable-line import/no-extraneous-dependencies
-const commonConfig = require('./webpack.common.config.js');
-const path = require('path');
-const CleanWebpackPlugin = require('clean-webpack-plugin'); // eslint-disable-line import/no-extraneous-dependencies
-
-module.exports = Merge.smart(commonConfig, {
-  mode: 'production',
-  devtool: 'source-map',
-  entry: './src/lib/index.js',
-  output: {
-    path: path.resolve(__dirname, '../dist'),
-    library: 'frontend-component-footer',
-    libraryTarget: 'umd',
-    globalObject: 'typeof self !== \'undefined\' ? self : this',
-  },
-  resolve: {
-    extensions: ['.js', '.jsx'],
-    alias: {
-      react: path.resolve(__dirname, './node_modules/react'),
-      'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
-    },
-  },
-  externals: {
-    react: {
-      commonjs: 'react',
-      commonjs2: 'react',
-      amd: 'React',
-      root: 'React',
-    },
-    'react-dom': {
-      commonjs: 'react-dom',
-      commonjs2: 'react-dom',
-      amd: 'ReactDOM',
-      root: 'ReactDOM',
-    },
-    '@edx/frontend-i18n': {
-      commonjs: '@edx/frontend-i18n',
-      commonjs2: '@edx/frontend-i18n',
-      amd: '@edx/frontend-i18n',
-      root: '@edx/frontend-i18n',
-    },
-    '@edx/frontend-logging': {
-      commonjs: '@edx/frontend-logging',
-      commonjs2: '@edx/frontend-logging',
-      amd: '@edx/frontend-logging',
-      root: '@edx/frontend-logging',
-    },
-  },
-  plugins: [
-    // Cleans the dist directory before each build
-    new CleanWebpackPlugin(['dist'], {
-      root: path.join(__dirname, '../'),
-    }),
-  ],
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx)$/,
-        include: [
-          path.resolve(__dirname, '../src/lib'),
-        ],
-        exclude: /(node_modules)/,
-        use: [
-          { loader: 'babel-loader' },
-        ],
-      },
-    ],
-  },
-});
--- a/example/index.jsx
+++ b/example/index.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { render } from 'react-dom';
+import { IntlProvider } from '@edx/frontend-i18n';
+
+import './index.scss';
+import Footer from '../src';
+
+const App = () => (
+  <div>
+    <IntlProvider locale="en">
+      <Footer
+        /* eslint-disable-next-line no-unused-vars */
+        handleAllTrackEvents={(eventName, properties) => {}}
+        /* eslint-disable-next-line no-unused-vars */
+        onLanguageSelected={(languageCode) => {}}
+        supportedLanguages={[
+          { label: 'English', value: 'en' },
+          { label: 'Español', value: 'es' },
+        ]}
+      />
+    </IntlProvider>
+  </div>
+);
+
+render(<App />, document.getElementById('root'));
--- a/example/index.scss
+++ b/example/index.scss
@@ -0,0 +1,2 @@
+@import "~@edx/paragon/scss/core/core.scss";
+@import "../src/footer";
--- a/jest.config.js
+++ b/jest.config.js
@@ -0,0 +1,7 @@
+const { createConfig } = require('@edx/frontend-build');
+
+module.exports = createConfig('jest', {
+  setupFiles: [
+    '<rootDir>/src/setupTest.js',
+  ],
+});
--- a/openedx.yaml
+++ b/openedx.yaml
@@ -0,0 +1,8 @@
+# openedx.yaml
+
+---
+owner: edx/fedx-team
+tags:
+  - library
+  - component
+  - react
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -2,28 +2,22 @@
  "name": "@edx/frontend-component-footer",
  "version": "1.0.0-semantically-released",
  "description": "Site footer component for use when building edX frontend applications",
-  "main": "dist/main.js",
-  "module": "dist/main.js",
+  "main": "dist/index.js",
  "publishConfig": {
    "access": "public"
  },
  "scripts": {
-    "build": "NODE_ENV=production BABEL_ENV=production webpack  --config=config/webpack.prod.config.js",
-    "build:stats": "NODE_ENV=production BABEL_ENV=production webpack --config=config/webpack.prod.config.js --profile --progress --json > stats.json",
+    "build": "make build",
    "gc": "commit",
    "commitmsg": "commitlint -e $GIT_PARAMS",
    "coveralls": "cat ./coverage/lcov.info | coveralls",
-    "is-es5": "es-check es5 ./dist/*.js",
-    "i18n_extract": "BABEL_ENV=i18n babel src --quiet > /dev/null",
-    "lint": "eslint --ext .js --ext .jsx .",
+    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
    "precommit": "npm run lint",
    "prepublishOnly": "npm run build",
-    "semantic-release": "semantic-release",
-    "start": "NODE_ENV=development BABEL_ENV=development node_modules/.bin/webpack-dev-server --config=config/webpack.dev.config.js --progress",
-    "test": "jest --coverage",
-    "snapshot": "jest --updateSnapshot",
-    "travis-deploy-once": "travis-deploy-once",
-    "watch": "watch 'npm run build' ./src"
+    "start": "fedx-scripts webpack-dev-server --progress",
+    "test": "fedx-scripts jest --coverage",
+    "snapshot": "fedx-scripts jest --updateSnapshot"
  },
  "repository": {
    "type": "git",
@@ -40,80 +34,33 @@
    "@commitlint/config-angular": "^6.0.2",
    "@commitlint/prompt": "^6.0.2",
    "@commitlint/prompt-cli": "^6.0.2",
-    "@edx/edx-bootstrap": "^2.2.1",
+    "@edx/frontend-build": "^1.0.1",
    "@edx/frontend-i18n": "^2.1.0",
    "@edx/frontend-logging": "^2.0.2",
+    "@edx/paragon": "^7.1.3",
+    "coveralls": "^3.0.0",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "husky": "^0.14.3",
+    "prop-types": "^15.5.10",
+    "react": "^16.4.2",
+    "react-dom": "^16.2.0",
+    "react-test-renderer": "^16.6.0",
+    "reactifex": "^1.1.1"
+  },
+  "dependencies": {
    "@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-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.5",
-    "babel-plugin-react-intl": "^3.0.1",
-    "babel-plugin-rewire": "^1.2.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
-    "clean-webpack-plugin": "^0.1.19",
-    "coveralls": "^3.0.0",
-    "css-loader": "^0.28.9",
-    "enzyme": "^3.3.0",
-    "enzyme-adapter-react-16": "^1.1.1",
-    "es-check": "^5.0.0",
-    "eslint": "^5.2.0",
-    "eslint-config-edx": "^4.0.4",
-    "eslint-plugin-jsx-a11y": "^6.1.2",
-    "file-loader": "^1.1.9",
-    "glob": "^7.1.3",
-    "html-webpack-plugin": "^3.2.0",
-    "husky": "^0.14.3",
-    "image-webpack-loader": "^4.2.0",
-    "jest": "23.6.0",
-    "node-sass": "^4.7.2",
-    "prop-types": "^15.5.10",
-    "react": "^16.4.2",
-    "react-dev-utils": "^5.0.0",
-    "react-dom": "^16.2.0",
-    "react-test-renderer": "^16.6.0",
-    "reactifex": "^1.1.1",
-    "sass-loader": "^6.0.6",
-    "semantic-release": "^15.1.7",
-    "source-map-loader": "^0.2.1",
-    "style-loader": "^0.20.2",
-    "travis-deploy-once": "^5.0.0",
-    "watch": "^1.0.2",
-    "webpack": "^4.19.1",
-    "webpack-cli": "^3.1.0",
-    "webpack-dev-server": "^3.1.9",
-    "webpack-merge": "^4.2.1"
-  },
-  "dependencies": {
-    "query-string": "^5.1.1"
+    "@fortawesome/react-fontawesome": "^0.1.4"
  },
  "peerDependencies": {
    "@edx/frontend-i18n": "^2.1.0",
    "@edx/frontend-logging": "^2.0.2",
-    "@edx/paragon": "^4.2.4",
+    "@edx/paragon": "^7.1.3",
    "prop-types": "^15.5.10",
    "react": "^16.4.2",
    "react-dom": "^16.2.0"
-  },
-  "jest": {
-    "setupFiles": [
-      "./src/tests/setupTest.js"
-    ],
-    "collectCoverageFrom": [
-      "src/lib/**/*.{js,jsx}",
-      "!src/tests/setupTest.js",
-      "!src/index.js",
-      "!**/node_modules/**",
-      "!**/tests/**"
-    ],
-    "moduleNameMapper": {
-      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
-      "\\.(css|scss)$": "identity-obj-proxy"
-    }
  }
 }
--- a/public/index.html
+++ b/public/index.html
@@ -1,9 +1,9 @@
 <!doctype html>
-<html lang="en-us">
+<html lang="en-us" dir="ltr">
  <head>
-      <title>Footer | edX</title>
+      <title>Footer</title>
      <meta charset="utf-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">  
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div id="root"></div>
--- a/src/_footer.scss
+++ b/src/_footer.scss
@@ -0,0 +1,5 @@
+$gray-footer: #fcfcfc !default;
+
+.footer {
+  background-color: $gray-footer;
+}
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -0,0 +1,95 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-i18n';
+
+import messages from './Footer.messages';
+import FooterLogo from '../edx-openedx-logo-tag.png';
+import LanguageSelector from './LanguageSelector';
+
+const EVENT_NAMES = {
+  FOOTER_LINK: 'edx.bi.footer.link',
+};
+
+class SiteFooter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.externalLinkClickHandler = this.externalLinkClickHandler.bind(this);
+  }
+
+  getLocalePrefix(locale) {
+    const twoLetterPrefix = locale.substring(0, 2).toLowerCase();
+    if (twoLetterPrefix === 'en') {
+      return '';
+    }
+    return `/${twoLetterPrefix}`;
+  }
+
+  externalLinkClickHandler(event) {
+    const label = event.currentTarget.getAttribute('href');
+    const eventName = EVENT_NAMES.FOOTER_LINK;
+    const properties = {
+      category: 'outbound_link',
+      label,
+    };
+    this.props.handleAllTrackEvents(eventName, properties);
+  }
+
+  render() {
+    const {
+      supportedLanguages,
+      onLanguageSelected,
+      logo,
+      intl,
+    } = this.props;
+    const showLanguageSelector = supportedLanguages.length > 0 && onLanguageSelected;
+
+    return (
+      <footer
+        role="contentinfo"
+        aria-label={intl.formatMessage(messages['footer.logo.ariaLabel'])}
+        className="footer d-flex border-top py-3 px-4"
+      >
+        <div className="container d-flex">
+          <a
+            className="d-block mb-3"
+            href="https://open.edx.org"
+            aria-label={intl.formatMessage(messages['footer.logo.ariaLabel'])}
+          >
+            <img
+              style={{ maxWidth: 150 }}
+              src={logo || FooterLogo}
+              alt={intl.formatMessage(messages['footer.logo.altText'])}
+            />
+          </a>
+          <div className="flex-grow-1" />
+          {showLanguageSelector &&
+            <LanguageSelector
+              options={supportedLanguages}
+              onSubmit={onLanguageSelected}
+            />
+          }
+        </div>
+      </footer>
+    );
+  }
+}
+
+SiteFooter.propTypes = {
+  intl: intlShape.isRequired,
+  logo: PropTypes.string,
+  onLanguageSelected: PropTypes.func,
+  supportedLanguages: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+  })),
+  handleAllTrackEvents: PropTypes.func.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
@@ -0,0 +1,156 @@
+import { defineMessages } from '@edx/frontend-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
@@ -0,0 +1,82 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { mount } from 'enzyme';
+import { IntlProvider } from '@edx/frontend-i18n';
+
+import Footer from './Footer';
+
+describe('<Footer />', () => {
+  describe('renders correctly', () => {
+    it('renders without a language selector', () => {
+      const mockHandleAllTrackEvents = jest.fn();
+      const tree = renderer
+        .create((
+          <IntlProvider locale="en">
+            <Footer handleAllTrackEvents={mockHandleAllTrackEvents} />
+          </IntlProvider>
+        ))
+        .toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+    it('renders without a language selector in es', () => {
+      const mockHandleAllTrackEvents = jest.fn();
+      const tree = renderer
+        .create((
+          <IntlProvider locale="es">
+            <Footer handleAllTrackEvents={mockHandleAllTrackEvents} />
+          </IntlProvider>
+        ))
+        .toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+    it('renders with a language selector', () => {
+      const mockHandleAllTrackEvents = jest.fn();
+      const tree = renderer
+        .create((
+          <IntlProvider locale="en">
+            <Footer
+              handleAllTrackEvents={mockHandleAllTrackEvents}
+              onLanguageSelected={() => {}}
+              supportedLanguages={[
+                { label: 'English', value: 'en' },
+                { label: 'Español', value: 'es' },
+              ]}
+            />
+          </IntlProvider>
+        ))
+        .toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+
+  describe('handles language switching', () => {
+    it('calls onLanguageSelected prop when a language is changed', () => {
+      const mockHandleAllTrackEvents = jest.fn();
+      const mockHandleLanguageSelected = jest.fn();
+      const wrapper = mount((
+        <IntlProvider locale="en">
+          <Footer
+            handleAllTrackEvents={mockHandleAllTrackEvents}
+            onLanguageSelected={mockHandleLanguageSelected}
+            supportedLanguages={[
+              { label: 'English', value: 'en' },
+              { label: 'Español', value: 'es' },
+            ]}
+          />
+        </IntlProvider>
+      ));
+
+      wrapper.find('form').simulate('submit', {
+        target: {
+          elements: {
+            'site-footer-language-select': {
+              value: 'es',
+            },
+          },
+        },
+      });
+
+      expect(mockHandleLanguageSelected).toHaveBeenCalledWith('es');
+    });
+  });
+});
--- a/src/components/LanguageSelector.jsx
+++ b/src/components/LanguageSelector.jsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-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}
+    >
+      {/* eslint-disable-next-line jsx-a11y/label-has-for */}
+      <div className="form-group">
+        <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 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
@@ -0,0 +1,136 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Footer /> renders correctly renders with a language selector 1`] = `
+<footer
+  aria-label="edX Home"
+  className="footer d-flex border-top py-3 px-4"
+  role="contentinfo"
+>
+  <div
+    className="container d-flex"
+  >
+    <a
+      aria-label="edX Home"
+      className="d-block mb-3"
+      href="https://open.edx.org"
+    >
+      <img
+        alt="Powered by Open edX"
+        src="test-file-stub"
+        style={
+          Object {
+            "maxWidth": 150,
+          }
+        }
+      />
+    </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"
+        >
+          <span>
+            Choose Language
+          </span>
+        </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"
+          type="submit"
+        >
+          <span>
+            Apply
+          </span>
+        </button>
+      </div>
+    </form>
+  </div>
+</footer>
+`;
+
+exports[`<Footer /> renders correctly renders without a language selector 1`] = `
+<footer
+  aria-label="edX Home"
+  className="footer d-flex border-top py-3 px-4"
+  role="contentinfo"
+>
+  <div
+    className="container d-flex"
+  >
+    <a
+      aria-label="edX Home"
+      className="d-block mb-3"
+      href="https://open.edx.org"
+    >
+      <img
+        alt="Powered by Open edX"
+        src="test-file-stub"
+        style={
+          Object {
+            "maxWidth": 150,
+          }
+        }
+      />
+    </a>
+    <div
+      className="flex-grow-1"
+    />
+  </div>
+</footer>
+`;
+
+exports[`<Footer /> renders correctly renders without a language selector in es 1`] = `
+<footer
+  aria-label="edX Home"
+  className="footer d-flex border-top py-3 px-4"
+  role="contentinfo"
+>
+  <div
+    className="container d-flex"
+  >
+    <a
+      aria-label="edX Home"
+      className="d-block mb-3"
+      href="https://open.edx.org"
+    >
+      <img
+        alt="Powered by Open edX"
+        src="test-file-stub"
+        style={
+          Object {
+            "maxWidth": 150,
+          }
+        }
+      />
+    </a>
+    <div
+      className="flex-grow-1"
+    />
+  </div>
+</footer>
+`;
--- a/src/edx-footer.png
+++ b/src/edx-footer.png
--- a/src/edx-openedx-logo-tag.png
+++ b/src/edx-openedx-logo-tag.png
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,5 @@
+import Footer, { EVENT_NAMES } from './components/Footer';
+import messages from './i18n/index';
+
+export default Footer;
+export { messages, EVENT_NAMES };
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,183 +0,0 @@
-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 './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/index.scss
+++ b/src/index.scss
@@ -1,4 +0,0 @@
-@import "~@edx/edx-bootstrap/scss/edx/theme";
-@import "~bootstrap/scss/bootstrap";
-
-@import './lib/scss/_site-footer.scss';
--- a/src/lib/components/SiteFooter/SiteFooter.test.jsx
+++ b/src/lib/components/SiteFooter/SiteFooter.test.jsx
@@ -1,348 +0,0 @@
-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 '../../../edx-footer.png';
-import SiteFooter, { EVENT_NAMES } from './index';
-
-
-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/components/SiteFooter/snapshots/SiteFooter.test.jsx.snap
+++ b/src/lib/components/SiteFooter/snapshots/SiteFooter.test.jsx.snap
@@ -1,1503 +0,0 @@
-// 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/components/SiteFooter/index.jsx
+++ b/src/lib/components/SiteFooter/index.jsx
@@ -1,265 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import qs from 'query-string';
-
-const EVENT_NAMES = {
-  FOOTER_LINK: 'edx.bi.footer.link',
-};
-
-
-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,
-  }),
-  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 = {
-  siteLogo: null,
-  marketingSiteBaseUrl: null,
-  linkSectionOne: linkSectionDefault,
-  linkSectionTwo: linkSectionDefault,
-  linkSectionThree: linkSectionDefault,
-  socialLinks: [],
-  showMobileLinks: true,
-  appleAppStore: null,
-  googlePlay: null,
-  supportedLanguages: [],
-  languageForm: null,
-  copyright: null,
-  trademark: null,
-};
-
-export default SiteFooter;
-export { EVENT_NAMES };
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -1,3 +0,0 @@
-import SiteFooter from './components/SiteFooter';
-
-export default SiteFooter;
--- a/src/lib/scss/_site-footer.scss
+++ b/src/lib/scss/_site-footer.scss
@@ -1,165 +0,0 @@
-.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/tests/setupTest.js
+++ b/src/tests/setupTest.js
--- a/webpack.dev.config.js
+++ b/webpack.dev.config.js
@@ -0,0 +1,10 @@
+const path = require('path');
+const { createConfig } = require('@edx/frontend-build');
+
+module.exports = createConfig('webpack-dev', {
+  entry: path.resolve(__dirname, 'example'),
+  output: {
+    path: path.resolve(__dirname, 'example/dist'),
+    publicPath: '/',
+  },
+});