From 276f2a516a48796ee11dce16a427b150d1dc0d26 Mon Sep 17 00:00:00 2001
From: Chris Deery <3932645+cdeery@users.noreply.github.com>
Date: Thu, 29 Jul 2021 11:39:58 -0400
Subject: [PATCH] fix: Swap the prev and next icons in rtl (#566)

Right To Left (RTL) languages need to reverse the
direction of the icons in navigation.

Fixes: AA-891

Co-authored-by: cdeery <cdeery@edx.edu>
---
 .../sequence-navigation/SequenceNavigation.jsx    | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
index 5156f211..c1beb1bf 100644
--- a/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
+++ b/src/courseware/course/sequence/sequence-navigation/SequenceNavigation.jsx
@@ -3,7 +3,12 @@ import PropTypes from 'prop-types';
 import { Button } from '@edx/paragon';
 import { ChevronLeft, ChevronRight } from '@edx/paragon/icons';
 import classNames from 'classnames';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import {
+  injectIntl,
+  intlShape,
+  isRtl,
+  getLocale,
+} from '@edx/frontend-platform/i18n';
 
 import { useSelector } from 'react-redux';
 import { getCourseExitNavigation } from '../../course-exit';
@@ -67,16 +72,20 @@ function SequenceNavigation({
     const buttonOnClick = isLastUnit ? goToCourseExitPage : nextSequenceHandler;
     const buttonText = (isLastUnit && exitText) ? exitText : intl.formatMessage(messages.nextButton);
     const disabled = isLastUnit && !exitActive;
+    const nextArrow = isRtl(getLocale()) ? ChevronLeft : ChevronRight;
+
     return (
-      <Button variant="link" className="next-btn" onClick={buttonOnClick} disabled={disabled} iconAfter={ChevronRight}>
+      <Button variant="link" className="next-btn" onClick={buttonOnClick} disabled={disabled} iconAfter={nextArrow}>
         {shouldDisplayNotificationTrigger ? null : buttonText}
       </Button>
     );
   };
 
+  const prevArrow = isRtl(getLocale()) ? ChevronRight : ChevronLeft;
+
   return sequenceStatus === LOADED && (
     <nav className={classNames('sequence-navigation', className)} style={{ width: shouldDisplayNotificationTrigger ? '90%' : null }}>
-      <Button variant="link" className="previous-btn" onClick={previousSequenceHandler} disabled={isFirstUnit} iconBefore={ChevronLeft}>
+      <Button variant="link" className="previous-btn" onClick={previousSequenceHandler} disabled={isFirstUnit} iconBefore={prevArrow}>
         {shouldDisplayNotificationTrigger ? null : intl.formatMessage(messages.previousButton)}
       </Button>
       {renderUnitButtons()}