import React from 'react';
import { storiesOf } from '@storybook/react';
import { select } from '@storybook/addon-knobs/react';
import { LoadingSpinner } from '../components';

const colors = ['teal', 'white'];
const sizes = ['small', 'medium'];

storiesOf('Loading spinners', module).add('Basic', () => (
  <LoadingSpinner color={select('Color', colors, 'teal')} size={select('Size', sizes, 'medium')} />
));

import React from 'react';
import { storiesOf } from '@storybook/react';
import { select } from '@storybook/addon-knobs/react';
import { LoadingSpinner } from '../components';

const colors = ['neutral', 'mint', 'violet', 'ruby', 'gold', 'aqua', 'teal'];
const sizes = ['small', 'medium'];
const tints = ['lightest', 'light', 'normal', 'dark', 'darkest'];

storiesOf('Loading spinners', module).add('Basic', () => (
  <LoadingSpinner
    color={select('Color', colors, 'neutral')}
    size={select('Size', sizes, 'medium')}
    tint={select('Tint', tints, 'lightest')}
  />
));

Update story so it reflects the prop changes
Update story
so it reflects the prop changes
