refactor: use paragon hyperlink again

Merge pull request #44 from edx/alasdair/remove-paragon
perf(paragon): remove paragon to reduce bundle size
2019-07-05 09:45:21 -04:00 · 2019-06-21 11:14:29 -04:00 · 2019-06-21 11:11:01 -04:00
5 changed files with 112 additions and 127 deletions
--- a/config/webpack.prod.config.js
+++ b/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
--- a/package-lock.json
+++ b/package-lock.json
@@ -1470,22 +1470,20 @@
      "dev": true
    },
    "@edx/paragon": {
-      "version": "4.2.6",
-      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-4.2.6.tgz",
-      "integrity": "sha512-HOSClLgOe2hGxFuRORgK+6iSrEixFvaz5Cg3pdQa+SeU9WBqiPlEevG4TnWl0qlihltsYR9Vba80tzG9ci84hQ==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-6.1.0.tgz",
+      "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",
-          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.18.tgz",
-          "integrity": "sha512-834DrzO2Ne3upCW+mJJPC/E6BsFcj+2Z1HmPIhbpbj8UaKmXWum4NClqLpUiMetugRlHuG4jbIHNdv2/lc3c1Q==",
+          "version": "0.2.19",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.19.tgz",
+          "integrity": "sha512-nd2Ul/CUs8U9sjofQYAALzOGpgkVJQgEhIJnOHaoyVR/LeC3x2mVg4eB910a4kS6WgLPebAY0M2fApEI497raQ==",
          "dev": true
        },
        "@fortawesome/fontawesome-svg-core": {
-          "version": "1.2.18",
-          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.18.tgz",
-          "integrity": "sha512-1vyLWVQqxQ8q8bA2zgZcljk3RkeELlDJ757ymLk+ebK019AFgEFH5kTnR5OMN1SFsTwW1OHlFQO3VufdeCg/Gg==",
+          "version": "1.2.19",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.19.tgz",
+          "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",
-          "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.8.2.tgz",
-          "integrity": "sha512-5tF6WOFlqqO95zY5ukSB6jliDa3jnk1p5L4K/a58ccDFsbjSkhfGuvZkRkeWxH8uMms81pZd6yQTwQrkedeJmg==",
+          "version": "5.9.0",
+          "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.9.0.tgz",
+          "integrity": "sha512-U8YXPfWcSozsCW0psCtlRGKjjRs5+Am5JJwLOUmVHFZbIEWzaz4YbP84EoPwUsVmSAKrisu3QeNcVOtmGml0Xw==",
          "dev": true,
          "requires": {
-            "@fortawesome/fontawesome-common-types": "^0.2.18"
-          }
-        },
-        "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"
+            "@fortawesome/fontawesome-common-types": "^0.2.19"
          }
        }
      }
@@ -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",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.16.tgz",
-      "integrity": "sha512-MOo8zNSlIqh22Uaa3drkdIAgUGEL+AD1ESiSdmElLUmE2uVDo1QloiT/IfW9qRw8Gw+Y/w69UVMGwbufMSftxA==",
+      "version": "7.0.17",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.17.tgz",
+      "integrity": "sha512-546ZowA+KZ3OasvQZHsbuEpysvwTZNGJv9EfyCQdsIDltPSWHAeTQ5fQy/Npi2ZDtLI3zs7Ps/p6wThErhm9fQ==",
      "dev": true,
      "requires": {
        "chalk": "^2.4.2",
@@ -20360,13 +20296,22 @@
      }
    },
    "prop-types": {
-      "version": "15.6.2",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
-      "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
+      "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.3.1",
-        "object-assign": "^4.1.1"
+        "loose-envify": "^1.4.0",
+        "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",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.7.0.tgz",
-      "integrity": "sha512-StCz3QY8lxTb5cl2HJxjwLFOXPIFQp+p+hxQfc8WE0QiLfCtIlKj8/+5tjjKm8uSTlAW+fCPaavGFS06V9Ar3A==",
+      "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.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",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.7.0.tgz",
-      "integrity": "sha512-D0Ufv1ExCAmF38P2Uh1lwpminZFRXEINJe53zRAbm4KPwSyd6DY/uDoS0Blj9jvPpn1+wivKpZYc8aAAN/nAkg==",
+      "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.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",
-      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.0.1.tgz",
-      "integrity": "sha512-SsLcBYhO4afXJC9esL8XMxi/y0ZvEc7To0TvtrBELqzpjXQHPZOTxvuPh2/4EhYc0uSMfp2SExIxsyJ0pBdNzg==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.2.1.tgz",
+      "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": {
--- a/package.json
+++ b/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",
-    "react": "^16.4.2",
+    "prop-types": "^15.7.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"
--- a/src/lib/components/SiteFooter/snapshots/SiteFooter.test.jsx.snap
+++ b/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"
--- a/src/lib/components/SiteFooter/index.jsx
+++ b/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>
      );
@@ -157,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
-                      href={link.url}
+                    <Hyperlink
+                      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>
Author	SHA1	Message	Date
David Joy	40264e087d	refactor: use paragon hyperlink again	2019-07-05 09:45:21 -04:00
AlasdairSwan	31e255ebe9	Merge pull request #44 from edx/alasdair/remove-paragon perf(paragon): remove paragon to reduce bundle size	2019-06-21 11:14:29 -04:00
AlasdairSwan	349f83f686	perf(paragon): remove paragon to reduce bundle size	2019-06-21 11:11:01 -04:00