@kiwicom/orbit-components/lib/PricingTable/PricingTableItem/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 = _interopRequireDefault(require("react"));

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

var _defaultTheme = _interopRequireDefault(require("../../defaultTheme"));

var _Stack = _interopRequireDefault(require("../../Stack"));

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

var _Radio = _interopRequireDefault(require("../../Radio"));

var _Badge = _interopRequireWildcard(require("../../Badge"));

var _mediaQuery = _interopRequireDefault(require("../../utils/mediaQuery"));

var _consts = _interopRequireDefault(require("./consts"));

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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var getBoxShadow = function getBoxShadow(state) {
  return function (_ref) {
    var theme = _ref.theme,
        active = _ref.active;

    var getActive = function getActive(shadow) {
      if (active) return "".concat(shadow, ", inset 0 0 0 2px ").concat(theme.orbit.paletteProductNormal);
      return shadow;
    };

    if (state === _consts.default.HOVER) {
      return getActive(theme.orbit.boxShadowActionActive);
    }

    return getActive(theme.orbit.boxShadowAction);
  };
};

var StyledPricingTableItem = _styledComponents.default.div.withConfig({
  displayName: "PricingTableItem__StyledPricingTableItem",
  componentId: "tsjz71-0"
})(["display:flex;flex-direction:column;flex-grow:1;width:100%;max-width:33%;position:relative;background:", ";box-shadow:", ";transition:", ";border-radius:", ";padding:", ";cursor:pointer;&:hover{box-shadow:", ";}", " ", ""], function (_ref2) {
  var theme = _ref2.theme;
  return theme.orbit.paletteWhite;
}, getBoxShadow(), function (_ref3) {
  var theme = _ref3.theme;
  return theme.orbit.durationNormal;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.orbit.borderRadiusNormal;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.orbit.spaceMedium;
}, getBoxShadow(_consts.default.HOVER), function (_ref6) {
  var basis = _ref6.basis;
  return basis && (0, _styledComponents.css)(["flex-basis:", ";"], basis);
}, function (_ref7) {
  var featureIcon = _ref7.featureIcon;
  return featureIcon && (0, _styledComponents.css)(["", ""], _mediaQuery.default.desktop((0, _styledComponents.css)(["padding-top:", ";padding-bottom:", ";"], function (_ref8) {
    var theme = _ref8.theme;
    return theme.orbit.spaceLarge;
  }, function (_ref9) {
    var theme = _ref9.theme;
    return theme.orbit.spaceLarge;
  })));
});

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

var StyledBadgeWrapper = _styledComponents.default.div.withConfig({
  displayName: "PricingTableItem__StyledBadgeWrapper",
  componentId: "tsjz71-1"
})(["display:flex;justify-content:center;position:relative;"]);

var StyledBadgeWrapperContent = _styledComponents.default.div.withConfig({
  displayName: "PricingTableItem__StyledBadgeWrapperContent",
  componentId: "tsjz71-2"
})(["position:absolute;bottom:calc(100% + 3px);display:flex;justify-content:center;flex-direction:column;left:0;right:0;", "{align-self:center;max-width:100%;}"], _Badge.StyledBadge);

var Item = _styledComponents.default.div.withConfig({
  displayName: "PricingTableItem__Item",
  componentId: "tsjz71-3"
})([""]);

var PricingTableItem = function PricingTableItem(_ref10) {
  var dataTest = _ref10.dataTest,
      name = _ref10.name,
      price = _ref10.price,
      priceBadge = _ref10.priceBadge,
      featureIcon = _ref10.featureIcon,
      badge = _ref10.badge,
      action = _ref10.action,
      _ref10$active = _ref10.active,
      active = _ref10$active === void 0 ? false : _ref10$active,
      _ref10$compact = _ref10.compact,
      compact = _ref10$compact === void 0 ? false : _ref10$compact,
      children = _ref10.children,
      onClick = _ref10.onClick,
      basis = _ref10.basis;

  var onClickHandler = function onClickHandler() {
    if (onClick) {
      onClick();
    }
  };

  return _react.default.createElement(StyledPricingTableItem, {
    onClick: onClickHandler,
    basis: basis,
    featureIcon: !!featureIcon,
    active: active,
    dataTest: dataTest
  }, badge && _react.default.createElement(StyledBadgeWrapper, null, _react.default.createElement(StyledBadgeWrapperContent, null, typeof badge === "string" ? _react.default.createElement(_Badge.default, {
    type: "infoInverted"
  }, badge) : badge)), _react.default.createElement(_Stack.default, {
    flex: true,
    direction: "column",
    spacing: "condensed",
    desktop: {
      spacing: "natural"
    }
  }, featureIcon && _react.default.createElement(_Stack.default, {
    justify: "center",
    grow: false
  }, featureIcon), _react.default.createElement(_Stack.default, {
    justify: "between",
    direction: "column"
  }, _react.default.createElement(_Stack.default, {
    spacing: "tight",
    direction: "column",
    flex: true,
    align: "stretch",
    desktop: {
      grow: false
    }
  }, name && _react.default.createElement(_Text.default, {
    type: "primary",
    align: "center",
    weight: featureIcon ? "normal" : "bold"
  }, name), price && _react.default.createElement(_Text.default, {
    size: "large",
    weight: "bold",
    type: "primary",
    align: "center"
  }, price), priceBadge && _react.default.createElement(_Stack.default, {
    justify: "center",
    align: "end",
    desktop: {
      grow: false
    }
  }, priceBadge)), !compact ? _react.default.createElement(_Stack.default, {
    justify: "between",
    direction: "column"
  }, children && children, action && _react.default.createElement(_Stack.default, {
    justify: "center",
    grow: false
  }, action)) : _react.default.createElement(_Stack.default, {
    justify: "center",
    align: "center",
    grow: false
  }, _react.default.createElement(Item, null, _react.default.createElement(_Radio.default, {
    checked: active,
    onChange: onClickHandler
  }))))));
};

var _default = PricingTableItem;
exports.default = _default;