refactor: use paragon hyperlink again

perf(paragon): remove paragon to reduce bundle size

.babelrc

@@ -1,43 +1,27 @@
 {
+  "presets": [
+    ["env", {
+      "targets": {
+        "browsers": ["last 2 versions", "ie 11"]
+      }
+    }],
+    "babel-preset-react"
+  ],
+  "plugins": [
+    "transform-object-rest-spread"
+  ],
   "env": {
-    "development": {
-      "presets": [
-        ["env", {
-          "targets": {
-            "browsers": ["last 2 versions", "ie 11"]
-          }
-        }],
-        "babel-preset-react"
-      ],
-      "plugins": [
-        "transform-object-rest-spread"
-      ]
-    },
     "test": {
-      "presets": [
-        ["env", {
-          "targets": {
-            "browsers": ["last 2 versions", "ie 11"]
-          }
-        }],
-        "babel-preset-react"
-      ],
       "plugins": [
-        "rewire",
+        "rewire"
-        "transform-object-rest-spread"
       ]
     },
-    "production": {
+    "i18n": {
-      "presets": [
-        ["env", {
-          "targets": {
-            "browsers": ["last 2 versions", "ie 11"]
-          }
-        }],
-        "babel-preset-react"
-      ],
       "plugins": [
-        "transform-object-rest-spread"
+        ["react-intl", {
+          "messagesDir": "./temp/babel-plugin-react-intl",
+          "moduleSourceName": "@edx/frontend-i18n"
+        }]
       ]
     }
   }

.gitignore

@@ -1,5 +1,9 @@
 coverage
 dist
 node_modules
+temp
 
 .idea/
+
+src/i18n/transifex_input.json
+temp/babel-plugin-react-intl

.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

.tx/config

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

Makefile

@@ -0,0 +1,50 @@
+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
+
+i18n.extract:
+	# Pulling display strings from .jsx files into .json files...
+	rm -rf $(transifex_temp)
+	npm run-script i18n_extract
+
+i18n.concat:
+	# Gathering JSON messages into one file...
+	$(transifex_utils) $(transifex_temp) $(transifex_input)
+
+extract_translations: | requirements i18n.extract i18n.concat
+
+# Despite the name, we actually need this target to detect changes in the incoming translated message files as well.
+detect_changed_source_translations:
+	# Checking for changed translations...
+	git diff --exit-code $(i18n)
+
+# Pushes translations to Transifex.  You must run make extract_translations first.
+push_translations:
+	# Pushing strings to Transifex...
+	tx push -s
+	# Fetching hashes from Transifex...
+	./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
+	# Writing out comments to file...
+	$(transifex_utils) $(transifex_temp) --comments
+	# Pushing comments to Transifex...
+	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)
+
+# Pulls translations from Transifex.
+pull_translations:
+	tx pull -f --mode reviewed --language=$(transifex_langs)
+
+# This target is used by Travis.
+validate-no-uncommitted-package-lock-changes:
+	# Checking for package-lock.json changes...
+	git diff --exit-code package-lock.json

README.rst

@@ -7,8 +7,7 @@ frontend-component-footer
 frontend-component-footer is a library containing a site footer
 component for use when building edX frontend applications.
 
-At this time, this componenet is hard-coded to match the legacy LMS site footer, including all of its links.
+At this time, this component is hard-coded to match the legacy LMS site footer, including all of its links. As implemented, this component should probably be called the ``frontend-component-lms-footer``.
-Note: As implemented, it should really be called the ``frontend-component-lms-footer``.
 
 Usage
 -----
@@ -18,9 +17,14 @@ To install frontend-component-footer into your project::
    npm i --save @edx/frontend-component-footer
 
 The component expects properties specifying the various URLs that are
-linked in the footer. See the sample app in src/index.jsx for an example
+linked in the footer. See the sample app in `src/index.jsx <src/index.jsx>`__ for an example
 of how the SiteFooter component can be specified.
 
+Requirements
+------------
+
+This component uses ``@edx/frontend-i18n``. Any containing app must provide ``@edx/frontend-i18n`` as a peer dependency, and be wrapped inside an ``IntlProvider`` element, whether or not your consuming application is actually localized. For a basic default locale (English) version, follow the ``IntlProvider`` example in the sample application in `src/index.jsx <src/index.jsx>`__.
+
 Development
 -----------
 

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 HtmlWebpackPlugin = require('html-webpack-plugin'); // eslint-disable-line import/no-extraneous-dependencies
-const webpack = require('webpack');
+const webpack = require('webpack'); // eslint-disable-line import/no-extraneous-dependencies
 
 const commonConfig = require('./webpack.common.config.js');
 

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',
@@ -13,6 +13,7 @@ module.exports = Merge.smart(commonConfig, {
     path: path.resolve(__dirname, '../dist'),
     library: 'frontend-component-footer',
     libraryTarget: 'umd',
+    globalObject: 'typeof self !== \'undefined\' ? self : this',
   },
   resolve: {
     extensions: ['.js', '.jsx'],
@@ -34,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

package-lock.json

@@ -914,6 +914,23 @@
         }
       }
     },
+    "@babel/runtime": {
+      "version": "7.3.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.3.4.tgz",
+      "integrity": "sha512-IvfvnMdSaLBateu0jfsYIpZTxAc2cKEXEMiezGGN75QcBcecDUKd3PgLAncT0oOgxKy8dd8hrJKj9MfzgfZd6g==",
+      "dev": true,
+      "requires": {
+        "regenerator-runtime": "^0.12.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==",
+          "dev": true
+        }
+      }
+    },
     "@babel/template": {
       "version": "7.2.2",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.2.2.tgz",
@@ -1401,38 +1418,154 @@
         "find-up": "^2.1.0"
       }
     },
+    "@cospired/i18n-iso-languages": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@cospired/i18n-iso-languages/-/i18n-iso-languages-2.0.2.tgz",
+      "integrity": "sha512-APBpZvdQrC1MJWMzk33V7FR2RhBRtnH2QPLqZzS+qia7PixwgWNlnX7UfHjhx+YWkM53GdsZKs40EBkSwADuMA==",
+      "dev": true
+    },
     "@edx/edx-bootstrap": {
-      "version": "1.0.3",
+      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/@edx/edx-bootstrap/-/edx-bootstrap-1.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/@edx/edx-bootstrap/-/edx-bootstrap-2.2.1.tgz",
-      "integrity": "sha512-3T6yYiLK9WdIn0iwjLoWfrsDqgfd0byiVB3aXK7w4oaltdVzA/fB/qU3iKrJ8cy4T6ZgDA2uFP726fU0StmxUw==",
+      "integrity": "sha512-HkQ45u46ejX7WYwJX6ar/0FGBjx4F7bZvt3Dd4A677st0ic/47X5vQlqMqmK/M08C+GXaunNbZdbyF/ROrmwxw==",
       "dev": true,
       "requires": {
-        "bootstrap": "4.0.0",
+        "bootstrap": "^4.3.1"
-        "jquery": "^3.2.1",
-        "popper.js": "^1.12.6"
       }
     },
-    "@edx/paragon": {
+    "@edx/frontend-i18n": {
-      "version": "3.8.0",
+      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-3.8.0.tgz",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-i18n/-/frontend-i18n-2.1.1.tgz",
-      "integrity": "sha512-4HqsCY8sA+2XdI/Jx2o+gqCJPpAUzJ+jlLvkUGiUSk/QxWKYIWAxuXAiE6kyZzA1I7C6+H7LlwWHG4ticoU+2g==",
+      "integrity": "sha512-1uPagQWBfnZn6EFjJmu+igfEG4F8GFxYx+piLsyPsq/vZs6G1qJPa6hM4Aipx+JIEAUr72l7sExgCPBj+G/71g==",
       "dev": true,
       "requires": {
-        "@edx/edx-bootstrap": "^1.0.0",
+        "@cospired/i18n-iso-languages": "^2.0.2",
-        "@sambego/storybook-styles": "^1.0.0",
+        "glob": "^7.1.4",
-        "airbnb-prop-types": "^2.10.0",
+        "i18n-iso-countries": "^4.0.0",
-        "babel-polyfill": "^6.26.0",
+        "iso-countries-languages": "^0.2.1",
-        "classnames": "^2.2.5",
+        "react-intl": "^2.9.0",
-        "email-prop-type": "^1.1.5",
+        "universal-cookie": "^4.0.0"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "7.1.4",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.4.tgz",
+          "integrity": "sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        }
+      }
+    },
+    "@edx/frontend-logging": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-logging/-/frontend-logging-2.0.2.tgz",
+      "integrity": "sha512-DFj4CXcy5jStwkEN/sBiTFV5IB06KnTdWIfk/OYpx7EnMJCXL7b8BawW74xstyVjkGXRhQr08sgt/cY+hNGd7A==",
+      "dev": true
+    },
+    "@edx/paragon": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-6.1.0.tgz",
+      "integrity": "sha512-S1cHYwLhBiE2FDuTiK/aTzq4T2kjRau7BewYZ8oJDK02OKv6lMHmekawWyyCK4nE9zGkPst5iawQmBYnfM+obw==",
+      "dev": true,
+      "requires": {
+        "@fortawesome/fontawesome-svg-core": "^1.2.18",
+        "@fortawesome/free-solid-svg-icons": "^5.8.2",
+        "@fortawesome/react-fontawesome": "^0.1.4",
+        "airbnb-prop-types": "^2.12.0",
+        "bootstrap": "^4.3.1",
+        "classnames": "^2.2.6",
+        "email-prop-type": "^3.0.0",
         "font-awesome": "^4.7.0",
         "mailto-link": "^1.0.0",
-        "prop-types": "^15.5.8",
-        "react": "^16.4.2",
-        "react-dom": "^16.1.0",
-        "react-element-proptypes": "^1.0.0",
         "react-proptype-conditional-require": "^1.0.4",
-        "react-responsive": "^5.0.0",
+        "react-responsive": "^6.1.1",
-        "sanitize-html": "^1.18.2"
+        "react-transition-group": "^4.0.0",
+        "sanitize-html": "^1.20.0"
+      },
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": {
+          "version": "0.2.19",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.19.tgz",
+          "integrity": "sha512-nd2Ul/CUs8U9sjofQYAALzOGpgkVJQgEhIJnOHaoyVR/LeC3x2mVg4eB910a4kS6WgLPebAY0M2fApEI497raQ==",
+          "dev": true
+        },
+        "@fortawesome/fontawesome-svg-core": {
+          "version": "1.2.19",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.19.tgz",
+          "integrity": "sha512-D4ICXg9oU08eF9o7Or392gPpjmwwgJu8ecCFusthbID95CLVXOgIyd4mOKD9Nud5Ckz+Ty59pqkNtThDKR0erA==",
+          "dev": true,
+          "requires": {
+            "@fortawesome/fontawesome-common-types": "^0.2.19"
+          }
+        },
+        "@fortawesome/free-solid-svg-icons": {
+          "version": "5.9.0",
+          "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.9.0.tgz",
+          "integrity": "sha512-U8YXPfWcSozsCW0psCtlRGKjjRs5+Am5JJwLOUmVHFZbIEWzaz4YbP84EoPwUsVmSAKrisu3QeNcVOtmGml0Xw==",
+          "dev": true,
+          "requires": {
+            "@fortawesome/fontawesome-common-types": "^0.2.19"
+          }
+        }
+      }
+    },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.17",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.17.tgz",
+      "integrity": "sha512-DEYsEb/iiGVoMPQGjhG2uOylLVuMzTxOxysClkabZ5n80Q3oFDWGnshCLKvOvKoeClsgmKhWVrnnqvsMI1cAbw==",
+      "dev": true
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.17",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.17.tgz",
+      "integrity": "sha512-TORMW/wIX2QyyGBd4XwHGPir4/0U18Wxf+iDBAUW3EIJ0/VC/ZMpJOiyiCe1f8g9h0PPzA7sqVtl8JtTUtm4uA==",
+      "dev": true,
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.17"
+      }
+    },
+    "@fortawesome/free-brands-svg-icons": {
+      "version": "5.8.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.8.1.tgz",
+      "integrity": "sha512-NN5Nap2D5e7Lusa5uarAUkcaO7PMbme5wmUF8kofZzPUZR753zDg/UFffi+LLE2Mi9zRXCJEYmIRfMON9SxLPg==",
+      "dev": true,
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.17"
+      }
+    },
+    "@fortawesome/free-regular-svg-icons": {
+      "version": "5.8.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.8.1.tgz",
+      "integrity": "sha512-U+tFjDyQpVdD0UPWoKRBVLhh0J1/q3iaWDrnxNMJKuKRmerc4d0jfiZdM2X7agOTcG7amvcllRBiWCu2FwYlMA==",
+      "dev": true,
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.17"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.8.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.8.1.tgz",
+      "integrity": "sha512-FUcxR75PtMOo3ihRHJOZz64IsWIVdWgB2vCMLJjquTv487wVVCMH5H5gWa72et2oI9lKKD2jvjQ+y+7mxhscVQ==",
+      "dev": true,
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.17"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.4.tgz",
+      "integrity": "sha512-GwmxQ+TK7PEdfSwvxtGnMCqrfEm0/HbRHArbUudsYiy9KzVCwndxa2KMcfyTQ8El0vROrq8gOOff09RF1oQe8g==",
+      "dev": true,
+      "requires": {
+        "humps": "^2.0.1",
+        "prop-types": "^15.5.10"
       }
     },
     "@marionebl/sander": {
@@ -1504,12 +1637,6 @@
         "url-template": "^2.0.8"
       }
     },
-    "@sambego/storybook-styles": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@sambego/storybook-styles/-/storybook-styles-1.0.0.tgz",
-      "integrity": "sha512-n0SqZwDewUDRaStEcoNMiYy9qovaLVStsh4Gb2dc2LLiG3IIK0UXdeR1N7puVuRihJq/192uOyGPCjZ/NAteuA==",
-      "dev": true
-    },
     "@semantic-release/commit-analyzer": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@semantic-release/commit-analyzer/-/commit-analyzer-6.1.0.tgz",
@@ -1843,12 +1970,24 @@
         "defer-to-connect": "^1.0.1"
       }
     },
+    "@types/cookie": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.3.tgz",
+      "integrity": "sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==",
+      "dev": true
+    },
     "@types/node": {
       "version": "10.12.18",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.18.tgz",
       "integrity": "sha512-fh+pAqt4xRzPfqA6eh3Z2y6fyZavRIumvjhaCL753+TVkGKGhpPeyrJG2JftD0T9q4GF00KjefsQ+PQNDdWQaQ==",
       "dev": true
     },
+    "@types/object-assign": {
+      "version": "4.0.30",
+      "resolved": "https://registry.npmjs.org/@types/object-assign/-/object-assign-4.0.30.tgz",
+      "integrity": "sha1-iUk3HVqZ9Dge4PHfCpt6GH4H5lI=",
+      "dev": true
+    },
     "@types/q": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.1.tgz",
@@ -2142,9 +2281,9 @@
       }
     },
     "airbnb-prop-types": {
-      "version": "2.11.0",
+      "version": "2.13.2",
-      "resolved": "https://registry.npmjs.org/airbnb-prop-types/-/airbnb-prop-types-2.11.0.tgz",
+      "resolved": "https://registry.npmjs.org/airbnb-prop-types/-/airbnb-prop-types-2.13.2.tgz",
-      "integrity": "sha512-Y46/0gNVDy5gpedxIaoKjigdes+TouqVg7GTYQr73PBfE/lTSvOR/WIgUib0Zonm3Hyvlcax0mHr+v4K8DfGGw==",
+      "integrity": "sha512-2FN6DlHr6JCSxPPi25EnqGaXC4OC3/B3k1lCd6MMYrZ51/Gf/1qDfaR+JElzWa+Tl7cY2aYOlsYJGFeQyVHIeQ==",
       "dev": true,
       "requires": {
         "array.prototype.find": "^2.0.4",
@@ -2153,9 +2292,18 @@
         "is-regex": "^1.0.4",
         "object-is": "^1.0.1",
         "object.assign": "^4.1.0",
-        "object.entries": "^1.0.4",
+        "object.entries": "^1.1.0",
-        "prop-types": "^15.6.2",
+        "prop-types": "^15.7.2",
-        "prop-types-exact": "^1.2.0"
+        "prop-types-exact": "^1.2.0",
+        "react-is": "^16.8.6"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.8.6",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
+          "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==",
+          "dev": true
+        }
       }
     },
     "ajv": {
@@ -2194,6 +2342,12 @@
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
       "dev": true
     },
+    "ansi": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/ansi/-/ansi-0.3.1.tgz",
+      "integrity": "sha1-DELU+xcWDVqa8eSEus4cZpIsGyE=",
+      "dev": true
+    },
     "ansi-align": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-2.0.0.tgz",
@@ -2446,13 +2600,13 @@
       "dev": true
     },
     "array.prototype.find": {
-      "version": "2.0.4",
+      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.1.0.tgz",
-      "integrity": "sha1-VWpcU2LAhkgyPdrrnenRS8GGTJA=",
+      "integrity": "sha512-Wn41+K1yuO5p7wRZDl7890c3xvv5UBrfVXTVIe28rSQb6LS0fZMDrQB6PAcxQFRFy6vJTLDc3A2+3CjQdzVKRg==",
       "dev": true,
       "requires": {
-        "define-properties": "^1.1.2",
+        "define-properties": "^1.1.3",
-        "es-abstract": "^1.7.0"
+        "es-abstract": "^1.13.0"
       }
     },
     "array.prototype.flat": {
@@ -3033,6 +3187,17 @@
       "integrity": "sha1-5h+uBaHKiAGq3uV6bWa4zvr0QWc=",
       "dev": true
     },
+    "babel-plugin-react-intl": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-react-intl/-/babel-plugin-react-intl-3.0.1.tgz",
+      "integrity": "sha512-FqnEO+Tq7kJVUPKsSG3s5jaHi3pAC4RUR11IrscvjsfkOApLP2DtzNo6dtQ+tX+OzEzJx7cUms8aCw5BFyW5xg==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "intl-messageformat-parser": "^1.2.0",
+        "mkdirp": "^0.5.1"
+      }
+    },
     "babel-plugin-rewire": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-rewire/-/babel-plugin-rewire-1.2.0.tgz",
@@ -4011,9 +4176,9 @@
       "dev": true
     },
     "bootstrap": {
-      "version": "4.0.0",
+      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.3.1.tgz",
-      "integrity": "sha512-gulJE5dGFo6Q61V/whS6VM4WIyrlydXfCgkE+Gxe5hjrJ8rXLLZlALq7zq2RPhOc45PSwQpJkrTnc2KgD6cvmA==",
+      "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag==",
       "dev": true
     },
     "bottleneck": {
@@ -4522,6 +4687,25 @@
       "integrity": "sha512-ogq4NbUWf1uG/j66k0AmiO3GjqJAlQyF8n4w8a954cbCyFKmYGvRtgz6qkq2fWuduTXHibX7GyYL5Pg58Aks2g==",
       "dev": true
     },
+    "caporal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/caporal/-/caporal-1.1.0.tgz",
+      "integrity": "sha512-R5qo2QGoqBM6RvzHonGhUuEJSeqEa4lD1r+cPUEY2+YsXhpQVTS2TvScfIbi6ydFdhzFCNeNUB1v0YrRBvsbdg==",
+      "dev": true,
+      "requires": {
+        "bluebird": "^3.4.7",
+        "cli-table3": "^0.5.0",
+        "colorette": "1.0.1",
+        "fast-levenshtein": "^2.0.6",
+        "lodash.camelcase": "^4.3.0",
+        "lodash.kebabcase": "^4.1.1",
+        "lodash.merge": "^4.6.0",
+        "micromist": "1.1.0",
+        "prettyjson": "^1.2.1",
+        "tabtab": "^2.2.2",
+        "winston": "^2.3.1"
+      }
+    },
     "capture-exit": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-1.2.0.tgz",
@@ -4795,6 +4979,50 @@
         }
       }
     },
+    "cli-table3": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/cli-table3/-/cli-table3-0.5.1.tgz",
+      "integrity": "sha512-7Qg2Jrep1S/+Q3EceiZtQcDPWxhAvBw+ERf1162v4sikJrvojMHFqXt8QIVha8UlH9rgU0BeWPytZ9/TzYqlUw==",
+      "dev": true,
+      "requires": {
+        "colors": "^1.1.2",
+        "object-assign": "^4.1.0",
+        "string-width": "^2.1.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "dev": true
+        },
+        "string-width": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+          "dev": true,
+          "requires": {
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^4.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^3.0.0"
+          }
+        }
+      }
+    },
     "cli-width": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-1.1.1.tgz",
@@ -4955,6 +5183,12 @@
         "color-name": "^1.0.0"
       }
     },
+    "colorette": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.0.1.tgz",
+      "integrity": "sha512-40MnlppkzHhFjRhtXunbpqKUT+eJn0gyVGi8aQlNSG8T2CCy31NdD7yktcS0aizH1VP2OhhQCyGMeTp0a/fvaw==",
+      "dev": true
+    },
     "colormin": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/colormin/-/colormin-1.1.2.tgz",
@@ -5733,6 +5967,12 @@
         "logalot": "^2.1.0"
       }
     },
+    "cycle": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/cycle/-/cycle-1.0.3.tgz",
+      "integrity": "sha1-IegLK+hYD5i0aPN5QwZisEbDStI=",
+      "dev": true
+    },
     "cyclist": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz",
@@ -5835,8 +6075,7 @@
     "decode-uri-component": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
+      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
-      "dev": true
     },
     "decompress": {
       "version": "4.2.0",
@@ -6285,6 +6524,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "dom-serializer": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz",
@@ -6450,12 +6698,12 @@
       }
     },
     "email-prop-type": {
-      "version": "1.1.7",
+      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/email-prop-type/-/email-prop-type-1.1.7.tgz",
+      "resolved": "https://registry.npmjs.org/email-prop-type/-/email-prop-type-3.0.0.tgz",
-      "integrity": "sha512-5dhzRyH20+oooO5ZN4xJBSKuXj5gVg523gYGlj/bADXXx6ZsiB8x0XgPGLWOeZee9sURjgtyVc0RoBkfh0AfaA==",
+      "integrity": "sha512-717XiCoLR3g6KIKbjim2OuBr7BKNgCiP74z/4DGt2xPsX1h3VlY1GiKy42Qy1EqONfeg/3FhtgaUcsAy7YcqHQ==",
       "dev": true,
       "requires": {
-        "email-validator": "^2.0.0"
+        "email-validator": "^2.0.4"
       }
     },
     "email-validator": {
@@ -6643,6 +6891,25 @@
         "object-keys": "^1.0.12"
       }
     },
+    "es-check": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/es-check/-/es-check-5.0.0.tgz",
+      "integrity": "sha512-30n+EZt5KjazXEvyYr2DXJCOJJWfdT1unRp5+Szlcja6uGAB3Sh3QPjRsxd2xgN9SFj4S5P8pdBISwGcDdS45Q==",
+      "dev": true,
+      "requires": {
+        "acorn": "6.0.4",
+        "caporal": "1.1.0",
+        "glob": "^7.1.2"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "6.0.4",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.0.4.tgz",
+          "integrity": "sha512-VY4i5EKSKkofY2I+6QLTbTTN/UvEQPCo6eiwzzSaSWfpaDhOmStMCMod6wmuPciNq+XS0faCglFu2lHZpdHUtg==",
+          "dev": true
+        }
+      }
+    },
     "es-to-primitive": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.0.tgz",
@@ -7829,6 +8096,12 @@
       "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
       "dev": true
     },
+    "eyes": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/eyes/-/eyes-0.1.8.tgz",
+      "integrity": "sha1-Ys8SAjTGg3hdkCNIqADvPgzCC8A=",
+      "dev": true
+    },
     "fast-deep-equal": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
@@ -8834,7 +9107,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -8855,12 +9129,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -8875,17 +9151,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -9002,7 +9281,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -9014,6 +9294,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -9028,6 +9309,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -9035,12 +9317,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -9059,6 +9343,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -9139,7 +9424,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -9151,6 +9437,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -9236,7 +9523,8 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -9272,6 +9560,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -9291,6 +9580,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -9334,12 +9624,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -9906,6 +10198,15 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.0.tgz",
+      "integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==",
+      "dev": true,
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "home-or-tmp": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
@@ -10464,6 +10765,12 @@
         }
       }
     },
+    "humps": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/humps/-/humps-2.0.1.tgz",
+      "integrity": "sha1-3QLqYIG9BWjcXQcxhEY5V7qe+ao=",
+      "dev": true
+    },
     "husky": {
       "version": "0.14.3",
       "resolved": "https://registry.npmjs.org/husky/-/husky-0.14.3.tgz",
@@ -10484,9 +10791,15 @@
       }
     },
     "hyphenate-style-name": {
-      "version": "1.0.2",
+      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz",
-      "integrity": "sha1-MRYKNpMK2vH8BMYHT360FGXU7Es=",
+      "integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==",
+      "dev": true
+    },
+    "i18n-iso-countries": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/i18n-iso-countries/-/i18n-iso-countries-4.1.0.tgz",
+      "integrity": "sha512-ttqCFBUvVSwUCgyjjIG95lilFg/61INah89ih/znBYHrZAcD5HsFUr8CJBmEgIOPbw0jZFgAPAsYRPGQexMTeA==",
       "dev": true
     },
     "iconv-lite": {
@@ -10987,6 +11300,36 @@
       "integrity": "sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==",
       "dev": true
     },
+    "intl-format-cache": {
+      "version": "2.2.9",
+      "resolved": "https://registry.npmjs.org/intl-format-cache/-/intl-format-cache-2.2.9.tgz",
+      "integrity": "sha512-Zv/u8wRpekckv0cLkwpVdABYST4hZNTDaX7reFetrYTJwxExR2VyTqQm+l0WmL0Qo8Mjb9Tf33qnfj0T7pjxdQ==",
+      "dev": true
+    },
+    "intl-messageformat": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-2.2.0.tgz",
+      "integrity": "sha1-NFvNRt5jC3aDMwwuUhd/9eq0hPw=",
+      "dev": true,
+      "requires": {
+        "intl-messageformat-parser": "1.4.0"
+      }
+    },
+    "intl-messageformat-parser": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/intl-messageformat-parser/-/intl-messageformat-parser-1.4.0.tgz",
+      "integrity": "sha1-tD1FqXRoytvkQzHXS7Ho3qRPwHU=",
+      "dev": true
+    },
+    "intl-relativeformat": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/intl-relativeformat/-/intl-relativeformat-2.2.0.tgz",
+      "integrity": "sha512-4bV/7kSKaPEmu6ArxXf9xjv1ny74Zkwuey8Pm01NH4zggPP7JHwg2STk8Y3JdspCKRDriwIyLRfEXnj2ZLr4Bw==",
+      "dev": true,
+      "requires": {
+        "intl-messageformat": "^2.0.0"
+      }
+    },
     "into-stream": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/into-stream/-/into-stream-3.1.0.tgz",
@@ -11462,6 +11805,12 @@
       "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
       "dev": true
     },
+    "iso-countries-languages": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/iso-countries-languages/-/iso-countries-languages-0.2.1.tgz",
+      "integrity": "sha512-MSLwTToJmw0VS/NdCvwsgt28zE5A/rGsPpdPOrepFgAanVDBUguAgGj/73NTIrLifICz2pTmJNHZNPwDXmAMTw==",
+      "dev": true
+    },
     "isobject": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
@@ -12047,12 +12396,6 @@
         "merge-stream": "^1.0.1"
       }
     },
-    "jquery": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
-      "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==",
-      "dev": true
-    },
     "js-base64": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.0.tgz",
@@ -12405,6 +12748,12 @@
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
       "dev": true
     },
+    "lodash.difference": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
+      "integrity": "sha1-nMtOUF1Ia5FlE0V3KIWi3yf9AXw=",
+      "dev": true
+    },
     "lodash.escape": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-4.0.1.tgz",
@@ -12477,6 +12826,24 @@
       "integrity": "sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA=",
       "dev": true
     },
+    "lodash.pad": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/lodash.pad/-/lodash.pad-4.5.1.tgz",
+      "integrity": "sha1-QzCUmoM6fI2iLMIPaibE1Z3runA=",
+      "dev": true
+    },
+    "lodash.padend": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/lodash.padend/-/lodash.padend-4.6.1.tgz",
+      "integrity": "sha1-U8y6BH0G4VjTEfRdpiX05J5vFm4=",
+      "dev": true
+    },
+    "lodash.padstart": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/lodash.padstart/-/lodash.padstart-4.6.1.tgz",
+      "integrity": "sha1-0uPuv/DZ05rVD1y9G1KnvOa7YRs=",
+      "dev": true
+    },
     "lodash.pick": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.pick/-/lodash.pick-4.4.0.tgz",
@@ -12839,6 +13206,17 @@
         "cast-array": "~1.0.0",
         "object-filter": "~1.0.2",
         "query-string": "~2.4.1"
+      },
+      "dependencies": {
+        "query-string": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/query-string/-/query-string-2.4.2.tgz",
+          "integrity": "sha1-fbBmZCCAS6qSrp8miWKFWnYUPfs=",
+          "dev": true,
+          "requires": {
+            "strict-uri-encode": "^1.0.0"
+          }
+        }
       }
     },
     "make-dir": {
@@ -13055,6 +13433,15 @@
         "regex-cache": "^0.4.2"
       }
     },
+    "micromist": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromist/-/micromist-1.1.0.tgz",
+      "integrity": "sha512-+CQ76pabE9egniSEdmDuH+j2cYyIBKP97kujG8ZLZyLCRq5ExwtIy4DPHPFrq4jVbhMRBnyjuH50KU9Ohs8QCg==",
+      "dev": true,
+      "requires": {
+        "lodash.camelcase": "^4.3.0"
+      }
+    },
     "miller-rabin": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",
@@ -16974,8 +17361,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
-      "dev": true
     },
     "object-copy": {
       "version": "0.1.0",
@@ -17293,6 +17679,12 @@
         "windows-release": "^3.1.0"
       }
     },
+    "os-shim": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/os-shim/-/os-shim-0.1.3.tgz",
+      "integrity": "sha1-a2LDeRz3kJ6jXtRuF2WLtBfLORc=",
+      "dev": true
+    },
     "os-tmpdir": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
@@ -17760,12 +18152,6 @@
         }
       }
     },
-    "popper.js": {
-      "version": "1.14.6",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.6.tgz",
-      "integrity": "sha512-AGwHGQBKumlk/MDfrSOf0JHhJCImdDMcGNoqKmKkU+68GFazv3CQ6q9r7Ja1sKDZmYWTckY/uLyEznheTDycnA==",
-      "dev": true
-    },
     "portfinder": {
       "version": "1.0.20",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz",
@@ -17792,14 +18178,14 @@
       "dev": true
     },
     "postcss": {
-      "version": "7.0.7",
+      "version": "7.0.17",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.7.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.17.tgz",
-      "integrity": "sha512-HThWSJEPkupqew2fnuQMEI2YcTj/8gMV3n80cMdJsKxfIh5tHf7nM5JigNX6LxVMqo6zkgQNAI88hyFvBk41Pg==",
+      "integrity": "sha512-546ZowA+KZ3OasvQZHsbuEpysvwTZNGJv9EfyCQdsIDltPSWHAeTQ5fQy/Npi2ZDtLI3zs7Ps/p6wThErhm9fQ==",
       "dev": true,
       "requires": {
-        "chalk": "^2.4.1",
+        "chalk": "^2.4.2",
         "source-map": "^0.6.1",
-        "supports-color": "^5.5.0"
+        "supports-color": "^6.1.0"
       },
       "dependencies": {
         "chalk": {
@@ -17811,6 +18197,26 @@
             "ansi-styles": "^3.2.1",
             "escape-string-regexp": "^1.0.5",
             "supports-color": "^5.3.0"
+          },
+          "dependencies": {
+            "supports-color": {
+              "version": "5.5.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+              "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+              "dev": true,
+              "requires": {
+                "has-flag": "^3.0.0"
+              }
+            }
+          }
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
           }
         }
       }
@@ -19839,6 +20245,16 @@
         }
       }
     },
+    "prettyjson": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prettyjson/-/prettyjson-1.2.1.tgz",
+      "integrity": "sha1-/P+rQdGcq0365eV15kJGYZsS0ok=",
+      "dev": true,
+      "requires": {
+        "colors": "^1.1.2",
+        "minimist": "^1.2.0"
+      }
+    },
     "private": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@@ -19880,13 +20296,22 @@
       }
     },
     "prop-types": {
-      "version": "15.6.2",
+      "version": "15.7.2",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
-      "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
       "dev": true,
       "requires": {
-        "loose-envify": "^1.3.1",
+        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1"
+        "object-assign": "^4.1.1",
+        "react-is": "^16.8.1"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.8.6",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
+          "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==",
+          "dev": true
+        }
       }
     },
     "prop-types-exact": {
@@ -20000,11 +20425,12 @@
       "dev": true
     },
     "query-string": {
-      "version": "2.4.2",
+      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-2.4.2.tgz",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-5.1.1.tgz",
-      "integrity": "sha1-fbBmZCCAS6qSrp8miWKFWnYUPfs=",
+      "integrity": "sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw==",
-      "dev": true,
       "requires": {
+        "decode-uri-component": "^0.2.0",
+        "object-assign": "^4.1.0",
         "strict-uri-encode": "^1.0.0"
       }
     },
@@ -20143,15 +20569,27 @@
       }
     },
     "react": {
-      "version": "16.7.0",
+      "version": "16.8.6",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.8.6.tgz",
-      "integrity": "sha512-StCz3QY8lxTb5cl2HJxjwLFOXPIFQp+p+hxQfc8WE0QiLfCtIlKj8/+5tjjKm8uSTlAW+fCPaavGFS06V9Ar3A==",
+      "integrity": "sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==",
       "dev": true,
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
         "prop-types": "^15.6.2",
-        "scheduler": "^0.12.0"
+        "scheduler": "^0.13.6"
+      },
+      "dependencies": {
+        "scheduler": {
+          "version": "0.13.6",
+          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz",
+          "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==",
+          "dev": true,
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1"
+          }
+        }
       }
     },
     "react-dev-utils": {
@@ -20390,29 +20828,48 @@
       }
     },
     "react-dom": {
-      "version": "16.7.0",
+      "version": "16.8.6",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz",
-      "integrity": "sha512-D0Ufv1ExCAmF38P2Uh1lwpminZFRXEINJe53zRAbm4KPwSyd6DY/uDoS0Blj9jvPpn1+wivKpZYc8aAAN/nAkg==",
+      "integrity": "sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==",
       "dev": true,
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
         "prop-types": "^15.6.2",
-        "scheduler": "^0.12.0"
+        "scheduler": "^0.13.6"
+      },
+      "dependencies": {
+        "scheduler": {
+          "version": "0.13.6",
+          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz",
+          "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==",
+          "dev": true,
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1"
+          }
+        }
       }
     },
-    "react-element-proptypes": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/react-element-proptypes/-/react-element-proptypes-1.0.0.tgz",
-      "integrity": "sha1-ygpafBYk646CrQjqeIzfyWvBpRc=",
-      "dev": true
-    },
     "react-error-overlay": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.1.tgz",
       "integrity": "sha512-xXUbDAZkU08aAkjtUvldqbvI04ogv+a1XdHxvYuHPYKIVk/42BIOD0zSKTHAWV4+gDy3yGm283z2072rA2gdtw==",
       "dev": true
     },
+    "react-intl": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-2.9.0.tgz",
+      "integrity": "sha512-27jnDlb/d2A7mSJwrbOBnUgD+rPep+abmoJE511Tf8BnoONIAUehy/U1zZCHGO17mnOwMWxqN4qC0nW11cD6rA==",
+      "dev": true,
+      "requires": {
+        "hoist-non-react-statics": "^3.3.0",
+        "intl-format-cache": "^2.0.5",
+        "intl-messageformat": "^2.1.0",
+        "intl-relativeformat": "^2.1.0",
+        "invariant": "^2.1.1"
+      }
+    },
     "react-is": {
       "version": "16.7.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.7.0.tgz",
@@ -20426,9 +20883,9 @@
       "dev": true
     },
     "react-responsive": {
-      "version": "5.0.0",
+      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-5.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-6.1.2.tgz",
-      "integrity": "sha512-oEimZ0FTCC3/pjGDEBHOz06nWbBNDIbMGOdRYp6K9SBUmrqgNAX77hTiqvmRQeLyI97zz4F4kiaFRxFspDxE+w==",
+      "integrity": "sha512-AXentVC/kN3KED9zhzJv2pu4vZ0i6cSHdTtbCScVV1MT6F5KXaG2qs5D7WLmhdaOvmiMX8UfmS4ZSO+WPwDt4g==",
       "dev": true,
       "requires": {
         "hyphenate-style-name": "^1.0.0",
@@ -20448,6 +20905,41 @@
         "scheduler": "^0.12.0"
       }
     },
+    "react-transition-group": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.2.1.tgz",
+      "integrity": "sha512-IXrPr93VzCPupwm2O6n6C2kJIofJ/Rp5Ltihhm9UfE8lkuVX2ng/SUUl/oWjblybK9Fq2Io7LGa6maVqPB762Q==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.4.5",
+        "dom-helpers": "^3.4.0",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.5.0",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.0.tgz",
+          "integrity": "sha512-2xsuyZ0R0RBFwjgae5NpXk8FcfH4qovj5cEM5VEeB7KXnKqzaisIu2HSV/mCEISolJJuR4wkViUGYujA8MH9tw==",
+          "dev": true,
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.2",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz",
+          "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==",
+          "dev": true
+        }
+      }
+    },
+    "reactifex": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/reactifex/-/reactifex-1.1.1.tgz",
+      "integrity": "sha512-HH2N/b5tRxh7ypIgCRsiBl/CTxRkTEPf9DhIstaM6hne4WiwM5/bBbWuvVlRZc/i3FdqZED3pZ//6n4mtxma4w==",
+      "dev": true
+    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -21321,6 +21813,12 @@
         "aproba": "^1.1.1"
       }
     },
+    "rx": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/rx/-/rx-4.1.0.tgz",
+      "integrity": "sha1-pfE/957zt0D+MKqAP7CfmIBdR4I=",
+      "dev": true
+    },
     "rx-lite": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-3.1.2.tgz",
@@ -21680,9 +22178,9 @@
       }
     },
     "sanitize-html": {
-      "version": "1.20.0",
+      "version": "1.20.1",
-      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-1.20.0.tgz",
+      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-1.20.1.tgz",
-      "integrity": "sha512-BpxXkBoAG+uKCHjoXFmox6kCSYpnulABoGcZ/R3QyY9ndXbIM5S94eOr1IqnzTG8TnbmXaxWoDDzKC5eJv7fEQ==",
+      "integrity": "sha512-txnH8TQjaQvg2Q0HY06G6CDJLVYCpbnxrdO0WN8gjCKaU5J0KbyGYhZxx5QJg3WLZ1lB7XU9kDkfrCXUozqptA==",
       "dev": true,
       "requires": {
         "chalk": "^2.4.1",
@@ -22766,6 +23264,16 @@
       "integrity": "sha1-Gv2Uc46ZmwNG17n8NzvlXgdXcCk=",
       "dev": true
     },
+    "spawn-sync": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/spawn-sync/-/spawn-sync-1.0.15.tgz",
+      "integrity": "sha1-sAeZVX63+wyDdsKdROih6mfldHY=",
+      "dev": true,
+      "requires": {
+        "concat-stream": "^1.4.7",
+        "os-shim": "^0.1.2"
+      }
+    },
     "spdx-correct": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz",
@@ -22983,6 +23491,12 @@
       "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
       "dev": true
     },
+    "stack-trace": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.10.tgz",
+      "integrity": "sha1-VHxws0fo0ytOEI6hoqFZ5f3eGcA=",
+      "dev": true
+    },
     "stack-utils": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-1.0.2.tgz",
@@ -23083,8 +23597,7 @@
     "strict-uri-encode": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
-      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
+      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
-      "dev": true
     },
     "string-length": {
       "version": "2.0.0",
@@ -23298,6 +23811,136 @@
         }
       }
     },
+    "tabtab": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/tabtab/-/tabtab-2.2.2.tgz",
+      "integrity": "sha1-egR/FDsBC0y9MfhX6ClhUSy/ThQ=",
+      "dev": true,
+      "requires": {
+        "debug": "^2.2.0",
+        "inquirer": "^1.0.2",
+        "lodash.difference": "^4.5.0",
+        "lodash.uniq": "^4.5.0",
+        "minimist": "^1.2.0",
+        "mkdirp": "^0.5.1",
+        "npmlog": "^2.0.3",
+        "object-assign": "^4.1.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "cli-width": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz",
+          "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=",
+          "dev": true
+        },
+        "external-editor": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-1.1.1.tgz",
+          "integrity": "sha1-Etew24UPf/fnCBuvQAVwAGDEYAs=",
+          "dev": true,
+          "requires": {
+            "extend": "^3.0.0",
+            "spawn-sync": "^1.0.15",
+            "tmp": "^0.0.29"
+          }
+        },
+        "gauge": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/gauge/-/gauge-1.2.7.tgz",
+          "integrity": "sha1-6c7FSD09TuDvRLYKfZnkk14TbZM=",
+          "dev": true,
+          "requires": {
+            "ansi": "^0.3.0",
+            "has-unicode": "^2.0.0",
+            "lodash.pad": "^4.1.0",
+            "lodash.padend": "^4.1.0",
+            "lodash.padstart": "^4.1.0"
+          }
+        },
+        "inquirer": {
+          "version": "1.2.3",
+          "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-1.2.3.tgz",
+          "integrity": "sha1-TexvMvN+97sLLtPx0aXD9UUHSRg=",
+          "dev": true,
+          "requires": {
+            "ansi-escapes": "^1.1.0",
+            "chalk": "^1.0.0",
+            "cli-cursor": "^1.0.1",
+            "cli-width": "^2.0.0",
+            "external-editor": "^1.1.0",
+            "figures": "^1.3.5",
+            "lodash": "^4.3.0",
+            "mute-stream": "0.0.6",
+            "pinkie-promise": "^2.0.0",
+            "run-async": "^2.2.0",
+            "rx": "^4.1.0",
+            "string-width": "^1.0.1",
+            "strip-ansi": "^3.0.0",
+            "through": "^2.3.6"
+          }
+        },
+        "mute-stream": {
+          "version": "0.0.6",
+          "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.6.tgz",
+          "integrity": "sha1-SJYrGeFp/R38JAs/HnMXYnu8R9s=",
+          "dev": true
+        },
+        "npmlog": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-2.0.4.tgz",
+          "integrity": "sha1-mLUlMPJRTKkNCexbIsiEZyI3VpI=",
+          "dev": true,
+          "requires": {
+            "ansi": "~0.3.1",
+            "are-we-there-yet": "~1.1.2",
+            "gauge": "~1.2.5"
+          }
+        },
+        "run-async": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.3.0.tgz",
+          "integrity": "sha1-A3GrSuC91yDUFm19/aZP96RFpsA=",
+          "dev": true,
+          "requires": {
+            "is-promise": "^2.1.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
+        },
+        "tmp": {
+          "version": "0.0.29",
+          "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.29.tgz",
+          "integrity": "sha1-8lEl/w3Z2jzLDC3Tce4SiLuRKMA=",
+          "dev": true,
+          "requires": {
+            "os-tmpdir": "~1.0.1"
+          }
+        }
+      }
+    },
     "tapable": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.1.tgz",
@@ -24274,6 +24917,18 @@
         "crypto-random-string": "^1.0.0"
       }
     },
+    "universal-cookie": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-4.0.0.tgz",
+      "integrity": "sha512-6JVx+3oGPjslGqFhQ8YSIBHmYTx8HbyAEH++2/b6SKNXsbsdQ7lU7wRG2bYcRB5JVCz8GYgQ+Ixew91hn3Dy9w==",
+      "dev": true,
+      "requires": {
+        "@types/cookie": "^0.3.1",
+        "@types/object-assign": "^4.0.30",
+        "cookie": "^0.3.1",
+        "object-assign": "^4.1.0"
+      }
+    },
     "universal-user-agent": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/universal-user-agent/-/universal-user-agent-2.0.2.tgz",
@@ -26411,6 +27066,34 @@
         }
       }
     },
+    "winston": {
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/winston/-/winston-2.4.4.tgz",
+      "integrity": "sha512-NBo2Pepn4hK4V01UfcWcDlmiVTs7VTB1h7bgnB0rgP146bYhMxX0ypCz3lBOfNxCO4Zuek7yeT+y/zM1OfMw4Q==",
+      "dev": true,
+      "requires": {
+        "async": "~1.0.0",
+        "colors": "1.0.x",
+        "cycle": "1.0.x",
+        "eyes": "0.1.x",
+        "isstream": "0.1.x",
+        "stack-trace": "0.0.x"
+      },
+      "dependencies": {
+        "async": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/async/-/async-1.0.0.tgz",
+          "integrity": "sha1-+PwEyjoTeErenhZBr5hXjPvWR6k=",
+          "dev": true
+        },
+        "colors": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/colors/-/colors-1.0.3.tgz",
+          "integrity": "sha1-BDP0TYCWgP3rYO0mDxsMJi6CpAs=",
+          "dev": true
+        }
+      }
+    },
     "wordwrap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",

package.json

@@ -9,9 +9,12 @@
   },
   "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",
     "prepublishOnly": "npm run build",
@@ -37,9 +40,19 @@
     "@commitlint/config-angular": "^6.0.2",
     "@commitlint/prompt": "^6.0.2",
     "@commitlint/prompt-cli": "^6.0.2",
+    "@edx/edx-bootstrap": "^2.2.1",
+    "@edx/frontend-i18n": "^2.1.0",
+    "@edx/frontend-logging": "^2.0.2",
+    "@edx/paragon": "^6.1.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.17",
+    "@fortawesome/free-brands-svg-icons": "^5.8.1",
+    "@fortawesome/free-regular-svg-icons": "^5.8.1",
+    "@fortawesome/free-solid-svg-icons": "^5.8.1",
+    "@fortawesome/react-fontawesome": "^0.1.4",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.5",
+    "babel-plugin-react-intl": "^3.0.1",
     "babel-plugin-rewire": "^1.2.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.7.0",
@@ -47,23 +60,25 @@
     "clean-webpack-plugin": "^0.1.19",
     "coveralls": "^3.0.0",
     "css-loader": "^0.28.9",
-    "@edx/paragon": "^3.8.0",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
+    "es-check": "^5.0.0",
     "eslint": "^5.2.0",
     "eslint-config-edx": "^4.0.4",
     "eslint-plugin-jsx-a11y": "^6.1.2",
     "file-loader": "^1.1.9",
+    "glob": "^7.1.3",
     "html-webpack-plugin": "^3.2.0",
-    "image-webpack-loader": "^4.2.0",
     "husky": "^0.14.3",
+    "image-webpack-loader": "^4.2.0",
     "jest": "23.6.0",
     "node-sass": "^4.7.2",
-    "prop-types": "^15.5.10",
+    "prop-types": "^15.7.2",
-    "react": "^16.4.2",
+    "react": "^16.8.6",
-    "react-dom": "^16.2.0",
     "react-dev-utils": "^5.0.0",
+    "react-dom": "^16.8.6",
     "react-test-renderer": "^16.6.0",
+    "reactifex": "^1.1.1",
     "sass-loader": "^6.0.6",
     "semantic-release": "^15.1.7",
     "source-map-loader": "^0.2.1",
@@ -75,15 +90,16 @@
     "webpack-dev-server": "^3.1.9",
     "webpack-merge": "^4.2.1"
   },
+  "dependencies": {
+    "query-string": "^5.1.1"
+  },
   "peerDependencies": {
-    "@edx/paragon": "^3.8.0",
+    "@edx/frontend-i18n": "^2.1.0",
-    "clean-webpack-plugin": "^0.1.19",
+    "@edx/frontend-logging": "^2.0.2",
-    "html-webpack-plugin": "^3.2.0",
+    "@edx/paragon": "^6.1.0",
     "prop-types": "^15.5.10",
     "react": "^16.4.2",
-    "react-dom": "^16.2.0",
+    "react-dom": "^16.2.0"
-    "webpack": "^4.19.1",
-    "webpack-merge": "^4.2.1"
   },
   "jest": {
     "setupFiles": [

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;

src/i18n/messages/ar.json

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

src/i18n/messages/ca.json

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

src/i18n/messages/es_419.json

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

src/i18n/messages/fr.json

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

src/i18n/messages/he.json

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

src/i18n/messages/id.json

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

src/i18n/messages/ko_kr.json

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

src/i18n/messages/pl.json

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

src/i18n/messages/pt_br.json

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

src/i18n/messages/ru.json

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

src/i18n/messages/th.json

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

src/i18n/messages/uk.json

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

src/i18n/messages/zh_CN.json

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

src/index.jsx

@@ -1,28 +1,182 @@
 import React from 'react';
 import { render } from 'react-dom';
+
+/* eslint-disable import/no-extraneous-dependencies */
+import {
+  faFacebookSquare,
+  faTwitterSquare,
+  faYoutubeSquare,
+  faLinkedin,
+  faRedditSquare,
+} from '@fortawesome/free-brands-svg-icons';
+import { faLanguage } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+/* eslint-enable import/no-extraneous-dependencies */
+
 import SiteFooter from './lib';
 import './index.scss';
-
 import FooterLogo from './edx-footer.png';
 
+
+const edXLinks = [
+  {
+    title: 'About',
+    url: 'https://www.example.com/about-us',
+  },
+  {
+    title: 'edX for Business',
+    url: 'https://business.edx.org',
+    queryParams: { utm_test: 'utm_test_value' },
+  },
+  {
+    title: 'Affiliates',
+    url: 'https://www.example.com/affiliate-program',
+  },
+  {
+    title: 'Open edX',
+    url: 'https://www.example.com/open',
+  },
+  {
+    title: 'Careers',
+    url: 'https://www.example.com/careers',
+  },
+  {
+    title: 'News',
+    url: 'https://www.example.com/news-announcements',
+  },
+];
+
+const legalLinks = [
+  {
+    title: 'Terms of Service & Honor Code',
+    url: 'https://www.example.com/terms-of-service',
+  },
+  {
+    title: 'Privacy Policy',
+    url: 'https://www.example.com/privacy-policy',
+  },
+  {
+    title: 'Accessibility Policy',
+    url: 'https://www.example.com/accessibility',
+  },
+  {
+    title: 'Trademark Policy',
+    url: 'https://www.example.com/trademarks',
+  },
+  {
+    title: 'Sitemap',
+    url: 'https://www.example.com/sitemap',
+  },
+];
+
+const connectLinks = [
+  {
+    title: 'Blog',
+    url: 'https://www.example.com/blog',
+  },
+  {
+    title: 'Contact Us',
+    url: 'https://www.example.com/contact',
+  },
+  {
+    title: 'Help Center',
+    url: 'https://www.example.com/support',
+  },
+  {
+    title: 'Media Kit',
+    url: 'https://www.example.com/media-kit',
+  },
+  {
+    title: 'Donate',
+    url: 'https://www.example.com/donate',
+  },
+];
+
+const socialLinks = [
+  {
+    title: 'Facebook',
+    url: 'https://www.facebook.com',
+    icon: <FontAwesomeIcon icon={faFacebookSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Like edX on Facebook',
+  },
+  {
+    title: 'Twitter',
+    url: 'https://www.twitter.com',
+    icon: <FontAwesomeIcon icon={faTwitterSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Follow edX on Twitter',
+  },
+  {
+    title: 'Youtube',
+    url: 'https://www.youtube.com',
+    icon: <FontAwesomeIcon icon={faYoutubeSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Subscribe to the edX YouTube channel',
+  },
+  {
+    title: 'LinkedIn',
+    url: 'https://www.linkedin.com',
+    icon: <FontAwesomeIcon icon={faLinkedin} className="social-icon" size="2x" />,
+    screenReaderText: 'Follow edX on LinkedIn',
+  },
+  {
+    title: 'Reddit',
+    url: 'https://reddit.com',
+    icon: <FontAwesomeIcon icon={faRedditSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Subscribe to the edX subreddit',
+  },
+];
+
+
 const App = () => (
   <SiteFooter
-    siteName="edX"
+    siteLogo={{
-    siteLogo={FooterLogo}
+      src: FooterLogo,
+      altText: 'edx Logo',
+      ariaLabel: 'edX Home',
+    }}
+    ariaLabel="Page Footer"
     marketingSiteBaseUrl="https://www.example.com"
-    supportUrl="https://www.example.com/support"
+    appleAppStore={{
-    contactUrl="https://www.example.com/contact"
+      url: 'https://store.apple.com',
-    openSourceUrl="https://www.example.com/open"
+      altText: 'Download the edX mobile app from the Apple App Store',
-    termsOfServiceUrl="https://www.example.com/terms-of-service"
+    }}
-    privacyPolicyUrl="https://www.example.com/privacy-policy"
+    googlePlay={{
-    facebookUrl="https://www.facebook.com"
+      url: 'https://play.google.com',
-    twitterUrl="https://www.twitter.com"
+      altText: 'Download the edX mobile app from Google Play',
-    youTubeUrl="https://www.youtube.com"
+    }}
-    linkedInUrl="https://www.linkedin.com"
+    handleAllTrackEvents={() => {}}
-    googlePlusUrl="https://plus.google.com"
+    linkSectionOne={{
-    redditUrl="https://reddit.com"
+      title: 'edX',
-    appleAppStoreUrl="https://store.apple.com"
+      linkList: edXLinks,
-    googlePlayUrl="https://play.google.com"
+    }}
+    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>
+    )}
   />
 );
 

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';

src/lib/components/SiteFooter/SiteFooter.test.jsx

@@ -2,29 +2,185 @@ import React from 'react';
 import renderer from 'react-test-renderer';
 import { mount } from 'enzyme';
 
+import {
+  faFacebookSquare,
+  faTwitterSquare,
+  faYoutubeSquare,
+  faLinkedin,
+  faRedditSquare,
+} from '@fortawesome/free-brands-svg-icons';
+import { faLanguage } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
 import FooterLogo from '../../../edx-footer.png';
 import SiteFooter, { EVENT_NAMES } from './index';
 
+
+const edXLinks = [
+  {
+    title: 'About',
+    url: 'https://www.example.com/about-us',
+  },
+  {
+    title: 'edX for Business',
+    url: 'https://business.edx.org',
+    queryParams: { utm_test: 'utm_test_value' },
+  },
+  {
+    title: 'Affiliates',
+    url: 'https://www.example.com/affiliate-program',
+  },
+  {
+    title: 'Open edX',
+    url: 'https://www.example.com/open',
+  },
+  {
+    title: 'Careers',
+    url: 'https://www.example.com/careers',
+  },
+  {
+    title: 'News',
+    url: 'https://www.example.com/news-announcements',
+  },
+];
+
+const legalLinks = [
+  {
+    title: 'Terms of Service & Honor Code',
+    url: 'https://www.example.com/terms-of-service',
+  },
+  {
+    title: 'Privacy Policy',
+    url: 'https://www.example.com/privacy-policy',
+  },
+  {
+    title: 'Accessibility Policy',
+    url: 'https://www.example.com/accessibility',
+  },
+  {
+    title: 'Trademark Policy',
+    url: 'https://www.example.com/trademarks',
+  },
+  {
+    title: 'Sitemap',
+    url: 'https://www.example.com/sitemap',
+  },
+];
+
+const connectLinks = [
+  {
+    title: 'Blog',
+    url: 'https://www.example.com/blog',
+  },
+  {
+    title: 'Contact Us',
+    url: 'https://www.example.com/contact',
+  },
+  {
+    title: 'Help Center',
+    url: 'https://www.example.com/support',
+  },
+  {
+    title: 'Media Kit',
+    url: 'https://www.example.com/media-kit',
+  },
+  {
+    title: 'Donate',
+    url: 'https://www.example.com/donate',
+  },
+];
+
+const socialLinks = [
+  {
+    title: 'Facebook',
+    url: 'https://www.facebook.com',
+    icon: <FontAwesomeIcon icon={faFacebookSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Like edX on Facebook',
+  },
+  {
+    title: 'Twitter',
+    url: 'https://www.twitter.com',
+    icon: <FontAwesomeIcon icon={faTwitterSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Follow edX on Twitter',
+  },
+  {
+    title: 'Youtube',
+    url: 'https://www.youtube.com',
+    icon: <FontAwesomeIcon icon={faYoutubeSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Subscribe to the edX YouTube channel',
+  },
+  {
+    title: 'LinkedIn',
+    url: 'https://www.linkedin.com',
+    icon: <FontAwesomeIcon icon={faLinkedin} className="social-icon" size="2x" />,
+    screenReaderText: 'Follow edX on LinkedIn',
+  },
+  {
+    title: 'Reddit',
+    url: 'https://reddit.com',
+    icon: <FontAwesomeIcon icon={faRedditSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Subscribe to the edX subreddit',
+  },
+];
+
+const supportedLanguages = [
+  {
+    label: 'English',
+    value: 'en',
+  }, {
+    label: 'español',
+    value: 'es-419',
+  },
+];
+
+const languageForm = {
+  activeLanguage: 'en',
+  screenReaderLabel: 'Choose Language',
+  submitLabel: 'Apply',
+  icon: <FontAwesomeIcon icon={faLanguage} size="2x" className="text-primary" />,
+  onLanguageSelected: () => {},
+};
+
 const completeSiteFooterComponent = mockHandleAllTrackEvents =>
-  (<SiteFooter
+  (
-    siteName="example"
+    <SiteFooter
-    siteLogo={FooterLogo}
+      siteLogo={{
-    marketingSiteBaseUrl="https://www.example.com"
+        src: FooterLogo,
-    supportUrl="https://www.example.com/support"
+        altText: 'edx Logo',
-    contactUrl="https://www.example.com/contact"
+        ariaLabel: 'edX Home',
-    openSourceUrl="https://www.example.com/open"
+      }}
-    termsOfServiceUrl="https://www.example.com/terms-of-service"
+      ariaLabel="Page Footer"
-    privacyPolicyUrl="https://www.example.com/privacy-policy"
+      marketingSiteBaseUrl="https://www.example.com"
-    facebookUrl="https://www.facebook.com"
+      appleAppStore={{
-    twitterUrl="https://www.twitter.com"
+        url: 'https://store.apple.com',
-    youTubeUrl="https://www.youtube.com"
+        altText: 'Download the edX mobile app from the Apple App Store',
-    linkedInUrl="https://www.linkedin.com"
+      }}
-    googlePlusUrl="https://plus.google.com"
+      googlePlay={{
-    redditUrl="https://reddit.com"
+        url: 'https://play.google.com',
-    appleAppStoreUrl="https://store.apple.com"
+        altText: 'Download the edX mobile app from Google Play',
-    googlePlayUrl="https://play.google.com"
+      }}
-    handleAllTrackEvents={mockHandleAllTrackEvents}
+      handleAllTrackEvents={mockHandleAllTrackEvents}
-  />);
+      linkSectionOne={{
+        title: 'edX',
+        linkList: edXLinks,
+      }}
+      linkSectionTwo={{
+        title: 'Legal',
+        linkList: legalLinks,
+      }}
+      linkSectionThree={{
+        title: 'Connect',
+        linkList: connectLinks,
+      }}
+      socialLinks={socialLinks}
+      supportedLanguages={supportedLanguages}
+      languageForm={languageForm}
+      copyright="© 2012–2019 edX Inc."
+      trademark={(
+        <React.Fragment>EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 深圳市恒宇博科技有限公司 <a href="http://www.beian.miit.gov.cn">粤ICP备17044299号-2</a></React.Fragment>
+      )}
+    />
+  );
 
 describe('<SiteFooter />', () => {
   describe('renders correctly', () => {
@@ -38,53 +194,132 @@ describe('<SiteFooter />', () => {
 
     it('does not render social links', () => {
       const tree = renderer
-        .create(<SiteFooter
+        .create((
-          siteName="example"
+          <SiteFooter
-          siteLogo={FooterLogo}
+            siteLogo={{
-          marketingSiteBaseUrl="https://www.example.com"
+              src: FooterLogo,
-          supportUrl="https://www.example.com/support"
+              altText: 'edx Logo',
-          contactUrl="https://www.example.com/contact"
+              ariaLabel: 'edX Home',
-          openSourceUrl="https://www.example.com/open"
+            }}
-          termsOfServiceUrl="https://www.example.com/terms-of-service"
+            ariaLabel="Page Footer"
-          privacyPolicyUrl="https://www.example.com/privacy-policy"
+            marketingSiteBaseUrl="https://www.example.com"
-          facebookUrl="https://www.facebook.com"
+            appleAppStore={{
-          twitterUrl="https://www.twitter.com"
+              url: 'https://store.apple.com',
-          youTubeUrl="https://www.youtube.com"
+              altText: 'Download the edX mobile app from the Apple App Store',
-          linkedInUrl="https://www.linkedin.com"
+            }}
-          googlePlusUrl="https://plus.google.com"
+            googlePlay={{
-          redditUrl="https://reddit.com"
+              url: 'https://play.google.com',
-          appleAppStoreUrl="https://store.apple.com"
+              altText: 'Download the edX mobile app from Google Play',
-          googlePlayUrl="https://play.google.com"
+            }}
-          handleAllTrackEvents={jest.fn()}
+            handleAllTrackEvents={jest.fn()}
-          showSocialLinks={false}
+            linkSectionOne={{
-        />)
+              title: 'edX',
-        .toJSON();
+              linkList: edXLinks,
+            }}
+            linkSectionTwo={{
+              title: 'Legal',
+              linkList: legalLinks,
+            }}
+            linkSectionThree={{
+              title: 'Connect',
+              linkList: connectLinks,
+            }}
+            supportedLanguages={supportedLanguages}
+            languageForm={languageForm}
+            copyright="© 2012–2019 edX Inc."
+            trademark={(
+              <React.Fragment>EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 深圳市恒宇博科技有限公司 <a href="http://www.beian.miit.gov.cn">粤ICP备17044299号-2</a></React.Fragment>
+            )}
+          />
+        )).toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('does not render mobile links', () => {
       const tree = renderer
-        .create(<SiteFooter
+        .create((
-          siteName="example"
+          <SiteFooter
-          siteLogo={FooterLogo}
+            siteLogo={{
-          marketingSiteBaseUrl="https://www.example.com"
+              src: FooterLogo,
-          supportUrl="https://www.example.com/support"
+              altText: 'edx Logo',
-          contactUrl="https://www.example.com/contact"
+              ariaLabel: 'edX Home',
-          openSourceUrl="https://www.example.com/open"
+            }}
-          termsOfServiceUrl="https://www.example.com/terms-of-service"
+            ariaLabel="Page Footer"
-          privacyPolicyUrl="https://www.example.com/privacy-policy"
+            marketingSiteBaseUrl="https://www.example.com"
-          facebookUrl="https://www.facebook.com"
+            appleAppStore={{
-          twitterUrl="https://www.twitter.com"
+              url: 'https://store.apple.com',
-          youTubeUrl="https://www.youtube.com"
+              altText: 'Download the edX mobile app from the Apple App Store',
-          linkedInUrl="https://www.linkedin.com"
+            }}
-          googlePlusUrl="https://plus.google.com"
+            googlePlay={{
-          redditUrl="https://reddit.com"
+              url: 'https://play.google.com',
-          appleAppStoreUrl="https://store.apple.com"
+              altText: 'Download the edX mobile app from Google Play',
-          googlePlayUrl="https://play.google.com"
+            }}
-          handleAllTrackEvents={jest.fn()}
+            handleAllTrackEvents={jest.fn()}
-          showMobileLinks={false}
+            linkSectionOne={{
-        />)
+              title: 'edX',
-        .toJSON();
+              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();
     });
   });
@@ -95,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');

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"
+        aria-label="edX Home"
-        href="https://www.example.com/"
+        href="https://www.example.com"
-        onClick={[Function]}
-        target="_self"
       >
         <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"
@@ -42,10 +40,9 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
         </li>
         <li>
           <a
-            href="https://www.example.com/enterprise"
+            href="https://business.edx.org/?utm_test=utm_test_value"
           >
-            example
+            edX for Business
-             for Business
           </a>
         </li>
         <li>
@@ -59,8 +56,7 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
           <a
             href="https://www.example.com/open"
           >
-            Open 
+            Open edX
-            example
           </a>
         </li>
         <li>
@@ -185,15 +181,27 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
             target="_blank"
             title="Facebook"
           >
-            <span
+            <svg
-              aria-hidden={true}
+              aria-hidden="true"
-              className="fa fa-facebook-square fa-2x"
+              className="svg-inline--fa fa-facebook-square fa-w-14 fa-2x social-icon"
-              id="Icon1"
+              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>
@@ -205,15 +213,27 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
             target="_blank"
             title="Twitter"
           >
-            <span
+            <svg
-              aria-hidden={true}
+              aria-hidden="true"
-              className="fa fa-twitter-square fa-2x"
+              className="svg-inline--fa fa-twitter-square fa-w-14 fa-2x social-icon"
-              id="Icon1"
+              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>
@@ -225,15 +245,27 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
             target="_blank"
             title="Youtube"
           >
-            <span
+            <svg
-              aria-hidden={true}
+              aria-hidden="true"
-              className="fa fa-youtube-square fa-2x"
+              className="svg-inline--fa fa-youtube-square fa-w-14 fa-2x social-icon"
-              id="Icon1"
+              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>
@@ -245,35 +277,27 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
             target="_blank"
             title="LinkedIn"
           >
-            <span
+            <svg
-              aria-hidden={true}
+              aria-hidden="true"
-              className="fa fa-linkedin-square fa-2x"
+              className="svg-inline--fa fa-linkedin fa-w-14 fa-2x social-icon"
-              id="Icon1"
+              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
+              Follow edX 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="Icon1"
-            />
-            <span
-              className="sr-only"
-            >
-              Follow example on Google+
             </span>
           </a>
         </li>
@@ -285,27 +309,479 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
             target="_blank"
             title="Reddit"
           >
-            <span
+            <svg
-              aria-hidden={true}
+              aria-hidden="true"
-              className="fa fa-reddit-square fa-2x"
+              className="svg-inline--fa fa-reddit-square fa-w-14 fa-2x social-icon"
-              id="Icon1"
+              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>
-        © 2012–
+        © 2012–2019 edX Inc.
-        2019
-         
-        example
-         Inc.
         <br />
-        EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 粤ICP备17044299号-2
+        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>
@@ -325,22 +801,78 @@ exports[`<SiteFooter /> renders correctly does not render social links 1`] = `
       className="area-1"
     >
       <a
-        aria-label="example Home"
+        aria-label="edX Home"
-        href="https://www.example.com/"
+        href="https://www.example.com"
-        onClick={[Function]}
-        target="_self"
       >
         <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"
@@ -354,10 +886,9 @@ exports[`<SiteFooter /> renders correctly does not render social links 1`] = `
         </li>
         <li>
           <a
-            href="https://www.example.com/enterprise"
+            href="https://business.edx.org/?utm_test=utm_test_value"
           >
-            example
+            edX for Business
-             for Business
           </a>
         </li>
         <li>
@@ -371,8 +902,7 @@ exports[`<SiteFooter /> renders correctly does not render social links 1`] = `
           <a
             href="https://www.example.com/open"
           >
-            Open 
+            Open edX
-            example
           </a>
         </li>
         <li>
@@ -497,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"
             />
@@ -511,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"
             />
@@ -519,13 +1049,14 @@ exports[`<SiteFooter /> renders correctly does not render social links 1`] = `
         </li>
       </ul>
       <p>
-        © 2012–
+        © 2012–2019 edX Inc.
-        2019
-         
-        example
-         Inc.
         <br />
-        EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 粤ICP备17044299号-2
+        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>
@@ -545,22 +1076,78 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
       className="area-1"
     >
       <a
-        aria-label="example Home"
+        aria-label="edX Home"
-        href="https://www.example.com/"
+        href="https://www.example.com"
-        onClick={[Function]}
-        target="_self"
       >
         <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"
@@ -574,10 +1161,9 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
         </li>
         <li>
           <a
-            href="https://www.example.com/enterprise"
+            href="https://business.edx.org/?utm_test=utm_test_value"
           >
-            example
+            edX for Business
-             for Business
           </a>
         </li>
         <li>
@@ -591,8 +1177,7 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
           <a
             href="https://www.example.com/open"
           >
-            Open 
+            Open edX
-            example
           </a>
         </li>
         <li>
@@ -717,15 +1302,27 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
             target="_blank"
             title="Facebook"
           >
-            <span
+            <svg
-              aria-hidden={true}
+              aria-hidden="true"
-              className="fa fa-facebook-square fa-2x"
+              className="svg-inline--fa fa-facebook-square fa-w-14 fa-2x social-icon"
-              id="Icon1"
+              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>
@@ -737,15 +1334,27 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
             target="_blank"
             title="Twitter"
           >
-            <span
+            <svg
-              aria-hidden={true}
+              aria-hidden="true"
-              className="fa fa-twitter-square fa-2x"
+              className="svg-inline--fa fa-twitter-square fa-w-14 fa-2x social-icon"
-              id="Icon1"
+              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>
@@ -757,15 +1366,27 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
             target="_blank"
             title="Youtube"
           >
-            <span
+            <svg
-              aria-hidden={true}
+              aria-hidden="true"
-              className="fa fa-youtube-square fa-2x"
+              className="svg-inline--fa fa-youtube-square fa-w-14 fa-2x social-icon"
-              id="Icon1"
+              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>
@@ -777,35 +1398,27 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
             target="_blank"
             title="LinkedIn"
           >
-            <span
+            <svg
-              aria-hidden={true}
+              aria-hidden="true"
-              className="fa fa-linkedin-square fa-2x"
+              className="svg-inline--fa fa-linkedin fa-w-14 fa-2x social-icon"
-              id="Icon1"
+              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
+              Follow edX 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="Icon1"
-            />
-            <span
-              className="sr-only"
-            >
-              Follow example on Google+
             </span>
           </a>
         </li>
@@ -817,15 +1430,27 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
             target="_blank"
             title="Reddit"
           >
-            <span
+            <svg
-              aria-hidden={true}
+              aria-hidden="true"
-              className="fa fa-reddit-square fa-2x"
+              className="svg-inline--fa fa-reddit-square fa-w-14 fa-2x social-icon"
-              id="Icon1"
+              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>
@@ -841,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"
             />
@@ -855,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"
             />
@@ -863,13 +1488,14 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
         </li>
       </ul>
       <p>
-        © 2012–
+        © 2012–2019 edX Inc.
-        2019
-         
-        example
-         Inc.
         <br />
-        EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 粤ICP备17044299号-2
+        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>

src/lib/components/SiteFooter/index.jsx

@@ -1,15 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Hyperlink, Icon } from '@edx/paragon';
+import qs from 'query-string';
+import { Hyperlink } from '@edx/paragon';
 
 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) {
@@ -22,202 +32,162 @@ class SiteFooter extends React.Component {
     this.props.handleAllTrackEvents(eventName, properties);
   }
 
-  renderSiteLogo() {
+  formatUrl(linkData) {
-    return (
-      <img src={this.props.siteLogo} alt={`${this.props.siteName} logo`} />
-    );
-  }
-
-  renderMarketingSiteUrl(path) {
-    return `${this.props.marketingSiteBaseUrl}${path}`;
-  }
-
-  renderSocialLinks() {
     const {
-      siteName,
+      queryParams,
-      showSocialLinks,
+      url,
-      facebookUrl,
+    } = linkData;
-      twitterUrl,
+    return queryParams ? `${url}/?${qs.stringify(queryParams)}` : url;
-      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="Facebook"
-              rel="noopener noreferrer"
-              target="_blank"
-              onClick={this.externalLinkClickHandler}
-            >
-              <Icon className={['fa', 'fa-facebook-square', 'fa-2x']} screenReaderText={`Like ${siteName} on Facebook`} />
-            </a>
-          </li>
 
-
+  renderLinkList({ title, linkList }) {
-          <li>
+    if (linkList.length > 0) {
-            <a
+      return (
-              href={twitterUrl}
+        <React.Fragment>
-              title="Twitter"
+          <h2>{title}</h2>
-              rel="noopener noreferrer"
+          <ul className="list-unstyled p-0 m-0">
-              target="_blank"
+            {linkList.map(link => (
-              onClick={this.externalLinkClickHandler}
+              <li key={link.url}>
-            >
+                <Hyperlink destination={this.formatUrl(link)}>
-              <Icon className={['fa', 'fa-twitter-square', 'fa-2x']} screenReaderText={`Follow ${siteName} on Twitter`} />
+                  {link.title}
-            </a>
+                </Hyperlink>
-          </li>
+              </li>
-          <li>
+            ))}
-            <a
+          </ul>
-              href={youTubeUrl}
+        </React.Fragment>
-              title="Youtube"
-              rel="noopener noreferrer"
-              target="_blank"
-              onClick={this.externalLinkClickHandler}
-            >
-              <Icon className={['fa', 'fa-youtube-square', 'fa-2x']} screenReaderText={`Subscribe to the ${siteName} YouTube channel`} />
-            </a>
-          </li>
-          <li>
-            <a
-              href={linkedInUrl}
-              title="LinkedIn"
-              rel="noopener noreferrer"
-              target="_blank"
-              onClick={this.externalLinkClickHandler}
-            >
-              <Icon className={['fa', 'fa-linkedin-square', 'fa-2x']} screenReaderText={`Follow ${siteName} on LinkedIn`} />
-            </a>
-          </li>
-          <li>
-            <a
-              href={googlePlusUrl}
-              title="Google+"
-              rel="noopener noreferrer"
-              target="_blank"
-              onClick={this.externalLinkClickHandler}
-            >
-              <Icon className={['fa', 'fa-google-plus-square', 'fa-2x']} screenReaderText={`Follow ${siteName} on Google+`} />
-            </a>
-          </li>
-          <li>
-            <a
-              href={redditUrl}
-              title="Reddit"
-              rel="noopener noreferrer"
-              target="_blank"
-              onClick={this.externalLinkClickHandler}
-            >
-              <Icon className={['fa', 'fa-reddit-square', 'fa-2x']} screenReaderText={`Subscribe to the ${siteName} subreddit`} />
-            </a>
-          </li>
-        </ul>
       );
     }
-    return socialLinks;
+
+    return null;
   }
 
   renderMobileLinks() {
     const {
-      siteName,
       showMobileLinks,
-      appleAppStoreUrl,
+      appleAppStore,
-      googlePlayUrl,
+      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}>
+            <Hyperlink
+              destination={appleAppStore.url}
+              rel="noreferrer"
+              target="_blank"
+              onClick={this.externalLinkClickHandler}
+            >
               <img
                 className="max-height-39"
-                alt={`Download the ${siteName} mobile app from the Apple App Store`}
+                alt={appleAppStore.altText}
                 src="https://prod-edxapp.edx-cdn.org/static/images/app/app_store_badge_135x40.d0558d910630.svg"
               />
-            </a>
+            </Hyperlink>
           </li>
           <li>
-            <a href={googlePlayUrl} rel="noopener noreferrer" target="_blank" onClick={this.externalLinkClickHandler}>
+            <Hyperlink
+              destination={googlePlay.url}
+              rel="noreferrer"
+              target="_blank"
+              onClick={this.externalLinkClickHandler}
+            >
               <img
                 className="max-height-39"
-                alt={`Download the ${siteName} mobile app from Google Play`}
+                alt={googlePlay.altText}
                 src="https://prod-edxapp.edx-cdn.org/static/images/app/google_play_badge_45.6ea466e328da.png"
               />
-            </a>
+            </Hyperlink>
           </li>
         </ul>
       );
     }
-    return mobileLinks;
+
+    return null;
   }
 
   render() {
     const {
-      siteName,
+      ariaLabel,
-      openSourceUrl,
+      linkSectionOne,
-      termsOfServiceUrl,
+      linkSectionTwo,
-      privacyPolicyUrl,
+      linkSectionThree,
-      contactUrl,
+      siteLogo,
-      supportUrl,
+      socialLinks,
+      supportedLanguages,
+      languageForm,
+      marketingSiteBaseUrl,
+      copyright,
+      trademark,
     } = this.props;
+    const showLanguageSelector = supportedLanguages.length > 0 &&
+                                 languageForm;
     return (
       <footer
         role="contentinfo"
-        aria-label="Page Footer"
+        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={`${siteName} Home`} />
+            <Hyperlink
-          </div>
+              destination={marketingSiteBaseUrl}
-          <div className="area-2">
+              aria-label={siteLogo.ariaLabel}
-            <h2>{siteName}</h2>
+            >
-            <ul className="list-unstyled p-0 m-0">
+              <img src={siteLogo.src} alt={siteLogo.altText} />
-              <li><a href={this.renderMarketingSiteUrl('/about-us')}>About</a></li>
+            </Hyperlink>
-              <li><a href={this.renderMarketingSiteUrl('/enterprise')}>{siteName} for Business</a></li>
+            {showLanguageSelector &&
-              <li><a href={this.renderMarketingSiteUrl('/affiliate-program')}>Affiliates</a></li>
+              <div className="i18n d-flex mt-2">
-              <li><a href={openSourceUrl}>Open {siteName}</a></li>
+                <form
-              <li><a href={this.renderMarketingSiteUrl('/careers')}>Careers</a></li>
+                  className="d-flex align-items-start"
-              <li><a href={this.renderMarketingSiteUrl('/news-announcements')}>News</a></li>
+                  onSubmit={this.applyLanguageSelection}
-            </ul>
+                >
-          </div>
+                  {/* eslint-disable-next-line jsx-a11y/label-has-for */}
-          <div className="area-3">
+                  <label htmlFor="site-footer-language-select">
-            <h2>Legal</h2>
+                    {languageForm.icon}
-            <ul className="list-unstyled p-0 m-0">
+                    <div className="sr-only">{languageForm.screenReaderLabel}</div>
-              <li><a href={termsOfServiceUrl}>Terms of Service & Honor Code</a></li>
+                  </label>
-              <li><a href={privacyPolicyUrl}>Privacy Policy</a></li>
+                  <select
-              <li><a href={this.renderMarketingSiteUrl('/accessibility')}>Accessibility Policy</a></li>
+                    id="site-footer-language-select"
-              <li><a href={this.renderMarketingSiteUrl('/trademarks')}>Trademark Policy</a></li>
+                    className="mx-2 mt-1"
-              <li><a href={this.renderMarketingSiteUrl('/sitemap')}>Sitemap</a></li>
+                    name="site-footer-language-select"
-            </ul>
+                    defaultValue={languageForm.activeLanguage}
-          </div>
+                  >
-          <div className="area-4">
+                    {supportedLanguages.map(({ value, label }) =>
-            <h2>Connect</h2>
+                      <option key={value} value={value}>{label}</option>)}
-            <ul className="list-unstyled p-0 m-0">
+                  </select>
-              <li><a href={this.renderMarketingSiteUrl('/blog')}>Blog</a></li>
+                  <button className="mt-1" type="submit">{languageForm.submitLabel}</button>
-              <li><a href={contactUrl}>Contact Us</a></li>
+                </form>
-              <li><a href={supportUrl}>Help Center</a></li>
+              </div>
-              <li><a href={this.renderMarketingSiteUrl('/media-kit')}>Media Kit</a></li>
+            }
-              <li><a href={this.renderMarketingSiteUrl('/donate')}>Donate</a></li>
-            </ul>
           </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}>
+                    <Hyperlink
+                      destination={link.url}
+                      title={link.title}
+                      rel="noreferrer"
+                      target="_blank"
+                      onClick={this.externalLinkClickHandler}
+                    >
+                      {link.icon}
+                      <span className="sr-only">{link.screenReaderText}</span>
+                    </Hyperlink>
+                  </li>
+                ))}
+              </ul>
+            }
             {this.renderMobileLinks()}
             <p>
-              © 2012–{(new Date().getFullYear())} {siteName} Inc.
+              {copyright}
               <br />
-              EdX, Open edX, and MicroMasters are registered trademarks of edX Inc.
+              {trademark}
-              | 粤ICP备17044299号-2
             </p>
           </div>
         </div>
@@ -226,47 +196,82 @@ 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,
+  ariaLabel: PropTypes.string.isRequired,
-  siteLogo: PropTypes.node,
+  siteLogo: PropTypes.shape({
+    src: PropTypes.node,
+    altText: PropTypes.string,
+    ariaLabel: PropTypes.string,
+  }),
   marketingSiteBaseUrl: PropTypes.string,
-  supportUrl: PropTypes.string,
+  linkSectionOne: linkSectionShape,
-  contactUrl: PropTypes.string,
+  linkSectionTwo: linkSectionShape,
-  openSourceUrl: PropTypes.string,
+  linkSectionThree: linkSectionShape,
-  termsOfServiceUrl: PropTypes.string,
+  socialLinks: PropTypes.arrayOf(PropTypes.shape({
-  privacyPolicyUrl: PropTypes.string,
+    title: PropTypes.string.isRequired,
-  showSocialLinks: PropTypes.bool,
+    url: PropTypes.string.isRequired,
-  facebookUrl: PropTypes.string,
+    icon: PropTypes.element.isRequired,
-  twitterUrl: PropTypes.string,
+    screenReaderText: PropTypes.string.isRequired,
-  youTubeUrl: PropTypes.string,
+  })),
-  linkedInUrl: PropTypes.string,
-  googlePlusUrl: PropTypes.string,
-  redditUrl: PropTypes.string,
   showMobileLinks: PropTypes.bool,
-  appleAppStoreUrl: PropTypes.string,
+  appleAppStore: PropTypes.shape({
-  googlePlayUrl: PropTypes.string,
+    url: PropTypes.string,
+    altText: PropTypes.string,
+  }),
+  googlePlay: PropTypes.shape({
+    url: PropTypes.string,
+    altText: PropTypes.string,
+  }),
+  supportedLanguages: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+  })),
+  languageForm: PropTypes.shape({
+    screenReaderLabel: PropTypes.string.isRequired,
+    submitLabel: PropTypes.string.isRequired,
+    onLanguageSelected: PropTypes.func.isRequired,
+    icon: PropTypes.node.isRequired,
+    activeLanguage: PropTypes.string,
+  }),
+  copyright: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.node,
+  ]),
+  trademark: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.node,
+  ]),
   handleAllTrackEvents: PropTypes.func.isRequired,
 };
 
+const linkSectionDefault = {
+  title: null,
+  linkList: [],
+};
+
 SiteFooter.defaultProps = {
-  siteName: null,
   siteLogo: null,
   marketingSiteBaseUrl: null,
-  supportUrl: null,
+  linkSectionOne: linkSectionDefault,
-  contactUrl: null,
+  linkSectionTwo: linkSectionDefault,
-  openSourceUrl: null,
+  linkSectionThree: linkSectionDefault,
-  termsOfServiceUrl: null,
+  socialLinks: [],
-  privacyPolicyUrl: null,
-  showSocialLinks: true,
-  facebookUrl: null,
-  twitterUrl: null,
-  youTubeUrl: null,
-  linkedInUrl: null,
-  googlePlusUrl: null,
-  redditUrl: null,
   showMobileLinks: true,
-  appleAppStoreUrl: null,
+  appleAppStore: null,
-  googlePlayUrl: null,
+  googlePlay: null,
+  supportedLanguages: [],
+  languageForm: null,
+  copyright: null,
+  trademark: null,
 };
 
 export default SiteFooter;