@grafana/ui/dist/cjs/components/Badge/Badge.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var Skeleton = require('react-loading-skeleton');
var tinycolor = require('tinycolor2');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var skeleton = require('../../utils/skeleton.cjs');
var Icon = require('../Icon/Icon.cjs');
var Tooltip = require('../Tooltip/Tooltip.cjs');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

function _interopNamespaceCompat(e) {
  if (e && typeof e === 'object' && 'default' in e) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
var Skeleton__default = /*#__PURE__*/_interopDefaultCompat(Skeleton);
var tinycolor__default = /*#__PURE__*/_interopDefaultCompat(tinycolor);

"use strict";
const BadgeComponent = React__namespace.memo(({ icon, color, text, tooltip, className, ...otherProps }) => {
  const styles = ThemeContext.useStyles2(getStyles, color);
  const badge = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: css.cx(styles.wrapper, className), ...otherProps, children: [
    icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.iconWrap, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, size: "sm" }) }),
    text
  ] });
  return tooltip ? /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltip, placement: "auto", children: badge }) : badge;
});
BadgeComponent.displayName = "Badge";
const BadgeSkeleton = ({ rootProps }) => {
  const styles = ThemeContext.useStyles2(getSkeletonStyles);
  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton__default.default, { width: 60, height: 22, containerClassName: styles.container, ...rootProps });
};
const Badge = skeleton.attachSkeleton(BadgeComponent, BadgeSkeleton);
const getSkeletonStyles = () => ({
  container: css.css({
    lineHeight: 1
  })
});
const getStyles = (theme, color) => {
  let sourceColor = theme.visualization.getColorByName(color);
  let borderColor = "";
  let bgColor = "";
  let textColor = "";
  if (theme.isDark) {
    bgColor = tinycolor__default.default(sourceColor).setAlpha(0.15).toString();
    borderColor = tinycolor__default.default(sourceColor).setAlpha(0.25).toString();
    textColor = tinycolor__default.default(sourceColor).lighten(15).toString();
  } else {
    bgColor = tinycolor__default.default(sourceColor).setAlpha(0.15).toString();
    borderColor = tinycolor__default.default(sourceColor).setAlpha(0.25).toString();
    textColor = tinycolor__default.default(sourceColor).darken(25).toString();
  }
  if (color === "brand") {
    bgColor = theme.colors.gradients.brandHorizontal;
    borderColor = "transparent";
    textColor = theme.colors.primary.contrastText;
  }
  return {
    wrapper: css.css({
      display: "inline-flex",
      padding: "1px 4px",
      borderRadius: theme.shape.radius.sm,
      background: bgColor,
      border: `1px solid ${borderColor}`,
      color: textColor,
      fontWeight: theme.typography.fontWeightRegular,
      gap: theme.spacing(0.5),
      fontSize: theme.typography.bodySmall.fontSize,
      lineHeight: theme.typography.bodySmall.lineHeight,
      alignItems: "flex-start",
      "&:focus-visible": {
        outline: `2px solid ${theme.colors.accent.main}`,
        outlineOffset: "-2px"
      }
    }),
    iconWrap: css.css({
      display: "inline-flex",
      alignItems: "center",
      height: "1lh"
    })
  };
};

exports.Badge = Badge;
//# sourceMappingURL=Badge.cjs.map