@grafana/ui/dist/cjs/components/Alert/Alert.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 e2eSelectors = require('@grafana/e2e-selectors');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var Button = require('../Button/Button.cjs');
var Icon = require('../Icon/Icon.cjs');
var Box = require('../Layout/Box/Box.cjs');
var Stack = require('../Layout/Stack/Stack.cjs');
var Text = require('../Text/Text.cjs');

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);

"use strict";
const Alert = React__namespace.forwardRef(
  ({
    title,
    onRemove,
    children,
    buttonContent,
    elevated,
    bottomSpacing,
    topSpacing,
    className,
    severity = "error",
    action,
    ...restProps
  }, ref) => {
    const theme = ThemeContext.useTheme2();
    const hasTitle = Boolean(title);
    const styles = getStyles(theme, severity, hasTitle, elevated, bottomSpacing, topSpacing);
    const rolesBySeverity = {
      error: "alert",
      warning: "alert",
      info: "status",
      success: "status"
    };
    const role = restProps["role"] || rolesBySeverity[severity];
    const ariaLabel = restProps["aria-label"] || title;
    const closeLabel = i18n.t("grafana-ui.alert.close-button", "Close alert");
    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: css.cx(styles.wrapper, className), role, "aria-label": ariaLabel, ...restProps, children: /* @__PURE__ */ jsxRuntime.jsxs(
      Box.Box,
      {
        "data-testid": e2eSelectors.selectors.components.Alert.alertV2(severity),
        display: "flex",
        backgroundColor: severity,
        borderRadius: "lg",
        paddingY: 1,
        paddingX: 2,
        borderStyle: "solid",
        borderColor: severity,
        alignItems: "stretch",
        boxShadow: elevated ? "z3" : void 0,
        children: [
          /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { paddingTop: 1, paddingRight: 2, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.icon, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: "xl", name: getIconFromSeverity(severity) }) }) }),
          /* @__PURE__ */ jsxRuntime.jsxs(Stack.Stack, { alignItems: "center", flex: 1, wrap: "wrap", columnGap: 1, rowGap: 0, children: [
            /* @__PURE__ */ jsxRuntime.jsxs(Box.Box, { paddingY: 1, flex: 1, minWidth: "50%", children: [
              /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { color: "primary", weight: "medium", children: title }),
              children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.content, children })
            ] }),
            /* @__PURE__ */ jsxRuntime.jsxs(Stack.Stack, { alignItems: "center", wrap: "wrap", children: [
              action,
              onRemove && buttonContent && /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { "aria-label": closeLabel, variant: "secondary", onClick: onRemove, type: "button", children: buttonContent })
            ] })
          ] }),
          onRemove && !buttonContent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.close, children: /* @__PURE__ */ jsxRuntime.jsx(
            Button.Button,
            {
              "aria-label": closeLabel,
              icon: "times",
              onClick: onRemove,
              type: "button",
              fill: "text",
              variant: "secondary"
            }
          ) })
        ]
      }
    ) });
  }
);
Alert.displayName = "Alert";
const getIconFromSeverity = (severity) => {
  switch (severity) {
    case "error":
      return "exclamation-circle";
    case "warning":
      return "exclamation-triangle";
    case "info":
      return "info-circle";
    case "success":
      return "check";
  }
};
const getStyles = (theme, severity, hasTitle, elevated, bottomSpacing, topSpacing) => {
  const color = theme.colors[severity];
  return {
    wrapper: css.css({
      flexGrow: 1,
      marginBottom: theme.spacing(bottomSpacing != null ? bottomSpacing : 2),
      marginTop: theme.spacing(topSpacing != null ? topSpacing : 0),
      position: "relative",
      "&:before": {
        content: '""',
        position: "absolute",
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        background: theme.colors.background.primary,
        borderRadius: theme.shape.radius.default,
        zIndex: -1
      }
    }),
    icon: css.css({
      color: color.text,
      position: "relative",
      top: "-1px"
    }),
    content: css.css({
      color: theme.colors.text.primary,
      paddingTop: hasTitle ? theme.spacing(0.5) : 0,
      maxHeight: "50vh",
      overflowY: "auto"
    }),
    close: css.css({
      position: "relative",
      color: theme.colors.text.secondary,
      background: "none",
      display: "flex",
      top: "-6px",
      right: "-14px"
    })
  };
};

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