import React from 'react';
import { storiesOf } from '@kadira/storybook';
import { Avatar } from 'components';
import { 
  withKnobs, 
  text, boolean, number 
} from '@kadira/storybook-addon-knobs';

const contributor = {
  name: 'Ryan Collins',
  src: 'https://avatars0.githubusercontent.com/u/13810084?v=3&s=460',
};

const stories = storiesOf('Avatar', module);
stories.addDecorator(withKnobs);

stories
  .addWithInfo(
    'default avatar',
    `
      Default Avatar
    `,
     () => (
      <Avatar />
    ),
    {
      inline: true,
      propTables: false,
    }
  )
  .addWithInfo(
    'with size prop',
    `
      Properties:

      \`size: thumb | small | medium | large \` 

      You can try out the different prop values in the \`knobs\` section below!
      
      \`Usage:\`
      ~~~js
        <Avatar 
          size='small'
          name='John Doe'
          src='/src/to/avatar' 
        />
      ~~~
    `,
    () => (
      <div>
        <Avatar 
          name={text('name',contributor.name)}
          src={text('src',contributor.src)}
          size={text('size', 'small')} 
        />
      </div>
    ),
    {
      inline: true,
      propTables: false,
    }
  );

@@ -140,23 +140,17 @@
 xt, 
-boolean, number
+%0A  select
  %0A%7D 
@@ -308,16 +308,97 @@
 0',%0A%7D;%0A%0A
+const sizeOptions = %7B%0A  thumb: 'thumb',%0A  medium: 'medium',%0A  large: 'large',%0A%7D%0A%0A
 const st
@@ -1032,33 +1032,32 @@
 %0A        %3CAvatar
- 
 %0A          name=
@@ -1148,19 +1148,21 @@
   size=%7B
-tex
+selec
 t('size'
@@ -1167,18 +1167,31 @@
 e', 
-'small
+sizeOptions ,'medium
 ')%7D
- 
 %0A   

Use dropdown for props