@uva-glass/component-library
Version:
React components UvA
58 lines (57 loc) • 2.45 kB
JavaScript
import { jsxs as i, jsx as a } from "react/jsx-runtime";
import { useState as f, useId as x } from "react";
import { c as m } from "../../clsx-OuTLNxxd.js";
import { Icon as l } from "../Icon/Icon.js";
import '../../assets/ExpandableInfoPanel.css';const n = {
"expandable-info-panel_wrapper": "_expandable-info-panel_wrapper_bsdzd_1",
"expandable-info-panel_header": "_expandable-info-panel_header_bsdzd_7",
"expandable-info-panel_trigger": "_expandable-info-panel_trigger_bsdzd_16",
"expandable-info-panel_trigger--active": "_expandable-info-panel_trigger--active_bsdzd_46",
"expandable-info-panel_content-wrapper": "_expandable-info-panel_content-wrapper_bsdzd_68",
"expandable-info-panel_content-with-note-container": "_expandable-info-panel_content-with-note-container_bsdzd_77",
"expandable-info-panel_note": "_expandable-info-panel_note_bsdzd_83"
}, z = ({
triggerLabel: p,
mainHeader: t,
collapseLabel: _ = "",
expandLabel: s = "",
content: o,
note: d = "",
defaultOpen: c = !1
}) => {
const [e, b] = f(c), r = x();
return /* @__PURE__ */ i("div", { className: n["expandable-info-panel_wrapper"], children: [
/* @__PURE__ */ i("div", { className: n["expandable-info-panel_header"], children: [
t,
/* @__PURE__ */ i(
"button",
{
className: m(n["expandable-info-panel_trigger"], {
[n["expandable-info-panel_trigger--active"]]: e
}),
type: "button",
"aria-expanded": e,
"aria-controls": r,
"aria-label": `${p} - ${e ? _ : s}`,
onClick: () => b(!e),
children: [
/* @__PURE__ */ a(l, { name: e ? "SquareInfoSolid" : "SquareInfo", size: 24 }),
p,
/* @__PURE__ */ a(l, { name: e ? "CheveronUp" : "CheveronDown", size: 16 })
]
}
)
] }),
e && /* @__PURE__ */ i("div", { id: r, className: n["expandable-info-panel_content-wrapper"], children: [
/* @__PURE__ */ a(l, { name: "SquareInfo", size: 24 }),
d ? /* @__PURE__ */ i("div", { className: n["expandable-info-panel_content-with-note-container"], children: [
/* @__PURE__ */ a("div", { children: o }),
/* @__PURE__ */ a("div", { className: n["expandable-info-panel_note"], children: d })
] }) : /* @__PURE__ */ a("div", { children: o })
] })
] });
};
export {
z as ExpandableInfoPanel
};
//# sourceMappingURL=ExpandableInfoPanel.js.map