@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").default;

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

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");

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))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

topBorderRadius.defaultTheme = {
  theme: _defaultTheme.default
};
const bottomBorderRadius = (0, _styledComponents.css)(["border-bottom-left-radius:", ";border-bottom-right-radius:", ";", ""], ({
  expanded
}) => expanded && _borders.getBorderRadiusMobile, ({
  expanded
}) => 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
};

const StyledCardWrapper = _styledComponents.default.div.withConfig({
  displayName: "CardWrapper__StyledCardWrapper",
  componentId: "sc-q3djda-0"
})(["", ";"], ({
  theme,
  expandable,
  expanded,
  noPadding,
  noBorderTop,
  bottomBorder,
  roundedTop,
  roundedBottom,
  onClick
}) => (0, _styledComponents.css)(["padding:", ";cursor:", ";", ";", ";border-bottom:", ";transition:", ";", ";", ";", ";", " &:last-of-type{", "}", " &:focus{outline:0;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 && `
      border-top: 1px solid transparent;
      padding-top: 0 !important;
    `, expanded && `
      margin: ${theme.orbit.spaceXSmall} 0;
      border: 1px solid transparent;
    `, 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)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


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;