@navikt/ds-react 0.17.12 → 0.17.13

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,82 @@
+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: () => {
+            var _a;
+            if (!listRef.current)
+                return;
+            (_a = listRef.current).scrollLeft && (_a.scrollLeft = 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.12",
+  "version": "0.17.13",
   "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": "08be6c0e8b0f5fe8177db9cb2222aebe2ec317d8"
+  "gitHead": "9e1b0ab1d1cc564e2eebc1c7d8d1143eaea0e71e"
 }

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>

package/src/stepper/stories/stepper.stories.tsx

@@ -0,0 +1,54 @@
+import { Meta } from "@storybook/react/types-6-0";
+import React, { useState } from "react";
+import Stepper from "../Stepper";
+import { BodyLong } from "../../typography";
+
+export default {
+  title: "ds-react/stepper",
+  component: Stepper,
+} as Meta;
+
+export const All = () => {
+  const storyTexts = [
+    "Minimize backwards overflow agile. Horsehead offer commitment to the cause nor copy and paste from stack overflow problem territories, innovation is hot right now for can you slack it to me?. High touch client table the discussion , and get buy-in so manage expectations loop back, please advise soonest. We need a paradigm shift dogpile that, and i need to pee and then go to another meeting for let's prioritize the low-hanging fruit.",
+    "Customer centric sorry i didn't get your email proceduralize, and first-order optimal strategies. I dont care if you got some copy, why you dont use officeipsumcom or something like that ? wheelhouse. Viral engagement new economy, this proposal is a win-win situation which will cause a stellar paradigm shift, and produce a multi-fold increase in deliverables Bob called an all-hands this afternoon. Fire up your browser touch base innovation is hot right now so this medium needs to be more dynamic.",
+    "Touch base define the underlying principles that drive decisions and strategy for your design language. I have zero cycles for this. Cadence social currency, for low engagement execute . Deliverables rehydrate the team or let's circle back to that those options are already baked in with this model teams were able to drive adoption and awareness we need to start advertising on social media circle back. Through the lens of face time.",
+    "Take five, punch the tree, and come back in here with a clear head those options are already baked in with this model ultimate measure of success and we need to crystallize a plan yet open door policy who's responsible for the ask for this request? what do you feel you would bring to the table if you were hired for this position. Wiggle room guerrilla marketing shelfware. Code feature creep can we parallel path lose client to 10:00 meeting hire the best manage expectations root-and-branch review.",
+    "Curate downselect tread it daily cc me on that due diligence, or close the loop. All hands on deck my supervisor didn't like the latest revision you gave me can you switch back to the first revision? ping me or game-plan, yet make it a priority, on this journey win-win. Our competitors are jumping the shark we need to build it so that it scales post launch future-proof can we align on lunch orders. Deliverables message the initiative.",
+    "Out of scope poop, so pre launch. I just wanted to give you a heads-up wiggle room cc me on that I have been doing some research this morning and we need to better, nor dog and pony show prioritize these line items so UX. Big data upstream selling circle back, in an ideal world. Get all your ducks in a row land it in region so code so one-sheet. Action item we need to think big start small and scale fast to energize our clients. Cta due diligence, for this vendor is incompetent nor forcing function and circle back and low engagement.",
+    "Move the needle a loss a day will keep you focus yet can you put it into a banner that is not alarming, but eye catching and not too giant or strategic fit, nor it is all exactly as i said, but i don't like it or streamline. We've bootstrapped the model. This proposal is a win-win situation which will cause a stellar paradigm shift, and produce a multi-fold increase in deliverables the horse is out of the barn usabiltiy, for going forward but going forward.",
+  ];
+  const [activeStep, setActiveStep] = useState(1);
+
+  const anchorProps = {
+    href: "",
+    onClick: (e) => e.preventDefault(),
+  };
+
+  return (
+    <div style={{ display: "flex", gap: "10rem" }}>
+      <div>
+        <h2 id="stepper-heading">Stepper</h2>
+        <Stepper
+          aria-labelledby="stepper-heading"
+          activeStep={activeStep}
+          onStepChange={setActiveStep}
+        >
+          <Stepper.Step {...anchorProps}>Start søknad</Stepper.Step>
+          <Stepper.Step {...anchorProps}>Personopplysninger</Stepper.Step>
+          <Stepper.Step {...anchorProps}>Saksopplysninger</Stepper.Step>
+          <Stepper.Step {...anchorProps}>
+            Søknadstekst for en veldig spesifikk prosess i NAV som jeg må skrive
+            om her i denne labelen
+          </Stepper.Step>
+          <Stepper.Step {...anchorProps}>Vedlegg</Stepper.Step>
+          <Stepper.Step {...anchorProps}>Oppsummering</Stepper.Step>
+          <Stepper.Step {...anchorProps}>Innsending</Stepper.Step>
+        </Stepper>
+      </div>
+      <BodyLong style={{ marginTop: "5rem" }}>
+        {storyTexts[activeStep]}
+      </BodyLong>
+    </div>
+  );
+};