@hbsis.uikit/react/src/components/input-radio/radio.story.js

Biblioteca ReactJS

import React from 'react'
import PropTypes from 'prop-types'
import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'
import { Radio, RadioGroup } from './index'

const stories = storiesOf('Radio', module)
const style = {
  margin: '10px',
};

class InputRadioGroupExample extends React.Component {
  state = { valueSelected: 'Sim' }

  handleSelectInputRadio = (e) => {
    this.setState({
      valueSelected: e.target.value
    })
  }

  render () {
    const { directionItems } = this.props
    const { valueSelected } = this.state
    return (
      <div style={style}>
        <RadioGroup
          name='RadioGroup'
          label='Input radio'
          directionItems={directionItems}
          onChange={this.handleSelectInputRadio}
        >
          <Radio
            text='Sim'
            value='sim'
            checked={valueSelected === 'sim'}
          />
          <Radio
            text='Não'
            value='não'
            checked={valueSelected === 'não'}
          />
          <Radio
            text='Desabilitado'
            value='desabilitado'
            disabled
          />
        </RadioGroup>
      </div>
    )
  }
}

InputRadioGroupExample.propTypes = {
  directionItems: PropTypes.string
}

stories.add('Input Radio - Default', () => (
  <div>
    <Radio
      label='Input radio'
      text='Radio empty'
      name='Radio'
      id='radio'
      onChange={action('Input radio - Default')}
    />
  </div>
))

stories.add('Input Radio - Ativo', () => (
  <div>
    <Radio
      label='Input radio ativo'
      text='Texto do input radio'
      name='Radio'
      checked
      onChange={action('Onchange')}
    />
  </div>
))

stories.add('Input radio - Disabled', () => (
  <div>
    <Radio
      label='Input radio desabilitado'
      text='Texto do input radio'
      name='Radio'
      disabled
    />
  </div>
))

stories.add('Input radio - Sem label', () => (
  <div>
    <Radio
      text='Input radio sem label'
      name='Radio'
      id='radio'
    />
  </div>
))

stories.add('Radio group - Default', () => (
  <InputRadioGroupExample directionItems='row' />
))