refactor: use paragon hyperlink again

perf(paragon): remove paragon to reduce bundle size

config/webpack.prod.config.js

@@ -47,12 +47,6 @@ module.exports = Merge.smart(commonConfig, {
       amd: '@edx/frontend-logging',
       root: '@edx/frontend-logging',
     },
-    '@edx/paragon': {
-      commonjs: '@edx/paragon',
-      commonjs2: '@edx/paragon',
-      amd: 'Paragon',
-      root: 'Paragon',
-    },
   },
   plugins: [
     // Cleans the dist directory before each build

package-lock.json

@@ -1470,22 +1470,20 @@
       "dev": true
     },
     "@edx/paragon": {
-      "version": "4.2.6",
+      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-4.2.6.tgz",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-6.1.0.tgz",
-      "integrity": "sha512-HOSClLgOe2hGxFuRORgK+6iSrEixFvaz5Cg3pdQa+SeU9WBqiPlEevG4TnWl0qlihltsYR9Vba80tzG9ci84hQ==",
+      "integrity": "sha512-S1cHYwLhBiE2FDuTiK/aTzq4T2kjRau7BewYZ8oJDK02OKv6lMHmekawWyyCK4nE9zGkPst5iawQmBYnfM+obw==",
       "dev": true,
       "requires": {
         "@fortawesome/fontawesome-svg-core": "^1.2.18",
         "@fortawesome/free-solid-svg-icons": "^5.8.2",
         "@fortawesome/react-fontawesome": "^0.1.4",
         "airbnb-prop-types": "^2.12.0",
+        "bootstrap": "^4.3.1",
         "classnames": "^2.2.6",
         "email-prop-type": "^3.0.0",
         "font-awesome": "^4.7.0",
         "mailto-link": "^1.0.0",
-        "prop-types": "^15.7.2",
-        "react": "^16.8.6",
-        "react-dom": "^16.8.6",
         "react-proptype-conditional-require": "^1.0.4",
         "react-responsive": "^6.1.1",
         "react-transition-group": "^4.0.0",
@@ -1493,78 +1491,27 @@
       },
       "dependencies": {
         "@fortawesome/fontawesome-common-types": {
-          "version": "0.2.18",
+          "version": "0.2.19",
-          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.18.tgz",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.19.tgz",
-          "integrity": "sha512-834DrzO2Ne3upCW+mJJPC/E6BsFcj+2Z1HmPIhbpbj8UaKmXWum4NClqLpUiMetugRlHuG4jbIHNdv2/lc3c1Q==",
+          "integrity": "sha512-nd2Ul/CUs8U9sjofQYAALzOGpgkVJQgEhIJnOHaoyVR/LeC3x2mVg4eB910a4kS6WgLPebAY0M2fApEI497raQ==",
           "dev": true
         },
         "@fortawesome/fontawesome-svg-core": {
-          "version": "1.2.18",
+          "version": "1.2.19",
-          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.18.tgz",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.19.tgz",
-          "integrity": "sha512-1vyLWVQqxQ8q8bA2zgZcljk3RkeELlDJ757ymLk+ebK019AFgEFH5kTnR5OMN1SFsTwW1OHlFQO3VufdeCg/Gg==",
+          "integrity": "sha512-D4ICXg9oU08eF9o7Or392gPpjmwwgJu8ecCFusthbID95CLVXOgIyd4mOKD9Nud5Ckz+Ty59pqkNtThDKR0erA==",
           "dev": true,
           "requires": {
-            "@fortawesome/fontawesome-common-types": "^0.2.18"
+            "@fortawesome/fontawesome-common-types": "^0.2.19"
           }
         },
         "@fortawesome/free-solid-svg-icons": {
-          "version": "5.8.2",
+          "version": "5.9.0",
-          "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.8.2.tgz",
+          "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.9.0.tgz",
-          "integrity": "sha512-5tF6WOFlqqO95zY5ukSB6jliDa3jnk1p5L4K/a58ccDFsbjSkhfGuvZkRkeWxH8uMms81pZd6yQTwQrkedeJmg==",
+          "integrity": "sha512-U8YXPfWcSozsCW0psCtlRGKjjRs5+Am5JJwLOUmVHFZbIEWzaz4YbP84EoPwUsVmSAKrisu3QeNcVOtmGml0Xw==",
           "dev": true,
           "requires": {
-            "@fortawesome/fontawesome-common-types": "^0.2.18"
+            "@fortawesome/fontawesome-common-types": "^0.2.19"
-          }
-        },
-        "prop-types": {
-          "version": "15.7.2",
-          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
-          "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-          "dev": true,
-          "requires": {
-            "loose-envify": "^1.4.0",
-            "object-assign": "^4.1.1",
-            "react-is": "^16.8.1"
-          }
-        },
-        "react": {
-          "version": "16.8.6",
-          "resolved": "https://registry.npmjs.org/react/-/react-16.8.6.tgz",
-          "integrity": "sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==",
-          "dev": true,
-          "requires": {
-            "loose-envify": "^1.1.0",
-            "object-assign": "^4.1.1",
-            "prop-types": "^15.6.2",
-            "scheduler": "^0.13.6"
-          }
-        },
-        "react-dom": {
-          "version": "16.8.6",
-          "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz",
-          "integrity": "sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==",
-          "dev": true,
-          "requires": {
-            "loose-envify": "^1.1.0",
-            "object-assign": "^4.1.1",
-            "prop-types": "^15.6.2",
-            "scheduler": "^0.13.6"
-          }
-        },
-        "react-is": {
-          "version": "16.8.6",
-          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
-          "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==",
-          "dev": true
-        },
-        "scheduler": {
-          "version": "0.13.6",
-          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz",
-          "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==",
-          "dev": true,
-          "requires": {
-            "loose-envify": "^1.1.0",
-            "object-assign": "^4.1.1"
           }
         }
       }
@@ -2351,17 +2298,6 @@
         "react-is": "^16.8.6"
       },
       "dependencies": {
-        "prop-types": {
-          "version": "15.7.2",
-          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
-          "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-          "dev": true,
-          "requires": {
-            "loose-envify": "^1.4.0",
-            "object-assign": "^4.1.1",
-            "react-is": "^16.8.1"
-          }
-        },
         "react-is": {
           "version": "16.8.6",
           "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
@@ -18242,9 +18178,9 @@
       "dev": true
     },
     "postcss": {
-      "version": "7.0.16",
+      "version": "7.0.17",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.16.tgz",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.17.tgz",
-      "integrity": "sha512-MOo8zNSlIqh22Uaa3drkdIAgUGEL+AD1ESiSdmElLUmE2uVDo1QloiT/IfW9qRw8Gw+Y/w69UVMGwbufMSftxA==",
+      "integrity": "sha512-546ZowA+KZ3OasvQZHsbuEpysvwTZNGJv9EfyCQdsIDltPSWHAeTQ5fQy/Npi2ZDtLI3zs7Ps/p6wThErhm9fQ==",
       "dev": true,
       "requires": {
         "chalk": "^2.4.2",
@@ -20360,13 +20296,22 @@
       }
     },
     "prop-types": {
-      "version": "15.6.2",
+      "version": "15.7.2",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
-      "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
       "dev": true,
       "requires": {
-        "loose-envify": "^1.3.1",
+        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1"
+        "object-assign": "^4.1.1",
+        "react-is": "^16.8.1"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.8.6",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
+          "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==",
+          "dev": true
+        }
       }
     },
     "prop-types-exact": {
@@ -20624,15 +20569,27 @@
       }
     },
     "react": {
-      "version": "16.7.0",
+      "version": "16.8.6",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.8.6.tgz",
-      "integrity": "sha512-StCz3QY8lxTb5cl2HJxjwLFOXPIFQp+p+hxQfc8WE0QiLfCtIlKj8/+5tjjKm8uSTlAW+fCPaavGFS06V9Ar3A==",
+      "integrity": "sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==",
       "dev": true,
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
         "prop-types": "^15.6.2",
-        "scheduler": "^0.12.0"
+        "scheduler": "^0.13.6"
+      },
+      "dependencies": {
+        "scheduler": {
+          "version": "0.13.6",
+          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz",
+          "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==",
+          "dev": true,
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1"
+          }
+        }
       }
     },
     "react-dev-utils": {
@@ -20871,15 +20828,27 @@
       }
     },
     "react-dom": {
-      "version": "16.7.0",
+      "version": "16.8.6",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz",
-      "integrity": "sha512-D0Ufv1ExCAmF38P2Uh1lwpminZFRXEINJe53zRAbm4KPwSyd6DY/uDoS0Blj9jvPpn1+wivKpZYc8aAAN/nAkg==",
+      "integrity": "sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==",
       "dev": true,
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
         "prop-types": "^15.6.2",
-        "scheduler": "^0.12.0"
+        "scheduler": "^0.13.6"
+      },
+      "dependencies": {
+        "scheduler": {
+          "version": "0.13.6",
+          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz",
+          "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==",
+          "dev": true,
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1"
+          }
+        }
       }
     },
     "react-error-overlay": {
@@ -20937,14 +20906,32 @@
       }
     },
     "react-transition-group": {
-      "version": "4.0.1",
+      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.2.1.tgz",
-      "integrity": "sha512-SsLcBYhO4afXJC9esL8XMxi/y0ZvEc7To0TvtrBELqzpjXQHPZOTxvuPh2/4EhYc0uSMfp2SExIxsyJ0pBdNzg==",
+      "integrity": "sha512-IXrPr93VzCPupwm2O6n6C2kJIofJ/Rp5Ltihhm9UfE8lkuVX2ng/SUUl/oWjblybK9Fq2Io7LGa6maVqPB762Q==",
       "dev": true,
       "requires": {
+        "@babel/runtime": "^7.4.5",
         "dom-helpers": "^3.4.0",
         "loose-envify": "^1.4.0",
         "prop-types": "^15.6.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.5.0",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.5.0.tgz",
+          "integrity": "sha512-2xsuyZ0R0RBFwjgae5NpXk8FcfH4qovj5cEM5VEeB7KXnKqzaisIu2HSV/mCEISolJJuR4wkViUGYujA8MH9tw==",
+          "dev": true,
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.2",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz",
+          "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==",
+          "dev": true
+        }
       }
     },
     "reactifex": {

package.json

@@ -43,7 +43,7 @@
     "@edx/edx-bootstrap": "^2.2.1",
     "@edx/frontend-i18n": "^2.1.0",
     "@edx/frontend-logging": "^2.0.2",
-    "@edx/paragon": "^4.2.4",
+    "@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",
@@ -73,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",
@@ -96,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/index.scss

@@ -1,4 +1,4 @@
-@import "~@edx/edx-bootstrap/sass/edx/theme";
+@import "~@edx/edx-bootstrap/scss/edx/theme";
 @import "~bootstrap/scss/bootstrap";
 
 @import './lib/scss/_site-footer.scss';

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

@@ -15,8 +15,6 @@ exports[`<SiteFooter /> renders correctly does not render language selector 1`]
       <a
         aria-label="edX Home"
         href="https://www.example.com"
-        onClick={[Function]}
-        target="_self"
       >
         <img
           alt="edx Logo"
@@ -398,8 +396,6 @@ exports[`<SiteFooter /> renders correctly does not render mobile links 1`] = `
       <a
         aria-label="edX Home"
         href="https://www.example.com"
-        onClick={[Function]}
-        target="_self"
       >
         <img
           alt="edx Logo"
@@ -807,8 +803,6 @@ exports[`<SiteFooter /> renders correctly does not render social links 1`] = `
       <a
         aria-label="edX Home"
         href="https://www.example.com"
-        onClick={[Function]}
-        target="_self"
       >
         <img
           alt="edx Logo"
@@ -1084,8 +1078,6 @@ exports[`<SiteFooter /> renders correctly renders with social and mobile links 1
       <a
         aria-label="edX Home"
         href="https://www.example.com"
-        onClick={[Function]}
-        target="_self"
       >
         <img
           alt="edx Logo"

src/lib/components/SiteFooter/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Hyperlink } from '@edx/paragon';
 import qs from 'query-string';
+import { Hyperlink } from '@edx/paragon';
 
 const EVENT_NAMES = {
   FOOTER_LINK: 'edx.bi.footer.link',
@@ -48,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>
@@ -70,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>
       );
@@ -120,9 +132,10 @@ class SiteFooter extends React.Component {
           <div className="area-1">
             <Hyperlink
               destination={marketingSiteBaseUrl}
-              content={<img src={siteLogo.src} alt={siteLogo.altText} />}
               aria-label={siteLogo.ariaLabel}
-            />
+            >
+              <img src={siteLogo.src} alt={siteLogo.altText} />
+            </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>