Merge pull request #44 from edx/alasdair/remove-paragon

perf(paragon): remove paragon to reduce bundle size
2019-06-21 11:14:29 -04:00 · 2019-06-21 11:11:01 -04:00 · 2019-06-21 09:56:05 -04:00 · 2019-06-11 13:51:08 -04:00 · 2019-06-11 13:34:27 -04:00 · 2019-06-09 16:32:55 -04:00
32 changed files with 8656 additions and 6745 deletions
--- a/.babelrc
+++ b/.babelrc
@@ -19,7 +19,8 @@
    "i18n": {
      "plugins": [
        ["react-intl", {
-          "messagesDir": "./temp"
+          "messagesDir": "./temp/babel-plugin-react-intl",
+          "moduleSourceName": "@edx/frontend-i18n"
        }]
      ]
    }
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,6 @@ node_modules
 temp

 .idea/
+
+src/i18n/transifex_input.json
+temp/babel-plugin-react-intl
--- a/.travis.yml
+++ b/.travis.yml
@@ -8,8 +8,10 @@ install:
  - npm install
 script:
  - npm run lint
+  - 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"
  - npm run coveralls
--- a/56
+++ b/56
@@ -1,36 +1,50 @@
-extract_translations: ## no prerequisites so we can control order of operations
-	echo "We have to define this target due to tooling assumptions"
-	echo "Also we have to npm install using this hook b/c there's no other place for it in the current setup"
+transifex_resource = frontend-component-footer
+transifex_langs = "ar,fr,es_419,zh_CN"
+
+transifex_utils = ./node_modules/.bin/transifex-utils.js
+i18n = ./src/i18n
+transifex_input = $(i18n)/transifex_input.json
+tx_url1 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/translation/en/strings/
+tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/source/
+
+# This directory must match .babelrc .
+transifex_temp = ./temp/babel-plugin-react-intl
+
+requirements:
 	npm install
-	npm run-script i18n_extract

 i18n.extract:
-    # Pulling display strings from .jsx files into .json files...
+	# Pulling display strings from .jsx files into .json files...
+	rm -rf $(transifex_temp)
 	npm run-script i18n_extract

 i18n.concat:
-    # Gathering JSON messages into one file...
-	./src/i18n/i18n-concat.js ./temp/src ./src/i18n/transifex_input.json
+	# Gathering JSON messages into one file...
+	$(transifex_utils) $(transifex_temp) $(transifex_input)

-i18n.pre_validate: | i18n.extract i18n.concat
-	git diff --exit-code ./src/i18n/transifex_input.json
+extract_translations: | requirements i18n.extract i18n.concat

-tx_url1 = https://www.transifex.com/api/2/project/edx-platform/resource/frontend-component-footer/translation/en/strings/
-tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/frontend-component-footer/source/
+# Despite the name, we actually need this target to detect changes in the incoming translated message files as well.
+detect_changed_source_translations:
+	# Checking for changed translations...
+	git diff --exit-code $(i18n)

-# push translations to Transifex, doing magic so we can include the translator comments
-push_translations: | i18n.extract
-	# Adding translator comments...
-	# Fetching strings from Transifex...
+# Pushes translations to Transifex.  You must run make extract_translations first.
+push_translations:
+	# Pushing strings to Transifex...
+	tx push -s
+	# Fetching hashes from Transifex...
 	./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
-    # Writing out comments to file...
-	./src/i18n/i18n-concat.js ./temp/src --comments
-    # Adding comments to Transifex...
+	# Writing out comments to file...
+	$(transifex_utils) $(transifex_temp) --comments
+	# Pushing comments to Transifex...
 	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)

-# pull translations from Transifex
-pull_translations: ## must be exactly this name for edx tooling support, see ecommerce-scripts/transifex/pull.py
-	tx pull -f --mode reviewed --language="ar,fr,es_419,zh_CN"
+# Pulls translations from Transifex.
+pull_translations:
+	tx pull -f --mode reviewed --language=$(transifex_langs)

+# This target is used by Travis.
 validate-no-uncommitted-package-lock-changes:
+	# Checking for package-lock.json changes...
 	git diff --exit-code package-lock.json
--- a/README.rst
+++ b/README.rst
@@ -23,7 +23,7 @@ of how the SiteFooter component can be specified.
 Requirements
 ------------

-This component uses ``react-intl``. Any containing app must provide ``react-intl`` as a peer dependency, and be wrapped inside an ``IntlProvider`` element, whether or not your consuming application is actually localized. For a basic default locale (English) version, follow the ``IntlProvider`` example in the sample application in `src/index.jsx <src/index.jsx>`__.
+This component uses ``@edx/frontend-i18n``. Any containing app must provide ``@edx/frontend-i18n`` as a peer dependency, and be wrapped inside an ``IntlProvider`` element, whether or not your consuming application is actually localized. For a basic default locale (English) version, follow the ``IntlProvider`` example in the sample application in `src/index.jsx <src/index.jsx>`__.

 Development
 -----------
--- a/config/webpack.dev.config.js
+++ b/config/webpack.dev.config.js
@@ -1,9 +1,9 @@
 // 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');
+const Merge = require('webpack-merge'); // eslint-disable-line import/no-extraneous-dependencies
 const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const webpack = require('webpack');
+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');

--- a/config/webpack.prod.config.js
+++ b/config/webpack.prod.config.js
@@ -1,9 +1,9 @@
 // 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');
+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');
+const CleanWebpackPlugin = require('clean-webpack-plugin'); // eslint-disable-line import/no-extraneous-dependencies

 module.exports = Merge.smart(commonConfig, {
  mode: 'production',
@@ -35,6 +35,18 @@ module.exports = Merge.smart(commonConfig, {
      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
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -9,9 +9,11 @@
  },
  "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",
    "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 .",
    "precommit": "npm run lint",
@@ -38,7 +40,14 @@
    "@commitlint/config-angular": "^6.0.2",
    "@commitlint/prompt": "^6.0.2",
    "@commitlint/prompt-cli": "^6.0.2",
-    "@edx/paragon": "^3.8.0",
+    "@edx/edx-bootstrap": "^2.2.1",
+    "@edx/frontend-i18n": "^2.1.0",
+    "@edx/frontend-logging": "^2.0.2",
+    "@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",
@@ -52,6 +61,7 @@
    "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",
@@ -66,7 +76,6 @@
    "react": "^16.4.2",
    "react-dev-utils": "^5.0.0",
    "react-dom": "^16.2.0",
-    "react-intl": "^2.8.0",
    "react-test-renderer": "^16.6.0",
    "reactifex": "^1.1.1",
    "sass-loader": "^6.0.6",
@@ -80,16 +89,16 @@
    "webpack-dev-server": "^3.1.9",
    "webpack-merge": "^4.2.1"
  },
+  "dependencies": {
+    "query-string": "^5.1.1"
+  },
  "peerDependencies": {
-    "@edx/paragon": "^3.8.0",
-    "clean-webpack-plugin": "^0.1.19",
-    "html-webpack-plugin": "^3.2.0",
+    "@edx/frontend-i18n": "^2.1.0",
+    "@edx/frontend-logging": "^2.0.2",
+    "@edx/paragon": "^4.2.4",
    "prop-types": "^15.5.10",
    "react": "^16.4.2",
-    "react-dom": "^16.2.0",
-    "react-intl": "2.x",
-    "webpack": "^4.19.1",
-    "webpack-merge": "^4.2.1"
+    "react-dom": "^16.2.0"
  },
  "jest": {
    "setupFiles": [
--- a/src/i18n/i18n-concat.js
+++ b/src/i18n/i18n-concat.js
@@ -1,57 +0,0 @@
-#!/usr/bin/env node
-/**
- * This code originally came from https://github.com/efischer19/reactifex/blob/master/main.js,
- * which should be edx/reactifex. It is temporarily being copied here until we find it a new home.
- */
-
-// NOTE: This script is called from Jenkins using devDependencies, so eslint is being
-// disabled so it doesn't force you to make these real dependencies.
-const fs = require('fs'); // eslint-disable-line import/no-extraneous-dependencies
-const glob = require('glob'); // eslint-disable-line import/no-extraneous-dependencies
-const path = require('path'); // eslint-disable-line import/no-extraneous-dependencies
-
-// Expected input: a directory, possibly containing subdirectories, with .json files.  Each .json
-// file is an array of translation triplets (id, description, defaultMessage).
-function gatherJson(dir) {
-  const ret = [];
-  const files = glob.sync(`${dir}/**/*.json`);
-
-  files.forEach((filename) => {
-    const messages = JSON.parse(fs.readFileSync(filename));
-    ret.push(...messages);
-  });
-  return ret;
-}
-
-const jsonDir = process.argv[2];
-const messageObjects = gatherJson(jsonDir);
-
-if (process.argv[3] === '--comments') { // prepare to handle the translator notes
-  const thisFile = path.basename(`${__filename}`);
-  const bashScriptsPath = './node_modules/reactifex/bash_scripts';
-
-  process.stdout.write(`${thisFile}: generating bash scripts...\n`);
-  process.stdout.write(`${thisFile}: info file at ${bashScriptsPath}/hashmap.json\n`);
-
-  const messageInfo = JSON.parse(fs.readFileSync(`${bashScriptsPath}/hashmap.json`));
-  const dataPath = `${bashScriptsPath}/hashed_data.txt`;
-
-  process.stdout.write(`${thisFile}: data path is ${dataPath}\n`);
-  fs.writeFileSync(dataPath, '');
-
-  messageObjects.forEach((message) => {
-    const info = messageInfo.find(mi => mi.key === message.id);
-    if (info) {
-      fs.appendFileSync(dataPath, `${info.string_hash}|${message.description}\n`);
-    } else {
-      process.stdout.write(`${thisFile}: string ${message.id} does not yet exist on transifex!\n`);
-    }
-  });
-} else {
-  const output = {};
-
-  messageObjects.forEach((message) => {
-    output[message.id] = message.defaultMessage;
-  });
-  fs.writeFileSync(process.argv[3], JSON.stringify(output, null, 2));
-}
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -0,0 +1,32 @@
+import arMessages from './messages/ar.json';
+import caMessages from './messages/ca.json';
+// no need to import en messages-- they are in the defaultMessage field
+import es419Messages from './messages/es_419.json';
+import frMessages from './messages/fr.json';
+import zhcnMessages from './messages/zh_CN.json';
+import heMessages from './messages/he.json';
+import idMessages from './messages/id.json';
+import kokrMessages from './messages/ko_kr.json';
+import plMessages from './messages/pl.json';
+import ptbrMessages from './messages/pt_br.json';
+import ruMessages from './messages/ru.json';
+import thMessages from './messages/th.json';
+import ukMessages from './messages/uk.json';
+
+const messages = {
+  ar: arMessages,
+  'es-419': es419Messages,
+  fr: frMessages,
+  'zh-cn': zhcnMessages,
+  ca: caMessages,
+  he: heMessages,
+  id: idMessages,
+  'ko-kr': kokrMessages,
+  pl: plMessages,
+  'pt-br': ptbrMessages,
+  ru: ruMessages,
+  th: thMessages,
+  uk: ukMessages,
+};
+
+export default messages;
--- a/src/i18n/messages/ar.json
+++ b/src/i18n/messages/ar.json
@@ -1,39 +1 @@
-{
-  "footer.site-footer.link.about": "About",
-  "footer.site-footer.link.business": "{siteName} for Business",
-  "footer.site-footer.link.affiliates": "Affiliates",
-  "footer.site-footer.link.open-source": "Open {siteName}",
-  "footer.site-footer.link.careers": "Careers",
-  "footer.site-footer.link.news": "News",
-  "footer.site-footer.link.header.legal": "Legal",
-  "footer.site-footer.link.terms-of-service": "Terms of Service & Honor Code",
-  "footer.site-footer.link.privacy": "Privacy Policy",
-  "footer.site-footer.link.accessibility": "Accessibility Policy",
-  "footer.site-footer.link.trademark": "Trademark Policy",
-  "footer.site-footer.link.sitemap": "Sitemap",
-  "footer.site-footer.link.header.connect": "Connect",
-  "footer.site-footer.link.blog": "Blog",
-  "footer.site-footer.link.contact-us": "Contact Us",
-  "footer.site-footer.link.help-center": "Help Center",
-  "footer.site-footer.link.media-kit": "Media Kit",
-  "footer.site-footer.link.donate": "Donate",
-  "footer.site-footer.copyright-text": "{copyrightSymbol} {startDate}–{endDate} {siteName} Inc.",
-  "footer.site-footer.trademark-text": "EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | {icpLicense}",
-  "footer.site-footer.site-logo.alt-text": "{siteName} logo",
-  "footer.site-footer.site-logo.aria-label": "{siteName} Home",
-  "footer.site-footer.facebook.title": "Facebook",
-  "footer.site-footer.facebook.screen-reader-text": "Like {siteName} on Facebook",
-  "footer.site-footer.twitter.title": "Twitter",
-  "footer.site-footer.twitter.screen-reader-text": "Follow {siteName} on Twitter",
-  "footer.site-footer.youtube.title": "Youtube",
-  "footer.site-footer.youtube.screen-reader-text": "Subscribe to the {siteName} YouTube channel",
-  "footer.site-footer.linkedin.title": "LinkedIn",
-  "footer.site-footer.linkedin.screen-reader-text": "Follow {siteName} on LinkedIn",
-  "footer.site-footer.google-plus.title": "Google+",
-  "footer.site-footer.google-plus.screen-reader-text": "Follow {siteName} on Google+",
-  "footer.site-footer.reddit.title": "Reddit",
-  "footer.site-footer.reddit.screen-reader-text": "Subscribe to the {siteName} subreddit",
-  "footer.site-footer.apple-app-store.alt-text": "Download the {siteName} mobile app from the Apple App Store",
-  "footer.site-footer.google-play.alt-text": "Download the {siteName} mobile app from Google Play",
-  "footer.site-footer.footer.aria-label": "Page Footer"
-}
+{}
--- a/src/i18n/messages/ca.json
+++ b/src/i18n/messages/ca.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/es_419.json
+++ b/src/i18n/messages/es_419.json
@@ -1,39 +1 @@
-{
-  "footer.site-footer.link.about": "About",
-  "footer.site-footer.link.business": "{siteName} for Business",
-  "footer.site-footer.link.affiliates": "Affiliates",
-  "footer.site-footer.link.open-source": "Open {siteName}",
-  "footer.site-footer.link.careers": "Careers",
-  "footer.site-footer.link.news": "News",
-  "footer.site-footer.link.header.legal": "Legal",
-  "footer.site-footer.link.terms-of-service": "Terms of Service & Honor Code",
-  "footer.site-footer.link.privacy": "Privacy Policy",
-  "footer.site-footer.link.accessibility": "Accessibility Policy",
-  "footer.site-footer.link.trademark": "Trademark Policy",
-  "footer.site-footer.link.sitemap": "Sitemap",
-  "footer.site-footer.link.header.connect": "Connect",
-  "footer.site-footer.link.blog": "Blog",
-  "footer.site-footer.link.contact-us": "Contact Us",
-  "footer.site-footer.link.help-center": "Help Center",
-  "footer.site-footer.link.media-kit": "Media Kit",
-  "footer.site-footer.link.donate": "Donate",
-  "footer.site-footer.copyright-text": "{copyrightSymbol} {startDate}–{endDate} {siteName} Inc.",
-  "footer.site-footer.trademark-text": "EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | {icpLicense}",
-  "footer.site-footer.site-logo.alt-text": "{siteName} logo",
-  "footer.site-footer.site-logo.aria-label": "{siteName} Home",
-  "footer.site-footer.facebook.title": "Facebook",
-  "footer.site-footer.facebook.screen-reader-text": "Like {siteName} on Facebook",
-  "footer.site-footer.twitter.title": "Twitter",
-  "footer.site-footer.twitter.screen-reader-text": "Follow {siteName} on Twitter",
-  "footer.site-footer.youtube.title": "Youtube",
-  "footer.site-footer.youtube.screen-reader-text": "Subscribe to the {siteName} YouTube channel",
-  "footer.site-footer.linkedin.title": "LinkedIn",
-  "footer.site-footer.linkedin.screen-reader-text": "Follow {siteName} on LinkedIn",
-  "footer.site-footer.google-plus.title": "Google+",
-  "footer.site-footer.google-plus.screen-reader-text": "Follow {siteName} on Google+",
-  "footer.site-footer.reddit.title": "Reddit",
-  "footer.site-footer.reddit.screen-reader-text": "Subscribe to the {siteName} subreddit",
-  "footer.site-footer.apple-app-store.alt-text": "Download the {siteName} mobile app from the Apple App Store",
-  "footer.site-footer.google-play.alt-text": "Download the {siteName} mobile app from Google Play",
-  "footer.site-footer.footer.aria-label": "Page Footer"
-}
+{}
--- a/src/i18n/messages/fr.json
+++ b/src/i18n/messages/fr.json
@@ -1,39 +1 @@
-{
-  "footer.site-footer.link.about": "About",
-  "footer.site-footer.link.business": "{siteName} for Business",
-  "footer.site-footer.link.affiliates": "Affiliates",
-  "footer.site-footer.link.open-source": "Open {siteName}",
-  "footer.site-footer.link.careers": "Careers",
-  "footer.site-footer.link.news": "News",
-  "footer.site-footer.link.header.legal": "Legal",
-  "footer.site-footer.link.terms-of-service": "Terms of Service & Honor Code",
-  "footer.site-footer.link.privacy": "Privacy Policy",
-  "footer.site-footer.link.accessibility": "Accessibility Policy",
-  "footer.site-footer.link.trademark": "Trademark Policy",
-  "footer.site-footer.link.sitemap": "Sitemap",
-  "footer.site-footer.link.header.connect": "Connect",
-  "footer.site-footer.link.blog": "Blog",
-  "footer.site-footer.link.contact-us": "Contact Us",
-  "footer.site-footer.link.help-center": "Help Center",
-  "footer.site-footer.link.media-kit": "Media Kit",
-  "footer.site-footer.link.donate": "Donate",
-  "footer.site-footer.copyright-text": "{copyrightSymbol} {startDate}–{endDate} {siteName} Inc.",
-  "footer.site-footer.trademark-text": "EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | {icpLicense}",
-  "footer.site-footer.site-logo.alt-text": "{siteName} logo",
-  "footer.site-footer.site-logo.aria-label": "{siteName} Home",
-  "footer.site-footer.facebook.title": "Facebook",
-  "footer.site-footer.facebook.screen-reader-text": "Like {siteName} on Facebook",
-  "footer.site-footer.twitter.title": "Twitter",
-  "footer.site-footer.twitter.screen-reader-text": "Follow {siteName} on Twitter",
-  "footer.site-footer.youtube.title": "Youtube",
-  "footer.site-footer.youtube.screen-reader-text": "Subscribe to the {siteName} YouTube channel",
-  "footer.site-footer.linkedin.title": "LinkedIn",
-  "footer.site-footer.linkedin.screen-reader-text": "Follow {siteName} on LinkedIn",
-  "footer.site-footer.google-plus.title": "Google+",
-  "footer.site-footer.google-plus.screen-reader-text": "Follow {siteName} on Google+",
-  "footer.site-footer.reddit.title": "Reddit",
-  "footer.site-footer.reddit.screen-reader-text": "Subscribe to the {siteName} subreddit",
-  "footer.site-footer.apple-app-store.alt-text": "Download the {siteName} mobile app from the Apple App Store",
-  "footer.site-footer.google-play.alt-text": "Download the {siteName} mobile app from Google Play",
-  "footer.site-footer.footer.aria-label": "Page Footer"
-}
+{}
--- a/src/i18n/messages/he.json
+++ b/src/i18n/messages/he.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/id.json
+++ b/src/i18n/messages/id.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/ko_kr.json
+++ b/src/i18n/messages/ko_kr.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/pl.json
+++ b/src/i18n/messages/pl.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/pt_br.json
+++ b/src/i18n/messages/pt_br.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/ru.json
+++ b/src/i18n/messages/ru.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/th.json
+++ b/src/i18n/messages/th.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/uk.json
+++ b/src/i18n/messages/uk.json
@@ -0,0 +1 @@
+{}
--- a/src/i18n/messages/zh_CN.json
+++ b/src/i18n/messages/zh_CN.json
@@ -1,39 +1 @@
-{
-  "footer.site-footer.link.about": "About",
-  "footer.site-footer.link.business": "{siteName} for Business",
-  "footer.site-footer.link.affiliates": "Affiliates",
-  "footer.site-footer.link.open-source": "Open {siteName}",
-  "footer.site-footer.link.careers": "Careers",
-  "footer.site-footer.link.news": "News",
-  "footer.site-footer.link.header.legal": "Legal",
-  "footer.site-footer.link.terms-of-service": "Terms of Service & Honor Code",
-  "footer.site-footer.link.privacy": "Privacy Policy",
-  "footer.site-footer.link.accessibility": "Accessibility Policy",
-  "footer.site-footer.link.trademark": "Trademark Policy",
-  "footer.site-footer.link.sitemap": "Sitemap",
-  "footer.site-footer.link.header.connect": "Connect",
-  "footer.site-footer.link.blog": "Blog",
-  "footer.site-footer.link.contact-us": "Contact Us",
-  "footer.site-footer.link.help-center": "Help Center",
-  "footer.site-footer.link.media-kit": "Media Kit",
-  "footer.site-footer.link.donate": "Donate",
-  "footer.site-footer.copyright-text": "{copyrightSymbol} {startDate}–{endDate} {siteName} Inc.",
-  "footer.site-footer.trademark-text": "EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | {icpLicense}",
-  "footer.site-footer.site-logo.alt-text": "{siteName} logo",
-  "footer.site-footer.site-logo.aria-label": "{siteName} Home",
-  "footer.site-footer.facebook.title": "Facebook",
-  "footer.site-footer.facebook.screen-reader-text": "Like {siteName} on Facebook",
-  "footer.site-footer.twitter.title": "Twitter",
-  "footer.site-footer.twitter.screen-reader-text": "Follow {siteName} on Twitter",
-  "footer.site-footer.youtube.title": "Youtube",
-  "footer.site-footer.youtube.screen-reader-text": "Subscribe to the {siteName} YouTube channel",
-  "footer.site-footer.linkedin.title": "LinkedIn",
-  "footer.site-footer.linkedin.screen-reader-text": "Follow {siteName} on LinkedIn",
-  "footer.site-footer.google-plus.title": "Google+",
-  "footer.site-footer.google-plus.screen-reader-text": "Follow {siteName} on Google+",
-  "footer.site-footer.reddit.title": "Reddit",
-  "footer.site-footer.reddit.screen-reader-text": "Subscribe to the {siteName} subreddit",
-  "footer.site-footer.apple-app-store.alt-text": "Download the {siteName} mobile app from the Apple App Store",
-  "footer.site-footer.google-play.alt-text": "Download the {siteName} mobile app from Google Play",
-  "footer.site-footer.footer.aria-label": "Page Footer"
-}
+{}
--- a/src/i18n/transifex_input.json
+++ b/src/i18n/transifex_input.json
@@ -1,39 +0,0 @@
-{
-  "footer.site-footer.link.about": "About",
-  "footer.site-footer.link.business": "{siteName} for Business",
-  "footer.site-footer.link.affiliates": "Affiliates",
-  "footer.site-footer.link.open-source": "Open {siteName}",
-  "footer.site-footer.link.careers": "Careers",
-  "footer.site-footer.link.news": "News",
-  "footer.site-footer.link.header.legal": "Legal",
-  "footer.site-footer.link.terms-of-service": "Terms of Service & Honor Code",
-  "footer.site-footer.link.privacy": "Privacy Policy",
-  "footer.site-footer.link.accessibility": "Accessibility Policy",
-  "footer.site-footer.link.trademark": "Trademark Policy",
-  "footer.site-footer.link.sitemap": "Sitemap",
-  "footer.site-footer.link.header.connect": "Connect",
-  "footer.site-footer.link.blog": "Blog",
-  "footer.site-footer.link.contact-us": "Contact Us",
-  "footer.site-footer.link.help-center": "Help Center",
-  "footer.site-footer.link.media-kit": "Media Kit",
-  "footer.site-footer.link.donate": "Donate",
-  "footer.site-footer.copyright-text": "{copyrightSymbol} {startDate}–{endDate} {siteName} Inc.",
-  "footer.site-footer.trademark-text": "EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | {icpLicense}",
-  "footer.site-footer.site-logo.alt-text": "{siteName} logo",
-  "footer.site-footer.site-logo.aria-label": "{siteName} Home",
-  "footer.site-footer.facebook.title": "Facebook",
-  "footer.site-footer.facebook.screen-reader-text": "Like {siteName} on Facebook",
-  "footer.site-footer.twitter.title": "Twitter",
-  "footer.site-footer.twitter.screen-reader-text": "Follow {siteName} on Twitter",
-  "footer.site-footer.youtube.title": "Youtube",
-  "footer.site-footer.youtube.screen-reader-text": "Subscribe to the {siteName} YouTube channel",
-  "footer.site-footer.linkedin.title": "LinkedIn",
-  "footer.site-footer.linkedin.screen-reader-text": "Follow {siteName} on LinkedIn",
-  "footer.site-footer.google-plus.title": "Google+",
-  "footer.site-footer.google-plus.screen-reader-text": "Follow {siteName} on Google+",
-  "footer.site-footer.reddit.title": "Reddit",
-  "footer.site-footer.reddit.screen-reader-text": "Subscribe to the {siteName} subreddit",
-  "footer.site-footer.apple-app-store.alt-text": "Download the {siteName} mobile app from the Apple App Store",
-  "footer.site-footer.google-play.alt-text": "Download the {siteName} mobile app from Google Play",
-  "footer.site-footer.footer.aria-label": "Page Footer"
-}
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,33 +1,183 @@
 import React from 'react';
 import { render } from 'react-dom';
-import { IntlProvider } from 'react-intl';
+
+/* 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 = () => (
-  <IntlProvider locale="en">
-    <SiteFooter
-      siteName="edX"
-      siteLogo={FooterLogo}
-      marketingSiteBaseUrl="https://www.example.com"
-      supportUrl="https://www.example.com/support"
-      contactUrl="https://www.example.com/contact"
-      openSourceUrl="https://www.example.com/open"
-      termsOfServiceUrl="https://www.example.com/terms-of-service"
-      privacyPolicyUrl="https://www.example.com/privacy-policy"
-      facebookUrl="https://www.facebook.com"
-      twitterUrl="https://www.twitter.com"
-      youTubeUrl="https://www.youtube.com"
-      linkedInUrl="https://www.linkedin.com"
-      googlePlusUrl="https://plus.google.com"
-      redditUrl="https://reddit.com"
-      appleAppStoreUrl="https://store.apple.com"
-      googlePlayUrl="https://play.google.com"
-      handleAllTrackEvents={() => {}}
-    />
-  </IntlProvider>
+  <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 +1,4 @@
-@import "~@edx/edx-bootstrap/sass/edx/theme";
+@import "~@edx/edx-bootstrap/scss/edx/theme";
@import "~bootstrap/scss/bootstrap";

@import './lib/scss/_site-footer.scss';
--- a/src/lib/components/SiteFooter/SiteFooter.messages.js
+++ b/src/lib/components/SiteFooter/SiteFooter.messages.js
@@ -1,91 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-const messages = defineMessages({
-  'footer.site-footer.site-logo.alt-text': {
-    id: 'footer.site-footer.site-logo.alt-text',
-    defaultMessage: '{siteName} logo',
-    description: 'The alt description of the site logo',
-  },
-  'footer.site-footer.site-logo.aria-label': {
-    id: 'footer.site-footer.site-logo.aria-label',
-    defaultMessage: '{siteName} Home',
-    description: 'Aria label for the site logo which goes to the marketing site',
-  },
-  'footer.site-footer.facebook.title': {
-    id: 'footer.site-footer.facebook.title',
-    defaultMessage: 'Facebook',
-    description: 'Facebook button title',
-  },
-  'footer.site-footer.facebook.screen-reader-text': {
-    id: 'footer.site-footer.facebook.screen-reader-text',
-    defaultMessage: 'Like {siteName} on Facebook',
-    description: 'Facebook button screen reader text',
-  },
-  'footer.site-footer.twitter.title': {
-    id: 'footer.site-footer.twitter.title',
-    defaultMessage: 'Twitter',
-    description: 'Twitter button title',
-  },
-  'footer.site-footer.twitter.screen-reader-text': {
-    id: 'footer.site-footer.twitter.screen-reader-text',
-    defaultMessage: 'Follow {siteName} on Twitter',
-    description: 'Twitter button screen reader text',
-  },
-  'footer.site-footer.youtube.title': {
-    id: 'footer.site-footer.youtube.title',
-    defaultMessage: 'Youtube',
-    description: 'Youtube button title',
-  },
-  'footer.site-footer.youtube.screen-reader-text': {
-    id: 'footer.site-footer.youtube.screen-reader-text',
-    defaultMessage: 'Subscribe to the {siteName} YouTube channel',
-    description: 'Youtube button screen reader text',
-  },
-  'footer.site-footer.linkedin.title': {
-    id: 'footer.site-footer.linkedin.title',
-    defaultMessage: 'LinkedIn',
-    description: 'LinkedIn button title',
-  },
-  'footer.site-footer.linkedin.screen-reader-text': {
-    id: 'footer.site-footer.linkedin.screen-reader-text',
-    defaultMessage: 'Follow {siteName} on LinkedIn',
-    description: 'LinkedIn button screen reader text',
-  },
-  'footer.site-footer.google-plus.title': {
-    id: 'footer.site-footer.google-plus.title',
-    defaultMessage: 'Google+',
-    description: 'Google+ button title',
-  },
-  'footer.site-footer.google-plus.screen-reader-text': {
-    id: 'footer.site-footer.google-plus.screen-reader-text',
-    defaultMessage: 'Follow {siteName} on Google+',
-    description: 'Google+ button screen reader text',
-  },
-  'footer.site-footer.reddit.title': {
-    id: 'footer.site-footer.reddit.title',
-    defaultMessage: 'Reddit',
-    description: 'Reddit button title',
-  },
-  'footer.site-footer.reddit.screen-reader-text': {
-    id: 'footer.site-footer.reddit.screen-reader-text',
-    defaultMessage: 'Subscribe to the {siteName} subreddit',
-    description: 'Reddit button screen reader text',
-  },
-  'footer.site-footer.apple-app-store.alt-text': {
-    id: 'footer.site-footer.apple-app-store.alt-text',
-    defaultMessage: 'Download the {siteName} mobile app from the Apple App Store',
-    description: 'Apple App Store button alt description',
-  },
-  'footer.site-footer.google-play.alt-text': {
-    id: 'footer.site-footer.google-play.alt-text',
-    defaultMessage: 'Download the {siteName} mobile app from Google Play',
-    description: 'Google Play button alt description',
-  },
-  'footer.site-footer.footer.aria-label': {
-    id: 'footer.site-footer.footer.aria-label',
-    defaultMessage: 'Page Footer',
-    description: 'Aria label for the footer',
-  },
-});
-
-export default messages;
--- a/src/lib/components/SiteFooter/SiteFooter.test.jsx
+++ b/src/lib/components/SiteFooter/SiteFooter.test.jsx
@@ -1,34 +1,185 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { mount } from 'enzyme';
-import { IntlProvider } from 'react-intl';
+
+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 =>
  (
-    <IntlProvider locale="en">
-      <SiteFooter
-        siteName="example"
-        siteLogo={FooterLogo}
-        marketingSiteBaseUrl="https://www.example.com"
-        supportUrl="https://www.example.com/support"
-        contactUrl="https://www.example.com/contact"
-        openSourceUrl="https://www.example.com/open"
-        termsOfServiceUrl="https://www.example.com/terms-of-service"
-        privacyPolicyUrl="https://www.example.com/privacy-policy"
-        facebookUrl="https://www.facebook.com"
-        twitterUrl="https://www.twitter.com"
-        youTubeUrl="https://www.youtube.com"
-        linkedInUrl="https://www.linkedin.com"
-        googlePlusUrl="https://plus.google.com"
-        redditUrl="https://reddit.com"
-        appleAppStoreUrl="https://store.apple.com"
-        googlePlayUrl="https://play.google.com"
-        handleAllTrackEvents={mockHandleAllTrackEvents}
-      />
-    </IntlProvider>
+    <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 />', () => {
@@ -44,28 +195,42 @@ describe('<SiteFooter />', () => {
    it('does not render social links', () => {
      const tree = renderer
        .create((
-          <IntlProvider locale="en">
-            <SiteFooter
-              siteName="example"
-              siteLogo={FooterLogo}
-              marketingSiteBaseUrl="https://www.example.com"
-              supportUrl="https://www.example.com/support"
-              contactUrl="https://www.example.com/contact"
-              openSourceUrl="https://www.example.com/open"
-              termsOfServiceUrl="https://www.example.com/terms-of-service"
-              privacyPolicyUrl="https://www.example.com/privacy-policy"
-              facebookUrl="https://www.facebook.com"
-              twitterUrl="https://www.twitter.com"
-              youTubeUrl="https://www.youtube.com"
-              linkedInUrl="https://www.linkedin.com"
-              googlePlusUrl="https://plus.google.com"
-              redditUrl="https://reddit.com"
-              appleAppStoreUrl="https://store.apple.com"
-              googlePlayUrl="https://play.google.com"
-              handleAllTrackEvents={jest.fn()}
-              showSocialLinks={false}
-            />
-          </IntlProvider>
+          <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();
    });
@@ -73,28 +238,87 @@ describe('<SiteFooter />', () => {
    it('does not render mobile links', () => {
      const tree = renderer
        .create((
-          <IntlProvider locale="en">
-            <SiteFooter
-              siteName="example"
-              siteLogo={FooterLogo}
-              marketingSiteBaseUrl="https://www.example.com"
-              supportUrl="https://www.example.com/support"
-              contactUrl="https://www.example.com/contact"
-              openSourceUrl="https://www.example.com/open"
-              termsOfServiceUrl="https://www.example.com/terms-of-service"
-              privacyPolicyUrl="https://www.example.com/privacy-policy"
-              facebookUrl="https://www.facebook.com"
-              twitterUrl="https://www.twitter.com"
-              youTubeUrl="https://www.youtube.com"
-              linkedInUrl="https://www.linkedin.com"
-              googlePlusUrl="https://plus.google.com"
-              redditUrl="https://reddit.com"
-              appleAppStoreUrl="https://store.apple.com"
-              googlePlayUrl="https://play.google.com"
-              handleAllTrackEvents={jest.fn()}
-              showMobileLinks={false}
-            />
-          </IntlProvider>
+          <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();
    });
@@ -106,7 +330,8 @@ describe('<SiteFooter />', () => {
      const footer = mount((completeSiteFooterComponent(mockHandleAllTrackEvents)));
      const externalLinks = footer.find("a[target='_blank']");

-      expect(externalLinks).toHaveLength(8);
+      expect(externalLinks.length).toEqual(socialLinks.length + 2);
+
      externalLinks.forEach((externalLink) => {
        const callIndex = mockHandleAllTrackEvents.mock.calls.length;
        externalLink.simulate('click');
--- a/src/lib/components/SiteFooter/snapshots/SiteFooter.test.jsx.snap
+++ b/src/lib/components/SiteFooter/snapshots/SiteFooter.test.jsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
+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"
@@ -13,13 +13,11 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
      className="area-1"
    >
      <a
-        aria-label="example Home"
-        href="https://www.example.com/"
-        onClick={[Function]}
-        target="_self"
+        aria-label="edX Home"
+        href="https://www.example.com"
      >
        <img
-          alt="example logo"
+          alt="edx Logo"
          src="test-file-stub"
        />
      </a>
@@ -28,7 +26,7 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
      className="area-2"
    >
      <h2>
-        example
+        edX
      </h2>
      <ul
        className="list-unstyled p-0 m-0"
@@ -37,54 +35,42 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
          <a
            href="https://www.example.com/about-us"
          >
-            <span>
-              About
-            </span>
+            About
          </a>
        </li>
        <li>
          <a
-            href="https://www.example.com/enterprise"
+            href="https://business.edx.org/?utm_test=utm_test_value"
          >
-            <span>
-              example for Business
-            </span>
+            edX for Business
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/affiliate-program"
          >
-            <span>
-              Affiliates
-            </span>
+            Affiliates
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/open"
          >
-            <span>
-              Open example
-            </span>
+            Open edX
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/careers"
          >
-            <span>
-              Careers
-            </span>
+            Careers
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/news-announcements"
          >
-            <span>
-              News
-            </span>
+            News
          </a>
        </li>
      </ul>
@@ -93,9 +79,7 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
      className="area-3"
    >
      <h2>
-        <span>
-          Legal
-        </span>
+        Legal
      </h2>
      <ul
        className="list-unstyled p-0 m-0"
@@ -104,45 +88,35 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
          <a
            href="https://www.example.com/terms-of-service"
          >
-            <span>
-              Terms of Service & Honor Code
-            </span>
+            Terms of Service & Honor Code
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/privacy-policy"
          >
-            <span>
-              Privacy Policy
-            </span>
+            Privacy Policy
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/accessibility"
          >
-            <span>
-              Accessibility Policy
-            </span>
+            Accessibility Policy
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/trademarks"
          >
-            <span>
-              Trademark Policy
-            </span>
+            Trademark Policy
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/sitemap"
          >
-            <span>
-              Sitemap
-            </span>
+            Sitemap
          </a>
        </li>
      </ul>
@@ -151,9 +125,7 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
      className="area-4"
    >
      <h2>
-        <span>
-          Connect
-        </span>
+        Connect
      </h2>
      <ul
        className="list-unstyled p-0 m-0"
@@ -162,45 +134,35 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
          <a
            href="https://www.example.com/blog"
          >
-            <span>
-              Blog
-            </span>
+            Blog
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/contact"
          >
-            <span>
-              Contact Us
-            </span>
+            Contact Us
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/support"
          >
-            <span>
-              Help Center
-            </span>
+            Help Center
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/media-kit"
          >
-            <span>
-              Media Kit
-            </span>
+            Media Kit
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/donate"
          >
-            <span>
-              Donate
-            </span>
+            Donate
          </a>
        </li>
      </ul>
@@ -219,15 +181,27 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
            target="_blank"
            title="Facebook"
          >
-            <span
-              aria-hidden={true}
-              className="fa fa-facebook-square fa-2x"
-              id="edx-footer-icon-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 example on Facebook
+              Like edX on Facebook
            </span>
          </a>
        </li>
@@ -239,15 +213,27 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
            target="_blank"
            title="Twitter"
          >
-            <span
-              aria-hidden={true}
-              className="fa fa-twitter-square fa-2x"
-              id="edx-footer-icon-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 example on Twitter
+              Follow edX on Twitter
            </span>
          </a>
        </li>
@@ -259,15 +245,27 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
            target="_blank"
            title="Youtube"
          >
-            <span
-              aria-hidden={true}
-              className="fa fa-youtube-square fa-2x"
-              id="edx-footer-icon-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 example YouTube channel
+              Subscribe to the edX YouTube channel
            </span>
          </a>
        </li>
@@ -279,35 +277,27 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
            target="_blank"
            title="LinkedIn"
          >
-            <span
-              aria-hidden={true}
-              className="fa fa-linkedin-square fa-2x"
-              id="edx-footer-icon-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 example on LinkedIn
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://plus.google.com"
-            onClick={[Function]}
-            rel="noopener noreferrer"
-            target="_blank"
-            title="Google+"
-          >
-            <span
-              aria-hidden={true}
-              className="fa fa-google-plus-square fa-2x"
-              id="edx-footer-icon-google"
-            />
-            <span
-              className="sr-only"
-            >
-              Follow example on Google+
+              Follow edX on LinkedIn
            </span>
          </a>
        </li>
@@ -319,27 +309,479 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
            target="_blank"
            title="Reddit"
          >
-            <span
-              aria-hidden={true}
-              className="fa fa-reddit-square fa-2x"
-              id="edx-footer-icon-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 example subreddit
+              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>
-        <span>
-          © 2012–2019 example Inc.
-        </span>
+        © 2012–2019 edX Inc.
        <br />
-        <span>
-          EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 粤ICP备17044299号-2
-        </span>
+        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>
@@ -359,22 +801,78 @@ exports[`<SiteFooter /> renders correctly does not render social links 1`] = `
      className="area-1"
    >
      <a
-        aria-label="example Home"
-        href="https://www.example.com/"
-        onClick={[Function]}
-        target="_self"
+        aria-label="edX Home"
+        href="https://www.example.com"
      >
        <img
-          alt="example logo"
+          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>
-        example
+        edX
      </h2>
      <ul
        className="list-unstyled p-0 m-0"
@@ -383,54 +881,42 @@ exports[`<SiteFooter /> renders correctly does not render social links 1`] = `
          <a
            href="https://www.example.com/about-us"
          >
-            <span>
-              About
-            </span>
+            About
          </a>
        </li>
        <li>
          <a
-            href="https://www.example.com/enterprise"
+            href="https://business.edx.org/?utm_test=utm_test_value"
          >
-            <span>
-              example for Business
-            </span>
+            edX for Business
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/affiliate-program"
          >
-            <span>
-              Affiliates
-            </span>
+            Affiliates
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/open"
          >
-            <span>
-              Open example
-            </span>
+            Open edX
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/careers"
          >
-            <span>
-              Careers
-            </span>
+            Careers
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/news-announcements"
          >
-            <span>
-              News
-            </span>
+            News
          </a>
        </li>
      </ul>
@@ -439,9 +925,7 @@ exports[`<SiteFooter /> renders correctly does not render social links 1`] = `
      className="area-3"
    >
      <h2>
-        <span>
-          Legal
-        </span>
+        Legal
      </h2>
      <ul
        className="list-unstyled p-0 m-0"
@@ -450,45 +934,35 @@ exports[`<SiteFooter /> renders correctly does not render social links 1`] = `
          <a
            href="https://www.example.com/terms-of-service"
          >
-            <span>
-              Terms of Service & Honor Code
-            </span>
+            Terms of Service & Honor Code
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/privacy-policy"
          >
-            <span>
-              Privacy Policy
-            </span>
+            Privacy Policy
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/accessibility"
          >
-            <span>
-              Accessibility Policy
-            </span>
+            Accessibility Policy
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/trademarks"
          >
-            <span>
-              Trademark Policy
-            </span>
+            Trademark Policy
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/sitemap"
          >
-            <span>
-              Sitemap
-            </span>
+            Sitemap
          </a>
        </li>
      </ul>
@@ -497,9 +971,7 @@ exports[`<SiteFooter /> renders correctly does not render social links 1`] = `
      className="area-4"
    >
      <h2>
-        <span>
-          Connect
-        </span>
+        Connect
      </h2>
      <ul
        className="list-unstyled p-0 m-0"
@@ -508,45 +980,35 @@ exports[`<SiteFooter /> renders correctly does not render social links 1`] = `
          <a
            href="https://www.example.com/blog"
          >
-            <span>
-              Blog
-            </span>
+            Blog
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/contact"
          >
-            <span>
-              Contact Us
-            </span>
+            Contact Us
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/support"
          >
-            <span>
-              Help Center
-            </span>
+            Help Center
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/media-kit"
          >
-            <span>
-              Media Kit
-            </span>
+            Media Kit
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/donate"
          >
-            <span>
-              Donate
-            </span>
+            Donate
          </a>
        </li>
      </ul>
@@ -565,7 +1027,7 @@ exports[`<SiteFooter /> renders correctly does not render social links 1`] = `
            target="_blank"
          >
            <img
-              alt="Download the example mobile app from the Apple App Store"
+              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"
            />
@@ -579,7 +1041,7 @@ exports[`<SiteFooter /> renders correctly does not render social links 1`] = `
            target="_blank"
          >
            <img
-              alt="Download the example mobile app from Google Play"
+              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"
            />
@@ -587,13 +1049,14 @@ exports[`<SiteFooter /> renders correctly does not render social links 1`] = `
        </li>
      </ul>
      <p>
-        <span>
-          © 2012–2019 example Inc.
-        </span>
+        © 2012–2019 edX Inc.
        <br />
-        <span>
-          EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 粤ICP备17044299号-2
-        </span>
+        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>
@@ -613,22 +1076,78 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
      className="area-1"
    >
      <a
-        aria-label="example Home"
-        href="https://www.example.com/"
-        onClick={[Function]}
-        target="_self"
+        aria-label="edX Home"
+        href="https://www.example.com"
      >
        <img
-          alt="example logo"
+          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>
-        example
+        edX
      </h2>
      <ul
        className="list-unstyled p-0 m-0"
@@ -637,54 +1156,42 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
          <a
            href="https://www.example.com/about-us"
          >
-            <span>
-              About
-            </span>
+            About
          </a>
        </li>
        <li>
          <a
-            href="https://www.example.com/enterprise"
+            href="https://business.edx.org/?utm_test=utm_test_value"
          >
-            <span>
-              example for Business
-            </span>
+            edX for Business
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/affiliate-program"
          >
-            <span>
-              Affiliates
-            </span>
+            Affiliates
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/open"
          >
-            <span>
-              Open example
-            </span>
+            Open edX
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/careers"
          >
-            <span>
-              Careers
-            </span>
+            Careers
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/news-announcements"
          >
-            <span>
-              News
-            </span>
+            News
          </a>
        </li>
      </ul>
@@ -693,9 +1200,7 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
      className="area-3"
    >
      <h2>
-        <span>
-          Legal
-        </span>
+        Legal
      </h2>
      <ul
        className="list-unstyled p-0 m-0"
@@ -704,45 +1209,35 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
          <a
            href="https://www.example.com/terms-of-service"
          >
-            <span>
-              Terms of Service & Honor Code
-            </span>
+            Terms of Service & Honor Code
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/privacy-policy"
          >
-            <span>
-              Privacy Policy
-            </span>
+            Privacy Policy
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/accessibility"
          >
-            <span>
-              Accessibility Policy
-            </span>
+            Accessibility Policy
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/trademarks"
          >
-            <span>
-              Trademark Policy
-            </span>
+            Trademark Policy
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/sitemap"
          >
-            <span>
-              Sitemap
-            </span>
+            Sitemap
          </a>
        </li>
      </ul>
@@ -751,9 +1246,7 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
      className="area-4"
    >
      <h2>
-        <span>
-          Connect
-        </span>
+        Connect
      </h2>
      <ul
        className="list-unstyled p-0 m-0"
@@ -762,45 +1255,35 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
          <a
            href="https://www.example.com/blog"
          >
-            <span>
-              Blog
-            </span>
+            Blog
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/contact"
          >
-            <span>
-              Contact Us
-            </span>
+            Contact Us
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/support"
          >
-            <span>
-              Help Center
-            </span>
+            Help Center
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/media-kit"
          >
-            <span>
-              Media Kit
-            </span>
+            Media Kit
          </a>
        </li>
        <li>
          <a
            href="https://www.example.com/donate"
          >
-            <span>
-              Donate
-            </span>
+            Donate
          </a>
        </li>
      </ul>
@@ -819,15 +1302,27 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
            target="_blank"
            title="Facebook"
          >
-            <span
-              aria-hidden={true}
-              className="fa fa-facebook-square fa-2x"
-              id="edx-footer-icon-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 example on Facebook
+              Like edX on Facebook
            </span>
          </a>
        </li>
@@ -839,15 +1334,27 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
            target="_blank"
            title="Twitter"
          >
-            <span
-              aria-hidden={true}
-              className="fa fa-twitter-square fa-2x"
-              id="edx-footer-icon-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 example on Twitter
+              Follow edX on Twitter
            </span>
          </a>
        </li>
@@ -859,15 +1366,27 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
            target="_blank"
            title="Youtube"
          >
-            <span
-              aria-hidden={true}
-              className="fa fa-youtube-square fa-2x"
-              id="edx-footer-icon-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 example YouTube channel
+              Subscribe to the edX YouTube channel
            </span>
          </a>
        </li>
@@ -879,35 +1398,27 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
            target="_blank"
            title="LinkedIn"
          >
-            <span
-              aria-hidden={true}
-              className="fa fa-linkedin-square fa-2x"
-              id="edx-footer-icon-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 example on LinkedIn
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://plus.google.com"
-            onClick={[Function]}
-            rel="noopener noreferrer"
-            target="_blank"
-            title="Google+"
-          >
-            <span
-              aria-hidden={true}
-              className="fa fa-google-plus-square fa-2x"
-              id="edx-footer-icon-google"
-            />
-            <span
-              className="sr-only"
-            >
-              Follow example on Google+
+              Follow edX on LinkedIn
            </span>
          </a>
        </li>
@@ -919,15 +1430,27 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
            target="_blank"
            title="Reddit"
          >
-            <span
-              aria-hidden={true}
-              className="fa fa-reddit-square fa-2x"
-              id="edx-footer-icon-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 example subreddit
+              Subscribe to the edX subreddit
            </span>
          </a>
        </li>
@@ -943,7 +1466,7 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
            target="_blank"
          >
            <img
-              alt="Download the example mobile app from the Apple App Store"
+              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"
            />
@@ -957,7 +1480,7 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
            target="_blank"
          >
            <img
-              alt="Download the example mobile app from Google Play"
+              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"
            />
@@ -965,13 +1488,14 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
        </li>
      </ul>
      <p>
-        <span>
-          © 2012–2019 example Inc.
-        </span>
+        © 2012–2019 edX Inc.
        <br />
-        <span>
-          EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 粤ICP备17044299号-2
-        </span>
+        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>
--- a/src/lib/components/SiteFooter/index.jsx
+++ b/src/lib/components/SiteFooter/index.jsx
@@ -1,17 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
-import { Hyperlink, Icon } from '@edx/paragon';
-import messages from './SiteFooter.messages';
+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) {
@@ -24,188 +31,57 @@ class SiteFooter extends React.Component {
    this.props.handleAllTrackEvents(eventName, properties);
  }

-  renderSiteLogo() {
-    return (
-      <img
-        src={this.props.siteLogo}
-        alt={this.props.intl.formatMessage(
-          messages['footer.site-footer.site-logo.alt-text'],
-          { siteName: this.props.siteName },
-        )}
-      />
-    );
-  }
-
-  renderMarketingSiteUrl(path) {
-    return `${this.props.marketingSiteBaseUrl}${path}`;
-  }
-
-  renderSocialLinks() {
+  formatUrl(linkData) {
    const {
-      intl,
-      siteName,
-      showSocialLinks,
-      facebookUrl,
-      twitterUrl,
-      youTubeUrl,
-      linkedInUrl,
-      googlePlusUrl,
-      redditUrl,
-    } = this.props;
-    let socialLinks = null;
-    if (showSocialLinks) {
-      socialLinks = (
-        <ul
-          className="d-flex flex-row justify-content-between list-unstyled max-width-222 p-0 mb-4"
-        >
-          {/* TODO: Use Paragon HyperLink with Icon. */}
-          {/*  Would need to add rel to paragon if we still need it. */}
-          <li>
-            <a
-              href={facebookUrl}
-              title={intl.formatMessage(messages['footer.site-footer.facebook.title'])}
-              rel="noopener noreferrer"
-              target="_blank"
-              onClick={this.externalLinkClickHandler}
-            >
-              <Icon
-                id="edx-footer-icon-facebook"
-                className={['fa', 'fa-facebook-square', 'fa-2x']}
-                screenReaderText={intl.formatMessage(
-                  messages['footer.site-footer.facebook.screen-reader-text'],
-                  { siteName },
-                )}
-              />
-            </a>
-          </li>
-          <li>
-            <a
-              href={twitterUrl}
-              title={intl.formatMessage(messages['footer.site-footer.twitter.title'])}
-              rel="noopener noreferrer"
-              target="_blank"
-              onClick={this.externalLinkClickHandler}
-            >
-              <Icon
-                id="edx-footer-icon-twitter"
-                className={['fa', 'fa-twitter-square', 'fa-2x']}
-                screenReaderText={intl.formatMessage(
-                  messages['footer.site-footer.twitter.screen-reader-text'],
-                  { siteName },
-                )}
-              />
-            </a>
-          </li>
-          <li>
-            <a
-              href={youTubeUrl}
-              title={intl.formatMessage(messages['footer.site-footer.youtube.title'])}
-              rel="noopener noreferrer"
-              target="_blank"
-              onClick={this.externalLinkClickHandler}
-            >
-              <Icon
-                id="edx-footer-icon-youtube"
-                className={['fa', 'fa-youtube-square', 'fa-2x']}
-                screenReaderText={intl.formatMessage(
-                  messages['footer.site-footer.youtube.screen-reader-text'],
-                  { siteName },
-                )}
-              />
-            </a>
-          </li>
-          <li>
-            <a
-              href={linkedInUrl}
-              title={intl.formatMessage(messages['footer.site-footer.linkedin.title'])}
-              rel="noopener noreferrer"
-              target="_blank"
-              onClick={this.externalLinkClickHandler}
-            >
-              <Icon
-                id="edx-footer-icon-linkedin"
-                className={['fa', 'fa-linkedin-square', 'fa-2x']}
-                screenReaderText={intl.formatMessage(
-                  messages['footer.site-footer.linkedin.screen-reader-text'],
-                  { siteName },
-                )}
-              />
-            </a>
-          </li>
-          <li>
-            <a
-              href={googlePlusUrl}
-              title={intl.formatMessage(messages['footer.site-footer.google-plus.title'])}
-              rel="noopener noreferrer"
-              target="_blank"
-              onClick={this.externalLinkClickHandler}
-            >
-              <Icon
-                id="edx-footer-icon-google"
-                className={['fa', 'fa-google-plus-square', 'fa-2x']}
-                screenReaderText={intl.formatMessage(
-                  messages['footer.site-footer.google-plus.screen-reader-text'],
-                  { siteName },
-                )}
-              />
-            </a>
-          </li>
-          <li>
-            <a
-              href={redditUrl}
-              title={intl.formatMessage(messages['footer.site-footer.reddit.title'])}
-              rel="noopener noreferrer"
-              target="_blank"
-              onClick={this.externalLinkClickHandler}
-            >
-              <Icon
-                id="edx-footer-icon-reddit"
-                className={['fa', 'fa-reddit-square', 'fa-2x']}
-                screenReaderText={intl.formatMessage(
-                  messages['footer.site-footer.reddit.screen-reader-text'],
-                  { siteName },
-                )}
-              />
-            </a>
-          </li>
-        </ul>
+      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 socialLinks;
+
+    return null;
  }

  renderMobileLinks() {
    const {
-      intl,
-      siteName,
      showMobileLinks,
-      appleAppStoreUrl,
-      googlePlayUrl,
+      appleAppStore,
+      googlePlay,
    } = this.props;
-    let mobileLinks = null;
+
    if (showMobileLinks) {
-      mobileLinks = (
+      return (
        <ul className="d-flex flex-row justify-content-between list-unstyled max-width-264 p-0 mb-5">
          <li>
-            <a href={appleAppStoreUrl} rel="noopener noreferrer" target="_blank" onClick={this.externalLinkClickHandler}>
+            <a href={appleAppStore.url} rel="noopener noreferrer" target="_blank" onClick={this.externalLinkClickHandler}>
              <img
                className="max-height-39"
-                alt={intl.formatMessage(
-                  messages['footer.site-footer.apple-app-store.alt-text'],
-                  { siteName },
-                )}
+                alt={appleAppStore.altText}
                src="https://prod-edxapp.edx-cdn.org/static/images/app/app_store_badge_135x40.d0558d910630.svg"
              />
            </a>
          </li>
          <li>
-            <a href={googlePlayUrl} rel="noopener noreferrer" target="_blank" onClick={this.externalLinkClickHandler}>
+            <a href={googlePlay.url} rel="noopener noreferrer" target="_blank" onClick={this.externalLinkClickHandler}>
              <img
                className="max-height-39"
-                alt={intl.formatMessage(
-                  messages['footer.site-footer.google-play.alt-text'],
-                  { siteName },
-                )}
+                alt={googlePlay.altText}
                src="https://prod-edxapp.edx-cdn.org/static/images/app/google_play_badge_45.6ea466e328da.png"
              />
            </a>
@@ -213,216 +89,92 @@ class SiteFooter extends React.Component {
        </ul>
      );
    }
-    return mobileLinks;
+
+    return null;
  }

  render() {
    const {
-      intl,
-      siteName,
-      openSourceUrl,
-      termsOfServiceUrl,
-      privacyPolicyUrl,
-      contactUrl,
-      supportUrl,
+      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={intl.formatMessage(messages['footer.site-footer.footer.aria-label'])}
+        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">
-            <Hyperlink
-              destination={this.renderMarketingSiteUrl('/')}
-              content={this.renderSiteLogo()}
-              aria-label={intl.formatMessage(
-                messages['footer.site-footer.site-logo.aria-label'],
-                { siteName },
-              )}
-            />
-          </div>
-          <div className="area-2">
-            <h2>{siteName}</h2>
-            <ul className="list-unstyled p-0 m-0">
-              <li>
-                <a href={this.renderMarketingSiteUrl('/about-us')}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.about"
-                    defaultMessage="About"
-                  />
-                </a>
-              </li>
-              <li>
-                <a href={this.renderMarketingSiteUrl('/enterprise')}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.business"
-                    defaultMessage="{siteName} for Business"
-                    values={{ siteName }}
-                  />
-                </a>
-              </li>
-              <li>
-                <a href={this.renderMarketingSiteUrl('/affiliate-program')}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.affiliates"
-                    defaultMessage="Affiliates"
-                  />
-                </a>
-              </li>
-              <li>
-                <a href={openSourceUrl}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.open-source"
-                    defaultMessage="Open {siteName}"
-                    values={{ siteName }}
-                    description="Open Source link text"
-                  />
-                </a>
-              </li>
-              <li>
-                <a href={this.renderMarketingSiteUrl('/careers')}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.careers"
-                    defaultMessage="Careers"
-                  />
-                </a>
-              </li>
-              <li>
-                <a href={this.renderMarketingSiteUrl('/news-announcements')}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.news"
-                    defaultMessage="News"
-                  />
-                </a>
-              </li>
-            </ul>
-          </div>
-          <div className="area-3">
-            <h2>
-              <FormattedMessage
-                id="footer.site-footer.link.header.legal"
-                defaultMessage="Legal"
-                description="Header for legal links"
-              />
-            </h2>
-            <ul className="list-unstyled p-0 m-0">
-              <li>
-                <a href={termsOfServiceUrl}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.terms-of-service"
-                    defaultMessage="Terms of Service & Honor Code"
-                  />
-                </a>
-              </li>
-              <li>
-                <a href={privacyPolicyUrl}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.privacy"
-                    defaultMessage="Privacy Policy"
-                  />
-                </a>
-              </li>
-              <li>
-                <a href={this.renderMarketingSiteUrl('/accessibility')}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.accessibility"
-                    defaultMessage="Accessibility Policy"
-                  />
-                </a>
-              </li>
-              <li>
-                <a href={this.renderMarketingSiteUrl('/trademarks')}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.trademark"
-                    defaultMessage="Trademark Policy"
-                  />
-                </a>
-              </li>
-              <li>
-                <a href={this.renderMarketingSiteUrl('/sitemap')}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.sitemap"
-                    defaultMessage="Sitemap"
-                  />
-                </a>
-              </li>
-            </ul>
-          </div>
-          <div className="area-4">
-            <h2>
-              <FormattedMessage
-                id="footer.site-footer.link.header.connect"
-                defaultMessage="Connect"
-                description="Header for connect links"
-              />
-            </h2>
-            <ul className="list-unstyled p-0 m-0">
-              <li>
-                <a href={this.renderMarketingSiteUrl('/blog')}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.blog"
-                    defaultMessage="Blog"
-                  />
-                </a>
-              </li>
-              <li>
-                <a href={contactUrl}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.contact-us"
-                    defaultMessage="Contact Us"
-                  />
-                </a>
-              </li>
-              <li>
-                <a href={supportUrl}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.help-center"
-                    defaultMessage="Help Center"
-                  />
-                </a>
-              </li>
-              <li>
-                <a href={this.renderMarketingSiteUrl('/media-kit')}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.media-kit"
-                    defaultMessage="Media Kit"
-                  />
-                </a>
-              </li>
-              <li>
-                <a href={this.renderMarketingSiteUrl('/donate')}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.donate"
-                    defaultMessage="Donate"
-                  />
-                </a>
-              </li>
-            </ul>
+            <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">
-            {this.renderSocialLinks()}
+            {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>
-              <FormattedMessage
-                id="footer.site-footer.copyright-text"
-                defaultMessage="{copyrightSymbol} {startDate}–{endDate} {siteName} Inc."
-                values={{
-                  copyrightSymbol: '©',
-                  startDate: '2012',
-                  endDate: `${new Date().getFullYear()}`,
-                  siteName,
-                }}
-                description="Footer copyright text with copyright symbol and dates"
-              />
+              {copyright}
              <br />
-              <FormattedMessage
-                id="footer.site-footer.trademark-text"
-                defaultMessage="EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | {icpLicense}"
-                values={{ icpLicense: '粤ICP备17044299号-2' }}
-                description="Footer trademark text"
-              />
+              {trademark}
            </p>
          </div>
        </div>
@@ -431,49 +183,83 @@ class SiteFooter extends React.Component {
  }
 }

+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 = {
-  siteName: PropTypes.string,
-  siteLogo: PropTypes.node,
+  ariaLabel: PropTypes.string.isRequired,
+  siteLogo: PropTypes.shape({
+    src: PropTypes.node,
+    altText: PropTypes.string,
+    ariaLabel: PropTypes.string,
+  }),
  marketingSiteBaseUrl: PropTypes.string,
-  supportUrl: PropTypes.string,
-  contactUrl: PropTypes.string,
-  openSourceUrl: PropTypes.string,
-  termsOfServiceUrl: PropTypes.string,
-  privacyPolicyUrl: PropTypes.string,
-  showSocialLinks: PropTypes.bool,
-  facebookUrl: PropTypes.string,
-  twitterUrl: PropTypes.string,
-  youTubeUrl: PropTypes.string,
-  linkedInUrl: PropTypes.string,
-  googlePlusUrl: PropTypes.string,
-  redditUrl: 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,
-  appleAppStoreUrl: PropTypes.string,
-  googlePlayUrl: PropTypes.string,
+  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,
-  intl: intlShape.isRequired,
+};
+
+const linkSectionDefault = {
+  title: null,
+  linkList: [],
 };

 SiteFooter.defaultProps = {
-  siteName: null,
  siteLogo: null,
  marketingSiteBaseUrl: null,
-  supportUrl: null,
-  contactUrl: null,
-  openSourceUrl: null,
-  termsOfServiceUrl: null,
-  privacyPolicyUrl: null,
-  showSocialLinks: true,
-  facebookUrl: null,
-  twitterUrl: null,
-  youTubeUrl: null,
-  linkedInUrl: null,
-  googlePlusUrl: null,
-  redditUrl: null,
+  linkSectionOne: linkSectionDefault,
+  linkSectionTwo: linkSectionDefault,
+  linkSectionThree: linkSectionDefault,
+  socialLinks: [],
  showMobileLinks: true,
-  appleAppStoreUrl: null,
-  googlePlayUrl: null,
+  appleAppStore: null,
+  googlePlay: null,
+  supportedLanguages: [],
+  languageForm: null,
+  copyright: null,
+  trademark: null,
 };

-export default injectIntl(SiteFooter);
+export default SiteFooter;
 export { EVENT_NAMES };
--- a/stats.json
+++ b/stats.json
Author	SHA1	Message	Date
AlasdairSwan	31e255ebe9	Merge pull request #44 from edx/alasdair/remove-paragon perf(paragon): remove paragon to reduce bundle size	2019-06-21 11:14:29 -04:00
AlasdairSwan	349f83f686	perf(paragon): remove paragon to reduce bundle size	2019-06-21 11:11:01 -04:00
David Joy	e0c205ce14	fix: non deprecated use of hyperlink (#43 )	2019-06-21 09:56:05 -04:00
albemarle	81398c8cfd	Merge pull request #42 from edx/albemarle/different-diff fix(i18n): make detect_changed_source_translations work for both push and pull jobs	2019-06-11 13:51:08 -04:00
albemarle	3fcd76b455	fix(i18n): make detect_changed_source_translations work for both push and pull jobs	2019-06-11 13:34:27 -04:00
edX Transifex Bot	a8f57aa553	fix(i18n): update translations	2019-06-09 16:32:55 -04:00
David Joy	f32b0c8dcf	Merge pull request #40 from edx/djoy/upgrade_i18n fix: upgrade frontend-i18n library	2019-06-07 11:12:41 -04:00
David Joy	fb1f5c2d50	fix: delete old i18n concat file	2019-06-07 10:53:50 -04:00
David Joy	1a51d992cd	Update .gitignore	2019-06-07 10:07:30 -04:00
David Joy	e9c28163d9	fix: upgrade frontend-i18n library	2019-06-07 08:58:38 -04:00
AlasdairSwan	6db2d70e97	Merge pull request #37 from edx/alasdair/update-link-sections-to-accept-arrays fix(linkprops): update link props	2019-06-04 09:03:27 -04:00
AlasdairSwan	3ab4adf10b	fix(linkprops): update link props BREAKING CHANGE move to link arrays and remove strings from component (and thus the need for i18n)	2019-06-03 15:57:30 -04:00
edX Transifex Bot	a482325eac	fix(i18n): update translations	2019-06-02 17:33:12 -04:00
Douglas Hall	d919d1a577	Merge pull request #38 from edx/douglashall/finish_i18n_refactoring fix: modify babelrc for i18n	2019-05-31 14:17:28 -04:00
Douglas Hall	4b3a91138d	fix: modify babelrc for i18n	2019-05-31 14:11:48 -04:00
David Joy	7680ad3393	Merge pull request #36 from edx/djoy/is-es5 fix: adding es check	2019-05-28 13:33:09 -04:00
David Joy	061b41bee8	fix: adding es check	2019-05-28 09:42:04 -04:00
Douglas Hall	cacae4789f	fix: move to @edx/frontend-i18n dependency (#35 ) fix: move to @edx/frontend-i18n dependency	2019-05-24 14:20:22 -04:00
Douglas Hall	adceca6b53	fix: move to @edx/frontend-i18n dependency BREAKING CHANGE: consumers will now be required to supply @edx/frontend-i18n instead of react-intl	2019-05-24 12:06:17 -04:00
Douglas Hall	ab61fd35eb	Merge pull request #34 from edx/douglashall/reduce_bundle_size fix: remove paragon from bundle	2019-05-23 14:34:38 -04:00
Douglas Hall	4d739f2962	fix: remove paragon from bundle BREAKING CHANGE: Now requires containing app to provide `@edx/paragon`.	2019-05-23 14:28:28 -04:00
albemarle	28a6c85bc0	Merge pull request #30 from edx/aehsan/prod-277/update_the_edx_icp_license Updated ICP license in footer	2019-05-22 14:01:36 -04:00
adeelehsan	6125988bbd	Updated ICP license in footer	2019-05-22 00:33:19 +05:00
edX Transifex Bot	9eeccc63cb	fix(i18n): update translations	2019-05-19 17:33:41 -04:00
Robert Raposa	2f33c6718b	Merge pull request #31 from edx/robrap/ARCH-748-fix-i18n-jobs fix(i18n): fix i18n make targets	2019-05-16 13:20:46 -04:00
Adam Stankiewicz	89397fcfdb	Merge pull request #32 from edx/astankiewicz/downgrade-query-string fix(query-string): downgrade query-string to version 5 for es5	2019-05-16 12:57:21 -04:00
Adam Stankiewicz	278b4b1473	fix(query-string): downgrade query-string to version 5 for es5	2019-05-16 09:44:44 -07:00
Robert Raposa	7ff9039bb7	fix(i18n): fix i18n make targets ARCH-748	2019-05-16 12:27:27 -04:00
Chris Pappas	0cf3164901	Merge pull request #28 from edx/cpappas/ENT-1888 fix: updating enterprise marketing link logic	2019-05-10 16:55:50 -04:00
Christopher Pappas	bf8020dfac	fix: updating business marketing footer fix: adding https:// to business marketing link fix: fixing marketing link for business fix: fixing marketing link for business	2019-05-10 15:49:40 -04:00
Adam Butterworth	f2a13b8c8e	fix: move dependencies out of footer	2019-05-10 08:27:18 -06:00
Adam Butterworth	3dd9b25d11	fix: move peerDependencies to dependencies	2019-05-10 10:24:23 -04:00
Adam Butterworth	21d7fe04e3	fix: move dependencies out of footer	2019-05-10 10:14:37 -04:00
AlasdairSwan	46d464d515	Merge pull request #27 from edx/alasdair/add-language-selector Alasdair/add language selector	2019-05-08 13:42:52 -04:00
AlasdairSwan	85ed8fbff4	feat(langselect): add optional language selector	2019-05-08 13:38:01 -04:00
AlasdairSwan	d6adfec189	Merge pull request #25 from edx/alasdair/update-social-media-link-approach fix(sociallinks): update link props	2019-05-07 12:53:21 -04:00
AlasdairSwan	8b1943356e	fix(sociallinks): update link props BREAKING CHANGE will not render social links unless array is passed in	2019-05-07 12:17:42 -04:00
AlasdairSwan	5aae6e8336	Merge pull request #26 from edx/alasdair/version-bump fix(version): trivial update to minor version bump	2019-05-07 12:12:33 -04:00
AlasdairSwan	ae18ad45b9	fix(version): trivial update to minor version bump	2019-05-07 11:56:32 -04:00
AlasdairSwan	0e15bb7e55	Merge pull request #24 from edx/alasdair/revert-social-media-links Revert social media links PR	2019-05-07 11:30:02 -04:00
AlasdairSwan	ff664b9d3b	Revert social media links PR	2019-05-07 11:24:04 -04:00
AlasdairSwan	da91fb6392	Merge pull request #23 from edx/alasdair/fontawesome-svg-and-social-link-array-prop fix(sociallinks): array for social props BREAKING CHANGE: props change	2019-05-07 10:29:25 -04:00
AlasdairSwan	f265c7daa6	fix(sociallinks): array for social props BREAKING CHANGE: props change	2019-05-06 15:08:50 -04:00
albemarle	3037e4d8a6	Merge pull request #22 from edx/albemarle/i18n-travis build: validate i18n	2019-05-06 10:20:20 -04:00
albemarle	b2a7696c0e	build: validate i18n	2019-05-03 15:32:30 -04:00
albemarle	6dc8f64ccb	Merge pull request #19 from edx/albemarle/more-i18n fix(i18n): use up-to-date i18n-concat.js	2019-04-09 15:46:31 -04:00
albemarle	0453d7fbaa	fix(i18n): use up-to-date i18n-concat.js	2019-04-09 15:38:46 -04:00
Robert Raposa	fa6d38f422	Merge pull request #18 from edx/albemarle/check-changes fix(i18n): add detect_changed_source_translations target to stop jobs erroring	2019-04-05 16:52:44 -04:00
albemarle	9f3e945d4e	fix(i18n): add detect_changed_source_translations target to stop jobs erroring	2019-04-05 16:42:50 -04:00