@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
75 lines • 4.71 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Step = void 0;
const react_1 = __importStar(require("react"));
const Theme_1 = require("../theme/Theme");
const typography_1 = require("../typography");
const composeEventHandlers_1 = require("../util/composeEventHandlers");
const context_1 = require("./context");
exports.Step = (0, react_1.forwardRef)((_a, ref) => {
var { className, children, as: Component = "a", completed = false, interactive, onClick } = _a, rest = __rest(_a, ["className", "children", "as", "completed", "interactive", "onClick"]);
const { cn } = (0, Theme_1.useRenameCSS)();
const context = (0, context_1.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_1.default.createElement(Comp, Object.assign({}, rest, { "aria-current": activeStep === context.index ? "step" : undefined, ref: ref, className: cn("navds-stepper__step", className, {
"navds-stepper__step--active": activeStep === context.index,
"navds-stepper__step--behind": activeStep > context.index,
"navds-stepper__step--non-interactive": !isInteractive,
"navds-stepper__step--completed": completed,
}), "data-active": activeStep === context.index, "data-completed": completed, "data-interactive": isInteractive, onClick: (0, composeEventHandlers_1.composeEventHandlers)(onClick, handleStepClick) }),
completed ? (react_1.default.createElement("span", { className: cn("navds-stepper__circle navds-stepper__circle--success") },
react_1.default.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_1.default.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_1.default.createElement(typography_1.Label, { className: cn("navds-stepper__circle"), as: "span", "aria-hidden": "true" }, context.index + 1)),
react_1.default.createElement(typography_1.Label, { as: "span", className: cn("navds-stepper__content") }, children)));
});
exports.default = exports.Step;
//# sourceMappingURL=Step.js.map