From 8b3d44b3d9a3d5693b088ffb2aefb59aabf8cba3 Mon Sep 17 00:00:00 2001 From: Kat <45818654+KatvonRivia@users.noreply.github.com> Date: Mon, 7 Mar 2022 15:49:31 +0100 Subject: [PATCH] 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 --- i18n/de.json | 13 ++ i18n/en.json | 13 ++ i18n/es.json | 13 ++ i18n/fr.json | 13 ++ i18n/nl.json | 13 ++ src/scripts/actions/set-welcome-screen.ts | 15 ++ src/scripts/components/main/app/app.tsx | 3 +- src/scripts/components/main/button/button.tsx | 5 +- .../globe-navigation/globe-navigation.tsx | 3 + src/scripts/components/main/menu/menu.tsx | 15 +- .../main/navigation/navigation.styl | 8 +- .../components/main/navigation/navigation.tsx | 11 +- .../onboarding-tooltip.styl | 61 ++++++++ .../onboarding-tooltip/onboarding-tooltip.tsx | 143 ++++++++++++++++++ .../components/main/overlay/overlay.tsx | 6 +- src/scripts/components/main/share/share.styl | 2 +- src/scripts/components/main/share/share.tsx | 1 + .../main/welcome-screen/welcome-screen.styl | 62 ++++++++ .../main/welcome-screen/welcome-screen.tsx | 62 ++++++++ .../components/main/welcome/welcome.tsx | 29 ++++ src/scripts/reducers/index.ts | 4 +- src/scripts/reducers/welcome-screen.ts | 20 +++ src/scripts/selectors/welcome-screen.ts | 5 + 23 files changed, 508 insertions(+), 12 deletions(-) create mode 100644 src/scripts/actions/set-welcome-screen.ts create mode 100644 src/scripts/components/main/onboarding-tooltip/onboarding-tooltip.styl create mode 100644 src/scripts/components/main/onboarding-tooltip/onboarding-tooltip.tsx create mode 100644 src/scripts/components/main/welcome-screen/welcome-screen.styl create mode 100644 src/scripts/components/main/welcome-screen/welcome-screen.tsx create mode 100644 src/scripts/components/main/welcome/welcome.tsx create mode 100644 src/scripts/reducers/welcome-screen.ts create mode 100644 src/scripts/selectors/welcome-screen.ts diff --git a/i18n/de.json b/i18n/de.json index 6be996def..35acd8cf8 100644 --- 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 index 56f7b3b98..a2f624679 100644 --- 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 index 6b2846b6a..7d83eba38 100644 --- 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 index 322be86ff..c783a6654 100644 --- 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 index b5397dcf1..e6cd54c01 100644 --- 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 new file mode 100644 index 000000000..9ebe6fb0c --- /dev/null +++ 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 index 7b260d603..97bd7fe6a 100644 --- 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 = () => { {logo} + diff --git a/src/scripts/components/main/button/button.tsx b/src/scripts/components/main/button/button.tsx index 41be586fb..1aa3cdb6a 100644 --- 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) => void; } @@ -21,6 +22,7 @@ const Button: FunctionComponent = ({ icon: Icon, disabled = false, className = '', + id, hideLabelOnMobile, onClick }) => { @@ -34,6 +36,7 @@ const Button: FunctionComponent = ({ return link ? ( disabled && event.preventDefault()} + id={id} className={classes} to={link}> {Icon && } @@ -44,7 +47,7 @@ const Button: FunctionComponent = ({ )} ) : ( -