@navikt/ds-react 2.3.1 → 2.4.0

package/_docs.json

@@ -3708,6 +3708,212 @@
       }
     }
   },
+  {
+    "filePath": "src/list/List.tsx",
+    "displayName": "List",
+    "props": {
+      "as": {
+        "defaultValue": {
+          "value": "\"ul\""
+        },
+        "description": "HTML list element to render",
+        "name": "as",
+        "parent": {
+          "fileName": "src/list/List.tsx",
+          "name": "ListProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/list/List.tsx",
+            "name": "ListProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"ul\" | \"ol\""
+        }
+      },
+      "title": {
+        "defaultValue": null,
+        "description": "List heading title",
+        "name": "title",
+        "parent": {
+          "fileName": "src/list/List.tsx",
+          "name": "ListProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/list/List.tsx",
+            "name": "ListProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "description": {
+        "defaultValue": null,
+        "description": "List heading description",
+        "name": "description",
+        "parent": {
+          "fileName": "src/list/List.tsx",
+          "name": "ListProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/list/List.tsx",
+            "name": "ListProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "headingTag": {
+        "defaultValue": {
+          "value": "\"h3\""
+        },
+        "description": "Allows setting a different HTML h-tag",
+        "name": "headingTag",
+        "parent": {
+          "fileName": "src/list/List.tsx",
+          "name": "ListProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/list/List.tsx",
+            "name": "ListProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "ElementType<any>"
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "",
+        "name": "className",
+        "parent": {
+          "fileName": "aksel/node_modules/@types/react/index.d.ts",
+          "name": "HTMLAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/index.d.ts",
+            "name": "HTMLAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      }
+    }
+  },
+  {
+    "filePath": "src/list/ListItem.tsx",
+    "displayName": "ListItem",
+    "props": {
+      "children": {
+        "defaultValue": null,
+        "description": "Content for description of the list item",
+        "name": "children",
+        "parent": {
+          "fileName": "src/list/ListItem.tsx",
+          "name": "ListItemProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/list/ListItem.tsx",
+            "name": "ListItemProps"
+          }
+        ],
+        "required": true,
+        "type": {
+          "name": "ReactNode"
+        }
+      },
+      "title": {
+        "defaultValue": null,
+        "description": "Title for the list item",
+        "name": "title",
+        "parent": {
+          "fileName": "src/list/ListItem.tsx",
+          "name": "ListItemProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/list/ListItem.tsx",
+            "name": "ListItemProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "icon": {
+        "defaultValue": null,
+        "description": "",
+        "name": "icon",
+        "parent": {
+          "fileName": "src/list/ListItem.tsx",
+          "name": "ListItemProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/list/ListItem.tsx",
+            "name": "ListItemProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "ReactNode"
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "",
+        "name": "className",
+        "parent": {
+          "fileName": "aksel/node_modules/@types/react/index.d.ts",
+          "name": "HTMLAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/index.d.ts",
+            "name": "HTMLAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "ref": {
+        "defaultValue": null,
+        "description": "",
+        "name": "ref",
+        "parent": {
+          "fileName": "aksel/node_modules/@types/react/index.d.ts",
+          "name": "RefAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/index.d.ts",
+            "name": "RefAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Ref<HTMLLIElement>"
+        }
+      }
+    }
+  },
   {
     "filePath": "src/loader/Loader.tsx",
     "displayName": "Loader",

package/cjs/index.js

@@ -16,28 +16,29 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./accordion"), exports);
 __exportStar(require("./alert"), exports);
-__exportStar(require("./provider"), exports);
 __exportStar(require("./button"), exports);
+__exportStar(require("./chat"), exports);
+__exportStar(require("./chips"), exports);
 __exportStar(require("./date"), exports);
 __exportStar(require("./form"), exports);
 __exportStar(require("./grid"), exports);
-__exportStar(require("./help-text"), exports);
 __exportStar(require("./guide-panel"), exports);
+__exportStar(require("./help-text"), exports);
 __exportStar(require("./link"), exports);
 __exportStar(require("./link-panel"), exports);
+__exportStar(require("./list"), exports);
 __exportStar(require("./loader"), exports);
 __exportStar(require("./modal"), exports);
 __exportStar(require("./pagination"), exports);
 __exportStar(require("./panel"), exports);
 __exportStar(require("./popover"), exports);
+__exportStar(require("./provider"), exports);
 __exportStar(require("./read-more"), exports);
-__exportStar(require("./chat"), exports);
-__exportStar(require("./chips"), exports);
 __exportStar(require("./stepper"), exports);
-__exportStar(require("./tag"), exports);
-__exportStar(require("./toggle-group"), exports);
 __exportStar(require("./table"), exports);
 __exportStar(require("./tabs"), exports);
+__exportStar(require("./tag"), exports);
+__exportStar(require("./toggle-group"), exports);
 __exportStar(require("./tooltip"), exports);
 __exportStar(require("./typography"), exports);
 __exportStar(require("./util"), exports);

package/cjs/list/List.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = exports.ListContext = void 0;
+const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
+const typography_1 = require("../typography");
+const useId_1 = require("../util/useId");
+const ListItem_1 = require("./ListItem");
+exports.ListContext = (0, react_1.createContext)({
+    listType: "ul",
+});
+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)();
+    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) }),
+            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.default = exports.List;

package/cjs/list/ListItem.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListItem = 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.ListItem = (0, react_1.forwardRef)((_a, ref) => {
+    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)));
+});
+exports.default = exports.ListItem;

package/cjs/list/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = void 0;
+var List_1 = require("./List");
+Object.defineProperty(exports, "List", { enumerable: true, get: function () { return __importDefault(List_1).default; } });

package/cjs/list/package.json

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

package/esm/index.d.ts

@@ -1,27 +1,28 @@
 export * from "./accordion";
 export * from "./alert";
-export * from "./provider";
 export * from "./button";
+export * from "./chat";
+export * from "./chips";
 export * from "./date";
 export * from "./form";
 export * from "./grid";
-export * from "./help-text";
 export * from "./guide-panel";
+export * from "./help-text";
 export * from "./link";
 export * from "./link-panel";
+export * from "./list";
 export * from "./loader";
 export * from "./modal";
 export * from "./pagination";
 export * from "./panel";
 export * from "./popover";
+export * from "./provider";
 export * from "./read-more";
-export * from "./chat";
-export * from "./chips";
 export * from "./stepper";
-export * from "./tag";
-export * from "./toggle-group";
 export * from "./table";
 export * from "./tabs";
+export * from "./tag";
+export * from "./toggle-group";
 export * from "./tooltip";
 export * from "./typography";
 export * from "./util";

package/esm/index.js

@@ -1,27 +1,28 @@
 export * from "./accordion";
 export * from "./alert";
-export * from "./provider";
 export * from "./button";
+export * from "./chat";
+export * from "./chips";
 export * from "./date";
 export * from "./form";
 export * from "./grid";
-export * from "./help-text";
 export * from "./guide-panel";
+export * from "./help-text";
 export * from "./link";
 export * from "./link-panel";
+export * from "./list";
 export * from "./loader";
 export * from "./modal";
 export * from "./pagination";
 export * from "./panel";
 export * from "./popover";
+export * from "./provider";
 export * from "./read-more";
-export * from "./chat";
-export * from "./chips";
 export * from "./stepper";
-export * from "./tag";
-export * from "./toggle-group";
 export * from "./table";
 export * from "./tabs";
+export * from "./tag";
+export * from "./toggle-group";
 export * from "./tooltip";
 export * from "./typography";
 export * from "./util";

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC"}

package/esm/list/List.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import { ListItemType } from "./ListItem";
+export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * HTML list element to render
+     * @default "ul"
+     */
+    as?: "ul" | "ol";
+    /**
+     * List heading title
+     */
+    title?: string;
+    /**
+     * List heading description
+     */
+    description?: string;
+    /**
+     * Allows setting a different HTML h-tag
+     * @default "h3"
+     */
+    headingTag?: React.ElementType<any>;
+}
+interface ListComponent extends React.ForwardRefExoticComponent<ListProps> {
+    Item: ListItemType;
+}
+interface ListContextProps {
+    listType: "ul" | "ol";
+}
+export declare const ListContext: React.Context<ListContextProps>;
+export declare const List: ListComponent;
+export default List;

package/esm/list/List.js

@@ -0,0 +1,33 @@
+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 "clsx";
+import React, { createContext, forwardRef } from "react";
+import { BodyShort, Heading } from "../typography";
+import { useId } from "../util/useId";
+import { ListItem } 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();
+    return (React.createElement(ListContext.Provider, { value: {
+            listType: ListTag,
+        } },
+        React.createElement("div", Object.assign({}, rest, { ref: ref, className: cl("navds-list", className) }),
+            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;
+export default List;
+//# sourceMappingURL=List.js.map

package/esm/list/List.js.map

@@ -0,0 +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"}

package/esm/list/ListItem.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
+    /**
+     * Content for description of the list item
+     */
+    children: React.ReactNode;
+    /**
+     * Title for the list item
+     */
+    title?: string;
+    icon?: React.ReactNode;
+}
+export interface ListItemType extends React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLLIElement>> {
+}
+export declare const ListItem: ListItemType;
+export default ListItem;

package/esm/list/ListItem.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 "clsx";
+import React, { forwardRef, useContext } from "react";
+import { BodyShort, Label } from "../typography";
+import { ListContext } from "./List";
+export const ListItem = forwardRef((_a, ref) => {
+    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)));
+});
+export default ListItem;
+//# sourceMappingURL=ListItem.js.map

package/esm/list/ListItem.js.map

@@ -0,0 +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"}

package/esm/list/index.d.ts

@@ -0,0 +1,2 @@
+export { default as List } from "./List";
+export type { ListProps } from "./List";

package/esm/list/index.js

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

package/esm/list/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "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.3.1",
+    "@navikt/ds-icons": "^2.4.0",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

package/src/index.ts

@@ -1,27 +1,28 @@
 export * from "./accordion";
 export * from "./alert";
-export * from "./provider";
 export * from "./button";
+export * from "./chat";
+export * from "./chips";
 export * from "./date";
 export * from "./form";
 export * from "./grid";
-export * from "./help-text";
 export * from "./guide-panel";
+export * from "./help-text";
 export * from "./link";
 export * from "./link-panel";
+export * from "./list";
 export * from "./loader";
 export * from "./modal";
 export * from "./pagination";
 export * from "./panel";
 export * from "./popover";
+export * from "./provider";
 export * from "./read-more";
-export * from "./chat";
-export * from "./chips";
 export * from "./stepper";
-export * from "./tag";
-export * from "./toggle-group";
 export * from "./table";
 export * from "./tabs";
+export * from "./tag";
+export * from "./toggle-group";
 export * from "./tooltip";
 export * from "./typography";
 export * from "./util";

package/src/list/List.tsx

@@ -0,0 +1,85 @@
+import cl from "clsx";
+import React, { createContext, forwardRef } from "react";
+import { BodyShort, Heading } from "../typography";
+import { useId } from "../util/useId";
+import { ListItem, ListItemType } from "./ListItem";
+
+export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /**
+   * HTML list element to render
+   * @default "ul"
+   */
+  as?: "ul" | "ol";
+  /**
+   * List heading title
+   */
+  title?: string;
+  /**
+   * List heading description
+   */
+  description?: string;
+  /**
+   * Allows setting a different HTML h-tag
+   * @default "h3"
+   */
+  headingTag?: React.ElementType<any>;
+}
+
+interface ListComponent extends React.ForwardRefExoticComponent<ListProps> {
+  Item: ListItemType;
+}
+
+interface ListContextProps {
+  listType: "ul" | "ol";
+}
+
+export const ListContext = createContext<ListContextProps>({
+  listType: "ul",
+});
+
+export const List = forwardRef<HTMLDivElement, ListProps>(
+  (
+    {
+      children,
+      className,
+      as: ListTag = "ul",
+      title,
+      description,
+      headingTag = "h3",
+      ...rest
+    },
+    ref
+  ) => {
+    const ariaId = useId();
+
+    return (
+      <ListContext.Provider
+        value={{
+          listType: ListTag,
+        }}
+      >
+        <div {...rest} ref={ref} className={cl("navds-list", className)}>
+          {title && (
+            <Heading id={`tittel-${ariaId}`} size="small" as={headingTag}>
+              {title}
+            </Heading>
+          )}
+          {description && (
+            <BodyShort id={`description-${ariaId}`}>{description}</BodyShort>
+          )}
+          <ListTag
+            aria-labelledby={title && `tittel-${ariaId}`}
+            aria-describedby={description && `description-${ariaId}`}
+          >
+            {children}
+          </ListTag>
+        </div>
+      </ListContext.Provider>
+    );
+  }
+) as ListComponent;
+
+List.Item = ListItem;
+
+export default List;

package/src/list/ListItem.tsx

@@ -0,0 +1,71 @@
+import cl from "clsx";
+import React, { forwardRef, useContext } from "react";
+import { BodyShort, Label } from "../typography";
+import { ListContext } from "./List";
+
+export interface ListItemProps extends React.HTMLAttributes<HTMLLIElement> {
+  /**
+   * Content for description of the list item
+   */
+  children: React.ReactNode;
+  /**
+   * Title for the list item
+   */
+  title?: string;
+  /*
+   * Icon to be used as list marker
+   */
+  icon?: React.ReactNode;
+}
+
+export interface ListItemType
+  extends React.ForwardRefExoticComponent<
+    ListItemProps & React.RefAttributes<HTMLLIElement>
+  > {}
+
+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>
+        )}
+
+        <BodyShort as="div" size="small" className="navds-list__item-content">
+          {title && (
+            <Label as="p" size="small">
+              {title}
+            </Label>
+          )}
+          {children}
+        </BodyShort>
+      </li>
+    );
+  }
+);
+
+export default ListItem;

package/src/list/index.ts

@@ -0,0 +1,2 @@
+export { default as List } from "./List";
+export type { ListProps } from "./List";

package/src/list/list.stories.tsx

@@ -0,0 +1,119 @@
+import {
+  BabyChangingRoom,
+  Braille,
+  Cognition,
+  Refresh,
+} from "@navikt/ds-icons";
+import { Meta } from "@storybook/react";
+import React from "react";
+import { List } from "..";
+
+export default {
+  title: "ds-react/List",
+  component: List,
+} as Meta;
+
+export const Default = {
+  render: () => {
+    return (
+      <List>
+        <List.Item title="Lorem Ipsum Dolor Sit Amet">
+          Lorem Ipsum Dolor Sit Amet
+        </List.Item>
+        <List.Item title="Consectetur Adipiscing Elit">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Sed Do Eiusmod Tempor Incididunt">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+      </List>
+    );
+  },
+};
+
+export const Ordered = {
+  render: () => {
+    return (
+      <List as="ol">
+        <List.Item title="Lorem Ipsum Dolor Sit Amet">
+          Lorem Ipsum Dolor Sit Amet
+        </List.Item>
+        <List.Item title="Consectetur Adipiscing Elit">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Sed Do Eiusmod Tempor Incididunt">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Ut Labore Et Dolore Magna Aliqua">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Enim Ad Minim Veniam">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Quis Nostrud Exercitation Ullamco">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Laboris Nisi Ut Aliquip Ex Ea Commodo">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Duis Aute Irure Dolor In Reprehenderit">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Voluptate Velit Esse Cillum Dolore">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+        <List.Item title="Eu Fugiat Nulla Pariatur">
+          Beskrivelse på punktet i lista. Prøv å hold den kort og konsis.
+        </List.Item>
+      </List>
+    );
+  },
+};
+
+export const WithHeading = {
+  render: () => {
+    return (
+      <List
+        title="Lorem Ipsum Dolor Sit Amet"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel risus volutpat."
+      >
+        <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 title="Sed Do Eiusmod Tempor Incididunt">
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+      </List>
+    );
+  },
+};
+
+export const Icons = {
+  render: () => {
+    return (
+      <List>
+        <List.Item
+          title="Lorem Ipsum Dolor Sit Amet"
+          icon={<Braille aria-hidden />}
+        >
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+        <List.Item
+          title="Consectetur Adipiscing Elit"
+          icon={<Cognition aria-hidden />}
+        >
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+        <List.Item icon={<BabyChangingRoom aria-hidden />}>
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+        <List.Item icon={<Refresh aria-hidden />}>
+          Beskrivelsen på punkter er nærmere forklart <a href="/">her</a>
+        </List.Item>
+      </List>
+    );
+  },
+};