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

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

Object.defineProperty(exports, "__esModule", {
  value: true
});
Object.defineProperty(exports, "AlertButton", {
  enumerable: true,
  get: function () {
    return _AlertButton.default;
  }
});
exports.default = void 0;

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

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

var _orbitDesignTokens = require("@kiwicom/orbit-design-tokens");

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

var _AlertButton = _interopRequireDefault(require("./AlertButton"));

const getTypeToken = name => ({
  theme,
  type,
  suppressed
}) => {
  const tokens = {
    [_consts.TOKENS.colorIconAlert]: {
      [_consts.TYPE_OPTIONS.INFO]: theme.orbit.paletteBlueNormal,
      [_consts.TYPE_OPTIONS.SUCCESS]: theme.orbit.paletteGreenNormal,
      [_consts.TYPE_OPTIONS.WARNING]: theme.orbit.paletteOrangeNormal,
      [_consts.TYPE_OPTIONS.CRITICAL]: theme.orbit.paletteRedNormal
    },
    [_consts.TOKENS.backgroundAlert]: {
      [_consts.TYPE_OPTIONS.INFO]: suppressed ? theme.orbit.paletteCloudLight : theme.orbit.backgroundAlertInfo,
      [_consts.TYPE_OPTIONS.SUCCESS]: suppressed ? theme.orbit.paletteCloudLight : theme.orbit.backgroundAlertSuccess,
      [_consts.TYPE_OPTIONS.WARNING]: suppressed ? theme.orbit.paletteCloudLight : theme.orbit.backgroundAlertWarning,
      [_consts.TYPE_OPTIONS.CRITICAL]: suppressed ? theme.orbit.paletteCloudLight : theme.orbit.backgroundAlertCritical
    },
    // TODO: create token
    [_consts.TOKENS.colorTextLinkAlertHover]: {
      [_consts.TYPE_OPTIONS.INFO]: theme.orbit.paletteBlueDarkHover,
      [_consts.TYPE_OPTIONS.SUCCESS]: theme.orbit.paletteGreenDarkHover,
      [_consts.TYPE_OPTIONS.WARNING]: theme.orbit.paletteOrangeDarkHover,
      [_consts.TYPE_OPTIONS.CRITICAL]: theme.orbit.paletteRedDarkActive
    },
    // TODO: create token
    [_consts.TOKENS.colorTextLinkAlertFocus]: {
      [_consts.TYPE_OPTIONS.INFO]: (0, _orbitDesignTokens.convertHexToRgba)(theme.orbit.paletteBlueDarkHover, 10),
      [_consts.TYPE_OPTIONS.SUCCESS]: (0, _orbitDesignTokens.convertHexToRgba)(theme.orbit.paletteGreenDarkHover, 10),
      [_consts.TYPE_OPTIONS.WARNING]: (0, _orbitDesignTokens.convertHexToRgba)(theme.orbit.paletteOrangeDarkHover, 10),
      [_consts.TYPE_OPTIONS.CRITICAL]: (0, _orbitDesignTokens.convertHexToRgba)(theme.orbit.paletteRedDarkActive, 10)
    },
    [_consts.TOKENS.colorBorderAlert]: {
      [_consts.TYPE_OPTIONS.INFO]: suppressed ? theme.orbit.paletteCloudDark : theme.orbit.paletteBlueLightHover,
      [_consts.TYPE_OPTIONS.SUCCESS]: suppressed ? theme.orbit.paletteCloudDark : theme.orbit.paletteGreenLightHover,
      [_consts.TYPE_OPTIONS.WARNING]: suppressed ? theme.orbit.paletteCloudDark : theme.orbit.paletteOrangeLightHover,
      [_consts.TYPE_OPTIONS.CRITICAL]: suppressed ? theme.orbit.paletteCloudDark : theme.orbit.paletteRedLightHover
    },
    [_consts.TOKENS.colorAccentBorder]: {
      [_consts.TYPE_OPTIONS.INFO]: theme.orbit.paletteBlueNormal,
      [_consts.TYPE_OPTIONS.SUCCESS]: theme.orbit.paletteGreenNormal,
      [_consts.TYPE_OPTIONS.WARNING]: theme.orbit.paletteOrangeNormal,
      [_consts.TYPE_OPTIONS.CRITICAL]: theme.orbit.paletteRedNormal
    }
  };
  return tokens[name][type];
};

const StyledIcon = (0, _styledComponents.default)(({
  icon,
  type,
  className
}) => {
  // Icon should be boolean and TRUE
  if (typeof icon === "boolean" && icon) {
    if (type === _consts.TYPE_OPTIONS.INFO) {
      return /*#__PURE__*/React.createElement(_InformationCircle.default, {
        className: className,
        size: "small"
      });
    }

    if (type === _consts.TYPE_OPTIONS.SUCCESS) {
      return /*#__PURE__*/React.createElement(_Check.default, {
        className: className,
        size: "small"
      });
    }

    if (type === _consts.TYPE_OPTIONS.WARNING) {
      return /*#__PURE__*/React.createElement(_Alert.default, {
        className: className,
        size: "small"
      });
    }

    if (type === _consts.TYPE_OPTIONS.CRITICAL) {
      return /*#__PURE__*/React.createElement(_AlertCircle.default, {
        className: className,
        size: "small"
      });
    }
  }

  if ( /*#__PURE__*/React.isValidElement(icon)) {
    return /*#__PURE__*/React.cloneElement(icon, {
      className,
      size: "small"
    });
  }

  return icon;
}).withConfig({
  displayName: "Alert__StyledIcon",
  componentId: "sc-1fh23bc-0"
})([""]);

const StyledDiv = ({
  className,
  children,
  dataTest
}) => /*#__PURE__*/React.createElement("div", {
  className: className,
  "data-test": dataTest
}, children);

const StyledAlert = (0, _styledComponents.default)(StyledDiv).withConfig({
  displayName: "Alert__StyledAlert",
  componentId: "sc-1fh23bc-1"
})(["", ""], ({
  theme,
  closable
}) => (0, _styledComponents.css)(["position:relative;display:flex;width:100%;border-radius:", ";border:1px solid ", ";background:", ";color:", ";font-family:", ";font-size:", ";box-sizing:border-box;margin-bottom:", ";border-top:3px solid ", ";padding:", ";", " ", ""], theme.orbit.borderRadiusLarge, getTypeToken(_consts.TOKENS.colorBorderAlert), getTypeToken(_consts.TOKENS.backgroundAlert), theme.orbit.paletteInkNormal, theme.orbit.fontFamily, theme.orbit.fontSizeTextNormal, _getSpacingToken.default, getTypeToken(_consts.TOKENS.colorAccentBorder), closable ? (0, _rtl.rtlSpacing)(`${theme.orbit.spaceSmall} ${theme.orbit.spaceLarge} ${theme.orbit.spaceSmall} ${theme.orbit.spaceSmall}`) : theme.orbit.spaceSmall, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["border-top:1px solid ", ";border-", ":3px solid ", ";"], getTypeToken(_consts.TOKENS.colorBorderAlert), _rtl.left, getTypeToken(_consts.TOKENS.colorAccentBorder))), _mediaQuery.default.tablet((0, _styledComponents.css)(["border-radius:", ";"], theme.orbit.borderRadiusNormal)))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledAlert.defaultProps = {
  theme: _defaultTheme.default
};
const StyledIconContainer = (0, _styledComponents.default)(StyledDiv).withConfig({
  displayName: "Alert__StyledIconContainer",
  componentId: "sc-1fh23bc-2"
})(["", ""], ({
  theme,
  inlineActions
}) => (0, _styledComponents.css)(["flex-shrink:0;margin:", ";color:", ";display:", ";align-items:", ";", ""], (0, _rtl.rtlSpacing)(`0 ${theme.orbit.spaceXSmall} 0 0`), getTypeToken(_consts.TOKENS.colorIconAlert), inlineActions && "flex", inlineActions && "center", _mediaQuery.default.tablet((0, _styledComponents.css)(["margin:", ";", "{width:20px;height:20px;}"], (0, _rtl.rtlSpacing)(`0 ${theme.orbit.spaceXSmall} 0 0`), StyledIcon)))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledIconContainer.defaultProps = {
  theme: _defaultTheme.default
};
const StyledContentWrapper = (0, _styledComponents.default)(StyledDiv).withConfig({
  displayName: "Alert__StyledContentWrapper",
  componentId: "sc-1fh23bc-3"
})(["", ""], ({
  title,
  inlineActions
}) => (0, _styledComponents.css)(["flex:1;display:flex;flex-direction:", ";align-items:", ";justify-content:", ";"], title && inlineActions ? "row" : "column", !title && "center", inlineActions && "space-between"));
const StyledTitle = (0, _styledComponents.default)(StyledDiv).withConfig({
  displayName: "Alert__StyledTitle",
  componentId: "sc-1fh23bc-4"
})(["", ""], ({
  theme,
  hasChildren,
  inlineActions
}) => (0, _styledComponents.css)(["color:", ";display:flex;align-items:center;min-height:20px;margin-bottom:", ";font-weight:", ";"], theme.orbit.paletteInkNormal, hasChildren && (inlineActions ? "0" : theme.orbit.spaceXXSmall), theme.orbit.fontWeightBold)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledTitle.defaultProps = {
  theme: _defaultTheme.default
};
const StyledContent = (0, _styledComponents.default)(StyledDiv).withConfig({
  displayName: "Alert__StyledContent",
  componentId: "sc-1fh23bc-5"
})(["", ""], ({
  inlineActions,
  theme
}) => (0, _styledComponents.css)(["display:flex;align-items:center;min-height:20px;width:", ";& a:not([class]),& ", "{", ";}& ", ",", ",", "{color:", ";}"], !inlineActions && "100%", _TextLink.StyledTextLink, _TextLink.getLinkStyle, _ListItem.Item, _Text.StyledText, _Heading.StyledHeading, theme.orbit.paletteInkNormal)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledContent.defaultProps = {
  theme: _defaultTheme.default
};
const CloseContainer = (0, _styledComponents.default)(StyledDiv).withConfig({
  displayName: "Alert__CloseContainer",
  componentId: "sc-1fh23bc-6"
})(["", ""], ({
  theme,
  hasChildren
}) => (0, _styledComponents.css)(["position:absolute;top:", ";margin-top:", ";", ":0;margin-", ":", ";"], hasChildren ? 0 : "50%", !hasChildren && `-${theme.orbit.widthIconSmall}`, _rtl.right, _rtl.right, !hasChildren && theme.orbit.spaceXSmall)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

CloseContainer.defaultProps = {
  theme: _defaultTheme.default
};

const AlertCloseButton = ({
  hasChildren,
  dataTest,
  onClick,
  icon
}) => {
  const translate = (0, _useTranslate.default)();
  return /*#__PURE__*/React.createElement(CloseContainer, {
    hasChildren: hasChildren
  }, /*#__PURE__*/React.createElement(_ButtonLink.default, {
    dataTest: dataTest,
    onClick: onClick,
    size: "small",
    iconLeft: icon,
    type: "secondary",
    title: translate("button_close")
  }));
};

const Alert = props => {
  const {
    type = _consts.TYPE_OPTIONS.INFO,
    title,
    icon,
    closable,
    onClose,
    children,
    dataTest,
    spaceAfter,
    suppressed,
    inlineActions
  } = props;
  return /*#__PURE__*/React.createElement(StyledAlert, {
    type: type,
    icon: icon,
    suppressed: suppressed,
    closable: closable,
    dataTest: dataTest,
    spaceAfter: spaceAfter
  }, icon && /*#__PURE__*/React.createElement(StyledIconContainer, {
    type: type,
    inlineActions: inlineActions
  }, /*#__PURE__*/React.createElement(StyledIcon, {
    type: type,
    icon: icon
  })), /*#__PURE__*/React.createElement(StyledContentWrapper, {
    title: title,
    inlineActions: inlineActions
  }, title && /*#__PURE__*/React.createElement(StyledTitle, {
    hasChildren: children,
    inlineActions: inlineActions
  }, title), children && !inlineActions && /*#__PURE__*/React.createElement(StyledContent, {
    title: title,
    type: type
  }, children), inlineActions && /*#__PURE__*/React.createElement(StyledContent, {
    title: title,
    type: type,
    inlineActions: inlineActions
  }, inlineActions)), closable && /*#__PURE__*/React.createElement(AlertCloseButton, {
    hasChildren: children,
    dataTest: _consts.CLOSE_BUTTON_DATA_TEST,
    onClick: onClose,
    icon: /*#__PURE__*/React.createElement(_Close.default, {
      size: "small",
      color: type
    })
  }));
};

var _default = Alert;
exports.default = _default;