feat(onboarding): add welcome screen and onboarding tooltips

i18n/de.json

@@ -15,6 +15,18 @@
   "more": "Mehr",
   "2D": "2D",
   "3D": "3D",
+  "welcomeContent": "# Lorem ipsum dolor sit amet.\n\n## Ipsum nulla ea maiores sit numquam maxime aliquam expedita. Minus provident, illum consequatur tempora natus est iusto ipsum dignissimos consequuntur! Numquam, ullam.\n\nIpsum nulla ea maiores sit numquam maxime aliquam expedita. Minus provident, illum consequatur tempora natus est iusto ipsum dignissimos consequuntur!",
+  "startTour": "Give me a tour",
+  "cancelTour": "Let's go exploring",
+  "next": "next",
+  "back": "back",
+  "tooltip-stories": "Check out stories",
+  "tooltip-layers": "Try out different layers",
+  "tooltip-share": "Share a link",
+  "tooltip-menu": "Menu for more information",
+  "tooltip-projection": "Switch to 2D",
+  "tooltip-compass": "Reset position",
+  "tooltip-download": "Download screenshot of your globes",
   "presenter": "Präsentation",
   "presenterMode": "Präsentations Modus",
   "showcase": "Show Case",
@@ -34,6 +46,7 @@
   "info": "Weitere Informationen",
   "about": "Über das Projekt",
   "attributions": "Credits",
+  "restartOnboarding": "Restart onboarding",
   "EsaWebsite": "ESA Website",
   "CCIWebsite": "CCI Website",
   "github": "Github",

i18n/en.json

@@ -15,6 +15,18 @@
   "more": "More",
   "2D": "2D",
   "3D": "3D",
+  "welcomeContent": "# Lorem ipsum dolor sit amet.\n\n## Ipsum nulla ea maiores sit numquam maxime aliquam expedita. Minus provident, illum consequatur tempora natus est iusto ipsum dignissimos consequuntur! Numquam, ullam.\n\nIpsum nulla ea maiores sit numquam maxime aliquam expedita. Minus provident, illum consequatur tempora natus est iusto ipsum dignissimos consequuntur!",
+  "startTour": "Give me a tour",
+  "cancelTour": "Let's go exploring",
+  "next": "next",
+  "back": "back",
+  "tooltip-stories": "Check out stories",
+  "tooltip-layers": "Try out different layers",
+  "tooltip-share": "Share a link",
+  "tooltip-menu": "Menu for more information",
+  "tooltip-projection": "Switch to 2D",
+  "tooltip-compass": "Reset position",
+  "tooltip-download": "Download screenshot of your globes",
   "presenter": "Presentation",
   "presenterMode": "Presenter Mode",
   "showcase": "Show Case",
@@ -34,6 +46,7 @@
   "info": "More Information",
   "about": "About this project",
   "attributions": "Credits",
+  "restartOnboarding": "Restart onboarding",
   "EsaWebsite": "ESA Website",
   "CCIWebsite": "CCI Website",
   "github": "Github",

i18n/es.json

@@ -15,6 +15,18 @@
   "more": "Más",
   "2D": "2D",
   "3D": "3D",
+  "welcomeContent": "# Lorem ipsum dolor sit amet.\n\n## Ipsum nulla ea maiores sit numquam maxime aliquam expedita. Minus provident, illum consequatur tempora natus est iusto ipsum dignissimos consequuntur! Numquam, ullam.\n\nIpsum nulla ea maiores sit numquam maxime aliquam expedita. Minus provident, illum consequatur tempora natus est iusto ipsum dignissimos consequuntur!",
+  "startTour": "Give me a tour",
+  "cancelTour": "Let's go exploring",
+  "next": "next",
+  "back": "back",
+  "tooltip-stories": "Check out stories",
+  "tooltip-layers": "Try out different layers",
+  "tooltip-share": "Share a link",
+  "tooltip-menu": "Menu for more information",
+  "tooltip-projection": "Switch to 2D",
+  "tooltip-compass": "Reset position",
+  "tooltip-download": "Download screenshot of your globes",
   "presenter": "Presentación",
   "presenterMode": "Modo presentador",
   "showcase": "Vitrina",
@@ -34,6 +46,7 @@
   "info": "Más información",
   "about": "Acerca de este proyecto",
   "attributions": "Credits",
+  "restartOnboarding": "Restart onboarding",
   "EsaWebsite": "El sitio web de ESA",
   "CCIWebsite": "El sitio web de CCI",
   "github": "Github",

i18n/fr.json

@@ -15,6 +15,18 @@
   "more": "Plus",
   "2D": "2D",
   "3D": "3D",
+  "welcomeContent": "# Lorem ipsum dolor sit amet.\n\n## Ipsum nulla ea maiores sit numquam maxime aliquam expedita. Minus provident, illum consequatur tempora natus est iusto ipsum dignissimos consequuntur! Numquam, ullam.\n\nIpsum nulla ea maiores sit numquam maxime aliquam expedita. Minus provident, illum consequatur tempora natus est iusto ipsum dignissimos consequuntur!",
+  "startTour": "Give me a tour",
+  "cancelTour": "Let's go exploring",
+  "next": "next",
+  "back": "back",
+  "tooltip-stories": "Check out stories",
+  "tooltip-layers": "Try out different layers",
+  "tooltip-share": "Share a link",
+  "tooltip-menu": "Menu for more information",
+  "tooltip-projection": "Switch to 2D",
+  "tooltip-compass": "Reset position",
+  "tooltip-download": "Download screenshot of your globes",
   "presenter": "Présentation",
   "presenterMode": "Mode présentateur",
   "showcase": "Vitrine",
@@ -34,6 +46,7 @@
   "info": "Plus d'informations",
   "about": "À propos du projet",
   "attributions": "Credits",
+  "restartOnboarding": "Restart onboarding",
   "EsaWebsite": "Site de l'ESA",
   "CCIWebsite": "Site de l'ICC",
   "github": "Github",

i18n/nl.json

@@ -15,6 +15,18 @@
   "more": "Meer",
   "2D": "2D",
   "3D": "3D",
+  "welcomeContent": "# Lorem ipsum dolor sit amet.## \n\nIpsum nulla ea maiores sit numquam maxime aliquam expedita. Minus provident, illum consequatur tempora natus est iusto ipsum dignissimos consequuntur! Numquam, ullam.\n\nIpsum nulla ea maiores sit numquam maxime aliquam expedita. Minus provident, illum consequatur tempora natus est iusto ipsum dignissimos consequuntur!",
+  "startTour": "Give me a tour",
+  "cancelTour": "Let's go exploring",
+  "next": "next",
+  "back": "back",
+  "tooltip-stories": "Check out stories",
+  "tooltip-layers": "Try out different layers",
+  "tooltip-share": "Share a link",
+  "tooltip-menu": "Menu for more information",
+  "tooltip-projection": "Switch to 2D",
+  "tooltip-compass": "Reset position",
+  "tooltip-download": "Download screenshot of your globes",
   "presenter": "Presentatie",
   "presenterMode": "Presentatie modus",
   "showcase": "Show case",
@@ -34,6 +46,7 @@
   "info": "Meer informatie",
   "about": "Over dit project",
   "attributions": "Credits",
+  "restartOnboarding": "Restart onboarding",
   "EsaWebsite": "ESA website",
   "CCIWebsite": "CCI website",
   "github": "Github",

src/scripts/actions/set-welcome-screen.ts

@@ -0,0 +1,15 @@
+export const SET_WELCOME_SCREEN = 'SET_WELCOME_SCREEN';
+
+export interface SetWelcomeScreenAction {
+  type: typeof SET_WELCOME_SCREEN;
+  welcomeScreen: boolean;
+}
+
+const setWelcomeScreenAction = (
+  welcomeScreen: boolean
+): SetWelcomeScreenAction => ({
+  type: SET_WELCOME_SCREEN,
+  welcomeScreen
+});
+
+export default setWelcomeScreenAction;

src/scripts/components/main/app/app.styl

@@ -39,10 +39,19 @@
   z-index: 4
   fill: $textWhite
 
+.welcomeOverlay
+  background: linear-gradient(90deg, rgba(16, 22, 26, 0.85) 0%, rgba(16, 22, 26, 0.81) 48%, rgba(16, 22, 26, 0.79) 50%, rgba(16, 22, 26, 0.75) 52%, rgba(16, 22, 26, 0.2) 60%, rgba(16, 22, 26, 0.1) 70%, rgba(16, 22, 26, 0) 100%)
+
+.onboardingOverlay
+  background: transparent
+
 @media screen and (max-width: 480px)
   :global(path.hideText)
     display: none
 
   .logo
     overflow: hidden
     width: 150px
+
+  .welcomeOverlay
+    background: linear-gradient(rgba(16, 22, 26, 0.85) 0%, rgba(16, 22, 26, 0.81) 48%, rgba(16, 22, 26, 0.79) 50%, rgba(16, 22, 26, 0.75) 52%, rgba(16, 22, 26, 0.2) 60%, rgba(16, 22, 26, 0.1) 70%, rgba(16, 22, 26, 0) 100%)

src/scripts/components/main/app/app.tsx

@@ -1,4 +1,4 @@
-import React, {FunctionComponent} from 'react';
+import React, {FunctionComponent, useState} from 'react';
 import {Provider as StoreProvider, useSelector} from 'react-redux';
 import {IntlProvider} from 'react-intl';
 import {HashRouter as Router, Switch, Route, Link} from 'react-router-dom';
@@ -22,6 +22,10 @@ import ShowcaseSelector from '../../stories/showcase-selector/showcase-selector'
 import DataViewer from '../data-viewer/data-viewer';
 import Tracking from '../tracking/tracking';
 import AboutProjectOverlay from '../about-project-overlay/about-project-overlay';
+import WelcomeScreen from '../welcome-screen/welcome-screen';
+import Overlay from '../overlay/overlay';
+import Onboarding from '../onboarding/onboarding';
+import {welcomeScreenSelector} from '../../../selectors/welcome-screen';
 
 import translations from '../../../i18n';
 import {useStoryMarkers} from '../../../hooks/use-story-markers';
@@ -50,6 +54,8 @@ const App: FunctionComponent = () => (
 const TranslatedApp: FunctionComponent = () => {
   const markers = useStoryMarkers();
   const language = useSelector(languageSelector);
+  const showWelcomeScreen = useSelector(welcomeScreenSelector);
+  const [onboardingCount, setOnboardingCount] = useState<number | null>(null);
 
   const logo = (
     <Link to="/about">
@@ -65,6 +71,27 @@ const TranslatedApp: FunctionComponent = () => {
         <Switch>
           <Route path="/" exact>
             {logo}
+            {showWelcomeScreen ? (
+              <Overlay
+                className={styles.welcomeOverlay}
+                showCloseButton={false}>
+                <WelcomeScreen
+                  onStartOnboarding={() => setOnboardingCount(1)}
+                />
+              </Overlay>
+            ) : (
+              onboardingCount && (
+                <Overlay
+                  className={styles.onboardingOverlay}
+                  showCloseButton={false}>
+                  <Onboarding
+                    id={onboardingCount}
+                    onPageChange={(id: number) => setOnboardingCount(id)}
+                    onClose={() => setOnboardingCount(null)}
+                  />
+                </Overlay>
+              )
+            )}
             <DataViewer markers={markers} backgroundColor={'#10161A'} />
             <Navigation />
             <TimeSlider />

src/scripts/components/main/button/button.tsx

@@ -11,6 +11,7 @@ interface Props {
   link?: string;
   disabled?: boolean;
   className?: string;
+  id?: string;
   hideLabelOnMobile?: boolean;
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
@@ -21,6 +22,7 @@ const Button: FunctionComponent<Props> = ({
   icon: Icon,
   disabled = false,
   className = '',
+  id,
   hideLabelOnMobile,
   onClick
 }) => {
@@ -34,6 +36,7 @@ const Button: FunctionComponent<Props> = ({
   return link ? (
     <Link
       onClick={event => disabled && event.preventDefault()}
+      id={id}
       className={classes}
       to={link}>
       {Icon && <Icon />}
@@ -44,7 +47,7 @@ const Button: FunctionComponent<Props> = ({
       )}
     </Link>
   ) : (
-    <button disabled={disabled} className={classes} onClick={onClick}>
+    <button disabled={disabled} className={classes} id={id} onClick={onClick}>
       {Icon && <Icon />}
       {label && (
         <span className={styles.label}>

src/scripts/components/main/globe-navigation/globe-navigation.tsx

@@ -45,16 +45,19 @@ const GlobeNavigation: FunctionComponent<Props> = ({
     <div className={styles.globeNavigation}>
       <Button
         className={styles.projection}
+        id="projection"
         label={label}
         onClick={() => onProjectionHandler()}
       />
       <div
         className={styles.compass}
+        id="compass"
         onClick={() => dispatch(setFlyToAction({...defaultView}))}>
         <CompassIcon />
       </div>
       <Button
         className={styles.downloadIcon}
+        id="download"
         icon={DownloadIcon}
         onClick={() =>
           downloadScreenshot(

src/scripts/components/main/menu/menu.tsx

@@ -14,15 +14,19 @@ import {WindowsIcon} from '../icons/windows-icon';
 import {AnalyticsIcon} from '../icons/analytics-icon';
 import {LinuxIcon} from '../icons/linux-icon';
 import {AppleIcon} from '../icons/apple-icon';
-import config from '../../../config/main';
 import {Ubilabslogo} from '../icons/ubilabs-logo';
 import Attributions from '../attributions/attributions';
 import TrackingToggle from '../tracking-toggle/tracking-toggle';
 import {FeedbackIcon} from '../icons/feedback-icon';
+import config from '../../../config/main';
 
 import styles from './menu.styl';
 
-const Menu: FunctionComponent = () => {
+interface Props {
+  onRestartOnboarding: () => void;
+}
+
+const Menu: FunctionComponent<Props> = ({onRestartOnboarding}) => {
   const [overlayType, setOverlayType] = useState<string | null>(null);
   // @ts-ignore - injected via webpack's define plugin
   const version = INFO_VERSION;
@@ -120,6 +124,13 @@ const Menu: FunctionComponent = () => {
                   onClick={() => setOverlayType('about')}
                 />
               </li>
+              <li className={styles.menuListItem}>
+                <Button
+                  className={styles.menuButton}
+                  label={'restartOnboarding'}
+                  onClick={() => onRestartOnboarding()}
+                />
+              </li>
               <li className={styles.menuListItem}>
                 <Button
                   className={styles.menuButton}

src/scripts/components/main/navigation/navigation.styl

@@ -18,8 +18,8 @@
   svg
     filter: drop-shadow(3px 2px 2px rgba(16, 22, 26, 0.2))
 
-  .button, &:not(:first-child)
-    padding-left: emCalc(30px)
+  .button, &:not(:last-child)
+    padding-right: emCalc(30px)
 
 .tagsButton
   padding-left: emCalc(8px)
@@ -39,5 +39,5 @@
 
 @media screen and (max-width: 480px)
   .button
-    &:not(:first-child)
-      padding-left: emCalc(15px)
+    &:not(:last-child)
+      padding-right: emCalc(15px)

src/scripts/components/main/navigation/navigation.tsx

@@ -15,6 +15,7 @@ import {languageSelector} from '../../../selectors/language';
 import LanguageBubble from '../language-bubble/language-bubble';
 import SelectedTags from '../../stories/selected-tags/selected-tags';
 import {selectedTagsSelector} from '../../../selectors/story/selected-tags';
+import setWelcomeScreenAction from '../../../actions/set-welcome-screen';
 import config from '../../../config/main';
 
 import styles from './navigation.styl';
@@ -34,6 +35,7 @@ const Navigation: FunctionComponent = () => {
     <div className={styles.navigation}>
       <Button
         className={styles.button}
+        id="stories"
         label="stories"
         link="/stories"
         icon={StoryIcon}
@@ -51,6 +53,7 @@ const Navigation: FunctionComponent = () => {
       )}
       <Button
         className={styles.button}
+        id="layers"
         label="layers"
         onClick={() => dispatch(showLayerSelectorAction(true))}
         icon={LayersIcon}
@@ -59,6 +62,7 @@ const Navigation: FunctionComponent = () => {
       <Share />
       <Button
         className={styles.button}
+        id="menu"
         icon={MenuIcon}
         onClick={() => setShowMenu(true)}
         hideLabelOnMobile
@@ -77,7 +81,12 @@ const Navigation: FunctionComponent = () => {
       )}
       {showMenu && (
         <Overlay onClose={() => setShowMenu(false)}>
-          <Menu />
+          <Menu
+            onRestartOnboarding={() => {
+              setShowMenu(false);
+              dispatch(setWelcomeScreenAction(true));
+            }}
+          />
         </Overlay>
       )}
       {selectedTags.length > 0 && showTags && (