Merge pull request #44 from edx/alasdair/remove-paragon

perf(paragon): remove paragon to reduce bundle size

Makefile

@@ -1,11 +1,13 @@
 transifex_resource = frontend-component-footer
 transifex_langs = "ar,fr,es_419,zh_CN"
+
 transifex_utils = ./node_modules/.bin/transifex-utils.js
-transifex_input = ./src/i18n/transifex_input.json
+i18n = ./src/i18n
+transifex_input = $(i18n)/transifex_input.json
 tx_url1 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/translation/en/strings/
 tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/source/
 
-# this directory must match .babelrc
+# This directory must match .babelrc .
 transifex_temp = ./temp/babel-plugin-react-intl
 
 requirements:
@@ -22,15 +24,12 @@ i18n.concat:
 
 extract_translations: | requirements i18n.extract i18n.concat
 
+# Despite the name, we actually need this target to detect changes in the incoming translated message files as well.
 detect_changed_source_translations:
 	# Checking for changed translations...
-	git diff --exit-code $(transifex_input)
+	git diff --exit-code $(i18n)
 
-validate-no-uncommitted-package-lock-changes:
-	# Checking for package-lock.json changes...
-	git diff --exit-code package-lock.json
-
-# Push translations to Transifex.  Run make extract_translations first.
+# Pushes translations to Transifex.  You must run make extract_translations first.
 push_translations:
 	# Pushing strings to Transifex...
 	tx push -s
@@ -41,6 +40,11 @@ push_translations:
 	# Pushing comments to Transifex...
 	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)
 
-# Pull translations from Transifex
+# Pulls translations from Transifex.
 pull_translations:
 	tx pull -f --mode reviewed --language=$(transifex_langs)
+
+# This target is used by Travis.
+validate-no-uncommitted-package-lock-changes:
+	# Checking for package-lock.json changes...
+	git diff --exit-code package-lock.json

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.json

@@ -43,7 +43,6 @@
     "@edx/edx-bootstrap": "^2.2.1",
     "@edx/frontend-i18n": "^2.1.0",
     "@edx/frontend-logging": "^2.0.2",
-    "@edx/paragon": "^4.2.4",
     "@fortawesome/fontawesome-svg-core": "^1.2.17",
     "@fortawesome/free-brands-svg-icons": "^5.8.1",
     "@fortawesome/free-regular-svg-icons": "^5.8.1",

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,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Hyperlink } from '@edx/paragon';
 import qs from 'query-string';
 
 const EVENT_NAMES = {
@@ -118,11 +117,12 @@ class SiteFooter extends React.Component {
       >
         <div className="max-width-1180 d-grid">
           <div className="area-1">
-            <Hyperlink
-              destination={marketingSiteBaseUrl}
-              content={<img src={siteLogo.src} alt={siteLogo.altText} />}
+            <a
+              href={marketingSiteBaseUrl}
               aria-label={siteLogo.ariaLabel}
-            />
+            >
+              <img src={siteLogo.src} alt={siteLogo.altText} />
+            </a>
             {showLanguageSelector &&
               <div className="i18n d-flex mt-2">
                 <form