Reduce bundle size by upgrading frontend-component-footer.

package.json

@@ -13,6 +13,7 @@
     "is-es5": "es-check es5 ./dist/*.js",
     "lint": "eslint --ext .js --ext .jsx .",
     "precommit": "npm run lint",
+    "snapshot": "jest --updateSnapshot",
     "start": "NODE_ENV=development BABEL_ENV=development webpack-dev-server --config=webpack/webpack.dev.config.js --progress",
     "test": "jest --coverage --passWithNoTests",
     "travis-deploy-once": "travis-deploy-once"
@@ -28,10 +29,10 @@
     "@edx/edx-bootstrap": "^2.0.1",
     "@edx/frontend-analytics": "^1.0.0",
     "@edx/frontend-auth": "^5.2.0",
-    "@edx/frontend-component-footer": "^4.1.4",
+    "@edx/frontend-component-footer": "^5.0.0",
     "@edx/frontend-component-site-header": "^2.1.4",
     "@edx/frontend-logging": "^2.0.2",
-    "@edx/paragon": "^4.1.3",
+    "@edx/paragon": "^4.2.4",
     "@fortawesome/fontawesome-svg-core": "^1.2.14",
     "@fortawesome/free-brands-svg-icons": "^5.7.2",
     "@fortawesome/free-regular-svg-icons": "^5.7.1",

src/profile/components/ProfilePage.jsx

@@ -84,7 +84,7 @@ export class ProfilePage extends React.Component {
     }
 
     return (
-      <Hyperlink className="btn btn-primary" href={this.props.configuration.VIEW_MY_RECORDS_URL} target="_blank">
+      <Hyperlink className="btn btn-primary" destination={this.props.configuration.VIEW_MY_RECORDS_URL} target="_blank">
         {this.props.intl.formatMessage(messages['profile.viewMyRecords'])}
       </Hyperlink>
     );

src/profile/components/__snapshots__/ProfilePage.test.jsx.snap

@@ -247,20 +247,11 @@ exports[`<ProfilePage /> Renders correctly in various states viewing own profile
                     onKeyDown={[Function]}
                     type="button"
                   >
-                    <span>
-                      Change
-                    </span>
+                    Change
                   </button>
                   <div
                     aria-hidden={true}
-                    aria-label={
-                      <FormattedMessage
-                        defaultMessage="Change"
-                        description="Change photo button"
-                        id="profile.profileavatar.change-button"
-                        values={Object {}}
-                      />
-                    }
+                    aria-label="Change"
                     className="dropdown-menu"
                     role="menu"
                   >
@@ -1259,20 +1250,11 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     onKeyDown={[Function]}
                     type="button"
                   >
-                    <span>
-                      Change
-                    </span>
+                    Change
                   </button>
                   <div
                     aria-hidden={true}
-                    aria-label={
-                      <FormattedMessage
-                        defaultMessage="Change"
-                        description="Change photo button"
-                        id="profile.profileavatar.change-button"
-                        values={Object {}}
-                      />
-                    }
+                    aria-label="Change"
                     className="dropdown-menu"
                     role="menu"
                   >
@@ -2073,9 +2055,9 @@ exports[`<ProfilePage /> Renders correctly in various states while saving an edi
                     className="form-group flex-shrink-0 mr-auto"
                   >
                     <button
+                      aria-disabled={false}
                       aria-live="assertive"
                       className="btn pgn__stateful-btn pgn__stateful-btn-state-pending btn-primary"
-                      disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
                       onKeyDown={[Function]}

src/profile/components/forms/Certificates.jsx

@@ -102,7 +102,7 @@ class Certificates extends React.Component {
               />
             </p>
             <div>
-              <Hyperlink href={downloadUrl} className="btn btn-outline-primary" target="_blank">
+              <Hyperlink destination={downloadUrl} className="btn btn-outline-primary" target="_blank">
                 {intl.formatMessage(messages['profile.certificates.view.certificate'])}
               </Hyperlink>
             </div>

src/profile/components/forms/ProfileAvatar.jsx

@@ -51,6 +51,8 @@ class ProfileAvatar extends React.Component {
   }
 
   renderMenuContent() {
+    const { intl } = this.props;
+
     if (this.props.isDefault) {
       return (
         <Button
@@ -69,13 +71,7 @@ class ProfileAvatar extends React.Component {
     return (
       <Dropdown
         buttonType="primary"
-        title={(
-          <FormattedMessage
-            id="profile.profileavatar.change-button"
-            defaultMessage="Change"
-            description="Change photo button"
-          />
-        )}
+        title={intl.formatMessage(messages['profile.profileavatar.change-button'])}
         menuItems={[
           (
             <button className="dropdown-item" onClick={this.onClickUpload}>

src/profile/components/forms/ProfileAvatar.messages.jsx

@@ -6,6 +6,11 @@ const messages = defineMessages({
     defaultMessage: 'profile avatar',
     description: 'Alt attribute for a profile photo',
   },
+  'profile.profileavatar.change-button': {
+    id: 'profile.profileavatar.change-button',
+    defaultMessage: 'Change',
+    description: 'Change photo button',
+  },
 });
 
 export default messages;