@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.
220 lines (204 loc) • 8.97 kB
JavaScript
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";
var getBoxShadow = function getBoxShadow(state) {
return function (_ref) {
var theme = _ref.theme,
active = _ref.active,
hasError = _ref.hasError;
var getActive = function getActive(shadow) {
if (hasError) return "".concat(shadow, ", inset 0 0 0 1px ").concat(theme.orbit.borderColorInputError);
if (active) return "".concat(shadow, ", inset 0 0 0 2px ").concat(theme.orbit.paletteBlueNormal);
return shadow;
};
if (state === STATES.HOVER) {
return getActive(theme.orbit.boxShadowActionActive);
}
return getActive(theme.orbit.boxShadowAction);
};
};
var 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:", ";}", " ", ""], 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(STATES.HOVER), function (_ref6) {
var basis = _ref6.basis;
return basis && css(["flex-basis:", ";"], basis);
}, function (_ref7) {
var featureIcon = _ref7.featureIcon;
return featureIcon && css(["", ""], media.desktop(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;
})));
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
StyledPricingTableItem.defaultProps = {
theme: defaultTheme
};
var StyledBadgeWrapper = styled.div.withConfig({
displayName: "PricingTableItem__StyledBadgeWrapper",
componentId: "tsjz71-1"
})(["display:flex;justify-content:center;position:absolute;width:100%;left:0;right:0;text-align:center;"]);
var 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%;word-break:break-all;}", ""], StyledBadge, media.desktop(css(["bottom:calc(100% + ", ");"], function (_ref10) {
var hasIcon = _ref10.hasIcon;
return hasIcon ? "11px" : "5px";
}))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
StyledBadgeWrapperContent.defaultProps = {
theme: defaultTheme
};
var Item = styled.div.withConfig({
displayName: "PricingTableItem__Item",
componentId: "tsjz71-3"
})([""]);
var DesktopRadio = styled.div.withConfig({
displayName: "PricingTableItem__DesktopRadio",
componentId: "tsjz71-4"
})(["position:absolute;top:10px;right:10px;"]); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
DesktopRadio.defaultProps = {
theme: defaultTheme
};
var Spacer = styled.div.withConfig({
displayName: "PricingTableItem__Spacer",
componentId: "tsjz71-5"
})(["margin-top:", ";"], function (_ref11) {
var theme = _ref11.theme;
return 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 var StyledListWrapper = styled.div.withConfig({
displayName: "PricingTableItem__StyledListWrapper",
componentId: "tsjz71-6"
})(["", ""], function (_ref12) {
var theme = _ref12.theme;
return 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("".concat(theme.orbit.spaceXXSmall, " ").concat(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
};
var PricingTableItem = function PricingTableItem(_ref13) {
var dataTest = _ref13.dataTest,
name = _ref13.name,
price = _ref13.price,
priceBadge = _ref13.priceBadge,
featureIcon = _ref13.featureIcon,
badge = _ref13.badge,
action = _ref13.action,
_ref13$active = _ref13.active,
active = _ref13$active === void 0 ? false : _ref13$active,
children = _ref13.children,
onClick = _ref13.onClick,
compact = _ref13.compact,
mobileDescription = _ref13.mobileDescription;
var onClickHandler = function onClickHandler() {
if (onClick) {
onClick();
}
};
var _useMediaQuery = useMediaQuery(),
isDesktop = _useMediaQuery.isDesktop;
var trueCompact = typeof compact !== "undefined" ? compact : !isDesktop;
var 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;