Rename SidebarNotificationButton to NotificationTrigger

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 ? (
-          <SidebarNotificationButton
+        { isValuePropCookieSet && shouldDisplayNotificationTrigger ? (
+          <NotificationTrigger
             toggleSidebar={toggleSidebar}
             isSidebarVisible={isSidebarVisible}
           />

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(<Course {...testData} courseId={courseMetadata.id} />, { 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 () => {

src/courseware/course/NotificationIcon.jsx

@@ -11,7 +11,7 @@ import messages from './messages';
 function NotificationIcon({ intl, status, notificationColor }) {
   return (
     <div className="icon-container">
-      <Icon src={WatchOutline} className="m-0 m-auto" alt={intl.formatMessage(messages.openSidebarButton)} />
+      <Icon src={WatchOutline} className="m-0 m-auto" alt={intl.formatMessage(messages.openNotificationTrigger)} />
       {status === 'active'
         ? <span className={classNames(notificationColor, 'notification-dot')} data-testid="notification-dot" />
         : null}

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 (
     <button
-      className={classNames('sidebar-notification-btn', { active: isSidebarVisible() })}
+      className={classNames('notification-trigger-btn', { active: isSidebarVisible() })}
       type="button"
       onClick={() => { toggleSidebar(); }}
-      aria-label={intl.formatMessage(messages.openSidebarButton)}
+      aria-label={intl.formatMessage(messages.openNotificationTrigger)}
     >
       {/* REV-2130 TODO: add logic for status "active" if red dot should display */}
       <NotificationIcon status="active" notificationColor="bg-danger-500" />
@@ -20,10 +20,10 @@ function SidebarNotificationButton({ intl, toggleSidebar, isSidebarVisible }) {
   );
 }
 
-SidebarNotificationButton.propTypes = {
+NotificationTrigger.propTypes = {
   intl: intlShape.isRequired,
   toggleSidebar: PropTypes.func.isRequired,
   isSidebarVisible: PropTypes.func.isRequired,
 };
 
-export default injectIntl(SidebarNotificationButton);
+export default injectIntl(NotificationTrigger);

src/courseware/course/NotificationTrigger.scss

@@ -1,4 +1,4 @@
-.sidebar-notification-btn {
+.notification-trigger-btn {
     border: 1px solid $light-400;
     background: none;
     margin-top: 0.625rem;

src/courseware/course/NotificationTrigger.test.jsx

@@ -3,9 +3,9 @@ import { Factory } from 'rosie';
 import {
   render, initializeTestStore, screen, fireEvent,
 } from '../../setupTest';
-import SidebarNotificationButton from './SidebarNotificationButton';
+import NotificationTrigger from './NotificationTrigger';
 
-describe('Sidebar Notification Button', () => {
+describe('Notification Trigger', () => {
   let mockData;
   const courseMetadata = Factory.build('courseMetadata');
 
@@ -17,8 +17,8 @@ describe('Sidebar Notification Button', () => {
     };
   });
 
-  it('renders sidebar notification button with icon', async () => {
-    const { container } = render(<SidebarNotificationButton {...mockData} />);
+  it('renders notification trigger with icon', async () => {
+    const { container } = render(<NotificationTrigger {...mockData} />);
     expect(container).toBeInTheDocument();
     const buttonIcon = container.querySelectorAll('svg');
     expect(buttonIcon).toHaveLength(1);
@@ -33,11 +33,11 @@ describe('Sidebar Notification Button', () => {
       ...mockData,
       toggleSidebar,
     };
-    render(<SidebarNotificationButton {...testData} />);
+    render(<NotificationTrigger {...testData} />);
 
-    const sidebarOpenButton = screen.getByRole('button', { name: /Show sidebar notification/i });
-    expect(sidebarOpenButton).toBeInTheDocument();
-    fireEvent.click(sidebarOpenButton);
+    const notificationOpenButton = screen.getByRole('button', { name: /Show notification tray/i });
+    expect(notificationOpenButton).toBeInTheDocument();
+    fireEvent.click(notificationOpenButton);
     expect(toggleSidebar).toHaveBeenCalledTimes(1);
   });
 });

src/courseware/course/Sidebar.jsx

@@ -44,7 +44,7 @@ function Sidebar({
         <span>{intl.formatMessage(messages.notificationTitle)}</span>
         {shouldDisplayFullScreen
           ? null
-          : <Icon src={Close} className="close-btn" onClick={() => { toggleSidebar(); }} onKeyDown={() => { toggleSidebar(); }} role="button" tabIndex="0" alt={intl.formatMessage(messages.closeSidebarButton)} />}
+          : <Icon src={Close} className="close-btn" onClick={() => { toggleSidebar(); }} onKeyDown={() => { toggleSidebar(); }} role="button" tabIndex="0" alt={intl.formatMessage(messages.closeNotificationTrigger)} />}
       </div>
       <div className="sidebar-divider" />
       <div>{verifiedMode

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',
   },

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 = (
     <div className="sequence-container" style={{ display: 'inline-flex', flexDirection: 'row' }}>
-      <div className={classNames('sequence', { 'position-relative': shouldDisplaySidebarButton })} style={{ width: '100%' }}>
+      <div className={classNames('sequence', { 'position-relative': shouldDisplayNotificationTrigger })} style={{ width: '100%' }}>
         <SequenceNavigation
           sequenceId={sequenceId}
           unitId={unitId}
@@ -192,8 +192,8 @@ function Sequence({
           isValuePropCookieSet={isValuePropCookieSet}
         />
 
-        {isValuePropCookieSet && shouldDisplaySidebarButton ? (
-          <SidebarNotificationButton
+        {isValuePropCookieSet && shouldDisplayNotificationTrigger ? (
+          <NotificationTrigger
             toggleSidebar={toggleSidebar}
             isSidebarVisible={isSidebarVisible}
           />

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 (
       <Button variant="link" className="next-btn" onClick={buttonOnClick} disabled={disabled} iconAfter={ChevronRight}>
-        {isValuePropCookieSet && shouldDisplaySidebarButton ? null : buttonText}
+        {isValuePropCookieSet && shouldDisplayNotificationTrigger ? null : buttonText}
       </Button>
     );
   };
 
   return sequenceStatus === LOADED && (
-    <nav className={classNames('sequence-navigation', className)} style={{ width: isValuePropCookieSet && shouldDisplaySidebarButton ? '90%' : null }}>
+    <nav className={classNames('sequence-navigation', className)} style={{ width: isValuePropCookieSet && shouldDisplayNotificationTrigger ? '90%' : null }}>
       <Button variant="link" className="previous-btn" onClick={previousSequenceHandler} disabled={isFirstUnit} iconBefore={ChevronLeft}>
-        {isValuePropCookieSet && shouldDisplaySidebarButton ? null : intl.formatMessage(messages.previousButton)}
+        {isValuePropCookieSet && shouldDisplayNotificationTrigger ? null : intl.formatMessage(messages.previousButton)}
       </Button>
       {renderUnitButtons()}
       {renderNextButton()}

src/index.scss

@@ -373,7 +373,7 @@
 // Import component-specific sass files
 @import 'courseware/course/celebration/CelebrationModal.scss';
 @import 'courseware/course/Sidebar.scss';
-@import 'courseware/course/SidebarNotificationButton.scss';
+@import 'courseware/course/NotificationTrigger.scss';
 @import 'courseware/course/NotificationIcon.scss';
 @import 'shared/streak-celebration/StreakCelebrationModal.scss';
 @import 'courseware/course/content-tools/calculator/calculator.scss';