diff --git a/src/course-home/dates-tab/timeline/Day.jsx b/src/course-home/dates-tab/timeline/Day.jsx index 2d70c50ad2..56b18e4718 100644 --- a/src/course-home/dates-tab/timeline/Day.jsx +++ b/src/course-home/dates-tab/timeline/Day.jsx @@ -7,7 +7,9 @@ import { FormattedTime, useIntl, } from '@edx/frontend-platform/i18n'; -import { Tooltip, OverlayTrigger } from '@openedx/paragon'; +import { + Tooltip, OverlayTrigger, breakpoints, useWindowSize, +} from '@openedx/paragon'; import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -29,6 +31,7 @@ const Day = ({ const { userTimezone, } = useModel('courseHomeMeta', courseId); + const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth; const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {}; @@ -68,9 +71,13 @@ const Day = ({ const textColor = available ? 'text-primary-700' : 'text-gray-500'; return ( -
+
- + {item.assignmentType && `${item.assignmentType}: `}{title} {showDueDateTime && ( @@ -95,7 +102,11 @@ const Day = ({ )}
- {item.description &&
{item.description}
} + {item.description && ( +
+ {item.description} +
+ )}
); })} diff --git a/src/course-home/live-tab/LiveTab.test.jsx b/src/course-home/live-tab/LiveTab.test.jsx new file mode 100644 index 0000000000..71ffb4f4ba --- /dev/null +++ b/src/course-home/live-tab/LiveTab.test.jsx @@ -0,0 +1,77 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import { useSelector } from 'react-redux'; +import LiveTab from './LiveTab'; + +jest.mock('react-redux', () => ({ + useSelector: jest.fn(), +})); + +describe('LiveTab', () => { + afterEach(() => { + jest.clearAllMocks(); + document.body.innerHTML = ''; + }); + + it('renders iframe from liveModel using dangerouslySetInnerHTML', () => { + useSelector.mockImplementation((selector) => selector({ + courseHome: { courseId: 'course-v1:test+id+2024' }, + models: { + live: { + 'course-v1:test+id+2024': { + iframe: '', + }, + }, + }, + })); + + render(); + + const iframe = document.getElementById('lti-tab-embed'); + expect(iframe).toBeInTheDocument(); + expect(iframe.src).toBe('about:blank'); + }); + + it('adds classes to iframe after mount', () => { + document.body.innerHTML = ` +
+ +
+ `; + + useSelector.mockImplementation((selector) => selector({ + courseHome: { courseId: 'course-v1:test+id+2024' }, + models: { + live: { + 'course-v1:test+id+2024': { + iframe: '', + }, + }, + }, + })); + + render(); + + const iframe = document.getElementById('lti-tab-embed'); + expect(iframe.className).toContain('vh-100'); + expect(iframe.className).toContain('w-100'); + expect(iframe.className).toContain('border-0'); + }); + + it('does not throw if iframe is not found in DOM', () => { + useSelector.mockImplementation((selector) => selector({ + courseHome: { courseId: 'course-v1:test+id+2024' }, + models: { + live: { + 'course-v1:test+id+2024': { + iframe: '
No iframe here
', + }, + }, + }, + })); + + expect(() => render()).not.toThrow(); + const iframe = document.getElementById('lti-tab-embed'); + expect(iframe).toBeNull(); + }); +}); diff --git a/src/course-home/suggested-schedule-messaging/ShiftDatesAlert.jsx b/src/course-home/suggested-schedule-messaging/ShiftDatesAlert.jsx index 06edda53b6..8d0705fdc6 100644 --- a/src/course-home/suggested-schedule-messaging/ShiftDatesAlert.jsx +++ b/src/course-home/suggested-schedule-messaging/ShiftDatesAlert.jsx @@ -1,5 +1,6 @@ import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; +import classNames from 'classnames'; import PropTypes from 'prop-types'; import { useIntl } from '@edx/frontend-platform/i18n'; @@ -8,6 +9,8 @@ import { Button, Row, Col, + breakpoints, + useWindowSize, } from '@openedx/paragon'; import { resetDeadlines } from '../data'; @@ -19,6 +22,7 @@ const ShiftDatesAlert = ({ fetch, model }) => { const { courseId, } = useSelector(state => state.courseHome); + const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth; const { datesBannerInfo, @@ -39,14 +43,17 @@ const ShiftDatesAlert = ({ fetch, model }) => { return ( - + {intl.formatMessage(messages.missedDeadlines)} {' '}{intl.formatMessage(messages.shiftDatesBody)}
diff --git a/src/generic/upgrade-notification/UpgradeNotification.jsx b/src/generic/upgrade-notification/UpgradeNotification.jsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/generic/upgrade-notification/UpgradeNotification.scss b/src/generic/upgrade-notification/UpgradeNotification.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/generic/user-messages/Alert.jsx b/src/generic/user-messages/Alert.jsx index d820fad9f4..3cefde089d 100644 --- a/src/generic/user-messages/Alert.jsx +++ b/src/generic/user-messages/Alert.jsx @@ -39,6 +39,7 @@ const Alert = ({ dismissible={dismissible} onClose={onDismiss} stacked={stacked} + className={`alert-container-${type}`} > {children} diff --git a/src/generic/user-messages/Alert.scss b/src/generic/user-messages/Alert.scss new file mode 100644 index 0000000000..58f9a40ad6 --- /dev/null +++ b/src/generic/user-messages/Alert.scss @@ -0,0 +1,3 @@ +.alert-container-info .alert-message-content { + font-size: $font-size-base; +} diff --git a/src/index.scss b/src/index.scss index f4ae867e15..742507462d 100755 --- a/src/index.scss +++ b/src/index.scss @@ -446,12 +446,12 @@ .course-outline-tab .pgn__card { .pgn__card-header { display: block; - + .pgn__card-header-content { margin-top: 0; } } - + .pgn__card-header-actions { margin-left: 0; } @@ -466,8 +466,11 @@ @import "courseware/course/content-tools/calculator/calculator.scss"; @import "courseware/course/content-tools/contentTools.scss"; @import "course-home/dates-tab/timeline/Day.scss"; +@import "generic/user-messages/Alert.scss"; +@import "generic/upsell-bullets/UpsellBullets.scss"; @import "course-home/outline-tab/widgets/ProctoringInfoPanel.scss"; @import "course-home/outline-tab/widgets/FlagButton.scss"; +@import "course-home/suggested-schedule-messaging/SuggestedScheduleMessaging.scss"; @import "course-home/progress-tab/course-completion/CompletionDonutChart.scss"; @import "course-home/progress-tab/grades/course-grade/GradeBar.scss"; @import "courseware/course/course-exit/CourseRecommendations";