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

Grafana Components Library

{"version":3,"file":"Alert.mjs","sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { AriaRole, HTMLAttributes, ReactNode } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { t } from '@grafana/i18n';\n\nimport { useTheme2 } from '../../themes/ThemeContext';\nimport { IconName } from '../../types/icon';\nimport { Button } from '../Button/Button';\nimport { Icon } from '../Icon/Icon';\nimport { Box } from '../Layout/Box/Box';\nimport { Text } from '../Text/Text';\nexport type AlertVariant = 'success' | 'warning' | 'error' | 'info';\n\nexport interface Props extends HTMLAttributes<HTMLDivElement> {\n  title: string;\n  /** On click handler for alert button, mostly used for dismissing the alert */\n  onRemove?: (event: React.MouseEvent) => void;\n  severity?: AlertVariant;\n  children?: ReactNode;\n  elevated?: boolean;\n  buttonContent?: React.ReactNode | string;\n  bottomSpacing?: number;\n  topSpacing?: number;\n}\n\nexport const Alert = React.forwardRef<HTMLDivElement, Props>(\n  (\n    {\n      title,\n      onRemove,\n      children,\n      buttonContent,\n      elevated,\n      bottomSpacing,\n      topSpacing,\n      className,\n      severity = 'error',\n      ...restProps\n    },\n    ref\n  ) => {\n    const theme = useTheme2();\n    const hasTitle = Boolean(title);\n    const styles = getStyles(theme, severity, hasTitle, elevated, bottomSpacing, topSpacing);\n    const rolesBySeverity: Record<AlertVariant, AriaRole> = {\n      error: 'alert',\n      warning: 'alert',\n      info: 'status',\n      success: 'status',\n    };\n    const role = restProps['role'] || rolesBySeverity[severity];\n    const ariaLabel = restProps['aria-label'] || title;\n\n    const closeLabel = t('grafana-ui.alert.close-button', 'Close alert');\n\n    return (\n      <div ref={ref} className={cx(styles.wrapper, className)} role={role} aria-label={ariaLabel} {...restProps}>\n        <Box\n          data-testid={selectors.components.Alert.alertV2(severity)}\n          display=\"flex\"\n          backgroundColor={severity}\n          borderRadius=\"default\"\n          paddingY={1}\n          paddingX={2}\n          borderStyle=\"solid\"\n          borderColor={severity}\n          alignItems=\"stretch\"\n          boxShadow={elevated ? 'z3' : undefined}\n        >\n          <Box paddingTop={1} paddingRight={2}>\n            <div className={styles.icon}>\n              <Icon size=\"xl\" name={getIconFromSeverity(severity)} />\n            </div>\n          </Box>\n\n          <Box paddingY={1} grow={1}>\n            <Text color=\"primary\" weight=\"medium\">\n              {title}\n            </Text>\n            {children && <div className={styles.content}>{children}</div>}\n          </Box>\n          {/* If onRemove is specified, giving preference to onRemove */}\n          {onRemove && !buttonContent && (\n            <div className={styles.close}>\n              <Button\n                aria-label={closeLabel}\n                icon=\"times\"\n                onClick={onRemove}\n                type=\"button\"\n                fill=\"text\"\n                variant=\"secondary\"\n              />\n            </div>\n          )}\n\n          {onRemove && buttonContent && (\n            <Box marginLeft={1} display=\"flex\" alignItems=\"center\">\n              <Button aria-label={closeLabel} variant=\"secondary\" onClick={onRemove} type=\"button\">\n                {buttonContent}\n              </Button>\n            </Box>\n          )}\n        </Box>\n      </div>\n    );\n  }\n);\n\nAlert.displayName = 'Alert';\n\nexport const getIconFromSeverity = (severity: AlertVariant): IconName => {\n  switch (severity) {\n    case 'error':\n      return 'exclamation-circle';\n    case 'warning':\n      return 'exclamation-triangle';\n    case 'info':\n      return 'info-circle';\n    case 'success':\n      return 'check';\n  }\n};\n\nconst getStyles = (\n  theme: GrafanaTheme2,\n  severity: AlertVariant,\n  hasTitle: boolean,\n  elevated?: boolean,\n  bottomSpacing?: number,\n  topSpacing?: number\n) => {\n  const color = theme.colors[severity];\n\n  return {\n    wrapper: css({\n      flexGrow: 1,\n      marginBottom: theme.spacing(bottomSpacing ?? 2),\n      marginTop: theme.spacing(topSpacing ?? 0),\n      position: 'relative',\n\n      '&:before': {\n        content: '\"\"',\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        bottom: 0,\n        right: 0,\n        background: theme.colors.background.primary,\n        zIndex: -1,\n      },\n    }),\n    icon: css({\n      color: color.text,\n      position: 'relative',\n      top: '-1px',\n    }),\n    content: css({\n      color: theme.colors.text.primary,\n      paddingTop: hasTitle ? theme.spacing(0.5) : 0,\n      maxHeight: '50vh',\n      overflowY: 'auto',\n    }),\n    close: css({\n      position: 'relative',\n      color: theme.colors.text.secondary,\n      background: 'none',\n      display: 'flex',\n      top: '-6px',\n      right: '-14px',\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;AA4BO,MAAM,QAAQ,KAAM,CAAA,UAAA;AAAA,EACzB,CACE;AAAA,IACE,KAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,aAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,OAAA;AAAA,IACX,GAAG;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,IAAM,MAAA,QAAA,GAAW,QAAQ,KAAK,CAAA;AAC9B,IAAA,MAAM,SAAS,SAAU,CAAA,KAAA,EAAO,UAAU,QAAU,EAAA,QAAA,EAAU,eAAe,UAAU,CAAA;AACvF,IAAA,MAAM,eAAkD,GAAA;AAAA,MACtD,KAAO,EAAA,OAAA;AAAA,MACP,OAAS,EAAA,OAAA;AAAA,MACT,IAAM,EAAA,QAAA;AAAA,MACN,OAAS,EAAA;AAAA,KACX;AACA,IAAA,MAAM,IAAO,GAAA,SAAA,CAAU,MAAM,CAAA,IAAK,gBAAgB,QAAQ,CAAA;AAC1D,IAAM,MAAA,SAAA,GAAY,SAAU,CAAA,YAAY,CAAK,IAAA,KAAA;AAE7C,IAAM,MAAA,UAAA,GAAa,CAAE,CAAA,+BAAA,EAAiC,aAAa,CAAA;AAEnE,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA,EAAI,GAAU,EAAA,SAAA,EAAW,EAAG,CAAA,MAAA,CAAO,OAAS,EAAA,SAAS,CAAG,EAAA,IAAA,EAAY,YAAY,EAAA,SAAA,EAAY,GAAG,SAC9F,EAAA,QAAA,kBAAA,IAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,aAAa,EAAA,SAAA,CAAU,UAAW,CAAA,KAAA,CAAM,QAAQ,QAAQ,CAAA;AAAA,QACxD,OAAQ,EAAA,MAAA;AAAA,QACR,eAAiB,EAAA,QAAA;AAAA,QACjB,YAAa,EAAA,SAAA;AAAA,QACb,QAAU,EAAA,CAAA;AAAA,QACV,QAAU,EAAA,CAAA;AAAA,QACV,WAAY,EAAA,OAAA;AAAA,QACZ,WAAa,EAAA,QAAA;AAAA,QACb,UAAW,EAAA,SAAA;AAAA,QACX,SAAA,EAAW,WAAW,IAAO,GAAA,KAAA,CAAA;AAAA,QAE7B,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,OAAI,UAAY,EAAA,CAAA,EAAG,cAAc,CAChC,EAAA,QAAA,kBAAA,GAAA,CAAC,SAAI,SAAW,EAAA,MAAA,CAAO,MACrB,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,MAAK,IAAK,EAAA,IAAA,EAAM,oBAAoB,QAAQ,CAAA,EAAG,GACvD,CACF,EAAA,CAAA;AAAA,0BAEC,IAAA,CAAA,GAAA,EAAA,EAAI,QAAU,EAAA,CAAA,EAAG,MAAM,CACtB,EAAA,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,IAAK,EAAA,EAAA,KAAA,EAAM,SAAU,EAAA,MAAA,EAAO,UAC1B,QACH,EAAA,KAAA,EAAA,CAAA;AAAA,YACC,4BAAa,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,SAAU,QAAS,EAAA;AAAA,WACzD,EAAA,CAAA;AAAA,UAEC,YAAY,CAAC,aAAA,wBACX,KAAI,EAAA,EAAA,SAAA,EAAW,OAAO,KACrB,EAAA,QAAA,kBAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,YAAY,EAAA,UAAA;AAAA,cACZ,IAAK,EAAA,OAAA;AAAA,cACL,OAAS,EAAA,QAAA;AAAA,cACT,IAAK,EAAA,QAAA;AAAA,cACL,IAAK,EAAA,MAAA;AAAA,cACL,OAAQ,EAAA;AAAA;AAAA,WAEZ,EAAA,CAAA;AAAA,UAGD,QAAA,IAAY,iCACV,GAAA,CAAA,GAAA,EAAA,EAAI,YAAY,CAAG,EAAA,OAAA,EAAQ,QAAO,UAAW,EAAA,QAAA,EAC5C,8BAAC,MAAO,EAAA,EAAA,YAAA,EAAY,YAAY,OAAQ,EAAA,WAAA,EAAY,SAAS,QAAU,EAAA,IAAA,EAAK,QACzE,EAAA,QAAA,EAAA,aAAA,EACH,CACF,EAAA;AAAA;AAAA;AAAA,KAGN,EAAA,CAAA;AAAA;AAGN;AAEA,KAAA,CAAM,WAAc,GAAA,OAAA;AAEP,MAAA,mBAAA,GAAsB,CAAC,QAAqC,KAAA;AACvE,EAAA,QAAQ,QAAU;AAAA,IAChB,KAAK,OAAA;AACH,MAAO,OAAA,oBAAA;AAAA,IACT,KAAK,SAAA;AACH,MAAO,OAAA,sBAAA;AAAA,IACT,KAAK,MAAA;AACH,MAAO,OAAA,aAAA;AAAA,IACT,KAAK,SAAA;AACH,MAAO,OAAA,OAAA;AAAA;AAEb;AAEA,MAAM,YAAY,CAChB,KAAA,EACA,UACA,QACA,EAAA,QAAA,EACA,eACA,UACG,KAAA;AACH,EAAM,MAAA,KAAA,GAAQ,KAAM,CAAA,MAAA,CAAO,QAAQ,CAAA;AAEnC,EAAO,OAAA;AAAA,IACL,SAAS,GAAI,CAAA;AAAA,MACX,QAAU,EAAA,CAAA;AAAA,MACV,YAAc,EAAA,KAAA,CAAM,OAAQ,CAAA,aAAA,IAAA,IAAA,GAAA,aAAA,GAAiB,CAAC,CAAA;AAAA,MAC9C,SAAW,EAAA,KAAA,CAAM,OAAQ,CAAA,UAAA,IAAA,IAAA,GAAA,UAAA,GAAc,CAAC,CAAA;AAAA,MACxC,QAAU,EAAA,UAAA;AAAA,MAEV,UAAY,EAAA;AAAA,QACV,OAAS,EAAA,IAAA;AAAA,QACT,QAAU,EAAA,UAAA;AAAA,QACV,GAAK,EAAA,CAAA;AAAA,QACL,IAAM,EAAA,CAAA;AAAA,QACN,MAAQ,EAAA,CAAA;AAAA,QACR,KAAO,EAAA,CAAA;AAAA,QACP,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,UAAW,CAAA,OAAA;AAAA,QACpC,MAAQ,EAAA,CAAA;AAAA;AACV,KACD,CAAA;AAAA,IACD,MAAM,GAAI,CAAA;AAAA,MACR,OAAO,KAAM,CAAA,IAAA;AAAA,MACb,QAAU,EAAA,UAAA;AAAA,MACV,GAAK,EAAA;AAAA,KACN,CAAA;AAAA,IACD,SAAS,GAAI,CAAA;AAAA,MACX,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,OAAA;AAAA,MACzB,UAAY,EAAA,QAAA,GAAW,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAI,GAAA,CAAA;AAAA,MAC5C,SAAW,EAAA,MAAA;AAAA,MACX,SAAW,EAAA;AAAA,KACZ,CAAA;AAAA,IACD,OAAO,GAAI,CAAA;AAAA,MACT,QAAU,EAAA,UAAA;AAAA,MACV,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,UAAY,EAAA,MAAA;AAAA,MACZ,OAAS,EAAA,MAAA;AAAA,MACT,GAAK,EAAA,MAAA;AAAA,MACL,KAAO,EAAA;AAAA,KACR;AAAA,GACH;AACF,CAAA;;;;"}