feat(onboarding): add welcome screen and onboarding tooltips (#1058)

* feat(onboarding): add welcome screen and onboarding tooltips * refactor(tooltips): fix types * refactor(welcome): use index instead of id, add useEffect * refactor(onboarding): move onboardings to separate component * refactor(onboarding): rename components, move overlays into components
ubilabs · Mar 7, 2022 · 8b3d44b · 8b3d44b
1 parent 243a6dd
commit 8b3d44b
Show file tree

Hide file tree

Showing 23 changed files with 508 additions and 12 deletions.
diff --git a/i18n/de.json b/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",

diff --git a/i18n/en.json b/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",

diff --git a/i18n/es.json b/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",

diff --git a/i18n/fr.json b/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",

diff --git a/i18n/nl.json b/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",

diff --git a/src/scripts/actions/set-welcome-screen.ts b/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;
diff --git a/src/scripts/components/main/app/app.tsx b/src/scripts/components/main/app/app.tsx
@@ -22,7 +22,7 @@ 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 Onboarding from '../welcome/welcome';
 import translations from '../../../i18n';
 import {useStoryMarkers} from '../../../hooks/use-story-markers';
 
@@ -65,6 +65,7 @@ const TranslatedApp: FunctionComponent = () => {
         <Switch>
           <Route path="/" exact>
             {logo}
+            <Onboarding />
             <DataViewer markers={markers} backgroundColor={'#10161A'} />
             <Navigation />
             <TimeSlider />

diff --git a/src/scripts/components/main/button/button.tsx b/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}>

diff --git a/src/scripts/components/main/globe-navigation/globe-navigation.tsx b/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="ui-projection"
         label={label}
         onClick={() => onProjectionHandler()}
       />
       <div
         className={styles.compass}
+        id="ui-compass"
         onClick={() => dispatch(setFlyToAction({...defaultView}))}>
         <CompassIcon />
       </div>
       <Button
         className={styles.downloadIcon}
+        id="ui-download"
         icon={DownloadIcon}
         onClick={() =>
           downloadScreenshot(

diff --git a/src/scripts/components/main/menu/menu.tsx b/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}

diff --git a/src/scripts/components/main/navigation/navigation.styl b/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)
diff --git a/src/scripts/components/main/navigation/navigation.tsx b/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="ui-stories"
         label="stories"
         link="/stories"
         icon={StoryIcon}
@@ -51,6 +53,7 @@ const Navigation: FunctionComponent = () => {
       )}
       <Button
         className={styles.button}
+        id="ui-layers"
         label="layers"
         onClick={() => dispatch(showLayerSelectorAction(true))}
         icon={LayersIcon}
@@ -59,6 +62,7 @@ const Navigation: FunctionComponent = () => {
       <Share />
       <Button
         className={styles.button}
+        id="ui-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 && (

diff --git a/src/scripts/components/main/onboarding-tooltip/onboarding-tooltip.styl b/src/scripts/components/main/onboarding-tooltip/onboarding-tooltip.styl
@@ -0,0 +1,61 @@
+@require '../../../../variables.styl'
+
+.onboardingOverlay
+  background: transparent
+
+.onboarding
+  position: absolute
+  display: flex
+  flex-direction: column
+  justify-content: space-between
+  padding: emCalc(16px)
+  min-height: emCalc(50px)
+  max-width: emCalc(170px)
+  width: fit-content
+  height: fit-content
+  border-radius: 4px
+  background-color: $darkGrey4
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 3px 4px rgba(0, 0, 0, 0.12), 0px 1px 5px rgba(0, 0, 0, 0.2)
+  color: $textWhite
+  transform: translate(-85%, 50%)
+
+.onboarding:before
+  position: absolute
+  right: emCalc(10px)
+  bottom: 100%
+  border-right: 8px solid transparent
+  border-bottom: 10px solid $darkGrey4
+  border-left: 8px solid transparent
+  content: ''
+
+.bottomTooltip
+  transform: translate(-85%, -120%)
+
+.bottomTooltip:before
+  top: 100%
+  border-top: 10px solid $darkGrey4
+  border-bottom: none
+
+.content
+  display: flex
+  justify-content: space-between
+  align-items: start
+
+.closeButton
+  margin-left: emCalc(10px)
+  width: emCalc(16px)
+  height: emCalc(16px)
+
+.navigation
+  display: flex
+  justify-content: space-between
+  margin-top: emCalc(20px)
+  text-align: left
+  font-size: emCalc(11px, 16)
+  font-family: NotesEsaBold
+
+.navigationButton
+  color: $textColor
+  text-transform: uppercase
+  font-size: emCalc(14px, 16)
+  font-family: NotesEsaBold