@kiwicom/orbit-components/es/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 client";

import * as React from "react";
import cx from "clsx";
import Text from "../../Text";
import { ModalContext } from "../ModalContext";
import useModalContextFunctions from "../helpers/useModalContextFunctions";
export const ModalHeaderWrapper = ({
  className,
  suppressed,
  isMobileFullPage,
  dataTest,
  children
}) => {
  return /*#__PURE__*/React.createElement("div", {
    className: cx(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);
};
const ModalHeader = ({
  illustration,
  suppressed,
  children,
  description,
  title,
  dataTest
}) => {
  const {
    setHasModalTitle,
    hasMobileHeader,
    isMobileFullPage,
    titleID
  } = React.useContext(ModalContext);
  useModalContextFunctions();
  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: cx(!!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, {
    size: "large",
    as: "div"
  }, description))), children && /*#__PURE__*/React.createElement("div", {
    className: cx(!hasHeader && !!children ? "mt-0" : [description ? "mt-xl" : "mt-md"])
  }, children), title && hasMobileHeader && /*#__PURE__*/React.createElement("div", {
    className: cx("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));
};
export default ModalHeader;