Contents

/* @flow */

import React from 'react'
import classnames from 'classnames'
import { globalProps } from '../utilities/globalProps.js'
import { Icon } from '../'

import {
  buildAriaProps,
  buildCss,
  buildDataProps,
} from '../utilities/props'

type BadgeProps = {
  aria?: object,
  className?: string,
  closeProps?: {
    onClick?: EventHandler,
    onMouseDown?: EventHandler,
    onTouchEnd?: EventHandler,
  },
  data?: object,
  id?: string,
  removeIcon?: Boolean,
  removeOnClick?: EventHandler,
  rounded?: boolean,
  text?: string,
  variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
}
const Badge = (props: BadgeProps) => {
  const {
    aria = {},
    className,
    closeProps = {},
    data = {},
    id,
    removeIcon = false,
    removeOnClick = () => {},
    rounded = false,
    text,
    variant = 'neutral',
  } = props
  const ariaProps = buildAriaProps(aria)
  const dataProps = buildDataProps(data)
  const css = classnames(
    buildCss('pb_badge_kit', variant, { rounded }),
    globalProps(props),
    className
  )

  return (
    <div
        {...ariaProps}
        {...dataProps}
        className={css}
        id={id}
    >
      <span>
        <If condition={removeIcon}>
          <span
              onClick={removeOnClick}
              style={{ cursor: 'pointer' }}
              {...closeProps}
          >
            <Icon
                fixedWidth
                icon="times"
            />
          </span>
        </If>
        {text}
      </span>
    </div>
  )
}

export default Badge

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
playbook_ui-8.2.1.pre.alpha1	app/pb_kits/playbook/pb_badge/_badge.jsx
playbook_ui-8.1.0.pre.alpha1	app/pb_kits/playbook/pb_badge/_badge.jsx