@kiwicom/orbit-components/es/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.

import styled, { css } from "styled-components";
import * as React from "react";
import transition from "../../../utils/transition";
import mq from "../../../utils/mediaQuery";
import { CardElement } from "../../helpers/mixins";
import defaultTheme from "../../../defaultTheme";
import { getBorder, getBorderRadius, getBorderRadiusMobile } from "../../helpers/borders";
var topBorderRadius = css(["border-top-left-radius:", ";border-top-right-radius:", ";", ""], function (_ref) {
  var expanded = _ref.expanded;
  return expanded && getBorderRadiusMobile;
}, function (_ref2) {
  var expanded = _ref2.expanded;
  return expanded && getBorderRadiusMobile;
}, mq.largeMobile(css(["border-top-left-radius:", ";border-top-right-radius:", ";"], getBorderRadius, getBorderRadius))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

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

bottomBorderRadius.defaultProps = {
  theme: defaultTheme
};
var StyledCardWrapper = styled.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";
}, CardElement, function (_ref7) {
  var bottomBorder = _ref7.bottomBorder;
  return bottomBorder && bottomBorderRadius;
}, function (_ref8) {
  var roundedBottom = _ref8.roundedBottom,
      bottomBorder = _ref8.bottomBorder;
  return (roundedBottom || bottomBorder) && getBorder;
}, transition(["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 && 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 && css(["border-bottom:", ";"], getBorder);
}, mq.largeMobile(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
};

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

export default CardWrapper;