fix: move description to Playground from Story

ccontrols · May 19, 2020 · 6acd915 · 6acd915
1 parent f4ca871
commit 6acd915
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 16 deletions.
diff --git a/examples/storybook-6-no-docs/stories/mdx.stories.mdx b/examples/storybook-6-no-docs/stories/mdx.stories.mdx
@@ -6,57 +6,57 @@ import { customStory as customStoryDeconstructedProps } from '../../stories/src/
 
 <Meta title="Introduction/MDX"  />
 
-<Playground>
-  <Story name="simple" description="story with jsx child">
+<Playground description="story with jsx child">
+  <Story name="simple">
     <div>test</div>
   </Story>
 </Playground>
 
-<Playground>
-  <Story name="multiple-children" description="story with two jsx children">
+<Playground description="story with two jsx children">
+  <Story name="multiple-children" >
     <button>button 1</button>
     <button>button 2</button>
   </Story>
 </Playground>
 
-<Playground>
-  <Story name='mdx-story-props' controls={{ text: { type: 'text', value: 'hello'}}} description="story with props">
+<Playground description="story with props">
+  <Story name='mdx-story-props' controls={{ text: { type: 'text', value: 'hello'}}}>
     {props => (
       <div>{props.text}</div>
     )}
   </Story>
 </Playground>  
 
-<Playground>
-  <Story name='mdx-story-desconstructed-props' controls={{ text: { type: 'text', value: 'hello'}}} description="story with deconstructed props">
+<Playground description="story with deconstructed props">
+  <Story name='mdx-story-desconstructed-props' controls={{ text: { type: 'text', value: 'hello'}}}>
     {({ text }) => (
       <div>{text}</div>
     )}
   </Story>
 </Playground>
 
-<Playground>
-  <Story name='mdx-external-story' description="story from external file">
+<Playground description="story from external file">
+  <Story name='mdx-external-story'>
     {customStory()}
   </Story>
 </Playground>
 
 
-<Playground>
-  <Story name='mdx-external-story' description="story from external file">
+<Playground description="story from external file">
+  <Story name='mdx-external-story'>
     {customStory()}
   </Story>
 </Playground>
 
 
-<Playground>
-  <Story name='mdx-external-story-props' controls={{ text: { type: 'text', value: 'hello'}}} description="story from external file with props">
+<Playground description="story from external file with props">
+  <Story name='mdx-external-story-props' controls={{ text: { type: 'text', value: 'hello'}}} >
     {props => customStoryProps(props)}
   </Story>
 </Playground>
 
-<Playground>
-  <Story name='mdx-external-story-deconstructed-props' controls={{ text: { type: 'text', value: 'hello'}}} description="story from external file with deconstructed props">
+<Playground description="story from external file with deconstructed props">
+  <Story name='mdx-external-story-deconstructed-props' controls={{ text: { type: 'text', value: 'hello'}}}>
     {props => customStoryDeconstructedProps(props)}
   </Story>
 </Playground>

diff --git a/ui/blocks/src/Playground/Playground.tsx b/ui/blocks/src/Playground/Playground.tsx
@@ -43,6 +43,7 @@ export const Playground: FC<PlaygroundProps> = ({
   children,
   openTab,
   visibleTabs = false,
+  description,
   scale: userScale = 1,
 }) => {
   const { theme } = useThemeUI();
@@ -137,6 +138,7 @@ export const Playground: FC<PlaygroundProps> = ({
     : [...storyActions, ...userActions];
   return (
     <StoryBlockContainer
+      description={description}
       useStoryDescription={true}
       name={name}
       title={title}