@navikt/ds-react 4.9.0 → 4.10.0

package/_docs.json

@@ -5154,6 +5154,69 @@
     "filePath": "src/link/Link.tsx",
     "displayName": "Link",
     "props": {
+      "underline": {
+        "defaultValue": {
+          "value": "true"
+        },
+        "description": "Inverts when the underline appears. If this is false,\nthe underline does not appear by default, but does appear when the link is hovered.\nThis makes it more suitable for use when inlined in text.",
+        "name": "underline",
+        "parent": {
+          "fileName": "src/link/Link.tsx",
+          "name": "LinkProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/link/Link.tsx",
+            "name": "LinkProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "inlineText": {
+        "defaultValue": {
+          "value": "false"
+        },
+        "description": "Renders link with `display: inline` for better wrapping in text.",
+        "name": "inlineText",
+        "parent": {
+          "fileName": "src/link/Link.tsx",
+          "name": "LinkProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/link/Link.tsx",
+            "name": "LinkProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "variant": {
+        "defaultValue": {
+          "value": "action"
+        },
+        "description": "Variant of the component to use.",
+        "name": "variant",
+        "parent": {
+          "fileName": "src/link/Link.tsx",
+          "name": "LinkProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/link/Link.tsx",
+            "name": "LinkProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"action\" | \"neutral\" | \"subtle\""
+        }
+      },
       "children": {
         "defaultValue": null,
         "description": "Link text",
@@ -14345,7 +14408,7 @@
       },
       "onToggleSelected": {
         "defaultValue": null,
-        "description": "Callback function triggered whenever an option is selected or de-selected\n@param option\n@param isSelected\n@returns",
+        "description": "Callback function triggered whenever an option is selected or de-selected\n@param option\n@param isSelected - Whether the option has been selected or unselected\n@param isAddedByUser - Whether the option comes from user input, instead of from the list\n@returns",
         "name": "onToggleSelected",
         "parent": {
           "fileName": "react/src/form/combobox/types.ts",
@@ -14359,7 +14422,7 @@
         ],
         "required": false,
         "type": {
-          "name": "((option: string, isSelected: boolean) => void)"
+          "name": "((option: string, isSelected: boolean, isAddedByUser: boolean) => void)"
         }
       },
       "selectedOptions": {
@@ -14798,7 +14861,7 @@
       },
       "onToggleSelected": {
         "defaultValue": null,
-        "description": "Callback function triggered whenever an option is selected or de-selected\n@param option\n@param isSelected\n@returns",
+        "description": "Callback function triggered whenever an option is selected or de-selected\n@param option\n@param isSelected - Whether the option has been selected or unselected\n@param isAddedByUser - Whether the option comes from user input, instead of from the list\n@returns",
         "name": "onToggleSelected",
         "parent": {
           "fileName": "react/src/form/combobox/types.ts",
@@ -14812,7 +14875,7 @@
         ],
         "required": false,
         "type": {
-          "name": "((option: string, isSelected: boolean) => void)"
+          "name": "((option: string, isSelected: boolean, isAddedByUser: boolean) => void)"
         }
       },
       "selectedOptions": {

package/cjs/button/Button.js

@@ -76,7 +76,7 @@ exports.Button = (0, react_1.forwardRef)((_a, ref) => {
             "navds-button--disabled": disabled !== null && disabled !== void 0 ? disabled : widthOverride,
         }), style: Object.assign(Object.assign({}, style), { width: widthOverride }), disabled: (disabled !== null && disabled !== void 0 ? disabled : widthOverride) ? true : undefined }), widthOverride ? (react_1.default.createElement(__1.Loader, { size: size })) : (react_1.default.createElement(react_1.default.Fragment, null,
         icon && iconPosition === "left" && (react_1.default.createElement("span", { className: "navds-button__icon" }, icon)),
-        children && (react_1.default.createElement(__1.Label, { as: "span", size: size === "medium" ? "medium" : "small", "aria-live": "polite" }, children)),
+        children && (react_1.default.createElement(__1.Label, { as: "span", size: size === "medium" ? "medium" : "small" }, children)),
         icon && iconPosition === "right" && (react_1.default.createElement("span", { className: "navds-button__icon" }, icon))))));
 });
 exports.default = exports.Button;

package/cjs/form/combobox/ComboboxWrapper.js

@@ -30,22 +30,26 @@ const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 const ComboboxWrapper = ({ children, className, hasError, inputProps, inputSize, toggleIsListOpen, toggleListButtonRef, }) => {
     const wrapperRef = (0, react_1.useRef)(null);
+    const [hasFocusWithin, setHasFocusWithin] = (0, react_1.useState)(false);
     function onFocusInsideWrapper(e) {
         var _a;
         if (!((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) &&
             (toggleListButtonRef === null || toggleListButtonRef === void 0 ? void 0 : toggleListButtonRef.current) !== e.target) {
             toggleIsListOpen(true);
+            setHasFocusWithin(true);
         }
     }
     function onBlurWrapper(e) {
         var _a;
         if (!((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
             toggleIsListOpen(false);
+            setHasFocusWithin(false);
         }
     }
     return (react_1.default.createElement("div", { ref: wrapperRef, className: (0, clsx_1.default)(className, "navds-form-field", `navds-form-field--${inputSize}`, "navds-search", {
             "navds-search--error": hasError,
             "navds-search--disabled": !!inputProps.disabled,
-        }), onFocus: onFocusInsideWrapper, onBlur: onBlurWrapper }, children));
+            "navds-combobox--focused": hasFocusWithin,
+        }), onFocus: onFocusInsideWrapper, onBlur: onBlurWrapper, tabIndex: -1 }, children));
 };
 exports.default = ComboboxWrapper;

package/cjs/form/combobox/FilteredOptions/FilteredOptions.js

@@ -11,7 +11,7 @@ const filteredOptionsContext_1 = require("./filteredOptionsContext");
 const selectedOptionsContext_1 = require("../SelectedOptions/selectedOptionsContext");
 const inputContext_1 = require("../Input/inputContext");
 const FilteredOptions = () => {
-    const { inputProps: { id }, size, value, } = (0, inputContext_1.useInputContext)();
+    const { clearInput, inputProps: { id }, size, value, } = (0, inputContext_1.useInputContext)();
     const { allowNewValues, isLoading, isListOpen, filteredOptions, filteredOptionsIndex, filteredOptionsRef, isValueNew, toggleIsListOpen, } = (0, filteredOptionsContext_1.useFilteredOptionsContext)();
     const { isMultiSelect, selectedOptions, toggleOption } = (0, selectedOptionsContext_1.useSelectedOptionsContext)();
     return (react_1.default.createElement("ul", { ref: filteredOptionsRef, className: (0, clsx_1.default)("navds-combobox__list", {
@@ -19,7 +19,10 @@ const FilteredOptions = () => {
         }), id: `${id}-filtered-options`, role: "listbox", tabIndex: -1 },
         isLoading && (react_1.default.createElement("li", { className: "navds-combobox__list-item--loading", role: "option", "aria-selected": false, id: `${id}-is-loading` },
             react_1.default.createElement(__1.Loader, { "aria-label": "S\u00F8ker..." }))),
-        isValueNew && allowNewValues && (react_1.default.createElement("li", { tabIndex: -1, onPointerUp: (event) => toggleOption(value, event), id: `${id}-combobox-new-option`, className: (0, clsx_1.default)("navds-combobox__list-item__new-option", {
+        isValueNew && allowNewValues && (react_1.default.createElement("li", { tabIndex: -1, onPointerUp: (event) => {
+                toggleOption(value, event);
+                clearInput(event);
+            }, id: `${id}-combobox-new-option`, className: (0, clsx_1.default)("navds-combobox__list-item__new-option", {
                 "navds-combobox__list-item__new-option--focus": filteredOptionsIndex === -1,
             }), role: "option", "aria-selected": false },
             react_1.default.createElement(aksel_icons_1.PlusIcon, { "aria-hidden": true }),
@@ -36,6 +39,7 @@ const FilteredOptions = () => {
                 "navds-combobox__list-item--selected": selectedOptions.includes(option),
             }), id: `${id}-option-${option.replace(" ", "-")}`, key: option, tabIndex: -1, onPointerUp: (event) => {
                 toggleOption(option, event);
+                clearInput(event);
                 if (!isMultiSelect) {
                     toggleIsListOpen(false);
                 }

package/cjs/form/combobox/SelectedOptions/selectedOptionsContext.js

@@ -40,9 +40,10 @@ const SelectedOptionsProvider = ({ children, value, }) => {
     const selectedOptions = (0, react_1.useMemo)(() => externalSelectedOptions !== null && externalSelectedOptions !== void 0 ? externalSelectedOptions : [...customOptions, ...internalSelectedOptions], [customOptions, externalSelectedOptions, internalSelectedOptions]);
     const addSelectedOption = (0, react_1.useCallback)((option) => {
         var _a;
-        if (!options
+        const isAddedByUser = !options
             .map((opt) => opt.toLowerCase())
-            .includes((_a = option === null || option === void 0 ? void 0 : option.toLowerCase) === null || _a === void 0 ? void 0 : _a.call(option))) {
+            .includes((_a = option === null || option === void 0 ? void 0 : option.toLowerCase) === null || _a === void 0 ? void 0 : _a.call(option));
+        if (isAddedByUser) {
             allowNewValues && addCustomOption(option);
         }
         else if (isMultiSelect) {
@@ -54,16 +55,17 @@ const SelectedOptionsProvider = ({ children, value, }) => {
         else {
             setSelectedOptions([option]);
         }
-        onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, true);
+        onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, true, isAddedByUser);
     }, [addCustomOption, allowNewValues, isMultiSelect, onToggleSelected, options]);
     const removeSelectedOption = (0, react_1.useCallback)((option) => {
-        if (customOptions.includes(option)) {
+        const isAddedByUser = customOptions.includes(option);
+        if (isAddedByUser) {
             removeCustomOption(option);
         }
         else {
             setSelectedOptions((prevSelectedOptions) => prevSelectedOptions.filter((selectedOption) => selectedOption !== option));
         }
-        onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, false);
+        onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, false, isAddedByUser);
     }, [customOptions, onToggleSelected, removeCustomOption]);
     const toggleOption = (0, react_1.useCallback)((option, event) => {
         if (selectedOptions.includes(option)) {

package/cjs/link/Link.js

@@ -52,9 +52,20 @@ const clsx_1 = __importDefault(require("clsx"));
  * <Link href="#">lenke til ny side</Link>
  * <Link as={ReactRouter.Link} to="#">lenke til ny side</Link>
  * ```
+ * @example
+ * ```jsx
+ * <BodyLong>
+ * ...
+ *  <Link href="#" inlineText>lenke til ny side</Link>
+ * ...
+ * </BodyLong>
+ * ```
  */
 exports.Link = (0, react_1.forwardRef)((_a, ref) => {
-    var { as: Component = "a", className } = _a, rest = __rest(_a, ["as", "className"]);
-    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-link", className) })));
+    var { as: Component = "a", className, underline = true, variant = "action", inlineText = false } = _a, rest = __rest(_a, ["as", "className", "underline", "variant", "inlineText"]);
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-link", className, `navds-link--${variant}`, {
+            "navds-link--remove-underline": !underline,
+            "navds-link--inline-text": inlineText,
+        }) })));
 });
 exports.default = exports.Link;

package/cjs/util/RandomIcon.js

@@ -0,0 +1,37 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RandomIcon = void 0;
+const AllIcons = __importStar(require("@navikt/aksel-icons"));
+const react_1 = __importDefault(require("react"));
+const icons = Object.keys(AllIcons).map((key) => AllIcons[key]);
+const RandomIcon = () => {
+    const Icon = icons[Math.floor(Math.random() * icons.length)];
+    return react_1.default.createElement(Icon, null);
+};
+exports.RandomIcon = RandomIcon;

package/esm/button/Button.js

@@ -47,7 +47,7 @@ export const Button = forwardRef((_a, ref) => {
             "navds-button--disabled": disabled !== null && disabled !== void 0 ? disabled : widthOverride,
         }), style: Object.assign(Object.assign({}, style), { width: widthOverride }), disabled: (disabled !== null && disabled !== void 0 ? disabled : widthOverride) ? true : undefined }), widthOverride ? (React.createElement(Loader, { size: size })) : (React.createElement(React.Fragment, null,
         icon && iconPosition === "left" && (React.createElement("span", { className: "navds-button__icon" }, icon)),
-        children && (React.createElement(Label, { as: "span", size: size === "medium" ? "medium" : "small", "aria-live": "polite" }, children)),
+        children && (React.createElement(Label, { as: "span", size: size === "medium" ? "medium" : "small" }, children)),
         icon && iconPosition === "right" && (React.createElement("span", { className: "navds-button__icon" }, icon))))));
 });
 export default Button;

package/esm/button/Button.js.map

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

package/esm/form/combobox/ComboboxWrapper.js

@@ -1,24 +1,28 @@
 import cl from "clsx";
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 const ComboboxWrapper = ({ children, className, hasError, inputProps, inputSize, toggleIsListOpen, toggleListButtonRef, }) => {
     const wrapperRef = useRef(null);
+    const [hasFocusWithin, setHasFocusWithin] = useState(false);
     function onFocusInsideWrapper(e) {
         var _a;
         if (!((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)) &&
             (toggleListButtonRef === null || toggleListButtonRef === void 0 ? void 0 : toggleListButtonRef.current) !== e.target) {
             toggleIsListOpen(true);
+            setHasFocusWithin(true);
         }
     }
     function onBlurWrapper(e) {
         var _a;
         if (!((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget))) {
             toggleIsListOpen(false);
+            setHasFocusWithin(false);
         }
     }
     return (React.createElement("div", { ref: wrapperRef, className: cl(className, "navds-form-field", `navds-form-field--${inputSize}`, "navds-search", {
             "navds-search--error": hasError,
             "navds-search--disabled": !!inputProps.disabled,
-        }), onFocus: onFocusInsideWrapper, onBlur: onBlurWrapper }, children));
+            "navds-combobox--focused": hasFocusWithin,
+        }), onFocus: onFocusInsideWrapper, onBlur: onBlurWrapper, tabIndex: -1 }, children));
 };
 export default ComboboxWrapper;
 //# sourceMappingURL=ComboboxWrapper.js.map

package/esm/form/combobox/ComboboxWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxWrapper.js","sourceRoot":"","sources":["../../../src/form/combobox/ComboboxWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AActC,MAAM,eAAe,GAAG,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,mBAAmB,GACE,EAAE,EAAE;IACzB,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEvD,SAAS,oBAAoB,CAAC,CAAC;;QAC7B,IACE,CAAC,CAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAA;YAC9C,CAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,OAAO,MAAK,CAAC,CAAC,MAAM,EACzC;YACA,gBAAgB,CAAC,IAAI,CAAC,CAAC;SACxB;IACH,CAAC;IAED,SAAS,aAAa,CAAC,CAAC;;QACtB,IAAI,CAAC,CAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAA,EAAE;YAClD,gBAAgB,CAAC,KAAK,CAAC,CAAC;SACzB;IACH,CAAC;IAED,OAAO,CACL,6BACE,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,EAAE,CACX,SAAS,EACT,kBAAkB,EAClB,qBAAqB,SAAS,EAAE,EAChC,cAAc,EACd;YACE,qBAAqB,EAAE,QAAQ;YAC/B,wBAAwB,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ;SAChD,CACF,EACD,OAAO,EAAE,oBAAoB,EAC7B,MAAM,EAAE,aAAa,IAEpB,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"ComboboxWrapper.js","sourceRoot":"","sources":["../../../src/form/combobox/ComboboxWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAchD,MAAM,eAAe,GAAG,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,mBAAmB,GACE,EAAE,EAAE;IACzB,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5D,SAAS,oBAAoB,CAAC,CAAC;;QAC7B,IACE,CAAC,CAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAA;YAC9C,CAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAE,OAAO,MAAK,CAAC,CAAC,MAAM,EACzC;YACA,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACvB,iBAAiB,CAAC,IAAI,CAAC,CAAC;SACzB;IACH,CAAC;IAED,SAAS,aAAa,CAAC,CAAC;;QACtB,IAAI,CAAC,CAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAA,EAAE;YAClD,gBAAgB,CAAC,KAAK,CAAC,CAAC;YACxB,iBAAiB,CAAC,KAAK,CAAC,CAAC;SAC1B;IACH,CAAC;IAED,OAAO,CACL,6BACE,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,EAAE,CACX,SAAS,EACT,kBAAkB,EAClB,qBAAqB,SAAS,EAAE,EAChC,cAAc,EACd;YACE,qBAAqB,EAAE,QAAQ;YAC/B,wBAAwB,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ;YAC/C,yBAAyB,EAAE,cAAc;SAC1C,CACF,EACD,OAAO,EAAE,oBAAoB,EAC7B,MAAM,EAAE,aAAa,EACrB,QAAQ,EAAE,CAAC,CAAC,IAEX,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/esm/form/combobox/FilteredOptions/FilteredOptions.js

@@ -6,7 +6,7 @@ import { useFilteredOptionsContext } from "./filteredOptionsContext";
 import { useSelectedOptionsContext } from "../SelectedOptions/selectedOptionsContext";
 import { useInputContext } from "../Input/inputContext";
 const FilteredOptions = () => {
-    const { inputProps: { id }, size, value, } = useInputContext();
+    const { clearInput, inputProps: { id }, size, value, } = useInputContext();
     const { allowNewValues, isLoading, isListOpen, filteredOptions, filteredOptionsIndex, filteredOptionsRef, isValueNew, toggleIsListOpen, } = useFilteredOptionsContext();
     const { isMultiSelect, selectedOptions, toggleOption } = useSelectedOptionsContext();
     return (React.createElement("ul", { ref: filteredOptionsRef, className: cl("navds-combobox__list", {
@@ -14,7 +14,10 @@ const FilteredOptions = () => {
         }), id: `${id}-filtered-options`, role: "listbox", tabIndex: -1 },
         isLoading && (React.createElement("li", { className: "navds-combobox__list-item--loading", role: "option", "aria-selected": false, id: `${id}-is-loading` },
             React.createElement(Loader, { "aria-label": "S\u00F8ker..." }))),
-        isValueNew && allowNewValues && (React.createElement("li", { tabIndex: -1, onPointerUp: (event) => toggleOption(value, event), id: `${id}-combobox-new-option`, className: cl("navds-combobox__list-item__new-option", {
+        isValueNew && allowNewValues && (React.createElement("li", { tabIndex: -1, onPointerUp: (event) => {
+                toggleOption(value, event);
+                clearInput(event);
+            }, id: `${id}-combobox-new-option`, className: cl("navds-combobox__list-item__new-option", {
                 "navds-combobox__list-item__new-option--focus": filteredOptionsIndex === -1,
             }), role: "option", "aria-selected": false },
             React.createElement(PlusIcon, { "aria-hidden": true }),
@@ -31,6 +34,7 @@ const FilteredOptions = () => {
                 "navds-combobox__list-item--selected": selectedOptions.includes(option),
             }), id: `${id}-option-${option.replace(" ", "-")}`, key: option, tabIndex: -1, onPointerUp: (event) => {
                 toggleOption(option, event);
+                clearInput(event);
                 if (!isMultiSelect) {
                     toggleIsListOpen(false);
                 }

package/esm/form/combobox/FilteredOptions/FilteredOptions.js.map

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

package/esm/form/combobox/SelectedOptions/selectedOptionsContext.js

@@ -11,9 +11,10 @@ export const SelectedOptionsProvider = ({ children, value, }) => {
     const selectedOptions = useMemo(() => externalSelectedOptions !== null && externalSelectedOptions !== void 0 ? externalSelectedOptions : [...customOptions, ...internalSelectedOptions], [customOptions, externalSelectedOptions, internalSelectedOptions]);
     const addSelectedOption = useCallback((option) => {
         var _a;
-        if (!options
+        const isAddedByUser = !options
             .map((opt) => opt.toLowerCase())
-            .includes((_a = option === null || option === void 0 ? void 0 : option.toLowerCase) === null || _a === void 0 ? void 0 : _a.call(option))) {
+            .includes((_a = option === null || option === void 0 ? void 0 : option.toLowerCase) === null || _a === void 0 ? void 0 : _a.call(option));
+        if (isAddedByUser) {
             allowNewValues && addCustomOption(option);
         }
         else if (isMultiSelect) {
@@ -25,16 +26,17 @@ export const SelectedOptionsProvider = ({ children, value, }) => {
         else {
             setSelectedOptions([option]);
         }
-        onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, true);
+        onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, true, isAddedByUser);
     }, [addCustomOption, allowNewValues, isMultiSelect, onToggleSelected, options]);
     const removeSelectedOption = useCallback((option) => {
-        if (customOptions.includes(option)) {
+        const isAddedByUser = customOptions.includes(option);
+        if (isAddedByUser) {
             removeCustomOption(option);
         }
         else {
             setSelectedOptions((prevSelectedOptions) => prevSelectedOptions.filter((selectedOption) => selectedOption !== option));
         }
-        onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, false);
+        onToggleSelected === null || onToggleSelected === void 0 ? void 0 : onToggleSelected(option, false, isAddedByUser);
     }, [customOptions, onToggleSelected, removeCustomOption]);
     const toggleOption = useCallback((option, event) => {
         if (selectedOptions.includes(option)) {

package/esm/form/combobox/SelectedOptions/selectedOptionsContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectedOptionsContext.js","sourceRoot":"","sources":["../../../../src/form/combobox/SelectedOptions/selectedOptionsContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,aAAa,EACb,WAAW,EACX,UAAU,EACV,OAAO,EACP,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,WAAW,MAAM,2BAA2B,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD,OAAO,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAelE,MAAM,sBAAsB,GAAG,aAAa,CAC1C,EAAgC,CACjC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EACtC,QAAQ,EACR,KAAK,GAWN,EAAE,EAAE;IACH,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,eAAe,EAAE,CAAC;IACrD,MAAM,EAAE,aAAa,EAAE,kBAAkB,EAAE,eAAe,EAAE,GAC1D,uBAAuB,EAAE,CAAC;IAC5B,MAAM,EACJ,cAAc,EACd,aAAa,EACb,eAAe,EAAE,uBAAuB,EACxC,gBAAgB,EAChB,OAAO,GACR,GAAG,KAAK,CAAC;IACV,MAAM,CAAC,uBAAuB,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IAC7E,MAAM,eAAe,GAAG,OAAO,CAC7B,GAAG,EAAE,CACH,uBAAuB,aAAvB,uBAAuB,cAAvB,uBAAuB,GAAI,CAAC,GAAG,aAAa,EAAE,GAAG,uBAAuB,CAAC,EAC3E,CAAC,aAAa,EAAE,uBAAuB,EAAE,uBAAuB,CAAC,CAClE,CAAC;IAEF,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,MAAc,EAAE,EAAE;;QACjB,IACE,CAAC,OAAO;aACL,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;aAC/B,QAAQ,CAAC,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,sDAAI,CAAC,EACpC;YACA,cAAc,IAAI,eAAe,CAAC,MAAM,CAAC,CAAC;SAC3C;aAAM,IAAI,aAAa,EAAE;YACxB,kBAAkB,CAAC,CAAC,mBAAmB,EAAE,EAAE,CAAC;gBAC1C,GAAG,mBAAmB;gBACtB,MAAM;aACP,CAAC,CAAC;SACJ;aAAM;YACL,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;SAC9B;QACD,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,MAAM,EAAE,IAAI,CAAC,CAAC;IACnC,CAAC,EACD,CAAC,eAAe,EAAE,cAAc,EAAE,aAAa,EAAE,gBAAgB,EAAE,OAAO,CAAC,CAC5E,CAAC;IAEF,MAAM,oBAAoB,GAAG,WAAW,CACtC,CAAC,MAAc,EAAE,EAAE;QACjB,IAAI,aAAa,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;YAClC,kBAAkB,CAAC,MAAM,CAAC,CAAC;SAC5B;aAAM;YACL,kBAAkB,CAAC,CAAC,mBAAmB,EAAE,EAAE,CACzC,mBAAmB,CAAC,MAAM,CACxB,CAAC,cAAc,EAAE,EAAE,CAAC,cAAc,KAAK,MAAM,CAC9C,CACF,CAAC;SACH;QACD,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,MAAM,EAAE,KAAK,CAAC,CAAC;IACpC,CAAC,EACD,CAAC,aAAa,EAAE,gBAAgB,EAAE,kBAAkB,CAAC,CACtD,CAAC;IAEF,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,MAAc,EAAE,KAA+C,EAAE,EAAE;QAClE,IAAI,eAAe,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE;YACpC,oBAAoB,CAAC,MAAM,CAAC,CAAC;SAC9B;aAAM;YACL,iBAAiB,CAAC,MAAM,CAAC,CAAC;SAC3B;QACD,IAAI,CAAC,aAAa,EAAE;YAClB,UAAU,CAAC,KAAK,CAAC,CAAC;SACnB;QACD,UAAU,EAAE,CAAC;IACf,CAAC,EACD;QACE,iBAAiB;QACjB,UAAU;QACV,UAAU;QACV,aAAa;QACb,oBAAoB;QACpB,eAAe;KAChB,CACF,CAAC;IAEF,MAAM,mBAAmB,GAAG,WAAW,CAAW,eAAe,CAAC,CAAC;IAEnE,MAAM,oBAAoB,GAAG;QAC3B,iBAAiB;QACjB,aAAa;QACb,oBAAoB;QACpB,mBAAmB;QACnB,eAAe;QACf,kBAAkB;QAClB,YAAY;KACb,CAAC;IAEF,OAAO,CACL,oBAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,oBAAoB,IACzD,QAAQ,CACuB,CACnC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,EAAE;IAC5C,MAAM,OAAO,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAC;IACnD,IAAI,CAAC,OAAO,EAAE;QACZ,MAAM,IAAI,KAAK,CACb,yEAAyE,CAC1E,CAAC;KACH;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC"}
+{"version":3,"file":"selectedOptionsContext.js","sourceRoot":"","sources":["../../../../src/form/combobox/SelectedOptions/selectedOptionsContext.tsx"],"names":[],"mappings":"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"}

package/esm/form/combobox/types.d.ts

@@ -75,10 +75,11 @@ export interface ComboboxProps extends FormFieldProps, Omit<InputHTMLAttributes<
      * Callback function triggered whenever an option is selected or de-selected
      *
      * @param option
-     * @param isSelected
+     * @param isSelected - Whether the option has been selected or unselected
+     * @param isAddedByUser - Whether the option comes from user input, instead of from the list
      * @returns
      */
-    onToggleSelected?: (option: string, isSelected: boolean) => void;
+    onToggleSelected?: (option: string, isSelected: boolean, isAddedByUser: boolean) => void;
     /**
      * List of selected options.
      *

package/esm/link/Link.d.ts

@@ -1,6 +1,23 @@
 import React from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
 export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Inverts when the underline appears. If this is false,
+     * the underline does not appear by default, but does appear when the link is hovered.
+     * This makes it more suitable for use when inlined in text.
+     * @default true
+     */
+    underline?: boolean;
+    /**
+     * Renders link with `display: inline` for better wrapping in text.
+     * @default false
+     */
+    inlineText?: boolean;
+    /**
+     * Variant of the component to use.
+     * @default "action"
+     */
+    variant?: "action" | "neutral" | "subtle";
     /**
      * Link text
      */
@@ -18,6 +35,14 @@ export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>
  * <Link href="#">lenke til ny side</Link>
  * <Link as={ReactRouter.Link} to="#">lenke til ny side</Link>
  * ```
+ * @example
+ * ```jsx
+ * <BodyLong>
+ * ...
+ *  <Link href="#" inlineText>lenke til ny side</Link>
+ * ...
+ * </BodyLong>
+ * ```
  */
 export declare const Link: OverridableComponent<LinkProps, HTMLAnchorElement>;
 export default Link;

package/esm/link/Link.js

@@ -23,10 +23,21 @@ import cl from "clsx";
  * <Link href="#">lenke til ny side</Link>
  * <Link as={ReactRouter.Link} to="#">lenke til ny side</Link>
  * ```
+ * @example
+ * ```jsx
+ * <BodyLong>
+ * ...
+ *  <Link href="#" inlineText>lenke til ny side</Link>
+ * ...
+ * </BodyLong>
+ * ```
  */
 export const Link = forwardRef((_a, ref) => {
-    var { as: Component = "a", className } = _a, rest = __rest(_a, ["as", "className"]);
-    return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: cl("navds-link", className) })));
+    var { as: Component = "a", className, underline = true, variant = "action", inlineText = false } = _a, rest = __rest(_a, ["as", "className", "underline", "variant", "inlineText"]);
+    return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: cl("navds-link", className, `navds-link--${variant}`, {
+            "navds-link--remove-underline": !underline,
+            "navds-link--inline-text": inlineText,
+        }) })));
 });
 export default Link;
 //# sourceMappingURL=Link.js.map

package/esm/link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../src/link/Link.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AAWtB;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,IAAI,GACf,UAAU,CAAC,CAAC,EAA2C,EAAE,GAAG,EAAE,EAAE;QAApD,EAAE,EAAE,EAAE,SAAS,GAAG,GAAG,EAAE,SAAS,OAAW,EAAN,IAAI,cAAzC,mBAA2C,CAAF;IAAY,OAAA,CAC/D,oBAAC,SAAS,oBAAK,IAAI,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,IAAI,CAC1E,CAAA;CAAA,CAAC,CAAC;AAEL,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../src/link/Link.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AA4BtB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,IAAI,GACf,UAAU,CACR,CACE,EAOC,EACD,GAAG,EACH,EAAE;QATF,EACE,EAAE,EAAE,SAAS,GAAG,GAAG,EACnB,SAAS,EACT,SAAS,GAAG,IAAI,EAChB,OAAO,GAAG,QAAQ,EAClB,UAAU,GAAG,KAAK,OAEnB,EADI,IAAI,cANT,yDAOC,CADQ;IAGN,OAAA,CACH,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,EAAE,eAAe,OAAO,EAAE,EAAE;YAC/D,8BAA8B,EAAE,CAAC,SAAS;YAC1C,yBAAyB,EAAE,UAAU;SACtC,CAAC,IACF,CACH,CAAA;CAAA,CACF,CAAC;AAEJ,eAAe,IAAI,CAAC"}

package/esm/util/RandomIcon.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const RandomIcon: () => React.JSX.Element;

package/esm/util/RandomIcon.js

@@ -0,0 +1,8 @@
+import * as AllIcons from "@navikt/aksel-icons";
+import React from "react";
+const icons = Object.keys(AllIcons).map((key) => AllIcons[key]);
+export const RandomIcon = () => {
+    const Icon = icons[Math.floor(Math.random() * icons.length)];
+    return React.createElement(Icon, null);
+};
+//# sourceMappingURL=RandomIcon.js.map

package/esm/util/RandomIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RandomIcon.js","sourceRoot":"","sources":["../../src/util/RandomIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,qBAAqB,CAAC;AAChD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC;AAEhE,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE;IAC7B,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAC7D,OAAO,oBAAC,IAAI,OAAG,CAAC;AAClB,CAAC,CAAC"}

package/package.json

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

package/src/button/Button.tsx

@@ -126,11 +126,7 @@ export const Button: OverridableComponent<ButtonProps, HTMLButtonElement> =
                 <span className="navds-button__icon">{icon}</span>
               )}
               {children && (
-                <Label
-                  as="span"
-                  size={size === "medium" ? "medium" : "small"}
-                  aria-live="polite"
-                >
+                <Label as="span" size={size === "medium" ? "medium" : "small"}>
                   {children}
                 </Label>
               )}

package/src/button/button.stories.tsx

@@ -148,8 +148,9 @@ export const Loading = {
     </div>
   ),
 
-  args: { chromatic: { disableSnapshot: true } },
-  chromatic: { disableSnapshot: true },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
 };
 
 export const Icon = () => (
@@ -275,6 +276,7 @@ export const LoadingWithAs = {
     </div>
   ),
 
-  args: { chromatic: { disableSnapshot: true } },
-  chromatic: { disableSnapshot: true },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
 };

package/src/form/combobox/ComboboxWrapper.tsx

@@ -1,5 +1,5 @@
 import cl from "clsx";
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 
 type ComboboxWrapperProps = {
   children: any;
@@ -23,6 +23,7 @@ const ComboboxWrapper = ({
   toggleListButtonRef,
 }: ComboboxWrapperProps) => {
   const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const [hasFocusWithin, setHasFocusWithin] = useState(false);
 
   function onFocusInsideWrapper(e) {
     if (
@@ -30,12 +31,14 @@ const ComboboxWrapper = ({
       toggleListButtonRef?.current !== e.target
     ) {
       toggleIsListOpen(true);
+      setHasFocusWithin(true);
     }
   }
 
   function onBlurWrapper(e) {
     if (!wrapperRef.current?.contains(e.relatedTarget)) {
       toggleIsListOpen(false);
+      setHasFocusWithin(false);
     }
   }
 
@@ -50,10 +53,12 @@ const ComboboxWrapper = ({
         {
           "navds-search--error": hasError,
           "navds-search--disabled": !!inputProps.disabled,
+          "navds-combobox--focused": hasFocusWithin,
         }
       )}
       onFocus={onFocusInsideWrapper}
       onBlur={onBlurWrapper}
+      tabIndex={-1}
     >
       {children}
     </div>

package/src/form/combobox/FilteredOptions/FilteredOptions.tsx

@@ -8,6 +8,7 @@ import { useInputContext } from "../Input/inputContext";
 
 const FilteredOptions = () => {
   const {
+    clearInput,
     inputProps: { id },
     size,
     value,
@@ -48,7 +49,10 @@ const FilteredOptions = () => {
       {isValueNew && allowNewValues && (
         <li
           tabIndex={-1}
-          onPointerUp={(event) => toggleOption(value, event)}
+          onPointerUp={(event) => {
+            toggleOption(value, event);
+            clearInput(event);
+          }}
           id={`${id}-combobox-new-option`}
           className={cl("navds-combobox__list-item__new-option", {
             "navds-combobox__list-item__new-option--focus":
@@ -88,6 +92,7 @@ const FilteredOptions = () => {
           tabIndex={-1}
           onPointerUp={(event) => {
             toggleOption(option, event);
+            clearInput(event);
             if (!isMultiSelect) {
               toggleIsListOpen(false);
             }

package/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx

@@ -60,11 +60,10 @@ export const SelectedOptionsProvider = ({
 
   const addSelectedOption = useCallback(
     (option: string) => {
-      if (
-        !options
-          .map((opt) => opt.toLowerCase())
-          .includes(option?.toLowerCase?.())
-      ) {
+      const isAddedByUser = !options
+        .map((opt) => opt.toLowerCase())
+        .includes(option?.toLowerCase?.());
+      if (isAddedByUser) {
         allowNewValues && addCustomOption(option);
       } else if (isMultiSelect) {
         setSelectedOptions((prevSelectedOptions) => [
@@ -74,14 +73,15 @@ export const SelectedOptionsProvider = ({
       } else {
         setSelectedOptions([option]);
       }
-      onToggleSelected?.(option, true);
+      onToggleSelected?.(option, true, isAddedByUser);
     },
     [addCustomOption, allowNewValues, isMultiSelect, onToggleSelected, options]
   );
 
   const removeSelectedOption = useCallback(
     (option: string) => {
-      if (customOptions.includes(option)) {
+      const isAddedByUser = customOptions.includes(option);
+      if (isAddedByUser) {
         removeCustomOption(option);
       } else {
         setSelectedOptions((prevSelectedOptions) =>
@@ -90,7 +90,7 @@ export const SelectedOptionsProvider = ({
           )
         );
       }
-      onToggleSelected?.(option, false);
+      onToggleSelected?.(option, false, isAddedByUser);
     },
     [customOptions, onToggleSelected, removeCustomOption]
   );

package/src/form/combobox/combobox.stories.tsx

@@ -82,6 +82,7 @@ export function MultiSelect(props) {
         label="Komboboks - velg flere"
         options={props.options}
         isMultiSelect={props.isMultiSelect}
+        size={props.size}
       />
     </DemoContainer>
   );
@@ -90,6 +91,7 @@ export function MultiSelect(props) {
 MultiSelect.args = {
   options,
   isMultiSelect: true,
+  size: "medium",
 };
 
 export function MultiSelectWithAddNewOptions(props) {

package/src/form/combobox/types.ts

@@ -78,10 +78,15 @@ export interface ComboboxProps
    * Callback function triggered whenever an option is selected or de-selected
    *
    * @param option
-   * @param isSelected
+   * @param isSelected - Whether the option has been selected or unselected
+   * @param isAddedByUser - Whether the option comes from user input, instead of from the list
    * @returns
    */
-  onToggleSelected?: (option: string, isSelected: boolean) => void;
+  onToggleSelected?: (
+    option: string,
+    isSelected: boolean,
+    isAddedByUser: boolean
+  ) => void;
   /**
    * List of selected options.
    *

package/src/link/Link.tsx

@@ -4,6 +4,23 @@ import { OverridableComponent } from "../util/OverridableComponent";
 
 export interface LinkProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * Inverts when the underline appears. If this is false,
+   * the underline does not appear by default, but does appear when the link is hovered.
+   * This makes it more suitable for use when inlined in text.
+   * @default true
+   */
+  underline?: boolean;
+  /**
+   * Renders link with `display: inline` for better wrapping in text.
+   * @default false
+   */
+  inlineText?: boolean;
+  /**
+   * Variant of the component to use.
+   * @default "action"
+   */
+  variant?: "action" | "neutral" | "subtle";
   /**
    * Link text
    */
@@ -22,10 +39,37 @@ export interface LinkProps
  * <Link href="#">lenke til ny side</Link>
  * <Link as={ReactRouter.Link} to="#">lenke til ny side</Link>
  * ```
+ * @example
+ * ```jsx
+ * <BodyLong>
+ * ...
+ *  <Link href="#" inlineText>lenke til ny side</Link>
+ * ...
+ * </BodyLong>
+ * ```
  */
 export const Link: OverridableComponent<LinkProps, HTMLAnchorElement> =
-  forwardRef(({ as: Component = "a", className, ...rest }, ref) => (
-    <Component {...rest} ref={ref} className={cl("navds-link", className)} />
-  ));
+  forwardRef(
+    (
+      {
+        as: Component = "a",
+        className,
+        underline = true,
+        variant = "action",
+        inlineText = false,
+        ...rest
+      },
+      ref
+    ) => (
+      <Component
+        {...rest}
+        ref={ref}
+        className={cl("navds-link", className, `navds-link--${variant}`, {
+          "navds-link--remove-underline": !underline,
+          "navds-link--inline-text": inlineText,
+        })}
+      />
+    )
+  );
 
 export default Link;

package/src/link/link.stories.tsx

@@ -6,29 +6,76 @@ import {
   ConfirmationPanel as DsConfirmationPanel,
   Link,
 } from "..";
+import { RandomIcon } from "../util/RandomIcon";
+
 export default {
   title: "ds-react/Link",
   component: Link,
 };
 
+const LinkWrapper = ({
+  children = "Ex aliqua incididunt",
+  iconRight = false,
+  iconLeft = false,
+  variant = "action",
+  underline = false,
+  inlineText = true,
+}) => (
+  <>
+    {" "}
+    <Link
+      href="#"
+      underline={underline}
+      variant={variant as "action" | "neutral" | "subtle"}
+      inlineText={inlineText}
+    >
+      {iconLeft && (
+        <>
+          <RandomIcon />{" "}
+        </>
+      )}
+      {children}
+      {iconRight && (
+        <>
+          {" "}
+          <RandomIcon />
+        </>
+      )}
+    </Link>{" "}
+  </>
+);
+
 export const Default = {
-  render: (props) => {
+  render: ({ icon, inline }) => {
     const LinkD = () => (
-      <Link href="#">
-        {props.icon && <PlusCircleFillIcon />}Ex aliqua incididunt{" "}
-        {props.icon && <PlusCircleFillIcon />}
-      </Link>
+      <>
+        {" "}
+        <Link href="#" underline={!inline} inlineText={inline}>
+          {icon && <PlusCircleFillIcon />}Ex aliqua incididunt
+          {icon && <PlusCircleFillIcon />}
+        </Link>{" "}
+      </>
     );
 
-    if (props.inline) {
+    if (inline) {
       return (
-        <BodyLong>
-          Incididunt laborum nisi nisi Lorem <LinkD /> in. Laborum aute fugiat
-          officia adipisicing non veniam dolor nulla non ex consectetur fugiat
-          eiusmod aute. Culpa sit aute est duis minim in in voluptate velit
-          fugiat. Laboris est id deserunt ut ea Lorem eu. Esse elit laboris aute
-          commodo sint laborum fugiat aliqua.
-        </BodyLong>
+        <div
+          className="colgap"
+          style={{
+            width: "800px",
+            border: "1px solid black",
+            borderRadius: "8px",
+          }}
+        >
+          <BodyLong>
+            Incididunt laborum nisi nisi Lorem
+            <LinkD />
+            in. Laborum aute fugiat officia adipisicing non veniam dolor nulla
+            non ex consectetur fugiat eiusmod aute. Culpa sit aute est duis
+            minim in in voluptate velit fugiat. Laboris est id deserunt ut ea
+            Lorem eu. Esse elit laboris aute commodo sint laborum fugiat aliqua.
+          </BodyLong>
+        </div>
       );
     }
     return <LinkD />;
@@ -40,6 +87,49 @@ export const Default = {
   },
 };
 
+export const InlineInsideBodyLong = {
+  render: ({ iconLeft, iconRight }) => {
+    return (
+      <div
+        className="colgap"
+        style={{
+          width: "800px",
+          border: "1px solid black",
+          borderRadius: "8px",
+        }}
+      >
+        <style>{`.storybook-custom-spacing { white-space: pre;}`}</style>
+        <BodyLong>
+          <LinkWrapper underline iconLeft={iconLeft} iconRight={iconRight} />
+          Eiusmod aute.
+          <LinkWrapper underline iconLeft={iconLeft} iconRight={iconRight} />
+          Culpa sit aute est duis minim in in voluptate velit Incididunt laborum
+          nisi nisi Lorem officia adipisicing non veniam
+          <LinkWrapper underline iconLeft={iconLeft} iconRight={iconRight}>
+            blah blah blah blah blah blah blah blah blah blah blah blah blah
+            blah blah blah blah blah blah blah blah
+          </LinkWrapper>
+          dolor eu. Esse elit laboris aute commodo sint laborum fugiat aliqua.
+          <LinkWrapper underline iconLeft={iconLeft} iconRight={iconRight}>
+            Link
+          </LinkWrapper>
+        </BodyLong>
+        <BodyLong className="storybook-custom-spacing">
+          Custom{"   "}
+          <LinkWrapper underline iconLeft={iconLeft} iconRight={iconRight}>
+            link
+          </LinkWrapper>
+          {"     "}spacing.
+        </BodyLong>
+      </div>
+    );
+  },
+  args: {
+    iconLeft: false,
+    iconRight: false,
+  },
+};
+
 const DemoLink = () => (
   <Link href="#">
     <PlusCircleFillIcon aria-hidden /> Ex aliqua incididunt{" "}
@@ -83,3 +173,27 @@ export const ConfirmationPanel = () => {
     </div>
   );
 };
+
+export const Variants = {
+  render: ({ iconLeft, iconRight }) => {
+    return (
+      <div className="colgap">
+        {["action", "neutral", "subtle"].map((variant) => (
+          <>
+            <div>
+              <LinkWrapper
+                iconLeft={iconLeft}
+                iconRight={iconRight}
+                variant={variant}
+              />
+            </div>
+          </>
+        ))}
+      </div>
+    );
+  },
+  args: {
+    iconLeft: false,
+    iconRight: false,
+  },
+};

package/src/util/RandomIcon.tsx

@@ -0,0 +1,9 @@
+import * as AllIcons from "@navikt/aksel-icons";
+import React from "react";
+
+const icons = Object.keys(AllIcons).map((key) => AllIcons[key]);
+
+export const RandomIcon = () => {
+  const Icon = icons[Math.floor(Math.random() * icons.length)];
+  return <Icon />;
+};