feat(story): setup new story type

package.json

@@ -60,6 +60,7 @@
     "react-markdown": "^8.0.3",
     "react-redux": "^8.0.5",
     "react-router-dom": "^5.1.2",
+    "react-scroll-parallax": "^3.4.5",
     "react-youtube": "^7.13.1",
     "redux": "^4.0.5",
     "redux-logger": "^3.0.6",

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

@@ -11,7 +11,6 @@
   src: url('../../../../../assets/fonts/NotesEsaBol.otf')
 
 :global(html), :global(body), :global(#app)
-  overflow: hidden
   margin: 0
   height: 100%
   background-color: $black

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

@@ -28,6 +28,7 @@ import {useStoryMarkers} from '../../../hooks/use-story-markers';
 import {embedElementsSelector} from '../../../selectors/embed-elements-selector';
 
 import styles from './app.module.styl';
+import PilotStory from '../../stories/pilot-story/pilot-story';
 
 // create matomo tracking instance
 const matomoInstance = createInstance({
@@ -85,6 +86,9 @@ const TranslatedApp: FunctionComponent = () => {
           <Route path={['/showcase/:storyIds', '/showcase']} exact>
             <ShowcaseSelector />
           </Route>
+          <Route path={['/stories/pilot/:slideIndex']} exact>
+            <PilotStory />
+          </Route>
           <Route
             path={[
               '/stories/:storyId/:slideIndex',

src/scripts/components/main/icons/expand-icon.tsx

@@ -0,0 +1,12 @@
+import React, {FunctionComponent} from 'react';
+
+export const ExpandIcon: FunctionComponent = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M8.00006 10.0961L10.7629 7.33328L10.0501 6.63714L8.00006 8.68714L5.95006 6.63714L5.23726 7.33328L8.00006 10.0961ZM8.00118 14.3333C7.12523 14.3333 6.30187 14.167 5.53111 13.8346C4.76035 13.5021 4.08989 13.051 3.51975 12.4811C2.94959 11.9112 2.49822 11.241 2.16563 10.4706C1.83304 9.7002 1.66675 8.87702 1.66675 8.00106C1.66675 7.1251 1.83297 6.30175 2.16541 5.53099C2.49786 4.76023 2.94903 4.08977 3.51891 3.51963C4.08881 2.94947 4.75898 2.4981 5.5294 2.16551C6.29981 1.83292 7.12299 1.66663 7.99895 1.66663C8.8749 1.66663 9.69826 1.83285 10.469 2.16529C11.2398 2.49774 11.9102 2.9489 12.4804 3.51879C13.0505 4.08869 13.5019 4.75885 13.8345 5.52928C14.1671 6.29969 14.3334 7.12287 14.3334 7.99883C14.3334 8.87478 14.1672 9.69814 13.8347 10.4689C13.5023 11.2397 13.0511 11.9101 12.4812 12.4803C11.9113 13.0504 11.2412 13.5018 10.4707 13.8344C9.70032 14.167 8.87714 14.3333 8.00118 14.3333ZM8.00006 13.3333C9.48895 13.3333 10.7501 12.8166 11.7834 11.7833C12.8167 10.7499 13.3334 9.48883 13.3334 7.99994C13.3334 6.51105 12.8167 5.24994 11.7834 4.21661C10.7501 3.18328 9.48895 2.66661 8.00006 2.66661C6.51118 2.66661 5.25006 3.18328 4.21673 4.21661C3.1834 5.24994 2.66673 6.51105 2.66673 7.99994C2.66673 9.48883 3.1834 10.7499 4.21673 11.7833C5.25006 12.8166 6.51118 13.3333 8.00006 13.3333Z" />
+  </svg>
+);

src/scripts/components/main/icons/globe-icon.tsx

@@ -0,0 +1,12 @@
+import React, {FunctionComponent} from 'react';
+
+export const GlobeIcon: FunctionComponent = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.0016 21.5C10.6877 21.5 9.45268 21.2506 8.29655 20.752C7.1404 20.2533 6.13472 19.5765 5.2795 18.7217C4.42427 17.8669 3.74721 16.8616 3.24833 15.706C2.74944 14.5504 2.5 13.3156 2.5 12.0017C2.5 10.6877 2.74933 9.45268 3.248 8.29655C3.74667 7.1404 4.42342 6.13472 5.27825 5.2795C6.1331 4.42427 7.13834 3.74721 8.29398 3.24833C9.44959 2.74944 10.6844 2.5 11.9983 2.5C13.3122 2.5 14.5473 2.74933 15.7034 3.248C16.8596 3.74667 17.8652 4.42342 18.7205 5.27825C19.5757 6.1331 20.2527 7.13834 20.7516 8.29398C21.2505 9.44959 21.5 10.6844 21.5 11.9983C21.5 13.3122 21.2506 14.5473 20.752 15.7034C20.2533 16.8596 19.5765 17.8652 18.7217 18.7205C17.8669 19.5757 16.8616 20.2527 15.706 20.7516C14.5504 21.2505 13.3156 21.5 12.0016 21.5ZM11 19.95V18C10.45 18 9.97914 17.8041 9.58748 17.4125C9.19581 17.0208 8.99998 16.55 8.99998 16V15L4.19998 10.2C4.14998 10.5 4.10414 10.8 4.06248 11.1C4.02081 11.4 3.99998 11.7 3.99998 12C3.99998 14.0166 4.66248 15.7833 5.98748 17.3C7.31248 18.8166 8.98331 19.7 11 19.95ZM17.9 17.4C18.2333 17.0333 18.5333 16.6375 18.8 16.2125C19.0666 15.7875 19.2875 15.3458 19.4625 14.8875C19.6375 14.4291 19.7708 13.9583 19.8625 13.475C19.9541 12.9916 20 12.5 20 12C20 10.3618 19.5474 8.86573 18.6423 7.51173C17.7372 6.15774 16.5231 5.18075 15 4.58075V4.99998C15 5.54998 14.8041 6.02081 14.4125 6.41248C14.0208 6.80414 13.55 6.99998 13 6.99998H11V8.99998C11 9.28331 10.9041 9.52081 10.7125 9.71248C10.5208 9.90414 10.2833 9.99998 9.99998 9.99998H7.99998V12H14C14.2833 12 14.5208 12.0958 14.7125 12.2875C14.9041 12.4791 15 12.7166 15 13V16H16C16.4333 16 16.825 16.1291 17.175 16.3875C17.525 16.6458 17.7666 16.9833 17.9 17.4Z" />
+  </svg>
+);

src/scripts/components/stories/pilot-story/components/button/button.module.styl

@@ -0,0 +1,40 @@
+@require '../../../../../../variables.styl'
+
+.button
+  display: flex
+  padding: emCalc(12px) emCalc(24px)
+  justify-content: center
+  align-items: center
+  gap: 10px
+  border-radius: 40px
+  border: none
+  box-shadow: 0px 0px 12px 0px rgba(0, 51, 73, 0.25)
+  font-family: NotesEsa
+  font-size: 16px
+  font-style: normal
+  font-weight: 700
+  line-height: normal
+  letter-spacing: 0.32px
+  text-transform: uppercase
+  width: fit-content
+  cursor: pointer
+  background: $darkTeal
+  color: $textWhite
+
+  svg
+    fill: $textWhite
+
+  &:hover
+    text-decoration: underline
+
+.backButton
+  padding: emCalc(8px) emCalc(12px) emCalc(8px) emCalc(8px)
+  border: 2px solid $darkTeal
+  background: rgba(0, 125, 138, 0.2)
+  gap: 4px
+
+  svg
+    fill: $textWhite
+
+  &:hover
+    text-decoration: underline

src/scripts/components/stories/pilot-story/components/button/button.tsx

@@ -0,0 +1,48 @@
+import React, {FunctionComponent} from 'react';
+import {Link} from 'react-router-dom';
+import {FormattedMessage} from 'react-intl';
+import cx from 'classnames';
+
+import styles from './button.module.styl';
+
+interface Props {
+  label?: string;
+  icon?: FunctionComponent;
+  link?: string;
+  isBackButton?: boolean;
+  id?: string;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+const Button: FunctionComponent<Props> = ({
+  label,
+  link,
+  icon: Icon,
+  isBackButton = false,
+  id,
+  onClick
+}) => {
+  const classes = cx(styles.button, isBackButton && styles.backButton);
+
+  return link ? (
+    <Link id={id} className={classes} to={link}>
+      {Icon && <Icon />}
+      {label && (
+        <span className={styles.label}>
+          <FormattedMessage id={label} />
+        </span>
+      )}
+    </Link>
+  ) : (
+    <button className={classes} id={id} onClick={onClick}>
+      {Icon && <Icon />}
+      {label && (
+        <span className={styles.label}>
+          <FormattedMessage id={label} />
+        </span>
+      )}
+    </button>
+  );
+};
+
+export default Button;

src/scripts/components/stories/pilot-story/components/header/header.module.styl

@@ -0,0 +1,29 @@
+@require '../../../../../../variables.styl'
+
+.header
+  position: fixed
+  top: 0
+  left: 0
+  right: 0
+  display: flex
+  flex-shrink: 0
+  justify-content: space-between
+  align-items: center
+  padding-left: emCalc(20px)
+  height: $headerHeight
+  background-color: $deepSpace
+  font-family: NotesEsa
+  border-bottom: 2px solid $teal
+  z-index: 2
+
+.logo
+  width: fit-content
+
+.rightContent
+  display: flex
+  flex-grow: 1
+  justify-content: flex-end
+  align-items: center
+  padding-right: emCalc(25px)
+  width: 50%
+  color: $textDefault

src/scripts/components/stories/pilot-story/components/header/header.tsx

@@ -0,0 +1,20 @@
+import React, {FunctionComponent} from 'react';
+
+import {EsaLogo} from '../../../../main/icons/esa-logo';
+
+import styles from './header.module.styl';
+
+interface Props {
+  children?: React.ReactElement | React.ReactElement[];
+}
+
+const Header: FunctionComponent<Props> = ({children}) => (
+  <div className={styles.header}>
+    <div className={styles.logo}>
+      <EsaLogo />
+    </div>
+    <div className={styles.rightContent}>{children}</div>
+  </div>
+);
+
+export default Header;

src/scripts/components/stories/pilot-story/components/intro/intro.module.styl

@@ -0,0 +1,51 @@
+@require '../../../../../../variables.styl'
+
+.intro
+  height: 100vh
+  padding: 0 emCalc(29px)
+  display: flex
+  flex-direction: column
+  justify-content: space-evenly
+
+.backContainer
+  margin: 75px 0 50px
+
+.hidden
+  opacity: 0
+  transition: opacity 0.3s ease-out
+
+.introContent
+  align-items: center
+  justify-content: center
+  flex: 1
+
+.storyTitle
+  color: $textWhite
+  font-family: NotesEsa
+  font-size: 48px
+  font-style: normal
+  font-weight: 700
+  line-height: 50px
+
+.storyDescription
+  color: #fff
+  font-family: NotesEsa
+  font-size: 20px
+  font-style: normal
+  font-weight: 700
+  line-height: 24px
+
+.buttonContainer
+  margin-top: emCalc(40px)
+  display: flex
+  gap: 8px
+
+.scrollinfoContainer
+  margin-top: emCalc(40px)
+  display: flex
+  justify-content: center
+  gap: 8px
+
+#whiteButton
+  background: $textWhite
+  color: $deepSpace

src/scripts/components/stories/pilot-story/components/intro/intro.tsx

@@ -0,0 +1,52 @@
+import React, {FunctionComponent} from 'react';
+import {Parallax} from 'react-scroll-parallax';
+import cx from 'classnames';
+
+import {GlobeIcon} from '../../../../main/icons/globe-icon';
+import ScrollHint from '../scroll-hint/scroll-hint';
+import Button from '../button/button';
+
+import styles from './intro.module.styl';
+
+interface Props {
+  storyStarted: boolean;
+  onStoryStart: () => void;
+}
+
+const Intro: FunctionComponent<Props> = ({storyStarted, onStoryStart}) => (
+  <section className={styles.intro}>
+    <div className={cx(styles.backContainer, storyStarted && styles.hidden)}>
+      <Button
+        link={'/stories'}
+        icon={GlobeIcon}
+        label="Back to Stories"
+        isBackButton
+      />
+    </div>
+
+    <Parallax opacity={[2, 0]}>
+      <>
+        <h1 className={styles.storyTitle}>
+          Inside the world of Super Emitters
+        </h1>
+        <p className={styles.storyDescription}>
+          Explore the world of methane super emitters – key players in climate
+          change.
+        </p>
+      </>
+    </Parallax>
+
+    {storyStarted ? (
+      <Parallax opacity={[1, 0]} className={styles.scrollinfoContainer}>
+        <ScrollHint />
+      </Parallax>
+    ) : (
+      <div className={styles.buttonContainer}>
+        <Button label="Story" onClick={onStoryStart} id={styles.whiteButton} />
+        <Button link={'/'} label="Datasets" />
+      </div>
+    )}
+  </section>
+);
+
+export default Intro;

src/scripts/components/stories/pilot-story/components/scroll-hint/scroll-hint.module.styl

@@ -0,0 +1,12 @@
+@require '../../../../../../variables.styl'
+
+.scrollHint
+  color: $textWhite
+  display: flex
+  flex-direction: column
+  justify-content: center
+  align-items: center
+  gap: 4px
+
+  svg
+    fill: $textWhite

src/scripts/components/stories/pilot-story/components/scroll-hint/scroll-hint.tsx

@@ -0,0 +1,14 @@
+import React, {FunctionComponent} from 'react';
+
+import {ExpandIcon} from '../../../../main/icons/expand-icon';
+
+import styles from './scroll-hint.module.styl';
+
+const ScrollHint: FunctionComponent = () => (
+  <div className={styles.scrollHint}>
+    Scroll to discover more
+    <ExpandIcon />
+  </div>
+);
+
+export default ScrollHint;