Upgrade frontend-component-footer

2019-05-15 15:53:40 -04:00
parent 605cadef55
commit 0c689d92a2
3 changed files with 145 additions and 12 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -2609,9 +2609,76 @@
      }
    },
    "@edx/frontend-component-footer": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-2.0.3.tgz",
-      "integrity": "sha512-HSUs9vDZ18enSY5km15cFdt8WhBqippEaQZwtOBH2zX4iEtHb6kV0lX7gHD++Vnm/UCgJkvcbWZ7tFDImikvPA=="
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-4.1.2.tgz",
+      "integrity": "sha512-QsRzEsPFU2kkaww1015xTKQS20DjUz1Q6s/GQH8OLhSbH52YNgiukpZLLZ6as9vwuhbx6hM/tlkwn1iA4j0BrQ==",
+      "requires": {
+        "@edx/paragon": "^3.8.0",
+        "prop-types": "^15.5.10",
+        "query-string": "^6.5.0",
+        "react": "^16.4.2",
+        "react-dom": "^16.2.0",
+        "react-intl": "2.x"
+      },
+      "dependencies": {
+        "@edx/edx-bootstrap": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/@edx/edx-bootstrap/-/edx-bootstrap-1.0.4.tgz",
+          "integrity": "sha512-h1tQxrSfOJEf60oPhCHcPClO260N+XnZX3Pnw6cKeYgWi5kiZT1ElqDerYpoV3Lj6xdhhDYeWHptgRPZnUCnxg==",
+          "requires": {
+            "bootstrap": "^4.3.1",
+            "jquery": "^3.2.1",
+            "popper.js": "^1.12.6"
+          }
+        },
+        "@edx/paragon": {
+          "version": "3.10.1",
+          "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-3.10.1.tgz",
+          "integrity": "sha512-bSH8pWwaJnHPyK+duYdEhhAY1FwTqwP871d0wYIR530/RFUGdVrvqufZXhdBh7pnjwYQEffDhQM6mPcLP25+rA==",
+          "requires": {
+            "@edx/edx-bootstrap": "^1.0.0",
+            "@sambego/storybook-styles": "^1.0.0",
+            "airbnb-prop-types": "^2.10.0",
+            "babel-polyfill": "^6.26.0",
+            "classnames": "^2.2.5",
+            "email-prop-type": "^1.1.5",
+            "font-awesome": "^4.7.0",
+            "mailto-link": "^1.0.0",
+            "prop-types": "^15.5.8",
+            "react": "^16.4.2",
+            "react-dom": "^16.1.0",
+            "react-element-proptypes": "^1.0.0",
+            "react-proptype-conditional-require": "^1.0.4",
+            "react-responsive": "^5.0.0",
+            "sanitize-html": "^1.18.2"
+          }
+        },
+        "query-string": {
+          "version": "6.5.0",
+          "resolved": "https://registry.npmjs.org/query-string/-/query-string-6.5.0.tgz",
+          "integrity": "sha512-TYC4hDjZSvVxLMEucDMySkuAS9UIzSbAiYGyA9GWCjLKB8fQpviFbjd20fD7uejCDxZS+ftSdBKE6DS+xucJFg==",
+          "requires": {
+            "decode-uri-component": "^0.2.0",
+            "split-on-first": "^1.0.0",
+            "strict-uri-encode": "^2.0.0"
+          }
+        },
+        "react-responsive": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-5.0.0.tgz",
+          "integrity": "sha512-oEimZ0FTCC3/pjGDEBHOz06nWbBNDIbMGOdRYp6K9SBUmrqgNAX77hTiqvmRQeLyI97zz4F4kiaFRxFspDxE+w==",
+          "requires": {
+            "hyphenate-style-name": "^1.0.0",
+            "matchmediaquery": "^0.3.0",
+            "prop-types": "^15.6.1"
+          }
+        },
+        "strict-uri-encode": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+          "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY="
+        }
+      }
    },
    "@edx/frontend-component-site-header": {
      "version": "2.1.4",
@@ -2980,6 +3047,11 @@
        }
      }
    },
+    "@sambego/storybook-styles": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@sambego/storybook-styles/-/storybook-styles-1.0.0.tgz",
+      "integrity": "sha512-n0SqZwDewUDRaStEcoNMiYy9qovaLVStsh4Gb2dc2LLiG3IIK0UXdeR1N7puVuRihJq/192uOyGPCjZ/NAteuA=="
+    },
    "@sindresorhus/is": {
      "version": "0.7.0",
      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz",
@@ -8908,8 +8980,7 @@
    "decode-uri-component": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
-      "dev": true
+      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
    },
    "decompress": {
      "version": "4.2.0",
@@ -14646,6 +14717,11 @@
        "merge-stream": "^1.0.1"
      }
    },
+    "jquery": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
+      "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
+    },
    "js-base64": {
      "version": "2.5.1",
      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
@@ -17040,6 +17116,11 @@
        }
      }
    },
+    "popper.js": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz",
+      "integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA=="
+    },
    "portfinder": {
      "version": "1.0.20",
      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.20.tgz",
@@ -19808,6 +19889,11 @@
        }
      }
    },
+    "react-element-proptypes": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-element-proptypes/-/react-element-proptypes-1.0.0.tgz",
+      "integrity": "sha1-ygpafBYk646CrQjqeIzfyWvBpRc="
+    },
    "react-error-overlay": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.1.tgz",
@@ -22391,6 +22477,11 @@
        }
      }
    },
+    "split-on-first": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
+      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="
+    },
    "split-string": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
    "@edx/edx-bootstrap": "^2.0.1",
    "@edx/frontend-analytics": "^1.0.0",
    "@edx/frontend-auth": "^5.2.0",
-    "@edx/frontend-component-footer": "^2.0.3",
+    "@edx/frontend-component-footer": "^4.1.2",
    "@edx/frontend-component-site-header": "^2.1.4",
    "@edx/frontend-logging": "^2.0.2",
    "@edx/paragon": "^4.1.3",
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -8,6 +8,15 @@ import { sendTrackEvent } from '@edx/frontend-analytics';
 import SiteHeader from '@edx/frontend-component-site-header';
 import SiteFooter from '@edx/frontend-component-footer';
 import { getLocale, getMessages } from '@edx/frontend-i18n'; // eslint-disable-line
+import {
+  faFacebookSquare,
+  faTwitterSquare,
+  faYoutubeSquare,
+  faLinkedin,
+  faGooglePlusSquare,
+  faRedditSquare,
+} from '@fortawesome/free-brands-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

 import { PageLoading, fetchUserAccount } from '../common';
 import { ConnectedProfilePage } from '../profile';
@@ -87,6 +96,44 @@ function PageContent({
      content: intl.formatMessage(messages['siteheader.user.menu.register']),
    },
  ];
+  const socialLinks = [
+    {
+      title: 'Facebook',
+      url: configuration.FACEBOOK_URL,
+      icon: <FontAwesomeIcon icon={faFacebookSquare} className="social-icon" size="2x" />,
+      screenReaderText: 'Like edX on Facebook',
+    },
+    {
+      title: 'Twitter',
+      url: configuration.TWITTER_URL,
+      icon: <FontAwesomeIcon icon={faTwitterSquare} className="social-icon" size="2x" />,
+      screenReaderText: 'Follow edX on Twitter',
+    },
+    {
+      title: 'Youtube',
+      url: configuration.YOU_TUBE_URL,
+      icon: <FontAwesomeIcon icon={faYoutubeSquare} className="social-icon" size="2x" />,
+      screenReaderText: 'Subscribe to the edX YouTube channel',
+    },
+    {
+      title: 'LinkedIn',
+      url: configuration.LINKED_IN_URL,
+      icon: <FontAwesomeIcon icon={faLinkedin} className="social-icon" size="2x" />,
+      screenReaderText: 'Follow edX on LinkedIn',
+    },
+    {
+      title: 'Google+',
+      url: configuration.GOOGLE_PLUS_URL,
+      icon: <FontAwesomeIcon icon={faGooglePlusSquare} className="social-icon" size="2x" />,
+      screenReaderText: 'Follow edX on Google+',
+    },
+    {
+      title: 'Reddit',
+      url: configuration.REDDIT_URL,
+      icon: <FontAwesomeIcon icon={faRedditSquare} className="social-icon" size="2x" />,
+      screenReaderText: 'Subscribe to the edX subreddit',
+    },
+  ];

  return (
    <div>
@@ -118,12 +165,7 @@ function PageContent({
        openSourceUrl={configuration.OPEN_SOURCE_URL}
        termsOfServiceUrl={configuration.TERMS_OF_SERVICE_URL}
        privacyPolicyUrl={configuration.PRIVACY_POLICY_URL}
-        facebookUrl={configuration.FACEBOOK_URL}
-        twitterUrl={configuration.TWITTER_URL}
-        youTubeUrl={configuration.YOU_TUBE_URL}
-        linkedInUrl={configuration.LINKED_IN_URL}
-        googlePlusUrl={configuration.GOOGLE_PLUS_URL}
-        redditUrl={configuration.REDDIT_URL}
+        socialLinks={socialLinks}
        appleAppStoreUrl={configuration.APPLE_APP_STORE_URL}
        googlePlayUrl={configuration.GOOGLE_PLAY_URL}
        handleAllTrackEvents={sendTrackEvent}