@adyen/adyen-platform-experience-web
Version:
80 lines (79 loc) • 2.44 kB
JavaScript
import { jsx as s } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
import n from "classnames";
import { useState as S, useMemo as E, useCallback as e } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
import { InteractionKeyCode as R } from "../../types.js";
import { CARD_TOGGLE_CLASS as O, CARD_TITLE as p, CARD_SUBTITLE as v, CARD_HEADER_CONTENT as w, CARD_HEADER as B, CARD_BODY as P, CARD_BODY_WITH_TITLE as G, CARD_FOOTER as g, CARD_BASE_CLASS as k, CARD_COMPACT as y, CARD_EXPANDABLE_CLASS as K, CARD_NO_PADDING as M, CARD_NO_OUTLINE as U, CARD_FILLED as Y } from "./constants.js";
/* empty css */
import { Icon as j } from "../Icon/Icon.js";
import { uuid as q } from "../../../utils/random/uuid.js";
const V = ({
title: C,
subTitle: m,
children: l,
expandable: o = !1,
footer: D,
renderHeader: t,
renderFooter: r,
filled: N,
noOutline: d,
noPadding: T,
classNameModifiers: u,
testId: f,
compact: h
}) => {
const [c, I] = S(!1), A = E(() => q(), []), a = e(() => {
o && I((i) => !i);
}, [o]), _ = e(
(i) => {
switch (i.code) {
case R.ENTER:
case R.SPACE:
i.preventDefault(), a();
return;
}
},
[a]
), L = E(() => o ? {
role: "button",
tabIndex: 0,
onClick: a,
onKeyDown: _,
"aria-controls": A,
"aria-expanded": c
} : {}, [o, c, A, _, a]);
return /* @__PURE__ */ s(
"div",
{
"data-testid": f,
className: n(k, u, {
[Y]: N,
[U]: d,
[M]: T,
[K]: o,
[y]: h
}),
...L,
children: [
(C || t) && /* @__PURE__ */ s("div", { className: n(B), children: /* @__PURE__ */ s("div", { className: n(w), children: [
o && /* @__PURE__ */ s(j, { name: c ? "chevron-up" : "chevron-down", className: O, role: "presentation" }),
t || /* @__PURE__ */ s("span", { className: p, children: C }),
m && /* @__PURE__ */ s("div", { className: v, children: m })
] }) }),
(!o || c) && /* @__PURE__ */ s(
"div",
{
id: A,
className: n(P, {
[G]: C || t
}),
children: l
}
),
(D || r) && /* @__PURE__ */ s("div", { className: g, children: r || D })
]
}
);
};
export {
V as default
};