Sha256: 975ff8d7f95eba05ed4fd406b45a83a1737df7fe50f676173ebf8d3f2355d78b

Contents?: true

Size: 1.75 KB

Versions: 2

Compression:

Stored size: 1.75 KB

Contents

/* @flow */

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

type CheckboxProps = {
  aria?: object,
  checked?: boolean,
  className?: string,
  dark?: boolean,
  data?: object,
  error?: boolean,
  id?: string,
  name: string,
  text: string,
  value: string,
  children: Node,
  onChange: (boolean) => void,
}

const Checkbox = (props: CheckboxProps) => {
  const {
    aria = {},
    checked = false,
    className,
    dark = false,
    data = {},
    error = false,
    id,
    name = '',
    text = '',
    value = '',
    children = null,
    onChange = () => {},
  } = props

  const dataProps = buildDataProps(data)
  const ariaProps = buildAriaProps(aria)
  const classes = classnames(
    buildCss('pb_checkbox_kit', { checked, error }),
    globalProps(props),
    className
  )

  return (
    <label
        {...ariaProps}
        {...dataProps}
        className={classes}
        htmlFor={id}
    >
      <If condition={children}>
        {children}
        <Else />
        <input
            defaultChecked={checked}
            id={id}
            name={name}
            onChange={onChange}
            type="checkbox"
            value={value}
        />
      </If>

      <span className="pb_checkbox_checkmark">
        <Icon
            className="check_icon"
            fixedWidth
            icon="check"
        />
      </span>
      <Body
          className="pb_checkbox_label"
          dark={dark}
          status={error ? 'negative' : null}
      >
        {text}
      </Body>
    </label>
  )
}

export default Checkbox

Version data entries

2 entries across 2 versions & 1 rubygems

Version Path
playbook_ui-7.4.0.pre.alpha6 app/pb_kits/playbook/pb_checkbox/_checkbox.jsx
playbook_ui-7.4.0.pre.alpha4 app/pb_kits/playbook/pb_checkbox/_checkbox.jsx