refactor: use paragon hyperlink again

package.json

@@ -43,6 +43,7 @@
     "@edx/edx-bootstrap": "^2.2.1",
     "@edx/frontend-i18n": "^2.1.0",
     "@edx/frontend-logging": "^2.0.2",
+    "@edx/paragon": "^6.1.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.17",
     "@fortawesome/free-brands-svg-icons": "^5.8.1",
     "@fortawesome/free-regular-svg-icons": "^5.8.1",
@@ -72,10 +73,10 @@
     "image-webpack-loader": "^4.2.0",
     "jest": "23.6.0",
     "node-sass": "^4.7.2",
-    "prop-types": "^15.5.10",
+    "prop-types": "^15.7.2",
-    "react": "^16.4.2",
+    "react": "^16.8.6",
     "react-dev-utils": "^5.0.0",
-    "react-dom": "^16.2.0",
+    "react-dom": "^16.8.6",
     "react-test-renderer": "^16.6.0",
     "reactifex": "^1.1.1",
     "sass-loader": "^6.0.6",
@@ -95,7 +96,7 @@
   "peerDependencies": {
     "@edx/frontend-i18n": "^2.1.0",
     "@edx/frontend-logging": "^2.0.2",
-    "@edx/paragon": "^4.2.4",
+    "@edx/paragon": "^6.1.0",
     "prop-types": "^15.5.10",
     "react": "^16.4.2",
     "react-dom": "^16.2.0"

src/lib/components/SiteFooter/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import qs from 'query-string';
+import { Hyperlink } from '@edx/paragon';
 
 const EVENT_NAMES = {
   FOOTER_LINK: 'edx.bi.footer.link',
@@ -47,7 +48,9 @@ class SiteFooter extends React.Component {
           <ul className="list-unstyled p-0 m-0">
             {linkList.map(link => (
               <li key={link.url}>
-                <a href={this.formatUrl(link)}>{link.title}</a>
+                <Hyperlink destination={this.formatUrl(link)}>
+                  {link.title}
+                </Hyperlink>
               </li>
             ))}
           </ul>
@@ -69,22 +72,32 @@ class SiteFooter extends React.Component {
       return (
         <ul className="d-flex flex-row justify-content-between list-unstyled max-width-264 p-0 mb-5">
           <li>
-            <a href={appleAppStore.url} rel="noopener noreferrer" target="_blank" onClick={this.externalLinkClickHandler}>
+            <Hyperlink
+              destination={appleAppStore.url}
+              rel="noreferrer"
+              target="_blank"
+              onClick={this.externalLinkClickHandler}
+            >
               <img
                 className="max-height-39"
                 alt={appleAppStore.altText}
                 src="https://prod-edxapp.edx-cdn.org/static/images/app/app_store_badge_135x40.d0558d910630.svg"
               />
-            </a>
+            </Hyperlink>
           </li>
           <li>
-            <a href={googlePlay.url} rel="noopener noreferrer" target="_blank" onClick={this.externalLinkClickHandler}>
+            <Hyperlink
+              destination={googlePlay.url}
+              rel="noreferrer"
+              target="_blank"
+              onClick={this.externalLinkClickHandler}
+            >
               <img
                 className="max-height-39"
                 alt={googlePlay.altText}
                 src="https://prod-edxapp.edx-cdn.org/static/images/app/google_play_badge_45.6ea466e328da.png"
               />
-            </a>
+            </Hyperlink>
           </li>
         </ul>
       );
@@ -117,12 +130,12 @@ class SiteFooter extends React.Component {
       >
         <div className="max-width-1180 d-grid">
           <div className="area-1">
-            <a
+            <Hyperlink
-              href={marketingSiteBaseUrl}
+              destination={marketingSiteBaseUrl}
               aria-label={siteLogo.ariaLabel}
             >
               <img src={siteLogo.src} alt={siteLogo.altText} />
-            </a>
+            </Hyperlink>
             {showLanguageSelector &&
               <div className="i18n d-flex mt-2">
                 <form
@@ -156,16 +169,16 @@ class SiteFooter extends React.Component {
               <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
+                    <Hyperlink
-                      href={link.url}
+                      destination={link.url}
                       title={link.title}
-                      rel="noopener noreferrer"
+                      rel="noreferrer"
                       target="_blank"
                       onClick={this.externalLinkClickHandler}
                     >
                       {link.icon}
                       <span className="sr-only">{link.screenReaderText}</span>
-                    </a>
+                    </Hyperlink>
                   </li>
                 ))}
               </ul>