Upgrade @edx/frontend-component-footer and update 'edX for Business' and social links

package.json

@@ -26,8 +26,11 @@
   "dependencies": {
     "@edx/edx-bootstrap": "^0.4.3",
     "@edx/frontend-auth": "^4.0.0",
-    "@edx/frontend-component-footer": "^1.0.0",
+    "@edx/frontend-component-footer": "^4.1.2",
     "@edx/paragon": "^3.8.3",
+    "@fortawesome/fontawesome-svg-core": "^1.2.18",
+    "@fortawesome/free-brands-svg-icons": "^5.8.2",
+    "@fortawesome/react-fontawesome": "^0.1.4",
     "@redux-beacon/segment": "^1.0.0",
     "babel-polyfill": "^6.26.0",
     "classnames": "^2.2.6",
@@ -43,8 +46,8 @@
     "react-router-dom": "^4.3.1",
     "react-router-redux": "^5.0.0-alpha.9",
     "redux": "^3.7.2",
-    "redux-devtools-extension": "^2.13.7",
     "redux-beacon": "^2.0.3",
+    "redux-devtools-extension": "^2.13.7",
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0",
     "whatwg-fetch": "^2.0.4"

src/index.jsx

@@ -5,6 +5,15 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import SiteFooter from '@edx/frontend-component-footer';
 
+import {
+  faFacebookSquare,
+  faTwitterSquare,
+  faYoutubeSquare,
+  faLinkedin,
+  faRedditSquare,
+} from '@fortawesome/free-brands-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
 import apiClient from './data/apiClient';
 import GradebookPage from './containers/GradebookPage';
 import Header from './components/Header';
@@ -12,6 +21,39 @@ import store from './data/store';
 import FooterLogo from '../assets/edx-footer.png';
 import './App.scss';
 
+const socialLinks = [
+  {
+    title: 'Facebook',
+    url: process.env.FACEBOOK_URL,
+    icon: <FontAwesomeIcon icon={faFacebookSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Like edX on Facebook',
+  },
+  {
+    title: 'Twitter',
+    url: process.env.TWITTER_URL,
+    icon: <FontAwesomeIcon icon={faTwitterSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Follow edX on Twitter',
+  },
+  {
+    title: 'Youtube',
+    url: process.env.YOU_TUBE_URL,
+    icon: <FontAwesomeIcon icon={faYoutubeSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Subscribe to the edX YouTube channel',
+  },
+  {
+    title: 'LinkedIn',
+    url: process.env.LINKED_IN_URL,
+    icon: <FontAwesomeIcon icon={faLinkedin} className="social-icon" size="2x" />,
+    screenReaderText: 'Follow edX on LinkedIn',
+  },
+  {
+    title: 'Reddit',
+    url: process.env.REDDIT_URL,
+    icon: <FontAwesomeIcon icon={faRedditSquare} className="social-icon" size="2x" />,
+    screenReaderText: 'Subscribe to the edX subreddit',
+  },
+];
+
 const App = () => (
   <Provider store={store}>
     <Router>
@@ -31,14 +73,17 @@ const App = () => (
           openSourceUrl={process.env.OPEN_SOURCE_URL}
           termsOfServiceUrl={process.env.TERMS_OF_SERVICE_URL}
           privacyPolicyUrl={process.env.PRIVACY_POLICY_URL}
-          facebookUrl={process.env.FACEBOOK_URL}
-          twitterUrl={process.env.TWITTER_URL}
-          youTubeUrl={process.env.YOU_TUBE_URL}
-          linkedInUrl={process.env.LINKED_IN_URL}
-          googlePlusUrl={process.env.GOOGLE_PLUS_URL}
-          redditUrl={process.env.REDDIT_URL}
           appleAppStoreUrl={process.env.APPLE_APP_STORE_URL}
           googlePlayUrl={process.env.GOOGLE_PLAY_URL}
+          socialLinks={socialLinks}
+          enterpriseMarketingLink={{
+            url: process.env.ENTERPRISE_MARKETING_URL,
+            queryParams: {
+              utm_source: process.env.ENTERPRISE_MARKETING_UTM_SOURCE,
+              utm_campaign: process.env.ENTERPRISE_MARKETING_UTM_CAMPAIGN,
+              utm_medium: process.env.ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM,
+            },
+          }}
         />
       </div>
     </Router>