Handle RTL for cards

Don’t intialize cards position in reducer - position needs to be set based on isRtl.

Rename prev/next icons to right/left arrows

Make `NextPrevButtons` function RTL aware so that it puts the prev/next on the left or right based on the direction of the language.

src/components/cards/card.css

@@ -187,15 +187,26 @@
     height: 1rem;
 }
 
-.help-icon {
+[dir="ltr"] .help-icon {
     margin-right: 0.25rem;
 }
 
-.close-icon {
+[dir="rtl"] .help-icon {
     margin-left: 0.25rem;
+}
+
+.close-icon {
     transform: rotate(45deg);
 }
 
+[dir="ltr"] .close-icon {
+    margin-left: 0.25rem;
+}
+
+[dir="rtl"] .close-icon {
+    margin-right: 0.25rem;
+}
+
 .see-all {
     display: flex;
     flex-direction: row;
@@ -220,10 +231,14 @@
     text-align: center;
 }
 
-.see-all-button img {
+[dir="ltr"] .see-all-button img {
     margin-left: 0.5rem;
 }
 
+[dir="rtl"] .see-all-button img {
+    margin-right: 0.5rem;
+}
+
 .video-cover {
     width: 100%;
     height: 100%;

src/components/cards/cards.jsx

@@ -5,8 +5,8 @@ import Draggable from 'react-draggable';
 
 import styles from './card.css';
 
-import nextIcon from './icon--next.svg';
-import prevIcon from './icon--prev.svg';
+import rightArrow from './icon--next.svg';
+import leftArrow from './icon--prev.svg';
 
 import helpIcon from '../../lib/assets/icon--tutorials.svg';
 import closeIcon from '../close-button/icon--close.svg';
@@ -98,32 +98,32 @@ ImageStep.propTypes = {
     title: PropTypes.node.isRequired
 };
 
-const NextPrevButtons = ({onNextStep, onPrevStep}) => (
+const NextPrevButtons = ({isRtl, onNextStep, onPrevStep}) => (
     <Fragment>
         {onNextStep ? (
             <div>
-                <div className={styles.rightCard} />
+                <div className={isRtl ? styles.leftCard : styles.rightCard} />
                 <div
-                    className={styles.rightButton}
+                    className={isRtl ? styles.leftButton : styles.rightButton}
                     onClick={onNextStep}
                 >
                     <img
                         draggable={false}
-                        src={nextIcon}
+                        src={isRtl ? leftArrow : rightArrow}
                     />
                 </div>
             </div>
         ) : null}
         {onPrevStep ? (
             <div>
-                <div className={styles.leftCard} />
+                <div className={isRtl ? styles.rightCard : styles.leftCard} />
                 <div
-                    className={styles.leftButton}
+                    className={isRtl ? styles.rightButton : styles.leftButton}
                     onClick={onPrevStep}
                 >
                     <img
                         draggable={false}
-                        src={prevIcon}
+                        src={isRtl ? rightArrow : leftArrow}
                     />
                 </div>
             </div>
@@ -132,6 +132,7 @@ const NextPrevButtons = ({onNextStep, onPrevStep}) => (
 );
 
 NextPrevButtons.propTypes = {
+    isRtl: PropTypes.bool,
     onNextStep: PropTypes.func,
     onPrevStep: PropTypes.func
 };
@@ -201,51 +202,76 @@ PreviewsStep.propTypes = {
 };
 
 const Cards = props => {
-    if (props.activeDeckId === null) return;
+    const {
+        activeDeckId,
+        content,
+        dragging,
+        isRtl,
+        onActivateDeckFactory,
+        onCloseCards,
+        onDrag,
+        onStartDrag,
+        onEndDrag,
+        onShowAll,
+        onNextStep,
+        onPrevStep,
+        step,
+        ...posProps
+    } = props;
+    let {x, y} = posProps;
 
-    const steps = props.content[props.activeDeckId].steps;
+    if (activeDeckId === null) return;
+
+    if (x === 0 && y === 0) {
+        // initialize positions
+        x = isRtl ? -292 : 292;
+        y = 365;
+    }
+
+    const steps = content[activeDeckId].steps;
 
     return (
         <Draggable
             bounds="parent"
-            position={{x: props.x, y: props.y}}
-            onDrag={props.onDrag}
-            onStart={props.onStartDrag}
-            onStop={props.onEndDrag}
+            position={{x: x, y: y}}
+            onDrag={onDrag}
+            onStart={onStartDrag}
+            onStop={onEndDrag}
         >
             <div className={styles.cardContainer}>
                 <div className={styles.card}>
                     <CardHeader
-                        step={props.step}
+                        step={step}
                         totalSteps={steps.length}
-                        onCloseCards={props.onCloseCards}
-                        onShowAll={props.onShowAll}
+                        onCloseCards={onCloseCards}
+                        onShowAll={onShowAll}
                     />
                     <div className={styles.stepBody}>
-                        {steps[props.step].deckIds ? (
+                        {steps[step].deckIds ? (
                             <PreviewsStep
-                                content={props.content}
-                                deckIds={steps[props.step].deckIds}
-                                onActivateDeckFactory={props.onActivateDeckFactory}
-                                onShowAll={props.onShowAll}
+                                content={content}
+                                deckIds={steps[step].deckIds}
+                                onActivateDeckFactory={onActivateDeckFactory}
+                                onShowAll={onShowAll}
                             />
                         ) : (
-                            steps[props.step].video ? (
+                            steps[step].video ? (
                                 <VideoStep
-                                    dragging={props.dragging}
-                                    video={steps[props.step].video}
+                                    dragging={dragging}
+                                    video={steps[step].video}
                                 />
                             ) : (
                                 <ImageStep
-                                    image={steps[props.step].image}
-                                    title={steps[props.step].title}
+                                    image={steps[step].image}
+                                    title={steps[step].title}
                                 />
                             )
                         )}
                     </div>
                     <NextPrevButtons
-                        onNextStep={props.step < steps.length - 1 ? props.onNextStep : null}
-                        onPrevStep={props.step > 0 ? props.onPrevStep : null}
+                        isRtl={isRtl}
+                        onNextStep={step < steps.length - 1 ? onNextStep : null}
+                        onPrevStep={step > 0 ? onPrevStep : null}
                     />
                 </div>
             </div>
@@ -268,6 +294,7 @@ Cards.propTypes = {
         })
     }),
     dragging: PropTypes.bool.isRequired,
+    isRtl: PropTypes.bool,
     onActivateDeckFactory: PropTypes.func.isRequired,
     onCloseCards: PropTypes.func.isRequired,
     onDrag: PropTypes.func,

src/containers/cards.jsx

@@ -23,6 +23,7 @@ const mapStateToProps = state => ({
     step: state.scratchGui.cards.step,
     x: state.scratchGui.cards.x,
     y: state.scratchGui.cards.y,
+    isRtl: state.locales.isRtl,
     dragging: state.scratchGui.cards.dragging
 });
 

src/reducers/cards.js

@@ -16,8 +16,8 @@ const initialState = {
     content: decks,
     activeDeckId: null,
     step: 0,
-    x: 292,
-    y: 365,
+    x: 0,
+    y: 0,
     dragging: false
 };