4 files changed, 40 insertions, 0 deletions
diff --git a/storybook/config.js b/storybook/config.js
new file mode 100644
index 000000000..98dde07de
--- /dev/null
+++ b/storybook/config.js
@@ -0,0 +1,16 @@
+import { configure } from '@kadira/storybook';
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+
+import './storybook.css'
+
+window.storiesOf = storiesOf;
+window.action    = action;
+window.React     = React;
+
+function loadStories () {
+  require('./stories/loading_indicator.story.jsx');
+  require('./stories/button.story.jsx');
+}
+
+configure(loadStories, module);
diff --git a/storybook/stories/button.story.jsx b/storybook/stories/button.story.jsx
new file mode 100644
index 000000000..fe6d57ad0
--- /dev/null
+++ b/storybook/stories/button.story.jsx
@@ -0,0 +1,15 @@
+import Button from '../../app/assets/javascripts/components/components/button.jsx'
+
+storiesOf('Button', module)
+  .add('default state', () => (
+    <Button text="submit" onClick={action('clicked')} />
+  ))
+  .add('secondary', () => (
+    <Button secondary text="submit" onClick={action('clicked')} />
+  ))
+  .add('disabled', () => (
+    <Button disabled text="submit" onClick={action('clicked')} />
+  ))
+  .add('block', () => (
+    <Button block text="submit" onClick={action('clicked')} />
+  ));
diff --git a/storybook/stories/loading_indicator.story.jsx b/storybook/stories/loading_indicator.story.jsx
new file mode 100644
index 000000000..d169e4f55
--- /dev/null
+++ b/storybook/stories/loading_indicator.story.jsx
@@ -0,0 +1,6 @@
+import LoadingIndicator from '../../app/assets/javascripts/components/components/loading_indicator.jsx'
+
+storiesOf('LoadingIndicator', module)
+  .add('default state', () => (
+    <LoadingIndicator />
+  ));
diff --git a/storybook/storybook.css b/storybook/storybook.css
new file mode 100644
index 000000000..3bda9e64c
--- /dev/null
+++ b/storybook/storybook.css
@@ -0,0 +1,3 @@
+#root {
+  padding: 4rem;
+}