Merge pull request #2598 from paulkaplan/update-how-to

Change "how-to" messages to "tutorial" and update the icon to lightbulb

src/components/cards/cards.jsx

@@ -8,7 +8,7 @@ import styles from './card.css';
 import nextIcon from './icon--next.svg';
 import prevIcon from './icon--prev.svg';
 
-import helpIcon from './icon--help.svg';
+import helpIcon from '../../lib/assets/icon--tutorials.svg';
 import closeIcon from '../close-button/icon--close.svg';
 
 const CardHeader = ({onCloseCards, onShowAll, totalSteps, step}) => (
@@ -22,9 +22,9 @@ const CardHeader = ({onCloseCards, onShowAll, totalSteps, step}) => (
                 src={helpIcon}
             />
             <FormattedMessage
-                defaultMessage="All How-Tos"
-                description="Title for button to return to how-to library"
-                id="gui.cards.all-how-tos"
+                defaultMessage="Tutorials"
+                description="Title for button to return to tutorials library"
+                id="gui.cards.all-tutorials"
             />
         </div>
         {totalSteps > 1 ? (

src/components/menu-bar/menu-bar.css

@@ -151,9 +151,7 @@
 }
 
 .help-icon {
-    height: 2rem;
-    width: 3rem;
-    margin-top: 0.5rem;
+    margin-right: 0.35rem;
 }
 
 .account-nav-menu, .mystuff-button {

src/components/menu-bar/menu-bar.jsx

@@ -31,6 +31,7 @@ import {
 
 import styles from './menu-bar.css';
 
+import helpIcon from '../../lib/assets/icon--tutorials.svg';
 import mystuffIcon from './icon--mystuff.png';
 import feedbackIcon from './icon--feedback.svg';
 import profileIcon from './icon--profile.png';
@@ -40,18 +41,16 @@ import languageIcon from '../language-selector/language-icon.svg';
 
 import scratchLogo from './scratch-logo.svg';
 
-import helpIcon from './icon--help.svg';
-
 const ariaMessages = defineMessages({
     language: {
         id: 'gui.menuBar.LanguageSelector',
         defaultMessage: 'language selector',
         description: 'accessibility text for the language selection menu'
     },
-    howTo: {
-        id: 'gui.menuBar.howToLibrary',
-        defaultMessage: 'How-to Library',
-        description: 'accessibility text for the how-to library button'
+    tutorials: {
+        id: 'gui.menuBar.tutorialsLibrary',
+        defaultMessage: 'Tutorials',
+        description: 'accessibility text for the tutorials button'
     }
 });
 
@@ -311,6 +310,18 @@ class MenuBar extends React.Component {
                         </div>
                     </div>
                     <Divider className={classNames(styles.divider)} />
+                    <div
+                        aria-label={this.props.intl.formatMessage(ariaMessages.tutorials)}
+                        className={classNames(styles.menuBarItem, styles.hoverable)}
+                        onClick={this.props.onOpenTipLibrary}
+                    >
+                        <img
+                            className={styles.helpIcon}
+                            src={helpIcon}
+                        />
+                        <FormattedMessage {...ariaMessages.tutorials} />
+                    </div>
+                    <Divider className={classNames(styles.divider)} />
                     <div className={classNames(styles.menuBarItem)}>
                         <MenuBarItemTooltip id="title-field">
                             <input
@@ -381,16 +392,6 @@ class MenuBar extends React.Component {
                     </a>
                 </div>
                 <div className={styles.accountInfoWrapper}>
-                    <div
-                        aria-label={this.props.intl.formatMessage(ariaMessages.howTo)}
-                        className={classNames(styles.menuBarItem, styles.hoverable)}
-                        onClick={this.props.onOpenTipLibrary}
-                    >
-                        <img
-                            className={styles.helpIcon}
-                            src={helpIcon}
-                        />
-                    </div>
                     <MenuBarItemTooltip id="mystuff">
                         <div
                             className={classNames(

src/containers/tips-library.jsx

@@ -20,9 +20,9 @@ import {
 
 const messages = defineMessages({
     tipsLibraryTitle: {
-        defaultMessage: 'How-Tos',
-        description: 'Heading for the help/how-tos library',
-        id: 'gui.tipsLibrary.howtos'
+        defaultMessage: 'Choose a Tutorial',
+        description: 'Heading for the help/tutorials library',
+        id: 'gui.tipsLibrary.tutorials'
     }
 });
 

test/integration/how-tos.test.js

@@ -27,7 +27,7 @@ describe('Working with the how-to library', () => {
         await loadUri(uri);
         await clickXpath('//button[@title="tryit"]');
         await clickText('Costumes');
-        await clickXpath('//*[@aria-label="How-to Library"]');
+        await clickXpath('//*[@aria-label="Tutorials"]');
         await clickText('Getting Started'); // Modal should close
         // Make sure YouTube video on first card appears
         await findByXpath('//div[contains(@class, "step-video")]');