@frontify/fondue
Version:
Design system of Frontify
66 lines (65 loc) • 2.1 kB
JavaScript
import { jsxs as a, jsx as o } from "react/jsx-runtime";
import c from "../../foundation/Icon/Generated/IconArrowLeft.es.js";
import { useMobileDetection as w } from "../../hooks/useMobileDetection.es.js";
import { merge as s } from "../../utilities/merge.es.js";
import { Flex as g } from "../Flex/Flex.es.js";
import { dialogPaddingMap as u } from "../../types/dialog.es.js";
import { Box as e } from "../Box/Box.es.js";
import { Button as p } from "../Button/Button.es.js";
import { ButtonEmphasis as b, ButtonSize as h } from "../Button/ButtonTypes.es.js";
const x = ({
actionButtons: r,
children: m,
backButton: i,
padding: f = "comfortable",
separator: d = !0,
"data-test-id": t = "fondue-dialog-footer"
}) => {
const l = w();
return /* @__PURE__ */ a(
e,
{
"data-test-id": t,
className: s([
"tw-border-t tw-border-t-line",
u[f],
!d && "tw-pt-0 tw-border-none"
]),
children: [
l && /* @__PURE__ */ o(
e,
{
className: s(["tw-w-full", i || r.length > 0 ? "tw-pb-2" : ""]),
"data-test-id": `${t}-content`,
children: m
}
),
/* @__PURE__ */ a(g, { justify: "between", alignItems: "center", spacingX: 12, children: [
i && /* @__PURE__ */ o(
p,
{
"data-test-id": `${t}-back-button`,
...i,
emphasis: b.Default,
icon: /* @__PURE__ */ o(c, {})
}
),
!l && /* @__PURE__ */ o(e, { className: "tw-grow", "data-test-id": `${t}-content`, children: m }),
r.length > 0 ? /* @__PURE__ */ o(e, { className: "tw-flex tw-gap-x-3", "data-test-id": `${t}-action-buttons`, children: r.map((n) => /* @__PURE__ */ o(
p,
{
...n,
size: h.Medium
},
`${t}-button-${n.children}`
)) }) : null
] })
]
}
);
};
x.displayName = "FondueDialogFooter";
export {
x as DialogFooter
};
//# sourceMappingURL=DialogFooter.es.js.map