@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.
242 lines (202 loc) • 9.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.StyledListWrapper = void 0;
var React = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _defaultTheme = _interopRequireDefault(require("../../defaultTheme"));
var _Stack = _interopRequireDefault(require("../../Stack"));
var _Text = _interopRequireWildcard(require("../../Text"));
var _Radio = _interopRequireDefault(require("../../Radio"));
var _Badge = _interopRequireDefault(require("../../Badge"));
var _BadgePrimitive = require("../../primitives/BadgePrimitive");
var _mediaQuery = _interopRequireDefault(require("../../utils/mediaQuery"));
var _consts = _interopRequireDefault(require("./consts"));
var _ListItem = require("../../List/ListItem");
var _rtl = require("../../utils/rtl");
var _PricingTableContext = _interopRequireDefault(require("../PricingTableContext"));
var _useMediaQuery = _interopRequireDefault(require("../../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 === _consts.default.HOVER) {
return getActive(theme.orbit.boxShadowActionActive);
}
return getActive(theme.orbit.boxShadowAction);
};
const StyledPricingTableItem = _styledComponents.default.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(_consts.default.HOVER), ({
basis
}) => basis && (0, _styledComponents.css)(["flex-basis:", ";"], basis), ({
featureIcon
}) => featureIcon && (0, _styledComponents.css)(["", ""], _mediaQuery.default.desktop((0, _styledComponents.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.default
};
const StyledBadgeWrapper = _styledComponents.default.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 = _styledComponents.default.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;}", ""], _BadgePrimitive.StyledBadge, _mediaQuery.default.desktop((0, _styledComponents.css)(["bottom:calc(100% + ", ");"], ({
hasIcon
}) => hasIcon ? "11px" : "5px"))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
StyledBadgeWrapperContent.defaultProps = {
theme: _defaultTheme.default
};
const Item = _styledComponents.default.div.withConfig({
displayName: "PricingTableItem__Item",
componentId: "sc-10hycsz-3"
})([""]);
const DesktopRadio = _styledComponents.default.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.default
};
const Spacer = _styledComponents.default.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.default
};
/*
This causes rewrite of a list so list is ussable in in PricingTable, this is not at all elegant solution.
*/
const StyledListWrapper = _styledComponents.default.div.withConfig({
displayName: "PricingTableItem__StyledListWrapper",
componentId: "sc-10hycsz-6"
})(["", ""], ({
theme
}) => (0, _styledComponents.css)(["width:100%;", "{border-bottom:1px solid ", ";padding:", ";align-items:center;&,", "{font-weight:", ";}:last-child{border-bottom:none;}", "}", "{margin:", ";height:", ";svg{height:", ";width:", ";}}"], _ListItem.Item, theme.orbit.paletteCloudDark, theme.orbit.spaceSmall, _Text.StyledText, theme.orbit.fontWeightMedium, _mediaQuery.default.tablet((0, _styledComponents.css)(["padding:", ";"], theme.orbit.spaceXSmall)), _ListItem.IconContainer, (0, _rtl.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
exports.StyledListWrapper = StyledListWrapper;
StyledListWrapper.defaultProps = {
theme: _defaultTheme.default
};
const PricingTableItem = ({
dataTest,
name,
price,
priceBadge,
featureIcon,
badge,
action,
active = false,
children,
onClick,
compact,
mobileDescription
}) => {
const onClickHandler = () => {
if (onClick) {
onClick();
}
};
const {
isDesktop
} = (0, _useMediaQuery.default)();
const trueCompact = typeof compact !== "undefined" ? compact : !isDesktop;
const context = React.useContext(_PricingTableContext.default);
return /*#__PURE__*/React.createElement(React.Fragment, null, context.isContent ? /*#__PURE__*/React.createElement(React.Fragment, null, mobileDescription && /*#__PURE__*/React.createElement(_Text.default, {
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.default, {
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.default, {
type: "infoInverted"
}, badge) : badge)), /*#__PURE__*/React.createElement(_Stack.default, {
flex: true,
direction: "column",
spacing: "XSmall",
desktop: {
spacing: "medium"
}
}, featureIcon && /*#__PURE__*/React.createElement(_Stack.default, {
justify: "center",
grow: false
}, featureIcon), /*#__PURE__*/React.createElement(_Stack.default, {
justify: "between",
direction: "column"
}, /*#__PURE__*/React.createElement(_Stack.default, {
spacing: "XXSmall",
direction: "column",
flex: true,
align: "stretch",
desktop: {
grow: false
}
}, name && /*#__PURE__*/React.createElement(_Text.default, {
type: "primary",
align: "center",
weight: featureIcon ? "normal" : "bold"
}, name), price && /*#__PURE__*/React.createElement(_Text.default, {
size: "large",
weight: "bold",
type: "primary",
align: "center"
}, price), priceBadge && /*#__PURE__*/React.createElement(_Stack.default, {
justify: "center",
align: "end",
desktop: {
grow: false
}
}, priceBadge)), trueCompact ? /*#__PURE__*/React.createElement(_Stack.default, {
justify: "center",
align: "center",
grow: false
}, /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(_Radio.default, {
checked: active,
onChange: onClickHandler,
hasError: context.hasError
}))) : /*#__PURE__*/React.createElement(_Stack.default, {
justify: "between",
direction: "column"
}, /*#__PURE__*/React.createElement(StyledListWrapper, null, children && children), action && /*#__PURE__*/React.createElement(_Stack.default, {
justify: "center",
grow: false
}, action))))));
};
var _default = PricingTableItem;
exports.default = _default;