Merge pull request #1336 from ubilabs/feat/story-mixed-content-gallery

feat(story): create mixed content gallery component

src/scripts/actions/fetch-story.ts

@@ -4,7 +4,7 @@ import fetchStoryApi from '../api/fetch-story';
 import {languageSelector} from '../selectors/language';
 import {State} from '../reducers/index';
 
-import {Story} from '../types/story';
+import {LegacyStory} from '../types/legacy-story';
 
 export const FETCH_STORY_SUCCESS = 'FETCH_STORY_SUCCESS';
 export const FETCH_STORY_ERROR = 'FETCH_STORY_ERROR';
@@ -13,7 +13,7 @@ interface FetchStorySuccessAction {
   type: typeof FETCH_STORY_SUCCESS;
   id: string;
   language: string;
-  story: Story;
+  story: LegacyStory;
 }
 
 interface FetchStoryErrorAction {
@@ -27,7 +27,7 @@ export type FetchStoryActions = FetchStorySuccessAction | FetchStoryErrorAction;
 export function fetchStorySuccessAction(
   storyId: string,
   language: string,
-  story: Story
+  story: LegacyStory
 ) {
   return {
     type: FETCH_STORY_SUCCESS,

src/scripts/components/stories/splash-screen/splash-screen.tsx

@@ -16,7 +16,8 @@ interface Props {
 }
 
 const SplashScreen: FunctionComponent<Props> = ({storyId, mode, slide}) => {
-  const imageUrl = slide.images && getStoryAssetUrl(storyId, slide.images[0]);
+  const imageUrl =
+    slide.splashImage && getStoryAssetUrl(storyId, slide.splashImage);
   const contentClasses = cx(
     styles.content,
     mode !== StoryMode.Stories && styles.presentationContent

src/scripts/components/stories/story-content/story-content.tsx

@@ -3,7 +3,6 @@ import ReactMarkdown from 'react-markdown';
 import cx from 'classnames';
 
 import {getStoryAssetUrl} from '../../../libs/get-story-asset-urls';
-import {useSlide} from '../../../hooks/use-slide';
 import config from '../../../config/main';
 
 import {StoryMode} from '../../../types/story-mode';
@@ -20,8 +19,6 @@ interface Props {
 const StoryContent: FunctionComponent<Props> = ({mode, slide, storyId}) => {
   const storyText = mode === StoryMode.Stories ? slide.text : slide.shortText;
 
-  useSlide(slide);
-
   const contentClasses = cx(
     styles.content,
     mode !== StoryMode.Stories && styles.shortTextContent

src/scripts/components/stories/story-gallery-image/story-gallery-image.module.styl → src/scripts/components/stories/story-gallery-item/story-gallery-item.module.styl

@@ -5,14 +5,14 @@
     align-items: center
     height: 100%
 
-  .sliderImage
+  .sliderItem
     display: flex
     justify-content: center
     align-items: center
     width: 100%
     height: 100%
 
-  .imageContainer
+  .itemContainer
     display: flex
     flex-direction: column
     justify-content: center
@@ -28,13 +28,7 @@
   display: flex
   height: 100%
 
-.transition
-  transition: transform ease-out 0.5s
-
-.sliderImage
-  height: 100%
-
-.imageContainer
+.itemContainer
   position: relative
   display: flex
   flex-direction: column
@@ -46,9 +40,15 @@
   width: 100%
   height: 0
 
+.transition
+  transition: transform ease-out 0.5s
+
+.sliderItem
+  height: 100%
+
 @media screen and (max-width: 480px)
   .lightboxStoryGallery
-    .imageContainer
+    .itemContainer
       max-width: 100%
       max-height: 100%
       background-color: $plainBlack

src/scripts/components/stories/story-gallery-item/story-gallery-item.tsx

@@ -0,0 +1,45 @@
+import React, {FunctionComponent} from 'react';
+import cx from 'classnames';
+
+import styles from './story-gallery-item.module.styl';
+
+interface Props {
+  children: React.ReactNode[];
+  currentIndex: number;
+  showLightbox: boolean;
+}
+
+const StoryGalleryItem: FunctionComponent<Props> = ({
+  children,
+  currentIndex,
+  showLightbox
+}) => {
+  const containerWidthPercent = children.length * 100;
+  // Width in percent of each gallery item
+  const itemWidthPercent = 100 / children.length;
+  const imgClasses = cx(
+    styles.slider,
+    showLightbox && styles.lightboxStoryGallery,
+    children.length > 1 && styles.transition
+  );
+
+  return (
+    <div
+      className={imgClasses}
+      style={{
+        width: `${containerWidthPercent}%`,
+        transform: `translateX(-${itemWidthPercent * currentIndex}%)`
+      }}>
+      {children.map((child, index) => (
+        <div
+          className={styles.sliderItem}
+          key={index}
+          style={{width: `${itemWidthPercent}%`}}>
+          <div className={styles.itemContainer}>{child}</div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default StoryGalleryItem;

src/scripts/components/stories/story-gallery/story-gallery.tsx

@@ -12,38 +12,29 @@ import {FullscreenIcon} from '../../main/icons/fullscreen-icon';
 import {useInterval} from '../../../hooks/use-interval';
 import config from '../../../config/main';
 import {CloseIcon} from '../../main/icons/close-icon';
-import StoryGalleryImage from '../story-gallery-image/story-gallery-image';
+import StoryGalleryItem from '../story-gallery-item/story-gallery-item';
 import StoryProgress from '../story-progress/story-progress';
 
 import {StoryMode} from '../../../types/story-mode';
-import {ImageFit} from '../../../types/image-fit';
 
 import styles from './story-gallery.module.styl';
 
 interface Props {
-  images: string[];
-  imageCaptions?: string[];
-  imageFits?: ImageFit[];
   storyId: string;
   mode: StoryMode | null;
+  children: React.ReactElement[];
 }
 
-const StoryGallery: FunctionComponent<Props> = ({
-  images,
-  imageCaptions,
-  storyId,
-  imageFits,
-  mode
-}) => {
+const StoryGallery: FunctionComponent<Props> = ({mode, children}) => {
   const [currentIndex, setCurrentIndex] = useState(0);
   const [showLightbox, setShowLightbox] = useState(false);
   const showPrevButton = currentIndex > 0;
-  const showNextButton = currentIndex < images.length - 1;
+  const showNextButton = currentIndex < children.length - 1;
   const delay = mode === StoryMode.Showcase ? config.delay : null;
 
   useInterval(() => {
     if (mode === StoryMode.Showcase) {
-      if (currentIndex >= images.length - 1) {
+      if (currentIndex >= children.length - 1) {
         return;
       }
       setCurrentIndex(currentIndex + 1);
@@ -58,7 +49,7 @@ const StoryGallery: FunctionComponent<Props> = ({
   };
 
   const onNextClick = () => {
-    if (currentIndex >= images.length - 1) {
+    if (currentIndex >= children.length - 1) {
       return;
     }
     setCurrentIndex(currentIndex + 1);
@@ -100,11 +91,11 @@ const StoryGallery: FunctionComponent<Props> = ({
 
   return (
     <div className={storyGalleryClasses}>
-      <StoryProgress
-        images={images}
-        currentIndex={currentIndex}
-        showLightbox={showLightbox}
-      />
+      {children.length > 1 && (
+        <StoryProgress currentIndex={currentIndex} showLightbox={showLightbox}>
+          {children}
+        </StoryProgress>
+      )}
       <div className={styles.gallery}>
         {!showLightbox ? (
           <div
@@ -119,22 +110,21 @@ const StoryGallery: FunctionComponent<Props> = ({
             <CloseIcon />
           </div>
         )}
-        <StoryGalleryImage
-          images={images}
-          imageCaptions={imageCaptions}
-          storyId={storyId}
-          imageFits={imageFits}
+        <StoryGalleryItem
           currentIndex={currentIndex}
-          showLightbox={showLightbox}
-        />
-        <div className={styles.buttonContainer}>
-          <div onClick={onPrevClick} className={prevIconClasses}>
-            <PreviousIcon />
+          showLightbox={showLightbox}>
+          {children}
+        </StoryGalleryItem>
+        {children.length > 1 && (
+          <div className={styles.buttonContainer}>
+            <div onClick={onPrevClick} className={prevIconClasses}>
+              <PreviousIcon />
+            </div>
+            <div onClick={onNextClick} className={nextIconClasses}>
+              <NextIcon />
+            </div>
           </div>
-          <div onClick={onNextClick} className={nextIconClasses}>
-            <NextIcon />
-          </div>
-        </div>
+        )}
       </div>
     </div>
   );

src/scripts/components/stories/story-globe/story-globe.module.styl

@@ -0,0 +1,41 @@
+.globeContainer
+  position: relative
+  display: flex
+  flex-direction: column
+  height: 100%
+  padding: 0 emCalc(50px)
+  background-color: $plainBlack
+
+.layerDetails
+  position: absolute
+  right: 0
+  bottom: 0
+  left: 0
+  padding: inherit
+
+.storySlider
+  position: unset
+  padding: emCalc(40px) 0
+  background: none
+
+  > div
+    min-width: 25%
+    width: 60%
+
+@media screen and (max-width: 1025px)
+  .layerDetails
+    height: inherit
+    background: none
+    pointer-events: none
+
+  > *
+    position: relative
+    z-index: 1
+    pointer-events: all
+
+  .storySlider
+    position: absolute
+    right: 0
+    bottom: 0
+    padding: emCalc(40px) 0 emCalc(20px)
+