Add header and footer

components/stories/footer.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import Footer from '../footer';
+import { storiesOf, action } from 'react-storybook';
+import {
+  SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE
+} from '../../constants/TodoFilters'
+
+storiesOf('Footer', module)
+  .add('default view', () => (
+    <Footer
+      completedCount={10}
+      activeCount={4}
+      filter={SHOW_ALL}
+      onClearCompleted={action('onClearCompleted')}
+      onShow={action('onShow')} />
+  ))
+  .add('show completed', () => (
+    <Footer
+      completedCount={10}
+      activeCount={4}
+      filter={SHOW_COMPLETED}
+      onClearCompleted={action('onClearCompleted')}
+      onShow={action('onShow')} />
+  ))
+  .add('show active', () => (
+    <Footer
+      completedCount={10}
+      activeCount={4}
+      filter={SHOW_ACTIVE}
+      onClearCompleted={action('onClearCompleted')}
+      onShow={action('onShow')} />
+  ));

components/stories/header.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import Header from '../header';
-import {storiesOf, action} from 'react-storybook';
+import { storiesOf, action } from 'react-storybook';
 
 storiesOf('Header', module)
   .add('default view', () => {
@@ -9,5 +9,4 @@ storiesOf('Header', module)
         <Header addTodo={action('Add Todo')}/>
       </div>
     );
-  })
-  .add('nothing', () => (<p>Hello Man</p>))
+  });

components/stories/index.js

@@ -1 +1,2 @@
 import './header'
+import './footer'