Show embed within Block and BrowserFrame

NASA-IMPACT · Aug 7, 2023 · 89a6b3d · 89a6b3d
1 parent 193f9a5
commit 89a6b3d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 10 deletions.
diff --git a/app/scripts/components/common/blocks/embed.tsx b/app/scripts/components/common/blocks/embed.tsx
@@ -1,16 +1,25 @@
 import React from 'react';
 import styled from 'styled-components';
 import { HintedError } from '$utils/hinted-error';
+import BrowserFrame from '$styles/browser-frame';
 
-const IFrameWrapper = styled.iframe`
+const EmbedWrapper = styled.div`
+  width: 100%;
+  
+  > div {
+    width: 100%;
+  }
+`;
+
+const IframeWrapper = styled.iframe`
   width: 100%;
   border: 0;
   height: ${(props: { height: number }) => props.height}px;
 `;
 
 interface EmbedProps {
   src: string;
-  height: number
+  height: number;
 }
 
 export default function Embed({ src, height = 800 }: EmbedProps) {
@@ -19,6 +28,10 @@ export default function Embed({ src, height = 800 }: EmbedProps) {
   }
 
   return (
-      <IFrameWrapper src={src} height={height} />
+    <EmbedWrapper>
+      <BrowserFrame>
+        <IframeWrapper src={src} height={height} />
+      </BrowserFrame>
+    </EmbedWrapper>
   );
 }
diff --git a/docs/content/MDX_BLOCKS.md b/docs/content/MDX_BLOCKS.md
@@ -569,7 +569,11 @@ The scrollytelling is defined as a series os `Chapters` inside the `Scrollytelli
 It is possible to embed individual webpages within a Story, like an interactive notebook, like so:
 
 ```jsx
-<Embed height="1000" src="https://jsignell.github.io/voici/voici/render/fires.html">
+<Block type="wide">
+  <Figure>
+     <Embed height="1200" src="https://jsignell.github.io/voici/voici/render/fires.html" />
+  </Figure>
+</Block>
 ```
 
 ### Embed properties

diff --git a/mock/stories/fires.stories.mdx b/mock/stories/fires.stories.mdx
@@ -19,12 +19,13 @@ taxonomy:
 
 <Block>
   <Prose>
-  ## Introduction
-  <mark>🚧 Experimental story to demo embeds! 🚧</mark>
-
+    ## Introduction
+    <mark>🚧 Experimental story to demo embeds! 🚧</mark>
   </Prose>
 </Block>
 
-<Embed height="1200" src="https://jsignell.github.io/voici/voici/render/fires.html">
-
-</Embed>
+<Block type="wide">
+  <Figure>
+     <Embed height="1200" src="https://jsignell.github.io/voici/voici/render/fires.html" />
+  </Figure>
+</Block>