@navikt/ds-react 0.17.11 → 0.17.14

package/esm/stepper/index.d.ts

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

package/esm/stepper/index.js

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

package/esm/stepper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/stepper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,cAAc,WAAW,CAAC"}

package/esm/tabs/Tab.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { OverridableComponent } from "..";
+export interface TabProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, "children"> {
+    /**
+     * Content
+     */
+    label?: React.ReactNode;
+    /**
+     * Icon
+     */
+    icon?: React.ReactNode;
+    /**
+     * Value for state-handling
+     */
+    value: string;
+    /**
+     * Icon position
+     * @default "left"
+     */
+    iconPosition?: "left" | "top";
+}
+export declare type TabType = OverridableComponent<TabProps, HTMLButtonElement>;
+declare const Tab: TabType;
+export default Tab;

package/esm/tabs/Tab.js

@@ -0,0 +1,34 @@
+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 * as RadixTabs from "@radix-ui/react-tabs";
+import cl from "classnames";
+import React, { forwardRef, useContext } from "react";
+import { Label } from "..";
+import { TabsContext } from "./Tabs";
+const Tab = forwardRef((_a, ref) => {
+    var _b;
+    var { className, as: Component = "button", label, icon, iconPosition, value } = _a, rest = __rest(_a, ["className", "as", "label", "icon", "iconPosition", "value"]);
+    const context = useContext(TabsContext);
+    if (!label && !icon) {
+        console.error("<Tabs.Tab/> needs label/icon");
+        return null;
+    }
+    return (React.createElement(RadixTabs.Trigger, { value: value, asChild: true },
+        React.createElement(Component, Object.assign({ ref: ref, className: cl("navds-tabs__tab", `navds-tabs__tab--${(_b = context === null || context === void 0 ? void 0 : context.size) !== null && _b !== void 0 ? _b : "medium"}`, `navds-tabs__tab-icon--${iconPosition}`, className, {
+                "navds-tabs__tab--icon-only": icon && !label,
+            }) }, rest),
+            React.createElement(Label, { as: "span", className: "navds-tabs__tab-inner", size: context === null || context === void 0 ? void 0 : context.size },
+                icon,
+                label))));
+});
+export default Tab;
+//# sourceMappingURL=Tab.js.map

package/esm/tabs/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../src/tabs/Tab.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,SAAS,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,KAAK,EAAwB,MAAM,IAAI,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAyBrC,MAAM,GAAG,GAAY,UAAU,CAC7B,CACE,EAQC,EACD,GAAG,EACH,EAAE;;QAVF,EACE,SAAS,EACT,EAAE,EAAE,SAAS,GAAG,QAAQ,EACxB,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,KAAK,OAEN,EADI,IAAI,cAPT,6DAQC,CADQ;IAIT,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAExC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,EAAE;QACnB,OAAO,CAAC,KAAK,CAAC,8BAA8B,CAAC,CAAC;QAC9C,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,oBAAC,SAAS,CAAC,OAAO,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO;QACtC,oBAAC,SAAS,kBACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,iBAAiB,EACjB,oBAAoB,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,mCAAI,QAAQ,EAAE,EAC/C,yBAAyB,YAAY,EAAE,EACvC,SAAS,EACT;gBACE,4BAA4B,EAAE,IAAI,IAAI,CAAC,KAAK;aAC7C,CACF,IACG,IAAI;YAER,oBAAC,KAAK,IACJ,EAAE,EAAC,MAAM,EACT,SAAS,EAAC,uBAAuB,EACjC,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI;gBAElB,IAAI;gBACJ,KAAK,CACA,CACE,CACM,CACrB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/esm/tabs/TabList.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Tab elements
+     */
+    children: React.ReactNode;
+    /**
+     * Loops back to start when navigating past last item
+     */
+    loop?: boolean;
+}
+export declare type ListType = React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLDivElement>>;
+declare const List: ListType;
+export default List;

package/esm/tabs/TabList.js

@@ -0,0 +1,81 @@
+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 { debounce } from "@material-ui/core";
+import { Back, Next } from "@navikt/ds-icons";
+import { TabsList } from "@radix-ui/react-tabs";
+import cl from "classnames";
+import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import mergeRefs from "react-merge-refs";
+const List = forwardRef((_a, ref) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    const listRef = useRef(null);
+    const mergedRef = mergeRefs([listRef, ref]);
+    const [displayScroll, setDisplayScroll] = useState({
+        start: false,
+        end: false,
+    });
+    const updateScrollButtonState = useMemo(() => debounce(() => {
+        var _a;
+        if (!(listRef === null || listRef === void 0 ? void 0 : listRef.current))
+            return;
+        const { scrollWidth, clientWidth } = listRef === null || listRef === void 0 ? void 0 : listRef.current;
+        let showStartScroll;
+        let showEndScroll;
+        const scrollLeft = (_a = listRef === null || listRef === void 0 ? void 0 : listRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft;
+        // use 1 for the potential rounding error with browser zooms.
+        showStartScroll = scrollLeft > 1;
+        showEndScroll = scrollLeft < scrollWidth - clientWidth - 1;
+        setDisplayScroll((displayScroll) => showStartScroll === displayScroll.start &&
+            showEndScroll === displayScroll.end
+            ? displayScroll
+            : { start: showStartScroll, end: showEndScroll });
+    }), []);
+    useEffect(() => {
+        var _a, _b, _c;
+        const handleResize = () => updateScrollButtonState();
+        const win = (_c = (_b = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) !== null && _b !== void 0 ? _b : document) !== null && _c !== void 0 ? _c : window;
+        win.addEventListener("resize", handleResize);
+        let resizeObserver;
+        if (typeof ResizeObserver !== "undefined") {
+            resizeObserver = new ResizeObserver(handleResize);
+            resizeObserver.observe(listRef.current);
+        }
+        return () => {
+            win.removeEventListener("resize", handleResize);
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+            }
+        };
+    }, [updateScrollButtonState]);
+    useEffect(() => {
+        updateScrollButtonState();
+    });
+    useEffect(() => {
+        return () => {
+            updateScrollButtonState.clear();
+        };
+    }, [updateScrollButtonState]);
+    const ScrollButton = ({ dir, hidden, }) => (React.createElement("div", { className: cl("navds-tabs__scroll-button", {
+            "navds-tabs__scroll-button--hidden": hidden,
+        }), onClick: () => {
+            if (!listRef.current)
+                return;
+            listRef.current.scrollLeft += dir * 100;
+        } }, dir === -1 ? (React.createElement(Back, { title: "scroll tilbake" })) : (React.createElement(Next, { title: "scroll neste" }))));
+    const showSteppers = displayScroll.end || displayScroll.start;
+    return (React.createElement("div", { className: "navds-tabs__tablist-wrapper" },
+        showSteppers && (React.createElement(ScrollButton, { dir: -1, hidden: !displayScroll.start })),
+        React.createElement(TabsList, Object.assign({}, rest, { ref: mergedRef, onScroll: updateScrollButtonState, className: cl("navds-tabs__tablist", className) })),
+        showSteppers && React.createElement(ScrollButton, { dir: 1, hidden: !displayScroll.end })));
+});
+export default List;
+//# sourceMappingURL=TabList.js.map

package/esm/tabs/TabList.js.map

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

package/esm/tabs/TabPanel.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export interface PanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Tab panel
+     */
+    children: React.ReactNode;
+    /**
+     * Value for state-handling
+     */
+    value: string;
+}
+export declare type PanelType = React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<HTMLDivElement>>;
+declare const Panel: PanelType;
+export default Panel;

package/esm/tabs/TabPanel.js

@@ -0,0 +1,20 @@
+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 { TabsContent } from "@radix-ui/react-tabs";
+import cl from "classnames";
+import React, { forwardRef } from "react";
+const Panel = forwardRef((_a, ref) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement(TabsContent, Object.assign({}, rest, { ref: ref, className: cl("navds-tabs__tabpanel", className) })));
+});
+export default Panel;
+//# sourceMappingURL=TabPanel.js.map

package/esm/tabs/TabPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../src/tabs/TabPanel.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAiB1C,MAAM,KAAK,GAAG,UAAU,CACtB,CAAC,EAAsB,EAAE,GAAG,EAAE,EAAE;QAA/B,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IAAY,OAAA,CAC/B,oBAAC,WAAW,oBACN,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,IAChD,CACH,CAAA;CAAA,CACW,CAAC;AAEf,eAAe,KAAK,CAAC"}

package/esm/tabs/Tabs.d.ts

@@ -0,0 +1,43 @@
+import React, { HTMLAttributes } from "react";
+import { TabType } from "./Tab";
+import { ListType } from "./TabList";
+import { PanelType } from "./TabPanel";
+export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "dir"> {
+    /**
+     * Tabs elements
+     */
+    children: React.ReactNode;
+    /**
+     * Changes padding and font-size
+     * @default "medium"
+     */
+    size?: "medium" | "small";
+    /**
+     * onChange
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Controlled selected value
+     */
+    value?: string;
+    /**
+     * If not controlled, a default-value needs to be set
+     */
+    defaultValue?: string;
+    /**
+     * Automatically activates tab on focus/navigation
+     * @default false
+     */
+    selectionFollowsFocus?: boolean;
+}
+interface TabsComponent extends React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> {
+    Tab: TabType;
+    List: ListType;
+    Panel: PanelType;
+}
+interface TabsContextProps {
+    size: "medium" | "small";
+}
+export declare const TabsContext: React.Context<TabsContextProps | null>;
+declare const Tabs: TabsComponent;
+export default Tabs;

package/esm/tabs/Tabs.js

@@ -0,0 +1,30 @@
+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 } from "react";
+import * as RadixTabs from "@radix-ui/react-tabs";
+import Tab from "./Tab";
+import List from "./TabList";
+import Panel from "./TabPanel";
+export const TabsContext = createContext(null);
+const Tabs = forwardRef((_a, ref) => {
+    var { className, children, onChange, size = "medium", selectionFollowsFocus = false } = _a, rest = __rest(_a, ["className", "children", "onChange", "size", "selectionFollowsFocus"]);
+    return (React.createElement(RadixTabs.Root, Object.assign({}, rest, { ref: ref, className: cl("navds-tabs", className, `navds-tabs--${size}`), activationMode: selectionFollowsFocus ? "automatic" : "manual", onValueChange: onChange }),
+        React.createElement(TabsContext.Provider, { value: {
+                size,
+            } }, children)));
+});
+Tabs.Tab = Tab;
+Tabs.List = List;
+Tabs.Panel = Panel;
+export default Tabs;
+//# sourceMappingURL=Tabs.js.map

package/esm/tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../src/tabs/Tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AACzE,OAAO,KAAK,SAAS,MAAM,sBAAsB,CAAC;AAClD,OAAO,GAAgB,MAAM,OAAO,CAAC;AACrC,OAAO,IAAkB,MAAM,WAAW,CAAC;AAC3C,OAAO,KAAoB,MAAM,YAAY,CAAC;AA6C9C,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAA0B,IAAI,CAAC,CAAC;AAExE,MAAM,IAAI,GAAG,UAAU,CACrB,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,qBAAqB,GAAG,KAAK,OAE9B,EADI,IAAI,cANT,sEAOC,CADQ;IAIT,OAAO,CACL,oBAAC,SAAS,CAAC,IAAI,oBACT,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,eAAe,IAAI,EAAE,CAAC,EAC7D,cAAc,EAAE,qBAAqB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,EAC9D,aAAa,EAAE,QAAQ;QAEvB,oBAAC,WAAW,CAAC,QAAQ,IACnB,KAAK,EAAE;gBACL,IAAI;aACL,IAEA,QAAQ,CACY,CACR,CAClB,CAAC;AACJ,CAAC,CACe,CAAC;AAEnB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;AACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;AACjB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;AAEnB,eAAe,IAAI,CAAC"}

package/esm/tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tabs, TabsProps } from "./Tabs";
+export { TabProps } from "./Tab";

package/esm/tabs/index.js

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

package/esm/tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAa,MAAM,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.17.11",
+  "version": "0.17.14",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -37,6 +37,7 @@
     "@material-ui/core": "^4.12.3",
     "@navikt/ds-icons": "^0.8.6",
     "@popperjs/core": "^2.10.1",
+    "@radix-ui/react-tabs": "0.1.5",
     "@radix-ui/react-toggle-group": "0.1.5",
     "classnames": "^2.2.6",
     "react-collapse": "^5.1.0",
@@ -67,5 +68,5 @@
     "@types/react": "^17.0.30",
     "react": "^17.0.0"
   },
-  "gitHead": "62ba36ae0944d7db43a265b24b24040322f0366f"
+  "gitHead": "88e2c2b2fee9701bf1cb370538c22c84e448d62a"
 }

package/src/form/ConfirmationPanel.tsx

@@ -10,7 +10,7 @@ export interface ConfirmationPanelProps extends Partial<CheckboxProps> {
   /**
    * Checkbox label
    */
-  label: string;
+  label: React.ReactNode;
   /**
    * Checked state for checkbox
    */

package/src/form/Select.tsx

@@ -19,7 +19,7 @@ export interface SelectProps
   /**
    * Label for select
    */
-  label: string;
+  label: React.ReactNode;
   /**
    * If enabled shows the label and description for screenreaders only
    */

package/src/index.ts

@@ -16,9 +16,11 @@ export * from "./popover";
 export * from "./read-more";
 export * from "./speech-bubble";
 export * from "./step-indicator";
+export * from "./stepper";
 export * from "./tag";
 export * from "./toggle-group";
 export * from "./table";
+export * from "./tabs";
 export * from "./typography";
 export * from "./util";
 

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

@@ -28,7 +28,7 @@ Du må nå selv styre state med `activeStep` og `onStepChange`.
 
 ## responsive
 
-Bruk `responsive`-prop for å skjule labels med en gang StepIndicator begynner å overlfowe.
+Bruk `responsive`-prop for å skjule labels med en gang StepIndicator begynner å overflowe.
 
 ```jsx
 <StepIndicator

package/src/stepper/Step.tsx

@@ -0,0 +1,59 @@
+import cl from "classnames";
+import React, { forwardRef, useContext } from "react";
+import { StepperContext } from ".";
+import { Label, OverridableComponent } from "..";
+
+export interface StepperStepProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * Text content under indicator
+   */
+  children: string;
+  /**
+   * Handled by Stepper
+   */
+  index?: number;
+}
+
+export interface StepperStepType
+  extends OverridableComponent<StepperStepProps, HTMLAnchorElement> {}
+
+const StepComponent: OverridableComponent<
+  StepperStepProps,
+  HTMLAnchorElement
+> = forwardRef(
+  ({ className, children, as: Component = "a", index = 0, ...rest }, ref) => {
+    const context = useContext(StepperContext);
+    if (context === null) {
+      console.error(
+        "<StepIndicator.Step> has to be used within an <StepIndicator>"
+      );
+      return null;
+    }
+    const activeStep = context.activeStep === index;
+
+    return (
+      <Component
+        {...rest}
+        aria-current={Boolean(activeStep)}
+        ref={ref}
+        className={cl("navds-stepper__step", className, {
+          "navds-stepper__step--active": activeStep,
+        })}
+        onClick={(e) => {
+          context.onStepChange(index);
+          rest?.onClick?.(e);
+        }}
+      >
+        <Label className="navds-stepper__step-number" as="span">
+          {activeStep ? `${index + 1}` : index + 1}
+        </Label>
+        <Label className="navds-stepper__step-label">{children}</Label>
+      </Component>
+    );
+  }
+);
+
+const Step = StepComponent as StepperStepType;
+
+export default Step;

package/src/stepper/Stepper.tsx

@@ -0,0 +1,73 @@
+import React, { createContext, forwardRef } from "react";
+import cl from "classnames";
+import Step, { StepperStepProps, StepperStepType } from "./Step";
+
+export interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
+  /**
+   * <Stepper.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;
+}
+
+interface StepperComponent
+  extends React.ForwardRefExoticComponent<
+    StepperProps & React.RefAttributes<HTMLOListElement>
+  > {
+  Step: StepperStepType;
+}
+
+interface StepperContextProps {
+  activeStep: number;
+  onStepChange: (step: number) => void;
+  lastIndex: number;
+}
+
+export const StepperContext = createContext<StepperContextProps | null>(null);
+
+const Stepper: StepperComponent = forwardRef<HTMLOListElement, StepperProps>(
+  (
+    { children, className, activeStep, onStepChange = () => {}, ...rest },
+    ref
+  ) => {
+    return (
+      <ol {...rest} ref={ref} className={cl("navds-stepper", className)}>
+        <StepperContext.Provider
+          value={{
+            activeStep,
+            onStepChange,
+            lastIndex: React.Children.count(children),
+          }}
+        >
+          {React.Children.map(children, (step, index) => {
+            return (
+              <li
+                className={cl("navds-stepper__step-wrapper")}
+                key={index + (children?.toString?.() ?? "")}
+              >
+                {React.isValidElement<StepperStepProps>(step)
+                  ? React.cloneElement(step, { ...step.props, index })
+                  : step}
+              </li>
+            );
+          })}
+        </StepperContext.Provider>
+      </ol>
+    );
+  }
+) as StepperComponent;
+
+Stepper.Step = Step;
+
+export default Stepper;

package/src/stepper/index.ts

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

package/src/stepper/stories/Example.tsx

@@ -0,0 +1,28 @@
+import React, { useState } from "react";
+import { Stepper } from "..";
+
+export const Example = (props) => {
+  const [activeStep, setActiveStep] = useState(
+    props.initialStep ? props.initialStep : 1
+  );
+
+  const anchorProps = {
+    href: "",
+    onClick: (e) => e.preventDefault(),
+  };
+
+  return (
+    <Stepper {...props} activeStep={activeStep} onStepChange={setActiveStep}>
+      <Stepper.Step {...anchorProps}>Start</Stepper.Step>
+      <Stepper.Step {...anchorProps}>
+        Sunt deserunt qui sit sunt culpa nisi
+      </Stepper.Step>
+      <Stepper.Step {...anchorProps}>
+        Nulla nisi pariatur nulla cupidatat elit.
+      </Stepper.Step>
+      <Stepper.Step {...anchorProps}>
+        Nulla laborum proident consequat laborum elit et dolore ut sunt.
+      </Stepper.Step>
+    </Stepper>
+  );
+};

package/src/stepper/stories/stepper.stories.mdx

@@ -0,0 +1,61 @@
+import { Meta, Canvas } from "@storybook/addon-docs";
+import { Stepper } from "..";
+import { Example } from "./Example";
+
+<Meta title="ds-react/stepper/intro" />
+
+# Hvordan ta i bruk Stepper
+
+Stepper er det vertikale søskenet til step-indicator/stegindikator.
+Du må nå selv styre state med `activeStep` og `onStepChange`.
+
+## Eksempel
+
+```jsx
+<Stepper activeStep={activeStep} onStepChange={(x) => setActiveStep(x)}>
+  <Stepper.Step href="" onClick={(e) => e.preventDefault()}>
+    Start
+  </Stepper.Step>
+  <Stepper.Step href="" onClick={(e) => e.preventDefault()}>
+    Sunt deserunt qui sit sunt culpa nisi
+  </Stepper.Step>
+  <Stepper.Step href="" onClick={(e) => e.preventDefault()}>
+    Nulla nisi pariatur nulla cupidatat elit.
+  </Stepper.Step>
+  <Stepper.Step href="" onClick={(e) => e.preventDefault()}>
+    Nulla laborum proident consequat laborum elit et dolore ut sunt.
+  </Stepper.Step>
+</Stepper>
+```
+
+<Canvas>
+  <Example />
+</Canvas>
+
+## Override tags
+
+`Stepper.Step` er implementert med Overridable-component noe som gjør at du kan endre taggen til
+det du vil med `as`-prop. Merk at Step åakkes inn i en `<li>`-wrapper for tilgjengelighet.
+
+```jsx
+<Stepper activeStep={activeStep} onStepChange={(x) => setActiveStep(x)}>
+  {/* <button> er default */}
+  <Stepper.Step
+    href=""
+    onClick={(e) => e.preventDefault()}
+  >{`Dette er default, et <a>-element`}</Stepper.Step>
+  <Stepper.Step as="button">{`Dette er et <button>-element`}</Stepper.Step>
+  <Stepper.Step as="span">{`Dette er et <span>-element`}</Stepper.Step>
+</Stepper>
+```
+
+<Canvas>
+  <Stepper activeStep={1} onStepChange={console.log}>
+    <Stepper.Step
+      href=""
+      onClick={(e) => e.preventDefault()}
+    >{`Dette er default, et <a>-element`}</Stepper.Step>
+    <Stepper.Step as="button">{`Dette er et <button>-element`}</Stepper.Step>
+    <Stepper.Step as="span">{`Dette er et <span>-element`}</Stepper.Step>
+  </Stepper>
+</Canvas>