@swrve/core/src/radio-button/radio-button.stories.js

Core set of Swrve UI Components

import React from 'react'
import { storiesOf } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { boolean, select, withKnobs, text } from '@storybook/addon-knobs'
import { action } from '@storybook/addon-actions'

import RadioButtonListItem from './radio-list-item'
import RadioButtonGroup from './radio-group'

const data = [
  {
    value: '1',
    label: 'Choice 1',
    disabled: false
  },
  {
    value: '2',
    label: 'Choice 2',
    disabled: false
  },
  {
    value: '3',
    label: 'Choice 3',
    disabled: false
  },
  {
    value: 'none',
    label: 'None of the above',
    disabled: true
  }
]
const name = 'choice of number'

const stories = storiesOf('Core|Radio Button', module).addDecorator(withInfo)

stories
  .addDecorator(withKnobs)
  .add('Default Radio Button', () => {
    return (
      <div className="w-64">
        <RadioButtonListItem
          name="Radio button"
          checked={boolean('Radio Button 1', false)}
          onChange={action('checkbox')}
        >
          I am default unchecked
        </RadioButtonListItem>
        <RadioButtonListItem
          name="Radio button"
          checked={boolean('Radio Button 2', true)}
          onChange={action('checkbox')}
        >
          I am default checked
        </RadioButtonListItem>
        <RadioButtonListItem
          name="Radio button"
          checked={boolean('Radio Button 3', true)}
          onChange={action('checkbox')}
          disabled
        >
          I am Disabled and checked
        </RadioButtonListItem>
        <RadioButtonListItem
          name="Radio button"
          checked={boolean('Radio Button 4', false)}
          onChange={action('checkbox')}
          disabled
        >
          I am Disabled
        </RadioButtonListItem>
      </div>
    )
  })
  .add('Different theme Radio Button', () => {
    return (
      <div className="w-64">
        <RadioButtonListItem
          name="Radio button"
          theme="primary"
          checked={boolean('Radio Button 1', false)}
        >
          I am default unchecked
        </RadioButtonListItem>
        <RadioButtonListItem
          name="Radio button"
          theme="primary"
          checked={boolean('Radio Button 2', true)}
        >
          I am default checked
        </RadioButtonListItem>
        <RadioButtonListItem
          name="Radio button"
          theme="primary"
          checked={boolean('Radio Button 3', true)}
          disabled
        >
          I am Disabled and checked
        </RadioButtonListItem>
        <RadioButtonListItem
          name="Radio button"
          theme="primary"
          checked={boolean('Radio Button 4', false)}
          disabled
        >
          I am Disabled
        </RadioButtonListItem>
      </div>
    )
  })

  .add('A different position Radio Button', () => {
    return (
      <div className="w-64">
        <RadioButtonListItem
          name="Radio button"
          theme="primary"
          checked={boolean('Radio Button 1', false)}
          labelPosition="left"
        >
          I am default unchecked
        </RadioButtonListItem>
        <RadioButtonListItem
          name="Radio button"
          theme="primary"
          checked={boolean('Radio Button 2', true)}
          labelPosition="left"
        >
          I am default checked
        </RadioButtonListItem>
        <RadioButtonListItem
          name="Radio button"
          theme="primary"
          checked={boolean('Radio Button 3', true)}
          disabled
          labelPosition="left"
        >
          I am Disabled and checked
        </RadioButtonListItem>
        <RadioButtonListItem
          name="Radio button"
          theme="primary"
          checked={boolean('Radio Button 4', false)}
          disabled
          labelPosition="left"
        >
          I am Disabled
        </RadioButtonListItem>
      </div>
    )
  })

  .add(
    'A Radio Button Group',
    () => {
      return (
        <div className="w-48">
          <RadioGroupWrapper
            options={data}
            name={name}
            selected={'1'}
            labelPosition={select('Label Position', ['left', 'right'], 'left')}
            theme={select('Theme', ['secondary', 'primary'], 'secondary')}
          />
        </div>
      )
    },
    {
      info: `
  The Radio Group component takes a prop 'options' which is an array of objects, shaped
  like this: { value: '1', label: 'Choice 1', disabled: false }

  It also must take a 'name' prop (string), which will make it be treated as a group by the browser

  You can optionally pass in a default selection to the group using 'value' prop

  In order to lift the state from the Radio Group, the component which uses it should pass a function
  in as the 'onSelection' prop which sets an appropriate piece of state, like so:

  getSelected = e => this.setState({ selected: e.target.value })

  <RadioButtonGroup onSelection={this.getSelected} />
  `
    }
  )
  .add('A Radio Button Group receives a className', () => {
    return (
      <div className="w-48">
        <RadioGroupWrapper
          className={text('className', '')}
          options={data}
          name={name}
          selected={'1'}
          labelPosition="left"
          theme="secondary"
        />
      </div>
    )
  })

  .add('A Radio Button Group receives a className for the options', () => {
    return (
      <div className="w-48">
        <RadioGroupWrapper
          options={data}
          name={name}
          selected={'1'}
          labelPosition="left"
          theme="secondary"
          optionClass={text('optionClass', 'mr-10')}
        />
      </div>
    )
  })

  .add('A Radio Button Group can have a background on hover', () => {
    return (
      <div className="w-48">
        <RadioGroupWrapper
          options={data}
          name={name}
          selected={'1'}
          labelPosition="left"
          theme="secondary"
          backgroundOnHover={boolean('backgroundOnHover', true)}
        />
      </div>
    )
  })

class RadioGroupWrapper extends React.Component {
  state = {
    selected: this.props.selected
  }

  onSelection = e => this.setState({ selected: e.target.value })

  render() {
    const {
      options,
      labelPosition,
      name,
      theme,
      className,
      backgroundOnHover,
      optionClass
    } = this.props

    return (
      <RadioButtonGroup
        backgroundOnHover={backgroundOnHover}
        optionClass={optionClass}
        className={className}
        name={name}
        options={options}
        labelPosition={labelPosition}
        onChange={this.onSelection}
        value={this.state.selected}
        theme={theme}
      />
    )
  }
}