Add todoItem stories

kadira-samples · Mar 24, 2016 · f99a034 · f99a034
1 parent 556e31b
commit f99a034
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 20 deletions.
diff --git a/components/stories/TodoItem.js b/components/stories/TodoItem.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import TodoItem from '../TodoItem';
+import { storiesOf, action } from 'react-storybook';
+
+storiesOf('Todo Item', module)
+  .add('not completed', () => {
+    const todo = {
+      id: 'the-id',
+      text: 'Hello Todo',
+      completed: false
+    };
+
+    return getItem(todo);
+  })
+  .add('completed', () => {
+    const todo = {
+      id: 'the-id',
+      text: 'Hello Todo',
+      completed: true
+    };
+
+    return getItem(todo);
+  });
+
+
+function getItem(todo) {
+  return (
+    <div className="todoapp">
+      <div className="todo-list">
+        <TodoItem
+          todo={todo}
+          editTodo={action('editTodo')}
+          deleteTodo={action('deleteTodo')}
+          completeTodo={action('completeTodo')}/>
+      </div>
+    </div>
+  );
+}
diff --git a/components/stories/footer.js b/components/stories/footer.js
@@ -7,26 +7,32 @@ import {
 
 storiesOf('Footer', module)
   .add('default view', () => (
-    <Footer
-      completedCount={10}
-      activeCount={4}
-      filter={SHOW_ALL}
-      onClearCompleted={action('onClearCompleted')}
-      onShow={action('onShow')} />
+    <div className="todoapp">
+      <Footer
+        completedCount={10}
+        activeCount={4}
+        filter={SHOW_ALL}
+        onClearCompleted={action('onClearCompleted')}
+        onShow={action('onShow')} />
+    </div>
   ))
   .add('show completed', () => (
-    <Footer
-      completedCount={10}
-      activeCount={4}
-      filter={SHOW_COMPLETED}
-      onClearCompleted={action('onClearCompleted')}
-      onShow={action('onShow')} />
+    <div className="todoapp">
+      <Footer
+        completedCount={10}
+        activeCount={4}
+        filter={SHOW_COMPLETED}
+        onClearCompleted={action('onClearCompleted')}
+        onShow={action('onShow')} />
+    </div>
   ))
   .add('show active', () => (
-    <Footer
-      completedCount={10}
-      activeCount={4}
-      filter={SHOW_ACTIVE}
-      onClearCompleted={action('onClearCompleted')}
-      onShow={action('onShow')} />
+    <div className="todoapp">
+      <Footer
+        completedCount={10}
+        activeCount={4}
+        filter={SHOW_ACTIVE}
+        onClearCompleted={action('onClearCompleted')}
+        onShow={action('onShow')} />
+    </div>
   ));
diff --git a/components/stories/index.js b/components/stories/index.js
@@ -1,2 +1,3 @@
-import './header'
-import './footer'
+import './Header'
+import './Footer'
+import './TodoItem'