fix: rely solely on stock Paragon Card styles (#655)

openedx · Dec 19, 2022 · c38f8e8 · c38f8e8
1 parent 5ceafda
commit c38f8e8
Show file tree

Hide file tree

Showing 60 changed files with 1,459 additions and 1,330 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,15 +3,18 @@
   "description": "A microfrontend that supports the enterprise learner experience.",
   "version": "0.1.0",
   "author": "edX",
+  "browserslist": [
+    "extends @edx/browserslist-config"
+  ],
   "dependencies": {
     "@edx/brand": "npm:@edx/[email protected]",
-    "@edx/frontend-component-footer": "^10.2.4",
-    "@edx/frontend-enterprise-catalog-search": "3.0.3",
+    "@edx/frontend-component-footer": "11.6.0",
+    "@edx/frontend-enterprise-catalog-search": "3.1.5",
     "@edx/frontend-enterprise-hotjar": "1.2.0",
-    "@edx/frontend-enterprise-logistration": "^2.0.0",
+    "@edx/frontend-enterprise-logistration": "2.1.1",
     "@edx/frontend-enterprise-utils": "2.2.0",
-    "@edx/frontend-platform": "^1.15.6",
-    "@edx/paragon": "^19.15.0",
+    "@edx/frontend-platform": "2.6.2",
+    "@edx/paragon": "20.21.2",
     "@fortawesome/fontawesome-svg-core": "1.2.32",
     "@fortawesome/free-brands-svg-icons": "5.15.1",
     "@fortawesome/free-regular-svg-icons": "5.15.1",
@@ -23,50 +26,52 @@
     "color": "3.1.3",
     "connected-react-router": "6.9.2",
     "core-js": "3.7.0",
-    "dompurify": "^2.3.6",
+    "dompurify": "2.3.6",
     "email-prop-type": "1.1.7",
     "font-awesome": "4.7.0",
-    "formik": "^2.2.9",
+    "formik": "2.2.9",
     "history": "4.10.1",
     "iso-639-1": "2.1.4",
     "lodash.camelcase": "4.3.0",
-    "lodash.capitalize": "^4.2.1",
-    "lodash.clonedeep": "^4.5.0",
-    "lodash.debounce": "^4.0.8",
+    "lodash.capitalize": "4.2.1",
+    "lodash.clonedeep": "4.5.0",
+    "lodash.debounce": "4.0.8",
     "moment": "2.29.1",
     "prop-types": "15.7.2",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-fullstory": "1.4.0",
     "react-helmet": "5.2.1",
-    "react-instantsearch-dom": "^6.8.2",
-    "react-intl": "^5.21.1",
-    "react-loading-skeleton": "^3.1.0",
-    "react-parallax": "^3.3.0",
+    "react-instantsearch-dom": "6.38.1",
+    "react-parallax": "3.3.0",
     "react-redux": "7.2.2",
     "react-router": "4.3.1",
     "react-router-dom": "5.2.0",
     "react-router-hash-link": "2.3.1",
-    "react-scroll": "^1.8.4",
+    "react-scroll": "1.8.4",
     "react-transition-group": "4.4.1",
     "react-truncate": "2.4.0",
     "redux": "4.0.5",
     "reselect": "4.0.0",
-    "universal-cookie": "4.0.4"
+    "universal-cookie": "4.0.4",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
+    "@edx/browserslist-config": "1.1.1",
     "@edx/frontend-build": "11.0.2",
     "@testing-library/jest-dom": "5.11.9",
     "@testing-library/react": "11.2.7",
     "@testing-library/react-hooks": "3.7.0",
-    "@testing-library/user-event": "^13.5.0",
-    "acorn": "^8.5.0",
+    "@testing-library/user-event": "13.5.0",
+    "acorn": "8.5.0",
     "axios-mock-adapter": "1.19.0",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
+    "jest-canvas-mock": "^2.4.0",
     "match-media-mock": "0.1.1",
     "prettier": "2.2.1",
-    "react-test-renderer": "16.14.0"
+    "react-test-renderer": "16.14.0",
+    "resize-observer-polyfill": "^1.5.1"
   },
   "keywords": [],
   "license": "AGPL-3.0",

diff --git a/src/components/course/CourseRecommendationCard.jsx b/src/components/course/CourseRecommendationCard.jsx
@@ -68,15 +68,13 @@ const CourseRecommendationCard = ({ course, isPartnerRecommendation }) => {
             {course.title}
           </Truncate>
         )}
-        subtitle={
-          course.owners?.length > 0 && (
-            <p className="partner text-muted m-0">
-              <Truncate lines={1} trimWhitespace>
-                {course.owners.map(partner => partner.name).join(', ')}
-              </Truncate>
-            </p>
-          )
-        }
+        subtitle={course.owners?.length > 0 && (
+          <p className="partner text-muted m-0">
+            <Truncate lines={1} trimWhitespace>
+              {course.owners.map(partner => partner.name).join(', ')}
+            </Truncate>
+          </p>
+        )}
       />
 
       {/* Intentionally empty section so the footer is correctly spaced at the bottom of the card */}

diff --git a/src/components/course/CourseSidebarPrice.jsx b/src/components/course/CourseSidebarPrice.jsx
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import Skeleton from 'react-loading-skeleton';
+import { Skeleton } from '@edx/paragon';
 import classNames from 'classnames';
 import { AppContext } from '@edx/frontend-platform/react';
 

diff --git a/src/components/course/data/tests/hooks.test.jsx b/src/components/course/data/tests/hooks.test.jsx
@@ -92,7 +92,7 @@ const mockCourseService = {
 
 jest.mock('../service', () => ({
   __esModule: true,
-  default: () => mockCourseService,
+  default: jest.fn(() => mockCourseService),
 }));
 
 describe('useAllCourseData', () => {
@@ -109,7 +109,9 @@ describe('useAllCourseData', () => {
     activeCatalogs: [],
   };
 
-  afterEach(() => jest.clearAllMocks());
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
 
   it('returns course data and course recommendations', async () => {
     const { result, waitForNextUpdate } = renderHook(() => useAllCourseData(basicProps));

diff --git a/src/components/course/styles/CourseRecommendationCard.scss b/src/components/course/styles/CourseRecommendationCard.scss
diff --git a/src/components/course/tests/LicenseRequestedAlert.test.jsx b/src/components/course/tests/LicenseRequestedAlert.test.jsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { render, fireEvent, waitFor } from '@testing-library/react';
 import Cookies from 'universal-cookie';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
 import LicenseRequestedAlert from '../LicenseRequestedAlert';
 import { CourseContext } from '../CourseContextProvider';
 import { SubsidyRequestsContext } from '../../enterprise-subsidy-requests';
@@ -27,32 +29,34 @@ const initialLicenseRequests = [
 const LicenseRequestedAlertWrapper = ({
   subscriptions = initialSubscriptions, licenseRequests = initialLicenseRequests,
 }) => (
-  <UserSubsidyContext.Provider value={{
-    couponCodes: {
-      couponCodes: [],
-      couponCodesCount: 0,
-    },
-    subscriptionLicense: {},
-    customerAgreementConfig: {
-      subscriptions,
-    },
-  }}
-  >
-    <SubsidyRequestsContext.Provider value={
-      {
-        subsidyRequestConfiguration: null,
-        requestsBySubsidyType: {
-          [SUBSIDY_TYPE.LICENSE]: licenseRequests,
-          [SUBSIDY_TYPE.COUPON]: [],
-        },
-      }
-    }
+  <IntlProvider locale="en">
+    <UserSubsidyContext.Provider value={{
+      couponCodes: {
+        couponCodes: [],
+        couponCodesCount: 0,
+      },
+      subscriptionLicense: {},
+      customerAgreementConfig: {
+        subscriptions,
+      },
+    }}
     >
-      <CourseContext.Provider>
-        <LicenseRequestedAlert catalogList={[mockCatalogUUID]} />
-      </CourseContext.Provider>
-    </SubsidyRequestsContext.Provider>
-  </UserSubsidyContext.Provider>
+      <SubsidyRequestsContext.Provider value={
+        {
+          subsidyRequestConfiguration: null,
+          requestsBySubsidyType: {
+            [SUBSIDY_TYPE.LICENSE]: licenseRequests,
+            [SUBSIDY_TYPE.COUPON]: [],
+          },
+        }
+      }
+      >
+        <CourseContext.Provider>
+          <LicenseRequestedAlert catalogList={[mockCatalogUUID]} />
+        </CourseContext.Provider>
+      </SubsidyRequestsContext.Provider>
+    </UserSubsidyContext.Provider>
+  </IntlProvider>
 );
 /* eslint-enable react/prop-types */
 

diff --git a/src/components/dashboard/DashboardPage.jsx b/src/components/dashboard/DashboardPage.jsx
@@ -21,7 +21,7 @@ import { features } from '../../config';
 export const LICENCE_ACTIVATION_MESSAGE = 'Your license was successfully activated.';
 
 export default function DashboardPage() {
-  const { enterpriseConfig } = useContext(AppContext);
+  const { enterpriseConfig, authenticatedUser } = useContext(AppContext);
   const { subscriptionPlan, showExpirationNotifications } = useContext(UserSubsidyContext);
   const { state } = useLocation();
   const history = useHistory();
@@ -35,9 +35,6 @@ export default function DashboardPage() {
     }
   }, [history, state]);
 
-  const {
-    authenticatedUser,
-  } = useContext(AppContext);
   const userFirstName = useMemo(() => authenticatedUser?.name.split(' ').shift(), [authenticatedUser]);
   const CoursesTabComponent = (
     <>

diff --git a/src/components/dashboard/main-content/course-enrollments/course-cards/BaseCourseCard.jsx b/src/components/dashboard/main-content/course-enrollments/course-cards/BaseCourseCard.jsx
@@ -2,15 +2,14 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import {
-  Dropdown, Badge, IconButton, Icon,
+  Dropdown, Badge, IconButton, Icon, Skeleton,
 } from '@edx/paragon';
 import camelCase from 'lodash.camelcase';
 import { AppContext } from '@edx/frontend-platform/react';
 import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { getConfig } from '@edx/frontend-platform/config';
 import { MoreVert } from '@edx/paragon/icons';
-import Skeleton from 'react-loading-skeleton';
 
 import { EmailSettingsModal } from './email-settings';
 import { UnenrollModal } from './unenroll';

diff --git a/...ents/dashboard/main-content/course-enrollments/course-cards/tests/BaseCourseCard.test.jsx b/...ents/dashboard/main-content/course-enrollments/course-cards/tests/BaseCourseCard.test.jsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { AppContext } from '@edx/frontend-platform/react';
+import { Skeleton } from '@edx/paragon';
 
-import Skeleton from 'react-loading-skeleton';
 import BaseCourseCard from '../BaseCourseCard';
 import { CourseEnrollmentsContext } from '../../CourseEnrollmentsContextProvider';
 import { ToastsContext } from '../../../../../Toasts';

diff --git a/src/components/dashboard/main-content/course-enrollments/data/tests/hooks.test.js b/src/components/dashboard/main-content/course-enrollments/data/tests/hooks.test.js
@@ -23,7 +23,7 @@ const mockCourseService = {
 
 jest.mock('../../../../../course/data/service', () => ({
   __esModule: true,
-  default: () => mockCourseService,
+  default: jest.fn(() => mockCourseService),
 }));
 
 const mockRawCourseEnrollment = createRawCourseEnrollment();

diff --git a/src/components/dashboard/main-content/course-enrollments/tests/CourseEnrollments.test.jsx b/src/components/dashboard/main-content/course-enrollments/tests/CourseEnrollments.test.jsx
@@ -5,6 +5,7 @@ import {
   within,
 } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 
@@ -59,13 +60,15 @@ hooks.useCourseEnrollments.mockReturnValue({
 });
 
 const renderEnrollmentsComponent = () => render(
-  <AppContext.Provider value={{ enterpriseConfig }}>
-    <SubsidyRequestsContext.Provider value={{ isLoading: false }}>
-      <CourseEnrollmentsContextProvider>
-        <CourseEnrollments />
-      </CourseEnrollmentsContextProvider>
-    </SubsidyRequestsContext.Provider>
-  </AppContext.Provider>,
+  <IntlProvider locale="en">
+    <AppContext.Provider value={{ enterpriseConfig }}>
+      <SubsidyRequestsContext.Provider value={{ isLoading: false }}>
+        <CourseEnrollmentsContextProvider>
+          <CourseEnrollments />
+        </CourseEnrollmentsContextProvider>
+      </SubsidyRequestsContext.Provider>
+    </AppContext.Provider>
+  </IntlProvider>,
 );
 
 describe('Course enrollments', () => {

diff --git a/src/components/dashboard/sidebar/SubsidiesSummary.jsx b/src/components/dashboard/sidebar/SubsidiesSummary.jsx
@@ -79,8 +79,8 @@ const SubsidiesSummary = ({
   // TODO: Design debt, don't have cards in a card
     <>
       <SidebarCard
-        cardSectionClassNames="border-remove"
-        cardClassNames={classNames('mb-5', { 'col-8 border-remove': programProgressPage })}
+        cardSectionClassNames="border-0"
+        cardClassNames={classNames('mb-5', { 'col-8 border-0': programProgressPage })}
       >
         <div className={className} data-testid="subsidies-summary">
           {hasActiveLicenseOrLicenseRequest && (
@@ -89,7 +89,7 @@ const SubsidiesSummary = ({
               licenseRequest={licenseRequests[0]}
               courseEndDate={courseEndDate}
               programProgressPage={programProgressPage}
-              className="mb-2 border-remove"
+              className="mb-2 border-0"
             />
           )}
           {hasAssignedCodesOrCodeRequests && (
@@ -98,19 +98,19 @@ const SubsidiesSummary = ({
               couponCodeRequestsCount={couponCodeRequests.length}
               totalCoursesEligibleForCertificate={totalCoursesEligibleForCertificate}
               programProgressPage={programProgressPage}
-              className="mb-2 border-remove"
+              className="mb-2 border-0"
             />
           )}
           {canEnrollWithEnterpriseOffers && (
             <EnterpriseOffersSummaryCard
-              className="border-remove"
+              className="border-0"
               offers={enterpriseOffers}
             />
           )}
         </div>
         {searchCoursesCta && (
           <SidebarCard
-            cardClassNames="border-remove"
+            cardClassNames="border-0"
           >
             {searchCoursesCta}
           </SidebarCard>

diff --git a/src/components/dashboard/sidebar/styles/_SidebarCard.scss b/src/components/dashboard/sidebar/styles/_SidebarCard.scss
@@ -7,7 +7,3 @@
         }
     }
 }
-.border-remove {
-    border: 0 !important;
-    padding: 0 !important;
-}