@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 = _interopRequireDefault(require("styled-components"));

var _defaultTokens = _interopRequireDefault(require("../defaultTokens"));

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 _getSpacingToken = _interopRequireDefault(require("../common/getSpacingToken"));

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

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

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;

    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.colorAlertIconInfo), _defineProperty(_TOKENS$colorIconAler, _consts.TYPE_OPTIONS.SUCCESS, theme.orbit.colorAlertIconSuccess), _defineProperty(_TOKENS$colorIconAler, _consts.TYPE_OPTIONS.WARNING, theme.orbit.colorAlertIconWarning), _defineProperty(_TOKENS$colorIconAler, _consts.TYPE_OPTIONS.CRITICAL, theme.orbit.colorAlertIconCritical), _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)), _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%;padding:", ";padding-right:", ";border-radius:", ";background:", ";color:", ";font-family:", ";font-size:", ";box-sizing:border-box;margin-bottom:", ";"], function (_ref4) {
  var theme = _ref4.theme,
      icon = _ref4.icon;
  return icon ? "".concat(theme.orbit.paddingAlert, " ").concat(theme.orbit.paddingAlertWithIcon) : theme.orbit.paddingAlert;
}, function (_ref5) {
  var theme = _ref5.theme,
      closable = _ref5.closable;
  return closable && theme.orbit.spaceXXLarge;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.orbit.borderRadiusNormal;
}, getTypeToken(_consts.TOKENS.backgroundAlert), getTypeToken(_consts.TOKENS.colorTextAlert), function (_ref7) {
  var theme = _ref7.theme;
  return theme.orbit.fontFamily;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.orbit.fontSizeTextNormal;
}, _getSpacingToken.default);
StyledAlert.defaultProps = {
  theme: _defaultTokens.default
};
var IconContainer = (0, _styledComponents.default)(StyledDiv).withConfig({
  displayName: "Alert__IconContainer",
  componentId: "svgppc-1"
})(["flex-shrink:0;margin-right:", ";color:", ";"], function (_ref9) {
  var theme = _ref9.theme;
  return theme.orbit.spaceSmall;
}, getTypeToken(_consts.TOKENS.colorIconAlert));
IconContainer.defaultProps = {
  theme: _defaultTokens.default
};
var ContentWrapper = (0, _styledComponents.default)(StyledDiv).withConfig({
  displayName: "Alert__ContentWrapper",
  componentId: "svgppc-2"
})(["flex:1;display:flex;flex-direction:", ";align-items:", ";"], function (_ref10) {
  var title = _ref10.title;
  return title && "column";
}, function (_ref11) {
  var title = _ref11.title;
  return !title && "center";
});
var Title = (0, _styledComponents.default)(StyledDiv).withConfig({
  displayName: "Alert__Title",
  componentId: "svgppc-3"
})(["display:flex;align-items:center;margin-bottom:", ";font-weight:", ";line-height:", ";min-height:", ";"], function (_ref12) {
  var theme = _ref12.theme,
      hasChildren = _ref12.hasChildren;
  return hasChildren && theme.orbit.spaceXSmall;
}, function (_ref13) {
  var theme = _ref13.theme;
  return theme.orbit.fontWeightBold;
}, function (_ref14) {
  var theme = _ref14.theme;
  return theme.orbit.lineHeightHeading;
}, function (_ref15) {
  var theme = _ref15.theme;
  return theme.orbit.heightIconMedium;
});
Title.defaultProps = {
  theme: _defaultTokens.default
};
var Content = (0, _styledComponents.default)(StyledDiv).withConfig({
  displayName: "Alert__Content",
  componentId: "svgppc-4"
})(["display:block;margin-bottom:", ";line-height:", ";& a,& ", "{color:", ";font-weight:", ";transition:color ", " ease-in-out;text-decoration:none;&:hover{color:", ";}}& ", ",", "{color:", ";}"], function (_ref16) {
  var theme = _ref16.theme,
      title = _ref16.title;
  return title && theme.orbit.spaceXXSmall;
}, function (_ref17) {
  var theme = _ref17.theme;
  return theme.orbit.lineHeightText;
}, _TextLink.StyledTextLink, getTypeToken(_consts.TOKENS.colorTextAlert), function (_ref18) {
  var theme = _ref18.theme;
  return theme.orbit.fontWeightMedium;
}, function (_ref19) {
  var theme = _ref19.theme;
  return theme.orbit.durationFast;
}, function (_ref20) {
  var theme = _ref20.theme;
  return theme.orbit.colorTextAlertLink;
}, _ListItem.Item, _Text.StyledText, getTypeToken(_consts.TOKENS.colorTextAlert));
Content.defaultProps = {
  theme: _defaultTokens.default
};
var CloseContainer = (0, _styledComponents.default)(StyledDiv).withConfig({
  displayName: "Alert__CloseContainer",
  componentId: "svgppc-5"
})(["position:absolute;top:", ";margin-top:", ";right:0;margin-right:", ";"], function (_ref21) {
  var hasChildren = _ref21.hasChildren;
  return hasChildren ? 0 : "50%";
}, function (_ref22) {
  var hasChildren = _ref22.hasChildren,
      theme = _ref22.theme;
  return !hasChildren && "-".concat(theme.orbit.widthIconSmall);
}, function (_ref23) {
  var hasChildren = _ref23.hasChildren,
      theme = _ref23.theme;
  return !hasChildren && theme.orbit.spaceXSmall;
});
CloseContainer.defaultProps = {
  theme: _defaultTokens.default
};

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;
  return React.createElement(StyledAlert, {
    type: type,
    closable: closable,
    dataTest: dataTest,
    spaceAfter: spaceAfter
  }, icon && React.createElement(IconContainer, {
    type: type
  }, React.createElement(Icon, {
    type: type,
    icon: icon
  })), React.createElement(ContentWrapper, {
    title: title
  }, title && React.createElement(Title, {
    hasChildren: children
  }, title), children && React.createElement(Content, {
    title: title,
    type: type
  }, children)), closable && React.createElement(CloseContainer, {
    hasChildren: children
  }, React.createElement(_ButtonLink.default, {
    onClick: onClose,
    size: "small",
    icon: React.createElement(_Close.default, {
      size: "small",
      color: type
    }),
    transparent: true
  })));
};

var _default = Alert;
exports.default = _default;