@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.
64 lines (63 loc) • 3.65 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = void 0;
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var React = _interopRequireWildcard(require("react"));
var _transition = _interopRequireDefault(require("../../../utils/transition"));
var _mediaQuery = _interopRequireDefault(require("../../../utils/mediaQuery"));
var _mixins = require("../../helpers/mixins");
var _defaultTheme = _interopRequireDefault(require("../../../defaultTheme"));
var _borders = require("../../helpers/borders");
const topBorderRadius = (0, _styledComponents.css)(["border-top-left-radius:", ";border-top-right-radius:", ";", ""], ({
expanded
}) => expanded && _borders.getBorderRadiusMobile, ({
expanded
}) => expanded && _borders.getBorderRadiusMobile, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["border-top-left-radius:", ";border-top-right-radius:", ";"], _borders.getBorderRadius, _borders.getBorderRadius)));
const bottomBorderRadius = (0, _styledComponents.css)(["", ""], ({
expanded
}) => (0, _styledComponents.css)(["border-bottom-left-radius:", ";border-bottom-right-radius:", ";", ""], expanded && _borders.getBorderRadiusMobile, expanded && _borders.getBorderRadiusMobile, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["border-bottom-left-radius:", ";border-bottom-right-radius:", ";"], _borders.getBorderRadius, _borders.getBorderRadius))));
const StyledCardWrapper = _styledComponents.default.div.withConfig({
displayName: "CardWrapper__StyledCardWrapper",
componentId: "sc-na60ik-0"
})(["", ";"], ({
theme,
expandable,
expanded,
noPadding,
noBorderTop,
bottomBorder,
roundedTop,
roundedBottom,
onClick
}) => (0, _styledComponents.css)(["padding:", ";cursor:", ";", ";", ";border-bottom:", ";transition:", ";", ";", ";", ";", " &:last-of-type{", "}", " &:focus{background:", ";}&:hover{background:", ";}"], !noPadding && theme.orbit.spaceMedium, onClick && `pointer`, _mixins.CardElement, bottomBorder && bottomBorderRadius, (roundedBottom || bottomBorder) && _borders.getBorder, (0, _transition.default)(["margin"], "fast", "ease-in-out"), noBorderTop && !expandable && (0, _styledComponents.css)(["border-top:1px solid transparent;padding-top:0 !important;"]), expanded && (0, _styledComponents.css)(["margin:", " 0;border:1px solid transparent;"], theme.orbit.spaceXSmall), roundedTop && topBorderRadius, roundedBottom && bottomBorderRadius, !expanded && (0, _styledComponents.css)(["border-bottom:", ";"], _borders.getBorder), _mediaQuery.default.largeMobile((0, _styledComponents.css)(["&:first-of-type{", ";}&:last-of-type{", ";}padding:", ";"], topBorderRadius, bottomBorderRadius, !noPadding && theme.orbit.spaceLarge)), theme.orbit.paletteWhiteHover, onClick && theme.orbit.paletteWhiteHover));
StyledCardWrapper.defaultProps = {
theme: _defaultTheme.default
};
const CardWrapper = ({
children,
onClick,
bottomBorder,
roundedBottom,
roundedTop,
expanded,
noBorderTop,
dataTest,
noPadding,
expandable,
initialExpanded
}) => /*#__PURE__*/React.createElement(StyledCardWrapper, {
bottomBorder: bottomBorder,
expanded: expanded || initialExpanded,
onClick: onClick,
tabIndex: onClick ? 0 : undefined,
"data-test": dataTest,
noBorderTop: noBorderTop,
expandable: expandable,
noPadding: noPadding,
roundedBottom: roundedBottom,
roundedTop: roundedTop
}, children);
var _default = CardWrapper;
exports.default = _default;