fix: move dependencies out of footer

config/webpack.prod.config.js

@@ -35,6 +35,18 @@ module.exports = Merge.smart(commonConfig, {
       amd: 'ReactDOM',
       root: 'ReactDOM',
     },
+    'react-intl': {
+      commonjs: 'react-intl',
+      commonjs2: 'react-intl',
+      amd: 'ReactIntl',
+      root: 'ReactIntl',
+    },
+    '@edx/paragon': {
+      commonjs: '@edx/paragon',
+      commonjs2: '@edx/paragon',
+      amd: 'Paragon',
+      root: 'Paragon',
+    },
   },
   plugins: [
     // Cleans the dist directory before each build

package.json

@@ -9,6 +9,7 @@
   },
   "scripts": {
     "build": "NODE_ENV=production BABEL_ENV=production webpack  --config=config/webpack.prod.config.js",
+    "build:stats": "NODE_ENV=production BABEL_ENV=production webpack --config=config/webpack.prod.config.js --profile --progress --json > stats.json",
     "gc": "commit",
     "commitmsg": "commitlint -e $GIT_PARAMS",
     "coveralls": "cat ./coverage/lcov.info | coveralls",
@@ -39,6 +40,11 @@
     "@commitlint/prompt": "^6.0.2",
     "@commitlint/prompt-cli": "^6.0.2",
     "@edx/paragon": "^3.8.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.17",
+    "@fortawesome/free-brands-svg-icons": "^5.8.1",
+    "@fortawesome/free-regular-svg-icons": "^5.8.1",
+    "@fortawesome/free-solid-svg-icons": "^5.8.1",
+    "@fortawesome/react-fontawesome": "^0.1.4",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.5",
@@ -106,12 +112,5 @@
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
       "\\.(css|scss)$": "identity-obj-proxy"
     }
-  },
-  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.17",
-    "@fortawesome/free-brands-svg-icons": "^5.8.1",
-    "@fortawesome/free-regular-svg-icons": "^5.8.1",
-    "@fortawesome/free-solid-svg-icons": "^5.8.1",
-    "@fortawesome/react-fontawesome": "^0.1.4"
   }
 }

src/index.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from 'react-dom';
 import { IntlProvider } from 'react-intl';
 
+/* eslint-disable import/no-extraneous-dependencies */
 import {
   faFacebookSquare,
   faTwitterSquare,
@@ -10,7 +11,9 @@ import {
   faGooglePlusSquare,
   faRedditSquare,
 } from '@fortawesome/free-brands-svg-icons';
+import { faLanguage } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+/* eslint-enable import/no-extraneous-dependencies */
 
 import SiteFooter from './lib';
 import './index.scss';
@@ -85,6 +88,7 @@ const App = () => (
         activeLanguage: 'en',
         screenReaderLabel: 'Choose Language',
         submitLabel: 'Apply',
+        icon: <FontAwesomeIcon icon={faLanguage} size="2x" className="text-primary" />,
         onLanguageSelected: () => {},
       }}
     />

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

@@ -11,6 +11,7 @@ import {
   faGooglePlusSquare,
   faRedditSquare,
 } from '@fortawesome/free-brands-svg-icons';
+import { faLanguage } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import FooterLogo from '../../../edx-footer.png';
@@ -70,6 +71,7 @@ const languageForm = {
   activeLanguage: 'en',
   screenReaderLabel: 'Choose Language',
   submitLabel: 'Apply',
+  icon: <FontAwesomeIcon icon={faLanguage} size="2x" className="text-primary" />,
   onLanguageSelected: () => {},
 };
 

src/lib/components/SiteFooter/index.jsx

@@ -3,9 +3,6 @@ import PropTypes from 'prop-types';
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
 import { Hyperlink } from '@edx/paragon';
 
-import { faLanguage } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
 import messages from './SiteFooter.messages';
 
 const EVENT_NAMES = {
@@ -134,7 +131,7 @@ class SiteFooter extends React.Component {
                 >
                   {/* eslint-disable-next-line jsx-a11y/label-has-for */}
                   <label htmlFor="site-footer-language-select">
-                    <FontAwesomeIcon icon={faLanguage} size="2x" className="text-primary" />
+                    {languageForm.icon}
                     <div className="sr-only">{languageForm.screenReaderLabel}</div>
                   </label>
                   <select
@@ -382,6 +379,7 @@ SiteFooter.propTypes = {
     screenReaderLabel: PropTypes.string.isRequired,
     submitLabel: PropTypes.string.isRequired,
     onLanguageSelected: PropTypes.func.isRequired,
+    icon: PropTypes.node.isRequired,
     activeLanguage: PropTypes.string,
   }),
   handleAllTrackEvents: PropTypes.func.isRequired,