@navikt/ds-react 2.4.1 → 2.4.2

package/cjs/list/List.js

@@ -49,13 +49,17 @@ exports.ListContext = (0, react_1.createContext)({
 exports.List = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, as: ListTag = "ul", title, description, headingTag = "h3" } = _a, rest = __rest(_a, ["children", "className", "as", "title", "description", "headingTag"]);
     const ariaId = (0, useId_1.useId)();
+    const { isNested } = (0, react_1.useContext)(ListItem_1.ListItemContext);
     return (react_1.default.createElement(exports.ListContext.Provider, { value: {
             listType: ListTag,
         } },
-        react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-list", className) }),
+        react_1.default.createElement("div", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-list", className, {
+                "navds-list--nested": isNested,
+            }) }),
             title && (react_1.default.createElement(typography_1.Heading, { id: `tittel-${ariaId}`, size: "small", as: headingTag }, title)),
             description && (react_1.default.createElement(typography_1.BodyShort, { id: `description-${ariaId}` }, description)),
             react_1.default.createElement(ListTag, { "aria-labelledby": title && `tittel-${ariaId}`, "aria-describedby": description && `description-${ariaId}` }, children))));
 });
 exports.List.Item = ListItem_1.ListItem;
+exports.List.componentType = "list";
 exports.default = exports.List;

package/cjs/list/ListItem.js

@@ -37,22 +37,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListItem = void 0;
+exports.ListItem = exports.ListItemContext = void 0;
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const typography_1 = require("../typography");
 const List_1 = require("./List");
+exports.ListItemContext = (0, react_1.createContext)({
+    isNested: false,
+});
 exports.ListItem = (0, react_1.forwardRef)((_a, ref) => {
+    var _b;
     var { className, children, title, icon } = _a, rest = __rest(_a, ["className", "children", "title", "icon"]);
     const { listType } = (0, react_1.useContext)(List_1.ListContext);
-    return (react_1.default.createElement("li", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-list__item", className) }),
-        listType === "ul" && (react_1.default.createElement("div", { className: (0, clsx_1.default)({
-                "navds-list__item-marker--icon": icon,
-                "navds-list__item-marker--bullet": !icon,
-            }) }, icon ? (icon) : (react_1.default.createElement("svg", { width: "6", height: "6", viewBox: "0 0 6 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, focusable: false, role: "img" },
-            react_1.default.createElement("rect", { width: "6", height: "6", rx: "3", fill: "currentColor" }))))),
-        react_1.default.createElement(typography_1.BodyShort, { as: "div", size: "small", className: "navds-list__item-content" },
-            title && (react_1.default.createElement(typography_1.Label, { as: "p", size: "small" }, title)),
-            children)));
+    if (listType === "ol" && icon) {
+        console.warn("<List />: Icon prop is not supported for ordered lists. Please remove the icon prop.");
+    }
+    const hasNestedList = (_b = react_1.default.Children.toArray(children)) === null || _b === void 0 ? void 0 : _b.some((child) => { var _a; return ((_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.componentType) === "list"; });
+    return (react_1.default.createElement(exports.ListItemContext.Provider, { value: { isNested: hasNestedList } },
+        react_1.default.createElement("li", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-list__item", className, {
+                "navds-list__item--noMargin": hasNestedList,
+            }) }),
+            listType === "ul" && (react_1.default.createElement("div", { className: (0, clsx_1.default)({
+                    "navds-list__item-marker--icon": icon,
+                    "navds-list__item-marker--bullet": !icon,
+                }) }, icon ? (icon) : (react_1.default.createElement("svg", { width: "6", height: "6", viewBox: "0 0 6 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, focusable: false, role: "img" },
+                react_1.default.createElement("rect", { width: "6", height: "6", rx: "3", fill: "currentColor" }))))),
+            react_1.default.createElement(typography_1.BodyShort, { as: "div", size: "small", className: "navds-list__item-content" },
+                title && (react_1.default.createElement(typography_1.Label, { as: "p", size: "small" }, title)),
+                children))));
 });
 exports.default = exports.ListItem;

package/esm/list/List.d.ts

@@ -21,8 +21,9 @@ export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     headingTag?: React.ElementType<any>;
 }
-interface ListComponent extends React.ForwardRefExoticComponent<ListProps> {
+export interface ListComponent extends React.ForwardRefExoticComponent<ListProps> {
     Item: ListItemType;
+    componentType: string;
 }
 interface ListContextProps {
     listType: "ul" | "ol";

package/esm/list/List.js

@@ -10,24 +10,28 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import cl from "clsx";
-import React, { createContext, forwardRef } from "react";
+import React, { createContext, forwardRef, useContext } from "react";
 import { BodyShort, Heading } from "../typography";
 import { useId } from "../util/useId";
-import { ListItem } from "./ListItem";
+import { ListItem, ListItemContext } from "./ListItem";
 export const ListContext = createContext({
     listType: "ul",
 });
 export const List = forwardRef((_a, ref) => {
     var { children, className, as: ListTag = "ul", title, description, headingTag = "h3" } = _a, rest = __rest(_a, ["children", "className", "as", "title", "description", "headingTag"]);
     const ariaId = useId();
+    const { isNested } = useContext(ListItemContext);
     return (React.createElement(ListContext.Provider, { value: {
             listType: ListTag,
         } },
-        React.createElement("div", Object.assign({}, rest, { ref: ref, className: cl("navds-list", className) }),
+        React.createElement("div", Object.assign({}, rest, { ref: ref, className: cl("navds-list", className, {
+                "navds-list--nested": isNested,
+            }) }),
             title && (React.createElement(Heading, { id: `tittel-${ariaId}`, size: "small", as: headingTag }, title)),
             description && (React.createElement(BodyShort, { id: `description-${ariaId}` }, description)),
             React.createElement(ListTag, { "aria-labelledby": title && `tittel-${ariaId}`, "aria-describedby": description && `description-${ariaId}` }, children))));
 });
 List.Item = ListItem;
+List.componentType = "list";
 export default List;
 //# sourceMappingURL=List.js.map

package/esm/list/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sourceRoot":"","sources":["../../src/list/List.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAgB,MAAM,YAAY,CAAC;AAgCpD,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAmB;IACzD,QAAQ,EAAE,IAAI;CACf,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,OAAO,GAAG,IAAI,EAClB,KAAK,EACL,WAAW,EACX,UAAU,GAAG,IAAI,OAElB,EADI,IAAI,cAPT,qEAQC,CADQ;IAIT,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IAEvB,OAAO,CACL,oBAAC,WAAW,CAAC,QAAQ,IACnB,KAAK,EAAE;YACL,QAAQ,EAAE,OAAO;SAClB;QAED,6CAAS,IAAI,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC;YAC5D,KAAK,IAAI,CACR,oBAAC,OAAO,IAAC,EAAE,EAAE,UAAU,MAAM,EAAE,EAAE,IAAI,EAAC,OAAO,EAAC,EAAE,EAAE,UAAU,IACzD,KAAK,CACE,CACX;YACA,WAAW,IAAI,CACd,oBAAC,SAAS,IAAC,EAAE,EAAE,eAAe,MAAM,EAAE,IAAG,WAAW,CAAa,CAClE;YACD,oBAAC,OAAO,uBACW,KAAK,IAAI,UAAU,MAAM,EAAE,sBAC1B,WAAW,IAAI,eAAe,MAAM,EAAE,IAEvD,QAAQ,CACD,CACN,CACe,CACxB,CAAC;AACJ,CAAC,CACe,CAAC;AAEnB,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;AAErB,eAAe,IAAI,CAAC"}
+{"version":3,"file":"List.js","sourceRoot":"","sources":["../../src/list/List.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAgB,MAAM,YAAY,CAAC;AAkCrE,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAmB;IACzD,QAAQ,EAAE,IAAI;CACf,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EAAE,OAAO,GAAG,IAAI,EAClB,KAAK,EACL,WAAW,EACX,UAAU,GAAG,IAAI,OAElB,EADI,IAAI,cAPT,qEAQC,CADQ;IAIT,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IAEvB,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAGjD,OAAO,CACL,oBAAC,WAAW,CAAC,QAAQ,IACnB,KAAK,EAAE;YACL,QAAQ,EAAE,OAAO;SAClB;QAED,6CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE;gBACrC,oBAAoB,EAAE,QAAQ;aAC/B,CAAC;YAED,KAAK,IAAI,CACR,oBAAC,OAAO,IAAC,EAAE,EAAE,UAAU,MAAM,EAAE,EAAE,IAAI,EAAC,OAAO,EAAC,EAAE,EAAE,UAAU,IACzD,KAAK,CACE,CACX;YACA,WAAW,IAAI,CACd,oBAAC,SAAS,IAAC,EAAE,EAAE,eAAe,MAAM,EAAE,IAAG,WAAW,CAAa,CAClE;YACD,oBAAC,OAAO,uBACW,KAAK,IAAI,UAAU,MAAM,EAAE,sBAC1B,WAAW,IAAI,eAAe,MAAM,EAAE,IAEvD,QAAQ,CACD,CACN,CACe,CACxB,CAAC;AACJ,CAAC,CACe,CAAC;AAEnB,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;AACrB,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC;AAE5B,eAAe,IAAI,CAAC"}

package/esm/list/ListItem.d.ts

@@ -12,5 +12,9 @@ export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
 }
 export interface ListItemType extends React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLLIElement>> {
 }
+interface ListItemContextProps {
+    isNested: boolean;
+}
+export declare const ListItemContext: React.Context<ListItemContextProps>;
 export declare const ListItem: ListItemType;
 export default ListItem;

package/esm/list/ListItem.js

@@ -10,21 +10,32 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import cl from "clsx";
-import React, { forwardRef, useContext } from "react";
+import React, { createContext, forwardRef, useContext } from "react";
 import { BodyShort, Label } from "../typography";
 import { ListContext } from "./List";
+export const ListItemContext = createContext({
+    isNested: false,
+});
 export const ListItem = forwardRef((_a, ref) => {
+    var _b;
     var { className, children, title, icon } = _a, rest = __rest(_a, ["className", "children", "title", "icon"]);
     const { listType } = useContext(ListContext);
-    return (React.createElement("li", Object.assign({}, rest, { ref: ref, className: cl("navds-list__item", className) }),
-        listType === "ul" && (React.createElement("div", { className: cl({
-                "navds-list__item-marker--icon": icon,
-                "navds-list__item-marker--bullet": !icon,
-            }) }, icon ? (icon) : (React.createElement("svg", { width: "6", height: "6", viewBox: "0 0 6 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, focusable: false, role: "img" },
-            React.createElement("rect", { width: "6", height: "6", rx: "3", fill: "currentColor" }))))),
-        React.createElement(BodyShort, { as: "div", size: "small", className: "navds-list__item-content" },
-            title && (React.createElement(Label, { as: "p", size: "small" }, title)),
-            children)));
+    if (listType === "ol" && icon) {
+        console.warn("<List />: Icon prop is not supported for ordered lists. Please remove the icon prop.");
+    }
+    const hasNestedList = (_b = React.Children.toArray(children)) === null || _b === void 0 ? void 0 : _b.some((child) => { var _a; return ((_a = child === null || child === void 0 ? void 0 : child.type) === null || _a === void 0 ? void 0 : _a.componentType) === "list"; });
+    return (React.createElement(ListItemContext.Provider, { value: { isNested: hasNestedList } },
+        React.createElement("li", Object.assign({}, rest, { ref: ref, className: cl("navds-list__item", className, {
+                "navds-list__item--noMargin": hasNestedList,
+            }) }),
+            listType === "ul" && (React.createElement("div", { className: cl({
+                    "navds-list__item-marker--icon": icon,
+                    "navds-list__item-marker--bullet": !icon,
+                }) }, icon ? (icon) : (React.createElement("svg", { width: "6", height: "6", viewBox: "0 0 6 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, focusable: false, role: "img" },
+                React.createElement("rect", { width: "6", height: "6", rx: "3", fill: "currentColor" }))))),
+            React.createElement(BodyShort, { as: "div", size: "small", className: "navds-list__item-content" },
+                title && (React.createElement(Label, { as: "p", size: "small" }, title)),
+                children))));
 });
 export default ListItem;
 //# sourceMappingURL=ListItem.js.map

package/esm/list/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../src/list/ListItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAsBrC,MAAM,CAAC,MAAM,QAAQ,GAAiB,UAAU,CAC9C,CAAC,EAA6C,EAAE,GAAG,EAAE,EAAE;QAAtD,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,OAAW,EAAN,IAAI,cAA3C,0CAA6C,CAAF;IAC1C,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAE7C,OAAO,CACL,4CAAQ,IAAI,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,CAAC;QACjE,QAAQ,KAAK,IAAI,IAAI,CACpB,6BACE,SAAS,EAAE,EAAE,CAAC;gBACZ,+BAA+B,EAAE,IAAI;gBACrC,iCAAiC,EAAE,CAAC,IAAI;aACzC,CAAC,IAED,IAAI,CAAC,CAAC,CAAC,CACN,IAAI,CACL,CAAC,CAAC,CAAC,CACF,6BACE,KAAK,EAAC,GAAG,EACT,MAAM,EAAC,GAAG,EACV,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,uBAElC,SAAS,EAAE,KAAK,EAChB,IAAI,EAAC,KAAK;YAEV,8BAAM,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,GAAG,CACpD,CACP,CACG,CACP;QAED,oBAAC,SAAS,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,0BAA0B;YAClE,KAAK,IAAI,CACR,oBAAC,KAAK,IAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,OAAO,IACvB,KAAK,CACA,CACT;YACA,QAAQ,CACC,CACT,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../src/list/ListItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AA0BrC,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAuB;IACjE,QAAQ,EAAE,KAAK;CAChB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAiB,UAAU,CAC9C,CAAC,EAA6C,EAAE,GAAG,EAAE,EAAE;;QAAtD,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,OAAW,EAAN,IAAI,cAA3C,0CAA6C,CAAF;IAC1C,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAE7C,IAAI,QAAQ,KAAK,IAAI,IAAI,IAAI,EAAE;QAC7B,OAAO,CAAC,IAAI,CACV,sFAAsF,CACvF,CAAC;KACH;IAED,MAAM,aAAa,GAAG,MAAA,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,0CAAE,IAAI,CAC1D,CAAC,KAAU,EAAE,EAAE,WAAC,OAAA,CAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,0CAAE,aAAa,MAAK,MAAM,CAAA,EAAA,CACtD,CAAC;IAEF,OAAO,CACL,oBAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,aAAa,EAAE;QAC1D,4CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE;gBAC3C,4BAA4B,EAAE,aAAa;aAC5C,CAAC;YAED,QAAQ,KAAK,IAAI,IAAI,CACpB,6BACE,SAAS,EAAE,EAAE,CAAC;oBACZ,+BAA+B,EAAE,IAAI;oBACrC,iCAAiC,EAAE,CAAC,IAAI;iBACzC,CAAC,IAED,IAAI,CAAC,CAAC,CAAC,CACN,IAAI,CACL,CAAC,CAAC,CAAC,CACF,6BACE,KAAK,EAAC,GAAG,EACT,MAAM,EAAC,GAAG,EACV,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,uBAElC,SAAS,EAAE,KAAK,EAChB,IAAI,EAAC,KAAK;gBAEV,8BAAM,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,GAAG,CACpD,CACP,CACG,CACP;YAED,oBAAC,SAAS,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,0BAA0B;gBAClE,KAAK,IAAI,CACR,oBAAC,KAAK,IAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,OAAO,IACvB,KAAK,CACA,CACT;gBACA,QAAQ,CACC,CACT,CACoB,CAC5B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.17.0",
-    "@navikt/ds-icons": "^2.4.1",
+    "@navikt/ds-icons": "^2.4.2",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

package/src/list/List.tsx

@@ -1,8 +1,8 @@
 import cl from "clsx";
-import React, { createContext, forwardRef } from "react";
+import React, { createContext, forwardRef, useContext } from "react";
 import { BodyShort, Heading } from "../typography";
 import { useId } from "../util/useId";
-import { ListItem, ListItemType } from "./ListItem";
+import { ListItem, ListItemContext, ListItemType } from "./ListItem";
 
 export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
@@ -26,8 +26,10 @@ export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
   headingTag?: React.ElementType<any>;
 }
 
-interface ListComponent extends React.ForwardRefExoticComponent<ListProps> {
+export interface ListComponent
+  extends React.ForwardRefExoticComponent<ListProps> {
   Item: ListItemType;
+  componentType: string;
 }
 
 interface ListContextProps {
@@ -53,13 +55,22 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
   ) => {
     const ariaId = useId();
 
+    const { isNested } = useContext(ListItemContext);
+
+
     return (
       <ListContext.Provider
         value={{
           listType: ListTag,
         }}
       >
-        <div {...rest} ref={ref} className={cl("navds-list", className)}>
+        <div
+          {...rest}
+          ref={ref}
+          className={cl("navds-list", className, {
+            "navds-list--nested": isNested,
+          })}
+        >
           {title && (
             <Heading id={`tittel-${ariaId}`} size="small" as={headingTag}>
               {title}
@@ -81,5 +92,6 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
 ) as ListComponent;
 
 List.Item = ListItem;
+List.componentType = "list";
 
 export default List;

package/src/list/ListItem.tsx

@@ -1,5 +1,5 @@
 import cl from "clsx";
-import React, { forwardRef, useContext } from "react";
+import React, { createContext, forwardRef, useContext } from "react";
 import { BodyShort, Label } from "../typography";
 import { ListContext } from "./List";
 
@@ -13,7 +13,7 @@ export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
    */
   title?: string;
   /*
-   * Icon to be used as list marker
+   * Icon to be used as list marker for unordered lists.
    */
   icon?: React.ReactNode;
 }
@@ -23,47 +23,73 @@ export interface ListItemType
     ListItemProps & React.RefAttributes<HTMLLIElement>
   > {}
 
+interface ListItemContextProps {
+  isNested: boolean;
+}
+
+export const ListItemContext = createContext<ListItemContextProps>({
+  isNested: false,
+});
+
 export const ListItem: ListItemType = forwardRef(
   ({ className, children, title, icon, ...rest }, ref) => {
     const { listType } = useContext(ListContext);
 
-    return (
-      <li {...rest} ref={ref} className={cl("navds-list__item", className)}>
-        {listType === "ul" && (
-          <div
-            className={cl({
-              "navds-list__item-marker--icon": icon,
-              "navds-list__item-marker--bullet": !icon,
-            })}
-          >
-            {icon ? (
-              icon
-            ) : (
-              <svg
-                width="6"
-                height="6"
-                viewBox="0 0 6 6"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                aria-hidden
-                focusable={false}
-                role="img"
-              >
-                <rect width="6" height="6" rx="3" fill="currentColor" />
-              </svg>
-            )}
-          </div>
-        )}
+    if (listType === "ol" && icon) {
+      console.warn(
+        "<List />: Icon prop is not supported for ordered lists. Please remove the icon prop."
+      );
+    }
 
-        <BodyShort as="div" size="small" className="navds-list__item-content">
-          {title && (
-            <Label as="p" size="small">
-              {title}
-            </Label>
+    const hasNestedList = React.Children.toArray(children)?.some(
+      (child: any) => child?.type?.componentType === "list"
+    );
+
+    return (
+      <ListItemContext.Provider value={{ isNested: hasNestedList }}>
+        <li
+          {...rest}
+          ref={ref}
+          className={cl("navds-list__item", className, {
+            "navds-list__item--noMargin": hasNestedList,
+          })}
+        >
+          {listType === "ul" && (
+            <div
+              className={cl({
+                "navds-list__item-marker--icon": icon,
+                "navds-list__item-marker--bullet": !icon,
+              })}
+            >
+              {icon ? (
+                icon
+              ) : (
+                <svg
+                  width="6"
+                  height="6"
+                  viewBox="0 0 6 6"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  aria-hidden
+                  focusable={false}
+                  role="img"
+                >
+                  <rect width="6" height="6" rx="3" fill="currentColor" />
+                </svg>
+              )}
+            </div>
           )}
-          {children}
-        </BodyShort>
-      </li>
+
+          <BodyShort as="div" size="small" className="navds-list__item-content">
+            {title && (
+              <Label as="p" size="small">
+                {title}
+              </Label>
+            )}
+            {children}
+          </BodyShort>
+        </li>
+      </ListItemContext.Provider>
     );
   }
 );

package/src/list/list.stories.tsx

@@ -117,3 +117,32 @@ export const Icons = {
     );
   },
 };
+
+export const Nested = {
+  render: () => {
+    return (
+      <List>
+        <List.Item title="Sed Do Eiusmod Tempor Incididunt">
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+          <List>
+            <List.Item title="Lorem Ipsum Dolor Sit Amet">
+              Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+            </List.Item>
+            <List.Item title="Consectetur Adipiscing Elit">
+              Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+            </List.Item>
+            <List.Item>
+              Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+            </List.Item>
+            <List.Item>
+              Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+            </List.Item>
+          </List>
+        </List.Item>
+        <List.Item>
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+      </List>
+    );
+  },
+};