feat: Add SequenceBottomNavigationSlot for customizable sequence navigation (#1918)

Introduces a new plugin slot (`SequenceBottomNavigationSlot`) for extending or replacing the default bottom navigation in course sequences. Updates `Sequence` component to integrate with this slot. Includes documentation and examples for plugin usage.

Author: xitij2000

src/courseware/course/sequence/Sequence.jsx

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
+import SequenceBottomNavigationSlot from '@src/plugin-slots/SequenceBottomNavigationSlot';
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
@@ -91,27 +92,27 @@ const Sequence = ({
   };
 
   /* istanbul ignore next */
-  const nextHandler = () => {
-    logEvent('edx.ui.lms.sequence.next_selected', 'top');
+  const nextHandler = (placement) => () => {
+    logEvent('edx.ui.lms.sequence.next_selected', placement);
     handleNext();
   };
 
   /* istanbul ignore next */
-  const previousHandler = () => {
-    logEvent('edx.ui.lms.sequence.previous_selected', 'top');
+  const previousHandler = (placement) => () => {
+    logEvent('edx.ui.lms.sequence.previous_selected', placement);
     handlePrevious();
   };
 
   /* istanbul ignore next */
-  const onNavigate = (destinationUnitId) => {
-    logEvent('edx.ui.lms.sequence.tab_selected', 'top', destinationUnitId);
+  const onNavigate = (placement) => (destinationUnitId) => {
+    logEvent('edx.ui.lms.sequence.tab_selected', placement, destinationUnitId);
     handleNavigate(destinationUnitId);
   };
 
   const sequenceNavProps = {
-    nextHandler,
-    previousHandler,
-    onNavigate,
+    nextHandler: nextHandler('top'),
+    previousHandler: previousHandler('top'),
+    onNavigate: onNavigate('top'),
   };
 
   useSequenceBannerTextAlert(sequenceId);
@@ -166,20 +167,18 @@ const Sequence = ({
 
   const gated = sequence && sequence.gatedContent !== undefined && sequence.gatedContent.gated;
 
+  const unitNavigationProps = {
+    courseId,
+    sequenceId,
+    unitId,
+    onClickPrevious: previousHandler('bottom'),
+    onClickNext: nextHandler('bottom'),
+  };
+
   const renderUnitNavigation = (isAtTop) => (
     <UnitNavigation
-      courseId={courseId}
-      sequenceId={sequenceId}
-      unitId={unitId}
       isAtTop={isAtTop}
-      onClickPrevious={() => {
-        logEvent('edx.ui.lms.sequence.previous_selected', 'bottom');
-        handlePrevious();
-      }}
-      onClickNext={() => {
-        logEvent('edx.ui.lms.sequence.next_selected', 'bottom');
-        handleNext();
-      }}
+      {...unitNavigationProps}
     />
   );
 
@@ -224,7 +223,12 @@ const Sequence = ({
               isOriginalUserStaff={originalUserIsStaff}
               renderUnitNavigation={renderUnitNavigation}
             />
-            {unitHasLoaded && renderUnitNavigation(false)}
+            {unitHasLoaded && (
+            <SequenceBottomNavigationSlot
+              {...unitNavigationProps}
+              onNavigate={onNavigate('bottom')}
+            />
+            )}
           </div>
         </div>
         <RightSidebarSlot courseId={courseId} />

src/courseware/course/sequence/sequence-navigation/UnitNavigation.jsx

@@ -2,13 +2,13 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
+import { NextUnitTopNavTriggerSlot } from '@src/plugin-slots/NextUnitTopNavTriggerSlot';
 import { GetCourseExitNavigation } from '../../course-exit';
 
 import { useSequenceNavigationMetadata } from './hooks';
 import messages from './messages';
 import PreviousButton from './generic/PreviousButton';
 import NextButton from './generic/NextButton';
-import { NextUnitTopNavTriggerSlot } from '../../../../plugin-slots/NextUnitTopNavTriggerSlot';
 
 const UnitNavigation = ({
   sequenceId,

src/plugin-slots/SequenceBottomNavigationSlot/README.md

@@ -0,0 +1,65 @@
+# Sequence Bottom Navigation Slot
+
+### Slot ID: `org.openedx.frontend.learning.sequence_bottom_navigation.v1`
+
+### Props:
+* `courseId` (string) — Current course identifier
+* `sequenceId` (string) — Current sequence identifier
+* `unitId` (string) — Current unit identifier
+* `onClickNext` (function) — Handler for next navigation action
+* `onNavigate` (function) — Handler for direct unit navigation
+* `onClickPrevious` (function) — Handler for previous navigation action
+
+## Description
+
+This slot is used to replace/modify/hide the sequence navigation component that controls navigation between units within a course sequence at the bottom of the page.
+
+## Example
+
+### Default Navigation
+![Default Navigation](./default-navigation.png)
+
+### Replaced with top navigation arrows
+![Top navigation at bottom](./arrow-navigation.png)
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.learning.sequence_bottom_navigation.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_sequence_navigation',
+            type: DIRECT_PLUGIN,
+            RenderWidget: ({
+              courseId,
+              sequenceId,
+              unitId,
+              onClickNext,
+              onNavigate,
+              onClickPrevious,
+            }) => (
+              <div className="d-flex justify-content-center align-items-center">
+                <UnitNavigation
+                  courseId={courseId}
+                  sequenceId={sequenceId}
+                  unitId={unitId}
+                  isAtTop={true}
+                  onClickPrevious={onClickPrevious}
+                  onClickNext={onClickNext}
+                />
+              </div>
+            ),
+          },
+        },
+      ],
+    },
+  },
+};
+
+export default config;
+```

src/plugin-slots/SequenceBottomNavigationSlot/arrow-navigation.png

@@ -0,0 +1,47 @@
+import { UnitNavigation } from '@src/courseware/course/sequence/sequence-navigation';
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+
+export interface SequenceBottomNavigationSlotProps {
+  courseId: string;
+  sequenceId: string;
+  unitId: string;
+  onClickNext: () => void;
+  onNavigate: (unitId: string) => void;
+  onClickPrevious: () => void;
+}
+
+const SequenceBottomNavigationSlot = ({
+  courseId,
+  sequenceId,
+  unitId,
+  onClickNext,
+  onNavigate,
+  onClickPrevious,
+}: SequenceBottomNavigationSlotProps) => (
+  <PluginSlot
+    id="org.openedx.frontend.learning.sequence_bottom_navigation.v1"
+    slotOptions={{
+      mergeProps: true,
+    }}
+    pluginProps={{
+      courseId,
+      sequenceId,
+      unitId,
+      onClickNext,
+      onNavigate,
+      onClickPrevious,
+    }}
+  >
+    <UnitNavigation
+      courseId={courseId}
+      sequenceId={sequenceId}
+      unitId={unitId}
+      isAtTop={false}
+      onClickPrevious={onClickPrevious}
+      onClickNext={onClickNext}
+    />
+  </PluginSlot>
+);
+
+export default SequenceBottomNavigationSlot;