fix: stories name of story

ccontrols · Mar 31, 2020 · 19486ce · 19486ce
1 parent 7000584
commit 19486ce
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 17 deletions.
diff --git a/examples/storybook-5/.storybook/preview.js b/examples/storybook-5/.storybook/preview.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { addDecorator, addParameters } from '@storybook/react';
 import { ThemeProvider, BlockContextProvider } from '@component-controls/storybook';
-import { ControlsTable, Title, Subtitle, Story, Stories, Description, StorySource, Playground, ComponentSource, PropsTable } from '@component-controls/blocks';
+import { ControlsTable, Title, Subtitle, Story, Stories, Description, StorySource, ComponentSource, PropsTable } from '@component-controls/blocks';
 
 addDecorator((story, ctx ) => {
   return (
@@ -23,9 +23,6 @@ export const DocsPage = () => {
         <StorySource id="." title='Story source'/>
         <ControlsTable id="." />
         <PropsTable of="." />
-        <Playground>
-          <Story id="." />
-        </Playground>
         <Stories />
       </BlockContextProvider>  
     </ThemeProvider>  

diff --git a/ui/blocks/src/Stories/Stories.tsx b/ui/blocks/src/Stories/Stories.tsx
@@ -4,6 +4,7 @@ import {
   StoryBlockContainer,
   StoryBlockContainerProps,
 } from '../BlockContainer/story';
+import { getStoryTitle } from '../utils';
 import { Playground, PlaygroundProps } from '../Playground';
 import { Story as StoryComponent } from '../Story';
 
@@ -24,19 +25,26 @@ export const Stories: FC<StoriesProps> = props => (
       }
       return (
         <div>
-          {stories.map((story: Story) => (
-            <Playground
-              transform={{
-                options: {
-                  disabled: true,
-                },
-              }}
-              key={story.id}
-              {...rest}
-            >
-              <StoryComponent id={story.id} title="." collapsible={false} />
-            </Playground>
-          ))}
+          {stories.map((story: Story) => {
+            const storyTitle = story.name;
+            return (
+              <Playground
+                transform={{
+                  options: {
+                    disabled: true,
+                  },
+                }}
+                key={story.id}
+                {...rest}
+              >
+                <StoryComponent
+                  id={story.id}
+                  title={storyTitle}
+                  collapsible={false}
+                />
+              </Playground>
+            );
+          })}
         </div>
       );
     }}