@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 * as React from "react";
import styled, { css } from "styled-components";
import defaultTheme from "../../defaultTheme";
import Stack from "../../Stack";
import Text, { StyledText } from "../../Text";
import Radio from "../../Radio";
import Badge from "../../Badge";
import { StyledBadge } from "../../primitives/BadgePrimitive";
import media from "../../utils/mediaQuery";
import STATES from "./consts";
import { IconContainer, Item as ListItem } from "../../List/ListItem";
import { rtlSpacing } from "../../utils/rtl";
import PricingTableContext from "../PricingTableContext";
import useMediaQuery from "../../hooks/useMediaQuery";

const getBoxShadow = state => ({
  theme,
  active,
  hasError
}) => {
  const getActive = shadow => {
    if (hasError) return `${shadow}, inset 0 0 0 1px ${theme.orbit.borderColorInputError}`;
    if (active) return `${shadow}, inset 0 0 0 2px ${theme.orbit.paletteBlueNormal}`;
    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: "sc-10hycsz-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)))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledPricingTableItem.defaultProps = {
  theme: defaultTheme
};
const StyledBadgeWrapper = styled.div.withConfig({
  displayName: "PricingTableItem__StyledBadgeWrapper",
  componentId: "sc-10hycsz-1"
})(["display:flex;justify-content:center;position:absolute;width:100%;left:0;right:0;text-align:center;"]);
const StyledBadgeWrapperContent = styled.div.withConfig({
  displayName: "PricingTableItem__StyledBadgeWrapperContent",
  componentId: "sc-10hycsz-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%;word-break:break-all;}", ""], StyledBadge, media.desktop(css(["bottom:calc(100% + ", ");"], ({
  hasIcon
}) => hasIcon ? "11px" : "5px"))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledBadgeWrapperContent.defaultProps = {
  theme: defaultTheme
};
const Item = styled.div.withConfig({
  displayName: "PricingTableItem__Item",
  componentId: "sc-10hycsz-3"
})([""]);
const DesktopRadio = styled.div.withConfig({
  displayName: "PricingTableItem__DesktopRadio",
  componentId: "sc-10hycsz-4"
})(["position:absolute;top:10px;right:10px;"]); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

DesktopRadio.defaultProps = {
  theme: defaultTheme
};
const Spacer = styled.div.withConfig({
  displayName: "PricingTableItem__Spacer",
  componentId: "sc-10hycsz-5"
})(["margin-top:", ";"], ({
  theme
}) => theme.orbit.spaceSmall); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

Spacer.defaultProps = {
  theme: defaultTheme
};
/*
  This causes rewrite of a list so list is ussable in in PricingTable, this is not at all elegant solution.
*/

export const StyledListWrapper = styled.div.withConfig({
  displayName: "PricingTableItem__StyledListWrapper",
  componentId: "sc-10hycsz-6"
})(["", ""], ({
  theme
}) => css(["width:100%;", "{border-bottom:1px solid ", ";padding:", ";align-items:center;&,", "{font-weight:", ";}:last-child{border-bottom:none;}", "}", "{margin:", ";height:", ";svg{height:", ";width:", ";}}"], ListItem, theme.orbit.paletteCloudDark, theme.orbit.spaceSmall, StyledText, theme.orbit.fontWeightMedium, media.tablet(css(["padding:", ";"], theme.orbit.spaceXSmall)), IconContainer, rtlSpacing(`${theme.orbit.spaceXXSmall} ${theme.orbit.spaceXSmall} 0 0`), theme.heightIconLarge, theme.orbit.heightIconMedium, theme.orbit.widthIconMedium)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledListWrapper.defaultProps = {
  theme: defaultTheme
};

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

  const {
    isDesktop
  } = useMediaQuery();
  const trueCompact = typeof compact !== "undefined" ? compact : !isDesktop;
  const context = React.useContext(PricingTableContext);
  return /*#__PURE__*/React.createElement(React.Fragment, null, context.isContent ? /*#__PURE__*/React.createElement(React.Fragment, null, mobileDescription && /*#__PURE__*/React.createElement(Text, {
    weight: "bold",
    size: "normal"
  }, mobileDescription), children && children, action && action) : /*#__PURE__*/React.createElement(StyledPricingTableItem, {
    onClick: onClickHandler,
    basis: context.basis,
    featureIcon: !!featureIcon,
    active: active,
    "data-test": dataTest,
    hasError: context.hasError,
    desktopRadio: context.desktopRadio
  }, !featureIcon && context.desktopRadio && !trueCompact && /*#__PURE__*/React.createElement(Spacer, null), context.desktopRadio && !trueCompact && /*#__PURE__*/React.createElement(DesktopRadio, null, /*#__PURE__*/React.createElement(Radio, {
    checked: active,
    onChange: onClickHandler,
    hasError: context.hasError
  })), badge && /*#__PURE__*/React.createElement(StyledBadgeWrapper, null, /*#__PURE__*/React.createElement(StyledBadgeWrapperContent, {
    hasIcon: !!featureIcon
  }, typeof badge === "string" ? /*#__PURE__*/React.createElement(Badge, {
    type: "infoInverted"
  }, badge) : badge)), /*#__PURE__*/React.createElement(Stack, {
    flex: true,
    direction: "column",
    spacing: "XSmall",
    desktop: {
      spacing: "medium"
    }
  }, featureIcon && /*#__PURE__*/React.createElement(Stack, {
    justify: "center",
    grow: false
  }, featureIcon), /*#__PURE__*/React.createElement(Stack, {
    justify: "between",
    direction: "column"
  }, /*#__PURE__*/React.createElement(Stack, {
    spacing: "XXSmall",
    direction: "column",
    flex: true,
    align: "stretch",
    desktop: {
      grow: false
    }
  }, name && /*#__PURE__*/React.createElement(Text, {
    type: "primary",
    align: "center",
    weight: featureIcon ? "normal" : "bold"
  }, name), price && /*#__PURE__*/React.createElement(Text, {
    size: "large",
    weight: "bold",
    type: "primary",
    align: "center"
  }, price), priceBadge && /*#__PURE__*/React.createElement(Stack, {
    justify: "center",
    align: "end",
    desktop: {
      grow: false
    }
  }, priceBadge)), trueCompact ? /*#__PURE__*/React.createElement(Stack, {
    justify: "center",
    align: "center",
    grow: false
  }, /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(Radio, {
    checked: active,
    onChange: onClickHandler,
    hasError: context.hasError
  }))) : /*#__PURE__*/React.createElement(Stack, {
    justify: "between",
    direction: "column"
  }, /*#__PURE__*/React.createElement(StyledListWrapper, null, children && children), action && /*#__PURE__*/React.createElement(Stack, {
    justify: "center",
    grow: false
  }, action))))));
};

export default PricingTableItem;