@kiwicom/orbit-components/lib/Itinerary/ItineraryStatus/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;
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _rtl = require("../../utils/rtl");
var _ItineraryTemporaryText = _interopRequireDefault(require("../ItineraryTemporaryText"));
var _Stack = _interopRequireDefault(require("../../Stack"));
var _defaultTheme = _interopRequireDefault(require("../../defaultTheme"));
var _consts = require("./consts");
var _getSpacingToken = _interopRequireDefault(require("../../common/getSpacingToken"));
var _AlertOctagon = _interopRequireDefault(require("../../icons/AlertOctagon"));
var _AlertCircle = _interopRequireDefault(require("../../icons/AlertCircle"));
var _InformationCircle = _interopRequireDefault(require("../../icons/InformationCircle"));
var _CheckCircle = _interopRequireDefault(require("../../icons/CheckCircle"));
var _useTheme = _interopRequireDefault(require("../../hooks/useTheme"));
const resolveColor = (status, isHeader) => ({
  theme
}) => {
  const border = {
    [_consts.STATUS.WARNING]: theme.orbit.paletteOrangeNormal,
    [_consts.STATUS.CRITICAL]: theme.orbit.paletteRedNormal,
    [_consts.STATUS.INFO]: theme.orbit.paletteBlueNormal,
    [_consts.STATUS.SUCCESS]: theme.orbit.paletteGreenNormal,
    [_consts.STATUS.NEUTRAL]: theme.orbit.paletteInkDark
  };
  const header = {
    [_consts.STATUS.WARNING]: theme.orbit.paletteOrangeLight,
    [_consts.STATUS.INFO]: theme.orbit.paletteBlueLight,
    [_consts.STATUS.CRITICAL]: theme.orbit.paletteRedLight,
    [_consts.STATUS.SUCCESS]: theme.orbit.paletteGreenLight,
    [_consts.STATUS.NEUTRAL]: theme.orbit.paletteCloudNormal
  };
  if (isHeader) return header[status];
  return border[status];
};
const StyledWrapper = _styledComponents.default.div.withConfig({
  displayName: "ItineraryStatus__StyledWrapper",
  componentId: "sc-11w7z41-0"
})(["", ""], ({
  theme,
  $type,
  actionable
}) => (0, _styledComponents.css)(["display:flex;box-sizing:border-box;flex-direction:column;width:100%;border-radius:", ";border-", ":", " solid ", ";box-shadow:", ";margin-bottom:", ";", ""], theme.orbit.borderRadiusLarge, _rtl.left, theme.orbit.borderRadiusNormal, $type && resolveColor($type), theme.orbit.boxShadowFixed, _getSpacingToken.default, actionable && (0, _styledComponents.css)(["&:hover{box-shadow:", ";}"], theme.orbit.boxShadowActionActive)));
StyledWrapper.defaultProps = {
  theme: _defaultTheme.default
};
const StyledStatusHeader = _styledComponents.default.div.withConfig({
  displayName: "ItineraryStatus__StyledStatusHeader",
  componentId: "sc-11w7z41-1"
})(["", ""], ({
  theme,
  $type
}) => (0, _styledComponents.css)(["display:flex;align-items:center;padding:", ";min-height:", ";border-radius:", " ", " 0 0;background:", ";"], (0, _rtl.rtlSpacing)(`0 ${theme.orbit.spaceXSmall}`), theme.orbit.spaceXLarge, theme.orbit.borderRadiusNormal, theme.orbit.borderRadiusLarge, $type && resolveColor($type, true)));
StyledStatusHeader.defaultProps = {
  theme: _defaultTheme.default
};

// calculatedOffset + paddings
const StyledStatusText = _styledComponents.default.div.withConfig({
  displayName: "ItineraryStatus__StyledStatusText",
  componentId: "sc-11w7z41-2"
})(["", ";"], ({
  theme,
  $offset
}) => (0, _styledComponents.css)(["z-index:2;margin-", ":", "px;"], _rtl.left, parseInt(theme.orbit.spaceSmall, 10) + $offset));
StyledStatusText.defaultProps = {
  theme: _defaultTheme.default
};

// TODO: refactor this after designers will resolve status colors
// https://skypicker.slack.com/archives/GSGN9BN6Q/p1674568716519889
const StatusIcon = ({
  type
}) => {
  const theme = (0, _useTheme.default)();
  switch (type) {
    case "info":
      return /*#__PURE__*/React.createElement(_InformationCircle.default, {
        size: "small",
        customColor: theme.orbit.paletteBlueDark
      });
    case "critical":
      return /*#__PURE__*/React.createElement(_AlertOctagon.default, {
        size: "small",
        customColor: theme.orbit.paletteRedDark
      });
    case "success":
      return /*#__PURE__*/React.createElement(_CheckCircle.default, {
        size: "small",
        customColor: theme.orbit.paletteGreenDark
      });
    case "neutral":
      return /*#__PURE__*/React.createElement(_InformationCircle.default, {
        size: "small",
        customColor: "primary"
      });
    default:
      return /*#__PURE__*/React.createElement(_AlertCircle.default, {
        size: "small",
        customColor: theme.orbit.paletteOrangeDark
      });
  }
};
const ItineraryStatus = ({
  type,
  label,
  spaceAfter = "medium",
  children,
  offset = 0,
  actionable = true
}) => {
  return /*#__PURE__*/React.createElement(StyledWrapper, {
    $type: type,
    spaceAfter: spaceAfter,
    actionable: actionable
  }, /*#__PURE__*/React.createElement(StyledStatusHeader, {
    $type: type
  }, /*#__PURE__*/React.createElement(StyledStatusText, {
    $offset: offset
  }, /*#__PURE__*/React.createElement(_Stack.default, {
    flex: true,
    spacing: "XSmall",
    align: "center"
  }, /*#__PURE__*/React.createElement(StatusIcon, {
    type: type
  }), label && /*#__PURE__*/React.createElement(_ItineraryTemporaryText.default, {
    as: "div",
    type: type === "neutral" ? "primary" : type,
    weight: "medium"
  }, label)))), children);
};
var _default = ItineraryStatus;
exports.default = _default;