pouncejs

Version:
A collection of UI components from Panther labs
44 lines (42 loc) • 1.8 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import React from 'react';
import Box from '../Box';
import { addOpacity } from '../../utils/helpers';
import useTheme from '../../utils/useTheme';

/** A badge is simply a visual label to accompany & characterize a certain text*/
var Badge = /*#__PURE__*/React.forwardRef(function Badge(_ref, ref) {
  var color = _ref.color,
      children = _ref.children,
      _ref$stretch = _ref.stretch,
      stretch = _ref$stretch === void 0 ? false : _ref$stretch,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'medium' : _ref$size,
      _ref$emphasized = _ref.emphasized,
      emphasized = _ref$emphasized === void 0 ? false : _ref$emphasized,
      hasSolidBackground = _ref.hasSolidBackground,
      rest = _objectWithoutPropertiesLoose(_ref, ["color", "children", "stretch", "size", "emphasized", "hasSolidBackground"]);

  var theme = useTheme();
  var hasMediumSize = size === 'medium';
  return /*#__PURE__*/React.createElement(Box, _extends({
    display: "flex",
    role: "status",
    "aria-atomic": "true",
    ref: ref,
    cursor: "default",
    width: stretch ? 'auto' : 'fit-content',
    textAlign: "center",
    fontWeight: emphasized ? 'bold' : 'normal',
    textTransform: emphasized ? 'uppercase' : 'none',
    border: "1px solid",
    borderRadius: "small",
    borderColor: color,
    backgroundColor: hasSolidBackground ? color : addOpacity(theme.colors[color], 0.3),
    alignItems: "center",
    justifyContent: "center",
    fontSize: hasMediumSize ? 'small' : 'x-small',
    py: hasMediumSize ? 1 : 0,
    px: hasMediumSize ? '6px' : 1
  }, rest), children);
});
export default /*#__PURE__*/React.memo(Badge);