diff --git a/src/courseware/course/Course.jsx b/src/courseware/course/Course.jsx
index a4506641..01c94281 100644
--- a/src/courseware/course/Course.jsx
+++ b/src/courseware/course/Course.jsx
@@ -14,7 +14,7 @@ import Sequence from './sequence';
import { CelebrationModal, shouldCelebrateOnSectionLoad } from './celebration';
import ContentTools from './content-tools';
import CourseBreadcrumbs from './CourseBreadcrumbs';
-import SidebarNotificationButton from './SidebarNotificationButton';
+import NotificationTrigger from './NotificationTrigger';
import CourseSock from '../../generic/course-sock';
import { useModel } from '../../generic/model-store';
@@ -66,7 +66,7 @@ function Course({
// the browser console and refresh: document.cookie = 'value_prop_cookie=true';
const isValuePropCookieSet = Cookies.get('value_prop_cookie') === 'true';
- const shouldDisplaySidebarButton = useWindowSize().width >= responsiveBreakpoints.small.minWidth;
+ const shouldDisplayNotificationTrigger = useWindowSize().width >= responsiveBreakpoints.small.minWidth;
const [sidebarVisible, setSidebar] = useState(true);
const isSidebarVisible = () => sidebarVisible && setSidebar;
@@ -102,8 +102,8 @@ function Course({
mmp2p={MMP2P}
/>
- { isValuePropCookieSet && shouldDisplaySidebarButton ? (
-
diff --git a/src/courseware/course/Course.test.jsx b/src/courseware/course/Course.test.jsx
index efca929a..85a747f6 100644
--- a/src/courseware/course/Course.test.jsx
+++ b/src/courseware/course/Course.test.jsx
@@ -87,7 +87,7 @@ describe('Course', () => {
expect(screen.getByRole('button', { name: 'Learn About Verified Certificates' })).toBeInTheDocument();
});
- it('displays sidebar notification button', async () => {
+ it('displays notification trigger', async () => {
const toggleSidebar = jest.fn();
const isSidebarVisible = jest.fn();
@@ -106,10 +106,10 @@ describe('Course', () => {
};
render(, { store: testStore });
- const sidebarOpenButton = screen.getByRole('button', { name: /Show sidebar notification/i });
+ const notificationOpenButton = screen.getByRole('button', { name: /Show notification tray/i });
expect(getSpy).toBeCalledWith(cookieName);
- expect(sidebarOpenButton).toBeInTheDocument();
+ expect(notificationOpenButton).toBeInTheDocument();
});
it('displays offer and expiration alert', async () => {
diff --git a/src/courseware/course/NotificationIcon.jsx b/src/courseware/course/NotificationIcon.jsx
index 7f982ed1..da8f0112 100644
--- a/src/courseware/course/NotificationIcon.jsx
+++ b/src/courseware/course/NotificationIcon.jsx
@@ -11,7 +11,7 @@ import messages from './messages';
function NotificationIcon({ intl, status, notificationColor }) {
return (
-
+
{status === 'active'
?
: null}
diff --git a/src/courseware/course/SidebarNotificationButton.jsx b/src/courseware/course/NotificationTrigger.jsx
similarity index 69%
rename from src/courseware/course/SidebarNotificationButton.jsx
rename to src/courseware/course/NotificationTrigger.jsx
index 9f35eea2..875592a9 100644
--- a/src/courseware/course/SidebarNotificationButton.jsx
+++ b/src/courseware/course/NotificationTrigger.jsx
@@ -6,13 +6,13 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import NotificationIcon from './NotificationIcon';
import messages from './messages';
-function SidebarNotificationButton({ intl, toggleSidebar, isSidebarVisible }) {
+function NotificationTrigger({ intl, toggleSidebar, isSidebarVisible }) {
return (
{verifiedMode
diff --git a/src/courseware/course/messages.js b/src/courseware/course/messages.js
index 98c3c9ff..425455e7 100644
--- a/src/courseware/course/messages.js
+++ b/src/courseware/course/messages.js
@@ -6,13 +6,13 @@ const messages = defineMessages({
defaultMessage: 'Sidebar notification',
description: 'Sidebar notification section container',
},
- openSidebarButton: {
- id: 'sidebar.open.button',
- defaultMessage: 'Show sidebar notification',
- description: 'Button to open the sidebar and show notifications',
+ openNotificationTrigger: {
+ id: 'notification.open.button',
+ defaultMessage: 'Show notification tray',
+ description: 'Button to open the notification tray and show notifications',
},
- closeSidebarButton: {
- id: 'sidebar.close.button',
+ closeNotificationTrigger: {
+ id: 'notification.close.button',
defaultMessage: 'Close sidebar notification',
description: 'Button for the learner to close the sidebar',
},
diff --git a/src/courseware/course/sequence/Sequence.jsx b/src/courseware/course/sequence/Sequence.jsx
index 5b7d3de2..10b981cb 100644
--- a/src/courseware/course/sequence/Sequence.jsx
+++ b/src/courseware/course/sequence/Sequence.jsx
@@ -23,7 +23,7 @@ import messages from './messages';
import { SequenceNavigation, UnitNavigation } from './sequence-navigation';
import SequenceContent from './SequenceContent';
import Sidebar from '../Sidebar';
-import SidebarNotificationButton from '../SidebarNotificationButton';
+import NotificationTrigger from '../NotificationTrigger';
/** [MM-P2P] Experiment */
import { isMobile } from '../../../experiments/mm-p2p/utils';
@@ -49,7 +49,7 @@ function Sequence({
const sequenceStatus = useSelector(state => state.courseware.sequenceStatus);
const specialExamsEnabledWaffleFlag = useSelector(state => state.courseware.specialExamsEnabledWaffleFlag);
const proctoredExamsEnabledWaffleFlag = useSelector(state => state.courseware.proctoredExamsEnabledWaffleFlag);
- const shouldDisplaySidebarButton = useWindowSize().width < responsiveBreakpoints.small.minWidth;
+ const shouldDisplayNotificationTrigger = useWindowSize().width < responsiveBreakpoints.small.minWidth;
const handleNext = () => {
const nextIndex = sequence.unitIds.indexOf(unitId) + 1;
@@ -167,7 +167,7 @@ function Sequence({
const defaultContent = (
-
+
- {isValuePropCookieSet && shouldDisplaySidebarButton ? (
-
diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
index 7eb52461..c7237081 100644
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
@@ -40,7 +40,7 @@ function SequenceNavigation({
sequence.gatedContent !== undefined && sequence.gatedContent.gated
) : undefined;
- const shouldDisplaySidebarButton = useWindowSize().width < responsiveBreakpoints.small.minWidth;
+ const shouldDisplayNotificationTrigger = useWindowSize().width < responsiveBreakpoints.small.minWidth;
const renderUnitButtons = () => {
if (isLocked) {
@@ -70,15 +70,15 @@ function SequenceNavigation({
const disabled = isLastUnit && !exitActive;
return (
);
};
return sequenceStatus === LOADED && (
-