UNPKG

@kiwicom/orbit-components

Version:

<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"

35 lines (29 loc) 1.76 kB
import * as React from "react"; import styled from "styled-components"; import defaultTokens from "../defaultTokens"; import Close from "../icons/Close"; import ButtonLink from "../ButtonLink"; import { StyledCardSection } from "./CardSection"; import { StyledCardHeader } from "./CardHeader"; import { StyledCardContent } from "./CardContent"; import getSpacingToken from "../common/getSpacingToken"; const StyledCard = styled.div.withConfig({ displayName: "Card__StyledCard" })(["width:100%;height:100%;background:", ";border-radius:", ";border-width:", ";border-style:", ";border-color:", ";box-sizing:border-box;position:relative;margin-bottom:", ";", "{padding-right:", ";}", " + ", ",", " + ", "{padding-top:0;border-top:0;}"], ({ theme }) => theme.orbit.backgroundCard, ({ theme }) => theme.orbit.borderRadiusNormal, ({ theme }) => theme.orbit.borderWidthCard, ({ theme }) => theme.orbit.borderStyleCard, ({ theme }) => theme.orbit.borderColorCard, getSpacingToken, StyledCardHeader, ({ theme, closable }) => closable && theme.orbit.spaceLarge, StyledCardHeader, StyledCardSection, StyledCardHeader, StyledCardContent); StyledCard.defaultProps = { theme: defaultTokens }; const CloseContainer = styled.div.withConfig({ displayName: "Card__CloseContainer" })(["position:absolute;top:0;right:0;z-index:1;"]); const Card = ({ closable, onClose, children, dataTest, spaceAfter }) => React.createElement( StyledCard, { closable: closable, "data-test": dataTest, spaceAfter: spaceAfter }, closable && React.createElement( CloseContainer, null, React.createElement(ButtonLink, { type: "secondary", size: "small", icon: React.createElement(Close, null), onClick: onClose, transparent: true }) ), children ); export default Card;