chore: resolve http-cache-semantics security issue

Adds the intl-imports.js script for FC-0012 OEP-58.

"src/i18n/messages/ar.json"

@@ -1,39 +0,0 @@
-{
-  "footer.site-footer.link.about": "About",
-  "footer.site-footer.link.business": "{siteName} for Business",
-  "footer.site-footer.link.affiliates": "Affiliates",
-  "footer.site-footer.link.open-source": "Open {siteName}",
-  "footer.site-footer.link.careers": "Careers",
-  "footer.site-footer.link.news": "News",
-  "footer.site-footer.link.header.legal": "Legal",
-  "footer.site-footer.link.terms-of-service": "Terms of Service & Honor Code",
-  "footer.site-footer.link.privacy": "Privacy Policy",
-  "footer.site-footer.link.accessibility": "Accessibility Policy",
-  "footer.site-footer.link.trademark": "Trademark Policy",
-  "footer.site-footer.link.sitemap": "Sitemap",
-  "footer.site-footer.link.header.connect": "Connect",
-  "footer.site-footer.link.blog": "Blog",
-  "footer.site-footer.link.contact-us": "Contact Us",
-  "footer.site-footer.link.help-center": "Help Center",
-  "footer.site-footer.link.media-kit": "Media Kit",
-  "footer.site-footer.link.donate": "Donate",
-  "footer.site-footer.copyright-text": "{copyrightSymbol} {startDate}–{endDate} {siteName} Inc.",
-  "footer.site-footer.trademark-text": "EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | {icpLicense}",
-  "footer.site-footer.site-logo.alt-text": "{siteName} logo",
-  "footer.site-footer.site-logo.aria-label": "{siteName} Home",
-  "footer.site-footer.facebook.title": "Facebook",
-  "footer.site-footer.facebook.screen-reader-text": "Like {siteName} on Facebook",
-  "footer.site-footer.twitter.title": "Twitter",
-  "footer.site-footer.twitter.screen-reader-text": "Follow {siteName} on Twitter",
-  "footer.site-footer.youtube.title": "Youtube",
-  "footer.site-footer.youtube.screen-reader-text": "Subscribe to the {siteName} YouTube channel",
-  "footer.site-footer.linkedin.title": "LinkedIn",
-  "footer.site-footer.linkedin.screen-reader-text": "Follow {siteName} on LinkedIn",
-  "footer.site-footer.google-plus.title": "Google+",
-  "footer.site-footer.google-plus.screen-reader-text": "Follow {siteName} on Google+",
-  "footer.site-footer.reddit.title": "Reddit",
-  "footer.site-footer.reddit.screen-reader-text": "Subscribe to the {siteName} subreddit",
-  "footer.site-footer.apple-app-store.alt-text": "Download the {siteName} mobile app from the Apple App Store",
-  "footer.site-footer.google-play.alt-text": "Download the {siteName} mobile app from Google Play",
-  "footer.site-footer.footer.aria-label": "Page Footer"
-}

"src/i18n/messages/es_419.json"

@@ -1,39 +0,0 @@
-{
-  "footer.site-footer.link.about": "About",
-  "footer.site-footer.link.business": "{siteName} for Business",
-  "footer.site-footer.link.affiliates": "Affiliates",
-  "footer.site-footer.link.open-source": "Open {siteName}",
-  "footer.site-footer.link.careers": "Careers",
-  "footer.site-footer.link.news": "News",
-  "footer.site-footer.link.header.legal": "Legal",
-  "footer.site-footer.link.terms-of-service": "Terms of Service & Honor Code",
-  "footer.site-footer.link.privacy": "Privacy Policy",
-  "footer.site-footer.link.accessibility": "Accessibility Policy",
-  "footer.site-footer.link.trademark": "Trademark Policy",
-  "footer.site-footer.link.sitemap": "Sitemap",
-  "footer.site-footer.link.header.connect": "Connect",
-  "footer.site-footer.link.blog": "Blog",
-  "footer.site-footer.link.contact-us": "Contact Us",
-  "footer.site-footer.link.help-center": "Help Center",
-  "footer.site-footer.link.media-kit": "Media Kit",
-  "footer.site-footer.link.donate": "Donate",
-  "footer.site-footer.copyright-text": "{copyrightSymbol} {startDate}–{endDate} {siteName} Inc.",
-  "footer.site-footer.trademark-text": "EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | {icpLicense}",
-  "footer.site-footer.site-logo.alt-text": "{siteName} logo",
-  "footer.site-footer.site-logo.aria-label": "{siteName} Home",
-  "footer.site-footer.facebook.title": "Facebook",
-  "footer.site-footer.facebook.screen-reader-text": "Like {siteName} on Facebook",
-  "footer.site-footer.twitter.title": "Twitter",
-  "footer.site-footer.twitter.screen-reader-text": "Follow {siteName} on Twitter",
-  "footer.site-footer.youtube.title": "Youtube",
-  "footer.site-footer.youtube.screen-reader-text": "Subscribe to the {siteName} YouTube channel",
-  "footer.site-footer.linkedin.title": "LinkedIn",
-  "footer.site-footer.linkedin.screen-reader-text": "Follow {siteName} on LinkedIn",
-  "footer.site-footer.google-plus.title": "Google+",
-  "footer.site-footer.google-plus.screen-reader-text": "Follow {siteName} on Google+",
-  "footer.site-footer.reddit.title": "Reddit",
-  "footer.site-footer.reddit.screen-reader-text": "Subscribe to the {siteName} subreddit",
-  "footer.site-footer.apple-app-store.alt-text": "Download the {siteName} mobile app from the Apple App Store",
-  "footer.site-footer.google-play.alt-text": "Download the {siteName} mobile app from Google Play",
-  "footer.site-footer.footer.aria-label": "Page Footer"
-}

"src/i18n/messages/fr.json"

@@ -1,39 +0,0 @@
-{
-  "footer.site-footer.link.about": "About",
-  "footer.site-footer.link.business": "{siteName} for Business",
-  "footer.site-footer.link.affiliates": "Affiliates",
-  "footer.site-footer.link.open-source": "Open {siteName}",
-  "footer.site-footer.link.careers": "Careers",
-  "footer.site-footer.link.news": "News",
-  "footer.site-footer.link.header.legal": "Legal",
-  "footer.site-footer.link.terms-of-service": "Terms of Service & Honor Code",
-  "footer.site-footer.link.privacy": "Privacy Policy",
-  "footer.site-footer.link.accessibility": "Accessibility Policy",
-  "footer.site-footer.link.trademark": "Trademark Policy",
-  "footer.site-footer.link.sitemap": "Sitemap",
-  "footer.site-footer.link.header.connect": "Connect",
-  "footer.site-footer.link.blog": "Blog",
-  "footer.site-footer.link.contact-us": "Contact Us",
-  "footer.site-footer.link.help-center": "Help Center",
-  "footer.site-footer.link.media-kit": "Media Kit",
-  "footer.site-footer.link.donate": "Donate",
-  "footer.site-footer.copyright-text": "{copyrightSymbol} {startDate}–{endDate} {siteName} Inc.",
-  "footer.site-footer.trademark-text": "EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | {icpLicense}",
-  "footer.site-footer.site-logo.alt-text": "{siteName} logo",
-  "footer.site-footer.site-logo.aria-label": "{siteName} Home",
-  "footer.site-footer.facebook.title": "Facebook",
-  "footer.site-footer.facebook.screen-reader-text": "Like {siteName} on Facebook",
-  "footer.site-footer.twitter.title": "Twitter",
-  "footer.site-footer.twitter.screen-reader-text": "Follow {siteName} on Twitter",
-  "footer.site-footer.youtube.title": "Youtube",
-  "footer.site-footer.youtube.screen-reader-text": "Subscribe to the {siteName} YouTube channel",
-  "footer.site-footer.linkedin.title": "LinkedIn",
-  "footer.site-footer.linkedin.screen-reader-text": "Follow {siteName} on LinkedIn",
-  "footer.site-footer.google-plus.title": "Google+",
-  "footer.site-footer.google-plus.screen-reader-text": "Follow {siteName} on Google+",
-  "footer.site-footer.reddit.title": "Reddit",
-  "footer.site-footer.reddit.screen-reader-text": "Subscribe to the {siteName} subreddit",
-  "footer.site-footer.apple-app-store.alt-text": "Download the {siteName} mobile app from the Apple App Store",
-  "footer.site-footer.google-play.alt-text": "Download the {siteName} mobile app from Google Play",
-  "footer.site-footer.footer.aria-label": "Page Footer"
-}

"src/i18n/messages/zh_CN.json"

@@ -1,39 +0,0 @@
-{
-  "footer.site-footer.link.about": "About",
-  "footer.site-footer.link.business": "{siteName} for Business",
-  "footer.site-footer.link.affiliates": "Affiliates",
-  "footer.site-footer.link.open-source": "Open {siteName}",
-  "footer.site-footer.link.careers": "Careers",
-  "footer.site-footer.link.news": "News",
-  "footer.site-footer.link.header.legal": "Legal",
-  "footer.site-footer.link.terms-of-service": "Terms of Service & Honor Code",
-  "footer.site-footer.link.privacy": "Privacy Policy",
-  "footer.site-footer.link.accessibility": "Accessibility Policy",
-  "footer.site-footer.link.trademark": "Trademark Policy",
-  "footer.site-footer.link.sitemap": "Sitemap",
-  "footer.site-footer.link.header.connect": "Connect",
-  "footer.site-footer.link.blog": "Blog",
-  "footer.site-footer.link.contact-us": "Contact Us",
-  "footer.site-footer.link.help-center": "Help Center",
-  "footer.site-footer.link.media-kit": "Media Kit",
-  "footer.site-footer.link.donate": "Donate",
-  "footer.site-footer.copyright-text": "{copyrightSymbol} {startDate}–{endDate} {siteName} Inc.",
-  "footer.site-footer.trademark-text": "EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | {icpLicense}",
-  "footer.site-footer.site-logo.alt-text": "{siteName} logo",
-  "footer.site-footer.site-logo.aria-label": "{siteName} Home",
-  "footer.site-footer.facebook.title": "Facebook",
-  "footer.site-footer.facebook.screen-reader-text": "Like {siteName} on Facebook",
-  "footer.site-footer.twitter.title": "Twitter",
-  "footer.site-footer.twitter.screen-reader-text": "Follow {siteName} on Twitter",
-  "footer.site-footer.youtube.title": "Youtube",
-  "footer.site-footer.youtube.screen-reader-text": "Subscribe to the {siteName} YouTube channel",
-  "footer.site-footer.linkedin.title": "LinkedIn",
-  "footer.site-footer.linkedin.screen-reader-text": "Follow {siteName} on LinkedIn",
-  "footer.site-footer.google-plus.title": "Google+",
-  "footer.site-footer.google-plus.screen-reader-text": "Follow {siteName} on Google+",
-  "footer.site-footer.reddit.title": "Reddit",
-  "footer.site-footer.reddit.screen-reader-text": "Subscribe to the {siteName} subreddit",
-  "footer.site-footer.apple-app-store.alt-text": "Download the {siteName} mobile app from the Apple App Store",
-  "footer.site-footer.google-play.alt-text": "Download the {siteName} mobile app from Google Play",
-  "footer.site-footer.footer.aria-label": "Page Footer"
-}

.babelrc

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

.env.development

@@ -0,0 +1,19 @@
+ACCESS_TOKEN_COOKIE_NAME=edx-jwt-cookie-header-payload
+BASE_URL=localhost:8080
+CREDENTIALS_BASE_URL=http://localhost:18150
+CSRF_TOKEN_API_PATH=/csrf/api/v1/token
+ECOMMERCE_BASE_URL=http://localhost:18130
+LANGUAGE_PREFERENCE_COOKIE_NAME=openedx-language-preference
+LMS_BASE_URL=http://localhost:18000
+LOGIN_URL=http://localhost:18000/login
+LOGOUT_URL=http://localhost:18000/login
+MARKETING_SITE_BASE_URL=http://localhost:18000
+ORDER_HISTORY_URL=localhost:1996/orders
+REFRESH_ACCESS_TOKEN_ENDPOINT=http://localhost:18000/login_refresh
+SEGMENT_KEY=null
+SITE_NAME=Open edX
+USER_INFO_COOKIE_NAME=edx-user-info
+LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
+LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
+LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
+FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico

.eslintignore

@@ -1,3 +1,4 @@
 coverage
 dist
+example
 node_modules

.eslintrc.js

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

.eslintrc.json

@@ -1,19 +0,0 @@
-{
-    "extends": "eslint-config-edx",
-    "rules": {
-        "import/no-extraneous-dependencies": [
-            "error",
-            {
-                "devDependencies": [
-                    "webpack.config.js",
-                    "src/tests/setupTest.js",
-                    "**/*.test.jsx",
-                    "**/*.test.js"
-                ]
-            }
-        ]
-    },
-    "env": {
-        "jest": true
-    }
-}

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

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

.github/workflows/add-remove-label-on-comment.yml

@@ -0,0 +1,20 @@
+# This workflow runs when a comment is made on the ticket
+# If the comment starts with "label: " it tries to apply
+# the label indicated in rest of comment.
+# If the comment starts with "remove label: ", it tries
+# to remove the indicated label.
+# Note: Labels are allowed to have spaces and this script does
+# not parse spaces (as often a space is legitimate), so the command
+# "label: really long lots of words label" will apply the
+# label "really long lots of words label"
+
+name: Allows for the adding and removing of labels via comment
+
+on:
+  issue_comment:
+    types: [created]
+
+jobs:
+  add_remove_labels:
+    uses: openedx/.github/.github/workflows/add-remove-label-on-comment.yml@master
+

.github/workflows/ci.yml

@@ -0,0 +1,36 @@
+name: Default CI
+on:
+  push:
+    branches:
+    - master
+  pull_request:
+    branches:
+    - '**'
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v3
+      with:
+        fetch-depth: 0
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
+    - name: Setup Nodejs
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ env.NODE_VER }}
+    - name: Install dependencies
+      run: npm ci
+    - name: Validate package-lock.json changes
+      run: make validate-no-uncommitted-package-lock-changes
+    - name: Lint
+      run: npm run lint
+    - name: Test
+      run: npm run test
+    - name: Build
+      run: npm run build
+    - name: i18n_extract
+      run: npm run i18n_extract
+    - name: Coverage
+      uses: codecov/codecov-action@v3

.github/workflows/commitlint.yml

@@ -0,0 +1,10 @@
+# Run commitlint on the commit messages in a pull request.
+
+name: Lint Commit Messages
+
+on:
+  - pull_request
+
+jobs:
+  commitlint:
+    uses: openedx/.github/.github/workflows/commitlint.yml@master

.github/workflows/lockfileversion-check.yml

@@ -0,0 +1,13 @@
+#check package-lock file version
+
+name: Lockfile Version check
+
+on:
+  push:
+    branches:
+    - master
+  pull_request:
+
+jobs:
+  version-check:
+    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master

.github/workflows/release.yml

@@ -0,0 +1,39 @@
+name: Release CI
+on:
+  push:
+    branches:
+    - master
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v3
+      with:
+        fetch-depth: 0
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
+    - name: Setup Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ env.NODE_VER }}
+    - name: Install dependencies
+      run: npm ci
+    - name: Validate package-lock.json changes
+      run: make validate-no-uncommitted-package-lock-changes
+    - name: Lint
+      run: npm run lint
+    - name: Test
+      run: npm run test
+    - name: i18n_extract
+      run: npm run i18n_extract
+    - name: Coverage
+      uses: codecov/codecov-action@v3
+    - name: Build
+      run: npm run build
+    - name: Release
+      env:
+        GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
+        NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
+      run: npx semantic-release

.github/workflows/self-assign-issue.yml

@@ -0,0 +1,12 @@
+# This workflow runs when a comment is made on the ticket
+# If the comment starts with "assign me" it assigns the author to the
+# ticket (case insensitive)
+
+name: Assign comment author to ticket if they say "assign me"
+on:
+  issue_comment:
+    types: [created]
+
+jobs:
+  self_assign_by_comment:
+    uses: openedx/.github/.github/workflows/self-assign-issue.yml@master

.gitignore

@@ -1,6 +1,12 @@
+.DS_Store
 coverage
 dist
 node_modules
 temp
 
 .idea/
+
+src/i18n/transifex_input.json
+temp/babel-plugin-react-intl
+/.vscode
+module.config.js

.nvmrc

@@ -0,0 +1 @@
+18

.travis.yml

@@ -1,19 +0,0 @@
-language: node_js
-node_js:
-  - 8
-cache:
-  directories:
-    - "~/.npm"
-install:
-  - npm install
-script:
-  - npm run lint
-  - npm run test
-  - npm run build
-after_success:
-  - npm run travis-deploy-once "npm run semantic-release"
-  - npm run coveralls
-env:
-  global:
-    - secure: dxQadqP6tsoJzHcqs/Hs5AjE42z45q8ZeWKP5HcjbXoJURB4gc1uIxLky0FA6ZpulaTgRVTLcWQbx9yOODc9PQuFnFEDWlCg5EP8tONzeu7BVlJvV5eakgGUhl9w2pekBKsTGhK5dDg2y2D8bGfIL55UX81uiWeytp8s/y8QNs/FNXx9ScJnfhnC+2RfW52fB7iW12F1VYdQfVe43o5PsHze+YhB3FU/ztGe3iMaQiq9QplZWpvqQMpI7pTjyUAX8ITiiPS6UvLFObgpXpfjZdgd+yveFoi3z8o8F0NkmzBphFeSYFjFZE0qJ8bnGNIZldanMeuUgHmDeTwVmKQFhH2LqqnfcdGgW6UsKcHkSN1G51zzad2dEwAHrgxj1NkMp3JfEed2C7Kvntl6KRjVDmYZqHJvt+e+AHNbpjzblOW8tYMIrdz0TeJdk4D9pP3B3tRCtP6fvQ3GLzAMnaCrSsN6hZ9YVxWku8sg8WNEDHl14sZsdgk312MlHIdiUw97FHGrqx/NCix4IkUlCBDbKYbKzbZp20FfzZcwNRNH74+k6xpOnMGSfq8gByEhm9y02MBL76HiAI2VGct2La1ExaUfoikYGoNaZpFcZyOZKo6PYTYHpiUJmqrEnDyVQEOOXUaVsxWXwnYq/mU4nOEPKCRbNpPoksZdNxf6jlmMi8s=
-    - secure: lrlV0WQaXTRJ2lqDkFZ+1RkRb7YM/STOViOHUNboXb5+1ReVwY0wklFDVk/Qigp3jkbqWfzkBmEjSDVGDLD61QjpGY4BsxZ/Jn3+KUdo0n82Ym6cI/je1fH2gqDLi4U8bylmnkI5oEjV/1txDxkj4hF5w/Leo/oGue3xQohpi//ihhm/PxzExj+QiDqyZPZ5RQZeqLfPEU3Wff04vLE5bRmy1nDTZrgm5Wb1n5ItGsyrUyrCGuAM9kIEun65Snb8hxCuU9pSm1w/xF73iOGLiiC8KZhLu6SxSKoC872ai1GpUXNIqA8kpVeH0Erf5opMtqJT3jTTan/VOFQEoOeAKhR0ga+5rfK2jkhhN77B98dGVndNCfBpDlgQxVv42H6riFk3payZT262QiUqDejiBDtSPTokTGxf7xFtQkQQahhxVXzC2HRKEkDTXNSP8cvk2JJ4zCcUgxJpycudLMuC/Xv0upK+Q0caItBrHxfVNnRKkjKqlDxRhA8nXTY8d2n19FNi7wahCECbyweJJ76EaJaa/Ib6remUBrbGLoQ2PkaSMBHAcn3+7+H/6x11b2s1RHj5qyfIyrvZcDDyNuxdXwpOkhtrkwZsjgtOfXL6IuxW5FExgPPr8B9nNwJJKdTxyxgfqtwBR5+m9nrMixzT6AMe95torZ6eX40gKZ/O9EU=

.tx/config

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

Makefile

@@ -1,36 +1,56 @@
-extract_translations: ## no prerequisites so we can control order of operations
+export TRANSIFEX_RESOURCE = frontend-component-footer
-	echo "We have to define this target due to tooling assumptions"
+transifex_langs = "ar,fr,es_419,zh_CN,pt,it,de,uk,ru,hi,fr_CA,it_IT,pt_PT,de_DE"
-	echo "Also we have to npm install using this hook b/c there's no other place for it in the current setup"
+
+transifex_utils = ./node_modules/.bin/transifex-utils.js
+i18n = ./src/i18n
+transifex_input = $(i18n)/transifex_input.json
+
+# This directory must match .babelrc .
+transifex_temp = ./temp/babel-plugin-react-intl
+
+build:
+	rm -rf ./dist
+	./node_modules/.bin/fedx-scripts babel src --out-dir dist --source-maps --ignore **/*.test.jsx,**/__mocks__,**/__snapshots__,**/setupTest.js --copy-files
+	@# --copy-files will bring in everything else that wasn't processed by babel. Remove what we don't want.
+	@rm -rf dist/**/*.test.jsx
+	@rm -rf dist/**/__snapshots__
+	@rm -rf dist/__mocks__
+
+requirements:
 	npm install
-	npm run-script i18n_extract
 
 i18n.extract:
-    # Pulling display strings from .jsx files into .json files...
+	# Pulling display strings from .jsx files into .json files...
+	rm -rf $(transifex_temp)
 	npm run-script i18n_extract
 
 i18n.concat:
-    # Gathering JSON messages into one file...
+	# Gathering JSON messages into one file...
-	./src/i18n/i18n-concat.js ./temp/src ./src/i18n/transifex_input.json
+	$(transifex_utils) $(transifex_temp) $(transifex_input)
 
-i18n.pre_validate: | i18n.extract i18n.concat
+extract_translations: | requirements i18n.extract i18n.concat
-	git diff --exit-code ./src/i18n/transifex_input.json
 
-tx_url1 = https://www.transifex.com/api/2/project/edx-platform/resource/frontend-component-footer/translation/en/strings/
+# Despite the name, we actually need this target to detect changes in the incoming translated message files as well.
-tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/frontend-component-footer/source/
+detect_changed_source_translations:
+	# Checking for changed translations...
+	git diff --exit-code $(i18n)
 
-# push translations to Transifex, doing magic so we can include the translator comments
+# Pushes translations to Transifex.  You must run make extract_translations first.
-push_translations: | i18n.extract
+push_translations:
-	# Adding translator comments...
+	# Pushing strings to Transifex...
-	# Fetching strings from Transifex...
+	tx push -s
-	./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
+	# Fetching hashes from Transifex...
-    # Writing out comments to file...
+	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
-	./src/i18n/i18n-concat.js ./temp/src --comments
+	# Writing out comments to file...
-    # Adding comments to Transifex...
+	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
-	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)
+	# Pushing comments to Transifex...
+	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
 
-# pull translations from Transifex
+# Pulls translations from Transifex.
-pull_translations: ## must be exactly this name for edx tooling support, see ecommerce-scripts/transifex/pull.py
+pull_translations:
-	tx pull -f --mode reviewed --language="ar,fr,es_419,zh_CN"
+	tx pull -t -f --mode reviewed --languages=$(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

@@ -1,45 +1,96 @@
+#########################
 frontend-component-footer
-=========================
+#########################
 
-|Build Status| |Coveralls| |npm_version| |npm_downloads| |license|
+|Build Status| |Codecov| |npm_version| |npm_downloads| |license| |semantic-release|
-|semantic-release|
 
-frontend-component-footer is a library containing a site footer
+********
-component for use when building edX frontend applications.
+Overview
+********
 
-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``.
+A generic footer for Open edX micro-frontend applications.  It includes a logo and an optional language selector dropdown.
-
-Usage
------
-
-To install frontend-component-footer into your project::
-
-   npm i --save @edx/frontend-component-footer
-
-The component expects properties specifying the various URLs that are
-linked in the footer. See the sample app in `src/index.jsx <src/index.jsx>`__ for an example
-of how the SiteFooter component can be specified.
 
+************
 Requirements
-------------
+************
 
-This component uses ``react-intl``. Any containing app must provide ``react-intl`` as a peer dependency, and be wrapped inside an ``IntlProvider`` element, whether or not your consuming application is actually localized. For a basic default locale (English) version, follow the ``IntlProvider`` example in the sample application in `src/index.jsx <src/index.jsx>`__.
+This component uses ``@edx/frontend-platform`` services such as i18n, analytics, configuration, and the ``AppContext`` React component, and expects that it has been loaded into a micro-frontend that has been properly initialized via ``@edx/frontend-platform``'s ``initialize`` function.  `Please visit the frontend template application to see an example. <https://github.com/openedx/frontend-template-application/blob/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx>`_
 
+Environment Variables
+=====================
+
+This component requires that the following environment variable be set by the consuming micro-frontend.
+
+* ``LMS_BASE_URL`` - The URL of the LMS of your Open edX instance.
+* ``LOGO_TRADEMARK_URL`` - This is a URL to a logo for use in the footer.  This is a different environment variable than ``LOGO_URL`` (used in frontend-component-header) to accommodate sites that would like to have additional trademark information on a logo in the footer, such as a (tm) or (r) symbol.
+
+************
+Installation
+************
+
+To install this footer into your Open edX micro-frontend, run the following command in your MFE:
+
+``npm i --save @edx/frontend-component-footer``
+
+This will make the component available to be imported into your application.
+
+*****
+Usage
+*****
+
+This library has the following exports:
+
+* ``(default)``: The footer as a React component.
+* ``messages``: Internationalization messages suitable for use with `@edx/frontend-platform/i18n <https://edx.github.io/frontend-platform/module-Internationalization.html>`_
+* ``dist/footer.scss``: A SASS file which contains style information for the component.  It should be imported into the micro-frontend's own SCSS file.
+
+<Footer /> component props
+==========================
+
+* onLanguageSelected: Provides the footer with an event handler for when the user selects a
+  language from its dropdown.
+* supportedLanguages: An array of objects representing available languages.  See example below for object shape.
+
+Examples
+========
+
+Component Usage Example::
+
+  import Footer, { messages } from '@edx/frontend-component-footer';
+
+  ...
+
+  <Footer
+    onLanguageSelected={(languageCode) => {/* set language */}}
+    supportedLanguages={[
+      { label: 'English', value: 'en'},
+      { label: 'Español', value: 'es' },
+    ]}
+  />
+
+* `An example of minimal component and messages usage. <https://github.com/openedx/frontend-template-application/blob/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx#L23>`_
+* `An example of SCSS file usage. <https://github.com/openedx/frontend-template-application/blob/3cd5485bf387b8c479baf6b02bf59e3061dc3465/src/index.scss#L9>`_
+
+***********
 Development
------------
+***********
 
-Start the dev server::
+Install dependencies::
 
-   npm i && npm start
+  npm i
 
-Build the component::
+Start the development server::
 
-   npm run build
+  npm start
 
-.. |Build Status| image:: https://api.travis-ci.org/edx/frontend-component-footer.svg?branch=master
+Build a production distribution::
-   :target: https://travis-ci.org/edx/frontend-component-footer
+
-.. |Coveralls| image:: https://img.shields.io/coveralls/edx/frontend-component-footer.svg?branch=master
+  npm run build
-   :target: https://coveralls.io/github/edx/frontend-component-footer
+
+.. |Build Status| image:: https://api.travis-ci.com/edx/frontend-component-footer.svg?branch=master
+   :target: https://travis-ci.com/edx/frontend-component-footer
+.. |Codecov| image:: https://img.shields.io/codecov/c/github/edx/frontend-component-footer
+   :target: @edx/frontend-component-footer
 .. |npm_version| image:: https://img.shields.io/npm/v/@edx/frontend-component-footer.svg
    :target: @edx/frontend-component-footer
 .. |npm_downloads| image:: https://img.shields.io/npm/dt/@edx/frontend-component-footer.svg

babel.config.js

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

commitlint.config.js

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

config/webpack.common.config.js

@@ -1,15 +0,0 @@
-// This is the common Webpack config. The dev and prod Webpack configs both
-// inherit config defined here.
-const path = require('path');
-
-module.exports = {
-  entry: {
-    app: path.resolve(__dirname, '../src/index.jsx'),
-  },
-  output: {
-    path: path.resolve(__dirname, '../dist'),
-  },
-  resolve: {
-    extensions: ['.js', '.jsx'],
-  },
-};

config/webpack.dev.config.js

@@ -1,115 +0,0 @@
-// This is the dev Webpack config. All settings here should prefer a fast build
-// time at the expense of creating larger, unoptimized bundles.
-const Merge = require('webpack-merge');
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const webpack = require('webpack');
-
-const commonConfig = require('./webpack.common.config.js');
-
-module.exports = Merge.smart(commonConfig, {
-  mode: 'development',
-  entry: [
-    // enable react's custom hot dev client so we get errors reported in the browser
-    require.resolve('react-dev-utils/webpackHotDevClient'),
-    path.resolve(__dirname, '../src/index.jsx'),
-  ],
-  module: {
-    // Specify file-by-file rules to Webpack. Some file-types need a particular kind of loader.
-    rules: [
-      // The babel-loader transforms newer ES2015+ syntax to older ES5 for older browsers.
-      // Babel is configured with the .babelrc file at the root of the project.
-      {
-        test: /\.(js|jsx)$/,
-        include: [
-          path.resolve(__dirname, '../src'),
-        ],
-        loader: 'babel-loader',
-        options: {
-          // Caches result of loader to the filesystem. Future builds will attempt to read from the
-          // cache to avoid needing to run the expensive recompilation process on each run.
-          cacheDirectory: true,
-        },
-      },
-      // We are not extracting CSS from the javascript bundles in development because extracting
-      // prevents hot-reloading from working, it increases build time, and we don't care about
-      // flash-of-unstyled-content issues in development.
-      {
-        test: /(.scss|.css)$/,
-        use: [
-          'style-loader', // creates style nodes from JS strings
-          {
-            loader: 'css-loader', // translates CSS into CommonJS
-            options: {
-              sourceMap: true,
-            },
-          },
-          {
-            loader: 'sass-loader', // compiles Sass to CSS
-            options: {
-              sourceMap: true,
-              includePaths: [
-                path.join(__dirname, '../node_modules'),
-                path.join(__dirname, '../src'),
-              ],
-            },
-          },
-        ],
-      },
-      // Webpack, by default, uses the url-loader for images and fonts that are required/included by
-      // files it processes, which just base64 encodes them and inlines them in the javascript
-      // bundles. This makes the javascript bundles ginormous and defeats caching so we will use the
-      // file-loader instead to copy the files directly to the output directory.
-      {
-        test: /\.(woff2?|ttf|svg|eot)(\?v=\d+\.\d+\.\d+)?$/,
-        loader: 'file-loader',
-      },
-      {
-        test: /\.(jpe?g|png|gif|ico)(\?v=\d+\.\d+\.\d+)?$/,
-        use: [
-          'file-loader',
-          {
-            loader: 'image-webpack-loader',
-            options: {
-              optimizationlevel: 7,
-              mozjpeg: {
-                progressive: true,
-              },
-              gifsicle: {
-                interlaced: false,
-              },
-              pngquant: {
-                quality: '65-90',
-                speed: 4,
-              },
-            },
-          },
-        ],
-      },
-    ],
-  },
-  // Specify additional processing or side-effects done on the Webpack output bundles as a whole.
-  plugins: [
-    // Generates an HTML file in the output directory.
-    new HtmlWebpackPlugin({
-      inject: true, // Appends script tags linking to the webpack bundles at the end of the body
-      template: path.resolve(__dirname, '../public/index.html'),
-    }),
-    new webpack.EnvironmentPlugin({
-      NODE_ENV: 'development',
-    }),
-    // when the --hot option is not passed in as part of the command
-    // the HotModuleReplacementPlugin has to be specified in the Webpack configuration
-    // https://webpack.js.org/configuration/dev-server/#devserver-hot
-    new webpack.HotModuleReplacementPlugin(),
-  ],
-  // This configures webpack-dev-server which serves bundles from memory and provides live
-  // reloading.
-  devServer: {
-    host: '0.0.0.0',
-    port: 3000,
-    historyApiFallback: true,
-    hot: true,
-    inline: true,
-  },
-});

config/webpack.prod.config.js

@@ -1,58 +0,0 @@
-// This is the prod Webpack config. All settings here should prefer smaller,
-// optimized bundles at the expense of a longer build time.
-const Merge = require('webpack-merge');
-const commonConfig = require('./webpack.common.config.js');
-const path = require('path');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
-
-module.exports = Merge.smart(commonConfig, {
-  mode: 'production',
-  devtool: 'source-map',
-  entry: './src/lib/index.js',
-  output: {
-    path: path.resolve(__dirname, '../dist'),
-    library: 'frontend-component-footer',
-    libraryTarget: 'umd',
-  },
-  resolve: {
-    extensions: ['.js', '.jsx'],
-    alias: {
-      react: path.resolve(__dirname, './node_modules/react'),
-      'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
-    },
-  },
-  externals: {
-    react: {
-      commonjs: 'react',
-      commonjs2: 'react',
-      amd: 'React',
-      root: 'React',
-    },
-    'react-dom': {
-      commonjs: 'react-dom',
-      commonjs2: 'react-dom',
-      amd: 'ReactDOM',
-      root: 'ReactDOM',
-    },
-  },
-  plugins: [
-    // Cleans the dist directory before each build
-    new CleanWebpackPlugin(['dist'], {
-      root: path.join(__dirname, '../'),
-    }),
-  ],
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx)$/,
-        include: [
-          path.resolve(__dirname, '../src/lib'),
-        ],
-        exclude: /(node_modules)/,
-        use: [
-          { loader: 'babel-loader' },
-        ],
-      },
-    ],
-  },
-});

example/index.jsx

@@ -0,0 +1,33 @@
+import 'babel-polyfill';
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { initialize, getConfig, subscribe, APP_READY } from '@edx/frontend-platform';
+import { AppContext, AppProvider } from '@edx/frontend-platform/react';
+import Footer from '@edx/frontend-component-footer';
+
+import './index.scss';
+
+subscribe(APP_READY, () => {
+  ReactDOM.render(
+    <AppProvider>
+      <AppContext.Provider value={{
+        authenticatedUser: null,
+        config: getConfig(),
+      }}>
+        <Footer
+          onLanguageSelected={() => {}}
+          supportedLanguages={[
+            { label: 'English', value: 'en' },
+            { label: 'Español', value: 'es' },
+          ]}
+        />
+      </AppContext.Provider>
+    </AppProvider>,
+    document.getElementById('root'),
+  );
+});
+
+initialize({
+  messages: []
+});

example/index.scss

@@ -0,0 +1,6 @@
+@import "@edx/brand/paragon/fonts";
+@import "@edx/brand/paragon/variables";
+@import "@edx/paragon/scss/core/core";
+@import "@edx/brand/paragon/overrides";
+
+@import "@edx/frontend-component-footer/footer";

jest.config.js

@@ -0,0 +1,7 @@
+const { createConfig } = require('@edx/frontend-build');
+
+module.exports = createConfig('jest', {
+  setupFiles: [
+    '<rootDir>/src/setupTest.js',
+  ],
+});

openedx.yaml

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

package.json

@@ -1,110 +1,66 @@
 {
   "name": "@edx/frontend-component-footer",
   "version": "1.0.0-semantically-released",
-  "description": "Site footer component for use when building edX frontend applications",
+  "description": "Footer component for use when building Open edX frontend applications",
-  "main": "dist/main.js",
+  "main": "dist/index.js",
-  "module": "dist/main.js",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "NODE_ENV=production BABEL_ENV=production webpack  --config=config/webpack.prod.config.js",
+    "build": "make build",
-    "gc": "commit",
+    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
-    "commitmsg": "commitlint -e $GIT_PARAMS",
+    "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
-    "coveralls": "cat ./coverage/lcov.info | coveralls",
+    "snapshot": "fedx-scripts jest --updateSnapshot",
-    "i18n_extract": "BABEL_ENV=i18n babel src --quiet > /dev/null",
+    "start": "fedx-scripts webpack-dev-server --progress",
-    "lint": "eslint --ext .js --ext .jsx .",
+    "test": "fedx-scripts jest --coverage"
-    "precommit": "npm run lint",
+  },
-    "prepublishOnly": "npm run build",
+  "files": [
-    "semantic-release": "semantic-release",
+    "/dist"
-    "start": "NODE_ENV=development BABEL_ENV=development node_modules/.bin/webpack-dev-server --config=config/webpack.dev.config.js --progress",
+  ],
-    "test": "jest --coverage",
+  "husky": {
-    "snapshot": "jest --updateSnapshot",
+    "hooks": {
-    "travis-deploy-once": "travis-deploy-once",
+      "pre-commit": "npm run lint"
-    "watch": "watch 'npm run build' ./src"
+    }
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/edx/frontend-component-footer.git"
+    "url": "git+https://github.com/openedx/frontend-component-footer.git"
   },
   "author": "edX",
   "license": "AGPL-3.0",
   "bugs": {
-    "url": "https://github.com/edx/frontend-component-footer/issues"
+    "url": "https://github.com/openedx/frontend-component-footer/issues"
   },
-  "homepage": "https://github.com/edx/frontend-component-footer#readme",
+  "homepage": "https://github.com/openedx/frontend-component-footer#readme",
   "devDependencies": {
-    "@commitlint/cli": "^7.1.2",
+    "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
-    "@commitlint/config-angular": "^6.0.2",
+    "@edx/browserslist-config": "^1.1.1",
-    "@commitlint/prompt": "^6.0.2",
+    "@edx/frontend-build": "12.7.0",
-    "@commitlint/prompt-cli": "^6.0.2",
+    "@edx/paragon": "^20.19.0",
-    "@edx/paragon": "^3.8.0",
+    "@edx/reactifex": "^2.1.1",
-    "babel-cli": "^6.26.0",
+    "enzyme": "3.11.0",
-    "babel-core": "^6.26.3",
+    "enzyme-adapter-react-16": "1.15.7",
-    "babel-loader": "^7.1.5",
+    "husky": "8.0.3",
-    "babel-plugin-react-intl": "^3.0.1",
+    "prop-types": "15.8.1",
-    "babel-plugin-rewire": "^1.2.0",
+    "react": "16.14.0",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "react-dom": "16.14.0",
-    "babel-preset-env": "^1.7.0",
+    "react-redux": "7.2.9",
-    "babel-preset-react": "^6.24.1",
+    "react-router-dom": "5.3.4",
-    "clean-webpack-plugin": "^0.1.19",
+    "react-test-renderer": "16.14.0",
-    "coveralls": "^3.0.0",
+    "redux": "4.2.1",
-    "css-loader": "^0.28.9",
+    "semantic-release": "19.0.5"
-    "enzyme": "^3.3.0",
+  },
-    "enzyme-adapter-react-16": "^1.1.1",
+  "dependencies": {
-    "eslint": "^5.2.0",
+    "@edx/frontend-platform": "^4.1.0",
-    "eslint-config-edx": "^4.0.4",
+    "@fortawesome/fontawesome-svg-core": "6.4.0",
-    "eslint-plugin-jsx-a11y": "^6.1.2",
+    "@fortawesome/free-brands-svg-icons": "6.4.0",
-    "file-loader": "^1.1.9",
+    "@fortawesome/free-regular-svg-icons": "6.4.0",
-    "glob": "^7.1.3",
+    "@fortawesome/free-solid-svg-icons": "6.4.0",
-    "html-webpack-plugin": "^3.2.0",
+    "@fortawesome/react-fontawesome": "0.2.0"
-    "husky": "^0.14.3",
-    "image-webpack-loader": "^4.2.0",
-    "jest": "23.6.0",
-    "node-sass": "^4.7.2",
-    "prop-types": "^15.5.10",
-    "react": "^16.4.2",
-    "react-dev-utils": "^5.0.0",
-    "react-dom": "^16.2.0",
-    "react-intl": "^2.8.0",
-    "react-test-renderer": "^16.6.0",
-    "reactifex": "^1.1.1",
-    "sass-loader": "^6.0.6",
-    "semantic-release": "^15.1.7",
-    "source-map-loader": "^0.2.1",
-    "style-loader": "^0.20.2",
-    "travis-deploy-once": "^5.0.0",
-    "watch": "^1.0.2",
-    "webpack": "^4.19.1",
-    "webpack-cli": "^3.1.0",
-    "webpack-dev-server": "^3.1.9",
-    "webpack-merge": "^4.2.1"
   },
   "peerDependencies": {
-    "@edx/paragon": "^3.8.0",
-    "clean-webpack-plugin": "^0.1.19",
-    "html-webpack-plugin": "^3.2.0",
     "prop-types": "^15.5.10",
-    "react": "^16.4.2",
+    "react": "^16.9.0 || ^17.0.0",
-    "react-dom": "^16.2.0",
+    "react-dom": "^16.9.0 || ^17.0.0"
-    "react-intl": "2.x",
-    "webpack": "^4.19.1",
-    "webpack-merge": "^4.2.1"
-  },
-  "jest": {
-    "setupFiles": [
-      "./src/tests/setupTest.js"
-    ],
-    "collectCoverageFrom": [
-      "src/lib/**/*.{js,jsx}",
-      "!src/tests/setupTest.js",
-      "!src/index.js",
-      "!**/node_modules/**",
-      "!**/tests/**"
-    ],
-    "moduleNameMapper": {
-      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
-      "\\.(css|scss)$": "identity-obj-proxy"
-    }
   }
 }

public/index.html

@@ -1,7 +1,7 @@
 <!doctype html>
-<html lang="en-us">
+<html lang="en-us" dir="ltr">
   <head>
-      <title>Footer | edX</title>
+      <title>Footer</title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>

renovate.json

@@ -0,0 +1,33 @@
+{
+  "extends": [
+    "config:base",
+    "schedule:weekly",
+    ":automergeLinters",
+    ":automergeMinor",
+    ":automergeTesters",
+    ":enableVulnerabilityAlerts",
+    ":rebaseStalePrs",
+    ":semanticCommits",
+    ":updateNotScheduled"
+  ],
+  "packageRules": [
+    {
+      "matchDepTypes": [
+        "devDependencies"
+      ],
+      "matchUpdateTypes": [
+        "lockFileMaintenance",
+        "minor",
+        "patch",
+        "pin"
+      ],
+      "automerge": true
+    },
+    {
+      "matchPackagePatterns": ["@edx"],
+      "matchUpdateTypes": ["minor", "patch"],
+      "automerge": true
+    }
+  ],
+  "timezone": "America/New_York"
+}

src/_footer.scss

@@ -0,0 +1,5 @@
+$gray-footer: #fcfcfc !default;
+
+.footer {
+  background-color: $gray-footer;
+}

src/components/Footer.jsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { ensureConfig } from '@edx/frontend-platform/config';
+import { AppContext } from '@edx/frontend-platform/react';
+
+import messages from './Footer.messages';
+import LanguageSelector from './LanguageSelector';
+
+ensureConfig([
+  'LMS_BASE_URL',
+  'LOGO_TRADEMARK_URL',
+], 'Footer component');
+
+const EVENT_NAMES = {
+  FOOTER_LINK: 'edx.bi.footer.link',
+};
+
+class SiteFooter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.externalLinkClickHandler = this.externalLinkClickHandler.bind(this);
+  }
+
+  externalLinkClickHandler(event) {
+    const label = event.currentTarget.getAttribute('href');
+    const eventName = EVENT_NAMES.FOOTER_LINK;
+    const properties = {
+      category: 'outbound_link',
+      label,
+    };
+    sendTrackEvent(eventName, properties);
+  }
+
+  render() {
+    const {
+      supportedLanguages,
+      onLanguageSelected,
+      logo,
+      intl,
+    } = this.props;
+    const showLanguageSelector = supportedLanguages.length > 0 && onLanguageSelected;
+    const { config } = this.context;
+
+    return (
+      <footer
+        role="contentinfo"
+        className="footer d-flex border-top py-3 px-4"
+      >
+        <div className="container-fluid d-flex">
+          <a
+            className="d-block"
+            href={config.LMS_BASE_URL}
+            aria-label={intl.formatMessage(messages['footer.logo.ariaLabel'])}
+          >
+            <img
+              style={{ maxHeight: 45 }}
+              src={logo || config.LOGO_TRADEMARK_URL}
+              alt={intl.formatMessage(messages['footer.logo.altText'])}
+            />
+          </a>
+          <div className="flex-grow-1" />
+          {showLanguageSelector && (
+            <LanguageSelector
+              options={supportedLanguages}
+              onSubmit={onLanguageSelected}
+            />
+          )}
+        </div>
+      </footer>
+    );
+  }
+}
+
+SiteFooter.contextType = AppContext;
+
+SiteFooter.propTypes = {
+  intl: intlShape.isRequired,
+  logo: PropTypes.string,
+  onLanguageSelected: PropTypes.func,
+  supportedLanguages: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+  })),
+};
+
+SiteFooter.defaultProps = {
+  logo: undefined,
+  onLanguageSelected: undefined,
+  supportedLanguages: [],
+};
+
+export default injectIntl(SiteFooter);
+export { EVENT_NAMES };

src/components/Footer.messages.js

@@ -0,0 +1,156 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  'footer.socialLinks.srText.facebook': {
+    id: 'footer.socialLinks.srText.facebook',
+    defaultMessage: 'Like edX on Facebook',
+    description: 'This is screenreader text for the edX Facebook social media link in the footer.',
+  },
+  'footer.socialLinks.srText.twitter': {
+    id: 'footer.socialLinks.srText.twitter',
+    defaultMessage: 'Follow edX on Twitter',
+    description: 'This is screenreader text for the edX Twitter social media link in the footer.',
+  },
+  'footer.socialLinks.srText.youtube': {
+    id: 'footer.socialLinks.srText.youtube',
+    defaultMessage: 'Subscribe to the edX YouTube channel',
+    description: 'This is screenreader text for the edX YouTube social media link in the footer.',
+  },
+  'footer.socialLinks.srText.linkedin': {
+    id: 'footer.socialLinks.srText.linkedin',
+    defaultMessage: 'Follow edX on LinkedIn',
+    description: 'This is screenreader text for the edX LinkedIn social media link in the footer.',
+  },
+  'footer.socialLinks.srText.reddit': {
+    id: 'footer.socialLinks.srText.reddit',
+    defaultMessage: 'Subscribe to the edX subreddit',
+    description: 'This is screenreader text for the edX reddit social media link in the footer.',
+  },
+  'footer.languageForm.select.label': {
+    id: 'footer.languageForm.select.label',
+    defaultMessage: 'Choose Language',
+    description: 'The label for the laguage select part of the language selection form.',
+  },
+  'footer.languageForm.submit.label': {
+    id: 'footer.languageForm.submit.label',
+    defaultMessage: 'Apply',
+    description: 'The label for button to submit the language selection form.',
+  },
+  'footer.edxLinks.about': {
+    id: 'footer.edxLinks.about',
+    defaultMessage: 'About',
+    description: 'The label for the link to the about edX page.',
+  },
+  'footer.edxLinks.business': {
+    id: 'footer.edxLinks.business',
+    defaultMessage: 'edX for Business',
+    description: 'The label for the link to the edX for business page.',
+  },
+  'footer.edxLinks.affiliates': {
+    id: 'footer.edxLinks.affiliates',
+    defaultMessage: 'Affiliates',
+    description: 'The label for the link to the edX affiliates page.',
+  },
+  'footer.edxLinks.openEdx': {
+    id: 'footer.edxLinks.openEdx',
+    defaultMessage: 'Open edX',
+    description: 'The label for the link to the open edX site.',
+  },
+  'footer.edxLinks.careers': {
+    id: 'footer.edxLinks.careers',
+    defaultMessage: 'Careers',
+    description: 'The label for the link to the edX Careers page.',
+  },
+  'footer.edxLinks.news': {
+    id: 'footer.edxLinks.news',
+    defaultMessage: 'News',
+    description: 'The label for the link to the edX news page.',
+  },
+  'footer.legalLinks.heading': {
+    id: 'footer.legalLinks.heading',
+    defaultMessage: 'Legal',
+    description: 'Heading for the legal links section of the footer.',
+  },
+  'footer.legalLinks.termsOfService': {
+    id: 'footer.legalLinks.termsOfService',
+    defaultMessage: 'Terms of Service & Honor Code',
+    description: 'The label for the link to the edX terms of service page.',
+  },
+  'footer.legalLinks.privacyPolicy': {
+    id: 'footer.legalLinks.privacyPolicy',
+    defaultMessage: 'Privacy Policy',
+    description: 'The label for the link to the edX privacy policy page.',
+  },
+  'footer.legalLinks.a11yPolicy': {
+    id: 'footer.legalLinks.a11yPolicy',
+    defaultMessage: 'Accessibility Policy',
+    description: 'The label for the link to the edX accessibility policy page.',
+  },
+  'footer.legalLinks.trademarkPolicy': {
+    id: 'footer.legalLinks.trademarkPolicy',
+    defaultMessage: 'Trademark Policy',
+    description: 'The label for the link to the edX trademark policy page.',
+  },
+  'footer.legalLinks.sitemap': {
+    id: 'footer.legalLinks.sitemap',
+    defaultMessage: 'Sitemap',
+    description: 'The label for the link to the edX sitemap page.',
+  },
+  'footer.connectLinks.heading': {
+    id: 'footer.connectLinks.heading',
+    defaultMessage: 'Connect',
+    description: 'Heading for the connect links section of the footer.',
+  },
+  'footer.connectLinks.blog': {
+    id: 'footer.connectLinks.blog',
+    defaultMessage: 'Blog',
+    description: 'The label for the link to the edX blog.',
+  },
+  'footer.connectLinks.contact': {
+    id: 'footer.connectLinks.contact',
+    defaultMessage: 'Contact Us',
+    description: 'The label for the link to the contact edX page.',
+  },
+  'footer.connectLinks.help': {
+    id: 'footer.connectLinks.help',
+    defaultMessage: 'Help Center',
+    description: 'The label for the link to the edX help center.',
+  },
+  'footer.connectLinks.mediaKit': {
+    id: 'footer.connectLinks.mediaKit',
+    defaultMessage: 'Media Kit',
+    description: 'The label for the link to the edX media kit page.',
+  },
+  'footer.connectLinks.donate': {
+    id: 'footer.connectLinks.donate',
+    defaultMessage: 'Donate',
+    description: 'The label for the link to the edX donation page.',
+  },
+  'footer.mobileApp.apple': {
+    id: 'footer.mobileApp.apple',
+    defaultMessage: 'Download the edX mobile app from the Apple App Store',
+    description: 'The label for the link to download the apple version of the edX app.',
+  },
+  'footer.mobileApp.google': {
+    id: 'footer.mobileApp.google',
+    defaultMessage: 'Download the edX mobile app from Google Play',
+    description: 'The label for the link to download the google version of the edX app.',
+  },
+  'footer.logo.altText': {
+    id: 'footer.logo.altText',
+    defaultMessage: 'Powered by Open edX',
+    description: 'alt text for the footer logo.',
+  },
+  'footer.logo.ariaLabel': {
+    id: 'footer.logo.ariaLabel',
+    defaultMessage: 'edX Home',
+    description: 'aria-label for the footer logo.',
+  },
+  'footer.ariaLabel': {
+    id: 'footer.ariaLabel',
+    defaultMessage: 'Page Footer',
+    description: 'aria-label for the footer component',
+  },
+});
+
+export default messages;

src/components/Footer.test.jsx

@@ -0,0 +1,96 @@
+/* eslint-disable react/prop-types */
+import React, { useMemo } from 'react';
+import renderer from 'react-test-renderer';
+import { mount } from 'enzyme';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { AppContext } from '@edx/frontend-platform/react';
+
+import Footer from './Footer';
+
+const FooterWithContext = ({ locale = 'es' }) => {
+  const contextValue = useMemo(() => ({
+    authenticatedUser: null,
+    config: {
+      LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
+      LMS_BASE_URL: process.env.LMS_BASE_URL,
+    },
+  }), []);
+
+  return (
+    <IntlProvider locale={locale}>
+      <AppContext.Provider
+        value={contextValue}
+      >
+        <Footer />
+      </AppContext.Provider>
+    </IntlProvider>
+  );
+};
+
+const FooterWithLanguageSelector = ({ languageSelected = () => {} }) => {
+  const contextValue = useMemo(() => ({
+    authenticatedUser: null,
+    config: {
+      LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
+      LMS_BASE_URL: process.env.LMS_BASE_URL,
+    },
+  }), []);
+
+  return (
+    <IntlProvider locale="en">
+      <AppContext.Provider
+        value={contextValue}
+      >
+        <Footer
+          onLanguageSelected={languageSelected}
+          supportedLanguages={[
+            { label: 'English', value: 'en' },
+            { label: 'Español', value: 'es' },
+          ]}
+        />
+      </AppContext.Provider>
+    </IntlProvider>
+  );
+};
+
+describe('<Footer />', () => {
+  describe('renders correctly', () => {
+    it('renders without a language selector', () => {
+      const tree = renderer
+        .create(<FooterWithContext locale="en" />)
+        .toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+    it('renders without a language selector in es', () => {
+      const tree = renderer
+        .create(<FooterWithContext locale="es" />)
+        .toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+    it('renders with a language selector', () => {
+      const tree = renderer
+        .create(<FooterWithLanguageSelector />)
+        .toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+  });
+
+  describe('handles language switching', () => {
+    it('calls onLanguageSelected prop when a language is changed', () => {
+      const mockHandleLanguageSelected = jest.fn();
+      const wrapper = mount(<FooterWithLanguageSelector languageSelected={mockHandleLanguageSelected} />);
+
+      wrapper.find('form').simulate('submit', {
+        target: {
+          elements: {
+            'site-footer-language-select': {
+              value: 'es',
+            },
+          },
+        },
+      });
+
+      expect(mockHandleLanguageSelected).toHaveBeenCalledWith('es');
+    });
+  });
+});

src/components/LanguageSelector.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+
+const LanguageSelector = ({
+  intl, options, onSubmit, ...props
+}) => {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const languageCode = e.target.elements['site-footer-language-select'].value;
+    onSubmit(languageCode);
+  };
+
+  return (
+    <form
+      className="form-inline"
+      onSubmit={handleSubmit}
+      {...props}
+    >
+      <div className="form-group">
+        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+        <label htmlFor="site-footer-language-select" className="d-inline-block m-0">
+          <FormattedMessage
+            id="footer.languageForm.select.label"
+            defaultMessage="Choose Language"
+            description="The label for the laguage select part of the language selection form."
+          />
+        </label>
+        <select
+          id="site-footer-language-select"
+          className="form-control-sm mx-2"
+          name="site-footer-language-select"
+          defaultValue={intl.locale}
+        >
+          {options.map(({ value, label }) => <option key={value} value={value}>{label}</option>)}
+        </select>
+        <button className="btn btn-outline-primary btn-sm" type="submit">
+          <FormattedMessage
+            id="footer.languageForm.submit.label"
+            defaultMessage="Apply"
+            description="The label for button to submit the language selection form."
+          />
+        </button>
+      </div>
+    </form>
+  );
+};
+
+LanguageSelector.propTypes = {
+  intl: intlShape.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string,
+  })).isRequired,
+};
+
+export default injectIntl(LanguageSelector);

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

@@ -0,0 +1,129 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Footer /> renders correctly renders with a language selector 1`] = `
+<footer
+  className="footer d-flex border-top py-3 px-4"
+  role="contentinfo"
+>
+  <div
+    className="container-fluid d-flex"
+  >
+    <a
+      aria-label="edX Home"
+      className="d-block"
+      href="http://localhost:18000"
+    >
+      <img
+        alt="Powered by Open edX"
+        src="https://edx-cdn.org/v3/default/logo-trademark.svg"
+        style={
+          Object {
+            "maxHeight": 45,
+          }
+        }
+      />
+    </a>
+    <div
+      className="flex-grow-1"
+    />
+    <form
+      className="form-inline"
+      onSubmit={[Function]}
+    >
+      <div
+        className="form-group"
+      >
+        <label
+          className="d-inline-block m-0"
+          htmlFor="site-footer-language-select"
+        >
+          Choose Language
+        </label>
+        <select
+          className="form-control-sm mx-2"
+          defaultValue="en"
+          id="site-footer-language-select"
+          name="site-footer-language-select"
+        >
+          <option
+            value="en"
+          >
+            English
+          </option>
+          <option
+            value="es"
+          >
+            Español
+          </option>
+        </select>
+        <button
+          className="btn btn-outline-primary btn-sm"
+          type="submit"
+        >
+          Apply
+        </button>
+      </div>
+    </form>
+  </div>
+</footer>
+`;
+
+exports[`<Footer /> renders correctly renders without a language selector 1`] = `
+<footer
+  className="footer d-flex border-top py-3 px-4"
+  role="contentinfo"
+>
+  <div
+    className="container-fluid d-flex"
+  >
+    <a
+      aria-label="edX Home"
+      className="d-block"
+      href="http://localhost:18000"
+    >
+      <img
+        alt="Powered by Open edX"
+        src="https://edx-cdn.org/v3/default/logo-trademark.svg"
+        style={
+          Object {
+            "maxHeight": 45,
+          }
+        }
+      />
+    </a>
+    <div
+      className="flex-grow-1"
+    />
+  </div>
+</footer>
+`;
+
+exports[`<Footer /> renders correctly renders without a language selector in es 1`] = `
+<footer
+  className="footer d-flex border-top py-3 px-4"
+  role="contentinfo"
+>
+  <div
+    className="container-fluid d-flex"
+  >
+    <a
+      aria-label="edX Home"
+      className="d-block"
+      href="http://localhost:18000"
+    >
+      <img
+        alt="Powered by Open edX"
+        src="https://edx-cdn.org/v3/default/logo-trademark.svg"
+        style={
+          Object {
+            "maxHeight": 45,
+          }
+        }
+      />
+    </a>
+    <div
+      className="flex-grow-1"
+    />
+  </div>
+</footer>
+`;

src/i18n/i18n-concat.js

@@ -1,57 +0,0 @@
-#!/usr/bin/env node
-/**
- * This code originally came from https://github.com/efischer19/reactifex/blob/master/main.js,
- * which should be edx/reactifex. It is temporarily being copied here until we find it a new home.
- */
-
-// NOTE: This script is called from Jenkins using devDependencies, so eslint is being
-// disabled so it doesn't force you to make these real dependencies.
-const fs = require('fs'); // eslint-disable-line import/no-extraneous-dependencies
-const glob = require('glob'); // eslint-disable-line import/no-extraneous-dependencies
-const path = require('path'); // eslint-disable-line import/no-extraneous-dependencies
-
-// Expected input: a directory, possibly containing subdirectories, with .json files.  Each .json
-// file is an array of translation triplets (id, description, defaultMessage).
-function gatherJson(dir) {
-  const ret = [];
-  const files = glob.sync(`${dir}/**/*.json`);
-
-  files.forEach((filename) => {
-    const messages = JSON.parse(fs.readFileSync(filename));
-    ret.push(...messages);
-  });
-  return ret;
-}
-
-const jsonDir = process.argv[2];
-const messageObjects = gatherJson(jsonDir);
-
-if (process.argv[3] === '--comments') { // prepare to handle the translator notes
-  const thisFile = path.basename(`${__filename}`);
-  const bashScriptsPath = './node_modules/reactifex/bash_scripts';
-
-  process.stdout.write(`${thisFile}: generating bash scripts...\n`);
-  process.stdout.write(`${thisFile}: info file at ${bashScriptsPath}/hashmap.json\n`);
-
-  const messageInfo = JSON.parse(fs.readFileSync(`${bashScriptsPath}/hashmap.json`));
-  const dataPath = `${bashScriptsPath}/hashed_data.txt`;
-
-  process.stdout.write(`${thisFile}: data path is ${dataPath}\n`);
-  fs.writeFileSync(dataPath, '');
-
-  messageObjects.forEach((message) => {
-    const info = messageInfo.find(mi => mi.key === message.id);
-    if (info) {
-      fs.appendFileSync(dataPath, `${info.string_hash}|${message.description}\n`);
-    } else {
-      process.stdout.write(`${thisFile}: string ${message.id} does not yet exist on transifex!\n`);
-    }
-  });
-} else {
-  const output = {};
-
-  messageObjects.forEach((message) => {
-    output[message.id] = message.defaultMessage;
-  });
-  fs.writeFileSync(process.argv[3], JSON.stringify(output, null, 2));
-}

src/i18n/index.js

@@ -0,0 +1,34 @@
+import arMessages from './messages/ar.json';
+import frMessages from './messages/fr.json';
+import es419Messages from './messages/es_419.json';
+import zhcnMessages from './messages/zh_CN.json';
+import ptMessages from './messages/pt.json';
+import itMessages from './messages/it.json';
+import ukMessages from './messages/uk.json';
+import deMessages from './messages/de.json';
+import ruMessages from './messages/ru.json';
+import hiMessages from './messages/hi.json';
+import frCAMessages from './messages/fr_CA.json';
+import dedeCAMessages from './messages/de_DE.json';
+import ititCAMessages from './messages/it_IT.json';
+import ptptCAMessages from './messages/pt_PT.json';
+// no need to import en messages-- they are in the defaultMessage field
+
+const messages = {
+  ar: arMessages,
+  'es-419': es419Messages,
+  fr: frMessages,
+  'zh-cn': zhcnMessages,
+  pt: ptMessages,
+  it: itMessages,
+  de: deMessages,
+  hi: hiMessages,
+  'fr-ca': frCAMessages,
+  ru: ruMessages,
+  uk: ukMessages,
+  'de-de': dedeCAMessages,
+  'it-it': ititCAMessages,
+  'pt-pt': ptptCAMessages,
+};
+
+export default messages;

src/i18n/messages/ar.json

@@ -1,2 +1 @@
-{
+{}
-}

src/i18n/messages/de.json

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

src/i18n/messages/de_DE.json

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

src/i18n/messages/es_419.json

@@ -1,2 +1 @@
-{
+{}
-}

src/i18n/messages/fr.json

@@ -1,2 +1 @@
-{
+{}
-}

src/i18n/messages/fr_CA.json

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

src/i18n/messages/hi.json

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

src/i18n/messages/it.json

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

src/i18n/messages/it_IT.json

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

src/i18n/messages/pt.json

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

src/i18n/messages/pt_PT.json

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

src/i18n/messages/ru.json

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

src/i18n/messages/uk.json

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

src/i18n/messages/zh_CN.json

@@ -1,2 +1 @@
-{
+{}
-}

src/i18n/transifex_input.json

@@ -1,39 +0,0 @@
-{
-  "footer.site-footer.link.about": "About",
-  "footer.site-footer.link.business": "{siteName} for Business",
-  "footer.site-footer.link.affiliates": "Affiliates",
-  "footer.site-footer.link.open-source": "Open {siteName}",
-  "footer.site-footer.link.careers": "Careers",
-  "footer.site-footer.link.news": "News",
-  "footer.site-footer.link.header.legal": "Legal",
-  "footer.site-footer.link.terms-of-service": "Terms of Service & Honor Code",
-  "footer.site-footer.link.privacy": "Privacy Policy",
-  "footer.site-footer.link.accessibility": "Accessibility Policy",
-  "footer.site-footer.link.trademark": "Trademark Policy",
-  "footer.site-footer.link.sitemap": "Sitemap",
-  "footer.site-footer.link.header.connect": "Connect",
-  "footer.site-footer.link.blog": "Blog",
-  "footer.site-footer.link.contact-us": "Contact Us",
-  "footer.site-footer.link.help-center": "Help Center",
-  "footer.site-footer.link.media-kit": "Media Kit",
-  "footer.site-footer.link.donate": "Donate",
-  "footer.site-footer.copyright-text": "{copyrightSymbol} {startDate}–{endDate} {siteName} Inc.",
-  "footer.site-footer.trademark-text": "EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | {icpLicense}",
-  "footer.site-footer.site-logo.alt-text": "{siteName} logo",
-  "footer.site-footer.site-logo.aria-label": "{siteName} Home",
-  "footer.site-footer.facebook.title": "Facebook",
-  "footer.site-footer.facebook.screen-reader-text": "Like {siteName} on Facebook",
-  "footer.site-footer.twitter.title": "Twitter",
-  "footer.site-footer.twitter.screen-reader-text": "Follow {siteName} on Twitter",
-  "footer.site-footer.youtube.title": "Youtube",
-  "footer.site-footer.youtube.screen-reader-text": "Subscribe to the {siteName} YouTube channel",
-  "footer.site-footer.linkedin.title": "LinkedIn",
-  "footer.site-footer.linkedin.screen-reader-text": "Follow {siteName} on LinkedIn",
-  "footer.site-footer.google-plus.title": "Google+",
-  "footer.site-footer.google-plus.screen-reader-text": "Follow {siteName} on Google+",
-  "footer.site-footer.reddit.title": "Reddit",
-  "footer.site-footer.reddit.screen-reader-text": "Subscribe to the {siteName} subreddit",
-  "footer.site-footer.apple-app-store.alt-text": "Download the {siteName} mobile app from the Apple App Store",
-  "footer.site-footer.google-play.alt-text": "Download the {siteName} mobile app from Google Play",
-  "footer.site-footer.footer.aria-label": "Page Footer"
-}

src/index.js

@@ -0,0 +1,5 @@
+import Footer, { EVENT_NAMES } from './components/Footer';
+import messages from './i18n/index';
+
+export default Footer;
+export { messages, EVENT_NAMES };

src/index.jsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { render } from 'react-dom';
-import { IntlProvider } from 'react-intl';
-import SiteFooter from './lib';
-import './index.scss';
-
-import FooterLogo from './edx-footer.png';
-
-const App = () => (
-  <IntlProvider locale="en">
-    <SiteFooter
-      siteName="edX"
-      siteLogo={FooterLogo}
-      marketingSiteBaseUrl="https://www.example.com"
-      supportUrl="https://www.example.com/support"
-      contactUrl="https://www.example.com/contact"
-      openSourceUrl="https://www.example.com/open"
-      termsOfServiceUrl="https://www.example.com/terms-of-service"
-      privacyPolicyUrl="https://www.example.com/privacy-policy"
-      facebookUrl="https://www.facebook.com"
-      twitterUrl="https://www.twitter.com"
-      youTubeUrl="https://www.youtube.com"
-      linkedInUrl="https://www.linkedin.com"
-      googlePlusUrl="https://plus.google.com"
-      redditUrl="https://reddit.com"
-      appleAppStoreUrl="https://store.apple.com"
-      googlePlayUrl="https://play.google.com"
-      handleAllTrackEvents={() => {}}
-    />
-  </IntlProvider>
-);
-
-render(<App />, document.getElementById('root'));

src/index.scss

@@ -1,4 +0,0 @@
-@import "~@edx/edx-bootstrap/sass/edx/theme";
-@import "~bootstrap/scss/bootstrap";
-
-@import './lib/scss/_site-footer.scss';

src/lib/components/SiteFooter/SiteFooter.messages.jsx

@@ -1,91 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-const messages = defineMessages({
-  'footer.site-footer.site-logo.alt-text': {
-    id: 'footer.site-footer.site-logo.alt-text',
-    defaultMessage: '{siteName} logo',
-    description: 'The alt description of the site logo',
-  },
-  'footer.site-footer.site-logo.aria-label': {
-    id: 'footer.site-footer.site-logo.aria-label',
-    defaultMessage: '{siteName} Home',
-    description: 'Aria label for the site logo which goes to the marketing site',
-  },
-  'footer.site-footer.facebook.title': {
-    id: 'footer.site-footer.facebook.title',
-    defaultMessage: 'Facebook',
-    description: 'Facebook button title',
-  },
-  'footer.site-footer.facebook.screen-reader-text': {
-    id: 'footer.site-footer.facebook.screen-reader-text',
-    defaultMessage: 'Like {siteName} on Facebook',
-    description: 'Facebook button screen reader text',
-  },
-  'footer.site-footer.twitter.title': {
-    id: 'footer.site-footer.twitter.title',
-    defaultMessage: 'Twitter',
-    description: 'Twitter button title',
-  },
-  'footer.site-footer.twitter.screen-reader-text': {
-    id: 'footer.site-footer.twitter.screen-reader-text',
-    defaultMessage: 'Follow {siteName} on Twitter',
-    description: 'Twitter button screen reader text',
-  },
-  'footer.site-footer.youtube.title': {
-    id: 'footer.site-footer.youtube.title',
-    defaultMessage: 'Youtube',
-    description: 'Youtube button title',
-  },
-  'footer.site-footer.youtube.screen-reader-text': {
-    id: 'footer.site-footer.youtube.screen-reader-text',
-    defaultMessage: 'Subscribe to the {siteName} YouTube channel',
-    description: 'Youtube button screen reader text',
-  },
-  'footer.site-footer.linkedin.title': {
-    id: 'footer.site-footer.linkedin.title',
-    defaultMessage: 'LinkedIn',
-    description: 'LinkedIn button title',
-  },
-  'footer.site-footer.linkedin.screen-reader-text': {
-    id: 'footer.site-footer.linkedin.screen-reader-text',
-    defaultMessage: 'Follow {siteName} on LinkedIn',
-    description: 'LinkedIn button screen reader text',
-  },
-  'footer.site-footer.google-plus.title': {
-    id: 'footer.site-footer.google-plus.title',
-    defaultMessage: 'Google+',
-    description: 'Google+ button title',
-  },
-  'footer.site-footer.google-plus.screen-reader-text': {
-    id: 'footer.site-footer.google-plus.screen-reader-text',
-    defaultMessage: 'Follow {siteName} on Google+',
-    description: 'Google+ button screen reader text',
-  },
-  'footer.site-footer.reddit.title': {
-    id: 'footer.site-footer.reddit.title',
-    defaultMessage: 'Reddit',
-    description: 'Reddit button title',
-  },
-  'footer.site-footer.reddit.screen-reader-text': {
-    id: 'footer.site-footer.reddit.screen-reader-text',
-    defaultMessage: 'Subscribe to the {siteName} subreddit',
-    description: 'Reddit button screen reader text',
-  },
-  'footer.site-footer.apple-app-store.alt-text': {
-    id: 'footer.site-footer.apple-app-store.alt-text',
-    defaultMessage: 'Download the {siteName} mobile app from the Apple App Store',
-    description: 'Apple App Store button alt description',
-  },
-  'footer.site-footer.google-play.alt-text': {
-    id: 'footer.site-footer.google-play.alt-text',
-    defaultMessage: 'Download the {siteName} mobile app from Google Play',
-    description: 'Google Play button alt description',
-  },
-  'footer.site-footer.footer.aria-label': {
-    id: 'footer.site-footer.footer.aria-label',
-    defaultMessage: 'Page Footer',
-    description: 'Aria label for the footer',
-  },
-});
-
-export default messages;

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

@@ -1,123 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import { mount } from 'enzyme';
-import { IntlProvider } from 'react-intl';
-
-import FooterLogo from '../../../edx-footer.png';
-import SiteFooter, { EVENT_NAMES } from './index';
-
-const completeSiteFooterComponent = mockHandleAllTrackEvents =>
-  (
-    <IntlProvider locale="en">
-      <SiteFooter
-        siteName="example"
-        siteLogo={FooterLogo}
-        marketingSiteBaseUrl="https://www.example.com"
-        supportUrl="https://www.example.com/support"
-        contactUrl="https://www.example.com/contact"
-        openSourceUrl="https://www.example.com/open"
-        termsOfServiceUrl="https://www.example.com/terms-of-service"
-        privacyPolicyUrl="https://www.example.com/privacy-policy"
-        facebookUrl="https://www.facebook.com"
-        twitterUrl="https://www.twitter.com"
-        youTubeUrl="https://www.youtube.com"
-        linkedInUrl="https://www.linkedin.com"
-        googlePlusUrl="https://plus.google.com"
-        redditUrl="https://reddit.com"
-        appleAppStoreUrl="https://store.apple.com"
-        googlePlayUrl="https://play.google.com"
-        handleAllTrackEvents={mockHandleAllTrackEvents}
-      />
-    </IntlProvider>
-  );
-
-describe('<SiteFooter />', () => {
-  describe('renders correctly', () => {
-    it('renders with social and mobile links', () => {
-      const mockHandleAllTrackEvents = jest.fn();
-      const tree = renderer
-        .create(completeSiteFooterComponent(mockHandleAllTrackEvents))
-        .toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('does not render social links', () => {
-      const tree = renderer
-        .create((
-          <IntlProvider locale="en">
-            <SiteFooter
-              siteName="example"
-              siteLogo={FooterLogo}
-              marketingSiteBaseUrl="https://www.example.com"
-              supportUrl="https://www.example.com/support"
-              contactUrl="https://www.example.com/contact"
-              openSourceUrl="https://www.example.com/open"
-              termsOfServiceUrl="https://www.example.com/terms-of-service"
-              privacyPolicyUrl="https://www.example.com/privacy-policy"
-              facebookUrl="https://www.facebook.com"
-              twitterUrl="https://www.twitter.com"
-              youTubeUrl="https://www.youtube.com"
-              linkedInUrl="https://www.linkedin.com"
-              googlePlusUrl="https://plus.google.com"
-              redditUrl="https://reddit.com"
-              appleAppStoreUrl="https://store.apple.com"
-              googlePlayUrl="https://play.google.com"
-              handleAllTrackEvents={jest.fn()}
-              showSocialLinks={false}
-            />
-          </IntlProvider>
-        )).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-
-    it('does not render mobile links', () => {
-      const tree = renderer
-        .create((
-          <IntlProvider locale="en">
-            <SiteFooter
-              siteName="example"
-              siteLogo={FooterLogo}
-              marketingSiteBaseUrl="https://www.example.com"
-              supportUrl="https://www.example.com/support"
-              contactUrl="https://www.example.com/contact"
-              openSourceUrl="https://www.example.com/open"
-              termsOfServiceUrl="https://www.example.com/terms-of-service"
-              privacyPolicyUrl="https://www.example.com/privacy-policy"
-              facebookUrl="https://www.facebook.com"
-              twitterUrl="https://www.twitter.com"
-              youTubeUrl="https://www.youtube.com"
-              linkedInUrl="https://www.linkedin.com"
-              googlePlusUrl="https://plus.google.com"
-              redditUrl="https://reddit.com"
-              appleAppStoreUrl="https://store.apple.com"
-              googlePlayUrl="https://play.google.com"
-              handleAllTrackEvents={jest.fn()}
-              showMobileLinks={false}
-            />
-          </IntlProvider>
-        )).toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-  });
-
-  describe('handles analytics', () => {
-    it('calls handleAllTrackEvents prop when external links clicked', () => {
-      const mockHandleAllTrackEvents = jest.fn();
-      const footer = mount((completeSiteFooterComponent(mockHandleAllTrackEvents)));
-      const externalLinks = footer.find("a[target='_blank']");
-
-      expect(externalLinks).toHaveLength(8);
-      externalLinks.forEach((externalLink) => {
-        const callIndex = mockHandleAllTrackEvents.mock.calls.length;
-        externalLink.simulate('click');
-        expect(mockHandleAllTrackEvents.mock.calls[callIndex]).toEqual([
-          EVENT_NAMES.FOOTER_LINK,
-          {
-            category: 'outbound_link',
-            label: externalLink.prop('href'),
-          },
-        ]);
-      });
-    });
-  });
-});

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

@@ -1,979 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-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="example Home"
-        href="https://www.example.com/"
-        onClick={[Function]}
-        target="_self"
-      >
-        <img
-          alt="example logo"
-          src="test-file-stub"
-        />
-      </a>
-    </div>
-    <div
-      className="area-2"
-    >
-      <h2>
-        example
-      </h2>
-      <ul
-        className="list-unstyled p-0 m-0"
-      >
-        <li>
-          <a
-            href="https://www.example.com/about-us"
-          >
-            <span>
-              About
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/enterprise"
-          >
-            <span>
-              example for Business
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/affiliate-program"
-          >
-            <span>
-              Affiliates
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/open"
-          >
-            <span>
-              Open example
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/careers"
-          >
-            <span>
-              Careers
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/news-announcements"
-          >
-            <span>
-              News
-            </span>
-          </a>
-        </li>
-      </ul>
-    </div>
-    <div
-      className="area-3"
-    >
-      <h2>
-        <span>
-          Legal
-        </span>
-      </h2>
-      <ul
-        className="list-unstyled p-0 m-0"
-      >
-        <li>
-          <a
-            href="https://www.example.com/terms-of-service"
-          >
-            <span>
-              Terms of Service & Honor Code
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/privacy-policy"
-          >
-            <span>
-              Privacy Policy
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/accessibility"
-          >
-            <span>
-              Accessibility Policy
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/trademarks"
-          >
-            <span>
-              Trademark Policy
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/sitemap"
-          >
-            <span>
-              Sitemap
-            </span>
-          </a>
-        </li>
-      </ul>
-    </div>
-    <div
-      className="area-4"
-    >
-      <h2>
-        <span>
-          Connect
-        </span>
-      </h2>
-      <ul
-        className="list-unstyled p-0 m-0"
-      >
-        <li>
-          <a
-            href="https://www.example.com/blog"
-          >
-            <span>
-              Blog
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/contact"
-          >
-            <span>
-              Contact Us
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/support"
-          >
-            <span>
-              Help Center
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/media-kit"
-          >
-            <span>
-              Media Kit
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/donate"
-          >
-            <span>
-              Donate
-            </span>
-          </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"
-          >
-            <span
-              aria-hidden={true}
-              className="fa fa-facebook-square fa-2x"
-              id="edx-footer-icon-facebook"
-            />
-            <span
-              className="sr-only"
-            >
-              Like example on Facebook
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.twitter.com"
-            onClick={[Function]}
-            rel="noopener noreferrer"
-            target="_blank"
-            title="Twitter"
-          >
-            <span
-              aria-hidden={true}
-              className="fa fa-twitter-square fa-2x"
-              id="edx-footer-icon-twitter"
-            />
-            <span
-              className="sr-only"
-            >
-              Follow example on Twitter
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.youtube.com"
-            onClick={[Function]}
-            rel="noopener noreferrer"
-            target="_blank"
-            title="Youtube"
-          >
-            <span
-              aria-hidden={true}
-              className="fa fa-youtube-square fa-2x"
-              id="edx-footer-icon-youtube"
-            />
-            <span
-              className="sr-only"
-            >
-              Subscribe to the example YouTube channel
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.linkedin.com"
-            onClick={[Function]}
-            rel="noopener noreferrer"
-            target="_blank"
-            title="LinkedIn"
-          >
-            <span
-              aria-hidden={true}
-              className="fa fa-linkedin-square fa-2x"
-              id="edx-footer-icon-linkedin"
-            />
-            <span
-              className="sr-only"
-            >
-              Follow example on LinkedIn
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://plus.google.com"
-            onClick={[Function]}
-            rel="noopener noreferrer"
-            target="_blank"
-            title="Google+"
-          >
-            <span
-              aria-hidden={true}
-              className="fa fa-google-plus-square fa-2x"
-              id="edx-footer-icon-google"
-            />
-            <span
-              className="sr-only"
-            >
-              Follow example on Google+
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://reddit.com"
-            onClick={[Function]}
-            rel="noopener noreferrer"
-            target="_blank"
-            title="Reddit"
-          >
-            <span
-              aria-hidden={true}
-              className="fa fa-reddit-square fa-2x"
-              id="edx-footer-icon-reddit"
-            />
-            <span
-              className="sr-only"
-            >
-              Subscribe to the example subreddit
-            </span>
-          </a>
-        </li>
-      </ul>
-      <p>
-        <span>
-          © 2012–2019 example Inc.
-        </span>
-        <br />
-        <span>
-          EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 粤ICP备17044299号-2
-        </span>
-      </p>
-    </div>
-  </div>
-</footer>
-`;
-
-exports[`<SiteFooter /> renders correctly does not render social links 1`] = `
-<footer
-  aria-label="Page Footer"
-  className="footer d-flex justify-content-center border-top py-3 px-4"
-  role="contentinfo"
->
-  <div
-    className="max-width-1180 d-grid"
-  >
-    <div
-      className="area-1"
-    >
-      <a
-        aria-label="example Home"
-        href="https://www.example.com/"
-        onClick={[Function]}
-        target="_self"
-      >
-        <img
-          alt="example logo"
-          src="test-file-stub"
-        />
-      </a>
-    </div>
-    <div
-      className="area-2"
-    >
-      <h2>
-        example
-      </h2>
-      <ul
-        className="list-unstyled p-0 m-0"
-      >
-        <li>
-          <a
-            href="https://www.example.com/about-us"
-          >
-            <span>
-              About
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/enterprise"
-          >
-            <span>
-              example for Business
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/affiliate-program"
-          >
-            <span>
-              Affiliates
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/open"
-          >
-            <span>
-              Open example
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/careers"
-          >
-            <span>
-              Careers
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/news-announcements"
-          >
-            <span>
-              News
-            </span>
-          </a>
-        </li>
-      </ul>
-    </div>
-    <div
-      className="area-3"
-    >
-      <h2>
-        <span>
-          Legal
-        </span>
-      </h2>
-      <ul
-        className="list-unstyled p-0 m-0"
-      >
-        <li>
-          <a
-            href="https://www.example.com/terms-of-service"
-          >
-            <span>
-              Terms of Service & Honor Code
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/privacy-policy"
-          >
-            <span>
-              Privacy Policy
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/accessibility"
-          >
-            <span>
-              Accessibility Policy
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/trademarks"
-          >
-            <span>
-              Trademark Policy
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/sitemap"
-          >
-            <span>
-              Sitemap
-            </span>
-          </a>
-        </li>
-      </ul>
-    </div>
-    <div
-      className="area-4"
-    >
-      <h2>
-        <span>
-          Connect
-        </span>
-      </h2>
-      <ul
-        className="list-unstyled p-0 m-0"
-      >
-        <li>
-          <a
-            href="https://www.example.com/blog"
-          >
-            <span>
-              Blog
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/contact"
-          >
-            <span>
-              Contact Us
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/support"
-          >
-            <span>
-              Help Center
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/media-kit"
-          >
-            <span>
-              Media Kit
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/donate"
-          >
-            <span>
-              Donate
-            </span>
-          </a>
-        </li>
-      </ul>
-    </div>
-    <div
-      className="area-5"
-    >
-      <ul
-        className="d-flex flex-row justify-content-between list-unstyled max-width-264 p-0 mb-5"
-      >
-        <li>
-          <a
-            href="https://store.apple.com"
-            onClick={[Function]}
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            <img
-              alt="Download the example 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 example 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>
-        <span>
-          © 2012–2019 example Inc.
-        </span>
-        <br />
-        <span>
-          EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 粤ICP备17044299号-2
-        </span>
-      </p>
-    </div>
-  </div>
-</footer>
-`;
-
-exports[`<SiteFooter /> renders correctly renders with social and mobile links 1`] = `
-<footer
-  aria-label="Page Footer"
-  className="footer d-flex justify-content-center border-top py-3 px-4"
-  role="contentinfo"
->
-  <div
-    className="max-width-1180 d-grid"
-  >
-    <div
-      className="area-1"
-    >
-      <a
-        aria-label="example Home"
-        href="https://www.example.com/"
-        onClick={[Function]}
-        target="_self"
-      >
-        <img
-          alt="example logo"
-          src="test-file-stub"
-        />
-      </a>
-    </div>
-    <div
-      className="area-2"
-    >
-      <h2>
-        example
-      </h2>
-      <ul
-        className="list-unstyled p-0 m-0"
-      >
-        <li>
-          <a
-            href="https://www.example.com/about-us"
-          >
-            <span>
-              About
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/enterprise"
-          >
-            <span>
-              example for Business
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/affiliate-program"
-          >
-            <span>
-              Affiliates
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/open"
-          >
-            <span>
-              Open example
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/careers"
-          >
-            <span>
-              Careers
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/news-announcements"
-          >
-            <span>
-              News
-            </span>
-          </a>
-        </li>
-      </ul>
-    </div>
-    <div
-      className="area-3"
-    >
-      <h2>
-        <span>
-          Legal
-        </span>
-      </h2>
-      <ul
-        className="list-unstyled p-0 m-0"
-      >
-        <li>
-          <a
-            href="https://www.example.com/terms-of-service"
-          >
-            <span>
-              Terms of Service & Honor Code
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/privacy-policy"
-          >
-            <span>
-              Privacy Policy
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/accessibility"
-          >
-            <span>
-              Accessibility Policy
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/trademarks"
-          >
-            <span>
-              Trademark Policy
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/sitemap"
-          >
-            <span>
-              Sitemap
-            </span>
-          </a>
-        </li>
-      </ul>
-    </div>
-    <div
-      className="area-4"
-    >
-      <h2>
-        <span>
-          Connect
-        </span>
-      </h2>
-      <ul
-        className="list-unstyled p-0 m-0"
-      >
-        <li>
-          <a
-            href="https://www.example.com/blog"
-          >
-            <span>
-              Blog
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/contact"
-          >
-            <span>
-              Contact Us
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/support"
-          >
-            <span>
-              Help Center
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/media-kit"
-          >
-            <span>
-              Media Kit
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.example.com/donate"
-          >
-            <span>
-              Donate
-            </span>
-          </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"
-          >
-            <span
-              aria-hidden={true}
-              className="fa fa-facebook-square fa-2x"
-              id="edx-footer-icon-facebook"
-            />
-            <span
-              className="sr-only"
-            >
-              Like example on Facebook
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.twitter.com"
-            onClick={[Function]}
-            rel="noopener noreferrer"
-            target="_blank"
-            title="Twitter"
-          >
-            <span
-              aria-hidden={true}
-              className="fa fa-twitter-square fa-2x"
-              id="edx-footer-icon-twitter"
-            />
-            <span
-              className="sr-only"
-            >
-              Follow example on Twitter
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.youtube.com"
-            onClick={[Function]}
-            rel="noopener noreferrer"
-            target="_blank"
-            title="Youtube"
-          >
-            <span
-              aria-hidden={true}
-              className="fa fa-youtube-square fa-2x"
-              id="edx-footer-icon-youtube"
-            />
-            <span
-              className="sr-only"
-            >
-              Subscribe to the example YouTube channel
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.linkedin.com"
-            onClick={[Function]}
-            rel="noopener noreferrer"
-            target="_blank"
-            title="LinkedIn"
-          >
-            <span
-              aria-hidden={true}
-              className="fa fa-linkedin-square fa-2x"
-              id="edx-footer-icon-linkedin"
-            />
-            <span
-              className="sr-only"
-            >
-              Follow example on LinkedIn
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://plus.google.com"
-            onClick={[Function]}
-            rel="noopener noreferrer"
-            target="_blank"
-            title="Google+"
-          >
-            <span
-              aria-hidden={true}
-              className="fa fa-google-plus-square fa-2x"
-              id="edx-footer-icon-google"
-            />
-            <span
-              className="sr-only"
-            >
-              Follow example on Google+
-            </span>
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://reddit.com"
-            onClick={[Function]}
-            rel="noopener noreferrer"
-            target="_blank"
-            title="Reddit"
-          >
-            <span
-              aria-hidden={true}
-              className="fa fa-reddit-square fa-2x"
-              id="edx-footer-icon-reddit"
-            />
-            <span
-              className="sr-only"
-            >
-              Subscribe to the example 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 example 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 example 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>
-        <span>
-          © 2012–2019 example Inc.
-        </span>
-        <br />
-        <span>
-          EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 粤ICP备17044299号-2
-        </span>
-      </p>
-    </div>
-  </div>
-</footer>
-`;

src/lib/components/SiteFooter/index.jsx

@@ -1,479 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
-import { Hyperlink, Icon } from '@edx/paragon';
-import messages from './SiteFooter.messages';
-
-const EVENT_NAMES = {
-  FOOTER_LINK: 'edx.bi.footer.link',
-};
-
-class SiteFooter extends React.Component {
-  constructor(props) {
-    super(props);
-    this.externalLinkClickHandler = this.externalLinkClickHandler.bind(this);
-  }
-
-  externalLinkClickHandler(event) {
-    const label = event.currentTarget.getAttribute('href');
-    const eventName = EVENT_NAMES.FOOTER_LINK;
-    const properties = {
-      category: 'outbound_link',
-      label,
-    };
-    this.props.handleAllTrackEvents(eventName, properties);
-  }
-
-  renderSiteLogo() {
-    return (
-      <img
-        src={this.props.siteLogo}
-        alt={this.props.intl.formatMessage(
-          messages['footer.site-footer.site-logo.alt-text'],
-          { siteName: this.props.siteName },
-        )}
-      />
-    );
-  }
-
-  renderMarketingSiteUrl(path) {
-    return `${this.props.marketingSiteBaseUrl}${path}`;
-  }
-
-  renderSocialLinks() {
-    const {
-      intl,
-      siteName,
-      showSocialLinks,
-      facebookUrl,
-      twitterUrl,
-      youTubeUrl,
-      linkedInUrl,
-      googlePlusUrl,
-      redditUrl,
-    } = this.props;
-    let socialLinks = null;
-    if (showSocialLinks) {
-      socialLinks = (
-        <ul
-          className="d-flex flex-row justify-content-between list-unstyled max-width-222 p-0 mb-4"
-        >
-          {/* TODO: Use Paragon HyperLink with Icon. */}
-          {/*  Would need to add rel to paragon if we still need it. */}
-          <li>
-            <a
-              href={facebookUrl}
-              title={intl.formatMessage(messages['footer.site-footer.facebook.title'])}
-              rel="noopener noreferrer"
-              target="_blank"
-              onClick={this.externalLinkClickHandler}
-            >
-              <Icon
-                id="edx-footer-icon-facebook"
-                className={['fa', 'fa-facebook-square', 'fa-2x']}
-                screenReaderText={intl.formatMessage(
-                  messages['footer.site-footer.facebook.screen-reader-text'],
-                  { siteName },
-                )}
-              />
-            </a>
-          </li>
-          <li>
-            <a
-              href={twitterUrl}
-              title={intl.formatMessage(messages['footer.site-footer.twitter.title'])}
-              rel="noopener noreferrer"
-              target="_blank"
-              onClick={this.externalLinkClickHandler}
-            >
-              <Icon
-                id="edx-footer-icon-twitter"
-                className={['fa', 'fa-twitter-square', 'fa-2x']}
-                screenReaderText={intl.formatMessage(
-                  messages['footer.site-footer.twitter.screen-reader-text'],
-                  { siteName },
-                )}
-              />
-            </a>
-          </li>
-          <li>
-            <a
-              href={youTubeUrl}
-              title={intl.formatMessage(messages['footer.site-footer.youtube.title'])}
-              rel="noopener noreferrer"
-              target="_blank"
-              onClick={this.externalLinkClickHandler}
-            >
-              <Icon
-                id="edx-footer-icon-youtube"
-                className={['fa', 'fa-youtube-square', 'fa-2x']}
-                screenReaderText={intl.formatMessage(
-                  messages['footer.site-footer.youtube.screen-reader-text'],
-                  { siteName },
-                )}
-              />
-            </a>
-          </li>
-          <li>
-            <a
-              href={linkedInUrl}
-              title={intl.formatMessage(messages['footer.site-footer.linkedin.title'])}
-              rel="noopener noreferrer"
-              target="_blank"
-              onClick={this.externalLinkClickHandler}
-            >
-              <Icon
-                id="edx-footer-icon-linkedin"
-                className={['fa', 'fa-linkedin-square', 'fa-2x']}
-                screenReaderText={intl.formatMessage(
-                  messages['footer.site-footer.linkedin.screen-reader-text'],
-                  { siteName },
-                )}
-              />
-            </a>
-          </li>
-          <li>
-            <a
-              href={googlePlusUrl}
-              title={intl.formatMessage(messages['footer.site-footer.google-plus.title'])}
-              rel="noopener noreferrer"
-              target="_blank"
-              onClick={this.externalLinkClickHandler}
-            >
-              <Icon
-                id="edx-footer-icon-google"
-                className={['fa', 'fa-google-plus-square', 'fa-2x']}
-                screenReaderText={intl.formatMessage(
-                  messages['footer.site-footer.google-plus.screen-reader-text'],
-                  { siteName },
-                )}
-              />
-            </a>
-          </li>
-          <li>
-            <a
-              href={redditUrl}
-              title={intl.formatMessage(messages['footer.site-footer.reddit.title'])}
-              rel="noopener noreferrer"
-              target="_blank"
-              onClick={this.externalLinkClickHandler}
-            >
-              <Icon
-                id="edx-footer-icon-reddit"
-                className={['fa', 'fa-reddit-square', 'fa-2x']}
-                screenReaderText={intl.formatMessage(
-                  messages['footer.site-footer.reddit.screen-reader-text'],
-                  { siteName },
-                )}
-              />
-            </a>
-          </li>
-        </ul>
-      );
-    }
-    return socialLinks;
-  }
-
-  renderMobileLinks() {
-    const {
-      intl,
-      siteName,
-      showMobileLinks,
-      appleAppStoreUrl,
-      googlePlayUrl,
-    } = this.props;
-    let mobileLinks = null;
-    if (showMobileLinks) {
-      mobileLinks = (
-        <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}>
-              <img
-                className="max-height-39"
-                alt={intl.formatMessage(
-                  messages['footer.site-footer.apple-app-store.alt-text'],
-                  { siteName },
-                )}
-                src="https://prod-edxapp.edx-cdn.org/static/images/app/app_store_badge_135x40.d0558d910630.svg"
-              />
-            </a>
-          </li>
-          <li>
-            <a href={googlePlayUrl} rel="noopener noreferrer" target="_blank" onClick={this.externalLinkClickHandler}>
-              <img
-                className="max-height-39"
-                alt={intl.formatMessage(
-                  messages['footer.site-footer.google-play.alt-text'],
-                  { siteName },
-                )}
-                src="https://prod-edxapp.edx-cdn.org/static/images/app/google_play_badge_45.6ea466e328da.png"
-              />
-            </a>
-          </li>
-        </ul>
-      );
-    }
-    return mobileLinks;
-  }
-
-  render() {
-    const {
-      intl,
-      siteName,
-      openSourceUrl,
-      termsOfServiceUrl,
-      privacyPolicyUrl,
-      contactUrl,
-      supportUrl,
-    } = this.props;
-    return (
-      <footer
-        role="contentinfo"
-        aria-label={intl.formatMessage(messages['footer.site-footer.footer.aria-label'])}
-        className="footer d-flex justify-content-center border-top py-3 px-4"
-      >
-        <div className="max-width-1180 d-grid">
-          <div className="area-1">
-            <Hyperlink
-              destination={this.renderMarketingSiteUrl('/')}
-              content={this.renderSiteLogo()}
-              aria-label={intl.formatMessage(
-                messages['footer.site-footer.site-logo.aria-label'],
-                { siteName },
-              )}
-            />
-          </div>
-          <div className="area-2">
-            <h2>{siteName}</h2>
-            <ul className="list-unstyled p-0 m-0">
-              <li>
-                <a href={this.renderMarketingSiteUrl('/about-us')}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.about"
-                    defaultMessage="About"
-                  />
-                </a>
-              </li>
-              <li>
-                <a href={this.renderMarketingSiteUrl('/enterprise')}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.business"
-                    defaultMessage="{siteName} for Business"
-                    values={{ siteName }}
-                  />
-                </a>
-              </li>
-              <li>
-                <a href={this.renderMarketingSiteUrl('/affiliate-program')}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.affiliates"
-                    defaultMessage="Affiliates"
-                  />
-                </a>
-              </li>
-              <li>
-                <a href={openSourceUrl}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.open-source"
-                    defaultMessage="Open {siteName}"
-                    values={{ siteName }}
-                    description="Open Source link text"
-                  />
-                </a>
-              </li>
-              <li>
-                <a href={this.renderMarketingSiteUrl('/careers')}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.careers"
-                    defaultMessage="Careers"
-                  />
-                </a>
-              </li>
-              <li>
-                <a href={this.renderMarketingSiteUrl('/news-announcements')}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.news"
-                    defaultMessage="News"
-                  />
-                </a>
-              </li>
-            </ul>
-          </div>
-          <div className="area-3">
-            <h2>
-              <FormattedMessage
-                id="footer.site-footer.link.header.legal"
-                defaultMessage="Legal"
-                description="Header for legal links"
-              />
-            </h2>
-            <ul className="list-unstyled p-0 m-0">
-              <li>
-                <a href={termsOfServiceUrl}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.terms-of-service"
-                    defaultMessage="Terms of Service & Honor Code"
-                  />
-                </a>
-              </li>
-              <li>
-                <a href={privacyPolicyUrl}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.privacy"
-                    defaultMessage="Privacy Policy"
-                  />
-                </a>
-              </li>
-              <li>
-                <a href={this.renderMarketingSiteUrl('/accessibility')}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.accessibility"
-                    defaultMessage="Accessibility Policy"
-                  />
-                </a>
-              </li>
-              <li>
-                <a href={this.renderMarketingSiteUrl('/trademarks')}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.trademark"
-                    defaultMessage="Trademark Policy"
-                  />
-                </a>
-              </li>
-              <li>
-                <a href={this.renderMarketingSiteUrl('/sitemap')}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.sitemap"
-                    defaultMessage="Sitemap"
-                  />
-                </a>
-              </li>
-            </ul>
-          </div>
-          <div className="area-4">
-            <h2>
-              <FormattedMessage
-                id="footer.site-footer.link.header.connect"
-                defaultMessage="Connect"
-                description="Header for connect links"
-              />
-            </h2>
-            <ul className="list-unstyled p-0 m-0">
-              <li>
-                <a href={this.renderMarketingSiteUrl('/blog')}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.blog"
-                    defaultMessage="Blog"
-                  />
-                </a>
-              </li>
-              <li>
-                <a href={contactUrl}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.contact-us"
-                    defaultMessage="Contact Us"
-                  />
-                </a>
-              </li>
-              <li>
-                <a href={supportUrl}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.help-center"
-                    defaultMessage="Help Center"
-                  />
-                </a>
-              </li>
-              <li>
-                <a href={this.renderMarketingSiteUrl('/media-kit')}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.media-kit"
-                    defaultMessage="Media Kit"
-                  />
-                </a>
-              </li>
-              <li>
-                <a href={this.renderMarketingSiteUrl('/donate')}>
-                  <FormattedMessage
-                    id="footer.site-footer.link.donate"
-                    defaultMessage="Donate"
-                  />
-                </a>
-              </li>
-            </ul>
-          </div>
-          <div className="area-5">
-            {this.renderSocialLinks()}
-            {this.renderMobileLinks()}
-            <p>
-              <FormattedMessage
-                id="footer.site-footer.copyright-text"
-                defaultMessage="{copyrightSymbol} {startDate}–{endDate} {siteName} Inc."
-                values={{
-                  copyrightSymbol: '©',
-                  startDate: '2012',
-                  endDate: `${new Date().getFullYear()}`,
-                  siteName,
-                }}
-                description="Footer copyright text with copyright symbol and dates"
-              />
-              <br />
-              <FormattedMessage
-                id="footer.site-footer.trademark-text"
-                defaultMessage="EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | {icpLicense}"
-                values={{ icpLicense: '粤ICP备17044299号-2' }}
-                description="Footer trademark text"
-              />
-            </p>
-          </div>
-        </div>
-      </footer>
-    );
-  }
-}
-
-SiteFooter.propTypes = {
-  siteName: PropTypes.string,
-  siteLogo: PropTypes.node,
-  marketingSiteBaseUrl: PropTypes.string,
-  supportUrl: PropTypes.string,
-  contactUrl: PropTypes.string,
-  openSourceUrl: PropTypes.string,
-  termsOfServiceUrl: PropTypes.string,
-  privacyPolicyUrl: PropTypes.string,
-  showSocialLinks: PropTypes.bool,
-  facebookUrl: PropTypes.string,
-  twitterUrl: PropTypes.string,
-  youTubeUrl: PropTypes.string,
-  linkedInUrl: PropTypes.string,
-  googlePlusUrl: PropTypes.string,
-  redditUrl: PropTypes.string,
-  showMobileLinks: PropTypes.bool,
-  appleAppStoreUrl: PropTypes.string,
-  googlePlayUrl: PropTypes.string,
-  handleAllTrackEvents: PropTypes.func.isRequired,
-  intl: intlShape.isRequired,
-};
-
-SiteFooter.defaultProps = {
-  siteName: null,
-  siteLogo: null,
-  marketingSiteBaseUrl: null,
-  supportUrl: null,
-  contactUrl: null,
-  openSourceUrl: null,
-  termsOfServiceUrl: null,
-  privacyPolicyUrl: null,
-  showSocialLinks: true,
-  facebookUrl: null,
-  twitterUrl: null,
-  youTubeUrl: null,
-  linkedInUrl: null,
-  googlePlusUrl: null,
-  redditUrl: null,
-  showMobileLinks: true,
-  appleAppStoreUrl: null,
-  googlePlayUrl: null,
-};
-
-export default injectIntl(SiteFooter);
-export { EVENT_NAMES };

src/lib/index.js

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

src/lib/scss/_site-footer.scss

@@ -1,165 +0,0 @@
-.max-width-222 {
-  max-width: 222px;
-}
-
-.max-width-264 {
-  max-width: 264px;
-}
-
-.max-width-1180 {
-  max-width: 1180px;
-}
-
-.max-height-39 {
-  max-height: 39px;
-}
-
-.d-grid {
-  display: grid;
-}
-
-$gray-footer: #fcfcfc;
-$border-1: 1px solid $gray-200;
-
-.footer {
-  background-color: $gray-footer;
-
-  .area-1 {
-    grid-column: 1;
-    grid-row: 1;
-    border-bottom: $border-1;
-    padding-bottom: 1rem;
-  }
-
-  .area-2 {
-    grid-column: 1;
-    grid-row: 2;
-    border-bottom: $border-1;
-    padding: 1rem 0;
-  }
-
-  .area-3 {
-    grid-column: 1;
-    grid-row: 3;
-    border-bottom: $border-1;
-    padding: 1rem 0;
-  }
-
-  .area-4 {
-    grid-column: 1;
-    grid-row: 4;
-    border-bottom: $border-1;
-    padding: 1rem 0;
-  }
-
-  .area-5 {
-    grid-column: 1;
-    grid-row: 5;
-    padding: 1rem 0;
-  }
-
-  @media only screen and (min-width: 717px) {
-    .area-1 {
-      grid-column: 1 / span 2;
-      grid-row: 1;
-      border-bottom: none;
-      padding: 1rem 0;
-    }
-
-    .area-2 {
-      grid-column: 1;
-      grid-row: 2;
-    }
-
-    .area-3 {
-      grid-column: 1;
-      grid-row: 3;
-    }
-
-    .area-4 {
-      grid-column: 1;
-      grid-row: 4;
-      border-bottom: none;
-    }
-
-    .area-5 {
-      grid-column: 2;
-      grid-row: 2 / span 3;
-      border-left: $border-1;
-      padding-left: 1rem;
-      margin-left: 1rem;
-    }
-  }
-
-  @media only screen and (min-width: 870px) {
-    .area-1 {
-      grid-column: 1;
-      grid-row: 1 / span 3;
-      border-right: $border-1;
-      padding-right: 1rem;
-      margin-right: 1rem;
-    }
-
-    .area-2 {
-      grid-column: 2;
-      grid-row: 1;
-      border-bottom: none;
-      border-right: $border-1;
-      padding-right: 1rem;
-      margin-right: 1rem;
-    }
-
-    .area-3 {
-      grid-column: 3;
-      grid-row: 1;
-      border-bottom: none;
-      border-right: $border-1;
-      padding-right: 1rem;
-      margin-right: 1rem;
-    }
-
-    .area-4 {
-      grid-column: 4;
-      grid-row: 1;
-    }
-
-    .area-5 {
-      grid-column: 2 / span 3;
-      grid-row: 2;
-      border: none;
-      margin-left: 0;
-      padding-left: 0;
-    }
-  }
-
-  @media only screen and (min-width: 1188px) {
-    .area-1 {
-      grid-column: 1 / span 1;
-      grid-row: 1;
-    }
-
-    .area-2 {
-      grid-column: 2;
-      grid-row: 1;
-    }
-
-    .area-3 {
-      grid-column: 3;
-      grid-row: 1;
-    }
-
-    .area-4 {
-      grid-column: 4;
-      grid-row: 1;
-      border-right: $border-1;
-      padding-right: 1rem;
-      margin-right: 1rem;
-    }
-
-    .area-5 {
-      grid-column: 5 / span 1;
-      grid-row: 1;
-      max-width: 372px;
-    }
-  }
-}

src/setupTest.js

@@ -0,0 +1,26 @@
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+// These configuration values are usually set in webpack's EnvironmentPlugin however
+// Jest does not use webpack so we need to set these so for testing
+process.env.ACCESS_TOKEN_COOKIE_NAME = 'edx-jwt-cookie-header-payload';
+process.env.BASE_URL = 'localhost:1995';
+process.env.CREDENTIALS_BASE_URL = 'http://localhost:18150';
+process.env.CSRF_TOKEN_API_PATH = '/csrf/api/v1/token';
+process.env.ECOMMERCE_BASE_URL = 'http://localhost:18130';
+process.env.LANGUAGE_PREFERENCE_COOKIE_NAME = 'openedx-language-preference';
+process.env.LMS_BASE_URL = 'http://localhost:18000';
+process.env.LOGIN_URL = 'http://localhost:18000/login';
+process.env.LOGOUT_URL = 'http://localhost:18000/login';
+process.env.MARKETING_SITE_BASE_URL = 'http://localhost:18000';
+process.env.ORDER_HISTORY_URL = 'localhost:1996/orders';
+process.env.REFRESH_ACCESS_TOKEN_ENDPOINT = 'http://localhost:18000/login_refresh';
+process.env.SEGMENT_KEY = 'segment_whoa';
+process.env.SITE_NAME = 'edX';
+process.env.USER_INFO_COOKIE_NAME = 'edx-user-info';
+process.env.LOGO_URL = 'https://edx-cdn.org/v3/default/logo.svg';
+process.env.LOGO_TRADEMARK_URL = 'https://edx-cdn.org/v3/default/logo-trademark.svg';
+process.env.LOGO_WHITE_URL = 'https://edx-cdn.org/v3/default/logo-white.svg';
+process.env.FAVICON_URL = 'https://edx-cdn.org/v3/default/favicon.ico';

src/tests/setupTest.js

@@ -1,4 +0,0 @@
-import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-
-Enzyme.configure({ adapter: new Adapter() });

webpack.dev.config.js

@@ -0,0 +1,15 @@
+const path = require('path');
+const { createConfig } = require('@edx/frontend-build');
+
+module.exports = createConfig('webpack-dev', {
+  entry: path.resolve(__dirname, 'example'),
+  output: {
+    path: path.resolve(__dirname, 'example/dist'),
+    publicPath: '/',
+  },
+  resolve: {
+    alias: {
+      '@edx/frontend-component-footer': path.resolve(__dirname, 'src'),
+    },
+  },
+});