@grafana/ui/dist/esm/components/Badge/Badge.mjs.map

Grafana Components Library

{"version":3,"file":"Badge.mjs","sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { HTMLAttributes } from 'react';\nimport * as React from 'react';\nimport Skeleton from 'react-loading-skeleton';\nimport tinycolor from 'tinycolor2';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { IconName } from '../../types/icon';\nimport { SkeletonComponent, attachSkeleton } from '../../utils/skeleton';\nimport { Icon } from '../Icon/Icon';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport { PopoverContent } from '../Tooltip/types';\n\nexport type BadgeColor = 'blue' | 'red' | 'green' | 'orange' | 'purple' | 'darkgrey' | 'brand';\n\nexport interface BadgeProps extends HTMLAttributes<HTMLDivElement> {\n  text?: React.ReactNode;\n  color: BadgeColor;\n  icon?: IconName;\n  tooltip?: PopoverContent;\n}\n\nconst BadgeComponent = React.memo<BadgeProps>(({ icon, color, text, tooltip, className, ...otherProps }) => {\n  const styles = useStyles2(getStyles, color);\n  const badge = (\n    <div className={cx(styles.wrapper, className)} {...otherProps}>\n      {icon && <Icon name={icon} size=\"sm\" />}\n      {text}\n    </div>\n  );\n\n  return tooltip ? (\n    <Tooltip content={tooltip} placement=\"auto\">\n      {badge}\n    </Tooltip>\n  ) : (\n    badge\n  );\n});\nBadgeComponent.displayName = 'Badge';\n\nconst BadgeSkeleton: SkeletonComponent = ({ rootProps }) => {\n  const styles = useStyles2(getSkeletonStyles);\n\n  return <Skeleton width={60} height={22} containerClassName={styles.container} {...rootProps} />;\n};\n\nexport const Badge = attachSkeleton(BadgeComponent, BadgeSkeleton);\n\nconst getSkeletonStyles = () => ({\n  container: css({\n    lineHeight: 1,\n  }),\n});\n\nconst getStyles = (theme: GrafanaTheme2, color: BadgeColor) => {\n  let sourceColor = theme.visualization.getColorByName(color);\n  let borderColor = '';\n  let bgColor = '';\n  let textColor = '';\n\n  if (theme.isDark) {\n    bgColor = tinycolor(sourceColor).setAlpha(0.15).toString();\n    borderColor = tinycolor(sourceColor).setAlpha(0.25).toString();\n    textColor = tinycolor(sourceColor).lighten(15).toString();\n  } else {\n    bgColor = tinycolor(sourceColor).setAlpha(0.15).toString();\n    borderColor = tinycolor(sourceColor).setAlpha(0.25).toString();\n    textColor = tinycolor(sourceColor).darken(20).toString();\n  }\n\n  if (color === 'brand') {\n    bgColor = theme.colors.gradients.brandHorizontal;\n    borderColor = 'transparent';\n    textColor = theme.colors.primary.contrastText;\n  }\n\n  return {\n    wrapper: css({\n      display: 'inline-flex',\n      padding: '1px 4px',\n      borderRadius: theme.shape.radius.default,\n      background: bgColor,\n      border: `1px solid ${borderColor}`,\n      color: textColor,\n      fontWeight: theme.typography.fontWeightRegular,\n      gap: theme.spacing(0.5),\n      fontSize: theme.typography.bodySmall.fontSize,\n      lineHeight: theme.typography.bodySmall.lineHeight,\n      alignItems: 'center',\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}