@swrve/core/src/radio-button/radio-list-item.jsx

Core set of Swrve UI Components

import React from 'react'
import classNames from 'classnames'
import { bool, func, node, object, oneOf, oneOfType, string } from 'prop-types'

import RadioButton from './radio-button'

const RadioButtonListItem = ({
  checked,
  children,
  className,
  dataAutomation,
  disabled,
  labelPosition,
  name,
  onChange,
  theme,
  value,
  backgroundOnHover,
  ...props
}) => {
  const isLabelLeftAligned = labelPosition === 'left'

  const labelStyles = classNames(
    `sw-control-label focus-within:shadow-outline`,
    {
      'text-regentGrey ': !checked,
      [`text-${theme}-100`]: checked && !disabled,
      [`bg-${theme}-10`]: checked && !disabled && backgroundOnHover,
      [`hover:bg-${theme}-10 hover:text-${theme}-100`]: !disabled && backgroundOnHover,
      'justify-between': isLabelLeftAligned
    },
    className
  )
  const textStyles = classNames(
    'text-sm',
    { 'order-0': isLabelLeftAligned },
    { 'pl-4': !isLabelLeftAligned }
  )

  const styles = classNames({ 'order-1': isLabelLeftAligned })

  return (
    <label className={labelStyles} {...props}>
      <RadioButton
        onChange={onChange}
        checked={checked}
        disabled={disabled}
        dataAutomation={dataAutomation}
        theme={theme}
        className={styles}
        value={value}
        name={name}
      />
      <span className={textStyles}>{children}</span>
    </label>
  )
}

RadioButtonListItem.displayName = 'RadioButtonListItem'

RadioButtonListItem.propTypes = {
  /** Whether buttons in the group have backgrounds when selected or :hover */
  backgroundOnHover: bool,
  /** Determine whether or not radio button is checked */
  checked: bool,
  /** Label for radio button */
  children: node,
  /** Extra css classes to extend from external */
  className: oneOfType([string, object]),
  /** Data-automation tag for testing */
  dataAutomation: string,
  /** Determine wether or not radio button is disabled */
  disabled: bool,
  /** Radio button onchange handler */
  labelPosition: oneOf(['left', 'right']),
  /** Name attribute, used for radio group */
  name: string.isRequired,
  /** Radio button selection handler */
  onChange: func.isRequired,
  /** Determines the border style */
  theme: oneOf(['primary', 'secondary']).isRequired,
  /** Value for radio button */
  value: string
}

RadioButtonListItem.defaultProps = {
  checked: false,
  className: '',
  dataAutomation: null,
  disabled: false,
  theme: 'secondary',
  labelPosition: 'right',
  backgroundOnHover: true,
  onChange: () => {}
}

export default RadioButtonListItem