@vectara/vectara-ui/lib/components/steps/Step.js

Vectara's design system, codified as a React and Sass component library

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import classNames from "classnames";
import { VuiFlexContainer } from "../flex/FlexContainer";
import { VuiFlexItem } from "../flex/FlexItem";
import { VuiText } from "../typography/Text";
const statusToClassMap = {
    complete: "complete",
    current: "current",
    incomplete: "incomplete",
    warning: "warning",
    danger: "danger"
};
export const VuiStep = ({ title, status = "incomplete", subTitle, onClick, stepNode, size = "s", className, "data-testid": dataTestId }) => {
    const stepContainerClasses = classNames("vuiStep", className);
    const numberClasses = classNames("vuiStep__number", `vuiStep__number--${statusToClassMap[status]}`, {
        [`vuiStep__number--${size}`]: size
    });
    const titleClasses = classNames("vuiStep__title", {
        "vuiStep__title--current": status === "current"
    });
    const subTitleClasses = classNames("vuiStep__subTitle", {
        "vuiStep__subTitle--current": status === "current"
    });
    const handleKeyDown = (event) => {
        if (!onClick)
            return;
        if (event.key === "Enter" || event.key === " ") {
            event.preventDefault();
            onClick();
        }
    };
    const stepContent = (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "vuiSteps__circleWrapper" }, { children: _jsx("div", Object.assign({ className: numberClasses }, { children: stepNode })) })), _jsx("div", Object.assign({ className: "vuiSteps__contentWrapper" }, { children: _jsx(VuiFlexContainer, Object.assign({ direction: "column", alignItems: "center", spacing: "xs" }, { children: _jsxs(VuiFlexItem, Object.assign({ grow: false }, { children: [_jsx(VuiText, Object.assign({ size: "s", className: titleClasses }, { children: _jsx("div", Object.assign({ className: "vuiStep__titleText" }, { children: title })) })), subTitle && _jsx("div", Object.assign({ className: subTitleClasses }, { children: subTitle }))] })) })) }))] }));
    return (_jsx("button", Object.assign({ className: stepContainerClasses, onKeyDown: handleKeyDown, onClick: onClick, type: "button", "aria-current": status === "current" ? "step" : undefined, "data-testid": dataTestId, "data-status": status }, { children: stepContent })));
};