@navikt/ds-react/esm/stepper/Step.js

React components from the Norwegian Labour and Welfare Administration.

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { forwardRef } from "react";
import { Label } from "../typography/index.js";
import { cl, composeEventHandlers } from "../utils/helpers/index.js";
import { useStepperContext } from "./context.js";
export const Step = forwardRef((_a, ref) => {
    var { className, children, as: Component = "a", completed = false, interactive, onClick } = _a, rest = __rest(_a, ["className", "children", "as", "completed", "interactive", "onClick"]);
    const context = useStepperContext();
    const { activeStep } = context;
    const isInteractive = interactive !== null && interactive !== void 0 ? interactive : context === null || context === void 0 ? void 0 : context.interactive;
    const Comp = isInteractive ? Component : "div";
    const handleStepClick = () => {
        isInteractive && context.onStepChange(context.index + 1);
    };
    return (React.createElement(Comp, Object.assign({}, rest, { "aria-current": activeStep === context.index ? "step" : undefined, ref: ref, className: cl("aksel-stepper__step", className, {
            "aksel-stepper__step--active": activeStep === context.index,
            "aksel-stepper__step--behind": activeStep > context.index,
            "aksel-stepper__step--non-interactive": !isInteractive,
            "aksel-stepper__step--completed": completed,
        }), "data-active": activeStep === context.index, "data-completed": completed, "data-interactive": isInteractive, onClick: composeEventHandlers(onClick, handleStepClick) }),
        completed ? (React.createElement("span", { className: "aksel-stepper__circle aksel-stepper__circle--success" },
            React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: false, role: "img", "aria-hidden": true },
                React.createElement("path", { d: "M10.0352 13.4148L16.4752 7.40467C17.0792 6.83965 18.029 6.86933 18.5955 7.47478C19.162 8.08027 19.1296 9.03007 18.5245 9.59621L11.0211 16.5993C10.741 16.859 10.3756 17 10.0002 17C9.60651 17 9.22717 16.8462 8.93914 16.5611L6.43914 14.0611C5.85362 13.4756 5.85362 12.5254 6.43914 11.9399C7.02467 11.3544 7.97483 11.3544 8.56036 11.9399L10.0352 13.4148Z", fill: "currentColor" })))) : (React.createElement(Label, { className: "aksel-stepper__circle", as: "span", "aria-hidden": "true" }, context.index + 1)),
        React.createElement(Label, { as: "span", className: "aksel-stepper__content" }, children)));
});
export default Step;
//# sourceMappingURL=Step.js.map