@navikt/ds-react 0.14.2 → 0.14.5

package/cjs/form/Select.js

@@ -54,7 +54,7 @@ const Select = (0, react_1.forwardRef)((props, ref) => {
             }), id: inputDescriptionId, size: size }, description)),
         react_1.default.createElement("div", { className: "navds-select__container" },
             react_1.default.createElement("select", Object.assign({}, (0, __1.omit)(rest, ["error", "errorId", "size"]), inputProps, { ref: ref, className: (0, classnames_1.default)("navds-select__input", "navds-body-short", `navds-body--${size !== null && size !== void 0 ? size : "medium"}`), size: props.htmlSize }), children),
-            react_1.default.createElement(ds_icons_1.Expand, { className: "navds-select__chevron" })),
+            react_1.default.createElement(ds_icons_1.Expand, { className: "navds-select__chevron", "aria-hidden": true })),
         react_1.default.createElement("div", { id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && react_1.default.createElement(ErrorMessage_1.default, { size: size }, props.error))));
 });
 exports.default = Select;

package/cjs/index.js

@@ -25,6 +25,7 @@ __exportStar(require("./modal"), exports);
 __exportStar(require("./panel"), exports);
 __exportStar(require("./popover"), exports);
 __exportStar(require("./speech-bubble"), exports);
+__exportStar(require("./step-indicator"), exports);
 __exportStar(require("./tag"), exports);
 __exportStar(require("./table"), exports);
 __exportStar(require("./typography"), exports);

package/cjs/step-indicator/Step.js

@@ -0,0 +1,62 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const _1 = require(".");
+const __1 = require("..");
+const StepComponent = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, children, as: Component = "button", disabled, index } = _a, rest = __rest(_a, ["className", "children", "as", "disabled", "index"]);
+    const context = (0, react_1.useContext)(_1.StepContext);
+    if (context === null) {
+        console.error("<StepIndicator.Step> has to be used within an <StepIndicator>");
+        return null;
+    }
+    const safeIndex = index !== null && index !== void 0 ? index : 0;
+    const Number = context.activeStep === safeIndex ? __1.Label : __1.BodyShort;
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { disabled: disabled, ref: ref, className: (0, classnames_1.default)("navds-step-indicator__step", className, {
+            "navds-step-indicator__step--disabled": disabled,
+            "navds-step-indicator__step--active": context.activeStep === safeIndex,
+            "navds-step-indicator__step--finished": context.activeStep > safeIndex,
+        }), onClick: (e) => {
+            context.onStepChange(safeIndex);
+            rest.onClick && rest.onClick(e);
+        } }),
+        react_1.default.createElement(Number, { className: "navds-step-indicator__step-number" }, safeIndex + 1),
+        react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-step-indicator__step-label") }, !context.hideLabels && children),
+        safeIndex !== 0 && (react_1.default.createElement("span", { "aria-hidden": true, className: "navds-step-indicator__step-line" }))));
+});
+const Step = StepComponent;
+exports.default = Step;

package/cjs/step-indicator/StepIndicator.js

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepContext = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const react_merge_refs_1 = __importDefault(require("react-merge-refs"));
+const Step_1 = __importDefault(require("./Step"));
+exports.StepContext = (0, react_1.createContext)(null);
+const StepIndicator = (0, react_1.forwardRef)((_a, ref) => {
+    var { children, className, activeStep, hideLabels, onStepChange = () => { }, responsive } = _a, rest = __rest(_a, ["children", "className", "activeStep", "hideLabels", "onStepChange", "responsive"]);
+    const wrapperRef = (0, react_1.useRef)(null);
+    const mergedRef = (0, react_merge_refs_1.default)([wrapperRef, ref]);
+    const [showLabels, setShowLabels] = (0, react_1.useState)(true);
+    const removeLabels = hideLabels !== null && hideLabels !== void 0 ? hideLabels : (!!responsive && !showLabels);
+    const stepsWithIndex = react_1.default.Children.map(children, (step, index) => {
+        return react_1.default.isValidElement(step) ? (react_1.default.createElement("li", { className: (0, classnames_1.default)("navds-step-indicator__step-wrapper", {
+                "navds-step-indicator__step-wrapper--hidelabel": removeLabels,
+            }), key: index, "aria-current": index === activeStep && "step" }, react_1.default.cloneElement(step, Object.assign(Object.assign({}, step.props), { index })))) : (step);
+    });
+    const canShowLabels = (0, react_1.useCallback)(() => {
+        var _a;
+        const remSize = parseFloat(String(getComputedStyle(document.documentElement).fontSize));
+        const childrenLength = react_1.default.Children.toArray(children).filter((child) => react_1.default.isValidElement(child)).length;
+        wrapperRef.current &&
+            setShowLabels(((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) >=
+                remSize * 10 * childrenLength);
+    }, [children]);
+    (0, react_1.useEffect)(() => {
+        window.addEventListener("resize", canShowLabels);
+        canShowLabels();
+        return () => {
+            window.removeEventListener("resize", canShowLabels);
+        };
+    }, [canShowLabels]);
+    return (react_1.default.createElement("ol", Object.assign({ ref: mergedRef, className: (0, classnames_1.default)(`navds-step-indicator`, className) }, rest),
+        react_1.default.createElement(exports.StepContext.Provider, { value: {
+                activeStep,
+                onStepChange,
+                hideLabels: removeLabels,
+            } }, stepsWithIndex)));
+});
+StepIndicator.Step = Step_1.default;
+exports.default = StepIndicator;

package/cjs/step-indicator/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepIndicator = void 0;
+var StepIndicator_1 = require("./StepIndicator");
+Object.defineProperty(exports, "StepIndicator", { enumerable: true, get: function () { return __importDefault(StepIndicator_1).default; } });
+__exportStar(require("./StepIndicator"), exports);

package/cjs/step-indicator/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../../esm/step-indicator/index.js",
+  "types": "../../esm/step-indicator/index.d.ts"
+}

package/esm/form/Select.js

@@ -30,7 +30,7 @@ const Select = forwardRef((props, ref) => {
             }), id: inputDescriptionId, size: size }, description)),
         React.createElement("div", { className: "navds-select__container" },
             React.createElement("select", Object.assign({}, omit(rest, ["error", "errorId", "size"]), inputProps, { ref: ref, className: cl("navds-select__input", "navds-body-short", `navds-body--${size !== null && size !== void 0 ? size : "medium"}`), size: props.htmlSize }), children),
-            React.createElement(Expand, { className: "navds-select__chevron" })),
+            React.createElement(Expand, { className: "navds-select__chevron", "aria-hidden": true })),
         React.createElement("div", { id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && React.createElement(ErrorMessage, { size: size }, props.error))));
 });
 export default Select;

package/esm/form/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/form/Select.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAwB,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AAC5C,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAkB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAuB9D,MAAM,MAAM,GAAG,UAAU,CAAiC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACvE,MAAM,EACJ,UAAU,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,kBAAkB,GACnB,GAAG,YAAY,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;IAErC,MAAM,EACJ,QAAQ,EACR,KAAK,EACL,SAAS,EACT,WAAW,EACX,QAAQ,EACR,SAAS,GAAG,KAAK,KAEf,KAAK,EADJ,IAAI,UACL,KAAK,EARH,0EAQL,CAAQ,CAAC;IAEV,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,SAAS,EACT,kBAAkB,EAClB,qBAAqB,IAAI,EAAE,EAC3B;YACE,qBAAqB,EAAE,QAAQ;YAC/B,wBAAwB,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ;SAChD,CACF;QAED,oBAAC,KAAK,IACJ,OAAO,EAAE,UAAU,CAAC,EAAE,EACtB,IAAI,EAAE,IAAI,EACV,EAAE,EAAC,OAAO,EACV,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE;gBACnC,SAAS,EAAE,SAAS;aACrB,CAAC,IAED,KAAK,CACA;QACP,CAAC,CAAC,WAAW,IAAI,CAChB,oBAAC,SAAS,IACR,EAAE,EAAC,KAAK,EACR,SAAS,EAAE,EAAE,CAAC,2BAA2B,EAAE;gBACzC,SAAS,EAAE,SAAS;aACrB,CAAC,EACF,EAAE,EAAE,kBAAkB,EACtB,IAAI,EAAE,IAAI,IAET,WAAW,CACF,CACb;QACD,6BAAK,SAAS,EAAC,yBAAyB;YACtC,gDACM,IAAI,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,EACxC,UAAU,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,qBAAqB,EACrB,kBAAkB,EAClB,eAAe,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,QAAQ,EAAE,CAClC,EACD,IAAI,EAAE,KAAK,CAAC,QAAQ,KAEnB,QAAQ,CACF;YACT,oBAAC,MAAM,IAAC,SAAS,EAAC,uBAAuB,GAAG,CACxC;QACN,6BAAK,EAAE,EAAE,OAAO,mBAAgB,oBAAoB,eAAW,QAAQ,IACpE,YAAY,IAAI,oBAAC,YAAY,IAAC,IAAI,EAAE,IAAI,IAAG,KAAK,CAAC,KAAK,CAAgB,CACnE,CACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/form/Select.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAwB,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AAC5C,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAkB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAuB9D,MAAM,MAAM,GAAG,UAAU,CAAiC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACvE,MAAM,EACJ,UAAU,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,kBAAkB,GACnB,GAAG,YAAY,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;IAErC,MAAM,EACJ,QAAQ,EACR,KAAK,EACL,SAAS,EACT,WAAW,EACX,QAAQ,EACR,SAAS,GAAG,KAAK,KAEf,KAAK,EADJ,IAAI,UACL,KAAK,EARH,0EAQL,CAAQ,CAAC;IAEV,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,SAAS,EACT,kBAAkB,EAClB,qBAAqB,IAAI,EAAE,EAC3B;YACE,qBAAqB,EAAE,QAAQ;YAC/B,wBAAwB,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ;SAChD,CACF;QAED,oBAAC,KAAK,IACJ,OAAO,EAAE,UAAU,CAAC,EAAE,EACtB,IAAI,EAAE,IAAI,EACV,EAAE,EAAC,OAAO,EACV,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE;gBACnC,SAAS,EAAE,SAAS;aACrB,CAAC,IAED,KAAK,CACA;QACP,CAAC,CAAC,WAAW,IAAI,CAChB,oBAAC,SAAS,IACR,EAAE,EAAC,KAAK,EACR,SAAS,EAAE,EAAE,CAAC,2BAA2B,EAAE;gBACzC,SAAS,EAAE,SAAS;aACrB,CAAC,EACF,EAAE,EAAE,kBAAkB,EACtB,IAAI,EAAE,IAAI,IAET,WAAW,CACF,CACb;QACD,6BAAK,SAAS,EAAC,yBAAyB;YACtC,gDACM,IAAI,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,EACxC,UAAU,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,qBAAqB,EACrB,kBAAkB,EAClB,eAAe,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,QAAQ,EAAE,CAClC,EACD,IAAI,EAAE,KAAK,CAAC,QAAQ,KAEnB,QAAQ,CACF;YACT,oBAAC,MAAM,IAAC,SAAS,EAAC,uBAAuB,wBAAe,CACpD;QACN,6BAAK,EAAE,EAAE,OAAO,mBAAgB,oBAAoB,eAAW,QAAQ,IACpE,YAAY,IAAI,oBAAC,YAAY,IAAC,IAAI,EAAE,IAAI,IAAG,KAAK,CAAC,KAAK,CAAgB,CACnE,CACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/esm/index.d.ts

@@ -13,6 +13,7 @@ export * from "./modal";
 export * from "./panel";
 export * from "./popover";
 export * from "./speech-bubble";
+export * from "./step-indicator";
 export * from "./tag";
 export * from "./table";
 export * from "./typography";

package/esm/index.js

@@ -13,6 +13,7 @@ export * from "./modal";
 export * from "./panel";
 export * from "./popover";
 export * from "./speech-bubble";
+export * from "./step-indicator";
 export * from "./tag";
 export * from "./table";
 export * from "./typography";

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AAEvB,6BAA6B;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AAEvB,6BAA6B;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC"}

package/esm/step-indicator/Step.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { OverridableComponent } from "..";
+export interface StepIndicatorStepProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /**
+     * Text content under indicator
+     */
+    children: React.ReactNode;
+    /**
+     * Disables interaction with element
+     */
+    disabled?: boolean;
+    /**
+     * Handled by StepIndicator
+     */
+    index?: number;
+}
+export interface StepIndicatorStepType extends OverridableComponent<StepIndicatorStepProps, HTMLButtonElement> {
+}
+declare const Step: StepIndicatorStepType;
+export default Step;

package/esm/step-indicator/Step.js

@@ -0,0 +1,39 @@
+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, useContext } from "react";
+import cl from "classnames";
+import { StepContext } from ".";
+import { BodyShort, Label } from "..";
+const StepComponent = forwardRef((_a, ref) => {
+    var { className, children, as: Component = "button", disabled, index } = _a, rest = __rest(_a, ["className", "children", "as", "disabled", "index"]);
+    const context = useContext(StepContext);
+    if (context === null) {
+        console.error("<StepIndicator.Step> has to be used within an <StepIndicator>");
+        return null;
+    }
+    const safeIndex = index !== null && index !== void 0 ? index : 0;
+    const Number = context.activeStep === safeIndex ? Label : BodyShort;
+    return (React.createElement(Component, Object.assign({}, rest, { disabled: disabled, ref: ref, className: cl("navds-step-indicator__step", className, {
+            "navds-step-indicator__step--disabled": disabled,
+            "navds-step-indicator__step--active": context.activeStep === safeIndex,
+            "navds-step-indicator__step--finished": context.activeStep > safeIndex,
+        }), onClick: (e) => {
+            context.onStepChange(safeIndex);
+            rest.onClick && rest.onClick(e);
+        } }),
+        React.createElement(Number, { className: "navds-step-indicator__step-number" }, safeIndex + 1),
+        React.createElement("div", { className: cl("navds-step-indicator__step-label") }, !context.hideLabels && children),
+        safeIndex !== 0 && (React.createElement("span", { "aria-hidden": true, className: "navds-step-indicator__step-line" }))));
+});
+const Step = StepComponent;
+export default Step;
+//# sourceMappingURL=Step.js.map

package/esm/step-indicator/Step.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.js","sourceRoot":"","sources":["../../src/step-indicator/Step.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC;AAChC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAwB,MAAM,IAAI,CAAC;AAqB5D,MAAM,aAAa,GAGf,UAAU,CACZ,CACE,EAA2E,EAC3E,GAAG,EACH,EAAE;QAFF,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,GAAG,QAAQ,EAAE,QAAQ,EAAE,KAAK,OAAW,EAAN,IAAI,cAAzE,oDAA2E,CAAF;IAGzE,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAExC,IAAI,OAAO,KAAK,IAAI,EAAE;QACpB,OAAO,CAAC,KAAK,CACX,+DAA+D,CAChE,CAAC;QACF,OAAO,IAAI,CAAC;KACb;IAED,MAAM,SAAS,GAAG,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,CAAC,CAAC;IAE7B,MAAM,MAAM,GAAG,OAAO,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IAEpE,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE,SAAS,EAAE;YACrD,sCAAsC,EAAE,QAAQ;YAChD,oCAAoC,EAClC,OAAO,CAAC,UAAU,KAAK,SAAS;YAClC,sCAAsC,EACpC,OAAO,CAAC,UAAU,GAAG,SAAS;SACjC,CAAC,EACF,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,OAAO,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;YAChC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAClC,CAAC;QAED,oBAAC,MAAM,IAAC,SAAS,EAAC,mCAAmC,IAClD,SAAS,GAAG,CAAC,CACP;QACT,6BAAK,SAAS,EAAE,EAAE,CAAC,kCAAkC,CAAC,IACnD,CAAC,OAAO,CAAC,UAAU,IAAI,QAAQ,CAC5B;QACL,SAAS,KAAK,CAAC,IAAI,CAClB,mDAAkB,SAAS,EAAC,iCAAiC,GAAG,CACjE,CACS,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,IAAI,GAAG,aAAsC,CAAC;AAEpD,eAAe,IAAI,CAAC"}

package/esm/step-indicator/StepIndicator.d.ts

@@ -0,0 +1,41 @@
+import React from "react";
+import { StepIndicatorStepType } from "./Step";
+export interface StepIndicatorProps extends React.HTMLAttributes<HTMLOListElement> {
+    /**
+     * <StepIndicator.Step /> elements
+     */
+    children: React.ReactNode;
+    /**
+     * Adds classname to wrapper
+     */
+    className?: string;
+    /**
+     * Current active step index
+     */
+    activeStep: number;
+    /**
+     * Callback for clicked step index
+     */
+    onStepChange?: (step: number) => void;
+    /**
+     * Hides labels for each step if true
+     * @default false
+     */
+    hideLabels?: boolean;
+    /**
+     * enables `hideLabels` internally when steps start to overflow.
+     * @note declaring `hideLabels` overwrites this functionality
+     */
+    responsive?: boolean;
+}
+interface StepIndicatorComponent extends React.ForwardRefExoticComponent<StepIndicatorProps & React.RefAttributes<HTMLOListElement>> {
+    Step: StepIndicatorStepType;
+}
+interface StepContextProps {
+    activeStep: number;
+    onStepChange: (step: number) => void;
+    hideLabels: boolean;
+}
+export declare const StepContext: React.Context<StepContextProps | null>;
+declare const StepIndicator: StepIndicatorComponent;
+export default StepIndicator;

package/esm/step-indicator/StepIndicator.js

@@ -0,0 +1,52 @@
+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 cl from "classnames";
+import React, { createContext, forwardRef, useCallback, useEffect, useRef, useState, } from "react";
+import mergeRefs from "react-merge-refs";
+import Step from "./Step";
+export const StepContext = createContext(null);
+const StepIndicator = forwardRef((_a, ref) => {
+    var { children, className, activeStep, hideLabels, onStepChange = () => { }, responsive } = _a, rest = __rest(_a, ["children", "className", "activeStep", "hideLabels", "onStepChange", "responsive"]);
+    const wrapperRef = useRef(null);
+    const mergedRef = mergeRefs([wrapperRef, ref]);
+    const [showLabels, setShowLabels] = useState(true);
+    const removeLabels = hideLabels !== null && hideLabels !== void 0 ? hideLabels : (!!responsive && !showLabels);
+    const stepsWithIndex = React.Children.map(children, (step, index) => {
+        return React.isValidElement(step) ? (React.createElement("li", { className: cl("navds-step-indicator__step-wrapper", {
+                "navds-step-indicator__step-wrapper--hidelabel": removeLabels,
+            }), key: index, "aria-current": index === activeStep && "step" }, React.cloneElement(step, Object.assign(Object.assign({}, step.props), { index })))) : (step);
+    });
+    const canShowLabels = useCallback(() => {
+        var _a;
+        const remSize = parseFloat(String(getComputedStyle(document.documentElement).fontSize));
+        const childrenLength = React.Children.toArray(children).filter((child) => React.isValidElement(child)).length;
+        wrapperRef.current &&
+            setShowLabels(((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) >=
+                remSize * 10 * childrenLength);
+    }, [children]);
+    useEffect(() => {
+        window.addEventListener("resize", canShowLabels);
+        canShowLabels();
+        return () => {
+            window.removeEventListener("resize", canShowLabels);
+        };
+    }, [canShowLabels]);
+    return (React.createElement("ol", Object.assign({ ref: mergedRef, className: cl(`navds-step-indicator`, className) }, rest),
+        React.createElement(StepContext.Provider, { value: {
+                activeStep,
+                onStepChange,
+                hideLabels: removeLabels,
+            } }, stepsWithIndex)));
+});
+StepIndicator.Step = Step;
+export default StepIndicator;
+//# sourceMappingURL=StepIndicator.js.map

package/esm/step-indicator/StepIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepIndicator.js","sourceRoot":"","sources":["../../src/step-indicator/StepIndicator.tsx"],"names":[],"mappings":"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"}

package/esm/step-indicator/index.d.ts

@@ -0,0 +1,2 @@
+export { default as StepIndicator } from "./StepIndicator";
+export * from "./StepIndicator";

package/esm/step-indicator/index.js

@@ -0,0 +1,3 @@
+export { default as StepIndicator } from "./StepIndicator";
+export * from "./StepIndicator";
+//# sourceMappingURL=index.js.map

package/esm/step-indicator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/step-indicator/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,cAAc,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.14.2",
+  "version": "0.14.5",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.7.0",
+    "@navikt/ds-icons": "^0.7.2",
     "@popperjs/core": "^2.10.1",
     "classnames": "^2.2.6",
     "react-collapse": "^5.1.0",
@@ -50,12 +50,12 @@
     "@testing-library/user-event": "^13.2.1",
     "@types/faker": "^5.5.8",
     "@types/jest": "^27.0.1",
-    "@types/react-router-dom": "^5.1.9",
+    "@types/react-modal": "^3.13.1",
     "@types/styled-components": "^5.1.14",
     "copyfiles": "^2.4.1",
     "faker": "^5.5.3",
     "jest": "^27.2.0",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "^6.1.0",
     "rimraf": "3.0.2",
     "styled-components": "^5.3.1",
     "ts-jest": "^27.0.5"
@@ -64,5 +64,5 @@
     "@types/react": "^17.0.30",
     "react": "^17.0.0"
   },
-  "gitHead": "ce1c6de93566f930f4f9fc917ce6be9a997a9aa6"
+  "gitHead": "3db81c9b79f8be93cb23f996002d0cbb38ca2348"
 }

package/src/form/Select.tsx

@@ -94,7 +94,7 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
         >
           {children}
         </select>
-        <Expand className="navds-select__chevron" />
+        <Expand className="navds-select__chevron" aria-hidden />
       </div>
       <div id={errorId} aria-relevant="additions removals" aria-live="polite">
         {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}

package/src/index.ts

@@ -13,6 +13,7 @@ export * from "./modal";
 export * from "./panel";
 export * from "./popover";
 export * from "./speech-bubble";
+export * from "./step-indicator";
 export * from "./tag";
 export * from "./table";
 export * from "./typography";

package/src/step-indicator/Step.tsx

@@ -0,0 +1,79 @@
+import React, { forwardRef, useContext } from "react";
+import cl from "classnames";
+import { StepContext } from ".";
+import { BodyShort, Label, OverridableComponent } from "..";
+
+export interface StepIndicatorStepProps
+  extends React.HTMLAttributes<HTMLButtonElement> {
+  /**
+   * Text content under indicator
+   */
+  children: React.ReactNode;
+  /**
+   * Disables interaction with element
+   */
+  disabled?: boolean;
+  /**
+   * Handled by StepIndicator
+   */
+  index?: number;
+}
+
+export interface StepIndicatorStepType
+  extends OverridableComponent<StepIndicatorStepProps, HTMLButtonElement> {}
+
+const StepComponent: OverridableComponent<
+  StepIndicatorStepProps,
+  HTMLButtonElement
+> = forwardRef(
+  (
+    { className, children, as: Component = "button", disabled, index, ...rest },
+    ref
+  ) => {
+    const context = useContext(StepContext);
+
+    if (context === null) {
+      console.error(
+        "<StepIndicator.Step> has to be used within an <StepIndicator>"
+      );
+      return null;
+    }
+
+    const safeIndex = index ?? 0;
+
+    const Number = context.activeStep === safeIndex ? Label : BodyShort;
+
+    return (
+      <Component
+        {...rest}
+        disabled={disabled}
+        ref={ref}
+        className={cl("navds-step-indicator__step", className, {
+          "navds-step-indicator__step--disabled": disabled,
+          "navds-step-indicator__step--active":
+            context.activeStep === safeIndex,
+          "navds-step-indicator__step--finished":
+            context.activeStep > safeIndex,
+        })}
+        onClick={(e) => {
+          context.onStepChange(safeIndex);
+          rest.onClick && rest.onClick(e);
+        }}
+      >
+        <Number className="navds-step-indicator__step-number">
+          {safeIndex + 1}
+        </Number>
+        <div className={cl("navds-step-indicator__step-label")}>
+          {!context.hideLabels && children}
+        </div>
+        {safeIndex !== 0 && (
+          <span aria-hidden className="navds-step-indicator__step-line" />
+        )}
+      </Component>
+    );
+  }
+);
+
+const Step = StepComponent as StepIndicatorStepType;
+
+export default Step;

package/src/step-indicator/StepIndicator.tsx

@@ -0,0 +1,145 @@
+import cl from "classnames";
+import React, {
+  createContext,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import mergeRefs from "react-merge-refs";
+import Step, { StepIndicatorStepProps, StepIndicatorStepType } from "./Step";
+
+export interface StepIndicatorProps
+  extends React.HTMLAttributes<HTMLOListElement> {
+  /**
+   * <StepIndicator.Step /> elements
+   */
+  children: React.ReactNode;
+  /**
+   * Adds classname to wrapper
+   */
+  className?: string;
+  /**
+   * Current active step index
+   */
+  activeStep: number;
+  /**
+   * Callback for clicked step index
+   */
+  onStepChange?: (step: number) => void;
+  /**
+   * Hides labels for each step if true
+   * @default false
+   */
+  hideLabels?: boolean;
+  /**
+   * enables `hideLabels` internally when steps start to overflow.
+   * @note declaring `hideLabels` overwrites this functionality
+   */
+  responsive?: boolean;
+}
+
+interface StepIndicatorComponent
+  extends React.ForwardRefExoticComponent<
+    StepIndicatorProps & React.RefAttributes<HTMLOListElement>
+  > {
+  Step: StepIndicatorStepType;
+}
+
+interface StepContextProps {
+  activeStep: number;
+  onStepChange: (step: number) => void;
+  hideLabels: boolean;
+}
+
+export const StepContext = createContext<StepContextProps | null>(null);
+
+const StepIndicator: StepIndicatorComponent = forwardRef<
+  HTMLOListElement,
+  StepIndicatorProps
+>(
+  (
+    {
+      children,
+      className,
+      activeStep,
+      hideLabels,
+      onStepChange = () => {},
+      responsive,
+      ...rest
+    },
+    ref
+  ) => {
+    const wrapperRef = useRef<HTMLOListElement | null>(null);
+    const mergedRef = mergeRefs([wrapperRef, ref]);
+
+    const [showLabels, setShowLabels] = useState(true);
+
+    const removeLabels = hideLabels ?? (!!responsive && !showLabels);
+
+    const stepsWithIndex = React.Children.map(children, (step, index) => {
+      return React.isValidElement<StepIndicatorStepProps>(step) ? (
+        <li
+          className={cl("navds-step-indicator__step-wrapper", {
+            "navds-step-indicator__step-wrapper--hidelabel": removeLabels,
+          })}
+          key={index}
+          aria-current={index === activeStep && "step"}
+        >
+          {React.cloneElement(step, {
+            ...step.props,
+            index,
+          })}
+        </li>
+      ) : (
+        step
+      );
+    });
+
+    const canShowLabels = useCallback(() => {
+      const remSize = parseFloat(
+        String(getComputedStyle(document.documentElement).fontSize)
+      );
+      const childrenLength = React.Children.toArray(children).filter((child) =>
+        React.isValidElement(child)
+      ).length;
+
+      wrapperRef.current &&
+        setShowLabels(
+          wrapperRef.current?.getBoundingClientRect().width >=
+            remSize * 10 * childrenLength
+        );
+    }, [children]);
+
+    useEffect(() => {
+      window.addEventListener("resize", canShowLabels);
+      canShowLabels();
+      return () => {
+        window.removeEventListener("resize", canShowLabels);
+      };
+    }, [canShowLabels]);
+
+    return (
+      <ol
+        ref={mergedRef}
+        className={cl(`navds-step-indicator`, className)}
+        {...rest}
+      >
+        <StepContext.Provider
+          value={{
+            activeStep,
+            onStepChange,
+            hideLabels: removeLabels,
+          }}
+        >
+          {stepsWithIndex}
+        </StepContext.Provider>
+      </ol>
+    );
+  }
+) as StepIndicatorComponent;
+
+StepIndicator.Step = Step;
+
+export default StepIndicator;

package/src/step-indicator/index.ts

@@ -0,0 +1,2 @@
+export { default as StepIndicator } from "./StepIndicator";
+export * from "./StepIndicator";

package/src/step-indicator/stories/Example.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from "react";
+import { StepIndicator } from "..";
+
+export const Example = ({ ...props }) => {
+  const [active, setactive] = useState(1);
+
+  const { disabled, ...rest } = props;
+
+  return (
+    <StepIndicator {...rest} activeStep={active} onStepChange={setactive}>
+      <StepIndicator.Step>Start</StepIndicator.Step>
+      <StepIndicator.Step>
+        Sunt deserunt qui sit sunt culpa nisi
+      </StepIndicator.Step>
+      <StepIndicator.Step disabled={disabled}>
+        Nulla nisi pariatur nulla cupidatat elit.
+      </StepIndicator.Step>
+      <StepIndicator.Step>
+        Nulla laborum proident consequat laborum elit et dolore ut sunt.
+      </StepIndicator.Step>
+    </StepIndicator>
+  );
+};

package/src/step-indicator/stories/step-indicator.stories.mdx

@@ -0,0 +1,122 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { StepIndicator } from "..";
+import { Example } from "./Example";
+
+<Meta title="ds-react/step-indicator/intro" />
+
+# Hvordan ta i bruk StepIndicator
+
+Vi flytter over Stegindikator til `ds-react` uten noen veldig store endringer i design.
+Du må nå selv styre state med `activeStep` og `onStepChange`.
+
+```jsx
+<StepIndicator activeStep={activeStep} onStepChange={(x) => setActiveStep(x)}>
+  <StepIndicator.Step>Start</StepIndicator.Step>
+  <StepIndicator.Step>Sunt deserunt qui sit sunt culpa nisi</StepIndicator.Step>
+  <StepIndicator.Step>
+    Nulla nisi pariatur nulla cupidatat elit.
+  </StepIndicator.Step>
+  <StepIndicator.Step>
+    Nulla laborum proident consequat laborum elit et dolore ut sunt.
+  </StepIndicator.Step>
+</StepIndicator>
+```
+
+<Canvas>
+  <Example />
+</Canvas>
+
+## responsive
+
+Bruk `responsive`-prop for å skjule labels med en gang StepIndicator begynner å overlfowe.
+
+```jsx
+<StepIndicator
+  responsive
+  activeStep={activeStep}
+  onStepChange={(x) => setActiveStep(x)}
+>
+  <StepIndicator.Step>Start</StepIndicator.Step>
+  <StepIndicator.Step>Sunt deserunt qui sit sunt culpa nisi</StepIndicator.Step>
+  <StepIndicator.Step>
+    Nulla nisi pariatur nulla cupidatat elit.
+  </StepIndicator.Step>
+  <StepIndicator.Step>
+    Nulla laborum proident consequat laborum elit et dolore ut sunt.
+  </StepIndicator.Step>
+</StepIndicator>
+```
+
+<Canvas>
+  <Example responsive />
+</Canvas>
+
+## hideLabels
+
+Du kan gjemme labels fra hvert steg med `hideLabels`-prop
+
+```jsx
+<StepIndicator
+  hideLabels
+  activeStep={activeStep}
+  onStepChange={(x) => setActiveStep(x)}
+>
+  <StepIndicator.Step>Start</StepIndicator.Step>
+  <StepIndicator.Step>Sunt deserunt qui sit sunt culpa nisi</StepIndicator.Step>
+  <StepIndicator.Step>
+    Nulla nisi pariatur nulla cupidatat elit.
+  </StepIndicator.Step>
+  <StepIndicator.Step>
+    Nulla laborum proident consequat laborum elit et dolore ut sunt.
+  </StepIndicator.Step>
+</StepIndicator>
+```
+
+<Canvas>
+  <Example hideLabels />
+</Canvas>
+
+## disabled
+
+```jsx
+<StepIndicator activeStep={activeStep} onStepChange={(x) => setActiveStep(x)}>
+  <StepIndicator.Step>Start</StepIndicator.Step>
+  <StepIndicator.Step disabled>
+    Sunt deserunt qui sit sunt culpa nisi
+  </StepIndicator.Step>
+  <StepIndicator.Step disabled>
+    Nulla nisi pariatur nulla cupidatat elit.
+  </StepIndicator.Step>
+  <StepIndicator.Step>
+    Nulla laborum proident consequat laborum elit et dolore ut sunt.
+  </StepIndicator.Step>
+</StepIndicator>
+```
+
+<Canvas>
+  <Example disabled />
+</Canvas>
+
+## Override tags
+
+`StepIndicator.Step` er implementert med Overridable-component noe som gjør at du kan endre taggen til
+det du selv ønsker ved å bruke `as`-prop
+
+```jsx
+<StepIndicator activeStep={activeStep} onStepChange={(x) => setActiveStep(x)}>
+  {/* Dette er default */}
+  <StepIndicator.Step as="button">Start</StepIndicator.Step>
+  <StepIndicator.Step as="a" href="#">
+    Sunt deserunt qui sit sunt culpa nisi
+  </StepIndicator.Step>
+</StepIndicator>
+```
+
+<Canvas>
+  <StepIndicator activeStep={1} onStepChange={console.log}>
+    <StepIndicator.Step as="button">{`<button>`}</StepIndicator.Step>
+    <StepIndicator.Step as="a" href="#">
+      {`<a>`}
+    </StepIndicator.Step>
+  </StepIndicator>
+</Canvas>

package/src/step-indicator/stories/step-indicator.stories.tsx

@@ -0,0 +1,104 @@
+import React, { useState } from "react";
+import StepIndicator from "../StepIndicator";
+import { Meta } from "@storybook/react/types-6-0";
+import { Link, HashRouter as Router, useLocation } from "react-router-dom";
+
+export default {
+  title: "ds-react/step-indicator",
+  component: StepIndicator,
+} as Meta;
+
+export const All = () => {
+  const [activeStep, setActiveStep] = useState(1);
+  return (
+    <div>
+      <StepIndicator activeStep={1} onStepChange={console.log}>
+        <StepIndicator.Step>Steg nr 1</StepIndicator.Step>
+        <StepIndicator.Step>Laborum velit eu magna esse</StepIndicator.Step>
+        <StepIndicator.Step>test</StepIndicator.Step>
+      </StepIndicator>
+      <br />
+
+      <StepIndicator activeStep={1} onStepChange={console.log}>
+        <StepIndicator.Step href="#" as="a">
+          1
+        </StepIndicator.Step>
+        <StepIndicator.Step href="#" as="a">
+          2
+        </StepIndicator.Step>
+        <StepIndicator.Step href="#" as="a">
+          3
+        </StepIndicator.Step>
+      </StepIndicator>
+      <br />
+      <StepIndicator activeStep={activeStep} onStepChange={setActiveStep}>
+        <StepIndicator.Step disabled>
+          Pariatur pariatur adipisicing reprehenderit ad occaecat reprehenderit
+          ut dolore.
+        </StepIndicator.Step>
+        <StepIndicator.Step>Laborum velit eu magna esse</StepIndicator.Step>
+        <StepIndicator.Step disabled>
+          Cupidatat Lorem do nostrud ut eu.
+        </StepIndicator.Step>
+        <StepIndicator.Step>test</StepIndicator.Step>
+        <StepIndicator.Step>
+          Voluptate pariatur ut est voluptate elit officia excepteur laborum.
+        </StepIndicator.Step>
+      </StepIndicator>
+      <br />
+      <StepIndicator
+        activeStep={activeStep}
+        onStepChange={setActiveStep}
+        hideLabels
+      >
+        <StepIndicator.Step>
+          Pariatur pariatur adipisicing reprehenderit ad occaecat reprehenderit
+          ut dolore.
+        </StepIndicator.Step>
+        <StepIndicator.Step>Laborum velit eu magna esse</StepIndicator.Step>
+        <StepIndicator.Step disabled>
+          Cupidatat Lorem do nostrud ut eu.
+        </StepIndicator.Step>
+        <StepIndicator.Step>test</StepIndicator.Step>
+        <StepIndicator.Step>
+          Voluptate pariatur ut est voluptate elit officia excepteur laborum.
+        </StepIndicator.Step>
+      </StepIndicator>
+    </div>
+  );
+};
+
+export const ReactRouter = () => {
+  const { pathname } = useLocation();
+
+  return (
+    <StepIndicator
+      activeStep={
+        {
+          "/": 0,
+          "/first": 0,
+          "/second": 1,
+          "/third": 2,
+        }[pathname]
+      }
+    >
+      <StepIndicator.Step as={Link} to="/first">
+        Steg nr 1
+      </StepIndicator.Step>
+      <StepIndicator.Step as={Link} to="/second">
+        Laborum velit eu magna esse
+      </StepIndicator.Step>
+      <StepIndicator.Step as={Link} to="/third">
+        test
+      </StepIndicator.Step>
+    </StepIndicator>
+  );
+};
+
+ReactRouter.decorators = [
+  (Story) => (
+    <Router>
+      <Story />
+    </Router>
+  ),
+];