@kiwicom/orbit-components/lib/Modal/ModalHeader/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";
"use client";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = exports.ModalHeaderWrapper = void 0;
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _Text = _interopRequireDefault(require("../../Text"));
var _ModalContext = require("../ModalContext");
var _useModalContextFunctions = _interopRequireDefault(require("../helpers/useModalContextFunctions"));
const ModalHeaderWrapper = ({
  className,
  suppressed,
  isMobileFullPage,
  dataTest,
  children
}) => {
  return /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)(className, "orbit-modal-header-container", "box-border block w-full", suppressed ? ["bg-cloud-light py-xl px-md lm:p-xl", "[&_~_.orbit-modal-section:first-of-type]:border-t-solid [&_~_.orbit-modal-section:first-of-type]:border-t-elevation-flat-border-color [&_~_.orbit-modal-section:first-of-type]:!mt-0 [&_~_.orbit-modal-section:first-of-type]:border-t"] : ["bg-white-normal pt-lg px-md lm:pt-xl lm:px-xl lm:pb-0 pb-0"], !isMobileFullPage && "rounded-t-modal-mobile", "lm:[&_~_.orbit-modal-section:first-of-type]:rounded-t-none [&_~_.orbit-modal-section:first-of-type]:rounded-t-none"),
    "data-test": dataTest
  }, children);
};
exports.ModalHeaderWrapper = ModalHeaderWrapper;
const ModalHeader = ({
  illustration,
  suppressed,
  children,
  description,
  title,
  dataTest
}) => {
  const {
    setHasModalTitle,
    hasMobileHeader,
    isMobileFullPage,
    titleID
  } = React.useContext(_ModalContext.ModalContext);
  (0, _useModalContextFunctions.default)();
  React.useEffect(() => {
    if (title) setHasModalTitle?.(true);
    return () => {
      setHasModalTitle?.(false);
    };
  }, [title, setHasModalTitle]);
  const hasHeader = Boolean(title || description);
  return /*#__PURE__*/React.createElement(ModalHeaderWrapper, {
    suppressed: suppressed,
    dataTest: dataTest,
    isMobileFullPage: isMobileFullPage
  }, illustration, hasHeader && /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)(!!illustration && "mt-md", "[&_.orbit-modal-heading]:pe-xl de:[&_.orbit-modal-heading]:p-0")
  }, title && /*#__PURE__*/React.createElement("h2", {
    className: "orbit-modal-heading text-heading-title2 font-heading-title2 leading-heading-title2 text-heading-foreground lm:text-heading-title1 lm:font-heading-title1 lm:leading-heading-title1 m-0",
    id: titleID
  }, title), description && /*#__PURE__*/React.createElement("div", {
    className: "mt-xs"
  }, /*#__PURE__*/React.createElement(_Text.default, {
    size: "large",
    as: "div"
  }, description))), children && /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)(!hasHeader && !!children ? "mt-0" : [description ? "mt-xl" : "mt-md"])
  }, children), title && hasMobileHeader && /*#__PURE__*/React.createElement("div", {
    className: (0, _clsx.default)("orbit-modal-mobile-header", "font-base font-heading-display text-extra-large text-heading-foreground ps-lg z-overlay invisible fixed end-[48px] start-0 box-border inline-block h-[52px] truncate py-0 pe-0 leading-[52px] opacity-0", "duration-fast transition-[top,opacity,visibility] ease-in-out", "lm:start-auto lm:end-auto lm:p-0", isMobileFullPage ? "top-0" : "top-[16px]"),
    role: "presentation"
  }, title));
};
var _default = ModalHeader;
exports.default = _default;