@frontify/fondue
Version:
Design system of Frontify
130 lines (129 loc) • 4.23 kB
JavaScript
import { jsx as r, jsxs as N } from "react/jsx-runtime";
import { isValidElement as I, cloneElement as D } from "react";
import { Switch as k } from "../Switch/Switch.es.js";
import A from "../../foundation/Icon/Generated/IconCaretDown.es.js";
import S from "../../foundation/Icon/Generated/IconMinus.es.js";
import g from "../../foundation/Icon/Generated/IconPlus.es.js";
import { IconSize as w } from "../../foundation/Icon/IconSize.es.js";
import { useMemoizedId as v } from "../../hooks/useMemoizedId.es.js";
import { merge as s } from "../../utilities/merge.es.js";
const M = "accordion-icon-container", O = "addremove-icon-container";
var R = /* @__PURE__ */ ((t) => (t.Small = "Small", t.Medium = "Medium", t.Large = "Large", t))(R || {});
const l = {
Small: {
icon: w.Size12,
text: "tw-text-s",
switch: "small"
},
Medium: {
icon: w.Size16,
text: "tw-text-m",
switch: "medium"
},
Large: {
icon: w.Size20,
text: "tw-text-l",
switch: "medium"
}
};
var E = /* @__PURE__ */ ((t) => (t.Default = "Default", t.Switch = "Switch", t.Accordion = "Accordion", t.AddRemove = "AddRemove", t))(E || {});
const _ = (t, c, i, o, e) => {
const n = {
"aria-labelledby": c,
size: l[i].icon
};
switch (t) {
case "Switch":
return /* @__PURE__ */ r("div", { "data-test-id": "fieldset-icon-wrapper", children: /* @__PURE__ */ r(k, { ...n, size: l[i].switch, mode: o ? "on" : "off", disabled: e }) });
case "Accordion":
return /* @__PURE__ */ r("div", { "data-test-id": "fieldset-icon-wrapper", children: /* @__PURE__ */ r(
"div",
{
"data-test-id": M,
className: s([
"tw-transition-transform",
o && "tw-rotate-180 tw-duration-300",
!e && o && "tw-text-black",
!e && !o && "tw-text-black-80",
e && "tw-text-black-40"
]),
children: /* @__PURE__ */ r(A, { ...n })
}
) });
case "AddRemove":
return /* @__PURE__ */ r("div", { "data-test-id": "fieldset-icon-wrapper", children: /* @__PURE__ */ r(
"div",
{
"data-test-id": O,
className: s([
o && !e && "tw-text-black",
!o && !e && "tw-text-black-80",
e && "tw-text-black-40"
]),
children: o ? /* @__PURE__ */ r(S, { ...n }) : /* @__PURE__ */ r(g, { ...n })
}
) });
}
return null;
}, b = ({
size: t = "Large",
active: c = !0,
decorator: i,
type: o = "Default",
disabled: e = !1,
bold: n = !0,
children: u,
onClick: a,
as: h = "label",
tabIndex: x = -1,
"data-test-id": p = "fieldset-header"
}) => {
const d = v(), f = () => !e && a && a();
let m = "tw-font-normal";
return n ? m = "tw-font-bold" : t === "Medium" && (m = "tw-font-medium"), // eslint-disable-next-line jsx-a11y/no-static-element-interactions
/* @__PURE__ */ N(
"header",
{
"data-test-id": p,
role: a ? "button" : void 0,
onClick: f,
onKeyPress: f,
className: s([
"tw-flex tw-items-center tw-gap-x-1.5 tw-w-full tw-flex-row",
e ? "tw-text-black-40" : "dark:tw-text-white",
!e && c ? "tw-text-black" : "tw-text-black-80",
!e && a ? "hover:tw-cursor-pointer" : "tw-pointer-events-none"
]),
tabIndex: x,
children: [
I(i) && /* @__PURE__ */ r("span", { className: "tw-shrink-0", children: D(i, {
size: l[t].icon
}) }),
/* @__PURE__ */ r(
h,
{
id: d,
className: s([
"tw-text-left",
l[t].text,
m,
a && "hover:tw-cursor-pointer"
]),
children: u
}
),
o !== "Default" && /* @__PURE__ */ r("span", { "data-test-id": "fieldset-icon-container", className: "tw-ml-auto tw-shrink-0", children: _(o, d, t, c, e) })
]
}
);
};
b.displayName = "FondueFieldsetHeader";
export {
M as ACCORDION_ICON_CONTAINER_ID,
O as ADDREMOVE_ICON_CONTAINER_ID,
b as FieldsetHeader,
R as FieldsetHeaderSize,
E as FieldsetHeaderType,
_ as renderFieldsetHeaderIconType
};
//# sourceMappingURL=FieldsetHeader.es.js.map