@postenbring/hedwig-react
Version:
React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).
76 lines (74 loc) • 2.33 kB
JavaScript
import {
__objRest,
__spreadProps,
__spreadValues
} from "./chunk-YOSPWY5K.mjs";
// src/step-indicator/step-indicator.tsx
import { clsx } from "@postenbring/hedwig-css/typed-classname";
import { forwardRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var StepIndicator = forwardRef(
(_a, ref) => {
var _b = _a, {
activeStep,
totalSteps,
className,
label,
lang = "en",
title,
titleAs: TitleComponent
} = _b, rest = __objRest(_b, [
"activeStep",
"totalSteps",
"className",
"label",
"lang",
"title",
"titleAs"
]);
return /* @__PURE__ */ jsxs(
"div",
__spreadProps(__spreadValues({
ref,
className: clsx("hds-step-indicator", className),
lang
}, rest), {
children: [
/* @__PURE__ */ jsxs("div", { className: clsx("hds-step-indicator__header"), children: [
/* @__PURE__ */ jsx("span", { className: clsx("hds-step-indicator__left-label"), children: label }),
/* @__PURE__ */ jsx("span", { children: stepLabelTranslations[lang](activeStep, totalSteps) })
] }),
/* @__PURE__ */ jsx("div", { className: clsx("hds-step-indicator__steps"), children: Array.from({ length: totalSteps }, (_, i) => /* @__PURE__ */ jsx(
"div",
{
className: clsx("hds-step-indicator__step"),
"data-state": getStepState(i + 1, activeStep)
},
i
)) }),
title ? /* @__PURE__ */ jsx(TitleComponent, { className: clsx("hds-step-indicator__title"), children: title }) : null
]
})
);
}
);
StepIndicator.displayName = "StepIndicator";
var stepLabelTranslations = {
no: (activeStep, totalSteps) => `steg ${activeStep} av ${totalSteps}`,
en: (activeStep, totalSteps) => `step ${activeStep} of ${totalSteps}`,
da: (activeStep, totalSteps) => `trin ${activeStep} af ${totalSteps}`,
sv: (activeStep, totalSteps) => `steg ${activeStep} av ${totalSteps}`
};
function getStepState(renderedStep, activeStep) {
if (renderedStep < activeStep) {
return "previous";
}
if (renderedStep === activeStep) {
return "active";
}
return "next";
}
export {
StepIndicator
};
//# sourceMappingURL=chunk-XQBJ75VD.mjs.map