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

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 _clsx = _interopRequireDefault(require("clsx"));
var _ItineraryText = _interopRequireDefault(require("../ItineraryText"));
var _Stack = _interopRequireDefault(require("../../Stack"));
var _consts = require("./consts");
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"));
var _tailwind = require("../../common/tailwind");
const borderColorClasses = {
  [_consts.STATUS.WARNING]: "border-s-orange-normal",
  [_consts.STATUS.CRITICAL]: "border-s-red-normal",
  [_consts.STATUS.INFO]: "border-s-blue-normal",
  [_consts.STATUS.SUCCESS]: "border-s-green-normal",
  [_consts.STATUS.NEUTRAL]: "border-s-ink-dark"
};
const backgroundColor = {
  [_consts.STATUS.WARNING]: "bg-orange-light",
  [_consts.STATUS.CRITICAL]: "bg-red-light",
  [_consts.STATUS.INFO]: "bg-blue-light",
  [_consts.STATUS.SUCCESS]: "bg-green-light",
  [_consts.STATUS.NEUTRAL]: "bg-cloud-normal"
};

// TODO: refactor this after designers will resolve status colors
// https://skypicker.slack.com/archives/GSGN9BN6Q/p1674568716519889
const StatusIcon = ({
  type,
  theme
}) => {
  switch (type) {
    case "info":
      return /*#__PURE__*/React.createElement(_InformationCircle.default, {
        size: "small",
        customColor: theme.orbit.paletteBlueDark,
        ariaHidden: true
      });
    case "critical":
      return /*#__PURE__*/React.createElement(_AlertOctagon.default, {
        size: "small",
        customColor: theme.orbit.paletteRedDark,
        ariaHidden: true
      });
    case "success":
      return /*#__PURE__*/React.createElement(_CheckCircle.default, {
        size: "small",
        customColor: theme.orbit.paletteGreenDark,
        ariaHidden: true
      });
    case "neutral":
      return /*#__PURE__*/React.createElement(_InformationCircle.default, {
        size: "small",
        customColor: "primary",
        ariaHidden: true
      });
    default:
      return /*#__PURE__*/React.createElement(_AlertCircle.default, {
        size: "small",
        customColor: theme.orbit.paletteOrangeDark,
        ariaHidden: true
      });
  }
};
const ItineraryStatus = ({
  type,
  label,
  spaceAfter = "medium",
  children,
  offset = 0,
  actionable = true
}) => {
  const theme = (0, _useTheme.default)();
  return /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)("orbit-itinerary-status", "rounded-300 shadow-fixed box-border flex w-full flex-col border-0 border-s-[3px] border-solid", type && borderColorClasses[type], spaceAfter && _tailwind.spaceAfterClasses[spaceAfter], actionable && "hover:shadow-level2")
  }, /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)("px-200 min-h-800 rounded-t-300 flex items-center rounded-b-none py-0", type && backgroundColor[type])
  }, /*#__PURE__*/React.createElement("div", {
    className: "z-[2]",
    style: {
      marginInlineStart: `${parseInt(theme.orbit.space300, 10) + offset}px`
    }
  }, /*#__PURE__*/React.createElement(_Stack.default, {
    flex: true,
    spacing: "200",
    align: "center"
  }, /*#__PURE__*/React.createElement(StatusIcon, {
    type: type,
    theme: theme
  }), label && /*#__PURE__*/React.createElement(_ItineraryText.default, {
    as: "div",
    type: type === "neutral" ? "primary" : type,
    weight: "medium"
  }, label)))), children);
};
var _default = exports.default = ItineraryStatus;