@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
79 lines (77 loc) • 2.79 kB
JavaScript
import styled, { css } from "styled-components";
import * as React from "react";
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.tablet(css(["border-top-left-radius:", ";border-top-right-radius:", ";"], getBorderRadius, getBorderRadius)));
topBorderRadius.defaultTheme = {
theme: defaultTheme
};
const bottomBorderRadius = css(["border-bottom-left-radius:", ";border-bottom-right-radius:", ";", ""], ({
expanded
}) => expanded && getBorderRadiusMobile, ({
expanded
}) => expanded && getBorderRadiusMobile, mq.tablet(css(["border-bottom-left-radius:", ";border-bottom-right-radius:", ";"], getBorderRadius, getBorderRadius)));
bottomBorderRadius.defaultProps = {
theme: defaultTheme
};
const StyledCardWrapper = styled.div.withConfig({
displayName: "CardWrapper__StyledCardWrapper",
componentId: "sc-1oft6i5-0"
})(["padding:", ";", ";", ";border-bottom:", ";transition:margin ", " ease-in-out;", ";", ";", ";", " &:last-of-type{", "}", ""], ({
theme,
noPadding
}) => !noPadding && theme.orbit.spaceMedium, CardElement, ({
bottomBorder
}) => bottomBorder && bottomBorderRadius, ({
roundedBottom,
bottomBorder
}) => (roundedBottom || bottomBorder) && getBorder, ({
theme
}) => theme.orbit.durationFast, ({
noBorderTop,
expandable
}) => noBorderTop && !expandable && `border-top: 1px solid transparent; padding-top: 0 !important;`, ({
expanded
}) => expanded && css(["margin:", " 0;border:1px solid transparent;"], ({
theme
}) => theme.orbit.spaceXSmall), ({
roundedTop
}) => roundedTop && topBorderRadius, ({
roundedBottom
}) => roundedBottom && bottomBorderRadius, ({
expanded
}) => !expanded && css(["border-bottom:", ";"], getBorder), mq.tablet(css(["&:first-of-type{", ";}&:last-of-type{", ";}padding:", ";"], topBorderRadius, bottomBorderRadius, ({
theme,
noPadding
}) => !noPadding && theme.orbit.spaceLarge)));
StyledCardWrapper.defaultProps = {
theme: defaultTheme
};
const CardWrapper = ({
children,
bottomBorder,
roundedBottom,
roundedTop,
expanded,
noBorderTop,
dataTest,
noPadding,
expandable,
initialExpanded
}) => 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;