@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";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var React = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));

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 _TextLink = require("../TextLink");

var _consts = require("./consts");

var _rtl = require("../utils/rtl");

var _getSpacingToken = _interopRequireDefault(require("../common/getSpacingToken"));

var _ListItem = require("../List/ListItem");

var _Text = require("../Text");

var _useTranslate = _interopRequireDefault(require("../hooks/useTranslate"));

var _Heading = require("../Heading");

var _mediaQuery = _interopRequireDefault(require("../utils/mediaQuery"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var getTypeToken = function getTypeToken(name) {
  return function (_ref) {
    var _TOKENS$colorIconAler, _TOKENS$backgroundAle, _TOKENS$colorTextAler, _TOKENS$colorTextLink, _TOKENS$colorBorderAl, _tokens;

    var theme = _ref.theme,
        type = _ref.type;
    var tokens = (_tokens = {}, _defineProperty(_tokens, _consts.TOKENS.colorIconAlert, (_TOKENS$colorIconAler = {}, _defineProperty(_TOKENS$colorIconAler, _consts.TYPE_OPTIONS.INFO, theme.orbit.paletteBlueDarker), _defineProperty(_TOKENS$colorIconAler, _consts.TYPE_OPTIONS.SUCCESS, theme.orbit.paletteGreenDarker), _defineProperty(_TOKENS$colorIconAler, _consts.TYPE_OPTIONS.WARNING, theme.orbit.paletteOrangeDarker), _defineProperty(_TOKENS$colorIconAler, _consts.TYPE_OPTIONS.CRITICAL, theme.orbit.paletteRedDarker), _TOKENS$colorIconAler)), _defineProperty(_tokens, _consts.TOKENS.backgroundAlert, (_TOKENS$backgroundAle = {}, _defineProperty(_TOKENS$backgroundAle, _consts.TYPE_OPTIONS.INFO, theme.orbit.backgroundAlertInfo), _defineProperty(_TOKENS$backgroundAle, _consts.TYPE_OPTIONS.SUCCESS, theme.orbit.backgroundAlertSuccess), _defineProperty(_TOKENS$backgroundAle, _consts.TYPE_OPTIONS.WARNING, theme.orbit.backgroundAlertWarning), _defineProperty(_TOKENS$backgroundAle, _consts.TYPE_OPTIONS.CRITICAL, theme.orbit.backgroundAlertCritical), _TOKENS$backgroundAle)), _defineProperty(_tokens, _consts.TOKENS.colorTextAlert, (_TOKENS$colorTextAler = {}, _defineProperty(_TOKENS$colorTextAler, _consts.TYPE_OPTIONS.INFO, theme.orbit.colorTextAlertInfo), _defineProperty(_TOKENS$colorTextAler, _consts.TYPE_OPTIONS.SUCCESS, theme.orbit.colorTextAlertSuccess), _defineProperty(_TOKENS$colorTextAler, _consts.TYPE_OPTIONS.WARNING, theme.orbit.colorTextAlertWarning), _defineProperty(_TOKENS$colorTextAler, _consts.TYPE_OPTIONS.CRITICAL, theme.orbit.colorTextAlertCritical), _TOKENS$colorTextAler)), _defineProperty(_tokens, _consts.TOKENS.colorTextLinkAlertHover, (_TOKENS$colorTextLink = {}, _defineProperty(_TOKENS$colorTextLink, _consts.TYPE_OPTIONS.INFO, theme.orbit.paletteBlueDarkHover), _defineProperty(_TOKENS$colorTextLink, _consts.TYPE_OPTIONS.SUCCESS, theme.orbit.paletteGreenDarkHover), _defineProperty(_TOKENS$colorTextLink, _consts.TYPE_OPTIONS.WARNING, theme.orbit.paletteOrangeDarkHover), _defineProperty(_TOKENS$colorTextLink, _consts.TYPE_OPTIONS.CRITICAL, theme.orbit.paletteRedDarkActive), _TOKENS$colorTextLink)), _defineProperty(_tokens, _consts.TOKENS.colorBorderAlert, (_TOKENS$colorBorderAl = {}, _defineProperty(_TOKENS$colorBorderAl, _consts.TYPE_OPTIONS.INFO, theme.orbit.paletteBlueLightHover), _defineProperty(_TOKENS$colorBorderAl, _consts.TYPE_OPTIONS.SUCCESS, theme.orbit.paletteGreenLightHover), _defineProperty(_TOKENS$colorBorderAl, _consts.TYPE_OPTIONS.WARNING, theme.orbit.paletteOrangeLightHover), _defineProperty(_TOKENS$colorBorderAl, _consts.TYPE_OPTIONS.CRITICAL, theme.orbit.paletteRedLightHover), _TOKENS$colorBorderAl)), _tokens);
    return tokens[name][type];
  };
};

var Icon = function Icon(_ref2) {
  var icon = _ref2.icon,
      type = _ref2.type;

  // Icon should be boolean and TRUE
  if (typeof icon === "boolean" && icon) {
    if (type === _consts.TYPE_OPTIONS.INFO) {
      return React.createElement(_InformationCircle.default, null);
    }

    if (type === _consts.TYPE_OPTIONS.SUCCESS) {
      return React.createElement(_Check.default, null);
    }

    if (type === _consts.TYPE_OPTIONS.WARNING) {
      return React.createElement(_Alert.default, null);
    }

    if (type === _consts.TYPE_OPTIONS.CRITICAL) {
      return React.createElement(_AlertCircle.default, null);
    }
  }

  return icon;
};

var StyledDiv = function StyledDiv(_ref3) {
  var className = _ref3.className,
      children = _ref3.children,
      dataTest = _ref3.dataTest;
  return React.createElement("div", {
    className: className,
    "data-test": dataTest
  }, children);
};

var StyledAlert = (0, _styledComponents.default)(StyledDiv).withConfig({
  displayName: "Alert__StyledAlert",
  componentId: "svgppc-0"
})(["position:relative;display:flex;width:100%;border-radius:", ";border:1px solid ", ";background:", ";color:", ";font-family:", ";font-size:", ";line-height:", ";box-sizing:border-box;margin-bottom:", ";padding:", ";", ""], function (_ref4) {
  var theme = _ref4.theme;
  return theme.orbit.borderRadiusNormal;
}, getTypeToken(_consts.TOKENS.colorBorderAlert), getTypeToken(_consts.TOKENS.backgroundAlert), getTypeToken(_consts.TOKENS.colorTextAlert), function (_ref5) {
  var theme = _ref5.theme;
  return theme.orbit.fontFamily;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.orbit.fontSizeTextNormal;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.orbit.lineHeightTextNormal;
}, _getSpacingToken.default, function (_ref8) {
  var theme = _ref8.theme,
      closable = _ref8.closable;
  return closable ? (0, _rtl.rtlSpacing)("".concat(theme.orbit.spaceXSmall, " ").concat(theme.orbit.spaceXLarge, " ").concat(theme.orbit.spaceXSmall, " ").concat(theme.orbit.spaceXSmall)) : theme.orbit.spaceXSmall;
}, _mediaQuery.default.tablet((0, _styledComponents.css)(["padding:", ";"], function (_ref9) {
  var theme = _ref9.theme,
      closable = _ref9.closable;
  return closable ? (0, _rtl.rtlSpacing)("".concat(theme.orbit.paddingAlert, " ").concat(theme.orbit.spaceXXLarge, " ").concat(theme.orbit.paddingAlert, " ").concat(theme.orbit.paddingAlert)) : theme.orbit.paddingAlert;
})));
StyledAlert.defaultProps = {
  theme: _defaultTheme.default
};
var IconContainer = (0, _styledComponents.default)(StyledDiv).withConfig({
  displayName: "Alert__IconContainer",
  componentId: "svgppc-1"
})(["flex-shrink:0;margin:", ";color:", ";display:", ";align-items:", ";", ""], function (_ref10) {
  var theme = _ref10.theme;
  return (0, _rtl.rtlSpacing)("0 ".concat(theme.orbit.spaceXSmall, " 0 0"));
}, getTypeToken(_consts.TOKENS.colorIconAlert), function (_ref11) {
  var inlineActions = _ref11.inlineActions;
  return inlineActions && "flex";
}, function (_ref12) {
  var inlineActions = _ref12.inlineActions;
  return inlineActions && "center";
}, _mediaQuery.default.tablet((0, _styledComponents.css)(["margin:", ";"], function (_ref13) {
  var theme = _ref13.theme;
  return (0, _rtl.rtlSpacing)("0 ".concat(theme.orbit.spaceSmall, " 0 0"));
})));
IconContainer.defaultProps = {
  theme: _defaultTheme.default
};
var ContentWrapper = (0, _styledComponents.default)(StyledDiv).withConfig({
  displayName: "Alert__ContentWrapper",
  componentId: "svgppc-2"
})(["flex:1;display:flex;flex-direction:", ";align-items:", ";justify-content:", ";"], function (_ref14) {
  var title = _ref14.title,
      inlineActions = _ref14.inlineActions;
  return title && (inlineActions ? "row" : "column");
}, function (_ref15) {
  var title = _ref15.title;
  return !title && "center";
}, function (_ref16) {
  var inlineActions = _ref16.inlineActions;
  return inlineActions && "space-between";
});
var Title = (0, _styledComponents.default)(StyledDiv).withConfig({
  displayName: "Alert__Title",
  componentId: "svgppc-3"
})(["color:", ";display:flex;align-items:center;margin-bottom:", ";font-weight:", ";line-height:", ";min-height:", ";", ""], getTypeToken(_consts.TOKENS.colorIconAlert), function (_ref17) {
  var theme = _ref17.theme,
      hasChildren = _ref17.hasChildren,
      inlineActions = _ref17.inlineActions;
  return hasChildren && (inlineActions ? "0" : theme.orbit.spaceXXSmall);
}, function (_ref18) {
  var theme = _ref18.theme;
  return theme.orbit.fontWeightBold;
}, function (_ref19) {
  var theme = _ref19.theme;
  return theme.orbit.lineHeightHeading;
}, function (_ref20) {
  var theme = _ref20.theme;
  return theme.orbit.heightIconMedium;
}, _mediaQuery.default.tablet((0, _styledComponents.css)(["margin-bottom:", ";"], function (_ref21) {
  var theme = _ref21.theme,
      hasChildren = _ref21.hasChildren,
      inlineActions = _ref21.inlineActions;
  return hasChildren && (inlineActions ? "0" : theme.orbit.spaceXSmall);
})));
Title.defaultProps = {
  theme: _defaultTheme.default
};
var Content = (0, _styledComponents.default)(StyledDiv).withConfig({
  displayName: "Alert__Content",
  componentId: "svgppc-4"
})(["display:block;width:", ";& a,& ", "{color:", ";font-weight:", ";transition:color ", " ease-in-out;&:hover,&:focus,&:active{color:", ";}}& ", ",", ",", "{color:", ";}"], function (_ref22) {
  var inlineActions = _ref22.inlineActions;
  return !inlineActions && "100%";
}, _TextLink.StyledTextLink, getTypeToken(_consts.TOKENS.colorTextAlert), function (_ref23) {
  var theme = _ref23.theme;
  return theme.orbit.fontWeightMedium;
}, function (_ref24) {
  var theme = _ref24.theme;
  return theme.orbit.durationFast;
}, getTypeToken(_consts.TOKENS.colorTextLinkAlertHover), _ListItem.Item, _Text.StyledText, _Heading.StyledHeading, getTypeToken(_consts.TOKENS.colorTextAlert));
Content.defaultProps = {
  theme: _defaultTheme.default
};
var CloseContainer = (0, _styledComponents.default)(StyledDiv).withConfig({
  displayName: "Alert__CloseContainer",
  componentId: "svgppc-5"
})(["position:absolute;top:", ";margin-top:", ";", ":0;margin-", ":", ";"], function (_ref25) {
  var hasChildren = _ref25.hasChildren;
  return hasChildren ? 0 : "50%";
}, function (_ref26) {
  var hasChildren = _ref26.hasChildren,
      theme = _ref26.theme;
  return !hasChildren && "-".concat(theme.orbit.widthIconSmall);
}, _rtl.right, _rtl.right, function (_ref27) {
  var hasChildren = _ref27.hasChildren,
      theme = _ref27.theme;
  return !hasChildren && theme.orbit.spaceXSmall;
});
CloseContainer.defaultProps = {
  theme: _defaultTheme.default
};

var AlertCloseButton = function AlertCloseButton(_ref28) {
  var hasChildren = _ref28.hasChildren,
      dataTest = _ref28.dataTest,
      onClick = _ref28.onClick,
      icon = _ref28.icon;
  var translate = (0, _useTranslate.default)();
  return React.createElement(CloseContainer, {
    hasChildren: hasChildren
  }, React.createElement(_ButtonLink.default, {
    dataTest: dataTest,
    onClick: onClick,
    size: "small",
    icon: icon,
    type: "secondary",
    transparent: true,
    title: translate("button_close")
  }));
};

var Alert = function Alert(props) {
  var _props$type = props.type,
      type = _props$type === void 0 ? _consts.TYPE_OPTIONS.INFO : _props$type,
      title = props.title,
      closable = props.closable,
      icon = props.icon,
      _props$onClose = props.onClose,
      onClose = _props$onClose === void 0 ? function () {} : _props$onClose,
      children = props.children,
      dataTest = props.dataTest,
      spaceAfter = props.spaceAfter,
      _props$inlineActions = props.inlineActions,
      inlineActions = _props$inlineActions === void 0 ? false : _props$inlineActions;
  return React.createElement(StyledAlert, {
    type: type,
    icon: icon,
    closable: closable,
    dataTest: dataTest,
    spaceAfter: spaceAfter
  }, icon && React.createElement(IconContainer, {
    type: type,
    inlineActions: inlineActions
  }, React.createElement(Icon, {
    type: type,
    icon: icon
  })), React.createElement(ContentWrapper, {
    title: title,
    inlineActions: inlineActions
  }, title && React.createElement(Title, {
    type: type,
    hasChildren: children,
    inlineActions: inlineActions
  }, title), children && !inlineActions && React.createElement(Content, {
    title: title,
    type: type
  }, children), inlineActions && React.createElement(Content, {
    title: title,
    type: type,
    inlineActions: inlineActions
  }, inlineActions)), closable && React.createElement(AlertCloseButton, {
    hasChildren: children,
    dataTest: _consts.CLOSE_BUTTON_DATA_TEST,
    onClick: onClose,
    icon: React.createElement(_Close.default, {
      size: "small",
      color: type
    })
  }));
};

var _default = Alert;
exports.default = _default;