@navikt/ds-react 0.19.16 → 0.19.19

package/_docs.json

@@ -9019,6 +9019,44 @@
           "name": "\"primary\" | \"secondary\" | \"simple\""
         }
       },
+      "error": {
+        "defaultValue": null,
+        "description": "Error message for element",
+        "name": "error",
+        "parent": {
+          "fileName": "react/src/form/useFormField.ts",
+          "name": "FormFieldProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/form/useFormField.ts",
+            "name": "FormFieldProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "ReactNode"
+        }
+      },
+      "errorId": {
+        "defaultValue": null,
+        "description": "Override internal errorId",
+        "name": "errorId",
+        "parent": {
+          "fileName": "react/src/form/useFormField.ts",
+          "name": "FormFieldProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/form/useFormField.ts",
+            "name": "FormFieldProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
       "size": {
         "defaultValue": null,
         "description": "Changes font-size, padding and gaps",

package/cjs/accordion/AccordionContent.js

@@ -40,6 +40,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importStar(require("react"));
 const react_collapse_1 = require("react-collapse");
+const typography_1 = require("../typography");
 const AccordionItem_1 = require("./AccordionItem");
 const AccordionContent = (0, react_1.forwardRef)((_a, ref) => {
     var { children, className, id } = _a, rest = __rest(_a, ["children", "className", "id"]);
@@ -53,6 +54,6 @@ const AccordionContent = (0, react_1.forwardRef)((_a, ref) => {
         : react_collapse_1.UnmountClosed;
     return (react_1.default.createElement("div", Object.assign({ ref: ref, "aria-labelledby": context.buttonId }, rest),
         react_1.default.createElement(CollapseComponent, { isOpened: context.open },
-            react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-accordion__content", className) }, children))));
+            react_1.default.createElement(typography_1.BodyLong, { as: "div", className: (0, classnames_1.default)("navds-accordion__content", className) }, children))));
 });
 exports.default = AccordionContent;

package/cjs/accordion/AccordionHeader.js

@@ -59,12 +59,8 @@ const AccordionHeader = (0, react_1.forwardRef)((_a, ref) => {
         onClick && onClick(e);
     };
     return (react_1.default.createElement("button", Object.assign({}, rest, { ref: ref, id: context.buttonId, className: (0, classnames_1.default)("navds-accordion__header", className, "navds-heading", "navds-heading--small"), onClick: handleClick, "aria-expanded": context.open }),
-        children,
-        react_1.default.createElement(ds_icons_1.Expand, { "aria-hidden": true, className: (0, classnames_1.default)("navds-accordion__expand-icon", {
-                "navds-accordion__expand-icon--flip": context.open,
-            }) }),
-        react_1.default.createElement(ds_icons_1.ExpandFilled, { "aria-hidden": true, className: (0, classnames_1.default)("navds-accordion__expand-icon", "navds-accordion__expand-icon--filled", {
-                "navds-accordion__expand-icon--flip": context.open,
-            }) })));
+        react_1.default.createElement("span", { className: "navds-accordion__header-content" }, children),
+        react_1.default.createElement(ds_icons_1.Expand, { "aria-hidden": true, className: "navds-accordion__expand-icon" }),
+        react_1.default.createElement(ds_icons_1.ExpandFilled, { "aria-hidden": true, className: "navds-accordion__expand-icon navds-accordion__expand-icon--filled" })));
 });
 exports.default = AccordionHeader;

package/cjs/form/search/Search.js

@@ -43,11 +43,11 @@ const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importStar(require("react"));
 const react_merge_refs_1 = __importDefault(require("react-merge-refs"));
 const __1 = require("../..");
+const useFormField_1 = require("../useFormField");
 const SearchButton_1 = __importDefault(require("./SearchButton"));
-const useSearch_1 = require("./useSearch");
 exports.SearchContext = react_1.default.createContext(null);
 exports.Search = (0, react_1.forwardRef)((props, ref) => {
-    const { inputProps, size = "medium", inputDescriptionId, } = (0, useSearch_1.useSearch)(props, "searchfield");
+    const { inputProps, size = "medium", inputDescriptionId, errorId, showErrorMsg, hasError, } = (0, useFormField_1.useFormField)(props, "searchfield");
     const { className, hideLabel = true, label, description, value, clearButtonLabel, onClear, clearButton = true, children, variant = "primary", defaultValue, onChange } = props, rest = __rest(props, ["className", "hideLabel", "label", "description", "value", "clearButtonLabel", "onClear", "clearButton", "children", "variant", "defaultValue", "onChange"]);
     const searchRef = (0, react_1.useRef)(null);
     const mergedRef = (0, react_merge_refs_1.default)([searchRef, ref]);
@@ -70,6 +70,7 @@ exports.Search = (0, react_1.forwardRef)((props, ref) => {
         }
     }, [handleClear]), wrapperRef);
     return (react_1.default.createElement("div", { ref: setWrapperRef, className: (0, classnames_1.default)(className, "navds-form-field", `navds-form-field--${size}`, "navds-search", {
+            "navds-search--error": hasError,
             "navds-search--disabled": !!inputProps.disabled,
         }) },
         react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, as: "label", className: (0, classnames_1.default)("navds-form-field__label", {
@@ -81,7 +82,7 @@ exports.Search = (0, react_1.forwardRef)((props, ref) => {
         react_1.default.createElement("div", { className: "navds-search__wrapper" },
             react_1.default.createElement("div", { className: "navds-search__wrapper-inner" },
                 variant === "simple" && (react_1.default.createElement(ds_icons_1.Search, { "aria-hidden": true, className: "navds-search__search-icon" })),
-                react_1.default.createElement("input", Object.assign({ ref: mergedRef }, (0, __1.omit)(rest, ["size"]), inputProps, { value: value !== null && value !== void 0 ? value : internalValue, onChange: (e) => handleChange(e.target.value), type: "search", role: "searchbox", className: (0, classnames_1.default)(className, "navds-search__input", `navds-search__input--${variant}`, "navds-text-field__input", "navds-body-short", `navds-body-${size}`) })),
+                react_1.default.createElement("input", Object.assign({ ref: mergedRef }, (0, __1.omit)(rest, ["error", "errorId", "size"]), inputProps, { value: value !== null && value !== void 0 ? value : internalValue, onChange: (e) => handleChange(e.target.value), type: "search", role: "searchbox", className: (0, classnames_1.default)(className, "navds-search__input", `navds-search__input--${variant}`, "navds-text-field__input", "navds-body-short", `navds-body-${size}`) })),
                 (value !== null && value !== void 0 ? value : internalValue) && clearButton && (react_1.default.createElement("button", { type: "button", onClick: (e) => handleClear({ trigger: "Click", event: e }), className: "navds-search__button-clear" },
                     react_1.default.createElement("span", { className: "navds-sr-only" }, clearButtonLabel ? clearButtonLabel : "Tøm"),
                     react_1.default.createElement(ds_icons_1.Close, { "aria-hidden": true })))),
@@ -89,7 +90,8 @@ exports.Search = (0, react_1.forwardRef)((props, ref) => {
                     size,
                     disabled: inputProps.disabled,
                     variant,
-                } }, children ? children : variant !== "simple" && react_1.default.createElement(SearchButton_1.default, null)))));
+                } }, children ? children : variant !== "simple" && react_1.default.createElement(SearchButton_1.default, null))),
+        react_1.default.createElement("div", { className: "navds-form-field__error", id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && (react_1.default.createElement(__1.ErrorMessage, { size: size }, props.error)))));
 });
 exports.Search.Button = SearchButton_1.default;
 exports.default = exports.Search;

package/esm/accordion/AccordionContent.js

@@ -12,6 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cl from "classnames";
 import React, { forwardRef, useContext } from "react";
 import { Collapse, UnmountClosed } from "react-collapse";
+import { BodyLong } from "../typography";
 import { AccordionItemContext } from "./AccordionItem";
 const AccordionContent = forwardRef((_a, ref) => {
     var { children, className, id } = _a, rest = __rest(_a, ["children", "className", "id"]);
@@ -25,7 +26,7 @@ const AccordionContent = forwardRef((_a, ref) => {
         : UnmountClosed;
     return (React.createElement("div", Object.assign({ ref: ref, "aria-labelledby": context.buttonId }, rest),
         React.createElement(CollapseComponent, { isOpened: context.open },
-            React.createElement("div", { className: cl("navds-accordion__content", className) }, children))));
+            React.createElement(BodyLong, { as: "div", className: cl("navds-accordion__content", className) }, children))));
 });
 export default AccordionContent;
 //# sourceMappingURL=AccordionContent.js.map

package/esm/accordion/AccordionContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionContent.js","sourceRoot":"","sources":["../../src/accordion/AccordionContent.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAgBvD,MAAM,gBAAgB,GAAyB,UAAU,CACvD,CAAC,EAAoC,EAAE,GAAG,EAAE,EAAE;QAA7C,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,OAAW,EAAN,IAAI,cAAlC,+BAAoC,CAAF;IACjC,MAAM,OAAO,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAEjD,IAAI,OAAO,KAAK,IAAI,EAAE;QACpB,OAAO,CAAC,KAAK,CACX,+DAA+D,CAChE,CAAC;QACF,OAAO,IAAI,CAAC;KACb;IAED,MAAM,iBAAiB,GAAG,OAAO,CAAC,uBAAuB;QACvD,CAAC,CAAC,QAAQ;QACV,CAAC,CAAC,aAAa,CAAC;IAElB,OAAO,CACL,2CAAK,GAAG,EAAE,GAAG,qBAAmB,OAAO,CAAC,QAAQ,IAAM,IAAI;QACxD,oBAAC,iBAAiB,IAAC,QAAQ,EAAE,OAAO,CAAC,IAAI;YACvC,6BAAK,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,SAAS,CAAC,IACtD,QAAQ,CACL,CACY,CAChB,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"AccordionContent.js","sourceRoot":"","sources":["../../src/accordion/AccordionContent.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAgBvD,MAAM,gBAAgB,GAAyB,UAAU,CACvD,CAAC,EAAoC,EAAE,GAAG,EAAE,EAAE;QAA7C,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,OAAW,EAAN,IAAI,cAAlC,+BAAoC,CAAF;IACjC,MAAM,OAAO,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAEjD,IAAI,OAAO,KAAK,IAAI,EAAE;QACpB,OAAO,CAAC,KAAK,CACX,+DAA+D,CAChE,CAAC;QACF,OAAO,IAAI,CAAC;KACb;IAED,MAAM,iBAAiB,GAAG,OAAO,CAAC,uBAAuB;QACvD,CAAC,CAAC,QAAQ;QACV,CAAC,CAAC,aAAa,CAAC;IAElB,OAAO,CACL,2CAAK,GAAG,EAAE,GAAG,qBAAmB,OAAO,CAAC,QAAQ,IAAM,IAAI;QACxD,oBAAC,iBAAiB,IAAC,QAAQ,EAAE,OAAO,CAAC,IAAI;YACvC,oBAAC,QAAQ,IACP,EAAE,EAAC,KAAK,EACR,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,SAAS,CAAC,IAEnD,QAAQ,CACA,CACO,CAChB,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/esm/accordion/AccordionHeader.js

@@ -31,13 +31,9 @@ const AccordionHeader = forwardRef((_a, ref) => {
         onClick && onClick(e);
     };
     return (React.createElement("button", Object.assign({}, rest, { ref: ref, id: context.buttonId, className: cl("navds-accordion__header", className, "navds-heading", "navds-heading--small"), onClick: handleClick, "aria-expanded": context.open }),
-        children,
-        React.createElement(Expand, { "aria-hidden": true, className: cl("navds-accordion__expand-icon", {
-                "navds-accordion__expand-icon--flip": context.open,
-            }) }),
-        React.createElement(ExpandFilled, { "aria-hidden": true, className: cl("navds-accordion__expand-icon", "navds-accordion__expand-icon--filled", {
-                "navds-accordion__expand-icon--flip": context.open,
-            }) })));
+        React.createElement("span", { className: "navds-accordion__header-content" }, children),
+        React.createElement(Expand, { "aria-hidden": true, className: "navds-accordion__expand-icon" }),
+        React.createElement(ExpandFilled, { "aria-hidden": true, className: "navds-accordion__expand-icon navds-accordion__expand-icon--filled" })));
 });
 export default AccordionHeader;
 //# sourceMappingURL=AccordionHeader.js.map

package/esm/accordion/AccordionHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHeader.js","sourceRoot":"","sources":["../../src/accordion/AccordionHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AAclD,MAAM,eAAe,GAAwB,UAAU,CACrD,CAAC,EAA6C,EAAE,GAAG,EAAE,EAAE;QAAtD,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,OAAO,OAAW,EAAN,IAAI,cAA3C,0CAA6C,CAAF;IAC1C,MAAM,OAAO,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IACjD,MAAM,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC;IAExB,MAAM,WAAW,GAAG,OAAO,IAAI,OAAO,CAAC,WAAW,CAAC;IAEnD,qBAAqB,CAAC,GAAG,EAAE;QACzB,WAAW,IAAI,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,oBAAoB,KAAK,EAAE,CAAC,CAAC;IACvE,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,IAAI,OAAO,KAAK,IAAI,EAAE;QACpB,OAAO,CAAC,KAAK,CACX,8DAA8D,CAC/D,CAAC;QACF,OAAO,IAAI,CAAC;KACb;IAED,MAAM,WAAW,GAAG,CAClB,CAAkD,EAClD,EAAE;QACF,OAAO,CAAC,UAAU,EAAE,CAAC;QACrB,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,OAAO,CACL,gDACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,OAAO,CAAC,QAAQ,EACpB,SAAS,EAAE,EAAE,CACX,yBAAyB,EACzB,SAAS,EACT,eAAe,EACf,sBAAsB,CACvB,EACD,OAAO,EAAE,WAAW,mBACL,OAAO,CAAC,IAAI;QAE1B,QAAQ;QACT,oBAAC,MAAM,yBAEL,SAAS,EAAE,EAAE,CAAC,8BAA8B,EAAE;gBAC5C,oCAAoC,EAAE,OAAO,CAAC,IAAI;aACnD,CAAC,GACF;QACF,oBAAC,YAAY,yBAEX,SAAS,EAAE,EAAE,CACX,8BAA8B,EAC9B,sCAAsC,EACtC;gBACE,oCAAoC,EAAE,OAAO,CAAC,IAAI;aACnD,CACF,GACD,CACK,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"AccordionHeader.js","sourceRoot":"","sources":["../../src/accordion/AccordionHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AAclD,MAAM,eAAe,GAAwB,UAAU,CACrD,CAAC,EAA6C,EAAE,GAAG,EAAE,EAAE;QAAtD,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE,OAAO,OAAW,EAAN,IAAI,cAA3C,0CAA6C,CAAF;IAC1C,MAAM,OAAO,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IACjD,MAAM,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC;IAExB,MAAM,WAAW,GAAG,OAAO,IAAI,OAAO,CAAC,WAAW,CAAC;IAEnD,qBAAqB,CAAC,GAAG,EAAE;QACzB,WAAW,IAAI,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,oBAAoB,KAAK,EAAE,CAAC,CAAC;IACvE,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,IAAI,OAAO,KAAK,IAAI,EAAE;QACpB,OAAO,CAAC,KAAK,CACX,8DAA8D,CAC/D,CAAC;QACF,OAAO,IAAI,CAAC;KACb;IAED,MAAM,WAAW,GAAG,CAClB,CAAkD,EAClD,EAAE;QACF,OAAO,CAAC,UAAU,EAAE,CAAC;QACrB,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,OAAO,CACL,gDACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,OAAO,CAAC,QAAQ,EACpB,SAAS,EAAE,EAAE,CACX,yBAAyB,EACzB,SAAS,EACT,eAAe,EACf,sBAAsB,CACvB,EACD,OAAO,EAAE,WAAW,mBACL,OAAO,CAAC,IAAI;QAE3B,8BAAM,SAAS,EAAC,iCAAiC,IAAE,QAAQ,CAAQ;QACnE,oBAAC,MAAM,yBAAa,SAAS,EAAC,8BAA8B,GAAG;QAC/D,oBAAC,YAAY,yBAEX,SAAS,EAAC,mEAAmE,GAC7E,CACK,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/esm/form/search/Search.d.ts

@@ -8,7 +8,7 @@ export declare type SearchClearEvent = {
     trigger: "Escape";
     event: React.KeyboardEvent<HTMLDivElement>;
 };
-export interface SearchProps extends Omit<FormFieldProps, "error" | "errorId">, Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
+export interface SearchProps extends FormFieldProps, Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
     children?: React.ReactNode;
     /**
      * Search label

package/esm/form/search/Search.js

@@ -13,12 +13,12 @@ import { Close, Search as SearchIcon } from "@navikt/ds-icons";
 import cl from "classnames";
 import React, { forwardRef, useCallback, useRef, useState, } from "react";
 import mergeRefs from "react-merge-refs";
-import { BodyShort, Label, omit, useEventListener } from "../..";
+import { BodyShort, ErrorMessage, Label, omit, useEventListener } from "../..";
+import { useFormField } from "../useFormField";
 import SearchButton from "./SearchButton";
-import { useSearch } from "./useSearch";
 export const SearchContext = React.createContext(null);
 export const Search = forwardRef((props, ref) => {
-    const { inputProps, size = "medium", inputDescriptionId, } = useSearch(props, "searchfield");
+    const { inputProps, size = "medium", inputDescriptionId, errorId, showErrorMsg, hasError, } = useFormField(props, "searchfield");
     const { className, hideLabel = true, label, description, value, clearButtonLabel, onClear, clearButton = true, children, variant = "primary", defaultValue, onChange } = props, rest = __rest(props, ["className", "hideLabel", "label", "description", "value", "clearButtonLabel", "onClear", "clearButton", "children", "variant", "defaultValue", "onChange"]);
     const searchRef = useRef(null);
     const mergedRef = mergeRefs([searchRef, ref]);
@@ -41,6 +41,7 @@ export const Search = forwardRef((props, ref) => {
         }
     }, [handleClear]), wrapperRef);
     return (React.createElement("div", { ref: setWrapperRef, className: cl(className, "navds-form-field", `navds-form-field--${size}`, "navds-search", {
+            "navds-search--error": hasError,
             "navds-search--disabled": !!inputProps.disabled,
         }) },
         React.createElement(Label, { htmlFor: inputProps.id, size: size, as: "label", className: cl("navds-form-field__label", {
@@ -52,7 +53,7 @@ export const Search = forwardRef((props, ref) => {
         React.createElement("div", { className: "navds-search__wrapper" },
             React.createElement("div", { className: "navds-search__wrapper-inner" },
                 variant === "simple" && (React.createElement(SearchIcon, { "aria-hidden": true, className: "navds-search__search-icon" })),
-                React.createElement("input", Object.assign({ ref: mergedRef }, omit(rest, ["size"]), inputProps, { value: value !== null && value !== void 0 ? value : internalValue, onChange: (e) => handleChange(e.target.value), type: "search", role: "searchbox", className: cl(className, "navds-search__input", `navds-search__input--${variant}`, "navds-text-field__input", "navds-body-short", `navds-body-${size}`) })),
+                React.createElement("input", Object.assign({ ref: mergedRef }, omit(rest, ["error", "errorId", "size"]), inputProps, { value: value !== null && value !== void 0 ? value : internalValue, onChange: (e) => handleChange(e.target.value), type: "search", role: "searchbox", className: cl(className, "navds-search__input", `navds-search__input--${variant}`, "navds-text-field__input", "navds-body-short", `navds-body-${size}`) })),
                 (value !== null && value !== void 0 ? value : internalValue) && clearButton && (React.createElement("button", { type: "button", onClick: (e) => handleClear({ trigger: "Click", event: e }), className: "navds-search__button-clear" },
                     React.createElement("span", { className: "navds-sr-only" }, clearButtonLabel ? clearButtonLabel : "Tøm"),
                     React.createElement(Close, { "aria-hidden": true })))),
@@ -60,7 +61,8 @@ export const Search = forwardRef((props, ref) => {
                     size,
                     disabled: inputProps.disabled,
                     variant,
-                } }, children ? children : variant !== "simple" && React.createElement(SearchButton, null)))));
+                } }, children ? children : variant !== "simple" && React.createElement(SearchButton, null))),
+        React.createElement("div", { className: "navds-form-field__error", id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && (React.createElement(ErrorMessage, { size: size }, props.error)))));
 });
 Search.Button = SearchButton;
 export default Search;

package/esm/form/search/Search.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.19.16",
+  "version": "0.19.19",
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
   "license": "MIT",
@@ -37,7 +37,7 @@
   "dependencies": {
     "@floating-ui/react-dom": "0.6.0",
     "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.8.17",
+    "@navikt/ds-icons": "^0.8.18",
     "@popperjs/core": "^2.10.1",
     "@radix-ui/react-tabs": "0.1.5",
     "@radix-ui/react-toggle-group": "0.1.5",
@@ -76,5 +76,5 @@
     "@types/react": "^17.0.30 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0"
   },
-  "gitHead": "4f437d4e15befce3aef21440141ad7d36138219d"
+  "gitHead": "43251ae7c36ecc5f62a431326adbffe4970c38ff"
 }

package/src/accordion/AccordionContent.tsx

@@ -1,6 +1,7 @@
 import cl from "classnames";
 import React, { forwardRef, useContext } from "react";
 import { Collapse, UnmountClosed } from "react-collapse";
+import { BodyLong } from "../typography";
 import { AccordionItemContext } from "./AccordionItem";
 
 export interface AccordionContentProps
@@ -35,9 +36,12 @@ const AccordionContent: AccordionContentType = forwardRef(
     return (
       <div ref={ref} aria-labelledby={context.buttonId} {...rest}>
         <CollapseComponent isOpened={context.open}>
-          <div className={cl("navds-accordion__content", className)}>
+          <BodyLong
+            as="div"
+            className={cl("navds-accordion__content", className)}
+          >
             {children}
-          </div>
+          </BodyLong>
         </CollapseComponent>
       </div>
     );

package/src/accordion/AccordionHeader.tsx

@@ -55,22 +55,11 @@ const AccordionHeader: AccordionHeaderType = forwardRef(
         onClick={handleClick}
         aria-expanded={context.open}
       >
-        {children}
-        <Expand
-          aria-hidden
-          className={cl("navds-accordion__expand-icon", {
-            "navds-accordion__expand-icon--flip": context.open,
-          })}
-        />
+        <span className="navds-accordion__header-content">{children}</span>
+        <Expand aria-hidden className="navds-accordion__expand-icon" />
         <ExpandFilled
           aria-hidden
-          className={cl(
-            "navds-accordion__expand-icon",
-            "navds-accordion__expand-icon--filled",
-            {
-              "navds-accordion__expand-icon--flip": context.open,
-            }
-          )}
+          className="navds-accordion__expand-icon navds-accordion__expand-icon--filled"
         />
       </button>
     );

package/src/form/search/Search.tsx

@@ -8,10 +8,9 @@ import React, {
   useState,
 } from "react";
 import mergeRefs from "react-merge-refs";
-import { BodyShort, Label, omit, useEventListener } from "../..";
-import { FormFieldProps } from "../useFormField";
+import { BodyShort, ErrorMessage, Label, omit, useEventListener } from "../..";
+import { FormFieldProps, useFormField } from "../useFormField";
 import SearchButton, { SearchButtonType } from "./SearchButton";
-import { useSearch } from "./useSearch";
 
 export type SearchClearEvent =
   | {
@@ -21,7 +20,7 @@ export type SearchClearEvent =
   | { trigger: "Escape"; event: React.KeyboardEvent<HTMLDivElement> };
 
 export interface SearchProps
-  extends Omit<FormFieldProps, "error" | "errorId">,
+  extends FormFieldProps,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
   children?: React.ReactNode;
   /**
@@ -82,7 +81,10 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       inputProps,
       size = "medium",
       inputDescriptionId,
-    } = useSearch(props, "searchfield");
+      errorId,
+      showErrorMsg,
+      hasError,
+    } = useFormField(props, "searchfield");
 
     const {
       className,
@@ -146,6 +148,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
           `navds-form-field--${size}`,
           "navds-search",
           {
+            "navds-search--error": hasError,
             "navds-search--disabled": !!inputProps.disabled,
           }
         )}
@@ -179,7 +182,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
             )}
             <input
               ref={mergedRef}
-              {...omit(rest, ["size"])}
+              {...omit(rest, ["error", "errorId", "size"])}
               {...inputProps}
               value={value ?? internalValue}
               onChange={(e) => handleChange(e.target.value)}
@@ -217,6 +220,16 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
             {children ? children : variant !== "simple" && <SearchButton />}
           </SearchContext.Provider>
         </div>
+        <div
+          className="navds-form-field__error"
+          id={errorId}
+          aria-relevant="additions removals"
+          aria-live="polite"
+        >
+          {showErrorMsg && (
+            <ErrorMessage size={size}>{props.error}</ErrorMessage>
+          )}
+        </div>
       </div>
     );
   }

package/src/form/search/search.stories.tsx

@@ -23,6 +23,11 @@ export default {
         options: ["primary", "secondary", "simple"],
       },
     },
+    error: {
+      control: {
+        type: "text",
+      },
+    },
   },
 } as Meta;
 
@@ -38,6 +43,7 @@ export const Default = (props) => {
         clearButton={props.clearButton}
         variant={props.variant}
         hideLabel={props.hideLabel}
+        error={props.error}
       />
     </div>
   );
@@ -79,6 +85,21 @@ export const Variants = () => (
   </div>
 );
 
+export const ErrorVariants = () => (
+  <div className="rowgap">
+    <div className="colgap">
+      <Search error="errormsg" label="Søk" />
+      <Search error="errormsg" label="Søk" variant="secondary" />
+      <Search error="errormsg" label="Søk" variant="simple" />
+    </div>
+    <div className="colgap" data-theme="dark">
+      <Search error="errormsg" label="Søk" />
+      <Search error="errormsg" label="Søk" variant="secondary" />
+      <Search error="errormsg" label="Søk" variant="simple" />
+    </div>
+  </div>
+);
+
 export const Placeholder = () => (
   <div className="rowgap">
     <div className="colgap">

package/src/read-more/readmore.stories.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { ReadMore } from ".";
+import { BodyShort } from "..";
 
 export default {
   title: "ds-react/ReadMore",
@@ -24,8 +25,14 @@ export const Default = (props) => {
       header="Grunnen til at vi spør om dette og i tillegg ber om vedlegg"
       {...props}
     >
-      Command station, this is ST 321. Code Clearance Blue. We're starting our
-      approach. Deactivate the security shield.
+      <BodyShort>
+        Command station, this is ST 321. Code Clearance Blue. We're starting our
+        approach. Deactivate the security shield.
+      </BodyShort>
+      <BodyShort>
+        Command station, this is ST 321. Code Clearance Blue. We're starting our
+        approach. Deactivate the security shield.
+      </BodyShort>
     </ReadMore>
   );
 };

package/cjs/form/search/useSearch.js

@@ -1,31 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSearch = void 0;
-const classnames_1 = __importDefault(require("classnames"));
-const react_1 = require("react");
-const index_1 = require("../../index");
-const index_2 = require("../index");
-const useSearch = (props, prefix) => {
-    var _a, _b;
-    const { size } = props;
-    const fieldset = (0, react_1.useContext)(index_2.FieldsetContext);
-    const genId = (0, index_1.useId)();
-    const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${prefix}-${genId}`;
-    const inputDescriptionId = `${prefix}-description-${genId}`;
-    const disabled = (fieldset === null || fieldset === void 0 ? void 0 : fieldset.disabled) || props.disabled;
-    return {
-        inputDescriptionId,
-        size: (_b = size !== null && size !== void 0 ? size : fieldset === null || fieldset === void 0 ? void 0 : fieldset.size) !== null && _b !== void 0 ? _b : "medium",
-        inputProps: {
-            id,
-            "aria-describedby": (0, classnames_1.default)(props["aria-describedby"], {
-                [inputDescriptionId]: !!(props === null || props === void 0 ? void 0 : props.description),
-            }) || undefined,
-            disabled,
-        },
-    };
-};
-exports.useSearch = useSearch;

package/esm/form/search/useSearch.d.ts

@@ -1,10 +0,0 @@
-import { FormFieldProps } from "../useFormField";
-export declare const useSearch: (props: FormFieldProps, prefix: string) => {
-    inputDescriptionId: string;
-    size: "small" | "medium";
-    inputProps: {
-        id: string;
-        "aria-describedby": string | undefined;
-        disabled: boolean | undefined;
-    };
-};

package/esm/form/search/useSearch.js

@@ -1,25 +0,0 @@
-import cl from "classnames";
-import { useContext } from "react";
-import { useId } from "../../index";
-import { FieldsetContext } from "../index";
-export const useSearch = (props, prefix) => {
-    var _a, _b;
-    const { size } = props;
-    const fieldset = useContext(FieldsetContext);
-    const genId = useId();
-    const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${prefix}-${genId}`;
-    const inputDescriptionId = `${prefix}-description-${genId}`;
-    const disabled = (fieldset === null || fieldset === void 0 ? void 0 : fieldset.disabled) || props.disabled;
-    return {
-        inputDescriptionId,
-        size: (_b = size !== null && size !== void 0 ? size : fieldset === null || fieldset === void 0 ? void 0 : fieldset.size) !== null && _b !== void 0 ? _b : "medium",
-        inputProps: {
-            id,
-            "aria-describedby": cl(props["aria-describedby"], {
-                [inputDescriptionId]: !!(props === null || props === void 0 ? void 0 : props.description),
-            }) || undefined,
-            disabled,
-        },
-    };
-};
-//# sourceMappingURL=useSearch.js.map

package/esm/form/search/useSearch.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSearch.js","sourceRoot":"","sources":["../../../src/form/search/useSearch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAG3C,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,MAAc,EAAE,EAAE;;IACjE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAEvB,MAAM,QAAQ,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAE7C,MAAM,KAAK,GAAG,KAAK,EAAE,CAAC;IAEtB,MAAM,EAAE,GAAG,MAAA,KAAK,CAAC,EAAE,mCAAI,GAAG,MAAM,IAAI,KAAK,EAAE,CAAC;IAC5C,MAAM,kBAAkB,GAAG,GAAG,MAAM,gBAAgB,KAAK,EAAE,CAAC;IAE5D,MAAM,QAAQ,GAAG,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,KAAI,KAAK,CAAC,QAAQ,CAAC;IAEtD,OAAO;QACL,kBAAkB;QAClB,IAAI,EAAE,MAAA,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,mCAAI,QAAQ;QACxC,UAAU,EAAE;YACV,EAAE;YACF,kBAAkB,EAChB,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC,EAAE;gBAC5B,CAAC,kBAAkB,CAAC,EAAE,CAAC,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,CAAA;aAC3C,CAAC,IAAI,SAAS;YACjB,QAAQ;SACT;KACF,CAAC;AACJ,CAAC,CAAC"}

package/src/form/search/useSearch.ts

@@ -1,31 +0,0 @@
-import cl from "classnames";
-import { useContext } from "react";
-import { useId } from "../../index";
-import { FieldsetContext } from "../index";
-import { FormFieldProps } from "../useFormField";
-
-export const useSearch = (props: FormFieldProps, prefix: string) => {
-  const { size } = props;
-
-  const fieldset = useContext(FieldsetContext);
-
-  const genId = useId();
-
-  const id = props.id ?? `${prefix}-${genId}`;
-  const inputDescriptionId = `${prefix}-description-${genId}`;
-
-  const disabled = fieldset?.disabled || props.disabled;
-
-  return {
-    inputDescriptionId,
-    size: size ?? fieldset?.size ?? "medium",
-    inputProps: {
-      id,
-      "aria-describedby":
-        cl(props["aria-describedby"], {
-          [inputDescriptionId]: !!props?.description,
-        }) || undefined,
-      disabled,
-    },
-  };
-};