feat: increased font-size for Progress page

Author: vladislavkeblysh

src/course-home/progress-tab/certificate-status/CertificateStatus.jsx

@@ -1,10 +1,13 @@
 import { useEffect } from 'react';
+import classNames from 'classnames';
 import { useDispatch } from 'react-redux';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { FormattedDate, FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 
-import { Button, Card } from '@openedx/paragon';
+import {
+  Button, Card, breakpoints, useWindowSize,
+} from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform';
 import { useContextId } from '../../../data/hooks';
 import { useModel } from '../../../generic/model-store';
@@ -29,6 +32,8 @@ const CertificateStatus = () => {
     userTimezone,
   } = useModel('courseHomeMeta', courseId);
 
+  const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
+
   const {
     certificateData,
     end,
@@ -244,7 +249,7 @@ const CertificateStatus = () => {
         <ProgressCertificateStatusSlot courseId={courseId}>
           <div id={`${certCase}_certificate_status`}>
             <Card.Header title={header} />
-            <Card.Section className="small text-gray-700">
+            <Card.Section className={classNames('text-gray-700', { small: !wideScreen })}>
               {body}
             </Card.Section>
             <Card.Footer>

src/course-home/progress-tab/course-completion/CourseCompletion.jsx

@@ -1,24 +1,30 @@
 import React from 'react';
+import classNames from 'classnames';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { breakpoints, useWindowSize } from '@openedx/paragon';
 
 import CompletionDonutChart from './CompletionDonutChart';
 import messages from './messages';
 
-const CourseCompletion = ({ intl }) => (
-  <section className="text-dark-700 mb-4 rounded raised-card p-4">
-    <div className="row w-100 m-0">
-      <div className="col-12 col-sm-6 col-md-7 p-0">
-        <h2>{intl.formatMessage(messages.courseCompletion)}</h2>
-        <p className="small">
-          {intl.formatMessage(messages.completionBody)}
-        </p>
-      </div>
-      <div className="col-12 col-sm-6 col-md-5 mt-sm-n3 p-0 text-center">
-        <CompletionDonutChart />
+const CourseCompletion = ({ intl }) => {
+  const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
+
+  return (
+    <section className={classNames('text-dark-700 mb-4 rounded raised-card p-4', { small: !wideScreen })}>
+      <div className="row w-100 m-0">
+        <div className="col-12 col-sm-6 col-md-7 p-0">
+          <h2>{intl.formatMessage(messages.courseCompletion)}</h2>
+          <p>
+            {intl.formatMessage(messages.completionBody)}
+          </p>
+        </div>
+        <div className="col-12 col-sm-6 col-md-5 mt-sm-n3 p-0 text-center">
+          <CompletionDonutChart />
+        </div>
       </div>
-    </div>
-  </section>
-);
+    </section>
+  );
+};
 
 CourseCompletion.propTypes = {
   intl: intlShape.isRequired,

src/course-home/progress-tab/course-completion/CourseCompletion.scss

@@ -0,0 +1,3 @@
+.course-completion-text {
+  font-size: 18px;
+}

src/course-home/progress-tab/credit-information/CreditInformation.jsx

@@ -84,7 +84,7 @@ const CreditInformation = ({ intl }) => {
         requirementStatus = (<>{intl.formatMessage(messages.upcoming)} <Icon src={WatchFilled} className="text-gray-500 d-inline-flex align-bottom" /></>);
     }
     requirements.push((
-      <div className="row w-100 m-0 small" key={`requirement-${requirement.order}`}>
+      <div className="row w-100 m-0" key={`requirement-${requirement.order}`}>
         <p className="font-weight-bold">
           {requirement.namespace === 'grade'
             ? `${intl.formatMessage(messages.minimumGrade, { minGrade: Number(requirement.criteria.minGrade) * 100 })}:`
@@ -100,7 +100,7 @@ const CreditInformation = ({ intl }) => {
   return (
     <>
       <h3 className="h4 col-12 p-0">{intl.formatMessage(messages.requirementsHeader)}</h3>
-      <p className="small">{eligibilityStatus}</p>
+      <p>{eligibilityStatus}</p>
       {requirements}
     </>
   );

src/course-home/progress-tab/grades/course-grade/CourseGrade.jsx

@@ -1,5 +1,7 @@
 import React from 'react';
+import classNames from 'classnames';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { breakpoints, useWindowSize } from '@openedx/paragon';
 import { useContextId } from '../../../../data/hooks';
 
 import { useModel } from '../../../../generic/model-store';
@@ -14,6 +16,8 @@ import messages from '../messages';
 const CourseGrade = ({ intl }) => {
   const courseId = useContextId();
 
+  const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
+
   const {
     creditCourseRequirements,
     gradesFeatureIsFullyLocked,
@@ -37,7 +41,7 @@ const CourseGrade = ({ intl }) => {
               ? intl.formatMessage(messages.gradesAndCredit)
               : intl.formatMessage(messages.grades)}
             </h2>
-            <p className="small">
+            <p className={classNames({ small: !wideScreen })}>
               {intl.formatMessage(messages.courseGradeBody)}
             </p>
           </div>

src/course-home/progress-tab/grades/detailed-grades/DetailedGrades.jsx

@@ -1,10 +1,13 @@
 import React from 'react';
+import classNames from 'classnames';
 
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Blocked } from '@openedx/paragon/icons';
-import { Icon, Hyperlink } from '@openedx/paragon';
+import {
+  Icon, Hyperlink, breakpoints, useWindowSize,
+} from '@openedx/paragon';
 import { useContextId } from '../../../../data/hooks';
 import { useModel } from '../../../../generic/model-store';
 import { showUngradedAssignments } from '../../utils';
@@ -25,6 +28,7 @@ const DetailedGrades = ({ intl }) => {
     gradesFeatureIsPartiallyLocked,
     sectionScores,
   } = useModel('progress', courseId);
+  const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
 
   const hasSectionScores = sectionScores.length > 0;
   const emptyTableMsg = showUngradedAssignments()
@@ -84,10 +88,12 @@ const DetailedGrades = ({ intl }) => {
         <DetailedGradesTable />
       )}
       {!hasSectionScores && (
-        <p className="small">{intl.formatMessage(emptyTableMsg)}</p>
+        <p className={classNames({ small: !wideScreen })}>
+          {intl.formatMessage(emptyTableMsg)}
+        </p>
       )}
       {overviewTabUrl && !showUngradedAssignments() && (
-        <p className="x-small m-0">
+        <p className={classNames('m-0', { small: !wideScreen })}>
           <FormattedMessage
             id="progress.ungradedAlert"
             defaultMessage="For progress on ungraded aspects of the course, view your {outlineLink}."

src/course-home/progress-tab/grades/grade-summary/DroppableAssignmentFootnote.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
+import classNames from 'classnames';
 
 import PropTypes from 'prop-types';
+import { breakpoints, useWindowSize } from '@openedx/paragon';
 
 import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { useContextId } from '../../../../data/hooks';
@@ -13,12 +15,14 @@ const DroppableAssignmentFootnote = ({ footnotes, intl }) => {
   const {
     gradesFeatureIsFullyLocked,
   } = useModel('progress', courseId);
+  const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
+
   return (
     <>
       <span id="grade-summary-footnote-label" className="sr-only">{intl.formatMessage(messages.footnotesTitle)}</span>
       <ul className="list-unstyled mt-2">
         {footnotes.map((footnote, index) => (
-          <li id={`${footnote.id}-footnote`} key={footnote.id} className="x-small mt-1">
+          <li id={`${footnote.id}-footnote`} key={footnote.id} className={classNames('mt-1', { small: !wideScreen })}>
             <sup>{index + 1}</sup>
             <FormattedMessage
               id="progress.footnotes.droppableAssignments"

src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.jsx

@@ -1,8 +1,12 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Icon, OverlayTrigger, Tooltip } from '@openedx/paragon';
+import {
+  Icon, IconButton, OverlayTrigger, Popover, breakpoints, useWindowSize,
+} from '@openedx/paragon';
 import { Blocked, InfoOutline } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { useContextId } from '../../../../data/hooks';
 
 import messages from '../messages';
@@ -14,24 +18,42 @@ const GradeSummaryHeader = ({ allOfSomeAssignmentTypeIsLocked }) => {
   const {
     gradesFeatureIsFullyLocked,
   } = useModel('progress', courseId);
+  const [showTooltip, setShowTooltip] = useState(false);
+  const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Escape') {
+      setShowTooltip(false);
+    }
+  };
 
   return (
     <div className="row w-100 m-0 align-items-center">
       <h3 className="h4 mb-3 mr-1">{intl.formatMessage(messages.gradeSummary)}</h3>
       <OverlayTrigger
-        trigger="hover"
+        trigger="click"
         placement="top"
+        show={showTooltip}
         overlay={(
-          <Tooltip>
-            {intl.formatMessage(messages.gradeSummaryTooltipBody)}
-          </Tooltip>
+          <Popover>
+            <Popover.Content
+              className={classNames('text-dark-700', { small: !wideScreen })}
+            >
+              {intl.formatMessage(messages.gradeSummaryTooltipBody)}
+            </Popover.Content>
+          </Popover>
         )}
       >
-        <Icon
+        <IconButton
+          onClick={() => { setShowTooltip(!showTooltip); }}
+          onBlur={() => { setShowTooltip(false); }}
+          onKeyDown={handleKeyDown}
           alt={intl.formatMessage(messages.gradeSummaryTooltipAlt)}
           src={InfoOutline}
+          iconAs={Icon}
           className="mb-3"
           size="sm"
+          disabled={gradesFeatureIsFullyLocked}
         />
       </OverlayTrigger>
       {!gradesFeatureIsFullyLocked && allOfSomeAssignmentTypeIsLocked && (

src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.test.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {
+  render, screen, waitFor,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useSelector } from 'react-redux';
+import { IntlProvider } from 'react-intl';
+
+import GradeSummaryHeader from './GradeSummaryHeader';
+import { useModel } from '../../../../generic/model-store';
+import messages from '../messages';
+
+jest.mock('react-redux', () => ({
+  useSelector: jest.fn(),
+}));
+
+jest.mock('../../../../generic/model-store', () => ({
+  useModel: jest.fn(),
+}));
+
+describe('GradeSummaryHeader', () => {
+  beforeEach(() => {
+    useSelector.mockImplementation((selector) => selector({
+      courseHome: { courseId: 'test-course-id' },
+    }));
+    useModel.mockReturnValue({ gradesFeatureIsFullyLocked: false });
+  });
+
+  const renderComponent = (props = {}) => {
+    render(
+      <IntlProvider locale="en" messages={messages}>
+        <GradeSummaryHeader
+          intl={{ formatMessage: jest.fn((msg) => msg.defaultMessage) }}
+          allOfSomeAssignmentTypeIsLocked={false}
+          {...props}
+        />
+      </IntlProvider>,
+    );
+  };
+
+  it('opens and closes the tooltip when Escape is pressed', async () => {
+    renderComponent();
+
+    const iconButton = screen.getByRole('button', {
+      name: messages.gradeSummaryTooltipAlt.defaultMessage,
+    });
+
+    userEvent.click(iconButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(messages.gradeSummaryTooltipBody.defaultMessage)).toBeVisible();
+    });
+
+    userEvent.keyboard('{Escape}');
+
+    await waitFor(() => {
+      expect(screen.queryByText(messages.gradeSummaryTooltipBody.defaultMessage)).not.toBeInTheDocument();
+    });
+  });
+});

src/course-home/progress-tab/index.scss

@@ -0,0 +1,6 @@
+@import "course-completion/CompletionDonutChart.scss";
+@import "course-completion/CourseCompletion.scss";
+
+@import "grades/course-grade/GradeBar.scss";
+
+@import "related-links/RelatedLinks.scss";

src/course-home/progress-tab/related-links/RelatedLinks.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
+import classNames from 'classnames';
 
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Hyperlink } from '@openedx/paragon';
+import { Hyperlink, breakpoints, useWindowSize } from '@openedx/paragon';
 import { useContextId } from '../../../data/hooks';
 
 import messages from './messages';
@@ -15,6 +16,7 @@ const RelatedLinks = ({ intl }) => {
     org,
     tabs,
   } = useModel('courseHomeMeta', courseId);
+  const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
 
   const { administrator } = getAuthenticatedUser();
   const logLinkClicked = (linkName) => {
@@ -32,19 +34,21 @@ const RelatedLinks = ({ intl }) => {
   const datesTabUrl = datesTab && datesTab.url;
 
   return (
-    <section className="mb-4 x-small">
-      <h3 className="h4">{intl.formatMessage(messages.relatedLinks)}</h3>
-      <ul className="pl-4">
+    <section className="mb-4 x-small related-links">
+      <h3 className={classNames('h4', { 'related-links-title': wideScreen })}>
+        {intl.formatMessage(messages.relatedLinks)}
+      </h3>
+      <ul className="pl-4 related-links-list">
         {datesTabUrl && (
-        <li>
+        <li className={classNames({ 'related-links-list-item': wideScreen })}>
           <Hyperlink destination={datesTabUrl} onClick={() => logLinkClicked('dates')}>
             {intl.formatMessage(messages.datesCardLink)}
           </Hyperlink>
           <p>{intl.formatMessage(messages.datesCardDescription)}</p>
         </li>
         )}
         {overviewTabUrl && (
-        <li>
+        <li className={classNames({ 'related-links-list-item': wideScreen })}>
           <Hyperlink destination={overviewTabUrl} onClick={() => logLinkClicked('course_outline')}>
             {intl.formatMessage(messages.outlineCardLink)}
           </Hyperlink>

src/course-home/progress-tab/related-links/RelatedLinks.scss

@@ -0,0 +1,9 @@
+.related-links {
+  .related-links-title {
+    font-size: 20px;
+  }
+
+  .related-links-list .related-links-list-item {
+    font-size: 18px;
+  }
+}