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

Core set of Swrve UI Components

import React from 'react'
import Textarea from './textarea'
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|Textarea', module)
  .addDecorator(WrapperDecorator)
  .addDecorator(withKnobs)
  .addDecorator(withInfo)

stories.add(
  'A basic Textarea component.',
  () => {
    return <Textarea />
  },
  {
    info: `
  The Textarea component renders a textarea element.

  It accepts all props associated with textarea attributes, general
  React-related props (e.g. onChange) and custom classNames.
`
  }
)

stories.add(
  'The Textarea component accepts a variety of props.',
  () => {
    return (
      <Textarea
        disabled={boolean('disabled', true)}
        className={text('className', 'foo')}
        error={boolean('error', false)}
        onChange={() => {
          console.log('Textarea was changed!')
        }}
        placeholder="Textarea placeholder"
      />
    )
  },
  {
    info: `
  The Textarea component accepts a wide variety of props, spreading them across
  the textarea element internally. This allows the user to specify attributes
  specific to textarea elements, whilst also allowing the use of more general
  props like onChange, for controlling element state.
`
  }
)