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

Core set of Swrve UI Components

import React from 'react'

import { action } from '@storybook/addon-actions'

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

const radioStoryArgs = {
  radio1: false,
  radio2: true,
  radio3: true,
  radio4: false
}
const radioStoryArgTypes = {
  radio1: {
    name: 'Radio 1',
    control: 'boolean'
  },
  radio2: {
    name: 'Radio 2',
    control: 'boolean'
  },
  radio3: {
    name: 'Radio 3',
    control: 'boolean'
  },
  radio4: {
    name: 'Radio 4',
    control: 'boolean'
  }
}
const data = [
  {
    value: '1',
    label: 'Choice 1',
    disabled: false,
    dataAutomation: 'sw-radio-1'
  },
  {
    value: '2',
    label: 'Choice 2',
    disabled: false,
    dataAutomation: 'sw-radio-2'
  },
  {
    value: '3',
    label: 'Choice 3',
    disabled: false,
    dataAutomation: 'sw-radio-3'
  },
  {
    value: 'none',
    label: 'None of the above',
    disabled: true,
    dataAutomation: 'sw-radio-4'
  }
]
const name = 'choice of number'

export default {
  title: 'Core/Radio Button',
  component: RadioButtonListItem
}
export const DefaultRadioButton = args => {
  return (
    <div className="w-64">
      <RadioButtonListItem
        name="Radio button"
        checked={args.radio1}
        onChange={action('checkbox')}
        {...args}
      >
        I am default unchecked
      </RadioButtonListItem>
      <RadioButtonListItem
        name="Radio button"
        checked={args.radio2}
        onChange={action('checkbox')}
        {...args}
      >
        I am default checked
      </RadioButtonListItem>
      <RadioButtonListItem
        name="Radio button"
        checked={args.radio3}
        onChange={action('checkbox')}
        disabled
        {...args}
      >
        I am Disabled and checked
      </RadioButtonListItem>
      <RadioButtonListItem
        name="Radio button"
        checked={args.radio4}
        onChange={action('checkbox')}
        disabled
        {...args}
      >
        I am Disabled
      </RadioButtonListItem>
    </div>
  )
}

DefaultRadioButton.storyName = 'Default Radio Button'
DefaultRadioButton.args = radioStoryArgs
DefaultRadioButton.argTypes = radioStoryArgTypes

export const DifferentThemeRadioButton = args => {
  return (
    <div className="w-64">
      <RadioButtonListItem name="Radio button" theme="primary" checked={args.radio1} {...args}>
        I am default unchecked
      </RadioButtonListItem>
      <RadioButtonListItem name="Radio button" theme="primary" checked={args.radio2} {...args}>
        I am default checked
      </RadioButtonListItem>
      <RadioButtonListItem
        name="Radio button"
        theme="primary"
        checked={args.radio3}
        disabled
        {...args}
      >
        I am Disabled and checked
      </RadioButtonListItem>
      <RadioButtonListItem
        name="Radio button"
        theme="primary"
        checked={args.radio4}
        disabled
        {...args}
      >
        I am Disabled
      </RadioButtonListItem>
    </div>
  )
}

DifferentThemeRadioButton.storyName = 'Different theme Radio Button'
DifferentThemeRadioButton.args = radioStoryArgs
DifferentThemeRadioButton.argTypes = radioStoryArgTypes

export const ADifferentPositionRadioButton = args => {
  return (
    <div className="w-64">
      <RadioButtonListItem
        name="Radio button"
        theme="primary"
        checked={args.radio1}
        labelPosition="left"
        {...args}
      >
        I am default unchecked
      </RadioButtonListItem>
      <RadioButtonListItem
        name="Radio button"
        theme="primary"
        checked={args.radio2}
        labelPosition="left"
        {...args}
      >
        I am default checked
      </RadioButtonListItem>
      <RadioButtonListItem
        name="Radio button"
        theme="primary"
        checked={args.radio3}
        disabled
        labelPosition="left"
        {...args}
      >
        I am Disabled and checked
      </RadioButtonListItem>
      <RadioButtonListItem
        name="Radio button"
        theme="primary"
        checked={args.radio4}
        disabled
        labelPosition="left"
        {...args}
      >
        I am Disabled
      </RadioButtonListItem>
    </div>
  )
}

ADifferentPositionRadioButton.storyName = 'A different position Radio Button'
ADifferentPositionRadioButton.args = radioStoryArgs
ADifferentPositionRadioButton.argTypes = radioStoryArgTypes

export const ARadioButtonGroup = args => {
  return (
    <div className="w-48">
      <RadioGroupWrapper
        options={data}
        name={name}
        selected={'1'}
        labelPosition="left"
        theme="secondary"
        {...args}
      />
    </div>
  )
}

ARadioButtonGroup.parameters = {
  docs: {
    description: {
      story: `The Radio Group component takes a prop 'options' which is an array of objects, shaped like this:    
      <br><code> { value: '1', label: 'Choice 1', disabled: false, dataAutomation: 'sw-radio-1' }</code><br>  
      It also must take a 'name' prop (string), which will make it be treated as a group by the browser  
      <br>  
      You can optionally pass in a default selection to the group using 'value' prop which takes a string i.e. {'1'}  
      <br> 
      In order to lift the state from the Radio Group, the component which uses it should pass a function
      in as the 'onChange' prop which sets an appropriate piece of state, like so:


      
      state = {
        selected: this.props.selected
      }
      
      onSelection = e => this.setState({ selected: e.target.value })
      
      return (
          <RadioButtonGroup onChange={this.onSelection} />
      )`
    }
  }
}

export const ARadioButtonGroupReceivesAClassName = args => {
  return (
    <div className="w-48">
      <RadioGroupWrapper
        className=""
        options={data}
        name={name}
        selected={'1'}
        labelPosition="left"
        theme="secondary"
        {...args}
      />
    </div>
  )
}

ARadioButtonGroupReceivesAClassName.storyName = 'A Radio Button Group receives a className'

export const ARadioButtonGroupReceivesAClassNameForTheOptions = args => {
  return (
    <div className="w-48">
      <RadioGroupWrapper
        options={data}
        name={name}
        selected={'1'}
        labelPosition="left"
        theme="secondary"
        optionClass="mr-10"
        {...args}
      />
    </div>
  )
}

ARadioButtonGroupReceivesAClassNameForTheOptions.storyName =
  'A Radio Button Group receives a className for the options'

export const ARadioButtonGroupCanHaveABackgroundOnHover = args => {
  return (
    <div className="w-48">
      <RadioGroupWrapper
        options={data}
        name={name}
        selected={'1'}
        labelPosition="left"
        theme="secondary"
        backgroundOnHover={true}
        {...args}
      />
    </div>
  )
}

ARadioButtonGroupCanHaveABackgroundOnHover.storyName =
  'A Radio Button Group can have a background on hover'

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}
      />
    )
  }
}