Merge pull request #31 from steven-mercatante/fix-broken-stories

Fix broken stories

Author: steven-mercatante

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@merc/react-timeline",
-  "version": "0.1.41",
+  "version": "0.1.42",
   "description": "An opinionated (but highly customizable) timeline component",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package.json

@@ -1,23 +1,31 @@
 import React from 'react';
 import Button from './Button';
+import { ThemeProvider } from 'styled-components';
+import themes from '../themes';
 
 export default {
   title: 'Controls/Button',
   component: Button,
 };
 
-export const button = () => <Button>I'm just a regular button</Button>;
+export const button = () => (
+  <ThemeProvider theme={themes.default}>
+    <Button>I'm just a regular button</Button>
+  </ThemeProvider>
+);
 
 export const withOnClickHandler = () => (
-  <Button
-    onClick={() =>
-      alert(
-        "I'm just a regular button. Use me like you would any other button."
-      )
-    }
-  >
-    Click me for an alert
-  </Button>
+  <ThemeProvider theme={themes.default}>
+    <Button
+      onClick={() =>
+        alert(
+          "I'm just a regular button. Use me like you would any other button."
+        )
+      }
+    >
+      Click me for an alert
+    </Button>
+  </ThemeProvider>
 );
 
 withOnClickHandler.story = {

src/components/Button.stories.js

@@ -1,16 +1,22 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import ImageAtom from './ImageAtom';
+import themes from '../../themes';
 import jellyfish from '../../../demo/images/jellyfish.jpg';
+import { ThemeProvider } from 'styled-components';
 
 storiesOf('Atoms/ImageAtom', module)
   .addParameters({ component: ImageAtom })
   .add('remote URL', () => (
-    <ImageAtom
-      src="https://images.unsplash.com/photo-1540968221243-29f5d70540bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=882&q=80"
-      alt="yellow jellyfish"
-    />
+    <ThemeProvider theme={themes.default}>
+      <ImageAtom
+        src="https://images.unsplash.com/photo-1540968221243-29f5d70540bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=882&q=80"
+        alt="yellow jellyfish"
+      />
+    </ThemeProvider>
   ))
   .add('local image', () => (
-    <ImageAtom src={jellyfish} alt="swimming jellyfish" />
+    <ThemeProvider theme={themes.default}>
+      <ImageAtom src={jellyfish} alt="swimming jellyfish" />
+    </ThemeProvider>
   ));