@appearhere/bloom/components/Form/IconInput/IconInput.story.js

Appear Here's pattern library and styleguide

import React from 'react';
import { storiesOf, action } from '@storybook/react';
import { withKnobs, boolean, select } from '@storybook/addon-knobs';
import IconInput from './IconInput';

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

const inputTypes = [
  'text',
  'email',
  'password',
  'search',
  'url',
  'textarea',
];

stories.add('IconInput', () => (
  <IconInput
    iconName="search"
    id="1"
    type={select('Type', inputTypes, inputTypes[0])}
    value="100"
    onFocus={action('Focus')}
    onBlur={action('Blur')}
    onChange={action('Change')}
    error={boolean('Errored', false) ? 'Something went wrong' : ''}
  />
))
.add('IconInput with rightsided icon', () => (
  <IconInput
    iconName="search"
    iconSide="right"
    id="1"
    type={select('Type', inputTypes, inputTypes[0])}
    value="100"
    onFocus={action('Focus')}
    onBlur={action('Blur')}
    onChange={action('Change')}
    error={boolean('Errored', false) ? 'Something went wrong' : ''}
  />
))
.add('IconInput w/high priority', () => (
  <IconInput
    iconName="search"
    id="1"
    type={select('Type', inputTypes, inputTypes[0])}
    value="100"
    onFocus={action('Focus')}
    onBlur={action('Blur')}
    onChange={action('Change')}
    error={boolean('Errored', false) ? 'Something went wrong' : ''}
    priority="high"
  />
));