@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)));
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)));
bottomBorderRadius.defaultProps = {
  theme: defaultTheme
};
var StyledCardWrapper = styled.div.withConfig({
  displayName: "CardWrapper__StyledCardWrapper",
  componentId: "sc-1u526f5-0"
})(["padding:", ";", ";", ";border-bottom:", ";transition:", ";", ";", ";", ";", " &:last-of-type{", "}", ""], function (_ref5) {
  var theme = _ref5.theme,
      noPadding = _ref5.noPadding;
  return !noPadding && theme.orbit.spaceMedium;
}, CardElement, function (_ref6) {
  var bottomBorder = _ref6.bottomBorder;
  return bottomBorder && bottomBorderRadius;
}, function (_ref7) {
  var roundedBottom = _ref7.roundedBottom,
      bottomBorder = _ref7.bottomBorder;
  return (roundedBottom || bottomBorder) && getBorder;
}, transition(["margin"], "fast", "ease-in-out"), function (_ref8) {
  var noBorderTop = _ref8.noBorderTop,
      expandable = _ref8.expandable;
  return noBorderTop && !expandable && "border-top: 1px solid transparent; padding-top: 0 !important;";
}, function (_ref9) {
  var expanded = _ref9.expanded;
  return expanded && css(["margin:", " 0;border:1px solid transparent;"], function (_ref10) {
    var theme = _ref10.theme;
    return theme.orbit.spaceXSmall;
  });
}, function (_ref11) {
  var roundedTop = _ref11.roundedTop;
  return roundedTop && topBorderRadius;
}, function (_ref12) {
  var roundedBottom = _ref12.roundedBottom;
  return roundedBottom && bottomBorderRadius;
}, function (_ref13) {
  var expanded = _ref13.expanded;
  return !expanded && css(["border-bottom:", ";"], getBorder);
}, mq.largeMobile(css(["&:first-of-type{", ";}&:last-of-type{", ";}padding:", ";"], topBorderRadius, bottomBorderRadius, function (_ref14) {
  var theme = _ref14.theme,
      noPadding = _ref14.noPadding;
  return !noPadding && theme.orbit.spaceLarge;
})));
StyledCardWrapper.defaultProps = {
  theme: defaultTheme
};

var CardWrapper = function CardWrapper(_ref15) {
  var children = _ref15.children,
      bottomBorder = _ref15.bottomBorder,
      roundedBottom = _ref15.roundedBottom,
      roundedTop = _ref15.roundedTop,
      expanded = _ref15.expanded,
      noBorderTop = _ref15.noBorderTop,
      dataTest = _ref15.dataTest,
      noPadding = _ref15.noPadding,
      expandable = _ref15.expandable,
      initialExpanded = _ref15.initialExpanded;
  return /*#__PURE__*/React.createElement(StyledCardWrapper, {
    bottomBorder: bottomBorder,
    expanded: expanded || initialExpanded,
    "data-test": dataTest,
    noBorderTop: noBorderTop,
    expandable: expandable,
    noPadding: noPadding,
    roundedBottom: roundedBottom,
    roundedTop: roundedTop
  }, children);
};

export default CardWrapper;