feat(story-embedded): show description text for embedded content

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

@@ -0,0 +1,12 @@
+.embeddedContent
+  display: grid
+  grid-template-rows: auto 8em
+  border: 0
+  height: 100%
+  padding: emCalc(56px)
+
+  > iframe
+    height: 100%
+    width: 100%
+    border: 0
+

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

@@ -0,0 +1,28 @@
+import React, {FunctionComponent} from 'react';
+import {EmbeddedItem} from '../../../types/gallery-item';
+
+import styles from './story-embedded.module.styl';
+import Caption from '../caption/caption';
+import {ImageFit} from '../../../types/image-fit';
+
+interface Props {
+  embeddedItem: EmbeddedItem;
+}
+
+const StoryEmbedded: FunctionComponent<Props> = ({embeddedItem}) => {
+  const {text} = embeddedItem;
+  return (
+    <div className={styles.embeddedContent}>
+      <iframe src={embeddedItem.embeddedSrc}></iframe>
+      {text && (
+        <Caption
+          showLightbox={false}
+          imageFit={ImageFit.Cover}
+          content={text}
+        />
+      )}
+    </div>
+  );
+};
+
+export default StoryEmbedded;

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

@@ -19,11 +19,6 @@
 .rightSideComponent
   height: 100%
 
-.embeddedContent
-  border: 0
-  height: 100%
-  padding: emCalc(56px)
-
 .layerDescription
   position: unset
   padding-right: 0

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

@@ -27,6 +27,7 @@ import {GalleryItemType} from '../../../types/gallery-item';
 import {useThunkDispatch} from '../../../hooks/use-thunk-dispatch';
 
 import styles from './story.module.styl';
+import StoryEmbedded from '../story-embedded/story-embedded';
 
 const Story: FunctionComponent = () => {
   const storyParams = useStoryParams();
@@ -97,11 +98,7 @@ const Story: FunctionComponent = () => {
               case GalleryItemType.Globe:
                 return <StoryGlobe globeItem={item} />;
               case GalleryItemType.Embedded:
-                return (
-                  <iframe
-                    className={styles.embeddedContent}
-                    src={item.embeddedSrc}></iframe>
-                );
+                return <StoryEmbedded embeddedItem={item} />;
               default:
                 console.warn(
                   // eslint-disable-next-line dot-notation

src/scripts/types/gallery-item.ts

@@ -26,6 +26,7 @@ export interface VideoItem {
 
 export interface EmbeddedItem {
   type: GalleryItemType.Embedded;
+  text?: string;
   embeddedSrc?: string;
 }