@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
113 lines (110 loc) • 3.39 kB
JavaScript
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 from "../../Badge";
import media from "../../utils/mediaQuery";
const StyledPricingTableItem = styled.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);}", " ", ""], ({
theme
}) => theme.orbit.paletteWhite, ({
theme
}) => theme.orbit.durationNormal, ({
theme
}) => theme.orbit.borderRadiusNormal, ({
theme
}) => theme.orbit.spaceMedium, ({
basis
}) => basis && css(["flex-basis:", ";"], basis), ({
featureIcon
}) => featureIcon && css(["", ""], media.tablet(css(["padding-top:", ";padding-bottom:", ";"], ({
theme
}) => theme.orbit.spaceLarge, ({
theme
}) => theme.orbit.spaceLarge))));
StyledPricingTableItem.defaultProps = {
theme: defaultTheme
};
const StyledBadge = styled.div.withConfig({
displayName: "PricingTableItem__StyledBadge",
componentId: "tsjz71-1"
})(["position:absolute;top:-", ";left:50%;transform:translate(-50%,3px);"], ({
theme
}) => theme.orbit.spaceMedium);
StyledBadge.defaultProps = {
theme: defaultTheme
};
const Item = styled.div.withConfig({
displayName: "PricingTableItem__Item",
componentId: "tsjz71-2"
})([""]);
const PricingTableItem = ({
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
}, badge && React.createElement(StyledBadge, null, typeof badge === "string" ? React.createElement(Badge, {
type: "infoInverted"
}, badge) : badge), React.createElement(Stack, {
flex: true,
direction: "column",
spacing: "condensed",
tablet: {
spacing: "natural"
}
}, featureIcon && React.createElement(Stack, {
justify: "center",
grow: false
}, featureIcon), React.createElement(Stack, {
justify: "between",
direction: "column"
}, React.createElement(Stack, {
spacing: "tight"
}, 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"
}, " ", 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;