@kiwicom/orbit-components/es/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.

import * as React from "react";
import styled, { css } from "styled-components";
import { left, rtlSpacing } from "../../utils/rtl";
import Text from "../../Text";
import Stack from "../../Stack";
import defaultTheme from "../../defaultTheme";
import { STATUS } from "./consts";
import getSpacingToken from "../../common/getSpacingToken";
import AlertOctagon from "../../icons/AlertOctagon";
import Warning from "../../icons/AlertCircle";
import Info from "../../icons/InformationCircle";
import Check from "../../icons/CheckCircle";

const resolveColor = (status, isHeader) => ({
  theme
}) => {
  const border = {
    [STATUS.WARNING]: theme.orbit.paletteOrangeNormal,
    [STATUS.CRITICAL]: theme.orbit.paletteRedNormal,
    [STATUS.INFO]: theme.orbit.paletteBlueNormal,
    [STATUS.SUCCESS]: theme.orbit.paletteGreenNormal
  };
  const header = {
    [STATUS.WARNING]: theme.orbit.paletteOrangeLight,
    [STATUS.INFO]: theme.orbit.paletteBlueLight,
    [STATUS.CRITICAL]: theme.orbit.paletteRedLight,
    [STATUS.SUCCESS]: theme.orbit.paletteGreenLight
  };
  if (isHeader) return header[status];
  return border[status];
};

const StyledWrapper = styled.div.withConfig({
  displayName: "ItineraryStatus__StyledWrapper",
  componentId: "sc-1rcw8nf-0"
})(["", ""], ({
  theme,
  $type
}) => css(["display:flex;box-sizing:border-box;flex-direction:column;width:100%;border-radius:", ";border-", ":", " solid ", ";box-shadow:", ";margin-bottom:", ";&:hover,&:focus{outline:none;box-shadow:", ";}"], theme.orbit.borderRadiusLarge, left, theme.orbit.borderRadiusNormal, $type && resolveColor($type), theme.orbit.boxShadowFixed, getSpacingToken, theme.orbit.boxShadowActionActive)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledWrapper.defaultProps = {
  theme: defaultTheme
};
const StyledStatusHeader = styled.div.withConfig({
  displayName: "ItineraryStatus__StyledStatusHeader",
  componentId: "sc-1rcw8nf-1"
})(["", ""], ({
  theme,
  $type
}) => css(["display:flex;align-items:center;padding:", ";height:", ";border-radius:", " ", " 0 0;background:", ";"], rtlSpacing(`0 ${theme.orbit.spaceXSmall}`), theme.orbit.spaceXLarge, theme.orbit.borderRadiusNormal, theme.orbit.borderRadiusLarge, $type && resolveColor($type, true))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledStatusHeader.defaultProps = {
  theme: defaultTheme
}; // calculatedOffset + paddings

const StyledStatusText = styled.div.withConfig({
  displayName: "ItineraryStatus__StyledStatusText",
  componentId: "sc-1rcw8nf-2"
})(["", ";"], ({
  theme,
  $offset
}) => css(["z-index:2;margin-", ":", "px;"], left, parseInt(theme.orbit.spaceSmall, 10) + $offset)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledStatusText.defaultProps = {
  theme: defaultTheme
};

const StatusIcon = ({
  type
}) => {
  switch (type) {
    case "info":
      return /*#__PURE__*/React.createElement(Info, {
        size: "small",
        color: type
      });

    case "critical":
      return /*#__PURE__*/React.createElement(AlertOctagon, {
        size: "small",
        color: type
      });

    case "success":
      return /*#__PURE__*/React.createElement(Check, {
        size: "small",
        color: type
      });

    default:
      return /*#__PURE__*/React.createElement(Warning, {
        size: "small",
        color: type
      });
  }
};

const ItineraryStatus = ({
  type,
  label,
  spaceAfter = "medium",
  children,
  offset = 0
}) => {
  return /*#__PURE__*/React.createElement(StyledWrapper, {
    $type: type,
    spaceAfter: spaceAfter,
    tabIndex: 0
  }, /*#__PURE__*/React.createElement(StyledStatusHeader, {
    $type: type
  }, /*#__PURE__*/React.createElement(StyledStatusText, {
    $offset: offset
  }, /*#__PURE__*/React.createElement(Stack, {
    inline: true,
    spacing: "XSmall",
    align: "center"
  }, /*#__PURE__*/React.createElement(StatusIcon, {
    type: type
  }), label && /*#__PURE__*/React.createElement(Text, {
    type: type
  }, label)))), children);
};

export default ItineraryStatus;