@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 = _interopRequireDefault(require("../../Badge"));

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

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 StyledPricingTableItem = _styledComponents.default.div.withConfig({
  displayName: "PricingTableItem__StyledPricingTableItem",
  componentId: "tsjz71-0"
})(["display:flex;flex-grow:1;position:relative;background:", ";box-shadow:0 0 2px 0 rgba(37,42,49,0.16),0 1px 4px 0 rgba(37,42,49,0.12);transition:", ";border-radius:", ";padding:", ";cursor:pointer;&:hover{box-shadow:0 1px 4px 0 rgba(37,42,49,0.16),0 4px 8px 0 rgba(37,42,49,0.12);}", " ", ""], function (_ref) {
  var theme = _ref.theme;
  return theme.orbit.paletteWhite;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.orbit.durationNormal;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.orbit.borderRadiusNormal;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.orbit.spaceMedium;
}, function (_ref5) {
  var basis = _ref5.basis;
  return basis && (0, _styledComponents.css)(["flex-basis:", ";"], basis);
}, function (_ref6) {
  var featureIcon = _ref6.featureIcon;
  return featureIcon && (0, _styledComponents.css)(["", ""], _mediaQuery.default.tablet((0, _styledComponents.css)(["padding-top:", ";padding-bottom:", ";"], function (_ref7) {
    var theme = _ref7.theme;
    return theme.orbit.spaceLarge;
  }, function (_ref8) {
    var theme = _ref8.theme;
    return theme.orbit.spaceLarge;
  })));
});

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

var StyledBadge = _styledComponents.default.div.withConfig({
  displayName: "PricingTableItem__StyledBadge",
  componentId: "tsjz71-1"
})(["position:absolute;top:-", ";left:50%;transform:translate(-50%,3px);"], function (_ref9) {
  var theme = _ref9.theme;
  return theme.orbit.spaceMedium;
});

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

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

var PricingTableItem = function PricingTableItem(_ref10) {
  var 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
  }, badge && _react.default.createElement(StyledBadge, null, typeof badge === "string" ? _react.default.createElement(_Badge.default, {
    type: "infoInverted"
  }, badge) : badge), _react.default.createElement(_Stack.default, {
    flex: true,
    direction: "column",
    spacing: "condensed",
    tablet: {
      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"
  }, 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"
  }, " ", 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;