Reword 'toggle' to 'shrinkExpand' throughout code.

Author: evhan55

src/components/cards/card.css

@@ -114,7 +114,7 @@
     flex-direction: row;
 }
 
-.toggle-button {
+.shrink-expand-button {
     cursor: pointer;
     color: white;
     display: flex;
@@ -124,7 +124,7 @@
     padding: 0.75rem;
 }
 
-.toggle-button:hover, .all-button:hover {
+.shrink-expand-button:hover, .all-button:hover {
     background-color: $ui-black-transparent;
 }
 

src/components/cards/cards.jsx

@@ -18,8 +18,8 @@ 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, toggle}) => (
-    <div className={toggle ? styles.headerButtons : classNames(styles.headerButtons, styles.headerButtonsHidden)}>
+const CardHeader = ({onCloseCards, onShrinkExpandCards, onShowAll, totalSteps, step, expanded}) => (
+    <div className={expanded ? styles.headerButtons : classNames(styles.headerButtons, styles.headerButtonsHidden)}>
         <div
             className={styles.allButton}
             onClick={onShowAll}
@@ -47,14 +47,14 @@ const CardHeader = ({onCloseCards, onToggleCards, onShowAll, totalSteps, step, t
         ) : null}
         <div className={styles.headerButtonsRight}>
             <div
-                className={styles.toggleButton}
-                onClick={onToggleCards}
+                className={styles.shrinkExpandButton}
+                onClick={onShrinkExpandCards}
             >
                 <img
                     draggable={false}
-                    src={toggle ? shrinkIcon : expandIcon}
+                    src={expanded ? shrinkIcon : expandIcon}
                 />
-                {toggle ? 'Shrink' : 'Expand'}
+                {expanded ? 'Shrink' : 'Expand'}
             </div>
             <div
                 className={styles.removeButton}
@@ -123,13 +123,13 @@ ImageStep.propTypes = {
     title: PropTypes.node.isRequired
 };
 
-const NextPrevButtons = ({isRtl, onNextStep, onPrevStep, toggle}) => (
+const NextPrevButtons = ({isRtl, onNextStep, onPrevStep, expanded}) => (
     <Fragment>
         {onNextStep ? (
             <div>
-                <div className={toggle ? (isRtl ? styles.leftCard : styles.rightCard) : styles.hidden} />
+                <div className={expanded ? (isRtl ? styles.leftCard : styles.rightCard) : styles.hidden} />
                 <div
-                    className={toggle ? (isRtl ? styles.leftButton : styles.rightButton) : styles.hidden}
+                    className={expanded ? (isRtl ? styles.leftButton : styles.rightButton) : styles.hidden}
                     onClick={onNextStep}
                 >
                     <img
@@ -141,9 +141,9 @@ const NextPrevButtons = ({isRtl, onNextStep, onPrevStep, toggle}) => (
         ) : null}
         {onPrevStep ? (
             <div>
-                <div className={toggle ? (isRtl ? styles.rightCard : styles.leftCard) : styles.hidden} />
+                <div className={expanded ? (isRtl ? styles.rightCard : styles.leftCard) : styles.hidden} />
                 <div
-                    className={toggle ? (isRtl ? styles.rightButton : styles.leftButton) : styles.hidden}
+                    className={expanded ? (isRtl ? styles.rightButton : styles.leftButton) : styles.hidden}
                     onClick={onPrevStep}
                 >
                     <img
@@ -157,17 +157,17 @@ const NextPrevButtons = ({isRtl, onNextStep, onPrevStep, toggle}) => (
 );
 
 NextPrevButtons.propTypes = {
+    expanded: PropTypes.bool.isRequired,
     isRtl: PropTypes.bool,
     onNextStep: PropTypes.func,
-    onPrevStep: PropTypes.func,
-    toggle: PropTypes.bool.isRequired
+    onPrevStep: PropTypes.func
 };
 CardHeader.propTypes = {
+    expanded: PropTypes.bool.isRequired,
     onCloseCards: PropTypes.func.isRequired,
     onShowAll: PropTypes.func.isRequired,
-    onToggleCards: PropTypes.func.isRequired,
+    onShrinkExpandCards: PropTypes.func.isRequired,
     step: PropTypes.number,
-    toggle: PropTypes.bool.isRequired,
     totalSteps: PropTypes.number
 };
 
@@ -238,15 +238,15 @@ const Cards = props => {
         locale,
         onActivateDeckFactory,
         onCloseCards,
-        onToggleCards,
+        onShrinkExpandCards,
         onDrag,
         onStartDrag,
         onEndDrag,
         onShowAll,
         onNextStep,
         onPrevStep,
         step,
-        toggle,
+        expanded,
         ...posProps
     } = props;
     let {x, y} = posProps;
@@ -276,14 +276,14 @@ const Cards = props => {
             <div className={styles.cardContainer}>
                 <div className={styles.card}>
                     <CardHeader
+                        expanded={expanded}
                         step={step}
-                        toggle={toggle}
                         totalSteps={steps.length}
                         onCloseCards={onCloseCards}
                         onShowAll={onShowAll}
-                        onToggleCards={onToggleCards}
+                        onShrinkExpandCards={onShrinkExpandCards}
                     />
-                    <div className={toggle ? styles.stepBody : styles.hidden}>
+                    <div className={expanded ? styles.stepBody : styles.hidden}>
                         {steps[step].deckIds ? (
                             <PreviewsStep
                                 content={content}
@@ -307,8 +307,8 @@ const Cards = props => {
                         {steps[step].trackingPixel && steps[step].trackingPixel}
                     </div>
                     <NextPrevButtons
+                        expanded={expanded}
                         isRtl={isRtl}
-                        toggle={toggle}
                         onNextStep={step < steps.length - 1 ? onNextStep : null}
                         onPrevStep={step > 0 ? onPrevStep : null}
                     />
@@ -333,6 +333,7 @@ Cards.propTypes = {
         })
     }),
     dragging: PropTypes.bool.isRequired,
+    expanded: PropTypes.bool.isRequired,
     isRtl: PropTypes.bool.isRequired,
     locale: PropTypes.string.isRequired,
     onActivateDeckFactory: PropTypes.func.isRequired,
@@ -342,10 +343,9 @@ Cards.propTypes = {
     onNextStep: PropTypes.func.isRequired,
     onPrevStep: PropTypes.func.isRequired,
     onShowAll: PropTypes.func,
+    onShrinkExpandCards: PropTypes.func.isRequired,
     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

@@ -5,7 +5,7 @@ import React from 'react';
 import {
     activateDeck,
     closeCards,
-    toggleCards,
+    shrinkExpandCards,
     nextStep,
     prevStep,
     dragCard,
@@ -47,7 +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,
+    expanded: state.scratchGui.cards.expanded,
     x: state.scratchGui.cards.x,
     y: state.scratchGui.cards.y,
     isRtl: state.locales.isRtl,
@@ -62,7 +62,7 @@ const mapDispatchToProps = dispatch => ({
         dispatch(closeCards());
     },
     onCloseCards: () => dispatch(closeCards()),
-    onToggleCards: () => dispatch(toggleCards()),
+    onShrinkExpandCards: () => dispatch(shrinkExpandCards()),
     onNextStep: () => dispatch(nextStep()),
     onPrevStep: () => dispatch(prevStep()),
     onDrag: (e_, data) => dispatch(dragCard(data.x, data.y)),

src/reducers/cards.js

@@ -3,7 +3,7 @@ import analytics from '../lib/analytics';
 import decks from '../lib/libraries/decks/index.jsx';
 
 const CLOSE_CARDS = 'scratch-gui/cards/CLOSE_CARDS';
-const TOGGLE_CARDS = 'scratch-gui/cards/TOGGLE_CARDS';
+const SHRINK_EXPAND_CARDS = 'scratch-gui/cards/SHRINK_EXPAND_CARDS';
 const VIEW_CARDS = 'scratch-gui/cards/VIEW_CARDS';
 const ACTIVATE_DECK = 'scratch-gui/cards/ACTIVATE_DECK';
 const NEXT_STEP = 'scratch-gui/cards/NEXT_STEP';
@@ -19,7 +19,7 @@ const initialState = {
     step: 0,
     x: 0,
     y: 0,
-    toggle: true,
+    expanded: true,
     dragging: false
 };
 
@@ -30,9 +30,9 @@ const reducer = function (state, action) {
         return Object.assign({}, state, {
             visible: false
         });
-    case TOGGLE_CARDS:
+    case SHRINK_EXPAND_CARDS:
         return Object.assign({}, state, {
-            toggle: !state.toggle // TODO: make clearer
+            expanded: !state.expanded
         });
     case VIEW_CARDS:
         return Object.assign({}, state, {
@@ -98,8 +98,8 @@ const closeCards = function () {
     return {type: CLOSE_CARDS};
 };
 
-const toggleCards = function () {
-    return {type: TOGGLE_CARDS};
+const shrinkExpandCards = function () {
+    return {type: SHRINK_EXPAND_CARDS};
 };
 
 const nextStep = function () {
@@ -128,7 +128,7 @@ export {
     activateDeck,
     viewCards,
     closeCards,
-    toggleCards,
+    shrinkExpandCards,
     nextStep,
     prevStep,
     dragCard,

src/reducers/gui.js

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