@aegov/design-system-react
Version:
A design system for the Government of the United Arab Emirates. Extending the original design system released as @aegov/design-system, this is the package specefically created for the ReactJs enviornment.
103 lines (102 loc) • 4.05 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@phosphor-icons/react");
var _zod = require("zod");
var _utils = require("../../utils");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const stepsSchema = _zod.z.object({
steps: _zod.z.array(_zod.z.object({
label: _zod.z.string(),
href: _zod.z.string().optional()
})),
currentStep: _zod.z.number(),
size: _zod.z.enum(['sm', 'base', 'lg']).optional(),
orientation: _zod.z.enum(['horizontal', 'vertical']).optional(),
showLabels: _zod.z.boolean().optional()
});
const Step = ({
step,
index,
currentStep,
size,
isVertical,
showLabels,
totalSteps
}) => {
const isCompleted = index < currentStep;
const isCurrent = index === currentStep;
const isUpcoming = index > currentStep;
const sizeClasses = {
link: {
sm: 'h-8 w-8 text-sm',
base: 'h-10 w-10 text-base',
lg: 'h-12 w-12 text-lg'
},
line: {
hr: {
sm: 'left-0 rtl:-left-2 top-5 h-[3px] w-20 top-4',
base: 'left-2 rtl:-left-2 top-5 h-[3px] w-20 top-5',
lg: 'left-4 rtl:-left-2 top-5 h-[3px] w-20 top-6'
}
}
};
return /*#__PURE__*/_react.default.createElement("li", {
key: step.label,
className: (0, _utils.cn)('relative flex items-center', !isVertical && index !== totalSteps - 1 && '')
}, index !== totalSteps - 1 && /*#__PURE__*/_react.default.createElement("div", {
className: (0, _utils.cn)('absolute bg-gray-300 transition-colors duration-200', isCompleted && 'bg-primary-500', isVertical ? 'left-[calc(50%-1px)] top-12 h-12 w-[3px]' : (0, _utils.cn)(sizeClasses.line.hr[size], 'translate-x-1/2 rtl:-translate-x-full')),
"aria-hidden": "true"
}), /*#__PURE__*/_react.default.createElement("div", {
className: (0, _utils.cn)('relative z-10', !isVertical && 'flex flex-1 justify-center')
}, /*#__PURE__*/_react.default.createElement("a", {
href: step.href,
className: (0, _utils.cn)('flex items-center justify-center rounded-full transition-all duration-200', sizeClasses.link[size], isCompleted && 'bg-primary-500 text-white hover:ring-4 hover:ring-primary-100', isCurrent && 'bg-primary-500 text-white ring-4 ring-primary-100', isUpcoming && 'bg-white border-2 border-gray-200 text-gray-500 hover:border-primary-500 hover:text-primary-500'),
"aria-current": isCurrent ? 'step' : undefined
}, isCompleted ? /*#__PURE__*/_react.default.createElement(_react2.Check, {
weight: "bold",
className: "w-5 h-5"
}) : /*#__PURE__*/_react.default.createElement("span", null, index + 1), /*#__PURE__*/_react.default.createElement("span", {
className: "sr-only"
}, step.label)), showLabels && /*#__PURE__*/_react.default.createElement("span", {
className: (0, _utils.cn)('absolute text-sm font-medium text-gray-900', isVertical ? 'left-14 rtl:left-0 rtl:right-14 top-2.5' : 'left-1/2 -translate-x-1/2 mt-14')
}, step.label)));
};
const Steps = ({
steps,
currentStep,
size = 'base',
orientation = 'horizontal',
showLabels = false,
className
}) => {
// Validate props
stepsSchema.parse({
steps,
currentStep,
size,
orientation,
showLabels
});
const isVertical = orientation === 'vertical';
return /*#__PURE__*/_react.default.createElement("nav", {
"aria-label": "Progress",
className: (0, _utils.cn)('relative', isVertical ? 'flex flex-col' : 'w-full', className)
}, /*#__PURE__*/_react.default.createElement("ol", {
role: "list",
className: (0, _utils.cn)('flex', isVertical ? 'flex-col gap-16' : 'items-center justify-center gap-24')
}, steps.map((step, index) => /*#__PURE__*/_react.default.createElement(Step, {
key: step.label,
step: step,
index: index,
currentStep: currentStep,
size: size,
isVertical: isVertical,
showLabels: showLabels,
totalSteps: steps.length
}))));
};
var _default = exports.default = Steps;