feat(lightbox): add fullscreen view to gallery

src/scripts/components/icons/fullscreen-exit-icon.tsx

@@ -0,0 +1,12 @@
+import React, {FunctionComponent} from 'react';
+
+export const FullscreenExitIcon: FunctionComponent = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" />
+  </svg>
+);

src/scripts/components/icons/fullscreen-icon.tsx

@@ -0,0 +1,12 @@
+import React, {FunctionComponent} from 'react';
+
+export const FullscreenIcon: FunctionComponent = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
+  </svg>
+);

src/scripts/components/story-gallery/story-gallery.styl

@@ -1,9 +1,26 @@
+.lightbox
+  position: fixed
+  top: 0
+  right: 0
+  bottom: 0
+  left: 0
+  display: flex
+  width: 100%
+  height: 100%
+  background-color: rgba(0, 0, 0, 0.95)
+
 .storyGallery
   position: relative
   flex-shrink: 0
   overflow: hidden
   width: 100%
-  height: 300px
+  height: 100%
+
+.fullscreenGallery
+  align-self: center
+  margin: 0 auto
+  width: 90%
+  height: 90%
 
 .buttonContainer
   position: absolute
@@ -17,6 +34,14 @@
   > *
     fill: #fff
 
+.fullscreenIcon
+  position: absolute
+  right: 0
+  bottom: 0
+  z-index: 1
+  padding: 5px
+  fill: #fff
+
 .slider
   display: flex
   height: 100%

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

@@ -3,6 +3,8 @@ import cx from 'classnames';
 
 import {PreviousIcon} from '../icons/back-icon';
 import {NextIcon} from '../icons/next-icon';
+import {FullscreenIcon} from '../icons/fullscreen-icon';
+import {FullscreenExitIcon} from '../icons/fullscreen-exit-icon';
 
 import styles from './story-gallery.styl';
 
@@ -15,6 +17,7 @@ const StoryGallery: FunctionComponent<Props> = ({images}) => {
   const containerWidth = imagesLength * 100;
   const imageWidth = 100 / imagesLength;
   const [currentIndex, setCurrentIndex] = useState(0);
+  const [showFullscreen, setShowFullscreen] = useState(false);
   const showPrevButton = currentIndex > 0;
   const showNextButton = currentIndex < imagesLength - 1;
 
@@ -36,30 +39,57 @@ const StoryGallery: FunctionComponent<Props> = ({images}) => {
     setCurrentIndex(0);
   }, [images]);
 
-  const classes = cx([styles.slider, images.length > 1 && styles.transition]);
+  const imgClasses = cx([
+    styles.slider,
+    images.length > 1 && styles.transition
+  ]);
+
+  const lightboxClasses = cx([showFullscreen && styles.lightbox]);
+
+  const galleryClasses = cx([
+    styles.storyGallery,
+    showFullscreen && styles.fullscreenGallery
+  ]);
 
   return (
-    <div className={styles.storyGallery}>
-      <div className={styles.buttonContainer}>
-        <div onClick={onPrevClick}>
-          {showPrevButton ? <PreviousIcon /> : null}
+    <div className={lightboxClasses}>
+      <div className={galleryClasses}>
+        <div className={styles.buttonContainer}>
+          <div onClick={onPrevClick}>
+            {showPrevButton ? <PreviousIcon /> : null}
+          </div>
+          <div onClick={onNextClick}>
+            {showNextButton ? <NextIcon /> : null}
+          </div>
+        </div>
+        {showFullscreen ? (
+          <div
+            className={styles.fullscreenIcon}
+            onClick={() => setShowFullscreen(false)}>
+            <FullscreenExitIcon />
+          </div>
+        ) : (
+          <div
+            className={styles.fullscreenIcon}
+            onClick={() => setShowFullscreen(true)}>
+            <FullscreenIcon />
+          </div>
+        )}
+        <div
+          className={imgClasses}
+          style={{
+            width: `${containerWidth}%`,
+            transform: `translateX(-${imageWidth * currentIndex}%)`
+          }}>
+          {images.map((image, index) => (
+            <img
+              className={styles.sliderImage}
+              src={image}
+              key={index}
+              style={{width: `${imageWidth}%`}}
+            />
+          ))}
         </div>
-        <div onClick={onNextClick}>{showNextButton ? <NextIcon /> : null}</div>
-      </div>
-      <div
-        className={classes}
-        style={{
-          width: `${containerWidth}%`,
-          transform: `translateX(-${imageWidth * currentIndex}%)`
-        }}>
-        {images.map((image, index) => (
-          <img
-            className={styles.sliderImage}
-            src={image}
-            key={index}
-            style={{width: `${imageWidth}%`}}
-          />
-        ))}
       </div>
     </div>
   );