@kiwicom/orbit-components/es/Tile/components/TileHeader/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

import * as React from "react";
import styled, { css } from "styled-components";
import defaultTheme from "../../../defaultTheme";
import { rtlSpacing } from "../../../utils/rtl";
import Stack from "../../../Stack";
import Heading from "../../../Heading";
import ChevronDown from "../../../icons/ChevronDown";
import NewWindow from "../../../icons/NewWindow";
import ChevronForward from "../../../icons/ChevronForward";
import transition from "../../../utils/transition";
import mq from "../../../utils/mediaQuery";
const StyledTileHeader = styled.div.withConfig({
  displayName: "TileHeader__StyledTileHeader",
  componentId: "sc-pwakb0-0"
})(["", ""], ({
  theme
}) => css(["display:block;width:100%;box-sizing:border-box;cursor:pointer;padding:", ";font-size:", ";line-height:", ";transition:", ";", ""], theme.orbit.spaceMedium, theme.orbit.fontSizeTextNormal, theme.orbit.lineHeightTextNormal, transition(["background-color"], "fast", "ease-in-out"), mq.largeMobile(css(["padding:", ";"], theme.orbit.spaceLarge))));
StyledTileHeader.defaultProps = {
  theme: defaultTheme
};
const StyledTileIcon = styled.div.withConfig({
  displayName: "TileHeader__StyledTileIcon",
  componentId: "sc-pwakb0-1"
})(["", ""], ({
  theme
}) => css(["color:", ";flex-shrink:0;align-items:center;align-self:flex-start;margin:", ";"], theme.orbit.colorIconPrimary, rtlSpacing(`0 ${theme.orbit.spaceXSmall} 0 0`)));
StyledTileIcon.defaultProps = {
  theme: defaultTheme
};
const StyledTileTitle = styled.div.withConfig({
  displayName: "TileHeader__StyledTileTitle",
  componentId: "sc-pwakb0-2"
})(["display:flex;align-items:center;width:100%;"]);
StyledTileTitle.defaultProps = {
  theme: defaultTheme
};
const StyledTileDescription = styled.div.withConfig({
  displayName: "TileHeader__StyledTileDescription",
  componentId: "sc-pwakb0-3"
})(["", ""], ({
  theme,
  hasTitle
}) => css(["font-family:", ";font-size:", ";color:", ";line-height:", ";font-weight:", ";-webkit-text-size-adjust:100%;width:100%;", ";"], theme.orbit.fontFamily, theme.orbit.fontSizeTextNormal, theme.orbit.colorTextPrimary, theme.orbit.lineHeightTextNormal, theme.orbit.fontWeightNormal, hasTitle && css(["margin-top:", ";"], theme.orbit.spaceXXSmall)));
StyledTileDescription.defaultProps = {
  theme: defaultTheme
};
const IconRight = ({
  external,
  expandable,
  className
}) => {
  if (expandable) return /*#__PURE__*/React.createElement(ChevronDown, {
    color: "secondary",
    className: className
  });
  if (external) return /*#__PURE__*/React.createElement(NewWindow, {
    className: className
  });
  return /*#__PURE__*/React.createElement(ChevronForward, {
    color: "secondary",
    className: className,
    reverseOnRtl: true
  });
};
export const StyledIconRight = styled(IconRight).withConfig({
  displayName: "TileHeader__StyledIconRight",
  componentId: "sc-pwakb0-4"
})(["", ""], ({
  theme,
  expanded
}) => css(["color:", ";margin:", ";transition:", ";", ";"], theme.orbit.colorIconSecondary, rtlSpacing(`0 0 0 ${theme.orbit.spaceSmall}`), transition(["color", "transform"], "fast", "ease-in-out"), expanded && css(["transform:rotate(-180deg);"])));
StyledIconRight.defaultProps = {
  theme: defaultTheme
};
const TileHeader = ({
  icon,
  title,
  description,
  expandable,
  expanded,
  external,
  onClick,
  header,
  role,
  ariaExpanded,
  ariaControls,
  id,
  tabIndex,
  onKeyDown,
  noHeaderIcon
}) => /*#__PURE__*/React.createElement(StyledTileHeader, {
  onClick: onClick,
  onKeyDown: onKeyDown,
  role: role,
  "aria-expanded": ariaExpanded,
  "aria-controls": ariaControls,
  id: id,
  tabIndex: tabIndex ? Number(tabIndex) : undefined
}, /*#__PURE__*/React.createElement(Stack, {
  align: "center",
  justify: "between",
  shrink: true,
  spacing: "none"
}, icon && /*#__PURE__*/React.createElement(StyledTileIcon, null, icon), header || (title || description) && /*#__PURE__*/React.createElement(Stack, {
  spacing: "none",
  direction: "column",
  shrink: true
}, title && /*#__PURE__*/React.createElement(StyledTileTitle, null, /*#__PURE__*/React.createElement(Heading, {
  type: "title4",
  as: "h3"
}, title)), description && /*#__PURE__*/React.createElement(StyledTileDescription, {
  hasTitle: !!title
}, description)), !noHeaderIcon && /*#__PURE__*/React.createElement(StyledIconRight, {
  external: external,
  expandable: expandable,
  expanded: expanded
})));
export default TileHeader;