@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.
62 lines (60 loc) • 2.1 kB
JavaScript
import * as React from "react";
import styled, { css } from "styled-components";
import defaultTheme from "../../defaultTheme";
import Heading, { StyledHeading } from "../../Heading";
import Text from "../../Text";
import { rtlSpacing } from "../../utils/rtl";
import media from "../../utils/mediaQuery";
export const StyledCardHeader = styled.div.withConfig({
displayName: "CardHeader__StyledCardHeader",
componentId: "lvjkay-0"
})(["position:relative;width:100%;padding:", ";box-sizing:border-box;color:", ";", ""], ({
theme
}) => theme.orbit.spaceMedium, ({
theme
}) => theme.orbit.colorHeading, media.desktop(css(["padding:", ";"], ({
theme
}) => theme.orbit.spaceLarge)));
StyledCardHeader.defaultProps = {
theme: defaultTheme
};
const StyledHeadingWrapper = styled.div.withConfig({
displayName: "CardHeader__StyledHeadingWrapper",
componentId: "lvjkay-1"
})(["display:flex;align-items:center;", "{width:100%;}"], StyledHeading);
const StyledSubTitle = styled.div.withConfig({
displayName: "CardHeader__StyledSubTitle",
componentId: "lvjkay-2"
})(["display:flex;margin-top:", ";"], ({
theme
}) => theme.orbit.spaceXXSmall);
StyledSubTitle.defaultProps = {
theme: defaultTheme
};
const StyledIcon = styled.div.withConfig({
displayName: "CardHeader__StyledIcon",
componentId: "lvjkay-3"
})(["color:", ";display:flex;align-items:center;margin:", ";"], ({
theme
}) => theme.orbit.colorHeading, ({
theme
}) => rtlSpacing(`0 ${theme.orbit.spaceSmall} 0 0`));
StyledIcon.defaultProps = {
theme: defaultTheme
};
const CardHeader = ({
icon,
title,
subTitle,
actions,
dataTest,
dataA11ySection
}) => React.createElement(StyledCardHeader, {
"data-test": dataTest
}, React.createElement(StyledHeadingWrapper, null, icon && React.createElement(StyledIcon, null, icon), React.createElement(Heading, {
type: "title3",
element: "h2",
dataA11ySection: dataA11ySection
}, title), actions), subTitle && React.createElement(StyledSubTitle, null, React.createElement(Text, null, subTitle)));
CardHeader.displayName = "CardHeader";
export default CardHeader;