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