@navikt/ds-react 0.19.7 → 0.19.10

package/_docs.json

@@ -1723,6 +1723,25 @@
           "name": "boolean"
         }
       },
+      "resize": {
+        "defaultValue": null,
+        "description": "Enables resizing of field",
+        "name": "resize",
+        "parent": {
+          "fileName": "src/form/Textarea.tsx",
+          "name": "TextareaProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/form/Textarea.tsx",
+            "name": "TextareaProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "error": {
         "defaultValue": null,
         "description": "Error message for element",
@@ -2764,7 +2783,7 @@
         ],
         "required": false,
         "type": {
-          "name": "\"2xlarge\" | \"xlarge\" | \"large\" | \"medium\" | \"small\" | \"xsmall\""
+          "name": "\"3xlarge\" | \"2xlarge\" | \"xlarge\" | \"large\" | \"medium\" | \"small\" | \"xsmall\""
         }
       },
       "title": {

package/cjs/form/Textarea.js

@@ -47,13 +47,21 @@ const __2 = require("..");
 exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
     var _a, _b, _c;
     const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = (0, useFormField_1.useFormField)(props, "textarea");
-    const { label, className, description, maxLength, hideLabel = false } = props, rest = __rest(props, ["label", "className", "description", "maxLength", "hideLabel"]);
+    const { label, className, description, maxLength, hideLabel = false, resize } = props, rest = __rest(props, ["label", "className", "description", "maxLength", "hideLabel", "resize"]);
     const maxLengthId = `TextareaMaxLength-${(0, __2.useId)()}`;
     const hasMaxLength = maxLength !== undefined && maxLength > 0;
     const [controlledValue, setControlledValue] = (0, react_1.useState)((_a = props === null || props === void 0 ? void 0 : props.defaultValue) !== null && _a !== void 0 ? _a : "");
+    const getMinRows = () => {
+        let rows = (rest === null || rest === void 0 ? void 0 : rest.minRows) && (rest === null || rest === void 0 ? void 0 : rest.minRows) >= 3 ? rest === null || rest === void 0 ? void 0 : rest.minRows : 3;
+        if (size === "small") {
+            rows = (rest === null || rest === void 0 ? void 0 : rest.minRows) && (rest === null || rest === void 0 ? void 0 : rest.minRows) >= 2 ? rest === null || rest === void 0 ? void 0 : rest.minRows : 2;
+        }
+        return rows;
+    };
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)(className, "navds-form-field", `navds-form-field--${size}`, {
             "navds-textarea--error": hasError,
             "navds-textarea--disabled": !!inputProps.disabled,
+            "navds-textarea--resize": resize,
         }) },
         react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, as: "label", className: (0, classnames_1.default)("navds-textarea__label", {
                 "navds-sr-only": hideLabel,
@@ -64,7 +72,7 @@ exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
         react_1.default.createElement("div", { className: "navds-textarea__wrapper" },
             react_1.default.createElement(TextareaAutosize_1.default, Object.assign({}, (0, __1.omit)(rest, ["error", "errorId", "size"]), inputProps, { onChange: (e) => props.onChange
                     ? props.onChange(e)
-                    : setControlledValue(e.target.value), ref: ref, className: (0, classnames_1.default)("navds-textarea__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`, {
+                    : setControlledValue(e.target.value), minRows: getMinRows(), ref: ref, className: (0, classnames_1.default)("navds-textarea__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`, {
                     "navds-textarea--counter": hasMaxLength,
                 }), "aria-describedby": (0, classnames_1.default)(inputProps["aria-describedby"], {
                     [maxLengthId]: hasMaxLength,
@@ -85,8 +93,8 @@ const Counter = ({ maxLength, currentLength, size }) => {
     return (react_1.default.createElement(__1.BodyShort, { className: (0, classnames_1.default)("navds-textarea__counter", {
             "navds-textarea__counter--error": difference < 0,
         }), "aria-live": difference < 20 ? "polite" : "off", size: size }, difference < 0
-        ? `Du har ${Math.abs(difference)} tegn for mye`
-        : `Du har ${difference} tegn igjen`));
+        ? `Antall tegn for mye ${Math.abs(difference)}`
+        : `Antall tegn igjen ${difference}`));
 };
 exports.Counter = Counter;
 exports.default = exports.Textarea;

package/cjs/loader/Loader.js

@@ -48,7 +48,7 @@ exports.Loader = (0, react_1.forwardRef)((_a, ref) => {
             "navds-loader--transparent": transparent,
         }), focusable: "false", viewBox: "0 0 50 50", preserveAspectRatio: "xMidYMid" }, rest),
         react_1.default.createElement("title", { id: id !== null && id !== void 0 ? id : `loader-${internalId}` }, title),
-        react_1.default.createElement("circle", { className: "navds-loader__background", xmlns: "http://www.w3.org/2000/svg", cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "5" }),
-        react_1.default.createElement("circle", { className: "navds-loader__foreground", cx: "25", cy: "25", r: "20", stroke: "var(--navds-global-color-gray-400)", fill: "none", strokeWidth: "5", strokeDasharray: "50 155", strokeLinecap: "round" })));
+        react_1.default.createElement("circle", { className: "navds-loader__background", xmlns: "http://www.w3.org/2000/svg", cx: "25", cy: "25", r: "20", fill: "none" }),
+        react_1.default.createElement("circle", { className: "navds-loader__foreground", cx: "25", cy: "25", r: "20", stroke: "var(--navds-global-color-gray-400)", fill: "none", strokeDasharray: "50 155" })));
 });
 exports.default = exports.Loader;

package/esm/form/Textarea.d.ts

@@ -34,6 +34,10 @@ export interface TextareaProps extends FormFieldProps, React.TextareaHTMLAttribu
      * If enabled shows the label and description for screenreaders only
      */
     hideLabel?: boolean;
+    /**
+     * Enables resizing of field
+     */
+    resize?: boolean;
 }
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export declare const Counter: ({ maxLength, currentLength, size }: {

package/esm/form/Textarea.js

@@ -18,13 +18,21 @@ import { useId } from "..";
 export const Textarea = forwardRef((props, ref) => {
     var _a, _b, _c;
     const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = useFormField(props, "textarea");
-    const { label, className, description, maxLength, hideLabel = false } = props, rest = __rest(props, ["label", "className", "description", "maxLength", "hideLabel"]);
+    const { label, className, description, maxLength, hideLabel = false, resize } = props, rest = __rest(props, ["label", "className", "description", "maxLength", "hideLabel", "resize"]);
     const maxLengthId = `TextareaMaxLength-${useId()}`;
     const hasMaxLength = maxLength !== undefined && maxLength > 0;
     const [controlledValue, setControlledValue] = useState((_a = props === null || props === void 0 ? void 0 : props.defaultValue) !== null && _a !== void 0 ? _a : "");
+    const getMinRows = () => {
+        let rows = (rest === null || rest === void 0 ? void 0 : rest.minRows) && (rest === null || rest === void 0 ? void 0 : rest.minRows) >= 3 ? rest === null || rest === void 0 ? void 0 : rest.minRows : 3;
+        if (size === "small") {
+            rows = (rest === null || rest === void 0 ? void 0 : rest.minRows) && (rest === null || rest === void 0 ? void 0 : rest.minRows) >= 2 ? rest === null || rest === void 0 ? void 0 : rest.minRows : 2;
+        }
+        return rows;
+    };
     return (React.createElement("div", { className: cl(className, "navds-form-field", `navds-form-field--${size}`, {
             "navds-textarea--error": hasError,
             "navds-textarea--disabled": !!inputProps.disabled,
+            "navds-textarea--resize": resize,
         }) },
         React.createElement(Label, { htmlFor: inputProps.id, size: size, as: "label", className: cl("navds-textarea__label", {
                 "navds-sr-only": hideLabel,
@@ -35,7 +43,7 @@ export const Textarea = forwardRef((props, ref) => {
         React.createElement("div", { className: "navds-textarea__wrapper" },
             React.createElement(TextareaAutosize, Object.assign({}, omit(rest, ["error", "errorId", "size"]), inputProps, { onChange: (e) => props.onChange
                     ? props.onChange(e)
-                    : setControlledValue(e.target.value), ref: ref, className: cl("navds-textarea__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`, {
+                    : setControlledValue(e.target.value), minRows: getMinRows(), ref: ref, className: cl("navds-textarea__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`, {
                     "navds-textarea--counter": hasMaxLength,
                 }), "aria-describedby": cl(inputProps["aria-describedby"], {
                     [maxLengthId]: hasMaxLength,
@@ -56,8 +64,8 @@ export const Counter = ({ maxLength, currentLength, size }) => {
     return (React.createElement(BodyShort, { className: cl("navds-textarea__counter", {
             "navds-textarea__counter--error": difference < 0,
         }), "aria-live": difference < 20 ? "polite" : "off", size: size }, difference < 0
-        ? `Du har ${Math.abs(difference)} tegn for mye`
-        : `Du har ${difference} tegn igjen`));
+        ? `Antall tegn for mye ${Math.abs(difference)}`
+        : `Antall tegn igjen ${difference}`));
 };
 export default Textarea;
 //# sourceMappingURL=Textarea.js.map

package/esm/form/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/form/Textarea.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,gBAAgB,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AAC1D,OAAO,EAAkB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AAwC3B,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;;IACb,MAAM,EACJ,UAAU,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,kBAAkB,GACnB,GAAG,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;IAEpC,MAAM,EACJ,KAAK,EACL,SAAS,EACT,WAAW,EACX,SAAS,EACT,SAAS,GAAG,KAAK,KAEf,KAAK,EADJ,IAAI,UACL,KAAK,EAPH,+DAOL,CAAQ,CAAC;IAEV,MAAM,WAAW,GAAG,qBAAqB,KAAK,EAAE,EAAE,CAAC;IACnD,MAAM,YAAY,GAAG,SAAS,KAAK,SAAS,IAAI,SAAS,GAAG,CAAC,CAAC;IAE9D,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CACpD,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAY,mCAAI,EAAE,CAC1B,CAAC;IAEF,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,SAAS,EACT,kBAAkB,EAClB,qBAAqB,IAAI,EAAE,EAC3B;YACE,uBAAuB,EAAE,QAAQ;YACjC,0BAA0B,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ;SAClD,CACF;QAED,oBAAC,KAAK,IACJ,OAAO,EAAE,UAAU,CAAC,EAAE,EACtB,IAAI,EAAE,IAAI,EACV,EAAE,EAAC,OAAO,EACV,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE;gBACrC,eAAe,EAAE,SAAS;aAC3B,CAAC,IAED,KAAK,CACA;QACP,CAAC,CAAC,WAAW,IAAI,CAChB,oBAAC,SAAS,IACR,EAAE,EAAC,KAAK,EACR,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE;gBAC3C,eAAe,EAAE,SAAS;aAC3B,CAAC,EACF,EAAE,EAAE,kBAAkB,EACtB,IAAI,EAAE,IAAI,IAET,WAAW,CACF,CACb;QACD,6BAAK,SAAS,EAAC,yBAAyB;YACtC,oBAAC,gBAAgB,oBACX,IAAI,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,EACxC,UAAU,IACd,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CACd,KAAK,CAAC,QAAQ;oBACZ,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;oBACnB,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAExC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,uBAAuB,EACvB,kBAAkB,EAClB,cAAc,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,QAAQ,EAAE,EAChC;oBACE,yBAAyB,EAAE,YAAY;iBACxC,CACF,sBACiB,EAAE,CAAC,UAAU,CAAC,kBAAkB,CAAC,EAAE;oBACnD,CAAC,WAAW,CAAC,EAAE,YAAY;iBAC5B,CAAC,IACF;YACD,YAAY,IAAI,CACf;gBACE,8BAAM,EAAE,EAAE,WAAW,EAAE,SAAS,EAAC,eAAe;;oBACnB,SAAS;;oBAA2B,GAAG;oBACjE,SAAS;8BACL;gBACP,oBAAC,OAAO,IACN,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,MAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,MAAM,mCAAI,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,MAAM,EAC7D,IAAI,EAAE,IAAI,GACV,CACD,CACJ,CACG;QACN,6BAAK,EAAE,EAAE,OAAO,mBAAgB,oBAAoB,eAAW,QAAQ,IACpE,YAAY,IAAI,CACf,oBAAC,YAAY,IAAC,IAAI,EAAE,IAAI,IAAG,KAAK,CAAC,KAAK,CAAgB,CACvD,CACG,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,EAAE,EAAE;IAC5D,MAAM,UAAU,GAAG,SAAS,GAAG,aAAa,CAAC;IAE7C,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE;YACvC,gCAAgC,EAAE,UAAU,GAAG,CAAC;SACjD,CAAC,eACS,UAAU,GAAG,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAC7C,IAAI,EAAE,IAAI,IAET,UAAU,GAAG,CAAC;QACb,CAAC,CAAC,UAAU,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,eAAe;QAC/C,CAAC,CAAC,UAAU,UAAU,aAAa,CAC3B,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/form/Textarea.tsx"],"names":[],"mappings":"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"}

package/esm/loader/Loader.d.ts

@@ -5,7 +5,7 @@ export interface LoaderProps extends SVGProps<SVGSVGElement> {
      * 64px | 40px | 32px | 24px | 20px | 16px
      * @default "medium"
      */
-    size?: "2xlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall";
+    size?: "3xlarge" | "2xlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall";
     /**
      * Title prop on svg
      * @default "venter..."

package/esm/loader/Loader.js

@@ -19,8 +19,8 @@ export const Loader = forwardRef((_a, ref) => {
             "navds-loader--transparent": transparent,
         }), focusable: "false", viewBox: "0 0 50 50", preserveAspectRatio: "xMidYMid" }, rest),
         React.createElement("title", { id: id !== null && id !== void 0 ? id : `loader-${internalId}` }, title),
-        React.createElement("circle", { className: "navds-loader__background", xmlns: "http://www.w3.org/2000/svg", cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "5" }),
-        React.createElement("circle", { className: "navds-loader__foreground", cx: "25", cy: "25", r: "20", stroke: "var(--navds-global-color-gray-400)", fill: "none", strokeWidth: "5", strokeDasharray: "50 155", strokeLinecap: "round" })));
+        React.createElement("circle", { className: "navds-loader__background", xmlns: "http://www.w3.org/2000/svg", cx: "25", cy: "25", r: "20", fill: "none" }),
+        React.createElement("circle", { className: "navds-loader__foreground", cx: "25", cy: "25", r: "20", stroke: "var(--navds-global-color-gray-400)", fill: "none", strokeDasharray: "50 155" })));
 });
 export default Loader;
 //# sourceMappingURL=Loader.js.map

package/esm/loader/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../src/loader/Loader.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAY,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AA0B3B,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,WAAW,EACnB,WAAW,GAAG,KAAK,EACnB,OAAO,GAAG,SAAS,EACnB,EAAE,OAEH,EADI,IAAI,cART,0EASC,CADQ;IAIT,MAAM,UAAU,GAAG,KAAK,EAAE,CAAC;IAE3B,OAAO,CACL,8DACmB,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,UAAU,EAAE,EAC7C,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,cAAc,EACd,SAAS,EACT,iBAAiB,IAAI,EAAE,EACvB,iBAAiB,OAAO,EAAE,EAC1B;YACE,2BAA2B,EAAE,WAAW;SACzC,CACF,EACD,SAAS,EAAC,OAAO,EACjB,OAAO,EAAC,WAAW,EACnB,mBAAmB,EAAC,UAAU,IAC1B,IAAI;QAER,+BAAO,EAAE,EAAE,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,UAAU,EAAE,IAAG,KAAK,CAAS;QACxD,gCACE,SAAS,EAAC,0BAA0B,EACpC,KAAK,EAAC,4BAA4B,EAClC,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,GAAG,GACf;QACF,gCACE,SAAS,EAAC,0BAA0B,EACpC,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,MAAM,EAAE,oCAAoC,EAC5C,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,GAAG,EACf,eAAe,EAAC,QAAQ,EACxB,aAAa,EAAC,OAAO,GACrB,CACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../src/loader/Loader.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAY,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AAiC3B,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,WAAW,EACnB,WAAW,GAAG,KAAK,EACnB,OAAO,GAAG,SAAS,EACnB,EAAE,OAEH,EADI,IAAI,cART,0EASC,CADQ;IAIT,MAAM,UAAU,GAAG,KAAK,EAAE,CAAC;IAE3B,OAAO,CACL,8DACmB,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,UAAU,EAAE,EAC7C,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,cAAc,EACd,SAAS,EACT,iBAAiB,IAAI,EAAE,EACvB,iBAAiB,OAAO,EAAE,EAC1B;YACE,2BAA2B,EAAE,WAAW;SACzC,CACF,EACD,SAAS,EAAC,OAAO,EACjB,OAAO,EAAC,WAAW,EACnB,mBAAmB,EAAC,UAAU,IAC1B,IAAI;QAER,+BAAO,EAAE,EAAE,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,UAAU,EAAE,IAAG,KAAK,CAAS;QACxD,gCACE,SAAS,EAAC,0BAA0B,EACpC,KAAK,EAAC,4BAA4B,EAClC,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,GACX;QACF,gCACE,SAAS,EAAC,0BAA0B,EACpC,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,MAAM,EAAE,oCAAoC,EAC5C,IAAI,EAAC,MAAM,EACX,eAAe,EAAC,QAAQ,GACxB,CACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.19.7",
+  "version": "0.19.10",
   "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.16",
+    "@navikt/ds-icons": "^0.8.17",
     "@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": "731cae82c31336ff94121121f723cd0235a38af0"
+  "gitHead": "3e0e9ad15c93d9a3cd82d6d9a353cb0c4da0d8b6"
 }

package/src/alert/alert.stories.tsx

@@ -5,6 +5,15 @@ import { BodyLong, Heading as DsHeading } from "..";
 export default {
   title: "ds-react/Alert",
   component: Alert,
+  argTypes: {
+    variant: {
+      defaultValue: "info",
+      control: {
+        type: "radio",
+        options: ["error", "warning", "info", "success"],
+      },
+    },
+  },
 };
 
 const variants: Array<"error" | "warning" | "info" | "success"> = [
@@ -26,7 +35,6 @@ export const Default = (props) => (
 );
 
 Default.args = {
-  variant: "info",
   children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
 };
 

package/src/button/button.stories.tsx

@@ -74,6 +74,16 @@ export const XSmall = () => (
   </div>
 );
 
+export const Link = () => (
+  <div className="rowgap">
+    {variants.map((variant) => (
+      <Button key={variant} variant={variant} as="a" href="#thecakeisalie">
+        {varSwitch[variant]}
+      </Button>
+    ))}
+  </div>
+);
+
 export const Loading = () => (
   <div className="colgap">
     <div className="rowgap">
@@ -105,21 +115,24 @@ export const Icon = () => (
     <div className="rowgap">
       {variants.map((variant) => (
         <Button key={variant} variant={variant}>
-          <Star />
+          <Star aria-hidden />
+          <span className="navds-sr-only">Stjerne</span>
         </Button>
       ))}
     </div>
     <div className="rowgap">
       {variants.map((variant) => (
         <Button key={variant} variant={variant} size="small">
-          <Star />
+          <Star aria-hidden />
+          <span className="navds-sr-only">Stjerne</span>
         </Button>
       ))}
     </div>
     <div className="rowgap">
       {variants.map((variant) => (
         <Button key={variant} variant={variant} size="xsmall">
-          <Star />
+          <Star aria-hidden />
+          <span className="navds-sr-only">Stjerne</span>
         </Button>
       ))}
     </div>
@@ -131,39 +144,29 @@ export const IconWText = () => (
     <div className="rowgap">
       {variants.map((variant) => (
         <Button key={variant} variant={variant}>
-          <Star />
+          <Star aria-hidden />
           {varSwitch[variant]}
-          <Star />
+          <Star aria-hidden />
         </Button>
       ))}
     </div>
     <div className="rowgap">
       {variants.map((variant) => (
         <Button key={variant} variant={variant} size="small">
-          <Star />
+          <Star aria-hidden />
           {varSwitch[variant]}
-          <Star />
+          <Star aria-hidden />
         </Button>
       ))}
     </div>
     <div className="rowgap">
       {variants.map((variant) => (
         <Button key={variant} variant={variant} size="xsmall">
-          <Star />
+          <Star aria-hidden />
           {varSwitch[variant]}
-          <Star />
+          <Star aria-hidden />
         </Button>
       ))}
     </div>
   </div>
 );
-
-export const Link = () => (
-  <div className="rowgap">
-    {variants.map((variant) => (
-      <Button key={variant} variant={variant} as="a" href="#thecakeisalie">
-        {varSwitch[variant]}
-      </Button>
-    ))}
-  </div>
-);

package/src/form/Textarea.tsx

@@ -41,6 +41,10 @@ export interface TextareaProps
    * If enabled shows the label and description for screenreaders only
    */
   hideLabel?: boolean;
+  /**
+   * Enables resizing of field
+   */
+  resize?: boolean;
 }
 
 export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
@@ -60,6 +64,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       description,
       maxLength,
       hideLabel = false,
+      resize,
       ...rest
     } = props;
 
@@ -70,6 +75,14 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       props?.defaultValue ?? ""
     );
 
+    const getMinRows = () => {
+      let rows = rest?.minRows && rest?.minRows >= 3 ? rest?.minRows : 3;
+      if (size === "small") {
+        rows = rest?.minRows && rest?.minRows >= 2 ? rest?.minRows : 2;
+      }
+      return rows;
+    };
+
     return (
       <div
         className={cl(
@@ -79,6 +92,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           {
             "navds-textarea--error": hasError,
             "navds-textarea--disabled": !!inputProps.disabled,
+            "navds-textarea--resize": resize,
           }
         )}
       >
@@ -113,6 +127,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
                 ? props.onChange(e)
                 : setControlledValue(e.target.value)
             }
+            minRows={getMinRows()}
             ref={ref}
             className={cl(
               "navds-textarea__input",
@@ -162,8 +177,8 @@ export const Counter = ({ maxLength, currentLength, size }) => {
       size={size}
     >
       {difference < 0
-        ? `Du har ${Math.abs(difference)} tegn for mye`
-        : `Du har ${difference} tegn igjen`}
+        ? `Antall tegn for mye ${Math.abs(difference)}`
+        : `Antall tegn igjen ${difference}`}
     </BodyShort>
   );
 };

package/src/form/stories/textarea.stories.tsx

@@ -23,6 +23,12 @@ export default {
     disabled: {
       type: "boolean",
     },
+    maxRows: {
+      type: "number",
+    },
+    minRows: {
+      type: "number",
+    },
   },
 } as Meta;
 
@@ -109,3 +115,7 @@ export const MaxRows = () => {
     />
   );
 };
+
+export const Resize = () => {
+  return <Textarea resize label="Ipsum enim quis culpa" />;
+};

package/src/guide-panel/guidepanel.stories.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { GuidePanel } from "../index";
+import { Meta } from "@storybook/react/types-6-0";
+export default {
+  title: "ds-react/GuidePanel",
+  component: GuidePanel,
+} as Meta;
+
+const panelText = `Sit sint eu dolore reprehenderit exercitation labore aute anim sit
+adipisicing proident. Tempor ipsum ea cupidatat qui esse do veniam
+cupidatat. Excepteur irure reprehenderit esse tempor nisi duis qui ea
+enim id.`;
+
+export const Default = (props) => {
+  const newProps = props?.colorOverride
+    ? {
+        style: {
+          ["--navds-guide-panel-color-illustration-background" as any]:
+            "var(--navds-global-color-purple-200)",
+          ["--navds-guide-panel-color-border" as any]:
+            "var(--navds-global-color-purple-400)",
+        },
+      }
+    : {};
+
+  return (
+    <GuidePanel {...newProps} poster={props?.poster}>
+      {panelText}
+    </GuidePanel>
+  );
+};
+
+Default.args = {
+  poster: false,
+  colorOverride: false,
+};
+
+export const Poster = () => <GuidePanel poster>{panelText}</GuidePanel>;
+
+export const ColorOverride = () => (
+  <GuidePanel
+    style={{
+      ["--navds-guide-panel-color-illustration-background" as any]:
+        "var(--navds-global-color-purple-200)",
+      ["--navds-guide-panel-color-border" as any]:
+        "var(--navds-global-color-purple-400)",
+    }}
+  >
+    {panelText}
+  </GuidePanel>
+);

package/src/help-text/help-text.stories.tsx

@@ -2,27 +2,62 @@ import React from "react";
 import { TextField, HelpText } from "..";
 
 export default {
-  title: "ds-react/help-text",
+  title: "ds-react/HelpText",
   component: HelpText,
+  argTypes: {
+    placement: {
+      control: {
+        type: "radio",
+        options: [
+          "bottom",
+          "right",
+          "left",
+          "top-start",
+          "top-end",
+          "bottom-start",
+          "bottom-end",
+          "right-start",
+          "right-end",
+          "left-start",
+          "left-end",
+          "auto",
+          "auto-start",
+          "auto-end",
+        ],
+      },
+    },
+    strategy: {
+      control: {
+        type: "radio",
+        options: ["fixed", "absolute"],
+      },
+    },
+  },
 };
 
-export const All = () => {
+export const Default = (props: any) => {
   return (
-    <>
-      <h1>HelpText</h1>
-      <HelpText title="show tooltip">
-        Id ullamco excepteur elit fugiat labore.
-      </HelpText>
-      <TextField
-        label={
-          <div style={{ display: "flex", gap: 8 }}>
-            Text field label
-            <HelpText title="show tooltip">
-              Id ullamco excepteur elit fugiat labore.
-            </HelpText>
-          </div>
-        }
-      ></TextField>
-    </>
+    <HelpText title="show tooltip" strategy="fixed" {...props}>
+      Id ullamco excepteur elit fugiat labore.
+    </HelpText>
+  );
+};
+
+Default.args = {
+  title: "show tooltip",
+};
+
+export const Inline = () => {
+  return (
+    <TextField
+      label={
+        <div style={{ display: "flex", gap: 8 }}>
+          Text field label
+          <HelpText title="show tooltip">
+            Id ullamco excepteur elit fugiat labore.
+          </HelpText>
+        </div>
+      }
+    />
   );
 };

package/src/link/link.stories.tsx

@@ -0,0 +1,77 @@
+import { Add } from "@navikt/ds-icons";
+import React from "react";
+import { ConfirmationPanel as DsConfirmationPanel, Link } from "..";
+import { Alert as DsAlert, BodyLong } from "../..";
+export default {
+  title: "ds-react/Link",
+  component: Link,
+};
+
+export const Default = (props) => {
+  const LinkD = () => (
+    <Link href="#">
+      {props.icon && <Add />}Ex aliqua incididunt {props.icon && <Add />}
+    </Link>
+  );
+
+  if (props.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>
+    );
+  }
+  return <LinkD />;
+};
+
+Default.args = {
+  icon: false,
+  inline: false,
+};
+
+const DemoLink = () => (
+  <Link href="#">
+    <Add aria-hidden /> Ex aliqua incididunt <Add aria-hidden />
+  </Link>
+);
+
+export const Icon = () => <DemoLink />;
+
+export const Alert = () => {
+  return (
+    <div className="colgap">
+      <DsAlert variant="info">
+        <DemoLink />
+      </DsAlert>
+      <DsAlert variant="success">
+        <DemoLink />
+      </DsAlert>
+      <DsAlert variant="warning">
+        <DemoLink />
+      </DsAlert>
+      <DsAlert variant="error">
+        <DemoLink />
+      </DsAlert>
+    </div>
+  );
+};
+
+export const ConfirmationPanel = () => {
+  return (
+    <div className="colgap">
+      <DsConfirmationPanel label="demo">
+        <DemoLink />
+      </DsConfirmationPanel>
+      <DsConfirmationPanel checked label="demo">
+        <DemoLink />
+      </DsConfirmationPanel>
+      <DsConfirmationPanel error="demo" label="demo">
+        <DemoLink />
+      </DsConfirmationPanel>
+    </div>
+  );
+};