Sha256: b5c8bf1692d5a5a1d39c7ba08090a4d1fb21dd777ffc1725e1343e3cdb053946

Contents?: true

Size: 1.52 KB

Versions: 2

Compression:

Stored size: 1.52 KB

Contents

/* @flow */
/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */

import React from 'react'
import Body from '../pb_body/_body.jsx'
import classnames from 'classnames'
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
import { globalProps } from '../utilities/globalProps.js'

type RadioProps = {
  aria?: object,
  checked?: Boolean,
  children?: Node,
  className?: String,
  dark?: boolean,
  data?: object,
  error?: Boolean,
  id?: String,
  label: String,
  name: String,
  value: String,
  onChange: (Boolean)=>void,
}

const Radio = ({
  aria = {},
  children,
  className,
  dark = false,
  data = {},
  error = false,
  id,
  label,
  name = 'radio_name',
  value = 'radio_text',
  onChange = () => {},
  ...props
}: RadioProps) => {
  const ariaProps = buildAriaProps(aria)
  const dataProps = buildDataProps(data)
  const classes = classnames(buildCss('pb_radio_kit'), { error }, { dark }, globalProps(props), className)

  return (
    <label
        {...ariaProps}
        {...dataProps}
        className={classes}
        htmlFor={id}
    >
      <If condition={children}>
        {children}
        <Else />
        <input
            {...props}
            id={id}
            name={name}
            onChange={onChange}
            type="radio"
            value={value}
        />
      </If>
      <span className="pb_radio_button" />
      <Body
          dark={dark}
          status={error ? 'negative' : null}
          text={label}
      />
    </label>
  )
}

export default Radio

Version data entries

2 entries across 2 versions & 1 rubygems

Version Path
playbook_ui-7.4.0.pre.alpha6 app/pb_kits/playbook/pb_radio/_radio.jsx
playbook_ui-7.4.0.pre.alpha4 app/pb_kits/playbook/pb_radio/_radio.jsx