@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 ChevronRight from "../../../icons/ChevronRight";
import transition from "../../../utils/transition";
import mq from "../../../utils/mediaQuery";
const StyledTileHeader = styled.div.withConfig({
  displayName: "TileHeader__StyledTileHeader",
  componentId: "sc-1dszoii-0"
})(["display:block;width:100%;box-sizing:border-box;cursor:pointer;padding:", ";font-size:", ";line-height:", ";transition:", ";:focus{outline:none;}", ""], ({
  theme
}) => theme.orbit.spaceMedium, ({
  theme
}) => theme.orbit.fontSizeTextNormal, ({
  theme
}) => theme.orbit.lineHeightTextNormal, transition(["background-color"], "fast", "ease-in-out"), mq.largeMobile(css(["padding:", ";"], ({
  theme
}) => theme.orbit.spaceLarge))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledTileHeader.defaultProps = {
  theme: defaultTheme
};
const StyledTileIcon = styled.div.withConfig({
  displayName: "TileHeader__StyledTileIcon",
  componentId: "sc-1dszoii-1"
})(["color:", ";flex-shrink:0;align-items:center;align-self:flex-start;margin:", ";"], ({
  theme
}) => theme.orbit.colorIconPrimary, ({
  theme
}) => rtlSpacing(`0 ${theme.orbit.spaceXSmall} 0 0`)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledTileIcon.defaultProps = {
  theme: defaultTheme
};
const StyledTileTitle = styled.div.withConfig({
  displayName: "TileHeader__StyledTileTitle",
  componentId: "sc-1dszoii-2"
})(["display:flex;align-items:center;width:100%;"]); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledTileTitle.defaultProps = {
  theme: defaultTheme
};
const StyledTileDescription = styled.div.withConfig({
  displayName: "TileHeader__StyledTileDescription",
  componentId: "sc-1dszoii-3"
})(["font-family:", ";font-size:", ";color:", ";line-height:", ";-webkit-text-size-adjust:100%;width:100%;", ";"], ({
  theme
}) => theme.orbit.fontFamily, ({
  theme
}) => theme.orbit.fontSizeTextNormal, ({
  theme
}) => theme.orbit.colorTextPrimary, ({
  theme
}) => theme.orbit.lineHeightTextNormal, ({
  hasTitle,
  theme
}) => hasTitle && css(["margin-top:", ";"], theme.orbit.spaceXXSmall)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

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(ChevronRight, {
    color: "secondary",
    className: className,
    reverseOnRtl: true
  });
};

export const StyledIconRight = styled(IconRight).withConfig({
  displayName: "TileHeader__StyledIconRight",
  componentId: "sc-1dszoii-4"
})(["color:", ";margin:", ";transition:", ";", ";"], ({
  theme
}) => theme.orbit.colorIconSecondary, ({
  theme
}) => rtlSpacing(`0 0 0 ${theme.orbit.spaceMedium}`), transition(["color", "transform"], "fast", "ease-in-out"), ({
  expanded
}) => expanded && css(["transform:rotate(-180deg);"])); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

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
}, /*#__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: "title3",
  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;