tour: add new tour component

src/toolbar/Toolbar.tsx

@@ -9,13 +9,17 @@ import BluetoothButton from './buttons/bluetooth/BluetoothButton';
 import ReplButton from './buttons/repl/ReplButton';
 import RunButton from './buttons/run/RunButton';
 import StopButton from './buttons/stop/StopButton';
+import TourButton from './buttons/tour/TourButton';
 
 import './toolbar.scss';
 
+// matches ID in tour component
+const bluetoothButtonId = 'pb-toolbar-bluetooth-button';
+const runButtonId = 'pb-toolbar-run-button';
+const tourButtonId = 'pb-toolbar-tour-button';
+
 const Toolbar: React.VFC = () => {
     const flashButtonId = useId();
-    const bluetoothButtonId = useId();
-    const runButtonId = useId();
     const stopButtonId = useId();
     const replButtonId = useId();
 
@@ -29,6 +33,9 @@ const Toolbar: React.VFC = () => {
                 <StopButton id={stopButtonId} />
                 <ReplButton id={replButtonId} />
             </ButtonGroup>
+            <ButtonGroup className="pb-toolbar-group pb-align-right">
+                <TourButton id={tourButtonId} />
+            </ButtonGroup>
         </UtilsToolbar>
     );
 };

src/toolbar/buttons/tour/TourButton.test.tsx

@@ -0,0 +1,23 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+import { cleanup } from '@testing-library/react';
+import React from 'react';
+import { testRender } from '../../../../test';
+import { HubRuntimeState } from '../../../hub/reducers';
+import { tourStart } from '../../../tour/actions';
+import TourButton from './TourButton';
+
+afterEach(() => {
+    cleanup();
+});
+
+it('should dispatch action when clicked', async () => {
+    const [user, button, dispatch] = testRender(<TourButton id="test-tour-button" />, {
+        hub: { runtime: HubRuntimeState.Running },
+    });
+
+    await user.click(button.getByRole('button', { name: 'Tour Pybricks Code' }));
+
+    expect(dispatch).toHaveBeenCalledWith(tourStart());
+});

src/toolbar/buttons/tour/TourButton.tsx

@@ -0,0 +1,29 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2020-2022 The Pybricks Authors
+
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { appName } from '../../../app/constants';
+import { tourStart } from '../../../tour/actions';
+import ActionButton, { ActionButtonProps } from '../../ActionButton';
+import { useI18n } from './i18n';
+import icon from './icon.svg';
+
+type TourButtonProps = Pick<ActionButtonProps, 'id'>;
+
+const TourButton: React.VoidFunctionComponent<TourButtonProps> = ({ id }) => {
+    const i18n = useI18n();
+    const dispatch = useDispatch();
+
+    return (
+        <ActionButton
+            id={id}
+            label={i18n.translate('label', { appName })}
+            tooltip={i18n.translate('tooltip', { appName })}
+            icon={icon}
+            onAction={() => dispatch(tourStart())}
+        />
+    );
+};
+
+export default TourButton;

src/toolbar/buttons/tour/i18n.ts

@@ -0,0 +1,12 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
+import { useI18n as useShopifyI18n } from '@shopify/react-i18n';
+import type { TypedI18n } from '../../../i18n';
+import type translations from './translations/en.json';
+
+export function useI18n(): TypedI18n<typeof translations> {
+    // istanbul ignore next: babel-loader rewrites this line
+    const [i18n] = useShopifyI18n();
+    return i18n;
+}

src/toolbar/buttons/tour/icon.svg

@@ -0,0 +1 @@
+<svg width="50" height="50" version="1.1" viewBox="0 0 26.458 26.458" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 -270.54)"><path d="m1.9234 276.13c-1.0655 0-1.9234 0.85655-1.9234 1.9213v10.588c0 1.0648 0.85787 1.9213 1.9234 1.9213h3.3755c1.0655 0 1.9234-0.85653 1.9234-1.9213v-0.47646h12.014v0.47646c0 1.0648 0.85787 1.9213 1.9234 1.9213h3.3755c1.0655 0 1.9234-0.85653 1.9234-1.9213v-10.588c0-1.0648-0.85786-1.9213-1.9234-1.9213h-3.3755c-5.4826 0.0358-11.132 0.0125-15.861 0zm0.49609 2.4123h21.644v9.617h-2.3978v-2.3916h-2.0691v-0.89193h-0.74311v0.89193h-1.664v-0.89193h-0.74001v0.89193h-1.664v-0.89193h-0.74001v0.89193h-1.664v-0.89193h-0.74311v0.89193h-1.664v-0.89193h-0.74104v0.89193h-1.664v-0.89193h-0.68316v0.89193h-2.0691v2.3916h-2.3978v-3.2835z" fill="#fcfcfc"/><ellipse cx="8.4499" cy="281.03" rx="1.7076" ry="1.7064" fill="#fff"/><ellipse cx="18.033" cy="281.03" rx="1.7076" ry="1.7064" fill="#fff"/></g></svg>

src/toolbar/buttons/tour/translations/en.json

@@ -0,0 +1,4 @@
+{
+    "label": "Tour {appName}",
+    "tooltip": "Take a quick tour of {appName}"
+}