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

Core set of Swrve UI Components

import React from 'react'
import Input from './input'

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

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

export default {
  title: 'Core/Input',
  decorators: [WrapperDecorator],
  component: Input
}

export const ABasicInputComponent = args => {
  return (
    <Input
      placeholder="Search"
      value=""
      onChange={() => {
        console.log('Input was changed!')
      }}
      {...args}
    />
  )
}

ABasicInputComponent.storyName = 'A basic Input component.'
ABasicInputComponent.parameters = {
  docs: {
    description: {
      component: `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.`
    }
  }
}

export const TheInputComponentAcceptsAVarietyOfProps = args => {
  return (
    <Input
      value="Hello, world!"
      disabled={false}
      className="foo"
      placeholder="Enter some text"
      onChange={() => {
        console.log('Input was changed!')
      }}
      {...args}
    />
  )
}

TheInputComponentAcceptsAVarietyOfProps.storyName =
  'The Input component accepts a variety of props.'
TheInputComponentAcceptsAVarietyOfProps.parameters = {
  docs: {
    description: {
      story: `It accepts all props associated with input attributes, general
      React-related props (e.g. onChange) and custom classNames.`
    }
  }
}