import React from 'react';
import { storiesOf } from '@storybook/react';

import { FadeIn } from 'components';

storiesOf('Animations/FadeIn', module)
    .add('default', () =>
        <FadeIn in>
            <h1>Example</h1>
        </FadeIn>
    )
    .add('with 2000ms timeout', () =>
        <FadeIn in timeout={2000}>
            <h1>Example</h1>
        </FadeIn>
    );

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

import { FadeIn } from 'components';

storiesOf('Animations/FadeIn', module)
    .addDecorator(withKnobs)
    .add('default', () => (
        <FadeIn in={boolean('In', true)} timeout={number('Timeout', 0)}>
            <h1>Example</h1>
        </FadeIn>
    ));

Add knobs for `timeout` and `in` to the FadeIn compnent