@kiwicom/orbit-components/lib/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.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _Stack = _interopRequireDefault(require("../../../Stack"));
var _Heading = _interopRequireDefault(require("../../../Heading"));
var _ChevronDown = _interopRequireDefault(require("../../../icons/ChevronDown"));
var _NewWindow = _interopRequireDefault(require("../../../icons/NewWindow"));
var _ChevronForward = _interopRequireDefault(require("../../../icons/ChevronForward"));
const IconRight = ({
  external,
  expandable,
  className
}) => {
  if (expandable) return /*#__PURE__*/React.createElement(_ChevronDown.default, {
    color: "secondary",
    className: className,
    ariaHidden: true
  });
  if (external) return /*#__PURE__*/React.createElement(_NewWindow.default, {
    className: className,
    ariaHidden: true
  });
  return /*#__PURE__*/React.createElement(_ChevronForward.default, {
    color: "secondary",
    className: className,
    reverseOnRtl: true,
    ariaHidden: 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-400 text-normal duration-fast lm:p-600 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.default, {
  align: "center",
  justify: "between",
  shrink: true,
  spacing: "none"
}, icon && /*#__PURE__*/React.createElement("div", {
  className: "text-icon-primary-foreground me-200 shrink-0 items-center self-start"
}, icon), header || (title || description) && /*#__PURE__*/React.createElement(_Stack.default, {
  spacing: "none",
  direction: "column",
  shrink: true
}, title && /*#__PURE__*/React.createElement("div", {
  className: "flex w-full items-center"
}, /*#__PURE__*/React.createElement(_Heading.default, {
  type: "title4"
}, title)), description && /*#__PURE__*/React.createElement("div", {
  className: (0, _clsx.default)("font-base text-normal text-primary-foreground w-full font-normal leading-normal", title != null && "mt-100")
}, description)), !noHeaderIcon && /*#__PURE__*/React.createElement(IconRight, {
  className: (0, _clsx.default)("orbit-tile-header-icon-right text-icon-secondary-foreground ms-300 duration-fast transition-all ease-in-out", expanded === true && "-rotate-180"),
  external: external,
  expandable: expandable,
  expanded: expanded
})));
var _default = exports.default = TileHeader;