@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\n/**\n * An alert displays an important message in a way that attracts the user's attention without interrupting the user's task.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-alert--docs\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":"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"}