添加story

meiwentiya · Apr 24, 2019 · 365bba2 · 365bba2
1 parent a93135e
commit 365bba2
Showing 1 changed file with 83 additions and 26 deletions.
diff --git a/frontend/stories/index.stories.tsx b/frontend/stories/index.stories.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { storiesOf, addDecorator } from '@storybook/react';
-import { Carousel } from '../src/view/components/carousel';
+import { Carousel } from '../src/view/components/common/carousel';
+import { Badge } from '../src/view/components/common/badge';
 import { withViewport } from '@storybook/addon-viewport';
 import { withConsole } from '@storybook/addon-console';
 import { withKnobs, boolean } from '@storybook/addon-knobs';
@@ -13,35 +14,91 @@ import { pageDecorator } from './decorator';
 
 const core = new Core();
 
+
+
 addDecorator((storyFn, context) => withConsole()(storyFn)(context));
 
 storiesOf('Home', module)
-    .addDecorator(withViewport())
-    .addDecorator(withKnobs)
-    .addDecorator(pageDecorator)
-    .add('Carousel', () => 
-        <Carousel
-            windowResizeEvent={core.windowResizeEvent}
-            slides={[
-                <span>one</span>,
-                <span>two</span>,
-                <span>three</span>,
-            ]}
-            indicator={boolean(true)} />
-    )
+  .addDecorator(withViewport())
+  .addDecorator(withKnobs)
+  .addDecorator(pageDecorator)
+  .add('Carousel', () => 
+    <Carousel
+      windowResizeEvent={core.windowResizeEvent}
+      slides={[
+      <span>one</span>,
+      <span>two</span>,
+      <span>three</span>,
+    ]}
+    indicator={boolean(true)} />
+  )
+;
+
+let value:number = 10;
+let max:number = 99;
+storiesOf('Home', module)
+  .addDecorator(withViewport())
+  .addDecorator(withKnobs)
+  .addDecorator(pageDecorator)
+  .add('Badge1', () => 
+    <Badge num={value}>
+      <span>
+      test
+      </span>
+    </Badge>
+  )
+;
+
+storiesOf('Home', module)
+  .addDecorator(withViewport())
+  .addDecorator(withKnobs)
+  .addDecorator(pageDecorator)
+  .add('Badge2', () => 
+    <Badge num={value+90} max={max}>
+      <span>
+      test
+      </span>
+    </Badge>
+  )
 ;
 
+
+storiesOf('Home', module)
+  .addDecorator(withViewport())
+  .addDecorator(withKnobs)
+  .addDecorator(pageDecorator)
+  .add('Badge3', () => 
+    <Badge dot>
+      <span>
+      test
+      </span>
+    </Badge>
+  )
+;
+
+storiesOf('Home', module)
+  .addDecorator(withViewport())
+  .addDecorator(withKnobs)
+  .addDecorator(pageDecorator)
+  .add('Badge4', () => 
+    <Badge hidden>
+      <span>
+      test
+      </span>
+    </Badge>
+  )
+;
 // storiesOf('Book', module)
-//     .addDecorator(withViewport())
-//     .addDecorator(withKnobs)
-//     .add('Chapter', () =>
-//         <Chapter chapter={{
-//             type: 'chapter',
-//             id: 0,
-//             attributes: {
-//                 title: '',
-//                 body: '',
-//             }
-//         }} /> 
-//     )
+//   .addDecorator(withViewport())
+//   .addDecorator(withKnobs)
+//   .add('Chapter', () =>
+//     <Chapter chapter={{
+//       type: 'chapter',
+//       id: 0,
+//       attributes: {
+//       title: '',
+//       body: '',
+//       }
+//     }} /> 
+//   )
 // ;