Merge pull request #25 from edx/alasdair/update-social-media-link-approach

fix(sociallinks): update link props

.travis.yml

@@ -8,6 +8,7 @@ install:
   - npm install
 script:
   - npm run lint
+  - npm run i18n_extract
   - npm run test
   - npm run build
 after_success:

.tx/config

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

Makefile

@@ -12,7 +12,7 @@ i18n.concat:
     # Gathering JSON messages into one file...
 	./src/i18n/i18n-concat.js ./temp/src ./src/i18n/transifex_input.json
 
-i18n.pre_validate: | i18n.extract i18n.concat
+detect_changed_source_translations:
 	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/

config/webpack.prod.config.js

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

package.json

@@ -106,5 +106,12 @@
       "\\.(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"
     }
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.17",
+    "@fortawesome/free-brands-svg-icons": "^5.8.1",
+    "@fortawesome/free-regular-svg-icons": "^5.8.1",
+    "@fortawesome/free-solid-svg-icons": "^5.8.1",
+    "@fortawesome/react-fontawesome": "^0.1.4"
   }
 }

src/i18n/i18n-concat.js

@@ -1,7 +1,7 @@
 #!/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.
+ * See the Makefile for how the required hash file is downloaded from Transifex.
  */
 
 // NOTE: This script is called from Jenkins using devDependencies, so eslint is being
@@ -23,28 +23,36 @@ function gatherJson(dir) {
   return ret;
 }
 
+// the hash file returns ids whose periods are "escaped" (sort of), like this:
+// "key": "profile\\.sociallinks\\.social\\.links"
+// so our regular messageIds won't match them out of the box
+function escapeDots(messageId) {
+  return messageId.replace(/\./g, '\\.');
+}
+
 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 loggingPrefix = path.basename(`${__filename}`); // the name of this JS file
   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 hashFile = `${bashScriptsPath}/hashmap.json`;
+  process.stdout.write(`${loggingPrefix}: reading hash file ${hashFile}\n`);
+  const messageInfo = JSON.parse(fs.readFileSync(hashFile));
 
-  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, '');
+  const outputFile = `${bashScriptsPath}/hashed_data.txt`;
+  process.stdout.write(`${loggingPrefix}: writing to output file ${outputFile}\n`);
+  fs.writeFileSync(outputFile, '');
 
   messageObjects.forEach((message) => {
-    const info = messageInfo.find(mi => mi.key === message.id);
+    const transifexFormatId = escapeDots(message.id);
+
+    const info = messageInfo.find(mi => mi.key === transifexFormatId);
     if (info) {
-      fs.appendFileSync(dataPath, `${info.string_hash}|${message.description}\n`);
+      fs.appendFileSync(outputFile, `${info.string_hash}|${message.description}\n`);
     } else {
-      process.stdout.write(`${thisFile}: string ${message.id} does not yet exist on transifex!\n`);
+      process.stdout.write(`${loggingPrefix}: string ${message.id} does not yet exist on transifex!\n`);
     }
   });
 } else {

src/index.jsx

@@ -1,11 +1,61 @@
 import React from 'react';
 import { render } from 'react-dom';
 import { IntlProvider } from 'react-intl';
+
+import {
+  faFacebookSquare,
+  faTwitterSquare,
+  faYoutubeSquare,
+  faLinkedin,
+  faGooglePlusSquare,
+  faRedditSquare,
+} from '@fortawesome/free-brands-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
 import SiteFooter from './lib';
 import './index.scss';
-
 import FooterLogo from './edx-footer.png';
 
+
+const socialLinks = [
+  {
+    title: 'Facebook',
+    url: 'https://www.facebook.com',
+    icon: <FontAwesomeIcon icon={faFacebookSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Like edX on Facebook',
+  },
+  {
+    title: 'Twitter',
+    url: 'https://www.twitter.com',
+    icon: <FontAwesomeIcon icon={faTwitterSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Follow edX on Twitter',
+  },
+  {
+    title: 'Youtube',
+    url: 'https://www.youtube.com',
+    icon: <FontAwesomeIcon icon={faYoutubeSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Subscribe to the edX YouTube channel',
+  },
+  {
+    title: 'LinkedIn',
+    url: 'https://www.linkedin.com',
+    icon: <FontAwesomeIcon icon={faLinkedin} className="social-icon" size="2x" />,
+    screenReaderText: 'Follow edX on LinkedIn',
+  },
+  {
+    title: 'Google+',
+    url: 'https://plus.google.com',
+    icon: <FontAwesomeIcon icon={faGooglePlusSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Follow edX on Google+',
+  },
+  {
+    title: 'Reddit',
+    url: 'https://reddit.com',
+    icon: <FontAwesomeIcon icon={faRedditSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Subscribe to the edX subreddit',
+  },
+];
+
 const App = () => (
   <IntlProvider locale="en">
     <SiteFooter
@@ -17,15 +67,10 @@ const App = () => (
       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={() => {}}
+      socialLinks={socialLinks}
     />
   </IntlProvider>
 );

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

@@ -3,9 +3,59 @@ import renderer from 'react-test-renderer';
 import { mount } from 'enzyme';
 import { IntlProvider } from 'react-intl';
 
+import {
+  faFacebookSquare,
+  faTwitterSquare,
+  faYoutubeSquare,
+  faLinkedin,
+  faGooglePlusSquare,
+  faRedditSquare,
+} from '@fortawesome/free-brands-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
 import FooterLogo from '../../../edx-footer.png';
 import SiteFooter, { EVENT_NAMES } from './index';
 
+
+const socialLinks = [
+  {
+    title: 'Facebook',
+    url: 'https://www.facebook.com',
+    icon: <FontAwesomeIcon icon={faFacebookSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Like edX on Facebook',
+  },
+  {
+    title: 'Twitter',
+    url: 'https://www.twitter.com',
+    icon: <FontAwesomeIcon icon={faTwitterSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Follow edX on Twitter',
+  },
+  {
+    title: 'Youtube',
+    url: 'https://www.youtube.com',
+    icon: <FontAwesomeIcon icon={faYoutubeSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Subscribe to the edX YouTube channel',
+  },
+  {
+    title: 'LinkedIn',
+    url: 'https://www.linkedin.com',
+    icon: <FontAwesomeIcon icon={faLinkedin} className="social-icon" size="2x" />,
+    screenReaderText: 'Follow edX on LinkedIn',
+  },
+  {
+    title: 'Google+',
+    url: 'https://plus.google.com',
+    icon: <FontAwesomeIcon icon={faGooglePlusSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Follow edX on Google+',
+  },
+  {
+    title: 'Reddit',
+    url: 'https://reddit.com',
+    icon: <FontAwesomeIcon icon={faRedditSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Subscribe to the edX subreddit',
+  },
+];
+
 const completeSiteFooterComponent = mockHandleAllTrackEvents =>
   (
     <IntlProvider locale="en">
@@ -18,12 +68,7 @@ const completeSiteFooterComponent = mockHandleAllTrackEvents =>
         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"
+        socialLinks={socialLinks}
         appleAppStoreUrl="https://store.apple.com"
         googlePlayUrl="https://play.google.com"
         handleAllTrackEvents={mockHandleAllTrackEvents}
@@ -54,16 +99,9 @@ describe('<SiteFooter />', () => {
               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();
@@ -83,12 +121,7 @@ describe('<SiteFooter />', () => {
               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"
+              socialLinks={socialLinks}
               appleAppStoreUrl="https://store.apple.com"
               googlePlayUrl="https://play.google.com"
               handleAllTrackEvents={jest.fn()}

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

@@ -219,15 +219,27 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
             target="_blank"
             title="Facebook"
           >
-            <span
-              aria-hidden={true}
-              className="fa fa-facebook-square fa-2x"
-              id="edx-footer-icon-facebook"
-            />
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-facebook-square fa-w-14 fa-2x social-icon"
+              data-icon="facebook-square"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M448 80v352c0 26.5-21.5 48-48 48h-85.3V302.8h60.6l8.7-67.6h-69.3V192c0-19.6 5.4-32.9 33.5-32.9H384V98.7c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9H184v67.6h60.9V480H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
             <span
               className="sr-only"
             >
-              Like example on Facebook
+              Like edX on Facebook
             </span>
           </a>
         </li>
@@ -239,15 +251,27 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
             target="_blank"
             title="Twitter"
           >
-            <span
-              aria-hidden={true}
-              className="fa fa-twitter-square fa-2x"
-              id="edx-footer-icon-twitter"
-            />
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-twitter-square fa-w-14 fa-2x social-icon"
+              data-icon="twitter-square"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
             <span
               className="sr-only"
             >
-              Follow example on Twitter
+              Follow edX on Twitter
             </span>
           </a>
         </li>
@@ -259,15 +283,27 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
             target="_blank"
             title="Youtube"
           >
-            <span
-              aria-hidden={true}
-              className="fa fa-youtube-square fa-2x"
-              id="edx-footer-icon-youtube"
-            />
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-youtube-square fa-w-14 fa-2x social-icon"
+              data-icon="youtube-square"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M186.8 202.1l95.2 54.1-95.2 54.1V202.1zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-42 176.3s0-59.6-7.6-88.2c-4.2-15.8-16.5-28.2-32.2-32.4C337.9 128 224 128 224 128s-113.9 0-142.2 7.7c-15.7 4.2-28 16.6-32.2 32.4-7.6 28.5-7.6 88.2-7.6 88.2s0 59.6 7.6 88.2c4.2 15.8 16.5 27.7 32.2 31.9C110.1 384 224 384 224 384s113.9 0 142.2-7.7c15.7-4.2 28-16.1 32.2-31.9 7.6-28.5 7.6-88.1 7.6-88.1z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
             <span
               className="sr-only"
             >
-              Subscribe to the example YouTube channel
+              Subscribe to the edX YouTube channel
             </span>
           </a>
         </li>
@@ -279,15 +315,27 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
             target="_blank"
             title="LinkedIn"
           >
-            <span
-              aria-hidden={true}
-              className="fa fa-linkedin-square fa-2x"
-              id="edx-footer-icon-linkedin"
-            />
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-linkedin fa-w-14 fa-2x social-icon"
+              data-icon="linkedin"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
             <span
               className="sr-only"
             >
-              Follow example on LinkedIn
+              Follow edX on LinkedIn
             </span>
           </a>
         </li>
@@ -299,15 +347,27 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
             target="_blank"
             title="Google+"
           >
-            <span
-              aria-hidden={true}
-              className="fa fa-google-plus-square fa-2x"
-              id="edx-footer-icon-google"
-            />
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-google-plus-square fa-w-14 fa-2x social-icon"
+              data-icon="google-plus-square"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM164 356c-55.3 0-100-44.7-100-100s44.7-100 100-100c27 0 49.5 9.8 67 26.2l-27.1 26.1c-7.4-7.1-20.3-15.4-39.8-15.4-34.1 0-61.9 28.2-61.9 63.2 0 34.9 27.8 63.2 61.9 63.2 39.6 0 54.4-28.5 56.8-43.1H164v-34.4h94.4c1 5 1.6 10.1 1.6 16.6 0 57.1-38.3 97.6-96 97.6zm220-81.8h-29v29h-29.2v-29h-29V245h29v-29H355v29h29v29.2z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
             <span
               className="sr-only"
             >
-              Follow example on Google+
+              Follow edX on Google+
             </span>
           </a>
         </li>
@@ -319,15 +379,27 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
             target="_blank"
             title="Reddit"
           >
-            <span
-              aria-hidden={true}
-              className="fa fa-reddit-square fa-2x"
-              id="edx-footer-icon-reddit"
-            />
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-reddit-square fa-w-14 fa-2x social-icon"
+              data-icon="reddit-square"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M283.2 345.5c2.7 2.7 2.7 6.8 0 9.2-24.5 24.5-93.8 24.6-118.4 0-2.7-2.4-2.7-6.5 0-9.2 2.4-2.4 6.5-2.4 8.9 0 18.7 19.2 81 19.6 100.5 0 2.4-2.3 6.6-2.3 9 0zm-91.3-53.8c0-14.9-11.9-26.8-26.5-26.8-14.9 0-26.8 11.9-26.8 26.8 0 14.6 11.9 26.5 26.8 26.5 14.6 0 26.5-11.9 26.5-26.5zm90.7-26.8c-14.6 0-26.5 11.9-26.5 26.8 0 14.6 11.9 26.5 26.5 26.5 14.9 0 26.8-11.9 26.8-26.5 0-14.9-11.9-26.8-26.8-26.8zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-99.7 140.6c-10.1 0-19 4.2-25.6 10.7-24.1-16.7-56.5-27.4-92.5-28.6l18.7-84.2 59.5 13.4c0 14.6 11.9 26.5 26.5 26.5 14.9 0 26.8-12.2 26.8-26.8 0-14.6-11.9-26.8-26.8-26.8-10.4 0-19.3 6.2-23.8 14.9l-65.7-14.6c-3.3-.9-6.5 1.5-7.4 4.8l-20.5 92.8c-35.7 1.5-67.8 12.2-91.9 28.9-6.5-6.8-15.8-11-25.9-11-37.5 0-49.8 50.4-15.5 67.5-1.2 5.4-1.8 11-1.8 16.7 0 56.5 63.7 102.3 141.9 102.3 78.5 0 142.2-45.8 142.2-102.3 0-5.7-.6-11.6-2.1-17 33.6-17.2 21.2-67.2-16.1-67.2z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
             <span
               className="sr-only"
             >
-              Subscribe to the example subreddit
+              Subscribe to the edX subreddit
             </span>
           </a>
         </li>
@@ -819,15 +891,27 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
             target="_blank"
             title="Facebook"
           >
-            <span
-              aria-hidden={true}
-              className="fa fa-facebook-square fa-2x"
-              id="edx-footer-icon-facebook"
-            />
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-facebook-square fa-w-14 fa-2x social-icon"
+              data-icon="facebook-square"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M448 80v352c0 26.5-21.5 48-48 48h-85.3V302.8h60.6l8.7-67.6h-69.3V192c0-19.6 5.4-32.9 33.5-32.9H384V98.7c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9H184v67.6h60.9V480H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
             <span
               className="sr-only"
             >
-              Like example on Facebook
+              Like edX on Facebook
             </span>
           </a>
         </li>
@@ -839,15 +923,27 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
             target="_blank"
             title="Twitter"
           >
-            <span
-              aria-hidden={true}
-              className="fa fa-twitter-square fa-2x"
-              id="edx-footer-icon-twitter"
-            />
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-twitter-square fa-w-14 fa-2x social-icon"
+              data-icon="twitter-square"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
             <span
               className="sr-only"
             >
-              Follow example on Twitter
+              Follow edX on Twitter
             </span>
           </a>
         </li>
@@ -859,15 +955,27 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
             target="_blank"
             title="Youtube"
           >
-            <span
-              aria-hidden={true}
-              className="fa fa-youtube-square fa-2x"
-              id="edx-footer-icon-youtube"
-            />
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-youtube-square fa-w-14 fa-2x social-icon"
+              data-icon="youtube-square"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M186.8 202.1l95.2 54.1-95.2 54.1V202.1zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-42 176.3s0-59.6-7.6-88.2c-4.2-15.8-16.5-28.2-32.2-32.4C337.9 128 224 128 224 128s-113.9 0-142.2 7.7c-15.7 4.2-28 16.6-32.2 32.4-7.6 28.5-7.6 88.2-7.6 88.2s0 59.6 7.6 88.2c4.2 15.8 16.5 27.7 32.2 31.9C110.1 384 224 384 224 384s113.9 0 142.2-7.7c15.7-4.2 28-16.1 32.2-31.9 7.6-28.5 7.6-88.1 7.6-88.1z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
             <span
               className="sr-only"
             >
-              Subscribe to the example YouTube channel
+              Subscribe to the edX YouTube channel
             </span>
           </a>
         </li>
@@ -879,15 +987,27 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
             target="_blank"
             title="LinkedIn"
           >
-            <span
-              aria-hidden={true}
-              className="fa fa-linkedin-square fa-2x"
-              id="edx-footer-icon-linkedin"
-            />
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-linkedin fa-w-14 fa-2x social-icon"
+              data-icon="linkedin"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
             <span
               className="sr-only"
             >
-              Follow example on LinkedIn
+              Follow edX on LinkedIn
             </span>
           </a>
         </li>
@@ -899,15 +1019,27 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
             target="_blank"
             title="Google+"
           >
-            <span
-              aria-hidden={true}
-              className="fa fa-google-plus-square fa-2x"
-              id="edx-footer-icon-google"
-            />
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-google-plus-square fa-w-14 fa-2x social-icon"
+              data-icon="google-plus-square"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM164 356c-55.3 0-100-44.7-100-100s44.7-100 100-100c27 0 49.5 9.8 67 26.2l-27.1 26.1c-7.4-7.1-20.3-15.4-39.8-15.4-34.1 0-61.9 28.2-61.9 63.2 0 34.9 27.8 63.2 61.9 63.2 39.6 0 54.4-28.5 56.8-43.1H164v-34.4h94.4c1 5 1.6 10.1 1.6 16.6 0 57.1-38.3 97.6-96 97.6zm220-81.8h-29v29h-29.2v-29h-29V245h29v-29H355v29h29v29.2z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
             <span
               className="sr-only"
             >
-              Follow example on Google+
+              Follow edX on Google+
             </span>
           </a>
         </li>
@@ -919,15 +1051,27 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
             target="_blank"
             title="Reddit"
           >
-            <span
-              aria-hidden={true}
-              className="fa fa-reddit-square fa-2x"
-              id="edx-footer-icon-reddit"
-            />
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-reddit-square fa-w-14 fa-2x social-icon"
+              data-icon="reddit-square"
+              data-prefix="fab"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 448 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M283.2 345.5c2.7 2.7 2.7 6.8 0 9.2-24.5 24.5-93.8 24.6-118.4 0-2.7-2.4-2.7-6.5 0-9.2 2.4-2.4 6.5-2.4 8.9 0 18.7 19.2 81 19.6 100.5 0 2.4-2.3 6.6-2.3 9 0zm-91.3-53.8c0-14.9-11.9-26.8-26.5-26.8-14.9 0-26.8 11.9-26.8 26.8 0 14.6 11.9 26.5 26.8 26.5 14.6 0 26.5-11.9 26.5-26.5zm90.7-26.8c-14.6 0-26.5 11.9-26.5 26.8 0 14.6 11.9 26.5 26.5 26.5 14.9 0 26.8-11.9 26.8-26.5 0-14.9-11.9-26.8-26.8-26.8zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-99.7 140.6c-10.1 0-19 4.2-25.6 10.7-24.1-16.7-56.5-27.4-92.5-28.6l18.7-84.2 59.5 13.4c0 14.6 11.9 26.5 26.5 26.5 14.9 0 26.8-12.2 26.8-26.8 0-14.6-11.9-26.8-26.8-26.8-10.4 0-19.3 6.2-23.8 14.9l-65.7-14.6c-3.3-.9-6.5 1.5-7.4 4.8l-20.5 92.8c-35.7 1.5-67.8 12.2-91.9 28.9-6.5-6.8-15.8-11-25.9-11-37.5 0-49.8 50.4-15.5 67.5-1.2 5.4-1.8 11-1.8 16.7 0 56.5 63.7 102.3 141.9 102.3 78.5 0 142.2-45.8 142.2-102.3 0-5.7-.6-11.6-2.1-17 33.6-17.2 21.2-67.2-16.1-67.2z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
             <span
               className="sr-only"
             >
-              Subscribe to the example subreddit
+              Subscribe to the edX subreddit
             </span>
           </a>
         </li>

src/lib/components/SiteFooter/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
-import { Hyperlink, Icon } from '@edx/paragon';
+import { Hyperlink } from '@edx/paragon';
 import messages from './SiteFooter.messages';
 
 const EVENT_NAMES = {
@@ -40,140 +40,6 @@ class SiteFooter extends React.Component {
     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,
@@ -225,6 +91,7 @@ class SiteFooter extends React.Component {
       privacyPolicyUrl,
       contactUrl,
       supportUrl,
+      socialLinks,
     } = this.props;
     return (
       <footer
@@ -402,7 +269,24 @@ class SiteFooter extends React.Component {
             </ul>
           </div>
           <div className="area-5">
-            {this.renderSocialLinks()}
+            {socialLinks.length > 0 &&
+              <ul className="d-flex flex-row justify-content-between list-unstyled max-width-222 p-0 mb-4">
+                {socialLinks.map(link => (
+                  <li key={link.url}>
+                    <a
+                      href={link.url}
+                      title={link.title}
+                      rel="noopener noreferrer"
+                      target="_blank"
+                      onClick={this.externalLinkClickHandler}
+                    >
+                      {link.icon}
+                      <span className="sr-only">{link.screenReaderText}</span>
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            }
             {this.renderMobileLinks()}
             <p>
               <FormattedMessage
@@ -440,13 +324,12 @@ SiteFooter.propTypes = {
   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,
+  socialLinks: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+    icon: PropTypes.element.isRequired,
+    screenReaderText: PropTypes.string.isRequired,
+  })),
   showMobileLinks: PropTypes.bool,
   appleAppStoreUrl: PropTypes.string,
   googlePlayUrl: PropTypes.string,
@@ -463,13 +346,7 @@ SiteFooter.defaultProps = {
   openSourceUrl: null,
   termsOfServiceUrl: null,
   privacyPolicyUrl: null,
-  showSocialLinks: true,
-  facebookUrl: null,
-  twitterUrl: null,
-  youTubeUrl: null,
-  linkedInUrl: null,
-  googlePlusUrl: null,
-  redditUrl: null,
+  socialLinks: [],
   showMobileLinks: true,
   appleAppStoreUrl: null,
   googlePlayUrl: null,