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

import React from "react";
import styled, { css } from "styled-components";
import defaultTheme from "../../defaultTheme";
import Stack from "../../Stack";
import Text from "../../Text";
import Radio from "../../Radio";
import Badge, { StyledBadge } from "../../Badge";
import media from "../../utils/mediaQuery";
import STATES from "./consts";

const getBoxShadow = state => ({
  theme,
  active
}) => {
  const getActive = shadow => {
    if (active) return `${shadow}, inset 0 0 0 2px ${theme.orbit.paletteProductNormal}`;
    return shadow;
  };

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

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

const StyledPricingTableItem = styled.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:", ";}", " ", ""], ({
  theme
}) => theme.orbit.paletteWhite, getBoxShadow(), ({
  theme
}) => theme.orbit.durationNormal, ({
  theme
}) => theme.orbit.borderRadiusNormal, ({
  theme
}) => theme.orbit.spaceMedium, getBoxShadow(STATES.HOVER), ({
  basis
}) => basis && css(["flex-basis:", ";"], basis), ({
  featureIcon
}) => featureIcon && css(["", ""], media.desktop(css(["padding-top:", ";padding-bottom:", ";"], ({
  theme
}) => theme.orbit.spaceLarge, ({
  theme
}) => theme.orbit.spaceLarge))));
StyledPricingTableItem.defaultProps = {
  theme: defaultTheme
};
const StyledBadgeWrapper = styled.div.withConfig({
  displayName: "PricingTableItem__StyledBadgeWrapper",
  componentId: "tsjz71-1"
})(["display:flex;justify-content:center;position:relative;"]);
const StyledBadgeWrapperContent = styled.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%;}"], StyledBadge);
const Item = styled.div.withConfig({
  displayName: "PricingTableItem__Item",
  componentId: "tsjz71-3"
})([""]);

const PricingTableItem = ({
  dataTest,
  name,
  price,
  priceBadge,
  featureIcon,
  badge,
  action,
  active = false,
  compact = false,
  children,
  onClick,
  basis
}) => {
  const onClickHandler = () => {
    if (onClick) {
      onClick();
    }
  };

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

export default PricingTableItem;