@kiwicom/orbit-components/lib/Alert/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";
"use client";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = exports.AlertButton = void 0;
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _InformationCircle = _interopRequireDefault(require("../icons/InformationCircle"));
var _Check = _interopRequireDefault(require("../icons/Check"));
var _Alert = _interopRequireDefault(require("../icons/Alert"));
var _AlertCircle = _interopRequireDefault(require("../icons/AlertCircle"));
var _Close = _interopRequireDefault(require("../icons/Close"));
var _ButtonLink = _interopRequireDefault(require("../ButtonLink"));
var _consts = require("./consts");
var _tailwind = require("../common/tailwind");
var _twClasses = require("../TextLink/helpers/twClasses");
var _AlertButton = _interopRequireDefault(require("./AlertButton"));
exports.AlertButton = _AlertButton.default;
const COLORS = {
  info: "bg-blue-light border-blue-light-hover lm:border-t-blue-light-hover",
  success: "bg-green-light border-green-light-hover lm:border-t-green-light-hover",
  warning: "bg-orange-light border-orange-light-hover lm:border-t-orange-light-hover",
  critical: "bg-red-light border-red-light-hover lm:border-t-red-light-hover"
};
const ACCENT_BORDER = {
  info: "border-t-blue-normal lm:border-s-blue-normal",
  success: "border-t-green-normal lm:border-s-green-normal",
  warning: "border-t-orange-normal lm:border-s-orange-normal",
  critical: "border-t-red-normal lm:border-s-red-normal"
};
const ICON_COLOR = {
  info: "text-blue-normal",
  success: "text-green-normal",
  warning: "text-orange-normal",
  critical: "text-red-normal"
};
const StyledIcon = ({
  icon,
  type
}) => {
  // Icon should be boolean and TRUE
  if (typeof icon === "boolean" && icon) {
    if (type === _consts.TYPE_OPTIONS.INFO) {
      return /*#__PURE__*/React.createElement(_InformationCircle.default, {
        size: "small"
      });
    }
    if (type === _consts.TYPE_OPTIONS.SUCCESS) {
      return /*#__PURE__*/React.createElement(_Check.default, {
        size: "small"
      });
    }
    if (type === _consts.TYPE_OPTIONS.WARNING) {
      return /*#__PURE__*/React.createElement(_Alert.default, {
        size: "small"
      });
    }
    if (type === _consts.TYPE_OPTIONS.CRITICAL) {
      return /*#__PURE__*/React.createElement(_AlertCircle.default, {
        size: "small"
      });
    }
  }
  if ( /*#__PURE__*/React.isValidElement(icon) && typeof icon !== "boolean") {
    // @ts-expect-error TODO
    return /*#__PURE__*/React.cloneElement(icon, {
      size: "small"
    });
  }
  return /*#__PURE__*/React.createElement(React.Fragment, null, icon);
};
const ContentWrapper = ({
  type,
  inlineActions,
  children
}) => {
  return /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)("flex min-h-[20px] items-center", !inlineActions && "w-full", "[&_.orbit-list-item]:text-ink-dark [&_.orbit-text]:text-ink-dark [&_.orbit-heading]:text-ink-dark", ..._twClasses.alertDescendantClasses[type])
  }, children);
};
const AlertCloseButton = ({
  hasChildren,
  dataTest,
  onClick,
  labelClose,
  icon
}) => {
  return /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)("absolute end-0", hasChildren ? "top-0" : "me-xs top-1/2 -translate-y-1/2")
  }, /*#__PURE__*/React.createElement(_ButtonLink.default, {
    dataTest: dataTest,
    onClick: onClick,
    size: "small",
    iconLeft: icon,
    type: "secondary",
    title: labelClose
  }));
};
const Alert = props => {
  const {
    type = _consts.TYPE_OPTIONS.INFO,
    title,
    icon,
    closable,
    onClose,
    children,
    dataTest,
    id,
    spaceAfter,
    suppressed,
    inlineActions,
    labelClose
  } = props;
  return /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)("rounded-large text-ink-dark font-base text-normal p-sm relative box-border flex w-full border border-t-[3px] leading-normal", closable && "pe-lg", "lm:border-s-[3px] lm:border-t", "tb:rounded-normal", suppressed ? "bg-cloud-light border-cloud-normal lm:border-t-cloud-normal" : COLORS[type], ACCENT_BORDER[type], spaceAfter && _tailwind.spaceAfterClasses[spaceAfter]),
    id: id,
    "data-test": dataTest
  }, icon && /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)("me-xs m-0 shrink-0 leading-none", inlineActions && "flex items-center", ICON_COLOR[type], "tb:me-xs tb:[&_svg]:w-icon-medium tb:[&_svg]:h-icon-medium")
  }, /*#__PURE__*/React.createElement(StyledIcon, {
    type: type,
    icon: icon
  })), /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)("flex flex-1", title && inlineActions ? "flex-row" : "flex-col", !title && "items-center", inlineActions && "justify-between")
  }, title && /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)("text-ink-dark flex min-h-[20px] items-center font-bold", !!children && (inlineActions ? "mb-0" : "mb-xxs"))
  }, title), children && !inlineActions && /*#__PURE__*/React.createElement(ContentWrapper, {
    type: type
  }, children), inlineActions && /*#__PURE__*/React.createElement(ContentWrapper, {
    type: type,
    inlineActions: !!inlineActions
  }, inlineActions)), closable && /*#__PURE__*/React.createElement(AlertCloseButton, {
    hasChildren: !!children,
    dataTest: _consts.CLOSE_BUTTON_DATA_TEST,
    onClick: onClose,
    labelClose: labelClose,
    icon: /*#__PURE__*/React.createElement(_Close.default, {
      size: "small",
      color: type
    })
  }));
};
var _default = Alert;
exports.default = _default;