@swrve/core/src/radio-button/radio-group.jsx

Core set of Swrve UI Components

import React from 'react'
import { arrayOf, bool, func, oneOf, shape, string, oneOfType, object } from 'prop-types'
import RadioButtonListItem from './radio-list-item'

const RadioGroup = ({
  labelPosition,
  onChange,
  options,
  name,
  theme,
  value,
  className,
  backgroundOnHover,
  optionClass,
  ...props
}) => {
  return (
    <div className={className} {...props}>
      {options.map(button => (
        <RadioButtonListItem
          className={optionClass}
          checked={button.value === value}
          disabled={button.disabled}
          name={name}
          labelPosition={labelPosition}
          onChange={onChange}
          theme={theme}
          value={button.value}
          key={button.value}
          backgroundOnHover={backgroundOnHover}
          dataAutomation={button.dataAutomation}
        >
          {button.label}
        </RadioButtonListItem>
      ))}
    </div>
  )
}

RadioGroup.displayName = 'RadioGroup'

RadioGroup.defaultProps = {
  className: '',
  backgroundOnHover: true
}
RadioGroup.propTypes = {
  /** Whether buttons in the group have backgrounds when selected or :hover */
  backgroundOnHover: bool,
  /** Extra css classes to extend from external */
  optionClass: oneOfType([string, object]),
  /** className for container div */
  className: string,
  /** Each radio button's value, label, data-auto tag and whether it is disabled */
  options: arrayOf(
    shape({
      disabled: bool,
      dataAutomation: string,
      label: string,
      value: string
    })
  ).isRequired,
  /** Label Position */
  labelPosition: oneOf(['left', 'right']),
  /** This groups the individual radio buttons */
  name: string.isRequired,
  /**
   *  This function lifts the state to the parent component
   *  and sets the 'selected' prop, which it then passes back down, e.g.:
   *  onChange = e => this.setState({ selected: e.target.value })
   */
  onChange: func.isRequired,
  /** Optional default selected value */
  value: string,
  /** Determines the colours */
  theme: oneOf(['primary', 'secondary'])
}

export default RadioGroup