Merge pull request #4039 from rschamp/on-click-logo

Add onClick prop for the logo

src/components/gui/gui.jsx

@@ -96,6 +96,7 @@ const GUIComponent = props => {
         onActivateCostumesTab,
         onActivateSoundsTab,
         onActivateTab,
+        onClickLogo,
         onExtensionButtonClick,
         onRequestCloseBackdropLibrary,
         onRequestCloseCostumeLibrary,
@@ -205,6 +206,7 @@ const GUIComponent = props => {
                     renderLogin={renderLogin}
                     showComingSoon={showComingSoon}
                     onClickAccountNav={onClickAccountNav}
+                    onClickLogo={onClickLogo}
                     onCloseAccountNav={onCloseAccountNav}
                     onLogOut={onLogOut}
                     onOpenRegistration={onOpenRegistration}
@@ -370,6 +372,7 @@ GUIComponent.propTypes = {
     onActivateSoundsTab: PropTypes.func,
     onActivateTab: PropTypes.func,
     onClickAccountNav: PropTypes.func,
+    onClickLogo: PropTypes.func,
     onCloseAccountNav: PropTypes.func,
     onExtensionButtonClick: PropTypes.func,
     onLogOut: PropTypes.func,

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

@@ -45,6 +45,10 @@
     vertical-align: middle;
 }
 
+.scratch-logo.clickable {
+    cursor: pointer;
+}
+
 .language-icon {
     height:  1.5rem;
     vertical-align: middle;

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

@@ -298,14 +298,15 @@ class MenuBar extends React.Component {
                 <div className={styles.mainMenu}>
                     <div className={styles.fileGroup}>
                         <div className={classNames(styles.menuBarItem)}>
-                            <a href="https://scratch.mit.edu">
-                                <img
-                                    alt="Scratch"
-                                    className={styles.scratchLogo}
-                                    draggable={false}
-                                    src={scratchLogo}
-                                />
-                            </a>
+                            <img
+                                alt="Scratch"
+                                className={classNames(styles.scratchLogo, {
+                                    [styles.clickable]: typeof this.props.onClickLogo !== 'undefined'
+                                })}
+                                draggable={false}
+                                src={scratchLogo}
+                                onClick={this.props.onClickLogo}
+                            />
                         </div>
                         <div
                             className={classNames(styles.menuBarItem, styles.hoverable, styles.languageMenu)}
@@ -715,6 +716,7 @@ MenuBar.propTypes = {
     onClickFile: PropTypes.func,
     onClickLanguage: PropTypes.func,
     onClickLogin: PropTypes.func,
+    onClickLogo: PropTypes.func,
     onClickNew: PropTypes.func,
     onClickRemix: PropTypes.func,
     onClickSave: PropTypes.func,

src/playground/render-gui.jsx

@@ -7,6 +7,10 @@ import GUI from '../containers/gui.jsx';
 import HashParserHOC from '../lib/hash-parser-hoc.jsx';
 import TitledHOC from '../lib/titled-hoc.jsx';
 
+const onClickLogo = () => {
+    window.location = 'https://scratch.mit.edu';
+};
+
 /*
  * Render the GUI playground. This is a separate function because importing anything
  * that instantiates the VM causes unsupported browsers to crash
@@ -40,6 +44,7 @@ export default appTarget => {
             showPreviewInfo
             backpackHost={backpackHost}
             canSave={false}
+            onClickLogo={onClickLogo}
         />,
         appTarget);
 };

test/integration/menu-bar.test.js

@@ -56,4 +56,12 @@ describe('Menu bar settings', () => {
         await clickXpath('//button[@title="Try It"]');
         await findByXpath('//div[span[div[span[text()="Share"]]] and @data-tip="tooltip"]');
     });
+
+    test('Logo should be clickable', async () => {
+        await loadUri(uri);
+        await clickXpath('//button[@title="Try It"]');
+        await clickXpath('//img[@alt="Scratch"]');
+        const currentUrl = await driver.getCurrentUrl();
+        await expect(currentUrl).toEqual('https://scratch.mit.edu/');
+    });
 });