fix error in List/Base Story

Author: Dottenpixel

ui/components/vertical-navigation/list/example.jsx

@@ -163,30 +163,26 @@ NavVerticalSection.propTypes = {
 // Export
 /// ////////////////////////////////////////
 
-export default [
-  {
-    id: 'default',
-    label: 'Default',
-    element: (
-      <div className="demo-only" style={{ width: '320px' }}>
-        <NavVertical>
-          <NavVerticalSection headerId={sectionId01} title="Reports">
-            <NavVerticalItem active>Recent</NavVerticalItem>
-            <NavVerticalItem>Created by Me</NavVerticalItem>
-            <NavVerticalItem>Private Reports</NavVerticalItem>
-            <NavVerticalItem>Public Reports</NavVerticalItem>
-            <NavVerticalItem>All Reports</NavVerticalItem>
-          </NavVerticalSection>
-          <NavVerticalSection headerId={sectionId02} title="Folders">
-            <NavVerticalItem>Created by Me</NavVerticalItem>
-            <NavVerticalItem>Shared with Me</NavVerticalItem>
-            <NavVerticalItem>All Reports</NavVerticalItem>
-          </NavVerticalSection>
-        </NavVertical>
-      </div>
-    )
-  }
-];
+export const ListBaseExample = () => (
+  <div className="demo-only" style={{ width: '320px' }}>
+    <NavVertical>
+      <NavVerticalSection headerId={sectionId01} title="Reports">
+        <NavVerticalItem active>Recent</NavVerticalItem>
+        <NavVerticalItem>Created by Me</NavVerticalItem>
+        <NavVerticalItem>Private Reports</NavVerticalItem>
+        <NavVerticalItem>Public Reports</NavVerticalItem>
+        <NavVerticalItem>All Reports</NavVerticalItem>
+      </NavVerticalSection>
+      <NavVerticalSection headerId={sectionId02} title="Folders">
+        <NavVerticalItem>Created by Me</NavVerticalItem>
+        <NavVerticalItem>Shared with Me</NavVerticalItem>
+        <NavVerticalItem>All Reports</NavVerticalItem>
+      </NavVerticalSection>
+    </NavVertical>
+  </div>
+);
+
+export default <ListBaseExample/>;
 
 export let states = [
   {

ui/components/vertical-navigation/list/index.stories.js

@@ -1,20 +1,10 @@
-import { storiesOf } from '@storybook/react';
 import * as ListExamples from './example';
-import { getDisplayElementById } from '../../../shared/helpers';
+import { generateStories } from "../../../shared/helpers";
+import Docs from "../docs.mdx";
 
-const stories = storiesOf('Components/Vertical Navigation/List', module).add(
-  'Base',
-  () => ListExamples.default
-);
+const examples = [ListExamples];
 
-ListExamples.examples.map(example => {
-  stories.add(example.label, () =>
-    getDisplayElementById(ListExamples.examples, example.id)
-  );
-});
+const patternName = "Vertical Navigation";
+
+generateStories(patternName, examples, ["default", "examples", "states"], Docs);
 
-ListExamples.states.map(example => {
-  stories.add(example.label, () =>
-    getDisplayElementById(ListExamples.states, example.id)
-  );
-});