@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
JavaScript
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;