@navikt/ds-react 4.1.7 → 4.2.0

package/_docs.json

@@ -768,7 +768,7 @@
       },
       "backgroundColor": {
         "defaultValue": null,
-        "description": "Background color on bubble",
+        "description": "Background color on bubble\n@deprecated Use `variant` on Chat instead",
         "name": "backgroundColor",
         "parent": {
           "fileName": "src/chat/Bubble.tsx",
@@ -907,7 +907,7 @@
       },
       "avatar": {
         "defaultValue": null,
-        "description": "Avatar for messenger. Regular text for initials works to",
+        "description": "Avatar for messenger. Regular text for initials works too, but it will be hidden for screen readers.",
         "name": "avatar",
         "parent": {
           "fileName": "src/chat/Chat.tsx",
@@ -919,14 +919,35 @@
             "name": "ChatProps"
           }
         ],
-        "required": true,
+        "required": false,
         "type": {
           "name": "ReactNode"
         }
       },
+      "variant": {
+        "defaultValue": {
+          "value": "\"subtle\""
+        },
+        "description": "Changes background color on avatar and bubbles.\nAvoid using the same background as the surface behind Chat.",
+        "name": "variant",
+        "parent": {
+          "fileName": "src/chat/Chat.tsx",
+          "name": "ChatProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/chat/Chat.tsx",
+            "name": "ChatProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"subtle\" | \"info\" | \"neutral\""
+        }
+      },
       "backgroundColor": {
         "defaultValue": null,
-        "description": "Background color on bubbles",
+        "description": "Background color on bubbles\n@deprecated Use `variant` instead",
         "name": "backgroundColor",
         "parent": {
           "fileName": "src/chat/Chat.tsx",
@@ -945,7 +966,7 @@
       },
       "avatarBgColor": {
         "defaultValue": null,
-        "description": "Background color for avatar",
+        "description": "Background color for avatar\n@deprecated Use `variant` instead",
         "name": "avatarBgColor",
         "parent": {
           "fileName": "src/chat/Chat.tsx",
@@ -966,7 +987,7 @@
         "defaultValue": {
           "value": "\"left\""
         },
-        "description": "Positions avatar and Bubbles",
+        "description": "Positions avatar and bubbles",
         "name": "position",
         "parent": {
           "fileName": "src/chat/Chat.tsx",
@@ -985,7 +1006,7 @@
       },
       "toptextPosition": {
         "defaultValue": {
-          "value": "Same as chat"
+          "value": "Same as position"
         },
         "description": "Hoizontal position of toptext",
         "name": "toptextPosition",
@@ -1004,6 +1025,27 @@
           "name": "\"left\" | \"right\""
         }
       },
+      "size": {
+        "defaultValue": {
+          "value": "\"medium\""
+        },
+        "description": "Affects padding and font size in bubbles",
+        "name": "size",
+        "parent": {
+          "fileName": "src/chat/Chat.tsx",
+          "name": "ChatProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/chat/Chat.tsx",
+            "name": "ChatProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"medium\" | \"small\""
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",
@@ -13622,6 +13664,25 @@
           "name": "ReactNode"
         }
       },
+      "href": {
+        "defaultValue": null,
+        "description": "Link to errormessage",
+        "name": "href",
+        "parent": {
+          "fileName": "src/form/error-summary/ErrorSummaryItem.tsx",
+          "name": "ErrorSummaryItemProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/form/error-summary/ErrorSummaryItem.tsx",
+            "name": "ErrorSummaryItemProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",

package/cjs/chat/Bubble.js

@@ -43,9 +43,10 @@ const typography_1 = require("../typography");
 const Bubble = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, name, timestamp, backgroundColor, toptextPosition } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "backgroundColor", "toptextPosition"]);
     return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, clsx_1.default)("navds-chat__bubble", className), style: { backgroundColor: backgroundColor } }, rest),
-        (timestamp || name) && (react_1.default.createElement("div", { className: (0, clsx_1.default)(`navds-chat__top-text`, toptextPosition && `navds-chat__top-text--${toptextPosition}`) },
-            name && react_1.default.createElement(typography_1.Detail, { className: "navds-chat__name" }, name),
-            timestamp && (react_1.default.createElement(typography_1.Detail, { className: "navds-chat__timestamp" }, timestamp)))),
+        (timestamp || name) && (react_1.default.createElement("h3", { className: (0, clsx_1.default)(`navds-chat__top-text`, toptextPosition && `navds-chat__top-text--${toptextPosition}`) },
+            name && react_1.default.createElement(typography_1.Detail, { as: "span" }, name),
+            name && timestamp && (react_1.default.createElement(typography_1.Detail, { as: "span", "aria-hidden": true }, "\u2022")),
+            timestamp && react_1.default.createElement(typography_1.Detail, { as: "span" }, timestamp))),
         children));
 });
 exports.default = Bubble;

package/cjs/chat/Chat.js

@@ -37,34 +37,37 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Chat = void 0;
+exports.Chat = exports.SIZES = exports.POSITIONS = void 0;
 const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
 const Bubble_1 = __importDefault(require("./Bubble"));
 const typography_1 = require("../typography");
+exports.POSITIONS = ["left", "right"];
+exports.SIZES = ["medium", "small"];
 /**
- * A component for displaying chat messages.
+ * A component for communicating dialogs between two parties.
  *
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/chat)
  * @see 🏷️ {@link ChatProps}
  *
  * @example
  * ```jsx
- * <Chat>
- *   <Chat.Bubble avatar="A" name="Alice">Hello!</Chat.Bubble>
+ * <Chat avatar="A" name="Alice" timestamp="01.01.21 14:00">
+ *   <Chat.Bubble>Hello!</Chat.Bubble>
+ *   <Chat.Bubble>How can I help you?</Chat.Bubble>
  * </Chat>
- * <Chat>
- *   <Chat.Bubble avatar="B" name="Bob">Hi there!</Chat.Bubble>
+ * <Chat avatar="B" name="Bob" timestamp="01.01.21 14:01" position="right">
+ *   <Chat.Bubble>Hi there!</Chat.Bubble>
  * </Chat>
  * ```
  */
 exports.Chat = (0, react_1.forwardRef)((_a, ref) => {
-    var { children, className, name, timestamp, avatar, position = "left", avatarBgColor, backgroundColor, toptextPosition } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "avatar", "position", "avatarBgColor", "backgroundColor", "toptextPosition"]);
-    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, clsx_1.default)("navds-chat", className, `navds-chat--${position} navds-chat--top-text-${toptextPosition !== null && toptextPosition !== void 0 ? toptextPosition : position}`) }, rest),
-        react_1.default.createElement(typography_1.BodyShort, { as: "div", className: "navds-chat__avatar", style: { backgroundColor: avatarBgColor } }, avatar),
+    var { children, className, name, timestamp, avatar, position = "left", variant = "subtle", avatarBgColor, backgroundColor, toptextPosition, size = "medium" } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "avatar", "position", "variant", "avatarBgColor", "backgroundColor", "toptextPosition", "size"]);
+    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, clsx_1.default)("navds-chat", className, `navds-chat--${position}`, `navds-chat--top-text-${toptextPosition !== null && toptextPosition !== void 0 ? toptextPosition : position}`, `navds-chat--${size}`, `navds-chat--${variant}`) }, rest),
+        avatar && (react_1.default.createElement("div", { className: "navds-chat__avatar", "aria-hidden": true, style: { backgroundColor: avatarBgColor } }, avatar)),
         react_1.default.createElement("ol", { className: "navds-chat__bubble-wrapper" }, react_1.default.Children.map(children, (child, i) => {
             if (react_1.default.isValidElement(child)) {
-                return (react_1.default.createElement(typography_1.BodyLong, { as: "li" }, react_1.default.cloneElement(child, Object.assign({ name: name && i === 0 ? name : undefined, timestamp: timestamp && i === 0 ? timestamp : undefined, backgroundColor }, child.props))));
+                return (react_1.default.createElement(typography_1.BodyLong, { as: "li", size: size }, react_1.default.cloneElement(child, Object.assign({ name: name && i === 0 ? name : undefined, timestamp: timestamp && i === 0 ? timestamp : undefined, backgroundColor }, child.props))));
             }
         }))));
 });

package/esm/chat/Bubble.d.ts

@@ -14,6 +14,7 @@ export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
     timestamp?: string;
     /**
      * Background color on bubble
+     * @deprecated Use `variant` on Chat instead
      */
     backgroundColor?: string;
     /**

package/esm/chat/Bubble.js

@@ -15,9 +15,10 @@ import { Detail } from "../typography";
 const Bubble = forwardRef((_a, ref) => {
     var { children, className, name, timestamp, backgroundColor, toptextPosition } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "backgroundColor", "toptextPosition"]);
     return (React.createElement("div", Object.assign({ ref: ref, className: cl("navds-chat__bubble", className), style: { backgroundColor: backgroundColor } }, rest),
-        (timestamp || name) && (React.createElement("div", { className: cl(`navds-chat__top-text`, toptextPosition && `navds-chat__top-text--${toptextPosition}`) },
-            name && React.createElement(Detail, { className: "navds-chat__name" }, name),
-            timestamp && (React.createElement(Detail, { className: "navds-chat__timestamp" }, timestamp)))),
+        (timestamp || name) && (React.createElement("h3", { className: cl(`navds-chat__top-text`, toptextPosition && `navds-chat__top-text--${toptextPosition}`) },
+            name && React.createElement(Detail, { as: "span" }, name),
+            name && timestamp && (React.createElement(Detail, { as: "span", "aria-hidden": true }, "\u2022")),
+            timestamp && React.createElement(Detail, { as: "span" }, timestamp))),
         children));
 });
 export default Bubble;

package/esm/chat/Bubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bubble.js","sourceRoot":"","sources":["../../src/chat/Bubble.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAyBvC,MAAM,MAAM,GAAG,UAAU,CACvB,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,SAAS,EACT,eAAe,EACf,eAAe,OAEhB,EADI,IAAI,cAPT,oFAQC,CADQ;IAIT,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,oBAAoB,EAAE,SAAS,CAAC,EAC9C,KAAK,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,IACvC,IAAI;QAEP,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,CACtB,6BACE,SAAS,EAAE,EAAE,CACX,sBAAsB,EACtB,eAAe,IAAI,yBAAyB,eAAe,EAAE,CAC9D;YAEA,IAAI,IAAI,oBAAC,MAAM,IAAC,SAAS,EAAC,kBAAkB,IAAE,IAAI,CAAU;YAC5D,SAAS,IAAI,CACZ,oBAAC,MAAM,IAAC,SAAS,EAAC,uBAAuB,IAAE,SAAS,CAAU,CAC/D,CACG,CACP;QACA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Bubble.js","sourceRoot":"","sources":["../../src/chat/Bubble.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AA0BvC,MAAM,MAAM,GAAG,UAAU,CACvB,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,SAAS,EACT,eAAe,EACf,eAAe,OAEhB,EADI,IAAI,cAPT,oFAQC,CADQ;IAIT,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,oBAAoB,EAAE,SAAS,CAAC,EAC9C,KAAK,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,IACvC,IAAI;QAEP,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,CACtB,4BACE,SAAS,EAAE,EAAE,CACX,sBAAsB,EACtB,eAAe,IAAI,yBAAyB,eAAe,EAAE,CAC9D;YAEA,IAAI,IAAI,oBAAC,MAAM,IAAC,EAAE,EAAC,MAAM,IAAE,IAAI,CAAU;YACzC,IAAI,IAAI,SAAS,IAAI,CACpB,oBAAC,MAAM,IAAC,EAAE,EAAC,MAAM,kCAER,CACV;YACA,SAAS,IAAI,oBAAC,MAAM,IAAC,EAAE,EAAC,MAAM,IAAE,SAAS,CAAU,CACjD,CACN;QACA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/esm/chat/Chat.d.ts

@@ -1,5 +1,7 @@
 import React, { HTMLAttributes } from "react";
-import { BubbleProps } from "./Bubble";
+import Bubble from "./Bubble";
+export declare const POSITIONS: readonly ["left", "right"];
+export declare const SIZES: readonly ["medium", "small"];
 export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Children of type <Chat.Bubble />
@@ -14,47 +16,61 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
      */
     timestamp?: string;
     /**
-     * Avatar for messenger. Regular text for initials works to
+     * Avatar for messenger. Regular text for initials works too, but it will be hidden for screen readers.
      */
-    avatar: React.ReactNode;
+    avatar?: React.ReactNode;
+    /**
+     * Changes background color on avatar and bubbles.
+     * Avoid using the same background as the surface behind Chat.
+     * @default "subtle"
+     */
+    variant?: "subtle" | "info" | "neutral";
     /**
      * Background color on bubbles
+     * @deprecated Use `variant` instead
      */
     backgroundColor?: string;
     /**
      * Background color for avatar
+     * @deprecated Use `variant` instead
      */
     avatarBgColor?: string;
     /**
-     * Positions avatar and Bubbles
+     * Positions avatar and bubbles
      * @default "left"
      */
-    position?: "left" | "right";
+    position?: (typeof POSITIONS)[number];
     /**
      * Hoizontal position of toptext
-     * @default Same as chat
+     * @default Same as position
+     */
+    toptextPosition?: (typeof POSITIONS)[number];
+    /**
+     * Affects padding and font size in bubbles
+     * @default "medium"
      */
-    toptextPosition?: "left" | "right";
+    size?: (typeof SIZES)[number];
 }
 interface ChatComponent extends React.ForwardRefExoticComponent<ChatProps & React.RefAttributes<HTMLDivElement>> {
     /**
      * @see 🏷️ {@link BubbleProps}
      */
-    Bubble: React.ForwardRefExoticComponent<BubbleProps & React.RefAttributes<HTMLDivElement>>;
+    Bubble: typeof Bubble;
 }
 /**
- * A component for displaying chat messages.
+ * A component for communicating dialogs between two parties.
  *
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/chat)
  * @see 🏷️ {@link ChatProps}
  *
  * @example
  * ```jsx
- * <Chat>
- *   <Chat.Bubble avatar="A" name="Alice">Hello!</Chat.Bubble>
+ * <Chat avatar="A" name="Alice" timestamp="01.01.21 14:00">
+ *   <Chat.Bubble>Hello!</Chat.Bubble>
+ *   <Chat.Bubble>How can I help you?</Chat.Bubble>
  * </Chat>
- * <Chat>
- *   <Chat.Bubble avatar="B" name="Bob">Hi there!</Chat.Bubble>
+ * <Chat avatar="B" name="Bob" timestamp="01.01.21 14:01" position="right">
+ *   <Chat.Bubble>Hi there!</Chat.Bubble>
  * </Chat>
  * ```
  */

package/esm/chat/Chat.js

@@ -12,30 +12,33 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef } from "react";
 import cl from "clsx";
 import Bubble from "./Bubble";
-import { BodyLong, BodyShort } from "../typography";
+import { BodyLong } from "../typography";
+export const POSITIONS = ["left", "right"];
+export const SIZES = ["medium", "small"];
 /**
- * A component for displaying chat messages.
+ * A component for communicating dialogs between two parties.
  *
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/chat)
  * @see 🏷️ {@link ChatProps}
  *
  * @example
  * ```jsx
- * <Chat>
- *   <Chat.Bubble avatar="A" name="Alice">Hello!</Chat.Bubble>
+ * <Chat avatar="A" name="Alice" timestamp="01.01.21 14:00">
+ *   <Chat.Bubble>Hello!</Chat.Bubble>
+ *   <Chat.Bubble>How can I help you?</Chat.Bubble>
  * </Chat>
- * <Chat>
- *   <Chat.Bubble avatar="B" name="Bob">Hi there!</Chat.Bubble>
+ * <Chat avatar="B" name="Bob" timestamp="01.01.21 14:01" position="right">
+ *   <Chat.Bubble>Hi there!</Chat.Bubble>
  * </Chat>
  * ```
  */
 export const Chat = forwardRef((_a, ref) => {
-    var { children, className, name, timestamp, avatar, position = "left", avatarBgColor, backgroundColor, toptextPosition } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "avatar", "position", "avatarBgColor", "backgroundColor", "toptextPosition"]);
-    return (React.createElement("div", Object.assign({ ref: ref, className: cl("navds-chat", className, `navds-chat--${position} navds-chat--top-text-${toptextPosition !== null && toptextPosition !== void 0 ? toptextPosition : position}`) }, rest),
-        React.createElement(BodyShort, { as: "div", className: "navds-chat__avatar", style: { backgroundColor: avatarBgColor } }, avatar),
+    var { children, className, name, timestamp, avatar, position = "left", variant = "subtle", avatarBgColor, backgroundColor, toptextPosition, size = "medium" } = _a, rest = __rest(_a, ["children", "className", "name", "timestamp", "avatar", "position", "variant", "avatarBgColor", "backgroundColor", "toptextPosition", "size"]);
+    return (React.createElement("div", Object.assign({ ref: ref, className: cl("navds-chat", className, `navds-chat--${position}`, `navds-chat--top-text-${toptextPosition !== null && toptextPosition !== void 0 ? toptextPosition : position}`, `navds-chat--${size}`, `navds-chat--${variant}`) }, rest),
+        avatar && (React.createElement("div", { className: "navds-chat__avatar", "aria-hidden": true, style: { backgroundColor: avatarBgColor } }, avatar)),
         React.createElement("ol", { className: "navds-chat__bubble-wrapper" }, React.Children.map(children, (child, i) => {
             if (React.isValidElement(child)) {
-                return (React.createElement(BodyLong, { as: "li" }, React.cloneElement(child, Object.assign({ name: name && i === 0 ? name : undefined, timestamp: timestamp && i === 0 ? timestamp : undefined, backgroundColor }, child.props))));
+                return (React.createElement(BodyLong, { as: "li", size: size }, React.cloneElement(child, Object.assign({ name: name && i === 0 ? name : undefined, timestamp: timestamp && i === 0 ? timestamp : undefined, backgroundColor }, child.props))));
             }
         }))));
 });

package/esm/chat/Chat.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chat.js","sourceRoot":"","sources":["../../src/chat/Chat.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,MAAuB,MAAM,UAAU,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAmDpD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,EAWC,EACD,GAAG,EACH,EAAE;QAbF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,SAAS,EACT,MAAM,EACN,QAAQ,GAAG,MAAM,EACjB,aAAa,EACb,eAAe,EACf,eAAe,OAEhB,EADI,IAAI,cAVT,2HAWC,CADQ;IAIT,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,YAAY,EACZ,SAAS,EACT,eAAe,QAAQ,yBACrB,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,QACrB,EAAE,CACH,IACG,IAAI;QAER,oBAAC,SAAS,IACR,EAAE,EAAC,KAAK,EACR,SAAS,EAAC,oBAAoB,EAC9B,KAAK,EAAE,EAAE,eAAe,EAAE,aAAa,EAAE,IAExC,MAAM,CACG;QACZ,4BAAI,SAAS,EAAC,4BAA4B,IACvC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;YACzC,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;gBAC/B,OAAO,CACL,oBAAC,QAAQ,IAAC,EAAE,EAAC,IAAI,IACd,KAAK,CAAC,YAAY,CAAC,KAAK,kBACvB,IAAI,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACxC,SAAS,EAAE,SAAS,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACvD,eAAe,IACZ,KAAK,CAAC,KAAK,EACd,CACO,CACZ,CAAC;aACH;QACH,CAAC,CAAC,CACC,CACD,CACP,CAAC;AACJ,CAAC,CACe,CAAC;AAEnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;AAErB,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Chat.js","sourceRoot":"","sources":["../../src/chat/Chat.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,MAAM,EAAE,OAAO,CAAU,CAAC;AACpD,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU,CAAC;AA8DlD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CACE,EAaY,EACZ,GAAG,EACH,EAAE;QAfF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,SAAS,EACT,MAAM,EACN,QAAQ,GAAG,MAAM,EACjB,OAAO,GAAG,QAAQ,EAClB,aAAa,EACb,eAAe,EACf,eAAe,EACf,IAAI,GAAG,QAAQ,OAEL,EADP,IAAI,cAZT,8IAaC,CADQ;IAGN,OAAA,CACH,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,YAAY,EACZ,SAAS,EACT,eAAe,QAAQ,EAAE,EACzB,wBAAwB,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,QAAQ,EAAE,EACrD,eAAe,IAAI,EAAE,EACrB,eAAe,OAAO,EAAE,CACzB,IACG,IAAI;QAEP,MAAM,IAAI,CACT,6BACE,SAAS,EAAC,oBAAoB,uBAE9B,KAAK,EAAE,EAAE,eAAe,EAAE,aAAa,EAAE,IAExC,MAAM,CACH,CACP;QACD,4BAAI,SAAS,EAAC,4BAA4B,IACvC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;YACzC,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;gBAC/B,OAAO,CACL,oBAAC,QAAQ,IAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,IACzB,KAAK,CAAC,YAAY,CAAC,KAAK,kBACvB,IAAI,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACxC,SAAS,EAAE,SAAS,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACvD,eAAe,IACZ,KAAK,CAAC,KAAK,EACd,CACO,CACZ,CAAC;aACH;QACH,CAAC,CAAC,CACC,CACD,CACP,CAAA;CAAA,CACe,CAAC;AAEnB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;AAErB,eAAe,IAAI,CAAC"}

package/esm/form/error-summary/ErrorSummary.d.ts

@@ -21,6 +21,18 @@ export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
     headingTag?: React.ElementType<any>;
 }
 interface ErrorSummaryComponent extends React.ForwardRefExoticComponent<ErrorSummaryProps & React.RefAttributes<HTMLDivElement>> {
+    /**
+     * Link to error
+     *
+     * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+     *
+     * @example
+     * ```jsx
+     * <ErrorSummary.Item href="#1">
+     *   Felt må fylles ut med alder
+     * </ErrorSummary.Item>
+     * ```
+     */
     Item: ErrorSummaryItemType;
 }
 /**

package/esm/form/error-summary/ErrorSummary.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorSummary.js","sourceRoot":"","sources":["../../../src/form/error-summary/ErrorSummary.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,gBAA0C,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AA8BnC;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,UAAU,GAAG,IAAI,EACjB,OAAO,OAER,EADI,IAAI,cANT,0DAOC,CADQ;IAIT,MAAM,SAAS,GAAG,KAAK,EAAE,CAAC;IAE1B,OAAO,CACL,+CACE,GAAG,EAAE,GAAG,IACJ,IAAI,IACR,SAAS,EAAE,EAAE,CACX,SAAS,EACT,qBAAqB,EACrB,wBAAwB,IAAI,EAAE,CAC/B,EACD,QAAQ,EAAE,CAAC,CAAC,eACF,QAAQ,mBACJ,KAAK,qBACF,SAAS;QAE1B,oBAAC,OAAO,IACN,SAAS,EAAC,8BAA8B,EACxC,EAAE,EAAE,UAAU,EACd,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,SAAS,IAEZ,OAAO,CACA;QACV,oBAAC,SAAS,IAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,2BAA2B,IACjE,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YACtC,OAAO,4BAAI,GAAG,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,EAAE,IAAG,KAAK,CAAM,CAAC;QAClD,CAAC,CAAC,CACQ,CACJ,CACX,CAAC;AACJ,CAAC,CACuB,CAAC;AAE3B,YAAY,CAAC,IAAI,GAAG,gBAAgB,CAAC;AAErC,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ErrorSummary.js","sourceRoot":"","sources":["../../../src/form/error-summary/ErrorSummary.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,gBAA0C,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AA0CnC;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CACpC,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,UAAU,GAAG,IAAI,EACjB,OAAO,OAER,EADI,IAAI,cANT,0DAOC,CADQ;IAIT,MAAM,SAAS,GAAG,KAAK,EAAE,CAAC;IAE1B,OAAO,CACL,+CACE,GAAG,EAAE,GAAG,IACJ,IAAI,IACR,SAAS,EAAE,EAAE,CACX,SAAS,EACT,qBAAqB,EACrB,wBAAwB,IAAI,EAAE,CAC/B,EACD,QAAQ,EAAE,CAAC,CAAC,eACF,QAAQ,mBACJ,KAAK,qBACF,SAAS;QAE1B,oBAAC,OAAO,IACN,SAAS,EAAC,8BAA8B,EACxC,EAAE,EAAE,UAAU,EACd,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,SAAS,IAEZ,OAAO,CACA;QACV,oBAAC,SAAS,IAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,2BAA2B,IACjE,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YACtC,OAAO,4BAAI,GAAG,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,EAAE,IAAG,KAAK,CAAM,CAAC;QAClD,CAAC,CAAC,CACQ,CACJ,CACX,CAAC;AACJ,CAAC,CACuB,CAAC;AAE3B,YAAY,CAAC,IAAI,GAAG,gBAAgB,CAAC;AAErC,eAAe,YAAY,CAAC"}

package/esm/form/error-summary/ErrorSummaryItem.d.ts

@@ -5,6 +5,10 @@ export interface ErrorSummaryItemProps extends React.AnchorHTMLAttributes<HTMLAn
      * Link text
      */
     children: React.ReactNode;
+    /**
+     * Link to errormessage
+     */
+    href?: string;
 }
 export type ErrorSummaryItemType = OverridableComponent<ErrorSummaryItemProps, HTMLAnchorElement>;
 export declare const ErrorSummaryItem: ErrorSummaryItemType;

package/esm/form/error-summary/ErrorSummaryItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorSummaryItem.js","sourceRoot":"","sources":["../../../src/form/error-summary/ErrorSummaryItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AAgBtB,MAAM,CAAC,MAAM,gBAAgB,GAAyB,UAAU,CAC9D,CAAC,EAAqD,EAAE,GAAG,EAAE,EAAE;QAA9D,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG,EAAE,SAAS,OAAW,EAAN,IAAI,cAAnD,+BAAqD,CAAF;IAClD,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,2BAA2B,EAAE,YAAY,CAAC,KAElE,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"ErrorSummaryItem.js","sourceRoot":"","sources":["../../../src/form/error-summary/ErrorSummaryItem.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AAoBtB,MAAM,CAAC,MAAM,gBAAgB,GAAyB,UAAU,CAC9D,CAAC,EAAqD,EAAE,GAAG,EAAE,EAAE;QAA9D,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG,EAAE,SAAS,OAAW,EAAN,IAAI,cAAnD,+BAAqD,CAAF;IAClD,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,2BAA2B,EAAE,YAAY,CAAC,KAElE,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/package.json

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

package/src/chat/Bubble.tsx

@@ -17,6 +17,7 @@ export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
   timestamp?: string;
   /**
    * Background color on bubble
+   * @deprecated Use `variant` on Chat instead
    */
   backgroundColor?: string;
   /**
@@ -46,17 +47,20 @@ const Bubble = forwardRef<HTMLDivElement, BubbleProps>(
         {...rest}
       >
         {(timestamp || name) && (
-          <div
+          <h3
             className={cl(
               `navds-chat__top-text`,
               toptextPosition && `navds-chat__top-text--${toptextPosition}`
             )}
           >
-            {name && <Detail className="navds-chat__name">{name}</Detail>}
-            {timestamp && (
-              <Detail className="navds-chat__timestamp">{timestamp}</Detail>
+            {name && <Detail as="span">{name}</Detail>}
+            {name && timestamp && (
+              <Detail as="span" aria-hidden>
+                &bull;
+              </Detail>
             )}
-          </div>
+            {timestamp && <Detail as="span">{timestamp}</Detail>}
+          </h3>
         )}
         {children}
       </div>

package/src/chat/Chat.tsx

@@ -1,7 +1,10 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
-import Bubble, { BubbleProps } from "./Bubble";
-import { BodyLong, BodyShort } from "../typography";
+import Bubble from "./Bubble";
+import { BodyLong } from "../typography";
+
+export const POSITIONS = ["left", "right"] as const;
+export const SIZES = ["medium", "small"] as const;
 
 export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -17,27 +20,40 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
    */
   timestamp?: string;
   /**
-   * Avatar for messenger. Regular text for initials works to
+   * Avatar for messenger. Regular text for initials works too, but it will be hidden for screen readers.
+   */
+  avatar?: React.ReactNode;
+  /**
+   * Changes background color on avatar and bubbles.
+   * Avoid using the same background as the surface behind Chat.
+   * @default "subtle"
    */
-  avatar: React.ReactNode;
+  variant?: "subtle" | "info" | "neutral";
   /**
    * Background color on bubbles
+   * @deprecated Use `variant` instead
    */
   backgroundColor?: string;
   /**
    * Background color for avatar
+   * @deprecated Use `variant` instead
    */
   avatarBgColor?: string;
   /**
-   * Positions avatar and Bubbles
+   * Positions avatar and bubbles
    * @default "left"
    */
-  position?: "left" | "right";
+  position?: (typeof POSITIONS)[number];
   /**
    * Hoizontal position of toptext
-   * @default Same as chat
+   * @default Same as position
+   */
+  toptextPosition?: (typeof POSITIONS)[number];
+  /**
+   * Affects padding and font size in bubbles
+   * @default "medium"
    */
-  toptextPosition?: "left" | "right";
+  size?: (typeof SIZES)[number];
 }
 
 interface ChatComponent
@@ -47,24 +63,23 @@ interface ChatComponent
   /**
    * @see 🏷️ {@link BubbleProps}
    */
-  Bubble: React.ForwardRefExoticComponent<
-    BubbleProps & React.RefAttributes<HTMLDivElement>
-  >;
+  Bubble: typeof Bubble;
 }
 
 /**
- * A component for displaying chat messages.
+ * A component for communicating dialogs between two parties.
  *
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/chat)
  * @see 🏷️ {@link ChatProps}
  *
  * @example
  * ```jsx
- * <Chat>
- *   <Chat.Bubble avatar="A" name="Alice">Hello!</Chat.Bubble>
+ * <Chat avatar="A" name="Alice" timestamp="01.01.21 14:00">
+ *   <Chat.Bubble>Hello!</Chat.Bubble>
+ *   <Chat.Bubble>How can I help you?</Chat.Bubble>
  * </Chat>
- * <Chat>
- *   <Chat.Bubble avatar="B" name="Bob">Hi there!</Chat.Bubble>
+ * <Chat avatar="B" name="Bob" timestamp="01.01.21 14:01" position="right">
+ *   <Chat.Bubble>Hi there!</Chat.Bubble>
  * </Chat>
  * ```
  */
@@ -77,51 +92,54 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
       timestamp,
       avatar,
       position = "left",
+      variant = "subtle",
       avatarBgColor,
       backgroundColor,
       toptextPosition,
+      size = "medium",
       ...rest
-    },
+    }: ChatProps,
     ref
-  ) => {
-    return (
-      <div
-        ref={ref}
-        className={cl(
-          "navds-chat",
-          className,
-          `navds-chat--${position} navds-chat--top-text-${
-            toptextPosition ?? position
-          }`
-        )}
-        {...rest}
-      >
-        <BodyShort
-          as="div"
+  ) => (
+    <div
+      ref={ref}
+      className={cl(
+        "navds-chat",
+        className,
+        `navds-chat--${position}`,
+        `navds-chat--top-text-${toptextPosition ?? position}`,
+        `navds-chat--${size}`,
+        `navds-chat--${variant}`
+      )}
+      {...rest}
+    >
+      {avatar && (
+        <div
           className="navds-chat__avatar"
+          aria-hidden
           style={{ backgroundColor: avatarBgColor }}
         >
           {avatar}
-        </BodyShort>
-        <ol className="navds-chat__bubble-wrapper">
-          {React.Children.map(children, (child, i) => {
-            if (React.isValidElement(child)) {
-              return (
-                <BodyLong as="li">
-                  {React.cloneElement(child, {
-                    name: name && i === 0 ? name : undefined,
-                    timestamp: timestamp && i === 0 ? timestamp : undefined,
-                    backgroundColor,
-                    ...child.props,
-                  })}
-                </BodyLong>
-              );
-            }
-          })}
-        </ol>
-      </div>
-    );
-  }
+        </div>
+      )}
+      <ol className="navds-chat__bubble-wrapper">
+        {React.Children.map(children, (child, i) => {
+          if (React.isValidElement(child)) {
+            return (
+              <BodyLong as="li" size={size}>
+                {React.cloneElement(child, {
+                  name: name && i === 0 ? name : undefined,
+                  timestamp: timestamp && i === 0 ? timestamp : undefined,
+                  backgroundColor,
+                  ...child.props,
+                })}
+              </BodyLong>
+            );
+          }
+        })}
+      </ol>
+    </div>
+  )
 ) as ChatComponent;
 
 Chat.Bubble = Bubble;

package/src/chat/chat.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Chat } from "../index";
 import { Meta } from "@storybook/react";
+import { POSITIONS, SIZES } from "./Chat";
 
 export default {
   title: "ds-react/Chat",
@@ -16,19 +17,25 @@ export default {
         type: "text",
       },
     },
+    position: {
+      control: { type: "radio" },
+      options: POSITIONS,
+    },
+    toptextPosition: {
+      control: { type: "radio" },
+      options: POSITIONS,
+    },
+    size: {
+      control: { type: "radio" },
+      options: SIZES,
+    },
   },
-} as Meta;
+} satisfies Meta<typeof Chat>;
 
 export const Default = {
   render: (props) => {
     return (
-      <Chat
-        avatar={props?.avatar ?? "ON"}
-        name={props?.name ?? "Ola Normann"}
-        timestamp={props?.timestamp ?? "01.01.21 14:00"}
-        avatarBgColor={props?.avatarBgColor}
-        backgroundColor={props?.backgroundColor}
-      >
+      <Chat {...props}>
         <Chat.Bubble>
           Aute minim nisi sunt mollit duis sunt nulla minim non proident.
         </Chat.Bubble>
@@ -48,141 +55,156 @@ export const Default = {
   },
 };
 
-export const Farger = () => {
-  return (
-    <Chat
-      avatar="ON"
-      name="Ola Normann"
-      timestamp="01.01.21 14:00"
-      avatarBgColor="var(--a-lightblue-200)"
-      backgroundColor="var(--a-lightblue-100)"
-    >
+export const Small = () => (
+  <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 14:00" size="small">
+    <Chat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Chat.Bubble>
+    <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+    <Chat.Bubble>
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </Chat.Bubble>
+  </Chat>
+);
+
+export const Colors = () => (
+  <Chat
+    avatar="NAV"
+    name="NAV"
+    timestamp="01.01.21 14:00"
+    avatarBgColor="var(--a-surface-alt-1-subtle)"
+    backgroundColor="var(--a-surface-warning-subtle)"
+  >
+    <Chat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Chat.Bubble>
+    <Chat.Bubble backgroundColor="lightYellow">
+      Tempor fugiat amet eu sint in in ullamco.
+    </Chat.Bubble>
+    <Chat.Bubble>
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </Chat.Bubble>
+  </Chat>
+);
+
+export const Variants = () => (
+  <div className="colgap">
+    <Chat avatar="NAV" name="NAV" timestamp="01.01.21 14:00" variant="info">
       <Chat.Bubble>
         Aute minim nisi sunt mollit duis sunt nulla minim non proident.
       </Chat.Bubble>
+    </Chat>
+    <Chat
+      avatar="KN"
+      name="Kari Nordmann"
+      timestamp="01.01.21 14:03"
+      variant="neutral"
+      position="right"
+    >
       <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+    </Chat>
+    <Chat
+      avatar="ON"
+      name="Ola Nordmann"
+      timestamp="01.01.21 14:07"
+      variant="subtle"
+      position="right"
+    >
       <Chat.Bubble>
         Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
         labore nisi ut.
       </Chat.Bubble>
     </Chat>
-  );
-};
-
-export const Position = () => {
-  return (
-    <div className="colgap">
-      <Chat
-        avatar="ON"
-        name="Ola Normann"
-        timestamp="01.01.21 14:00"
-        backgroundColor="rgba(255, 249, 240, 1)"
-        avatarBgColor="rgba(255, 236, 204, 1)"
-      >
-        <Chat.Bubble>
-          Adipisicing laborum est eu laborum est sit in commodo enim sint
-          laboris labore nisi ut.
-        </Chat.Bubble>
-      </Chat>
-      <Chat
-        avatar="KH"
-        name="Kari Høyli"
-        timestamp="01.01.21 14:32"
-        position="right"
-        backgroundColor="rgba(230, 240, 255, 1)"
-        avatarBgColor="rgba(204, 225, 255, 1)"
-      >
-        <Chat.Bubble>
-          Reprehenderit pariatur officia exercitation laboris.
-        </Chat.Bubble>
-        <Chat.Bubble>
-          Enim velit deserunt do quis. Eu fugiat magna esse dolore ad sunt sit
-          est dolore incididunt. Occaecat cupidatat magna.
-        </Chat.Bubble>
-      </Chat>
-      <Chat
-        avatar="ON"
-        name="Ola Normann"
-        timestamp="01.01.21 15:00"
-        backgroundColor="rgba(255, 249, 240, 1)"
-        avatarBgColor="rgba(255, 236, 204, 1)"
-      >
-        <Chat.Bubble>
-          Exercitation irure Lorem cupidatat culpa anim cillum esse ullamco qui
-          dolore laborum et Lorem. Labore sunt duis id Lorem voluptate commodo
-          ea esse. Dolore esse aliqua proident ea ad commodo ut dolore voluptate
-          labore sunt aute.
-        </Chat.Bubble>
-      </Chat>
-    </div>
-  );
-};
-
-export const ToptextPosition = () => {
-  return (
-    <div className="colgap">
-      <Chat
-        avatar="ON"
-        name="Ola Normann"
-        timestamp="01.01.21 14:00"
-        backgroundColor="rgba(255, 249, 240, 1)"
-        avatarBgColor="rgba(255, 236, 204, 1)"
-        toptextPosition="right"
-      >
-        <Chat.Bubble>
-          Adipisicing laborum est eu laborum est sit in commodo enim sint
-          laboris labore nisi ut.
-        </Chat.Bubble>
-      </Chat>
-      <Chat
-        avatar="KH"
-        name="Kari Høyli"
-        timestamp="01.01.21 14:32"
-        position="right"
-        backgroundColor="rgba(230, 240, 255, 1)"
-        avatarBgColor="rgba(204, 225, 255, 1)"
-        toptextPosition="left"
-      >
-        <Chat.Bubble>
-          Reprehenderit pariatur officia exercitation laboris.
-        </Chat.Bubble>
-        <Chat.Bubble>
-          Enim velit deserunt do quis. Eu fugiat magna esse dolore ad sunt sit
-          est dolore incididunt. Occaecat cupidatat magna.
-        </Chat.Bubble>
-      </Chat>
-      <Chat
-        avatar="ON"
-        name="Ola Normann"
-        timestamp="01.01.21 15:00"
-        backgroundColor="rgba(255, 249, 240, 1)"
-        avatarBgColor="rgba(255, 236, 204, 1)"
-      >
-        <Chat.Bubble toptextPosition="right">
-          Exercitation irure Lorem cupidatat culpa anim cillum esse ullamco qui
-          dolore laborum et Lorem. Labore sunt duis id Lorem voluptate commodo
-          ea esse. Dolore esse aliqua proident ea ad commodo ut dolore voluptate
-          labore sunt aute.
-        </Chat.Bubble>
-      </Chat>
-    </div>
-  );
-};
+  </div>
+);
 
-export const Avatar = () => {
-  return (
-    <Chat avatar={<Illustration />} timestamp="01.01.21 14:00">
+export const Position = () => (
+  <div className="colgap">
+    <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 14:00">
       <Chat.Bubble>
-        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+        labore nisi ut.
       </Chat.Bubble>
-      <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+    </Chat>
+    <Chat
+      avatar="KH"
+      name="Kari Høyli"
+      timestamp="01.01.21 14:32"
+      position="right"
+      variant="info"
+    >
+      <Chat.Bubble>
+        Reprehenderit pariatur officia exercitation laboris.
+      </Chat.Bubble>
+      <Chat.Bubble>
+        Enim velit deserunt do quis. Eu fugiat magna esse dolore ad sunt sit est
+        dolore incididunt. Occaecat cupidatat magna.
+      </Chat.Bubble>
+    </Chat>
+    <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 15:00">
+      <Chat.Bubble>
+        Exercitation irure Lorem cupidatat culpa anim cillum esse ullamco qui
+        dolore laborum et Lorem. Labore sunt duis id Lorem voluptate commodo ea
+        esse. Dolore esse aliqua proident ea ad commodo ut dolore voluptate
+        labore sunt aute.
+      </Chat.Bubble>
+    </Chat>
+  </div>
+);
+
+export const ToptextPosition = () => (
+  <div className="colgap">
+    <Chat
+      avatar="ON"
+      name="Ola Normann"
+      timestamp="01.01.21 14:00"
+      toptextPosition="right"
+    >
       <Chat.Bubble>
         Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
         labore nisi ut.
       </Chat.Bubble>
     </Chat>
-  );
-};
+    <Chat
+      name="Kari Høyli"
+      timestamp="01.01.21 14:32"
+      position="right"
+      variant="info"
+      toptextPosition="left"
+    >
+      <Chat.Bubble>
+        Reprehenderit pariatur officia exercitation laboris.
+      </Chat.Bubble>
+      <Chat.Bubble>
+        Enim velit deserunt do quis. Eu fugiat magna esse dolore ad sunt sit est
+        dolore incididunt. Occaecat cupidatat magna.
+      </Chat.Bubble>
+    </Chat>
+    <Chat avatar="ON" name="Ola Normann" timestamp="01.01.21 15:00">
+      <Chat.Bubble toptextPosition="right">
+        Exercitation irure Lorem cupidatat culpa anim cillum esse ullamco qui
+        dolore laborum et Lorem. Labore sunt duis id Lorem voluptate commodo ea
+        esse. Dolore esse aliqua proident ea ad commodo ut dolore voluptate
+        labore sunt aute.
+      </Chat.Bubble>
+    </Chat>
+  </div>
+);
+
+export const Avatar = () => (
+  <Chat avatar={<Illustration />} timestamp="01.01.21 14:00">
+    <Chat.Bubble>
+      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+    </Chat.Bubble>
+    <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+    <Chat.Bubble>
+      Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
+      labore nisi ut.
+    </Chat.Bubble>
+  </Chat>
+);
 
 const Illustration = () => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 93">

package/src/form/error-summary/ErrorSummary.tsx

@@ -29,6 +29,18 @@ interface ErrorSummaryComponent
   extends React.ForwardRefExoticComponent<
     ErrorSummaryProps & React.RefAttributes<HTMLDivElement>
   > {
+  /**
+   * Link to error
+   *
+   * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+   *
+   * @example
+   * ```jsx
+   * <ErrorSummary.Item href="#1">
+   *   Felt må fylles ut med alder
+   * </ErrorSummary.Item>
+   * ```
+   */
   Item: ErrorSummaryItemType;
 }
 

package/src/form/error-summary/ErrorSummaryItem.tsx

@@ -8,6 +8,10 @@ export interface ErrorSummaryItemProps
    * Link text
    */
   children: React.ReactNode;
+  /**
+   * Link to errormessage
+   */
+  href?: string;
 }
 
 export type ErrorSummaryItemType = OverridableComponent<