@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 cx from "clsx";
import Stack from "../../../Stack";
import Heading from "../../../Heading";
import ChevronDown from "../../../icons/ChevronDown";
import NewWindow from "../../../icons/NewWindow";
import ChevronForward from "../../../icons/ChevronForward";
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
  });
};
const TileHeader = ({
  icon,
  title,
  description,
  expandable,
  expanded,
  external,
  onClick,
  header,
  role,
  ariaExpanded,
  ariaControls,
  id,
  tabIndex,
  onKeyDown,
  noHeaderIcon
}) =>
/*#__PURE__*/
// eslint-disable-next-line jsx-a11y/no-static-element-interactions -- has been like this before
React.createElement("div", {
  className: "p-md text-normal duration-fast lm:p-lg w-full cursor-pointer leading-normal transition-colors ease-in-out",
  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("div", {
  className: "text-icon-primary-foreground me-xs shrink-0 items-center self-start"
}, icon), header || (title || description) && /*#__PURE__*/React.createElement(Stack, {
  spacing: "none",
  direction: "column",
  shrink: true
}, title && /*#__PURE__*/React.createElement("div", {
  className: "flex w-full items-center"
}, /*#__PURE__*/React.createElement(Heading, {
  type: "title4",
  as: "h3"
}, title)), description && /*#__PURE__*/React.createElement("div", {
  className: cx("font-base text-normal text-primary-foreground w-full font-normal leading-normal", title != null && "mt-xxs")
}, description)), !noHeaderIcon && /*#__PURE__*/React.createElement(IconRight, {
  className: cx("orbit-tile-header-icon-right text-icon-secondary-foreground ms-sm duration-fast transition-all ease-in-out", expanded === true && "-rotate-180"),
  external: external,
  expandable: expandable,
  expanded: expanded
})));
export default TileHeader;