/
index.tsx
114 lines (105 loc) · 3.2 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
"use client";
import * as React from "react";
import cx from "clsx";
import Text from "../../Text";
import { ModalContext } from "../ModalContext";
import useModalContextFunctions from "../helpers/useModalContextFunctions";
import type { Props } from "./types";
export const ModalHeaderWrapper = ({
className,
suppressed,
dataTest,
children,
}: {
className?: string;
suppressed?: boolean;
dataTest?: string;
children?: React.ReactNode;
}) => {
return (
<div
className={cx(
className,
"orbit-modal-header-container",
"rounded-t-modal box-border block w-full",
"lm:[&_~_.orbit-modal-section]:rounded-t-none",
suppressed
? [
"bg-cloud-light py-xl px-md lm:p-xl",
"[&_~_.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 [&_~_.orbit-modal-section:first-of-type]:border-solid",
]
: ["bg-white-normal pt-lg px-md lm:pt-xl lm:px-xl lm:pb-0 pb-0"],
)}
data-test={dataTest}
>
{children}
</div>
);
};
const ModalHeader = ({
illustration,
suppressed,
children,
description,
title,
dataTest,
}: Props) => {
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 (
<ModalHeaderWrapper suppressed={suppressed} dataTest={dataTest}>
{illustration}
{hasHeader && (
<div
className={cx(
!!illustration && "mt-md",
"[&_.orbit-modal-heading]:pe-xl de:[&_.orbit-modal-heading]:p-0",
)}
>
{title && (
<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}
</h2>
)}
{description && (
<div className="mt-xs">
<Text size="large" as="div">
{description}
</Text>
</div>
)}
</div>
)}
{children && (
<div className={cx(!hasHeader && !!children ? "mt-0" : [description ? "mt-xl" : "mt-md"])}>
{children}
</div>
)}
{title && hasMobileHeader && (
<div
className={cx(
"orbit-modal-mobile-header bg-white-normal",
"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",
"lm:start-auto lm:end-auto lm:p-0",
isMobileFullPage ? "top-0" : "top-[16px]",
)}
role="presentation"
>
{title}
</div>
)}
</ModalHeaderWrapper>
);
};
export default ModalHeader;