@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.
81 lines (80 loc) • 3.66 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] = "2c25774f-1dfe-48ea-9de0-28c84bdd680c", e._sentryDebugIdIdentifier = "sentry-dbid-2c25774f-1dfe-48ea-9de0-28c84bdd680c");
} catch (e) {}
import { i as Typography, r as useTranslation } from "./translation-BFxyJ1c5.js";
import cx from "classnames";
import { jsx } from "preact/jsx-runtime";
//#region src/utils/range.ts
/**
* Create a range of numbers
* @param {number} start The first number in the range
* @param {number} stop The last number in the range
* @param {number} step The step between each number in the range
* @returns {number[]} A range of numbers
*/
var range = (stop, start = 0, step = 1) => Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);
var StepProgressIndicator_module_default = {
"progress-bar": "adyen-kyc-progress-bar",
progressBar: "adyen-kyc-progress-bar",
"progress-bar-thick": "adyen-kyc-progress-bar-thick",
progressBarThick: "adyen-kyc-progress-bar-thick",
"progress-step": "adyen-kyc-progress-step",
progressStep: "adyen-kyc-progress-step",
"progress-step-active": "adyen-kyc-progress-step-active",
progressStepActive: "adyen-kyc-progress-step-active",
"progress-bar-circles": "adyen-kyc-progress-bar-circles",
progressBarCircles: "adyen-kyc-progress-bar-circles"
};
//#endregion
//#region src/components/ui/atoms/StepProgressIndicator/StepProgressIndicator.tsx
var shouldHighlight = (active, current, fillBefore) => !fillBefore ? active === current : active >= current;
/**
* Progress indicator showing step progession in a process
*
* @param activeStepIndex - zero based index for active steps, add 1 to make it human-readable
* @param stepsCount - total number of steps
* @param fillBefore - fills everything between 0 and activeStepIndex, not just last step
* @param thick - makes the bar thicker
*/
/** @deprecated do not use in new code */
var StepProgressIndicator = ({ activeStepIndex, stepsCount, fillBefore, thick, circles }) => {
const { t } = useTranslation("ui");
if (stepsCount === 0 || stepsCount > 10) return /* @__PURE__ */ jsx(Typography, {
variant: "caption",
children: t(($) => $["XOfYSteps"], {
currentStep: activeStepIndex,
totalSteps: stepsCount
})
});
return /* @__PURE__ */ jsx("div", {
"aria-label": t(($) => $["stepXofY"], {
currentStep: activeStepIndex,
totalSteps: stepsCount
}),
className: StepProgressIndicator_module_default.progress,
role: "group",
children: /* @__PURE__ */ jsx("ol", {
className: cx(StepProgressIndicator_module_default.progressBar, {
[StepProgressIndicator_module_default.progressBarThick]: thick,
[StepProgressIndicator_module_default.progressBarCircles]: circles
}),
children: range(stepsCount).map((stepNumber) => {
const isHighlighted = shouldHighlight(activeStepIndex, stepNumber, fillBefore);
return /* @__PURE__ */ jsx("li", {
"aria-current": isHighlighted ? "step" : void 0,
className: cx(StepProgressIndicator_module_default.progressStep, { [StepProgressIndicator_module_default.progressStepActive]: isHighlighted }),
children: /* @__PURE__ */ jsx("span", {
className: "adyen-kyc-u-screen-reader-only",
children: t(($) => $["stepNumberStatus"], {
stepNumber,
status: t(($) => $[stepNumber < activeStepIndex ? "completed" : "notCompleted"])
})
})
}, stepNumber);
})
})
});
};
//#endregion
export { StepProgressIndicator as t };