@swrve/core/src/input/input.stories.js

Core set of Swrve UI Components

import React from 'react'
import Input from './input'
import { storiesOf } from '@storybook/react'
import { withKnobs, boolean, text } from '@storybook/addon-knobs'
import { withInfo } from '@storybook/addon-info'

const styles = {
  margin: '20px 50px 40px'
}

const WrapperDecorator = storyFn => <div style={styles}>{storyFn()}</div>

const stories = storiesOf('Core|Input', module)
  .addDecorator(WrapperDecorator)
  .addDecorator(withKnobs)
  .addDecorator(withInfo)

stories.add(
  'A basic Input component.',
  () => {
    return (
      <Input
        placeholder="Search"
        value=""
        onChange={() => {
          console.log('Input was changed!')
        }}
      />
    )
  },
  {
    info: `The Input component renders an input element. 
    It accepts all props associated with input attributes, 
    general React-related props (e.g. onChange) and custom classNames.`
  }
)

stories.add(
  'The Input component accepts a variety of props.',
  () => {
    return (
      <Input
        value={text('value', 'Hello, world!')}
        disabled={boolean('disabled', false)}
        className={text('className', 'foo')}
        placeholder={text('placeholder', 'Enter some text')}
        onChange={() => {
          console.log('Input was changed!')
        }}
      />
    )
  },
  {
    info: `  It accepts all props associated with input attributes, general
  React-related props (e.g. onChange) and custom classNames.`
  }
)