@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.
171 lines (170 loc) • 6.3 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] = "9de7932b-419c-4f7c-8778-320298fefb81", e._sentryDebugIdIdentifier = "sentry-dbid-9de7932b-419c-4f7c-8778-320298fefb81");
} catch (e) {}
import { a as Icon, i as Typography, r as useTranslation } from "./translation-BFxyJ1c5.js";
import { t as Button } from "./Button-oj6H8OrC.js";
import { t as Accordion } from "./Accordion-Btxq6sGi.js";
import { useState } from "preact/hooks";
import cx from "classnames";
import { jsx, jsxs } from "preact/jsx-runtime";
import { isValidElement } from "preact";
var alert_module_default = {
alert: "adyen-kyc-alert",
"alert-without-icon": "adyen-kyc-alert-without-icon",
alertWithoutIcon: "adyen-kyc-alert-without-icon",
"alert-explanation": "adyen-kyc-alert-explanation",
alertExplanation: "adyen-kyc-alert-explanation",
"alert-actions": "adyen-kyc-alert-actions",
alertActions: "adyen-kyc-alert-actions",
"alert-basic": "adyen-kyc-alert-basic",
alertBasic: "adyen-kyc-alert-basic",
"alert-info": "adyen-kyc-alert-info",
alertInfo: "adyen-kyc-alert-info",
"alert-error": "adyen-kyc-alert-error",
alertError: "adyen-kyc-alert-error",
"alert-warning": "adyen-kyc-alert-warning",
alertWarning: "adyen-kyc-alert-warning",
"alert-success": "adyen-kyc-alert-success",
alertSuccess: "adyen-kyc-alert-success",
"alert-header": "adyen-kyc-alert-header",
alertHeader: "adyen-kyc-alert-header",
"alert-header-without-children": "adyen-kyc-alert-header-without-children",
alertHeaderWithoutChildren: "adyen-kyc-alert-header-without-children",
"alert-icon": "adyen-kyc-alert-icon",
alertIcon: "adyen-kyc-alert-icon",
"alert-icon-info": "adyen-kyc-alert-icon-info",
alertIconInfo: "adyen-kyc-alert-icon-info",
"alert-icon-error": "adyen-kyc-alert-icon-error",
alertIconError: "adyen-kyc-alert-icon-error",
"alert-icon-warning": "adyen-kyc-alert-icon-warning",
alertIconWarning: "adyen-kyc-alert-icon-warning",
"alert-icon-success": "adyen-kyc-alert-icon-success",
alertIconSuccess: "adyen-kyc-alert-icon-success",
"alert-title": "adyen-kyc-alert-title",
alertTitle: "adyen-kyc-alert-title"
};
//#endregion
//#region src/components/ui/molecules/Alert/Alert.tsx
var variantMap = {
basic: alert_module_default.alertBasic,
info: alert_module_default.alertInfo,
error: alert_module_default.alertError,
warning: alert_module_default.alertWarning,
success: alert_module_default.alertSuccess
};
var iconVariantMap = {
basic: "",
info: alert_module_default.alertIconInfo,
error: alert_module_default.alertIconError,
warning: alert_module_default.alertIconWarning,
success: alert_module_default.alertIconSuccess
};
var Alert = ({ title, variant = "basic", type = "default", className, actions, children, icon, testId, onClose, onToggle }) => {
const { t } = useTranslation("ui");
const [isClosed, setIsClosed] = useState(false);
if (isClosed) return null;
const closeAlert = () => {
if (onClose) onClose();
setIsClosed(true);
};
const renderIcon = () => {
if (icon === false) return void 0;
if (isValidElement(icon)) return icon;
return /* @__PURE__ */ jsx("span", {
className: cx(alert_module_default.alertIcon, iconVariantMap[variant]),
children: /* @__PURE__ */ jsx(AlertIcon, { variant })
});
};
const renderedIcon = renderIcon();
if (type === "collapsible") return /* @__PURE__ */ jsxs(Accordion, {
variant,
onToggle: onToggle || void 0,
narrow: true,
className,
children: [
/* @__PURE__ */ jsx("template", {
slot: "title",
children: title
}),
/* @__PURE__ */ jsx("template", {
slot: "icon",
children: renderedIcon
}),
/* @__PURE__ */ jsxs("template", {
slot: "content",
children: [children, !!actions && /* @__PURE__ */ jsx("div", {
className: alert_module_default.alertActions,
children: actions
})]
})
]
});
if (type === "callToAction") return /* @__PURE__ */ jsxs("div", {
className: cx(alert_module_default.alert, className, variantMap[variant], { [alert_module_default.alertWithoutIcon]: !renderedIcon }),
role: "alert",
"data-testid": testId,
children: [/* @__PURE__ */ jsxs("div", {
className: cx(alert_module_default.alertHeader, { [alert_module_default.alertHeaderWithoutChildren]: !children }),
children: [
renderedIcon,
title && /* @__PURE__ */ jsx(Typography, {
el: "h3",
variant: "body-strongest",
className: alert_module_default.alertTitle,
children: title
}),
!!actions && /* @__PURE__ */ jsx("div", {
className: alert_module_default.alertActions,
children: actions
})
]
}), !!children && /* @__PURE__ */ jsx("div", {
className: alert_module_default.alertExplanation,
children
})]
});
return /* @__PURE__ */ jsxs("div", {
className: cx(alert_module_default.alert, className, variantMap[variant], { [alert_module_default.alertWithoutIcon]: !renderedIcon }),
role: "alert",
"data-testid": testId,
children: [
/* @__PURE__ */ jsxs("div", {
className: alert_module_default.alertHeader,
children: [
renderedIcon,
title && /* @__PURE__ */ jsx(Typography, {
el: "h3",
variant: "body-strongest",
className: alert_module_default.alertTitle,
children: title
}),
type === "dismissible" && /* @__PURE__ */ jsx(Button, {
variant: "tertiary",
icon: "cross",
onClick: closeAlert,
children: t(($) => $["close"])
})
]
}),
!!children && /* @__PURE__ */ jsx("div", {
className: alert_module_default.alertExplanation,
children
}),
!!actions && /* @__PURE__ */ jsx("div", {
className: alert_module_default.alertActions,
children: actions
})
]
});
};
var AlertIcon = ({ variant }) => {
switch (variant) {
case "success": return /* @__PURE__ */ jsx(Icon, { name: "checkmark" });
case "error": return /* @__PURE__ */ jsx(Icon, { name: "error" });
case "warning": return /* @__PURE__ */ jsx(Icon, { name: "warning" });
default: return /* @__PURE__ */ jsx(Icon, { name: "info-circle-filled" });
}
};
//#endregion
export { AlertIcon as n, Alert as t };