@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";
const topBorderRadius = css(["border-top-left-radius:", ";border-top-right-radius:", ";", ""], ({
  expanded
}) => expanded && getBorderRadiusMobile, ({
  expanded
}) => 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
};
const bottomBorderRadius = css(["border-bottom-left-radius:", ";border-bottom-right-radius:", ";", ""], ({
  expanded
}) => expanded && getBorderRadiusMobile, ({
  expanded
}) => 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
};
const StyledCardWrapper = styled.div.withConfig({
  displayName: "CardWrapper__StyledCardWrapper",
  componentId: "sc-q3djda-0"
})(["", ";"], ({
  theme,
  expandable,
  expanded,
  noPadding,
  noBorderTop,
  bottomBorder,
  roundedTop,
  roundedBottom,
  onClick
}) => css(["padding:", ";cursor:", ";", ";", ";border-bottom:", ";transition:", ";", ";", ";", ";", " &:last-of-type{", "}", " &:focus{outline:0;background:", ";}&:hover{background:", ";}"], !noPadding && theme.orbit.spaceMedium, onClick && `pointer`, CardElement, bottomBorder && bottomBorderRadius, (roundedBottom || bottomBorder) && getBorder, transition(["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 && css(["border-bottom:", ";"], getBorder), mq.largeMobile(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
};

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

export default CardWrapper;