Sha256: 8ddd5b7ff4ce38fce1cc457deaf0695dbee5ffda04c06f758236e5fa15d67166

Contents?: true

Size: 1.68 KB

Versions: 8

Compression:

Stored size: 1.68 KB

Contents

import React from 'react'
import classnames from 'classnames'

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

import Icon from '../pb_icon/_icon'

type BadgeProps = {
  aria?: {[key: string]: string},
  className?: string,
  closeProps?: {
    onClick?: React.MouseEventHandler<HTMLSpanElement>,
    onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
    onTouchEnd?: React.TouchEventHandler<HTMLSpanElement>,
  },
  data?: {[key: string]: string},
  id?: string,
  removeIcon?: boolean,
  removeOnClick?: React.MouseEventHandler<HTMLSpanElement>,
  rounded?: boolean,
  text?: string,
  variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
} & GlobalProps

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 ? 'rounded' : null),
    globalProps(props),
    className
  )

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

export default Badge

Version data entries

8 entries across 8 versions & 1 rubygems

Version Path
playbook_ui-11.0.0.pre.alpha.2 app/pb_kits/playbook/pb_badge/_badge.tsx
playbook_ui-11.0.0.pre.alpha.1 app/pb_kits/playbook/pb_badge/_badge.tsx
playbook_ui-10.26.1 app/pb_kits/playbook/pb_badge/_badge.tsx
playbook_ui-10.27.0.pre.lazysizes1 app/pb_kits/playbook/pb_badge/_badge.tsx
playbook_ui-10.27.0.pre.datepicker1 app/pb_kits/playbook/pb_badge/_badge.tsx
playbook_ui-10.26.0 app/pb_kits/playbook/pb_badge/_badge.tsx
playbook_ui-10.26.0.pre.alpha5 app/pb_kits/playbook/pb_badge/_badge.tsx
playbook_ui-10.26.0.pre.rc1 app/pb_kits/playbook/pb_badge/_badge.tsx