@kiwicom/orbit-components/lib/Card/components/CardWrapper/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

Object.defineProperty(exports, "__esModule", {
  value: 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");

var topBorderRadius = (0, _styledComponents.css)(["border-top-left-radius:", ";border-top-right-radius:", ";", ""], function (_ref) {
  var expanded = _ref.expanded;
  return expanded && _borders.getBorderRadiusMobile;
}, function (_ref2) {
  var expanded = _ref2.expanded;
  return expanded && _borders.getBorderRadiusMobile;
}, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["border-top-left-radius:", ";border-top-right-radius:", ";"], _borders.getBorderRadius, _borders.getBorderRadius))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

topBorderRadius.defaultTheme = {
  theme: _defaultTheme.default
};
var bottomBorderRadius = (0, _styledComponents.css)(["border-bottom-left-radius:", ";border-bottom-right-radius:", ";", ""], function (_ref3) {
  var expanded = _ref3.expanded;
  return expanded && _borders.getBorderRadiusMobile;
}, function (_ref4) {
  var expanded = _ref4.expanded;
  return expanded && _borders.getBorderRadiusMobile;
}, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["border-bottom-left-radius:", ";border-bottom-right-radius:", ";"], _borders.getBorderRadius, _borders.getBorderRadius))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

bottomBorderRadius.defaultProps = {
  theme: _defaultTheme.default
};

var StyledCardWrapper = _styledComponents.default.div.withConfig({
  displayName: "CardWrapper__StyledCardWrapper",
  componentId: "sc-1u526f5-0"
})(["padding:", ";cursor:", ";", ";", ";border-bottom:", ";transition:", ";", ";", ";", ";", " &:last-of-type{", "}", " &:focus{outline:0;background:", ";}&:hover{background:", ";}"], function (_ref5) {
  var theme = _ref5.theme,
      noPadding = _ref5.noPadding;
  return !noPadding && theme.orbit.spaceMedium;
}, function (_ref6) {
  var onClick = _ref6.onClick;
  return onClick && "pointer";
}, _mixins.CardElement, function (_ref7) {
  var bottomBorder = _ref7.bottomBorder;
  return bottomBorder && bottomBorderRadius;
}, function (_ref8) {
  var roundedBottom = _ref8.roundedBottom,
      bottomBorder = _ref8.bottomBorder;
  return (roundedBottom || bottomBorder) && _borders.getBorder;
}, (0, _transition.default)(["margin"], "fast", "ease-in-out"), function (_ref9) {
  var noBorderTop = _ref9.noBorderTop,
      expandable = _ref9.expandable;
  return noBorderTop && !expandable && "border-top: 1px solid transparent; padding-top: 0 !important;";
}, function (_ref10) {
  var expanded = _ref10.expanded;
  return expanded && (0, _styledComponents.css)(["margin:", " 0;border:1px solid transparent;"], function (_ref11) {
    var theme = _ref11.theme;
    return theme.orbit.spaceXSmall;
  });
}, function (_ref12) {
  var roundedTop = _ref12.roundedTop;
  return roundedTop && topBorderRadius;
}, function (_ref13) {
  var roundedBottom = _ref13.roundedBottom;
  return roundedBottom && bottomBorderRadius;
}, function (_ref14) {
  var expanded = _ref14.expanded;
  return !expanded && (0, _styledComponents.css)(["border-bottom:", ";"], _borders.getBorder);
}, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["&:first-of-type{", ";}&:last-of-type{", ";}padding:", ";"], topBorderRadius, bottomBorderRadius, function (_ref15) {
  var theme = _ref15.theme,
      noPadding = _ref15.noPadding;
  return !noPadding && theme.orbit.spaceLarge;
})), function (_ref16) {
  var theme = _ref16.theme;
  return theme.orbit.paletteWhiteHover;
}, function (_ref17) {
  var theme = _ref17.theme,
      onClick = _ref17.onClick;
  return onClick && theme.orbit.paletteWhiteHover;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledCardWrapper.defaultProps = {
  theme: _defaultTheme.default
};

var CardWrapper = function CardWrapper(_ref18) {
  var children = _ref18.children,
      onClick = _ref18.onClick,
      bottomBorder = _ref18.bottomBorder,
      roundedBottom = _ref18.roundedBottom,
      roundedTop = _ref18.roundedTop,
      expanded = _ref18.expanded,
      noBorderTop = _ref18.noBorderTop,
      dataTest = _ref18.dataTest,
      noPadding = _ref18.noPadding,
      expandable = _ref18.expandable,
      initialExpanded = _ref18.initialExpanded;
  return /*#__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;