@frontify/fondue
Version:
Design system of Frontify
53 lines (52 loc) • 1.91 kB
JavaScript
import { jsxs as r, jsx as e } from "react/jsx-runtime";
import w from "../../foundation/Icon/Generated/IconCross.es.js";
import { FOCUS_VISIBLE_STYLE as p } from "../../utilities/focusStyle.es.js";
import { merge as i } from "../../utilities/merge.es.js";
import { dialogHeadingMap as f, dialogPaddingMap as h } from "../../types/dialog.es.js";
import { Box as a } from "../Box/Box.es.js";
import { Flex as x } from "../Flex/Flex.es.js";
const b = ({
title: n,
separator: d = !0,
padding: o = "comfortable",
onClose: l,
icon: m,
badge: s,
children: c,
"data-test-id": t = "fondue-dialog-header"
}) => /* @__PURE__ */ r(
a,
{
"data-test-id": t,
className: i([
"tw-w-full tw-flex tw-items-center tw-border-b tw-border-b-line",
h[o],
!d && "tw-pb-0 tw-border-none"
]),
children: [
/* @__PURE__ */ r(x, { alignItems: "center", "data-test-id": `${t}-title`, children: [
/* @__PURE__ */ r(a, { className: "tw-flex tw-items-center tw-text-box-neutral-mighty", children: [
m && /* @__PURE__ */ e("span", { "data-test-id": `${t}-icon`, className: "tw-mr-1.5", children: m }),
/* @__PURE__ */ e("p", { className: i([f[o], "tw-font-medium tw-whitespace-nowrap"]), children: n }),
s && /* @__PURE__ */ e("div", { "data-test-id": `${t}-badge`, className: "tw-ml-1.5", children: s })
] }),
/* @__PURE__ */ e(a, { className: "tw-flex-shrink tw-ml-1", children: c })
] }),
l && /* @__PURE__ */ e(
"button",
{
"data-test-id": `${t}-close`,
"aria-label": `${t}-close`,
onClick: l,
className: i([p, "tw-rounded tw-absolute tw-right-5 tw-text-text"]),
children: /* @__PURE__ */ e(w, {})
}
)
]
}
);
b.displayName = "FondueDialogHeader";
export {
b as DialogHeader
};
//# sourceMappingURL=DialogHeader.es.js.map