@frontify/fondue
Version:
Design system of Frontify
48 lines (47 loc) • 1.68 kB
JavaScript
import { jsx as e, jsxs as l } from "react/jsx-runtime";
import { useState as w, isValidElement as m, cloneElement as d } from "react";
import { merge as x } from "../../utilities/merge.es.js";
import { AccordionHeaderIcon as f } from "./AccordionHeaderIcon.es.js";
const p = "fondue-accordion-header", h = ({
isOpen: a = !1,
decorator: r,
disabled: n = !1,
children: s,
"data-test-id": t = p
}) => {
const [o, c] = w(null), i = /* @__PURE__ */ e(f, { isOpen: a });
return /* @__PURE__ */ e("span", { "data-test-id": t, className: "tw-block tw-px-8 tw-py-6", children: /* @__PURE__ */ l(
"span",
{
"data-test-id": `${t}-container`,
role: "navigation",
"aria-label": `${(o == null ? void 0 : o.innerText) || ""}`,
className: x([
"tw-flex tw-items-center tw-gap-x-1.5 tw-w-full tw-flex-row",
!n && a && "tw-text-text",
!n && !a && "tw-text-text-weak hover:tw-text-text",
n && "tw-text-text-disabled"
]),
children: [
m(r) && /* @__PURE__ */ e("span", { "data-test-id": `${t}-decorator`, className: "tw-shrink-0 tw-leading-4", children: d(r, {
size: 16
}) }),
/* @__PURE__ */ e(
"span",
{
ref: c,
"data-test-id": `${t}-text`,
className: "tw-text-left tw-text-m tw-font-normal",
children: s
}
),
i && /* @__PURE__ */ e("span", { "data-test-id": `${t}-icon-container`, className: "tw-ml-auto tw-shrink-0", children: i })
]
}
) });
};
h.displayName = "FondueAccordionHeader";
export {
h as AccordionHeader
};
//# sourceMappingURL=AccordionHeader.es.js.map