From 091868b1ab064954b85b8b2a71ba15decb33d230 Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Thu, 4 Jul 2019 17:14:19 +0800
Subject: [PATCH] Addon-docs: Added inline option to Story block

---
 addons/docs/src/blocks/Story.tsx                           | 7 +++++--
 examples/official-storybook/stories/addon-docs.stories.mdx | 4 ++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/addons/docs/src/blocks/Story.tsx b/addons/docs/src/blocks/Story.tsx
index 7fde8e353b3..888d379c6ef 100644
--- a/addons/docs/src/blocks/Story.tsx
+++ b/addons/docs/src/blocks/Story.tsx
@@ -7,6 +7,7 @@ import { DocsContext, DocsContextProps } from './DocsContext';
 
 interface CommonProps {
   height?: string;
+  inline?: boolean;
 }
 
 type StoryDefProps = {
@@ -38,13 +39,15 @@ export const getStoryProps = (
   const inputId = id === CURRENT_SELECTION ? currentId : id;
   const previewId = inputId || toId(mdxKind, name);
 
-  const { height } = props;
+  const { height, inline } = props;
   const data = storyStore.fromId(previewId);
   const { framework = null } = parameters || {};
+
+  // prefer props, then global options, then framework-inferred values
   const { inlineStories = inferInlineStories(framework), iframeHeight = undefined } =
     (parameters && parameters.options && parameters.options.docs) || {};
   return {
-    inline: inlineStories,
+    inline: typeof inline === 'boolean' ? inline : inlineStories,
     id: previewId,
     storyFn: data && data.getDecorated(),
     height: height || iframeHeight,
diff --git a/examples/official-storybook/stories/addon-docs.stories.mdx b/examples/official-storybook/stories/addon-docs.stories.mdx
index 164f455f5c0..18720dddbde 100644
--- a/examples/official-storybook/stories/addon-docs.stories.mdx
+++ b/examples/official-storybook/stories/addon-docs.stories.mdx
@@ -77,6 +77,10 @@ export const nonStory2 = () => <Button>Not a story</Button>; // another one
   <Button onClick={action('clicked')}>solo</Button>
 </Story>
 
+<Story name="iframe story" inline={false} height="100px">
+  <>This is an iframe!</>
+</Story>
+
 <Source name="hello story" />
 
 ## Configurable height