@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 { type HTMLAttributes } from 'react';\nimport * as React from 'react';\nimport Skeleton from 'react-loading-skeleton';\nimport tinycolor from 'tinycolor2';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { type IconName } from '../../types/icon';\nimport { type SkeletonComponent, attachSkeleton } from '../../utils/skeleton';\nimport { Icon } from '../Icon/Icon';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport { type 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 && (\n        <span className={styles.iconWrap}>\n          <Icon name={icon} size=\"sm\" />\n        </span>\n      )}\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\n/**\n * The badge component adds meta information to other content, for example about release status or new elements. You can add any `Icon` component or use the badge without an icon.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-badge--docs\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(25).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.sm,\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: 'flex-start',\n\n      '&:focus-visible': {\n        outline: `2px solid ${theme.colors.accent.main}`,\n        outlineOffset: '-2px',\n      },\n    }),\n    iconWrap: css({\n      display: 'inline-flex',\n      alignItems: 'center',\n      height: '1lh',\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAwBA,MAAM,cAAA,GAAiB,KAAA,CAAM,IAAA,CAAiB,CAAC,EAAE,IAAA,EAAM,KAAA,EAAO,IAAA,EAAM,OAAA,EAAS,SAAA,EAAW,GAAG,UAAA,EAAW,KAAM;AAC1G,EAAA,MAAM,MAAA,GAAS,UAAA,CAAW,SAAA,EAAW,KAAK,CAAA;AAC1C,EAAA,MAAM,KAAA,mBACJ,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,OAAO,OAAA,EAAS,SAAS,CAAA,EAAI,GAAG,UAAA,EAChD,QAAA,EAAA;AAAA,IAAA,IAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,QAAA,EACtB,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAM,IAAA,EAAM,IAAA,EAAK,IAAA,EAAK,CAAA,EAC9B,CAAA;AAAA,IAED;AAAA,GAAA,EACH,CAAA;AAGF,EAAA,OAAO,OAAA,uBACJ,OAAA,EAAA,EAAQ,OAAA,EAAS,SAAS,SAAA,EAAU,MAAA,EAClC,iBACH,CAAA,GAEA,KAAA;AAEJ,CAAC,CAAA;AACD,cAAA,CAAe,WAAA,GAAc,OAAA;AAE7B,MAAM,aAAA,GAAmC,CAAC,EAAE,SAAA,EAAU,KAAM;AAC1D,EAAA,MAAM,MAAA,GAAS,WAAW,iBAAiB,CAAA;AAE3C,EAAA,uBAAO,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAO,EAAA,EAAI,MAAA,EAAQ,IAAI,kBAAA,EAAoB,MAAA,CAAO,SAAA,EAAY,GAAG,SAAA,EAAW,CAAA;AAC/F,CAAA;AAOO,MAAM,KAAA,GAAQ,cAAA,CAAe,cAAA,EAAgB,aAAa;AAEjE,MAAM,oBAAoB,OAAO;AAAA,EAC/B,WAAW,GAAA,CAAI;AAAA,IACb,UAAA,EAAY;AAAA,GACb;AACH,CAAA,CAAA;AAEA,MAAM,SAAA,GAAY,CAAC,KAAA,EAAsB,KAAA,KAAsB;AAC7D,EAAA,IAAI,WAAA,GAAc,KAAA,CAAM,aAAA,CAAc,cAAA,CAAe,KAAK,CAAA;AAC1D,EAAA,IAAI,WAAA,GAAc,EAAA;AAClB,EAAA,IAAI,OAAA,GAAU,EAAA;AACd,EAAA,IAAI,SAAA,GAAY,EAAA;AAEhB,EAAA,IAAI,MAAM,MAAA,EAAQ;AAChB,IAAA,OAAA,GAAU,UAAU,WAAW,CAAA,CAAE,QAAA,CAAS,IAAI,EAAE,QAAA,EAAS;AACzD,IAAA,WAAA,GAAc,UAAU,WAAW,CAAA,CAAE,QAAA,CAAS,IAAI,EAAE,QAAA,EAAS;AAC7D,IAAA,SAAA,GAAY,UAAU,WAAW,CAAA,CAAE,OAAA,CAAQ,EAAE,EAAE,QAAA,EAAS;AAAA,EAC1D,CAAA,MAAO;AACL,IAAA,OAAA,GAAU,UAAU,WAAW,CAAA,CAAE,QAAA,CAAS,IAAI,EAAE,QAAA,EAAS;AACzD,IAAA,WAAA,GAAc,UAAU,WAAW,CAAA,CAAE,QAAA,CAAS,IAAI,EAAE,QAAA,EAAS;AAC7D,IAAA,SAAA,GAAY,UAAU,WAAW,CAAA,CAAE,MAAA,CAAO,EAAE,EAAE,QAAA,EAAS;AAAA,EACzD;AAEA,EAAA,IAAI,UAAU,OAAA,EAAS;AACrB,IAAA,OAAA,GAAU,KAAA,CAAM,OAAO,SAAA,CAAU,eAAA;AACjC,IAAA,WAAA,GAAc,aAAA;AACd,IAAA,SAAA,GAAY,KAAA,CAAM,OAAO,OAAA,CAAQ,YAAA;AAAA,EACnC;AAEA,EAAA,OAAO;AAAA,IACL,SAAS,GAAA,CAAI;AAAA,MACX,OAAA,EAAS,aAAA;AAAA,MACT,OAAA,EAAS,SAAA;AAAA,MACT,YAAA,EAAc,KAAA,CAAM,KAAA,CAAM,MAAA,CAAO,EAAA;AAAA,MACjC,UAAA,EAAY,OAAA;AAAA,MACZ,MAAA,EAAQ,aAAa,WAAW,CAAA,CAAA;AAAA,MAChC,KAAA,EAAO,SAAA;AAAA,MACP,UAAA,EAAY,MAAM,UAAA,CAAW,iBAAA;AAAA,MAC7B,GAAA,EAAK,KAAA,CAAM,OAAA,CAAQ,GAAG,CAAA;AAAA,MACtB,QAAA,EAAU,KAAA,CAAM,UAAA,CAAW,SAAA,CAAU,QAAA;AAAA,MACrC,UAAA,EAAY,KAAA,CAAM,UAAA,CAAW,SAAA,CAAU,UAAA;AAAA,MACvC,UAAA,EAAY,YAAA;AAAA,MAEZ,iBAAA,EAAmB;AAAA,QACjB,OAAA,EAAS,CAAA,UAAA,EAAa,KAAA,CAAM,MAAA,CAAO,OAAO,IAAI,CAAA,CAAA;AAAA,QAC9C,aAAA,EAAe;AAAA;AACjB,KACD,CAAA;AAAA,IACD,UAAU,GAAA,CAAI;AAAA,MACZ,OAAA,EAAS,aAAA;AAAA,MACT,UAAA,EAAY,QAAA;AAAA,MACZ,MAAA,EAAQ;AAAA,KACT;AAAA,GACH;AACF,CAAA;;;;"}