Adding toggle state to Cards. Using toggle state to set the CSS state.

src/components/cards/card.css

@@ -34,6 +34,10 @@
     border-bottom-right-radius: 0.75rem;
 }
 
+.right-card-hidden {
+    display: none;
+}
+
 .left-card::after, .right-card::after {
     content: "";
     position: absolute;
@@ -62,6 +66,10 @@
     transition: all 0.25s ease;
 }
 
+.right-button-hidden {
+    display: none;
+}
+
 .left-button:hover, .right-button:hover {
     box-shadow: 0 0 0 6px $extensions-transparent;
     transform: scale(1.125);
@@ -155,6 +163,10 @@
     text-align: center;
 }
 
+.step-body-hidden {
+    display: none;
+}
+
 .step-video {
     height: 256px;
 }

src/components/cards/cards.jsx

@@ -14,7 +14,7 @@ import closeIcon from './icon--close.svg';
 import {translateVideo} from '../../lib/libraries/decks/translate-video.js';
 import {translateImage} from '../../lib/libraries/decks/translate-image.js';
 
-const CardHeader = ({onCloseCards, onToggleCards, onShowAll, totalSteps, step}) => (
+const CardHeader = ({onCloseCards, onToggleCards, onShowAll, totalSteps, step, toggle}) => (
     <div className={styles.headerButtons}>
         <div
             className={styles.allButton}
@@ -46,7 +46,7 @@ const CardHeader = ({onCloseCards, onToggleCards, onShowAll, totalSteps, step})
                 className={styles.shrinkButton}
                 onClick={onToggleCards}
             >
-                {'Shrink'}
+                {toggle ? 'Shrink' : 'Expand'}
             </div>
             <div
                 className={styles.removeButton}
@@ -115,13 +115,13 @@ ImageStep.propTypes = {
     title: PropTypes.node.isRequired
 };
 
-const NextPrevButtons = ({isRtl, onNextStep, onPrevStep}) => (
+const NextPrevButtons = ({isRtl, onNextStep, onPrevStep, toggle}) => (
     <Fragment>
         {onNextStep ? (
             <div>
-                <div className={isRtl ? styles.leftCard : styles.rightCard} />
+                <div className={isRtl ? styles.leftCard : (toggle ? styles.rightCard : styles.rightCardHidden)} />
                 <div
-                    className={isRtl ? styles.leftButton : styles.rightButton}
+                    className={isRtl ? styles.leftButton : (toggle ? styles.rightButton : styles.rightButtonHidden)}
                     onClick={onNextStep}
                 >
                     <img
@@ -151,13 +151,15 @@ const NextPrevButtons = ({isRtl, onNextStep, onPrevStep}) => (
 NextPrevButtons.propTypes = {
     isRtl: PropTypes.bool,
     onNextStep: PropTypes.func,
-    onPrevStep: PropTypes.func
+    onPrevStep: PropTypes.func,
+    toggle: PropTypes.bool.isRequired
 };
 CardHeader.propTypes = {
     onCloseCards: PropTypes.func.isRequired,
     onShowAll: PropTypes.func.isRequired,
     onToggleCards: PropTypes.func.isRequired,
     step: PropTypes.number,
+    toggle: PropTypes.bool.isRequired,
     totalSteps: PropTypes.number
 };
 
@@ -236,6 +238,7 @@ const Cards = props => {
         onNextStep,
         onPrevStep,
         step,
+        toggle,
         ...posProps
     } = props;
     let {x, y} = posProps;
@@ -266,12 +269,13 @@ const Cards = props => {
                 <div className={styles.card}>
                     <CardHeader
                         step={step}
+                        toggle={toggle}
                         totalSteps={steps.length}
                         onCloseCards={onCloseCards}
                         onShowAll={onShowAll}
                         onToggleCards={onToggleCards}
                     />
-                    <div className={styles.stepBody}>
+                    <div className={toggle ? styles.stepBody : styles.stepBodyHidden}>
                         {steps[step].deckIds ? (
                             <PreviewsStep
                                 content={content}
@@ -332,6 +336,7 @@ Cards.propTypes = {
     onStartDrag: PropTypes.func,
     onToggleCards: PropTypes.func.isRequired,
     step: PropTypes.number.isRequired,
+    toggle: PropTypes.bool.isRequired,
     x: PropTypes.number,
     y: PropTypes.number
 };

src/containers/cards.jsx

@@ -47,6 +47,7 @@ const mapStateToProps = state => ({
     content: state.scratchGui.cards.content,
     activeDeckId: state.scratchGui.cards.activeDeckId,
     step: state.scratchGui.cards.step,
+    toggle: state.scratchGui.cards.toggle,
     x: state.scratchGui.cards.x,
     y: state.scratchGui.cards.y,
     isRtl: state.locales.isRtl,

src/reducers/cards.js

@@ -19,6 +19,7 @@ const initialState = {
     step: 0,
     x: 0,
     y: 0,
+    toggle: true,
     dragging: false
 };
 
@@ -31,7 +32,7 @@ const reducer = function (state, action) {
         });
     case TOGGLE_CARDS:
         return Object.assign({}, state, {
-            visible: false
+            toggle: !state.toggle // TODO: make clearer
         });
     case VIEW_CARDS:
         return Object.assign({}, state, {

src/reducers/gui.js

@@ -107,6 +107,7 @@ const initTutorialCard = function (currentState, deckId) {
                 visible: true,
                 content: decks,
                 activeDeckId: deckId,
+                toggle: true,
                 step: 0,
                 x: 0,
                 y: 0,