@adyen/kyc-components
Version:
This guide assumes that you have already an account with Adyen. A legalEntity needs to be created, and you need to have a `legalEntityId` to instatiate a Component.
112 lines (111 loc) • 4.36 kB
JavaScript
try {
let e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n = new e.Error().stack;
n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "31290b92-c87d-41b2-907b-0d2ee70ba02f", e._sentryDebugIdIdentifier = "sentry-dbid-31290b92-c87d-41b2-907b-0d2ee70ba02f");
} catch (e) {}
import { a as Icon, i as Typography } from "./translation-BFxyJ1c5.js";
import cx from "classnames";
import { jsx, jsxs } from "preact/jsx-runtime";
import { defineSlots } from "named-slots";
var Skeleton_module_default = {
skeleton: "adyen-kyc-skeleton",
"skeleton-circle": "adyen-kyc-skeleton-circle",
skeletonCircle: "adyen-kyc-skeleton-circle",
"skeleton-text": "adyen-kyc-skeleton-text",
skeletonText: "adyen-kyc-skeleton-text"
};
//#endregion
//#region src/components/ui/atoms/Skeleton/Skeleton.tsx
var Skeleton = ({ circle = false, text = false, height = "1em", width }) => {
return /* @__PURE__ */ jsx("div", {
className: cx(Skeleton_module_default.skeleton, {
[Skeleton_module_default.skeletonCircle]: circle,
[Skeleton_module_default.skeletonText]: text
}),
style: {
height,
width
}
});
};
var Accordion_module_default = {
accordion: "adyen-kyc-accordion",
"accordion-summary": "adyen-kyc-accordion-summary",
accordionSummary: "adyen-kyc-accordion-summary",
"accordion-basic": "adyen-kyc-accordion-basic",
accordionBasic: "adyen-kyc-accordion-basic",
"accordion-info": "adyen-kyc-accordion-info",
accordionInfo: "adyen-kyc-accordion-info",
"accordion-error": "adyen-kyc-accordion-error",
accordionError: "adyen-kyc-accordion-error",
"accordion-warning": "adyen-kyc-accordion-warning",
accordionWarning: "adyen-kyc-accordion-warning",
"accordion-success": "adyen-kyc-accordion-success",
accordionSuccess: "adyen-kyc-accordion-success",
"accordion-narrow": "adyen-kyc-accordion-narrow",
accordionNarrow: "adyen-kyc-accordion-narrow",
"accordion-content": "adyen-kyc-accordion-content",
accordionContent: "adyen-kyc-accordion-content",
"accordion-with-icon": "adyen-kyc-accordion-with-icon",
accordionWithIcon: "adyen-kyc-accordion-with-icon",
"accordion-arrow": "adyen-kyc-accordion-arrow",
accordionArrow: "adyen-kyc-accordion-arrow",
"accordion-arrow-right": "adyen-kyc-accordion-arrow-right",
accordionArrowRight: "adyen-kyc-accordion-arrow-right"
};
//#endregion
//#region src/components/ui/atoms/Accordion/Accordion.tsx
var Accordion = ({ children, expandOnLeft = false, onToggle, className, variant = "basic", narrow = false }) => {
const { Slot } = defineSlots(children, [
"title",
"content",
"icon"
]);
const handleToggle = (e) => {
if (!onToggle) return;
onToggle(e.newState === "closed" ? "close" : "open");
};
const variantMap = {
basic: Accordion_module_default.accordionBasic,
info: Accordion_module_default.accordionInfo,
error: Accordion_module_default.accordionError,
warning: Accordion_module_default.accordionWarning,
success: Accordion_module_default.accordionSuccess
};
return /* @__PURE__ */ jsxs("details", {
onToggle: handleToggle,
className: cx(className, Accordion_module_default.accordion, variantMap[variant], {
[Accordion_module_default.accordionWithIcon]: expandOnLeft,
[Accordion_module_default.accordionNarrow]: narrow
}),
children: [/* @__PURE__ */ jsxs("summary", {
className: Accordion_module_default.accordionSummary,
children: [
expandOnLeft && /* @__PURE__ */ jsx(Icon, {
name: "chevron-down",
className: Accordion_module_default.accordionArrow
}),
/* @__PURE__ */ jsx(Slot, { name: "icon" }),
/* @__PURE__ */ jsx(Typography, {
el: "h3",
variant: "body-strongest",
children: /* @__PURE__ */ jsx(Slot, {
name: "title",
children: /* @__PURE__ */ jsx(Skeleton, {})
})
}),
!expandOnLeft && /* @__PURE__ */ jsx(Icon, {
name: "chevron-down",
className: cx(Accordion_module_default.accordionArrow, Accordion_module_default.accordionArrowRight)
})
]
}), /* @__PURE__ */ jsx("div", {
className: Accordion_module_default.accordionContent,
children: /* @__PURE__ */ jsx(Slot, {
name: "content",
children: /* @__PURE__ */ jsx(Skeleton, {})
})
})]
});
};
//#endregion
export { Skeleton as n, Accordion as t };