@frontify/fondue
Version:
Design system of Frontify
50 lines (49 loc) • 1.79 kB
JavaScript
import { jsx as e, jsxs as l } from "react/jsx-runtime";
import { useState as m, isValidElement as w, cloneElement as d } from "react";
import { IconSize as x } from "../../foundation/Icon/IconSize.es.js";
import { merge as f } from "../../utilities/merge.es.js";
import { AccordionHeaderIcon as p } from "./AccordionHeaderIcon.es.js";
const h = "fondue-accordion-header", u = ({
isOpen: a = !1,
decorator: r,
disabled: n = !1,
children: s,
"data-test-id": t = h
}) => {
const [o, c] = m(null), i = /* @__PURE__ */ e(p, { 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: f([
"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: [
w(r) && /* @__PURE__ */ e("span", { "data-test-id": `${t}-decorator`, className: "tw-shrink-0 tw-leading-4", children: d(r, {
size: x.Size16
}) }),
/* @__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 })
]
}
) });
};
u.displayName = "FondueAccordionHeader";
export {
h as ACCORDION_HEADER_TEST_ID,
u as AccordionHeader
};
//# sourceMappingURL=AccordionHeader.es.js.map