@navikt/ds-react 1.2.5 → 1.3.0

package/_docs.json

@@ -4479,6 +4479,48 @@
           "name": "number"
         }
       },
+      "completed": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "Makes step-indicator a checkmark",
+        "name": "completed",
+        "parent": {
+          "fileName": "src/stepper/Step.tsx",
+          "name": "StepperStepProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/stepper/Step.tsx",
+            "name": "StepperStepProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "interactive": {
+        "defaultValue": {
+          "value": "true"
+        },
+        "description": "Makes step non-interactive if false. Step will be set to a <div>, overriding `as`-prop",
+        "name": "interactive",
+        "parent": {
+          "fileName": "src/stepper/Step.tsx",
+          "name": "StepperStepProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/stepper/Step.tsx",
+            "name": "StepperStepProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",
@@ -4601,6 +4643,27 @@
           "name": "((step: number) => void)"
         }
       },
+      "interactive": {
+        "defaultValue": {
+          "value": "true"
+        },
+        "description": "Makes stepper non-interactive if false",
+        "name": "interactive",
+        "parent": {
+          "fileName": "src/stepper/Stepper.tsx",
+          "name": "StepperProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/stepper/Stepper.tsx",
+            "name": "StepperProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",

package/cjs/stepper/Step.js

@@ -38,26 +38,32 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StepComponent = void 0;
+const ds_icons_1 = require("@navikt/ds-icons");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
-const Stepper_1 = require("./Stepper");
 const __1 = require("..");
+const Stepper_1 = require("./Stepper");
 exports.StepComponent = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, children, as: Component = "a", unsafe_index = 0 } = _a, rest = __rest(_a, ["className", "children", "as", "unsafe_index"]);
+    var { className, children, as: Component = "a", unsafe_index = 0, completed = false, interactive } = _a, rest = __rest(_a, ["className", "children", "as", "unsafe_index", "completed", "interactive"]);
     const context = (0, react_1.useContext)(Stepper_1.StepperContext);
     if (context === null) {
         console.error("<Stepper.Step> has to be used within <Stepper>");
         return null;
     }
     const { activeStep } = context;
-    return (react_1.default.createElement(Component, Object.assign({}, rest, { "aria-current": activeStep === unsafe_index, ref: ref, className: (0, clsx_1.default)("navds-stepper__step", className, {
+    const isInteractive = interactive !== null && interactive !== void 0 ? interactive : context === null || context === void 0 ? void 0 : context.interactive;
+    const Comp = isInteractive ? Component : "div";
+    return (react_1.default.createElement(Comp, Object.assign({}, rest, { "aria-current": activeStep === unsafe_index, ref: ref, className: (0, clsx_1.default)("navds-stepper__step", className, {
             "navds-stepper__step--active": activeStep === unsafe_index,
+            "navds-stepper__step--behind": activeStep > unsafe_index,
+            "navds-stepper__step--non-interactive": !isInteractive,
+            "navds-stepper__step--completed": completed,
         }), onClick: (e) => {
             var _a;
-            context.onStepChange(unsafe_index + 1);
+            isInteractive && context.onStepChange(unsafe_index + 1);
             (_a = rest === null || rest === void 0 ? void 0 : rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest, e);
         } }),
-        react_1.default.createElement(__1.Label, { className: "navds-stepper__circle", as: "span", "aria-hidden": "true" }, unsafe_index + 1),
+        completed ? (react_1.default.createElement(ds_icons_1.SuccessFilled, { "aria-hidden": true, className: "navds-stepper__circle navds-stepper__circle--success" })) : (react_1.default.createElement(__1.Label, { className: "navds-stepper__circle", as: "span", "aria-hidden": "true" }, unsafe_index + 1)),
         react_1.default.createElement(__1.Label, { as: "span", className: "navds-stepper__content" }, children)));
 });
 const Step = exports.StepComponent;

package/cjs/stepper/Stepper.js

@@ -43,7 +43,7 @@ const clsx_1 = __importDefault(require("clsx"));
 const Step_1 = __importDefault(require("./Step"));
 exports.StepperContext = (0, react_1.createContext)(null);
 exports.Stepper = (0, react_1.forwardRef)((_a, ref) => {
-    var { children, className, activeStep, orientation = "vertical", onStepChange = () => { } } = _a, rest = __rest(_a, ["children", "className", "activeStep", "orientation", "onStepChange"]);
+    var { children, className, activeStep, orientation = "vertical", onStepChange = () => { }, interactive = true } = _a, rest = __rest(_a, ["children", "className", "activeStep", "orientation", "onStepChange", "interactive"]);
     activeStep = activeStep - 1;
     return (react_1.default.createElement("ol", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-stepper", orientation === "horizontal" ? "navds-stepper--horizontal" : "", className) }),
         react_1.default.createElement(exports.StepperContext.Provider, { value: {
@@ -51,6 +51,7 @@ exports.Stepper = (0, react_1.forwardRef)((_a, ref) => {
                 onStepChange,
                 lastIndex: react_1.default.Children.count(children),
                 orientation,
+                interactive,
             } }, react_1.default.Children.map(children, (step, index) => {
             var _a, _b;
             return (react_1.default.createElement("li", { className: (0, clsx_1.default)("navds-stepper__item"), key: index + ((_b = (_a = children === null || children === void 0 ? void 0 : children.toString) === null || _a === void 0 ? void 0 : _a.call(children)) !== null && _b !== void 0 ? _b : "") },

package/cjs/toggle-group/ToggleGroup.js

@@ -67,9 +67,9 @@ exports.ToggleGroup = (0, react_1.forwardRef)((_a, ref) => {
     return (react_1.default.createElement(exports.ToggleGroupContext.Provider, { value: {
             size,
         } },
-        react_1.default.createElement("div", null,
+        react_1.default.createElement("div", { className: (0, clsx_1.default)("navds-toggle-group__wrapper", className) },
             label && (react_1.default.createElement(__1.Label, { size: size, className: "navds-toggle-group__label", id: labelId }, label)),
-            react_1.default.createElement(RadixToggleGroup.Root, Object.assign({}, rest, { onValueChange: handleValueChange, value: value !== null && value !== void 0 ? value : groupValue, defaultValue: defaultValue, ref: ref, className: (0, clsx_1.default)("navds-toggle-group", className, `navds-toggle-group--${size}`) }, (describeBy && { "aria-describedby": describeBy }), { role: "radiogroup", type: "single" }), children))));
+            react_1.default.createElement(RadixToggleGroup.Root, Object.assign({}, rest, { onValueChange: handleValueChange, value: value !== null && value !== void 0 ? value : groupValue, defaultValue: defaultValue, ref: ref, className: (0, clsx_1.default)("navds-toggle-group", `navds-toggle-group--${size}`) }, (describeBy && { "aria-describedby": describeBy }), { role: "radiogroup", type: "single" }), children))));
 });
 exports.ToggleGroup.Item = ToggleItem_1.default;
 exports.default = exports.ToggleGroup;

package/esm/stepper/Step.d.ts

@@ -10,6 +10,16 @@ export interface StepperStepProps extends React.AnchorHTMLAttributes<HTMLAnchorE
      * @private
      */
     unsafe_index?: number;
+    /**
+     * Makes step-indicator a checkmark
+     * @default false
+     */
+    completed?: boolean;
+    /**
+     * Makes step non-interactive if false. Step will be set to a <div>, overriding `as`-prop
+     * @default true
+     */
+    interactive?: boolean;
 }
 export interface StepperStepType extends OverridableComponent<StepperStepProps, HTMLAnchorElement> {
 }

package/esm/stepper/Step.js

@@ -9,26 +9,32 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { SuccessFilled } from "@navikt/ds-icons";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { StepperContext } from "./Stepper";
 import { Label } from "..";
+import { StepperContext } from "./Stepper";
 export const StepComponent = forwardRef((_a, ref) => {
-    var { className, children, as: Component = "a", unsafe_index = 0 } = _a, rest = __rest(_a, ["className", "children", "as", "unsafe_index"]);
+    var { className, children, as: Component = "a", unsafe_index = 0, completed = false, interactive } = _a, rest = __rest(_a, ["className", "children", "as", "unsafe_index", "completed", "interactive"]);
     const context = useContext(StepperContext);
     if (context === null) {
         console.error("<Stepper.Step> has to be used within <Stepper>");
         return null;
     }
     const { activeStep } = context;
-    return (React.createElement(Component, Object.assign({}, rest, { "aria-current": activeStep === unsafe_index, ref: ref, className: cl("navds-stepper__step", className, {
+    const isInteractive = interactive !== null && interactive !== void 0 ? interactive : context === null || context === void 0 ? void 0 : context.interactive;
+    const Comp = isInteractive ? Component : "div";
+    return (React.createElement(Comp, Object.assign({}, rest, { "aria-current": activeStep === unsafe_index, ref: ref, className: cl("navds-stepper__step", className, {
             "navds-stepper__step--active": activeStep === unsafe_index,
+            "navds-stepper__step--behind": activeStep > unsafe_index,
+            "navds-stepper__step--non-interactive": !isInteractive,
+            "navds-stepper__step--completed": completed,
         }), onClick: (e) => {
             var _a;
-            context.onStepChange(unsafe_index + 1);
+            isInteractive && context.onStepChange(unsafe_index + 1);
             (_a = rest === null || rest === void 0 ? void 0 : rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest, e);
         } }),
-        React.createElement(Label, { className: "navds-stepper__circle", as: "span", "aria-hidden": "true" }, unsafe_index + 1),
+        completed ? (React.createElement(SuccessFilled, { "aria-hidden": true, className: "navds-stepper__circle navds-stepper__circle--success" })) : (React.createElement(Label, { className: "navds-stepper__circle", as: "span", "aria-hidden": "true" }, unsafe_index + 1)),
         React.createElement(Label, { as: "span", className: "navds-stepper__content" }, children)));
 });
 const Step = StepComponent;

package/esm/stepper/Step.js.map

@@ -1 +1 @@
-{"version":3,"file":"Step.js","sourceRoot":"","sources":["../../src/stepper/Step.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAwB,MAAM,IAAI,CAAC;AAkBjD,MAAM,CAAC,MAAM,aAAa,GAGtB,UAAU,CACZ,CACE,EAAuE,EACvE,GAAG,EACH,EAAE;QAFF,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG,EAAE,YAAY,GAAG,CAAC,OAAW,EAAN,IAAI,cAArE,+CAAuE,CAAF;IAGrE,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAC3C,IAAI,OAAO,KAAK,IAAI,EAAE;QACpB,OAAO,CAAC,KAAK,CAAC,gDAAgD,CAAC,CAAC;QAChE,OAAO,IAAI,CAAC;KACb;IACD,MAAM,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC;IAE/B,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,oBACM,UAAU,KAAK,YAAY,EACzC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE;YAC9C,6BAA6B,EAAE,UAAU,KAAK,YAAY;SAC3D,CAAC,EACF,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;;YACb,OAAO,CAAC,YAAY,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;YACvC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,qDAAG,CAAC,CAAC,CAAC;QACrB,CAAC;QAED,oBAAC,KAAK,IAAC,SAAS,EAAC,uBAAuB,EAAC,EAAE,EAAC,MAAM,iBAAa,MAAM,IAClE,YAAY,GAAG,CAAC,CACX;QACR,oBAAC,KAAK,IAAC,EAAE,EAAC,MAAM,EAAC,SAAS,EAAC,wBAAwB,IAChD,QAAQ,CACH,CACE,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,IAAI,GAAG,aAAgC,CAAC;AAE9C,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Step.js","sourceRoot":"","sources":["../../src/stepper/Step.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,KAAK,EAAwB,MAAM,IAAI,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AA4B3C,MAAM,CAAC,MAAM,aAAa,GAGtB,UAAU,CACZ,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,SAAS,GAAG,GAAG,EACnB,YAAY,GAAG,CAAC,EAChB,SAAS,GAAG,KAAK,EACjB,WAAW,OAEZ,EADI,IAAI,cAPT,2EAQC,CADQ;IAIT,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAC3C,IAAI,OAAO,KAAK,IAAI,EAAE;QACpB,OAAO,CAAC,KAAK,CAAC,gDAAgD,CAAC,CAAC;QAChE,OAAO,IAAI,CAAC;KACb;IACD,MAAM,EAAE,UAAU,EAAE,GAAG,OAAO,CAAC;IAE/B,MAAM,aAAa,GAAG,WAAW,aAAX,WAAW,cAAX,WAAW,GAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,CAAC;IAE1D,MAAM,IAAI,GAAG,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC;IAE/C,OAAO,CACL,oBAAC,IAAI,oBACC,IAAI,oBACM,UAAU,KAAK,YAAY,EACzC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE;YAC9C,6BAA6B,EAAE,UAAU,KAAK,YAAY;YAC1D,6BAA6B,EAAE,UAAU,GAAG,YAAY;YACxD,sCAAsC,EAAE,CAAC,aAAa;YACtD,gCAAgC,EAAE,SAAS;SAC5C,CAAC,EACF,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;;YACb,aAAa,IAAI,OAAO,CAAC,YAAY,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;YACxD,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,qDAAG,CAAC,CAAC,CAAC;QACrB,CAAC;QAEA,SAAS,CAAC,CAAC,CAAC,CACX,oBAAC,aAAa,yBAEZ,SAAS,EAAC,sDAAsD,GAChE,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,KAAK,IAAC,SAAS,EAAC,uBAAuB,EAAC,EAAE,EAAC,MAAM,iBAAa,MAAM,IAClE,YAAY,GAAG,CAAC,CACX,CACT;QACD,oBAAC,KAAK,IAAC,EAAE,EAAC,MAAM,EAAC,SAAS,EAAC,wBAAwB,IAChD,QAAQ,CACH,CACH,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,IAAI,GAAG,aAAgC,CAAC;AAE9C,eAAe,IAAI,CAAC"}

package/esm/stepper/Stepper.d.ts

@@ -20,6 +20,11 @@ export interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
      * @note Stepper index starts at 1, not 0
      */
     onStepChange?: (step: number) => void;
+    /**
+     * Makes stepper non-interactive if false
+     * @default true
+     */
+    interactive?: boolean;
 }
 interface StepperComponent extends React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLOListElement>> {
     Step: StepperStepType;
@@ -29,6 +34,7 @@ interface StepperContextProps {
     onStepChange: (step: number) => void;
     lastIndex: number;
     orientation: "horizontal" | "vertical";
+    interactive: boolean;
 }
 export declare const StepperContext: React.Context<StepperContextProps | null>;
 export declare const Stepper: StepperComponent;

package/esm/stepper/Stepper.js

@@ -14,7 +14,7 @@ import cl from "clsx";
 import Step from "./Step";
 export const StepperContext = createContext(null);
 export const Stepper = forwardRef((_a, ref) => {
-    var { children, className, activeStep, orientation = "vertical", onStepChange = () => { } } = _a, rest = __rest(_a, ["children", "className", "activeStep", "orientation", "onStepChange"]);
+    var { children, className, activeStep, orientation = "vertical", onStepChange = () => { }, interactive = true } = _a, rest = __rest(_a, ["children", "className", "activeStep", "orientation", "onStepChange", "interactive"]);
     activeStep = activeStep - 1;
     return (React.createElement("ol", Object.assign({}, rest, { ref: ref, className: cl("navds-stepper", orientation === "horizontal" ? "navds-stepper--horizontal" : "", className) }),
         React.createElement(StepperContext.Provider, { value: {
@@ -22,6 +22,7 @@ export const Stepper = forwardRef((_a, ref) => {
                 onStepChange,
                 lastIndex: React.Children.count(children),
                 orientation,
+                interactive,
             } }, React.Children.map(children, (step, index) => {
             var _a, _b;
             return (React.createElement("li", { className: cl("navds-stepper__item"), key: index + ((_b = (_a = children === null || children === void 0 ? void 0 : children.toString) === null || _a === void 0 ? void 0 : _a.call(children)) !== null && _b !== void 0 ? _b : "") },

package/esm/stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../src/stepper/Stepper.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,IAA2C,MAAM,QAAQ,CAAC;AAsCjE,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAA6B,IAAI,CAAC,CAAC;AAE9E,MAAM,CAAC,MAAM,OAAO,GAAqB,UAAU,CAIjD,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,GAAG,UAAU,EACxB,YAAY,GAAG,GAAG,EAAE,GAAE,CAAC,OAExB,EADI,IAAI,cANT,sEAOC,CADQ;IAIT,UAAU,GAAG,UAAU,GAAG,CAAC,CAAC;IAC5B,OAAO,CACL,4CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,eAAe,EACf,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,EAC/D,SAAS,CACV;QAED,oBAAC,cAAc,CAAC,QAAQ,IACtB,KAAK,EAAE;gBACL,UAAU;gBACV,YAAY;gBACZ,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC;gBACzC,WAAW;aACZ,IAEA,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;YAC5C,OAAO,CACL,4BACE,SAAS,EAAE,EAAE,CAAC,qBAAqB,CAAC,EACpC,GAAG,EAAE,KAAK,GAAG,CAAC,MAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,wDAAI,mCAAI,EAAE,CAAC;gBAE3C,8BAAM,SAAS,EAAC,4CAA4C,GAAG;gBAC9D,KAAK,CAAC,cAAc,CAAmB,IAAI,CAAC;oBAC3C,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,kCAClB,IAAI,CAAC,KAAK,KACb,YAAY,EAAE,KAAK,IACnB;oBACJ,CAAC,CAAC,IAAI;gBACR,8BAAM,SAAS,EAAC,4CAA4C,GAAG,CAC5D,CACN,CAAC;QACJ,CAAC,CAAC,CACsB,CACvB,CACN,CAAC;AACJ,CAAC,CACkB,CAAC;AAEtB,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC;AAEpB,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../src/stepper/Stepper.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,IAA2C,MAAM,QAAQ,CAAC;AA4CjE,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAA6B,IAAI,CAAC,CAAC;AAE9E,MAAM,CAAC,MAAM,OAAO,GAAqB,UAAU,CAIjD,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,GAAG,UAAU,EACxB,YAAY,GAAG,GAAG,EAAE,GAAE,CAAC,EACvB,WAAW,GAAG,IAAI,OAEnB,EADI,IAAI,cAPT,qFAQC,CADQ;IAIT,UAAU,GAAG,UAAU,GAAG,CAAC,CAAC;IAC5B,OAAO,CACL,4CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,eAAe,EACf,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,EAC/D,SAAS,CACV;QAED,oBAAC,cAAc,CAAC,QAAQ,IACtB,KAAK,EAAE;gBACL,UAAU;gBACV,YAAY;gBACZ,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC;gBACzC,WAAW;gBACX,WAAW;aACZ,IAEA,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;YAC5C,OAAO,CACL,4BACE,SAAS,EAAE,EAAE,CAAC,qBAAqB,CAAC,EACpC,GAAG,EAAE,KAAK,GAAG,CAAC,MAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,wDAAI,mCAAI,EAAE,CAAC;gBAE3C,8BAAM,SAAS,EAAC,4CAA4C,GAAG;gBAC9D,KAAK,CAAC,cAAc,CAAmB,IAAI,CAAC;oBAC3C,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,kCAClB,IAAI,CAAC,KAAK,KACb,YAAY,EAAE,KAAK,IACnB;oBACJ,CAAC,CAAC,IAAI;gBACR,8BAAM,SAAS,EAAC,4CAA4C,GAAG,CAC5D,CACN,CAAC;QACJ,CAAC,CAAC,CACsB,CACvB,CACN,CAAC;AACJ,CAAC,CACkB,CAAC;AAEtB,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC;AAEpB,eAAe,OAAO,CAAC"}

package/esm/toggle-group/ToggleGroup.js

@@ -38,9 +38,9 @@ export const ToggleGroup = forwardRef((_a, ref) => {
     return (React.createElement(ToggleGroupContext.Provider, { value: {
             size,
         } },
-        React.createElement("div", null,
+        React.createElement("div", { className: cl("navds-toggle-group__wrapper", className) },
             label && (React.createElement(Label, { size: size, className: "navds-toggle-group__label", id: labelId }, label)),
-            React.createElement(RadixToggleGroup.Root, Object.assign({}, rest, { onValueChange: handleValueChange, value: value !== null && value !== void 0 ? value : groupValue, defaultValue: defaultValue, ref: ref, className: cl("navds-toggle-group", className, `navds-toggle-group--${size}`) }, (describeBy && { "aria-describedby": describeBy }), { role: "radiogroup", type: "single" }), children))));
+            React.createElement(RadixToggleGroup.Root, Object.assign({}, rest, { onValueChange: handleValueChange, value: value !== null && value !== void 0 ? value : groupValue, defaultValue: defaultValue, ref: ref, className: cl("navds-toggle-group", `navds-toggle-group--${size}`) }, (describeBy && { "aria-describedby": describeBy }), { role: "radiogroup", type: "single" }), children))));
 });
 ToggleGroup.Item = ToggleItem;
 export default ToggleGroup;

package/esm/toggle-group/ToggleGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.js","sourceRoot":"","sources":["../../src/toggle-group/ToggleGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EACZ,aAAa,EACb,UAAU,EAEV,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,UAA8B,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAK,gBAAgB,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AA0ClC,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAC7C,IAAI,CACL,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CACE,EAWC,EACD,GAAG,EACH,EAAE;QAbF,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,KAAK,EACL,YAAY,EACZ,EAAE,EACF,kBAAkB,EAAE,IAAI,OAEzB,EADI,IAAI,cAVT,yGAWC,CADQ;IAIT,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IAExB,MAAM,iBAAiB,GAAG,CAAC,CAAS,EAAE,EAAE;QACtC,IAAI,CAAC,KAAK,EAAE,EAAE;YACZ,aAAa,CAAC,CAAC,CAAC,CAAC;YACjB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,CAAC;SACf;IACH,CAAC,CAAC;IAEF,IAAI,CAAC,KAAK,IAAI,CAAC,YAAY,EAAE;QAC3B,OAAO,CAAC,KAAK,CAAC,uDAAuD,CAAC,CAAC;KACxE;IAED,MAAM,UAAU,GAAG,EAAE,CAAC;QACpB,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI;QACpB,CAAC,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK;KACzB,CAAC,CAAC;IAEH,IAAI,CAAC,KAAK,IAAI,CAAC,YAAY,EAAE;QAC3B,OAAO,CAAC,KAAK,CAAC,kDAAkD,CAAC,CAAC;KACnE;IAED,OAAO,CACL,oBAAC,kBAAkB,CAAC,QAAQ,IAC1B,KAAK,EAAE;YACL,IAAI;SACL;QAED;YACG,KAAK,IAAI,CACR,oBAAC,KAAK,IACJ,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,2BAA2B,EACrC,EAAE,EAAE,OAAO,IAEV,KAAK,CACA,CACT;YACD,oBAAC,gBAAgB,CAAC,IAAI,oBAChB,IAAI,IACR,aAAa,EAAE,iBAAiB,EAChC,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,UAAU,EAC1B,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,oBAAoB,EACpB,SAAS,EACT,uBAAuB,IAAI,EAAE,CAC9B,IACG,CAAC,UAAU,IAAI,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC,IACtD,IAAI,EAAC,YAAY,EACjB,IAAI,EAAC,QAAQ,KAEZ,QAAQ,CACa,CACpB,CACsB,CAC/B,CAAC;AACJ,CAAC,CACsB,CAAC;AAE1B,WAAW,CAAC,IAAI,GAAG,UAAU,CAAC;AAE9B,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ToggleGroup.js","sourceRoot":"","sources":["../../src/toggle-group/ToggleGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EACZ,aAAa,EACb,UAAU,EAEV,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,UAA8B,MAAM,cAAc,CAAC;AAC1D,OAAO,KAAK,gBAAgB,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AA0ClC,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAC7C,IAAI,CACL,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CACE,EAWC,EACD,GAAG,EACH,EAAE;QAbF,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,KAAK,EACL,KAAK,EACL,YAAY,EACZ,EAAE,EACF,kBAAkB,EAAE,IAAI,OAEzB,EADI,IAAI,cAVT,yGAWC,CADQ;IAIT,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;IAC3D,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IAExB,MAAM,iBAAiB,GAAG,CAAC,CAAS,EAAE,EAAE;QACtC,IAAI,CAAC,KAAK,EAAE,EAAE;YACZ,aAAa,CAAC,CAAC,CAAC,CAAC;YACjB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,CAAC;SACf;IACH,CAAC,CAAC;IAEF,IAAI,CAAC,KAAK,IAAI,CAAC,YAAY,EAAE;QAC3B,OAAO,CAAC,KAAK,CAAC,uDAAuD,CAAC,CAAC;KACxE;IAED,MAAM,UAAU,GAAG,EAAE,CAAC;QACpB,CAAC,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,EAAE,CAAC,EAAE,CAAC,CAAC,IAAI;QACpB,CAAC,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK;KACzB,CAAC,CAAC;IAEH,IAAI,CAAC,KAAK,IAAI,CAAC,YAAY,EAAE;QAC3B,OAAO,CAAC,KAAK,CAAC,kDAAkD,CAAC,CAAC;KACnE;IAED,OAAO,CACL,oBAAC,kBAAkB,CAAC,QAAQ,IAC1B,KAAK,EAAE;YACL,IAAI;SACL;QAED,6BAAK,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE,SAAS,CAAC;YACzD,KAAK,IAAI,CACR,oBAAC,KAAK,IACJ,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,2BAA2B,EACrC,EAAE,EAAE,OAAO,IAEV,KAAK,CACA,CACT;YACD,oBAAC,gBAAgB,CAAC,IAAI,oBAChB,IAAI,IACR,aAAa,EAAE,iBAAiB,EAChC,KAAK,EAAE,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,UAAU,EAC1B,YAAY,EAAE,YAAY,EAC1B,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,oBAAoB,EAAE,uBAAuB,IAAI,EAAE,CAAC,IAC9D,CAAC,UAAU,IAAI,EAAE,kBAAkB,EAAE,UAAU,EAAE,CAAC,IACtD,IAAI,EAAC,YAAY,EACjB,IAAI,EAAC,QAAQ,KAEZ,QAAQ,CACa,CACpB,CACsB,CAC/B,CAAC;AACJ,CAAC,CACsB,CAAC;AAE1B,WAAW,CAAC,IAAI,GAAG,UAAU,CAAC;AAE9B,eAAe,WAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "1.2.5",
+  "version": "1.3.0",
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
   "license": "MIT",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@floating-ui/react-dom-interactions": "0.9.2",
-    "@navikt/ds-icons": "^1.2.5",
+    "@navikt/ds-icons": "^1.3.0",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.1.1",
@@ -74,5 +74,5 @@
       "optional": true
     }
   },
-  "gitHead": "f2eab3f636387ed025fd57f44178c41ae1ffbaff"
+  "gitHead": "01a6f250da8c41fc4338fcd951ae5bc148e39b46"
 }

package/src/stepper/Step.tsx

@@ -1,7 +1,8 @@
+import { SuccessFilled } from "@navikt/ds-icons";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { StepperContext } from "./Stepper";
 import { Label, OverridableComponent } from "..";
+import { StepperContext } from "./Stepper";
 
 export interface StepperStepProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -14,6 +15,16 @@ export interface StepperStepProps
    * @private
    */
   unsafe_index?: number;
+  /**
+   * Makes step-indicator a checkmark
+   * @default false
+   */
+  completed?: boolean;
+  /**
+   * Makes step non-interactive if false. Step will be set to a <div>, overriding `as`-prop
+   * @default true
+   */
+  interactive?: boolean;
 }
 
 export interface StepperStepType
@@ -24,7 +35,15 @@ export const StepComponent: OverridableComponent<
   HTMLAnchorElement
 > = forwardRef(
   (
-    { className, children, as: Component = "a", unsafe_index = 0, ...rest },
+    {
+      className,
+      children,
+      as: Component = "a",
+      unsafe_index = 0,
+      completed = false,
+      interactive,
+      ...rest
+    },
     ref
   ) => {
     const context = useContext(StepperContext);
@@ -34,26 +53,40 @@ export const StepComponent: OverridableComponent<
     }
     const { activeStep } = context;
 
+    const isInteractive = interactive ?? context?.interactive;
+
+    const Comp = isInteractive ? Component : "div";
+
     return (
-      <Component
+      <Comp
         {...rest}
         aria-current={activeStep === unsafe_index}
         ref={ref}
         className={cl("navds-stepper__step", className, {
           "navds-stepper__step--active": activeStep === unsafe_index,
+          "navds-stepper__step--behind": activeStep > unsafe_index,
+          "navds-stepper__step--non-interactive": !isInteractive,
+          "navds-stepper__step--completed": completed,
         })}
         onClick={(e) => {
-          context.onStepChange(unsafe_index + 1);
+          isInteractive && context.onStepChange(unsafe_index + 1);
           rest?.onClick?.(e);
         }}
       >
-        <Label className="navds-stepper__circle" as="span" aria-hidden="true">
-          {unsafe_index + 1}
-        </Label>
+        {completed ? (
+          <SuccessFilled
+            aria-hidden
+            className="navds-stepper__circle navds-stepper__circle--success"
+          />
+        ) : (
+          <Label className="navds-stepper__circle" as="span" aria-hidden="true">
+            {unsafe_index + 1}
+          </Label>
+        )}
         <Label as="span" className="navds-stepper__content">
           {children}
         </Label>
-      </Component>
+      </Comp>
     );
   }
 );

package/src/stepper/Stepper.tsx

@@ -22,6 +22,11 @@ export interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
    * @note Stepper index starts at 1, not 0
    */
   onStepChange?: (step: number) => void;
+  /**
+   * Makes stepper non-interactive if false
+   * @default true
+   */
+  interactive?: boolean;
 }
 
 interface StepperComponent
@@ -36,6 +41,7 @@ interface StepperContextProps {
   onStepChange: (step: number) => void;
   lastIndex: number;
   orientation: "horizontal" | "vertical";
+  interactive: boolean;
 }
 
 export const StepperContext = createContext<StepperContextProps | null>(null);
@@ -51,6 +57,7 @@ export const Stepper: StepperComponent = forwardRef<
       activeStep,
       orientation = "vertical",
       onStepChange = () => {},
+      interactive = true,
       ...rest
     },
     ref
@@ -72,6 +79,7 @@ export const Stepper: StepperComponent = forwardRef<
             onStepChange,
             lastIndex: React.Children.count(children),
             orientation,
+            interactive,
           }}
         >
           {React.Children.map(children, (step, index) => {

package/src/stepper/stepper.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta } from "@storybook/react/types-6-0";
 import React, { useState } from "react";
-import Stepper from "./Stepper";
 import { BodyLong } from "..";
+import Stepper from "./Stepper";
 
 export default {
   title: "ds-react/Stepper",
@@ -13,6 +13,11 @@ export default {
         options: ["horizontal", "vertical"],
       },
     },
+    activeStep: {
+      control: {
+        type: "number",
+      },
+    },
   },
 } as Meta;
 
@@ -40,13 +45,17 @@ export const Default = ({ asButton, ...props }) => {
         aria-labelledby="stepper-heading"
         activeStep={activeStep}
         onStepChange={setActiveStep}
-        orientation="horizontal"
+        orientation="vertical"
         {...props}
       >
-        <Stepper.Step {...newProps}>Start søknad</Stepper.Step>
+        <Stepper.Step {...newProps} completed={props.completed}>
+          Start søknad
+        </Stepper.Step>
         <Stepper.Step {...newProps}>Personopplysninger</Stepper.Step>
-        <Stepper.Step {...newProps}>Saksopplysninger</Stepper.Step>
-        <Stepper.Step {...newProps}>
+        <Stepper.Step {...newProps} completed={props.completed}>
+          Saksopplysninger
+        </Stepper.Step>
+        <Stepper.Step {...newProps} completed={props.completed}>
           Søknadstekst for en veldig spesifikk prosess i NAV som må beskrives og
           forklares i sitt fulle i denne labelen
         </Stepper.Step>
@@ -63,6 +72,8 @@ export const Default = ({ asButton, ...props }) => {
 
 Default.args = {
   asButton: false,
+  interactive: true,
+  completed: false,
 };
 
 export const Horizontal = () => {
@@ -112,22 +123,84 @@ export const Vertical = () => {
 };
 
 export const DisplayOnly = () => {
-  const props = { as: "div" };
   return (
-    <Stepper
-      aria-labelledby="stepper-heading"
-      activeStep={2}
-      orientation="vertical"
-    >
-      <Stepper.Step {...props}>Start søknad</Stepper.Step>
-      <Stepper.Step {...props}>Personopplysninger</Stepper.Step>
-      <Stepper.Step {...props}>Saksopplysninger</Stepper.Step>
-      <Stepper.Step {...props}>
-        Søknadstekst for en veldig spesifikk prosess i NAV som har lang tekst
-      </Stepper.Step>
-      <Stepper.Step {...props}>Vedlegg</Stepper.Step>
-      <Stepper.Step {...props}>Oppsummering</Stepper.Step>
-      <Stepper.Step {...props}>Innsending</Stepper.Step>
-    </Stepper>
+    <div className="colgap">
+      <Stepper
+        aria-labelledby="stepper-heading"
+        activeStep={2}
+        orientation="vertical"
+        interactive={false}
+      >
+        <Stepper.Step completed>Start søknad</Stepper.Step>
+        <Stepper.Step completed>Personopplysninger</Stepper.Step>
+        <Stepper.Step>Saksopplysninger</Stepper.Step>
+        <Stepper.Step>
+          Søknadstekst for en veldig spesifikk prosess i NAV som har lang tekst
+        </Stepper.Step>
+        <Stepper.Step>Vedlegg</Stepper.Step>
+        <Stepper.Step>Oppsummering</Stepper.Step>
+        <Stepper.Step>Innsending</Stepper.Step>
+      </Stepper>
+      <Stepper
+        aria-labelledby="stepper-heading"
+        activeStep={3}
+        orientation="vertical"
+        interactive={false}
+      >
+        <Stepper.Step completed>Start søknad</Stepper.Step>
+        <Stepper.Step completed>Personopplysninger</Stepper.Step>
+        <Stepper.Step>Saksopplysninger</Stepper.Step>
+        <Stepper.Step>
+          Søknadstekst for en veldig spesifikk prosess i NAV som har lang tekst
+        </Stepper.Step>
+        <Stepper.Step>Vedlegg</Stepper.Step>
+        <Stepper.Step>Oppsummering</Stepper.Step>
+        <Stepper.Step>Innsending</Stepper.Step>
+      </Stepper>
+    </div>
+  );
+};
+
+export const CompletedSteps = () => {
+  const [activeStep, setActiveStep] = useState(3);
+  return (
+    <div className="colgap">
+      <Stepper
+        aria-labelledby="stepper-heading"
+        activeStep={activeStep}
+        orientation="vertical"
+        onStepChange={(step) => setActiveStep(step)}
+      >
+        <Stepper.Step completed={activeStep > 1}>Start søknad</Stepper.Step>
+        <Stepper.Step completed={activeStep > 2}>
+          Personopplysninger
+        </Stepper.Step>
+        <Stepper.Step completed={activeStep > 3}>Saksopplysninger</Stepper.Step>
+        <Stepper.Step completed={activeStep >= 4}>
+          Søknadstekst for en veldig spesifikk prosess i NAV som har lang tekst
+        </Stepper.Step>
+        <Stepper.Step completed={activeStep > 5}>Vedlegg</Stepper.Step>
+        <Stepper.Step completed={activeStep > 6}>Oppsummering</Stepper.Step>
+        <Stepper.Step completed={activeStep > 7}>Innsending</Stepper.Step>
+      </Stepper>
+      <Stepper
+        aria-labelledby="stepper-heading"
+        activeStep={activeStep - 1}
+        orientation="vertical"
+        onStepChange={(step) => setActiveStep(step)}
+      >
+        <Stepper.Step completed={activeStep > 1}>Start søknad</Stepper.Step>
+        <Stepper.Step completed={activeStep > 2}>
+          Personopplysninger
+        </Stepper.Step>
+        <Stepper.Step completed={activeStep > 3}>Saksopplysninger</Stepper.Step>
+        <Stepper.Step completed={activeStep >= 4}>
+          Søknadstekst for en veldig spesifikk prosess i NAV som har lang tekst
+        </Stepper.Step>
+        <Stepper.Step completed={activeStep > 5}>Vedlegg</Stepper.Step>
+        <Stepper.Step completed={activeStep > 6}>Oppsummering</Stepper.Step>
+        <Stepper.Step completed={activeStep > 7}>Innsending</Stepper.Step>
+      </Stepper>
+    </div>
   );
 };

package/src/toggle-group/ToggleGroup.tsx

@@ -98,7 +98,7 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
           size,
         }}
       >
-        <div>
+        <div className={cl("navds-toggle-group__wrapper", className)}>
           {label && (
             <Label
               size={size}
@@ -114,11 +114,7 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
             value={value ?? groupValue}
             defaultValue={defaultValue}
             ref={ref}
-            className={cl(
-              "navds-toggle-group",
-              className,
-              `navds-toggle-group--${size}`
-            )}
+            className={cl("navds-toggle-group", `navds-toggle-group--${size}`)}
             {...(describeBy && { "aria-describedby": describeBy })}
             role="radiogroup"
             type="single"