@penaprieto/design-system
Version:
Multi-brand React design system with design tokens from Figma
39 lines (38 loc) • 2.38 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Stepper = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
require("./Stepper.css");
const Icon_1 = require("../Icon");
const Stepper = ({ steps, currentStep = 0, orientation = 'horizontal', onStepClick, className = '', }) => {
const getStepStatus = (index, step) => {
if (step.status)
return step.status;
if (index < currentStep)
return 'completed';
if (index === currentStep)
return 'current';
return 'pending';
};
const rootClassName = [
'ds-stepper',
`ds-stepper--${orientation}`,
className,
]
.filter(Boolean)
.join(' ');
return ((0, jsx_runtime_1.jsx)("div", { className: rootClassName, children: steps.map((step, index) => {
const status = getStepStatus(index, step);
const isLast = index === steps.length - 1;
const isClickable = onStepClick && status !== 'pending';
const stepClassName = [
'ds-stepper__step',
`ds-stepper__step--${status}`,
isClickable && 'ds-stepper__step--clickable',
]
.filter(Boolean)
.join(' ');
return ((0, jsx_runtime_1.jsxs)("div", { className: "ds-stepper__item", children: [(0, jsx_runtime_1.jsxs)("div", { className: stepClassName, onClick: () => isClickable && onStepClick(index), role: isClickable ? 'button' : undefined, tabIndex: isClickable ? 0 : undefined, children: [(0, jsx_runtime_1.jsx)("div", { className: "ds-stepper__indicator", children: status === 'completed' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "check", size: 16 })) : status === 'error' ? ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "x", size: 16 })) : ((0, jsx_runtime_1.jsx)("span", { className: "ds-stepper__number", children: index + 1 })) }), (0, jsx_runtime_1.jsxs)("div", { className: "ds-stepper__content", children: [(0, jsx_runtime_1.jsx)("div", { className: "ds-stepper__label", children: step.label }), step.description && ((0, jsx_runtime_1.jsx)("div", { className: "ds-stepper__description", children: step.description }))] })] }), !isLast && (0, jsx_runtime_1.jsx)("div", { className: "ds-stepper__connector" })] }, step.id));
}) }));
};
exports.Stepper = Stepper;