@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.
251 lines (213 loc) • 9.99 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
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 _useMediaQuery2 = _interopRequireDefault(require("../../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 === _consts.default.HOVER) {
return getActive(theme.orbit.boxShadowActionActive);
}
return getActive(theme.orbit.boxShadowAction);
};
};
var StyledPricingTableItem = _styledComponents.default.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(_consts.default.HOVER), function (_ref6) {
var basis = _ref6.basis;
return basis && (0, _styledComponents.css)(["flex-basis:", ";"], basis);
}, function (_ref7) {
var featureIcon = _ref7.featureIcon;
return featureIcon && (0, _styledComponents.css)(["", ""], _mediaQuery.default.desktop((0, _styledComponents.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;
})));
});
StyledPricingTableItem.defaultProps = {
theme: _defaultTheme.default
};
var StyledBadgeWrapper = _styledComponents.default.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 = _styledComponents.default.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;}", ""], _BadgePrimitive.StyledBadge, _mediaQuery.default.desktop((0, _styledComponents.css)(["bottom:calc(100% + ", ");"], function (_ref10) {
var hasIcon = _ref10.hasIcon;
return hasIcon ? "11px" : "5px";
})));
StyledBadgeWrapperContent.defaultProps = {
theme: _defaultTheme.default
};
var Item = _styledComponents.default.div.withConfig({
displayName: "PricingTableItem__Item",
componentId: "tsjz71-3"
})([""]);
var DesktopRadio = _styledComponents.default.div.withConfig({
displayName: "PricingTableItem__DesktopRadio",
componentId: "tsjz71-4"
})(["position:absolute;top:10px;right:10px;"]);
DesktopRadio.defaultProps = {
theme: _defaultTheme.default
};
var Spacer = _styledComponents.default.div.withConfig({
displayName: "PricingTableItem__Spacer",
componentId: "tsjz71-5"
})(["margin-top:", ";"], function (_ref11) {
var theme = _ref11.theme;
return theme.orbit.spaceSmall;
});
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.
*/
var StyledListWrapper = _styledComponents.default.div.withConfig({
displayName: "PricingTableItem__StyledListWrapper",
componentId: "tsjz71-6"
})(["", ""], function (_ref12) {
var theme = _ref12.theme;
return (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)("".concat(theme.orbit.spaceXXSmall, " ").concat(theme.orbit.spaceXSmall, " 0 0")), theme.heightIconLarge, theme.orbit.heightIconMedium, theme.orbit.widthIconMedium);
});
exports.StyledListWrapper = StyledListWrapper;
StyledListWrapper.defaultProps = {
theme: _defaultTheme.default
};
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 = (0, _useMediaQuery2.default)(),
isDesktop = _useMediaQuery.isDesktop;
var trueCompact = typeof compact !== "undefined" ? compact : !isDesktop;
var context = (0, _react.useContext)(_PricingTableContext.default);
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, context.isContent ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, mobileDescription && /*#__PURE__*/_react.default.createElement(_Text.default, {
weight: "bold",
size: "normal"
}, mobileDescription), children && children, action && action) : /*#__PURE__*/_react.default.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.default.createElement(Spacer, null), context.desktopRadio && !trueCompact && /*#__PURE__*/_react.default.createElement(DesktopRadio, null, /*#__PURE__*/_react.default.createElement(_Radio.default, {
checked: active,
onChange: onClickHandler,
hasError: context.hasError
})), badge && /*#__PURE__*/_react.default.createElement(StyledBadgeWrapper, null, /*#__PURE__*/_react.default.createElement(StyledBadgeWrapperContent, {
hasIcon: !!featureIcon
}, typeof badge === "string" ? /*#__PURE__*/_react.default.createElement(_Badge.default, {
type: "infoInverted"
}, badge) : badge)), /*#__PURE__*/_react.default.createElement(_Stack.default, {
flex: true,
direction: "column",
spacing: "condensed",
desktop: {
spacing: "natural"
}
}, featureIcon && /*#__PURE__*/_react.default.createElement(_Stack.default, {
justify: "center",
grow: false
}, featureIcon), /*#__PURE__*/_react.default.createElement(_Stack.default, {
justify: "between",
direction: "column"
}, /*#__PURE__*/_react.default.createElement(_Stack.default, {
spacing: "tight",
direction: "column",
flex: true,
align: "stretch",
desktop: {
grow: false
}
}, name && /*#__PURE__*/_react.default.createElement(_Text.default, {
type: "primary",
align: "center",
weight: featureIcon ? "normal" : "bold"
}, name), price && /*#__PURE__*/_react.default.createElement(_Text.default, {
size: "large",
weight: "bold",
type: "primary",
align: "center"
}, price), priceBadge && /*#__PURE__*/_react.default.createElement(_Stack.default, {
justify: "center",
align: "end",
desktop: {
grow: false
}
}, priceBadge)), trueCompact ? /*#__PURE__*/_react.default.createElement(_Stack.default, {
justify: "center",
align: "center",
grow: false
}, /*#__PURE__*/_react.default.createElement(Item, null, /*#__PURE__*/_react.default.createElement(_Radio.default, {
checked: active,
onChange: onClickHandler,
hasError: context.hasError
}))) : /*#__PURE__*/_react.default.createElement(_Stack.default, {
justify: "between",
direction: "column"
}, /*#__PURE__*/_react.default.createElement(StyledListWrapper, null, children && children), action && /*#__PURE__*/_react.default.createElement(_Stack.default, {
justify: "center",
grow: false
}, action))))));
};
var _default = PricingTableItem;
exports.default = _default;