Merge pull request #2 from kadirahq/style-tweaks-and-readme-update

Style tweaks and readme update

README.md

@@ -1,6 +1,19 @@
 # Knobs
 > A Prop Editor for react storybook
 
+![usage](usage.gif)
+
+## API
+
+Use function `createKnob` passed to your stories to create a *knob* for a prop.
+
+`createKnob(name, initialValue, type)`  
+
+* `name`: Should uniquely idintify the prop. Used as the label of the knob
+* `initialValue`: Value used when first rendered
+* `type`: Optionally specify a type for the prop. Decides the input type of the knob. Currently the string 'object' is identified and it gives knob a textarea input that will be `eval`ed for an object. By default shows a text input.
+
+
 ```js
 import React from 'react';
 import Button from './Button';

src/components/PropField.js

@@ -6,6 +6,7 @@ const stylesheet = {
     display: 'inline-block',
     height: '26px',
     outline: 'none',
+    border: '0px',
     fontSize: '12px',
     padding: '5px',
     width: '70%',
@@ -24,8 +25,8 @@ const stylesheet = {
     color: 'rgb(130, 130, 130)',
   },
   field: {
-    marginBottom: '3px',
-    verticalAlign: 'middle',
+    padding: '5px',
+    color: 'rgb(130, 130, 130)',
   },
   label: {
     display: 'inline-block',

src/components/PropForm.js

@@ -4,6 +4,8 @@ import PropField from './PropField';
 
 const stylesheet = {
   propForm: {
+    padding: '2px',
+    backgroundColor: 'rgb(240, 240, 240)',
   },
 };
 

src/stories/index.js

@@ -7,7 +7,7 @@ storiesOf('Button', module)
     <Button
       onClick={ action('button clicked') }
       color={createKnob('color', '#fff')}
-      style={createKnob('style', { width: '50px' }, 'object')}
+      style={createKnob('style', { width: '70px' }, 'object')}
     >
       {createKnob('children', 'Hello')}
     </Button>