@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.
190 lines (189 loc) • 7.45 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] = "4472c2f7-a4d0-4e03-9801-71e5f9ca14ae", e._sentryDebugIdIdentifier = "sentry-dbid-4472c2f7-a4d0-4e03-9801-71e5f9ca14ae");
} catch (e) {}
import { a as Icon, i as Typography, r as useTranslation } from "./translation-BYvhW5zA.js";
import { useLayoutEffect } from "preact/hooks";
import cx from "classnames";
import { jsx, jsxs } from "preact/jsx-runtime";
import { useComputed, useSignal } from "@preact/signals";
var Loader_module_default = {
"loader-wrapper": "_loader-wrapper_xtjeo_1",
loaderWrapper: "_loader-wrapper_xtjeo_1",
"loader-text": "_loader-text_xtjeo_10",
loaderText: "_loader-text_xtjeo_10",
"loader-text-visible": "_loader-text-visible_xtjeo_18",
loaderTextVisible: "_loader-text-visible_xtjeo_18",
loader: "_loader_xtjeo_1",
rotateLoader: "_rotateLoader_xtjeo_1",
"loader-large": "_loader-large_xtjeo_46",
loaderLarge: "_loader-large_xtjeo_46",
"loader-small": "_loader-small_xtjeo_52",
loaderSmall: "_loader-small_xtjeo_52",
"loader-medium": "_loader-medium_xtjeo_59",
loaderMedium: "_loader-medium_xtjeo_59",
"loader-xsmall": "_loader-xsmall_xtjeo_65",
loaderXsmall: "_loader-xsmall_xtjeo_65",
fadeInText: "_fadeInText_xtjeo_1"
};
//#endregion
//#region src/components/ui/atoms/Loader/Loader.tsx
var LOADER_TEXT_DELAY_MS = 5e3;
var LOADER_TEXT_LONG_DELAY_MS = 1e4;
var sizeMap = {
xsmall: Loader_module_default.loaderXsmall,
small: Loader_module_default.loaderSmall,
medium: Loader_module_default.loaderMedium,
large: Loader_module_default.loaderLarge
};
/**
* Default Loading Loader
* @param props -
*/
var Loader = ({ size = "large", defaultMessage, shortMessage, shortDelayMs = LOADER_TEXT_DELAY_MS, longMessage, longDelayMs = LOADER_TEXT_LONG_DELAY_MS }) => {
const { t } = useTranslation("common");
const loaderTextState = useSignal(defaultMessage ? "default" : "hidden");
const showText = size === "large";
useLayoutEffect(() => {
if (!showText) return;
const shortTimer = setTimeout(() => {
loaderTextState.value = "short";
}, shortDelayMs);
const longTimer = setTimeout(() => {
loaderTextState.value = "long";
}, longDelayMs);
return () => {
clearTimeout(shortTimer);
clearTimeout(longTimer);
};
}, [
showText,
shortDelayMs,
longDelayMs,
loaderTextState
]);
const resolvedMessage = useComputed(() => {
switch (loaderTextState.value) {
case "long": return longMessage ?? t(($) => $["justAMomentTakingLonger"]);
case "short": return shortMessage ?? t(($) => $["justAMoment"]);
case "default": return defaultMessage;
default: return;
}
});
const loaderTextVisible = useComputed(() => loaderTextState.value !== "hidden");
return /* @__PURE__ */ jsxs("div", {
className: Loader_module_default.loaderWrapper,
children: [/* @__PURE__ */ jsx("div", {
role: "progressbar",
className: cx(Loader_module_default.loader, sizeMap[size])
}), showText && /* @__PURE__ */ jsx("div", {
className: cx(Loader_module_default.loaderText, { [Loader_module_default.loaderTextVisible]: loaderTextVisible }),
children: /* @__PURE__ */ jsx(Typography, {
variant: "body",
color: "secondary",
el: "span",
children: resolvedMessage
})
})]
});
};
var Button_module_default = {
button: "_button_1okkl_1",
"button-full-width": "_button-full-width_1okkl_32",
buttonFullWidth: "_button-full-width_1okkl_32",
"button-label": "_button-label_1okkl_36",
buttonLabel: "_button-label_1okkl_36",
"button-label-padding": "_button-label-padding_1okkl_43",
buttonLabelPadding: "_button-label-padding_1okkl_43",
"button-shape-rectangle": "_button-shape-rectangle_1okkl_47",
buttonShapeRectangle: "_button-shape-rectangle_1okkl_47",
"button-shape-circle": "_button-shape-circle_1okkl_51",
buttonShapeCircle: "_button-shape-circle_1okkl_51",
"button-variant-primary": "_button-variant-primary_1okkl_55",
buttonVariantPrimary: "_button-variant-primary_1okkl_55",
"button-variant-secondary": "_button-variant-secondary_1okkl_75",
buttonVariantSecondary: "_button-variant-secondary_1okkl_75",
"button-variant-tertiary": "_button-variant-tertiary_1okkl_97",
buttonVariantTertiary: "_button-variant-tertiary_1okkl_97",
"button-variant-critical": "_button-variant-critical_1okkl_117",
buttonVariantCritical: "_button-variant-critical_1okkl_117",
"button-variant-link": "_button-variant-link_1okkl_135",
buttonVariantLink: "_button-variant-link_1okkl_135",
"button-variant-surface": "_button-variant-surface_1okkl_153",
buttonVariantSurface: "_button-variant-surface_1okkl_153",
"button-spinner": "_button-spinner_1okkl_190",
buttonSpinner: "_button-spinner_1okkl_190",
"present-spinner": "_present-spinner_1okkl_1",
presentSpinner: "_present-spinner_1okkl_1"
};
//#endregion
//#region src/components/ui/atoms/Button/Button.tsx
var ButtonBase = ({ ariaLabel, children, circle = false, disabled = false, fullWidth = false, loading = false, onClick, testId, type = "button", variant = "primary" }) => {
const isDisabled = disabled || loading;
const buttonVariantStyle = {
primary: Button_module_default.buttonVariantPrimary,
secondary: Button_module_default.buttonVariantSecondary,
tertiary: Button_module_default.buttonVariantTertiary,
critical: Button_module_default.buttonVariantCritical,
link: Button_module_default.buttonVariantLink,
surface: Button_module_default.buttonVariantSurface
};
const rootClassName = cx(Button_module_default.button, buttonVariantStyle[variant], variant !== "link" && {
[Button_module_default.buttonShapeRectangle]: !circle,
[Button_module_default.buttonShapeCircle]: circle,
[Button_module_default.buttonFullWidth]: fullWidth
});
const handleOnClick = (event) => {
event.preventDefault();
if (!isDisabled && onClick) onClick(event);
};
return /* @__PURE__ */ jsxs("button", {
"aria-label": ariaLabel,
className: rootClassName,
"data-testid": testId,
disabled: isDisabled,
onClick: handleOnClick,
type,
children: [loading && /* @__PURE__ */ jsx("div", {
className: Button_module_default.buttonSpinner,
children: /* @__PURE__ */ jsx(Loader, { size: "small" })
}), children]
});
};
var Button = ({ children, disabled = false, fullWidth, icon, loading = false, onClick, testId, type = "button", variant = "primary" }) => {
const buttonProps = {
disabled,
fullWidth,
icon,
loading,
onClick,
testId,
type,
variant
};
const labelClassname = cx(Button_module_default.buttonLabel, { [Button_module_default.buttonLabelPadding]: variant !== "link" });
return /* @__PURE__ */ jsx(ButtonBase, {
...buttonProps,
children: /* @__PURE__ */ jsxs("div", {
className: labelClassname,
children: [icon && /* @__PURE__ */ jsx(Icon, { name: icon }), children]
})
});
};
var IconButton = ({ ariaLabel, circle = false, disabled = false, icon, loading = false, onClick, testId, variant = "primary" }) => {
return /* @__PURE__ */ jsx(ButtonBase, {
ariaLabel,
circle,
disabled,
loading,
onClick,
testId,
variant,
children: /* @__PURE__ */ jsx("div", {
className: Button_module_default.buttonLabel,
children: /* @__PURE__ */ jsx(Icon, { name: icon })
})
});
};
//#endregion
export { IconButton as n, Loader as r, Button as t };