feat(footer): add SiteFooter component

2019-01-02 15:27:41 -05:00
parent abc3a38e77
commit c93ec1405c
25 changed files with 28409 additions and 1 deletions
--- a/.babelrc
+++ b/.babelrc
@@ -0,0 +1,44 @@
+{
+  "env": {
+    "development": {
+      "presets": [
+        ["env", {
+          "targets": {
+            "browsers": ["last 2 versions", "ie 11"]
+          }
+        }],
+        "babel-preset-react"
+      ],
+      "plugins": [
+        "transform-object-rest-spread"
+      ]
+    },
+    "test": {
+      "presets": [
+        ["env", {
+          "targets": {
+            "browsers": ["last 2 versions", "ie 11"]
+          }
+        }],
+        "babel-preset-react"
+      ],
+      "plugins": [
+        "rewire",
+        "transform-object-rest-spread"
+      ]
+    },
+    "production": {
+      "presets": [
+        ["env", {
+          "targets": {
+            "browsers": ["last 2 versions", "ie 11"]
+          }
+        }],
+        "babel-preset-react"
+      ],
+      "plugins": [
+        "transform-object-rest-spread"
+      ]
+    }
+  }
+}
--- a/.eslintignore
+++ b/.eslintignore
@@ -0,0 +1,3 @@
+coverage
+dist
+node_modules
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -0,0 +1,19 @@
+{
+    "extends": "eslint-config-edx",
+    "rules": {
+        "import/no-extraneous-dependencies": [
+            "error",
+            {
+                "devDependencies": [
+                    "webpack.config.js",
+                    "src/tests/setupTest.js",
+                    "**/*.test.jsx",
+                    "**/*.test.js"
+                ]
+            }
+        ]
+    },
+    "env": {
+        "jest": true
+    }
+}
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,3 @@
+coverage
+dist
+node_modules
--- a/.npmignore
+++ b/.npmignore
@@ -0,0 +1,12 @@
+.DS_Store
+.eslintcache
+node_modules
+npm-debug.log
+.travis.yml
+.babelrc
+.eslintignore
+.eslintrc.json
+commitlint.config.js
+webpack.config.js
+**.test.js
+**tests
--- a/.releaserc
+++ b/.releaserc
@@ -0,0 +1,27 @@
+{
+  "branch": "master",
+  "tagFormat": "v${version}",
+  "verifyConditions": [
+    "@semantic-release/npm",
+    {
+      "path": "@semantic-release/github",
+      "assets": {
+        "path": "dist/*"
+      }
+    }
+  ],
+  "analyzeCommits": "@semantic-release/commit-analyzer",
+  "generateNotes": "@semantic-release/release-notes-generator",
+  "prepare": "@semantic-release/npm",
+  "publish": [
+    "@semantic-release/npm",
+    {
+      "path": "@semantic-release/github",
+      "assets": {
+        "path": "dist/*"
+      }
+    }
+  ],
+  "success": [],
+  "fail": []
+}
--- a/.travis.yml
+++ b/.travis.yml
@@ -0,0 +1,20 @@
+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: "<add key here>"
+  - secure: dxQadqP6tsoJzHcqs/Hs5AjE42z45q8ZeWKP5HcjbXoJURB4gc1uIxLky0FA6ZpulaTgRVTLcWQbx9yOODc9PQuFnFEDWlCg5EP8tONzeu7BVlJvV5eakgGUhl9w2pekBKsTGhK5dDg2y2D8bGfIL55UX81uiWeytp8s/y8QNs/FNXx9ScJnfhnC+2RfW52fB7iW12F1VYdQfVe43o5PsHze+YhB3FU/ztGe3iMaQiq9QplZWpvqQMpI7pTjyUAX8ITiiPS6UvLFObgpXpfjZdgd+yveFoi3z8o8F0NkmzBphFeSYFjFZE0qJ8bnGNIZldanMeuUgHmDeTwVmKQFhH2LqqnfcdGgW6UsKcHkSN1G51zzad2dEwAHrgxj1NkMp3JfEed2C7Kvntl6KRjVDmYZqHJvt+e+AHNbpjzblOW8tYMIrdz0TeJdk4D9pP3B3tRCtP6fvQ3GLzAMnaCrSsN6hZ9YVxWku8sg8WNEDHl14sZsdgk312MlHIdiUw97FHGrqx/NCix4IkUlCBDbKYbKzbZp20FfzZcwNRNH74+k6xpOnMGSfq8gByEhm9y02MBL76HiAI2VGct2La1ExaUfoikYGoNaZpFcZyOZKo6PYTYHpiUJmqrEnDyVQEOOXUaVsxWXwnYq/mU4nOEPKCRbNpPoksZdNxf6jlmMi8s=
+  - secure: lrlV0WQaXTRJ2lqDkFZ+1RkRb7YM/STOViOHUNboXb5+1ReVwY0wklFDVk/Qigp3jkbqWfzkBmEjSDVGDLD61QjpGY4BsxZ/Jn3+KUdo0n82Ym6cI/je1fH2gqDLi4U8bylmnkI5oEjV/1txDxkj4hF5w/Leo/oGue3xQohpi//ihhm/PxzExj+QiDqyZPZ5RQZeqLfPEU3Wff04vLE5bRmy1nDTZrgm5Wb1n5ItGsyrUyrCGuAM9kIEun65Snb8hxCuU9pSm1w/xF73iOGLiiC8KZhLu6SxSKoC872ai1GpUXNIqA8kpVeH0Erf5opMtqJT3jTTan/VOFQEoOeAKhR0ga+5rfK2jkhhN77B98dGVndNCfBpDlgQxVv42H6riFk3payZT262QiUqDejiBDtSPTokTGxf7xFtQkQQahhxVXzC2HRKEkDTXNSP8cvk2JJ4zCcUgxJpycudLMuC/Xv0upK+Q0caItBrHxfVNnRKkjKqlDxRhA8nXTY8d2n19FNi7wahCECbyweJJ76EaJaa/Ib6remUBrbGLoQ2PkaSMBHAcn3+7+H/6x11b2s1RHj5qyfIyrvZcDDyNuxdXwpOkhtrkwZsjgtOfXL6IuxW5FExgPPr8B9nNwJJKdTxyxgfqtwBR5+m9nrMixzT6AMe95torZ6eX40gKZ/O9EU=
--- a/README.md
+++ b/README.md
@@ -1,2 +1,33 @@
 # frontend-component-footer
-Site footer component for edX frontend apps.
+
+[![Build Status](https://api.travis-ci.org/edx/frontend-component-footer.svg?branch=master)](https://travis-ci.org/edx/frontend-component-footer) [![Coveralls](https://img.shields.io/coveralls/edx/frontend-component-footer.svg?branch=master)](https://coveralls.io/github/edx/frontend-component-footer)
+[![npm_version](https://img.shields.io/npm/v/@edx/frontend-component-footer.svg)](@edx/frontend-component-footer)
+[![npm_downloads](https://img.shields.io/npm/dt/@edx/frontend-component-footer.svg)](@edx/frontend-component-footer)
+[![license](https://img.shields.io/npm/l/@edx/frontend-component-footer.svg)](@edx/frontend-component-footer)
+[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
+
+
+frontend-component-footer is a library containing a site footer component for use when building edX frontend applications.
+
+## Usage
+
+To install frontend-component-footer into your project:
+
+```
+npm i --save @edx/frontend-component-footer
+```
+
+The component expects properties specifying the various URLs that are linked in the footer. See the
+sample app in src/index.jsx for an example of how the SiteFooter component can be specified.
+
+## Development
+
+Start the dev server
+```
+npm i && npm start
+```
+
+Build the component.
+```
+npm run build
+```
--- a/mocks/fileMock.js
+++ b/mocks/fileMock.js
@@ -0,0 +1 @@
+module.exports = 'test-file-stub';
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@commitlint/config-angular'],
+};
--- a/config/webpack.common.config.js
+++ b/config/webpack.common.config.js
@@ -0,0 +1,15 @@
+// This is the common Webpack config. The dev and prod Webpack configs both
+// inherit config defined here.
+const path = require('path');
+
+module.exports = {
+  entry: {
+    app: path.resolve(__dirname, '../src/index.jsx'),
+  },
+  output: {
+    path: path.resolve(__dirname, '../dist'),
+  },
+  resolve: {
+    extensions: ['.js', '.jsx'],
+  },
+};
--- a/config/webpack.dev.config.js
+++ b/config/webpack.dev.config.js
@@ -0,0 +1,115 @@
+// 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,
+  },
+});
--- a/config/webpack.prod.config.js
+++ b/config/webpack.prod.config.js
@@ -0,0 +1,58 @@
+// 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' },
+        ],
+      },
+    ],
+  },
+});
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,103 @@
+{
+  "name": "@edx/frontend-component-footer",
+  "version": "1.0.0-semantically-released",
+  "description": "Site footer component for use when building edX frontend applications",
+  "main": "dist/main.js",
+  "module": "dist/main.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "NODE_ENV=production BABEL_ENV=production webpack  --config=config/webpack.prod.config.js",
+    "gc": "commit",
+    "commitmsg": "commitlint -e $GIT_PARAMS",
+    "coveralls": "cat ./coverage/lcov.info | coveralls",
+    "lint": "eslint --ext .js --ext .jsx .",
+    "precommit": "npm run lint",
+    "prepublishOnly": "npm run build",
+    "semantic-release": "semantic-release",
+    "start": "NODE_ENV=development BABEL_ENV=development node_modules/.bin/webpack-dev-server --config=config/webpack.dev.config.js --progress",
+    "test": "jest --coverage",
+    "snapshot": "jest --updateSnapshot",
+    "travis-deploy-once": "travis-deploy-once"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/edx/frontend-component-footer.git"
+  },
+  "author": "edX",
+  "license": "AGPL-3.0",
+  "bugs": {
+    "url": "https://github.com/edx/frontend-component-footer/issues"
+  },
+  "homepage": "https://github.com/edx/frontend-component-footer#readme",
+  "devDependencies": {
+    "@commitlint/cli": "^7.1.2",
+    "@commitlint/config-angular": "^6.0.2",
+    "@commitlint/prompt": "^6.0.2",
+    "@commitlint/prompt-cli": "^6.0.2",
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.5",
+    "babel-plugin-rewire": "^1.2.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
+    "clean-webpack-plugin": "^0.1.19",
+    "coveralls": "^3.0.0",
+    "css-loader": "^0.28.9",
+    "@edx/paragon": "^3.8.0",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "eslint": "^5.2.0",
+    "eslint-config-edx": "^4.0.4",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
+    "file-loader": "^1.1.9",
+    "html-webpack-plugin": "^3.2.0",
+    "image-webpack-loader": "^4.2.0",
+    "husky": "^0.14.3",
+    "jest": "23.6.0",
+    "node-sass": "^4.7.2",
+    "prop-types": "^15.5.10",
+    "react": "^16.4.2",
+    "react-dom": "^16.2.0",
+    "react-dev-utils": "^5.0.0",
+    "react-test-renderer": "^16.6.0",
+    "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",
+    "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",
+    "copy-webpack-plugin": "^4.6.0",
+    "html-webpack-plugin": "^3.2.0",
+    "prop-types": "^15.5.10",
+    "react": "^16.4.2",
+    "react-dom": "^16.2.0",
+    "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"
+    }
+  }
+}
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en-us">
+  <head>
+      <title>Footer | edX</title>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">  
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
--- a/src/edx-footer.png
+++ b/src/edx-footer.png
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { render } from 'react-dom';
+import SiteFooter from './lib';
+import './index.scss';
+
+import FooterLogo from './edx-footer.png';
+
+const App = () => (
+  <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"
+  />
+);
+
+render(<App />, document.getElementById('root'));
--- a/src/index.scss
+++ b/src/index.scss
@@ -0,0 +1,4 @@
+@import "~@edx/edx-bootstrap/sass/edx/theme";
+@import "~bootstrap/scss/bootstrap";
+
+@import './lib/scss/_site-footer.scss';
--- a/src/lib/components/SiteFooter/SiteFooter.test.jsx
+++ b/src/lib/components/SiteFooter/SiteFooter.test.jsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+
+import FooterLogo from '../../../edx-footer.png';
+import SiteFooter from '../../index';
+
+describe('<SiteFooter />', () => {
+  it('renders correctly', () => {
+    const tree = renderer
+      .create(<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"
+      />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('does not render social links', () => {
+    const tree = renderer
+      .create(<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"
+        showSocialLinks={false}
+      />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('does not render mobile links', () => {
+    const tree = renderer
+      .create(<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"
+        showMobileLinks={false}
+      />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
--- a/src/lib/components/SiteFooter/snapshots/SiteFooter.test.jsx.snap
+++ b/src/lib/components/SiteFooter/snapshots/SiteFooter.test.jsx.snap
@@ -0,0 +1,861 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SiteFooter /> 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"
+          >
+            About
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/enterprise"
+          >
+            example
+             for Business
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/affiliate-program"
+          >
+            Affiliates
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/open"
+          >
+            Open 
+            example
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/careers"
+          >
+            Careers
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/news-announcements"
+          >
+            News
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div
+      className="area-3"
+    >
+      <h2>
+        Legal
+      </h2>
+      <ul
+        className="list-unstyled p-0 m-0"
+      >
+        <li>
+          <a
+            href="https://www.example.com/terms-of-service"
+          >
+            Terms of Service & Honor Code
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/privacy-policy"
+          >
+            Privacy Policy
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/accessibility"
+          >
+            Accessibility Policy
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/trademarks"
+          >
+            Trademark Policy
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/sitemap"
+          >
+            Sitemap
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div
+      className="area-4"
+    >
+      <h2>
+        Connect
+      </h2>
+      <ul
+        className="list-unstyled p-0 m-0"
+      >
+        <li>
+          <a
+            href="https://www.example.com/blog"
+          >
+            Blog
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/contact"
+          >
+            Contact Us
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/support"
+          >
+            Help Center
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/media-kit"
+          >
+            Media Kit
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/donate"
+          >
+            Donate
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div
+      className="area-5"
+    >
+      <ul
+        className="d-flex flex-row justify-content-between list-unstyled max-width-222 p-0 mb-4"
+      >
+        <li>
+          <a
+            href="https://www.facebook.com"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Facebook"
+          >
+            <span
+              aria-hidden={true}
+              className="fa fa-facebook-square fa-2x"
+              id="Icon1"
+            />
+            <span
+              className="sr-only"
+            >
+              Like example on Facebook
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.twitter.com"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Twitter"
+          >
+            <span
+              aria-hidden={true}
+              className="fa fa-twitter-square fa-2x"
+              id="Icon1"
+            />
+            <span
+              className="sr-only"
+            >
+              Follow example on Twitter
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.youtube.com"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Youtube"
+          >
+            <span
+              aria-hidden={true}
+              className="fa fa-youtube-square fa-2x"
+              id="Icon1"
+            />
+            <span
+              className="sr-only"
+            >
+              Subscribe to the example YouTube channel
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.linkedin.com"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="LinkedIn"
+          >
+            <span
+              aria-hidden={true}
+              className="fa fa-linkedin-square fa-2x"
+              id="Icon1"
+            />
+            <span
+              className="sr-only"
+            >
+              Follow example on LinkedIn
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://plus.google.com"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Google+"
+          >
+            <span
+              aria-hidden={true}
+              className="fa fa-google-plus-square fa-2x"
+              id="Icon1"
+            />
+            <span
+              className="sr-only"
+            >
+              Follow example on Google+
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://reddit.com"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Reddit"
+          >
+            <span
+              aria-hidden={true}
+              className="fa fa-reddit-square fa-2x"
+              id="Icon1"
+            />
+            <span
+              className="sr-only"
+            >
+              Subscribe to the example subreddit
+            </span>
+          </a>
+        </li>
+      </ul>
+      <p>
+        © 2012–
+        2019
+         
+        example
+         Inc.
+        <br />
+        EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 粤ICP备17044299号-2
+      </p>
+    </div>
+  </div>
+</footer>
+`;
+
+exports[`<SiteFooter /> 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"
+          >
+            About
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/enterprise"
+          >
+            example
+             for Business
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/affiliate-program"
+          >
+            Affiliates
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/open"
+          >
+            Open 
+            example
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/careers"
+          >
+            Careers
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/news-announcements"
+          >
+            News
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div
+      className="area-3"
+    >
+      <h2>
+        Legal
+      </h2>
+      <ul
+        className="list-unstyled p-0 m-0"
+      >
+        <li>
+          <a
+            href="https://www.example.com/terms-of-service"
+          >
+            Terms of Service & Honor Code
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/privacy-policy"
+          >
+            Privacy Policy
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/accessibility"
+          >
+            Accessibility Policy
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/trademarks"
+          >
+            Trademark Policy
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/sitemap"
+          >
+            Sitemap
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div
+      className="area-4"
+    >
+      <h2>
+        Connect
+      </h2>
+      <ul
+        className="list-unstyled p-0 m-0"
+      >
+        <li>
+          <a
+            href="https://www.example.com/blog"
+          >
+            Blog
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/contact"
+          >
+            Contact Us
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/support"
+          >
+            Help Center
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/media-kit"
+          >
+            Media Kit
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/donate"
+          >
+            Donate
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div
+      className="area-5"
+    >
+      <ul
+        className="d-flex flex-row justify-content-between list-unstyled max-width-264 p-0 mb-5"
+      >
+        <li>
+          <a
+            href="https://store.apple.com"
+            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"
+            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>
+        © 2012–
+        2019
+         
+        example
+         Inc.
+        <br />
+        EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 粤ICP备17044299号-2
+      </p>
+    </div>
+  </div>
+</footer>
+`;
+
+exports[`<SiteFooter /> renders correctly 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"
+          >
+            About
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/enterprise"
+          >
+            example
+             for Business
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/affiliate-program"
+          >
+            Affiliates
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/open"
+          >
+            Open 
+            example
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/careers"
+          >
+            Careers
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/news-announcements"
+          >
+            News
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div
+      className="area-3"
+    >
+      <h2>
+        Legal
+      </h2>
+      <ul
+        className="list-unstyled p-0 m-0"
+      >
+        <li>
+          <a
+            href="https://www.example.com/terms-of-service"
+          >
+            Terms of Service & Honor Code
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/privacy-policy"
+          >
+            Privacy Policy
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/accessibility"
+          >
+            Accessibility Policy
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/trademarks"
+          >
+            Trademark Policy
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/sitemap"
+          >
+            Sitemap
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div
+      className="area-4"
+    >
+      <h2>
+        Connect
+      </h2>
+      <ul
+        className="list-unstyled p-0 m-0"
+      >
+        <li>
+          <a
+            href="https://www.example.com/blog"
+          >
+            Blog
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/contact"
+          >
+            Contact Us
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/support"
+          >
+            Help Center
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/media-kit"
+          >
+            Media Kit
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.example.com/donate"
+          >
+            Donate
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div
+      className="area-5"
+    >
+      <ul
+        className="d-flex flex-row justify-content-between list-unstyled max-width-222 p-0 mb-4"
+      >
+        <li>
+          <a
+            href="https://www.facebook.com"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Facebook"
+          >
+            <span
+              aria-hidden={true}
+              className="fa fa-facebook-square fa-2x"
+              id="Icon1"
+            />
+            <span
+              className="sr-only"
+            >
+              Like example on Facebook
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.twitter.com"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Twitter"
+          >
+            <span
+              aria-hidden={true}
+              className="fa fa-twitter-square fa-2x"
+              id="Icon1"
+            />
+            <span
+              className="sr-only"
+            >
+              Follow example on Twitter
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.youtube.com"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Youtube"
+          >
+            <span
+              aria-hidden={true}
+              className="fa fa-youtube-square fa-2x"
+              id="Icon1"
+            />
+            <span
+              className="sr-only"
+            >
+              Subscribe to the example YouTube channel
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.linkedin.com"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="LinkedIn"
+          >
+            <span
+              aria-hidden={true}
+              className="fa fa-linkedin-square fa-2x"
+              id="Icon1"
+            />
+            <span
+              className="sr-only"
+            >
+              Follow example on LinkedIn
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://plus.google.com"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Google+"
+          >
+            <span
+              aria-hidden={true}
+              className="fa fa-google-plus-square fa-2x"
+              id="Icon1"
+            />
+            <span
+              className="sr-only"
+            >
+              Follow example on Google+
+            </span>
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://reddit.com"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Reddit"
+          >
+            <span
+              aria-hidden={true}
+              className="fa fa-reddit-square fa-2x"
+              id="Icon1"
+            />
+            <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"
+            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"
+            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>
+        © 2012–
+        2019
+         
+        example
+         Inc.
+        <br />
+        EdX, Open edX, and MicroMasters are registered trademarks of edX Inc. | 粤ICP备17044299号-2
+      </p>
+    </div>
+  </div>
+</footer>
+`;
--- a/src/lib/components/SiteFooter/index.jsx
+++ b/src/lib/components/SiteFooter/index.jsx
@@ -0,0 +1,214 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Hyperlink, Icon } from '@edx/paragon';
+
+class SiteFooter extends React.Component {
+  renderSiteLogo() {
+    return (
+      <img src={this.props.siteLogo} alt={`${this.props.siteName} logo`} />
+    );
+  }
+
+  renderMarketingSiteUrl(path) {
+    return `${this.props.marketingSiteBaseUrl}${path}`;
+  }
+
+  renderSocialLinks() {
+    const {
+      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="Facebook" rel="noopener noreferrer" target="_blank">
+              <Icon className={['fa', 'fa-facebook-square', 'fa-2x']} screenReaderText={`Like ${siteName} on Facebook`} />
+            </a>
+          </li>
+          <li>
+            <a href={twitterUrl} title="Twitter" rel="noopener noreferrer" target="_blank">
+              <Icon className={['fa', 'fa-twitter-square', 'fa-2x']} screenReaderText={`Follow ${siteName} on Twitter`} />
+            </a>
+          </li>
+          <li>
+            <a href={youTubeUrl} title="Youtube" rel="noopener noreferrer" target="_blank">
+              <Icon className={['fa', 'fa-youtube-square', 'fa-2x']} screenReaderText={`Subscribe to the ${siteName} YouTube channel`} />
+            </a>
+          </li>
+          <li>
+            <a href={linkedInUrl} title="LinkedIn" rel="noopener noreferrer" target="_blank">
+              <Icon className={['fa', 'fa-linkedin-square', 'fa-2x']} screenReaderText={`Follow ${siteName} on LinkedIn`} />
+            </a>
+          </li>
+          <li>
+            <a href={googlePlusUrl} title="Google+" rel="noopener noreferrer" target="_blank">
+              <Icon className={['fa', 'fa-google-plus-square', 'fa-2x']} screenReaderText={`Follow ${siteName} on Google+`} />
+            </a>
+          </li>
+          <li>
+            <a href={redditUrl} title="Reddit" rel="noopener noreferrer" target="_blank">
+              <Icon className={['fa', 'fa-reddit-square', 'fa-2x']} screenReaderText={`Subscribe to the ${siteName} subreddit`} />
+            </a>
+          </li>
+        </ul>
+      );
+    }
+    return socialLinks;
+  }
+
+  renderMobileLinks() {
+    const {
+      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">
+              <img
+                className="max-height-39"
+                alt={`Download the ${siteName} mobile app from the Apple App Store`}
+                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">
+              <img
+                className="max-height-39"
+                alt={`Download the ${siteName} mobile app from Google Play`}
+                src="https://prod-edxapp.edx-cdn.org/static/images/app/google_play_badge_45.6ea466e328da.png"
+              />
+            </a>
+          </li>
+        </ul>
+      );
+    }
+    return mobileLinks;
+  }
+
+  render() {
+    const {
+      siteName,
+      openSourceUrl,
+      termsOfServiceUrl,
+      privacyPolicyUrl,
+      contactUrl,
+      supportUrl,
+    } = this.props;
+    return (
+      <footer
+        role="contentinfo"
+        aria-label="Page Footer"
+        className="footer d-flex justify-content-center border-top py-3 px-4"
+      >
+        <div className="max-width-1180 d-grid">
+          <div className="area-1">
+            <Hyperlink destination={this.renderMarketingSiteUrl('/')} content={this.renderSiteLogo()} aria-label={`${siteName} Home`} />
+          </div>
+          <div className="area-2">
+            <h2>{siteName}</h2>
+            <ul className="list-unstyled p-0 m-0">
+              <li><a href={this.renderMarketingSiteUrl('/about-us')}>About</a></li>
+              <li><a href={this.renderMarketingSiteUrl('/enterprise')}>{siteName} for Business</a></li>
+              <li><a href={this.renderMarketingSiteUrl('/affiliate-program')}>Affiliates</a></li>
+              <li><a href={openSourceUrl}>Open {siteName}</a></li>
+              <li><a href={this.renderMarketingSiteUrl('/careers')}>Careers</a></li>
+              <li><a href={this.renderMarketingSiteUrl('/news-announcements')}>News</a></li>
+            </ul>
+          </div>
+          <div className="area-3">
+            <h2>Legal</h2>
+            <ul className="list-unstyled p-0 m-0">
+              <li><a href={termsOfServiceUrl}>Terms of Service &amp; Honor Code</a></li>
+              <li><a href={privacyPolicyUrl}>Privacy Policy</a></li>
+              <li><a href={this.renderMarketingSiteUrl('/accessibility')}>Accessibility Policy</a></li>
+              <li><a href={this.renderMarketingSiteUrl('/trademarks')}>Trademark Policy</a></li>
+              <li><a href={this.renderMarketingSiteUrl('/sitemap')}>Sitemap</a></li>
+            </ul>
+          </div>
+          <div className="area-4">
+            <h2>Connect</h2>
+            <ul className="list-unstyled p-0 m-0">
+              <li><a href={this.renderMarketingSiteUrl('/blog')}>Blog</a></li>
+              <li><a href={contactUrl}>Contact Us</a></li>
+              <li><a href={supportUrl}>Help Center</a></li>
+              <li><a href={this.renderMarketingSiteUrl('/media-kit')}>Media Kit</a></li>
+              <li><a href={this.renderMarketingSiteUrl('/donate')}>Donate</a></li>
+            </ul>
+          </div>
+          <div className="area-5">
+            {this.renderSocialLinks()}
+            {this.renderMobileLinks()}
+            <p>
+              © 2012–{(new Date().getFullYear())} {siteName} Inc.
+              <br />
+              EdX, Open edX, and MicroMasters are registered trademarks of edX Inc.
+              | 粤ICP备17044299号-2
+            </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,
+};
+
+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 SiteFooter;
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -0,0 +1,3 @@
+import SiteFooter from './components/SiteFooter';
+
+export default SiteFooter;
--- a/src/lib/scss/_site-footer.scss
+++ b/src/lib/scss/_site-footer.scss
@@ -0,0 +1,165 @@
+.max-width-222 {
+  max-width: 222px;
+}
+
+.max-width-264 {
+  max-width: 264px;
+}
+
+.max-width-1180 {
+  max-width: 1180px;
+}
+
+.max-height-39 {
+  max-height: 39px;
+}
+
+.d-grid {
+  display: grid;
+}
+
+$gray-footer: #fcfcfc;
+$border-1: 1px solid $gray-200;
+
+.footer {
+  background-color: $gray-footer;
+
+  .area-1 {
+    grid-column: 1;
+    grid-row: 1;
+    border-bottom: $border-1;
+    padding-bottom: 1rem;
+  }
+
+  .area-2 {
+    grid-column: 1;
+    grid-row: 2;
+    border-bottom: $border-1;
+    padding: 1rem 0;
+  }
+
+  .area-3 {
+    grid-column: 1;
+    grid-row: 3;
+    border-bottom: $border-1;
+    padding: 1rem 0;
+  }
+
+  .area-4 {
+    grid-column: 1;
+    grid-row: 4;
+    border-bottom: $border-1;
+    padding: 1rem 0;
+  }
+
+  .area-5 {
+    grid-column: 1;
+    grid-row: 5;
+    padding: 1rem 0;
+  }
+
+  @media only screen and (min-width: 717px) {
+    .area-1 {
+      grid-column: 1 / span 2;
+      grid-row: 1;
+      border-bottom: none;
+      padding: 1rem 0;
+    }
+
+    .area-2 {
+      grid-column: 1;
+      grid-row: 2;
+    }
+
+    .area-3 {
+      grid-column: 1;
+      grid-row: 3;
+    }
+
+    .area-4 {
+      grid-column: 1;
+      grid-row: 4;
+      border-bottom: none;
+    }
+
+    .area-5 {
+      grid-column: 2;
+      grid-row: 2 / span 3;
+      border-left: $border-1;
+      padding-left: 1rem;
+      margin-left: 1rem;
+    }
+  }
+
+  @media only screen and (min-width: 870px) {
+    .area-1 {
+      grid-column: 1;
+      grid-row: 1 / span 3;
+      border-right: $border-1;
+      padding-right: 1rem;
+      margin-right: 1rem;
+    }
+
+    .area-2 {
+      grid-column: 2;
+      grid-row: 1;
+      border-bottom: none;
+      border-right: $border-1;
+      padding-right: 1rem;
+      margin-right: 1rem;
+    }
+
+    .area-3 {
+      grid-column: 3;
+      grid-row: 1;
+      border-bottom: none;
+      border-right: $border-1;
+      padding-right: 1rem;
+      margin-right: 1rem;
+    }
+
+    .area-4 {
+      grid-column: 4;
+      grid-row: 1;
+    }
+
+    .area-5 {
+      grid-column: 2 / span 3;
+      grid-row: 2;
+      border: none;
+      margin-left: 0;
+      padding-left: 0;
+    }
+  }
+
+  @media only screen and (min-width: 1188px) {
+    .area-1 {
+      grid-column: 1 / span 1;
+      grid-row: 1;
+    }
+
+    .area-2 {
+      grid-column: 2;
+      grid-row: 1;
+    }
+
+    .area-3 {
+      grid-column: 3;
+      grid-row: 1;
+    }
+
+    .area-4 {
+      grid-column: 4;
+      grid-row: 1;
+      border-right: $border-1;
+      padding-right: 1rem;
+      margin-right: 1rem;
+    }
+
+    .area-5 {
+      grid-column: 5 / span 1;
+      grid-row: 1;
+      max-width: 372px;
+    }
+  }
+}
--- a/src/tests/setupTest.js
+++ b/src/tests/setupTest.js
@@ -0,0 +1,4 @@
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });