Update MFE to use the new “brand-openedx” theme. (#42)

VAN-145
2020-12-14 17:21:21 +05:00
parent 40d56ea171
commit 40386645fc
27 changed files with 8582 additions and 7117 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -2,6 +2,17 @@ const { createConfig } = require('@edx/frontend-build');

 module.exports = createConfig('eslint', {
  rules: {
+    // Temporarily update the 'indent', 'template-curly-spacing' and
+    // 'no-multiple-empty-lines' rules since they are causing eslint
+    // to fail for no apparent reason since upgrading 
+    // @edx/frontend-build from v3 to v5:
+    // - TypeError: Cannot read property 'range' of null
+    'indent': [
+      'error',
+      2,
+      { 'ignoredNodes': ['TemplateLiteral', 'SwitchCase'] }
+    ],
+    'template-curly-spacing': 'off',
    'jsx-a11y/label-has-associated-control': ['error', {
      labelComponents: [],
      labelAttributes: [],
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -34,30 +34,27 @@
    "url": "https://github.com/edx/frontend-app-logistration/issues"
  },
  "dependencies": {
-    "@edx/frontend-component-header": "^2.2.0",
+    "@edx/brand": "npm:@edx/brand-openedx@1.1.0",
+    "@edx/frontend-component-header": "^2.2.1",
    "@edx/frontend-platform": "^1.8.0",
-    "@edx/paragon": "^12.0.5",
-    "@fortawesome/fontawesome-svg-core": "1.2.30",
-    "@fortawesome/free-brands-svg-icons": "5.11.2",
-    "@fortawesome/free-regular-svg-icons": "5.11.2",
-    "@fortawesome/free-solid-svg-icons": "5.11.2",
-    "@fortawesome/react-fontawesome": "0.1.11",
+    "@edx/paragon": "^12.4.1",
+    "@fortawesome/fontawesome-svg-core": "1.2.32",
+    "@fortawesome/free-brands-svg-icons": "5.15.1",
+    "@fortawesome/free-regular-svg-icons": "5.15.1",
+    "@fortawesome/free-solid-svg-icons": "5.15.1",
+    "@fortawesome/react-fontawesome": "0.1.13",
    "babel-polyfill": "6.26.0",
    "classnames": "^2.2.6",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.5",
    "extract-react-intl-messages": "^4.1.1",
    "form-urlencoded": "^4.2.1",
-    "history": "^5.0.0",
    "lodash.camelcase": "^4.3.0",
    "lodash.snakecase": "^4.1.1",
    "prop-types": "15.7.2",
-    "react": "16.12.0",
-    "react-dom": "16.12.0",
-    "react-redux": "7.1.3",
-    "react-router": "5.1.2",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "react-redux": "7.2.2",
+    "react-router": "5.2.0",
    "react-router-dom": "^5.2.0",
-    "react-test-renderer": "^16.13.1",
    "redux": "4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-logger": "^3.0.6",
@@ -67,13 +64,17 @@
    "reselect": "^4.0.0"
  },
  "devDependencies": {
-    "@edx/frontend-build": "3.0.0",
-    "babel-plugin-react-intl": "^8.2.5",
-    "codecov": "3.7.2",
-    "es-check": "5.1.1",
+    "@edx/frontend-build": "5.5.1",
+    "babel-plugin-react-intl": "^8.2.21",
+    "codecov": "3.8.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.5",
+    "es-check": "5.1.4",
    "glob": "7.1.6",
-    "husky": "3.1.0",
-    "jest": "24.9.0",
-    "reactifex": "1.1.1"
+    "history": "^5.0.0",
+    "husky": "4.3.5",
+    "jest": "26.6.3",
+    "reactifex": "1.1.1",
+    "react-test-renderer": "16.14.0"
  }
 }
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,7 @@
      <title>Logistration | edX</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+      <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />
  </head>
  <body>
    <div id="root"></div>
--- a/src/assets/favicon.ico
+++ b/src/assets/favicon.ico
--- a/src/common-components/RedirectLogistration.jsx
+++ b/src/common-components/RedirectLogistration.jsx
@@ -30,5 +30,4 @@ RedirectLogistration.propTypes = {
  redirectUrl: PropTypes.string,
 };

-
 export default RedirectLogistration;
--- a/src/forgot-password/data/sagas.js
+++ b/src/forgot-password/data/sagas.js
@@ -10,7 +10,6 @@ import {

 import { forgotPassword } from './service';

-
 // Services
 export function* handleForgotPassword(action) {
  try {
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -19,7 +19,6 @@ import ResetPasswordPage from './reset-password';
 import appMessages from './i18n';

 import './index.scss';
-import './assets/favicon.ico';

 registerIcons();

--- a/src/index.scss
+++ b/src/index.scss
@@ -1,8 +1,7 @@
-@import '~@edx/paragon/scss/edx/theme.scss';
-@import '~@edx/paragon/scss/edx/fonts.scss'; // Roboto
-
-$fa-font-path: "~font-awesome/fonts";
-@import "~font-awesome/scss/font-awesome";
+@import "~@edx/brand/paragon/fonts";
+@import "~@edx/brand/paragon/variables";
+@import "~@edx/paragon/scss/core/core";
+@import "~@edx/brand/paragon/overrides";

@import "~@edx/frontend-component-header/dist/index";

--- a/src/logistration/Alert.jsx
+++ b/src/logistration/Alert.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';

-
 function Alert(props) {
  return (
    <div className={classNames('alert d-flex align-items-start', props.className)}>
@@ -16,7 +15,6 @@ function Alert(props) {
  );
 }

-
 Alert.propTypes = {
  className: PropTypes.string,
  icon: PropTypes.node,
@@ -29,5 +27,4 @@ Alert.defaultProps = {
  children: undefined,
 };

-
 export default Alert;
--- a/src/logistration/ConfirmationAlert.jsx
+++ b/src/logistration/ConfirmationAlert.jsx
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Alert, Hyperlink } from '@edx/paragon';

-
 const ConfirmationAlert = (props) => {
  const { email } = props;

--- a/src/logistration/InstitutionLogistration.jsx
+++ b/src/logistration/InstitutionLogistration.jsx
@@ -22,7 +22,6 @@ export const RenderInstitutionButton = props => {
  return <></>;
 };

-
 const InstitutionLogistration = props => {
  const lmsBaseUrl = getConfig().LMS_BASE_URL;
  const {
--- a/src/logistration/LoginPage.jsx
+++ b/src/logistration/LoginPage.jsx
@@ -149,7 +149,7 @@ class LoginPage extends React.Component {
                First time here?<a className="ml-1" href={REGISTER_PAGE}>Create an Account.</a>
              </p>
            </div>
-            <h2 className="font-color text-left mt-2 mb-3">
+            <h2 className="text-left mt-2 mb-3">
              {intl.formatMessage(messages['logistration.login.institution.login.sign.in'])}
            </h2>
            {thirdPartyAuthContext.secondaryProviders.length ? (
--- a/src/logistration/RegistrationFailure.jsx
+++ b/src/logistration/RegistrationFailure.jsx
@@ -4,7 +4,6 @@ import { FormattedMessage } from '@edx/frontend-platform/i18n';

 import { Alert } from '@edx/paragon';

-
 const RegistrationFailureMessage = (props) => {
  const errorMessage = props.errors;
  const userErrors = [];
--- a/src/logistration/RegistrationPage.jsx
+++ b/src/logistration/RegistrationPage.jsx
@@ -324,7 +324,6 @@ RegistrationPage.defaultProps = {
  },
 };

-
 RegistrationPage.propTypes = {
  intl: intlShape.isRequired,
  getThirdPartyAuthContext: PropTypes.func.isRequired,
--- a/src/logistration/SocialAuthProviders.jsx
+++ b/src/logistration/SocialAuthProviders.jsx
@@ -7,7 +7,6 @@ import { faSignInAlt } from '@fortawesome/free-solid-svg-icons';

 import { LOGIN_PAGE, SUPPORTED_ICON_CLASSES } from '../data/constants';

-
 function SocialAuthProviders(props) {
  const { referrer, socialAuthProviders } = props;

--- a/src/logistration/SwitchContent.jsx
+++ b/src/logistration/SwitchContent.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { TransitionReplace } from '@edx/paragon';

-
 const onChildExit = (htmlNode) => {
  // If the leaving child has focus, take control and redirect it
  if (htmlNode.contains(document.activeElement)) {
@@ -21,7 +20,6 @@ const onChildExit = (htmlNode) => {
  }
 };

-
 function SwitchContent({ expression, cases, className }) {
  const getContent = (caseKey) => {
    if (cases[caseKey]) {
@@ -49,7 +47,6 @@ function SwitchContent({ expression, cases, className }) {
  );
 }

-
 SwitchContent.propTypes = {
  expression: PropTypes.string,
  cases: PropTypes.objectOf(PropTypes.node).isRequired,
@@ -61,5 +58,4 @@ SwitchContent.defaultProps = {
  className: null,
 };

-
 export default SwitchContent;
--- a/src/logistration/_style.scss
+++ b/src/logistration/_style.scss
@@ -1,8 +1,6 @@
 // ----------------------------
 // #COLORS
 // ----------------------------
-$link-blue: #23419f;
-$mfe-font-color: #23419f;
 $font-blue: #126f9a;
 $white: #FFFFFF;

@@ -16,10 +14,6 @@ $microsoft-focus-black: #000;
 $apple-black: #000000;
 $apple-focus-black: $apple-black;

-.font-color {
-  color: $mfe-font-color;
-}
-
 .login-container {
  margin: 4rem;
  line-height: 1.5;
@@ -194,7 +188,7 @@ $apple-focus-black: $apple-black;
 .field-link {
  font-weight: normal;
  display: block;
-  color: $link-blue;
+  color: $primary;
  margin-bottom: 5px;
  margin-top: 5px;
  border: none;
@@ -205,6 +199,11 @@ $apple-focus-black: $apple-black;
  letter-spacing: normal;
  text-decoration: none;
  text-shadow: none;
+
+  &:focus,
+  &:hover {
+    color: $primary;
+  }
 }

 .login-help {
--- a/src/logistration/data/sagas.js
+++ b/src/logistration/data/sagas.js
@@ -18,7 +18,6 @@ import {
  getThirdPartyAuthContextFailure,
 } from './actions';

-
 // Services
 import { getThirdPartyAuthContext, postNewUser, login } from './service';

--- a/src/logistration/data/service.js
+++ b/src/logistration/data/service.js
@@ -46,7 +46,6 @@ export async function login(creds) {
  };
 }

-
 export async function getThirdPartyAuthContext(urlParams) {
  const requestConfig = {
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
--- a/src/logistration/messages.jsx
+++ b/src/logistration/messages.jsx
@@ -1,4 +1,3 @@
-
 import { defineMessages } from '@edx/frontend-platform/i18n';

 const messages = defineMessages({
--- a/src/logistration/tests/RegistrationPage.test.jsx
+++ b/src/logistration/tests/RegistrationPage.test.jsx
@@ -13,7 +13,6 @@ import { PENDING_STATE } from '../../data/constants';
 const IntlRegistrationPage = injectIntl(RegistrationPage);
 const mockStore = configureStore();

-
 describe('./RegistrationPage.js', () => {
  const initialState = {
    logistration: {
@@ -220,7 +219,6 @@ describe('./RegistrationPage.js', () => {
    const expectedMessage = 'You\'ve successfully signed into Apple. We just need a little more information before '
                            + 'you start learning with edX.';

-
    const loginPage = mount(reduxWrapper(<IntlRegistrationPage {...props} />));
    expect(loginPage.find('#tpa-alert').find('span').text()).toEqual(expectedMessage);
  });
--- a/src/logistration/tests/snapshots/LoginPage.test.jsx.snap
+++ b/src/logistration/tests/snapshots/LoginPage.test.jsx.snap
@@ -26,7 +26,7 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
      </p>
    </div>
    <h2
-      className="font-color text-left mt-2 mb-3"
+      className="text-left mt-2 mb-3"
    >
      Sign In
    </h2>
@@ -230,7 +230,7 @@ exports[`LoginPage should match default section snapshot 1`] = `
      </p>
    </div>
    <h2
-      className="font-color text-left mt-2 mb-3"
+      className="text-left mt-2 mb-3"
    >
      Sign In
    </h2>
@@ -400,7 +400,7 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
      </p>
    </div>
    <h2
-      className="font-color text-left mt-2 mb-3"
+      className="text-left mt-2 mb-3"
    >
      Sign In
    </h2>
@@ -570,7 +570,7 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
      </p>
    </div>
    <h2
-      className="font-color text-left mt-2 mb-3"
+      className="text-left mt-2 mb-3"
    >
      Sign In
    </h2>
@@ -772,7 +772,7 @@ exports[`LoginPage should show error message on 400 1`] = `
      </p>
    </div>
    <h2
-      className="font-color text-left mt-2 mb-3"
+      className="text-left mt-2 mb-3"
    >
      Sign In
    </h2>
@@ -973,7 +973,7 @@ exports[`LoginPage should show error message on 400 on receiving link 1`] = `
      </p>
    </div>
    <h2
-      className="font-color text-left mt-2 mb-3"
+      className="text-left mt-2 mb-3"
    >
      Sign In
    </h2>
--- a/src/reset-password/ResetPasswordPage.jsx
+++ b/src/reset-password/ResetPasswordPage.jsx
@@ -14,7 +14,6 @@ import ResetSuccessMessage from './ResetSuccess';
 import ResetFailureMessage from './ResetFailure';
 import Spinner from './Spinner';

-
 const ResetPasswordPage = (props) => {
  const { intl } = props;
  const params = getQueryParameters();
--- a/src/reset-password/ResetSuccess.jsx
+++ b/src/reset-password/ResetSuccess.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Alert } from '@edx/paragon';

-
 const ResetSuccessMessage = () => {
  const loginPasswordLink = (
    <Alert.Link href="/login" className="font-weight-normal" style={{ color: '#0075b4' }}>
--- a/src/reset-password/data/sagas.js
+++ b/src/reset-password/data/sagas.js
@@ -14,7 +14,6 @@ import {

 import { validateToken, resetPassword } from './service';

-
 // Services
 export function* handleValidateToken(action) {
  try {
--- a/src/reset-password/tests/ResetPasswordPage.test.jsx
+++ b/src/reset-password/tests/ResetPasswordPage.test.jsx
@@ -16,7 +16,6 @@ jest.mock('@edx/frontend-platform/auth');
 const IntlResetPasswordPage = injectIntl(ResetPasswordPage);
 const mockStore = configureStore();

-
 describe('ResetPasswordPage', () => {
  let props = {};
  let store = {};