@navikt/ds-react 5.2.0 → 5.3.0

package/_docs.json

@@ -9665,7 +9665,7 @@
         "defaultValue": {
           "value": "medium"
         },
-        "description": "medium: 18px, small: 16px",
+        "description": "large: 20px, medium: 18px, small: 16px",
         "name": "size",
         "parent": {
           "fileName": "src/typography/BodyLong.tsx",
@@ -9679,12 +9679,12 @@
         ],
         "required": false,
         "type": {
-          "name": "\"medium\" | \"small\""
+          "name": "\"large\" | \"medium\" | \"small\""
         }
       },
       "children": {
         "defaultValue": null,
-        "description": "Paragraph text",
+        "description": "Text",
         "name": "children",
         "parent": {
           "fileName": "src/typography/BodyLong.tsx",
@@ -9701,18 +9701,76 @@
           "name": "ReactNode"
         }
       },
+      "truncate": {
+        "defaultValue": null,
+        "description": "Truncate text overflow with ellipsis.",
+        "name": "truncate",
+        "declarations": [
+          {
+            "fileName": "react/src/typography/types.ts",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "weight": {
+        "defaultValue": {
+          "value": "regular"
+        },
+        "description": "Adjusts font-weight.",
+        "name": "weight",
+        "declarations": [
+          {
+            "fileName": "react/src/typography/types.ts",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"regular\" | \"semibold\""
+        }
+      },
+      "align": {
+        "defaultValue": null,
+        "description": "Adjust text-align.",
+        "name": "align",
+        "declarations": [
+          {
+            "fileName": "react/src/typography/types.ts",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"start\" | \"center\" | \"end\""
+        }
+      },
+      "visuallyHidden": {
+        "defaultValue": null,
+        "description": "Visually hide text. Text will still be accessible for screenreaders",
+        "name": "visuallyHidden",
+        "declarations": [
+          {
+            "fileName": "react/src/typography/types.ts",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "spacing": {
         "defaultValue": null,
-        "description": "Adds margin-bottom",
+        "description": "Adds spacing below text",
         "name": "spacing",
-        "parent": {
-          "fileName": "src/typography/BodyLong.tsx",
-          "name": "BodyLongProps"
-        },
         "declarations": [
           {
-            "fileName": "src/typography/BodyLong.tsx",
-            "name": "BodyLongProps"
+            "fileName": "react/src/typography/types.ts",
+            "name": "TypeLiteral"
           }
         ],
         "required": false,
@@ -9720,6 +9778,21 @@
           "name": "boolean"
         }
       },
+      "textColor": {
+        "defaultValue": null,
+        "description": "Adjusts color",
+        "name": "textColor",
+        "declarations": [
+          {
+            "fileName": "react/src/typography/types.ts",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"default\" | \"subtle\""
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",
@@ -9768,7 +9841,7 @@
         "defaultValue": {
           "value": "medium"
         },
-        "description": "medium: 18px, small: 16px",
+        "description": "large: 20px, medium: 18px, small: 16px",
         "name": "size",
         "parent": {
           "fileName": "src/typography/BodyShort.tsx",
@@ -9782,7 +9855,7 @@
         ],
         "required": false,
         "type": {
-          "name": "\"medium\" | \"small\""
+          "name": "\"large\" | \"medium\" | \"small\""
         }
       },
       "children": {
@@ -9804,18 +9877,76 @@
           "name": "ReactNode"
         }
       },
+      "truncate": {
+        "defaultValue": null,
+        "description": "Truncate text overflow with ellipsis.",
+        "name": "truncate",
+        "declarations": [
+          {
+            "fileName": "react/src/typography/types.ts",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "weight": {
+        "defaultValue": {
+          "value": "regular"
+        },
+        "description": "Adjusts font-weight.",
+        "name": "weight",
+        "declarations": [
+          {
+            "fileName": "react/src/typography/types.ts",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"regular\" | \"semibold\""
+        }
+      },
+      "align": {
+        "defaultValue": null,
+        "description": "Adjust text-align.",
+        "name": "align",
+        "declarations": [
+          {
+            "fileName": "react/src/typography/types.ts",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"start\" | \"center\" | \"end\""
+        }
+      },
+      "visuallyHidden": {
+        "defaultValue": null,
+        "description": "Visually hide text. Text will still be accessible for screenreaders",
+        "name": "visuallyHidden",
+        "declarations": [
+          {
+            "fileName": "react/src/typography/types.ts",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "spacing": {
         "defaultValue": null,
-        "description": "Adds margin-bottom",
+        "description": "Adds spacing below text",
         "name": "spacing",
-        "parent": {
-          "fileName": "src/typography/BodyShort.tsx",
-          "name": "BodyShortProps"
-        },
         "declarations": [
           {
-            "fileName": "src/typography/BodyShort.tsx",
-            "name": "BodyShortProps"
+            "fileName": "react/src/typography/types.ts",
+            "name": "TypeLiteral"
           }
         ],
         "required": false,
@@ -9823,6 +9954,21 @@
           "name": "boolean"
         }
       },
+      "textColor": {
+        "defaultValue": null,
+        "description": "Adjusts color",
+        "name": "textColor",
+        "declarations": [
+          {
+            "fileName": "react/src/typography/types.ts",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"default\" | \"subtle\""
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",
@@ -9907,10 +10053,10 @@
           "name": "ReactNode"
         }
       },
-      "spacing": {
+      "uppercase": {
         "defaultValue": null,
-        "description": "Adds margin-bottom",
-        "name": "spacing",
+        "description": "All caps",
+        "name": "uppercase",
         "parent": {
           "fileName": "src/typography/Detail.tsx",
           "name": "DetailProps"
@@ -9926,18 +10072,76 @@
           "name": "boolean"
         }
       },
-      "uppercase": {
+      "truncate": {
         "defaultValue": null,
-        "description": "All caps",
-        "name": "uppercase",
-        "parent": {
-          "fileName": "src/typography/Detail.tsx",
-          "name": "DetailProps"
+        "description": "Truncate text overflow with ellipsis.",
+        "name": "truncate",
+        "declarations": [
+          {
+            "fileName": "react/src/typography/types.ts",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "weight": {
+        "defaultValue": {
+          "value": "regular"
         },
+        "description": "Adjusts font-weight.",
+        "name": "weight",
         "declarations": [
           {
-            "fileName": "src/typography/Detail.tsx",
-            "name": "DetailProps"
+            "fileName": "react/src/typography/types.ts",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"regular\" | \"semibold\""
+        }
+      },
+      "align": {
+        "defaultValue": null,
+        "description": "Adjust text-align.",
+        "name": "align",
+        "declarations": [
+          {
+            "fileName": "react/src/typography/types.ts",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"start\" | \"center\" | \"end\""
+        }
+      },
+      "visuallyHidden": {
+        "defaultValue": null,
+        "description": "Visually hide text. Text will still be accessible for screenreaders",
+        "name": "visuallyHidden",
+        "declarations": [
+          {
+            "fileName": "react/src/typography/types.ts",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "spacing": {
+        "defaultValue": null,
+        "description": "Adds spacing below text",
+        "name": "spacing",
+        "declarations": [
+          {
+            "fileName": "react/src/typography/types.ts",
+            "name": "TypeLiteral"
           }
         ],
         "required": false,
@@ -9945,6 +10149,21 @@
           "name": "boolean"
         }
       },
+      "textColor": {
+        "defaultValue": null,
+        "description": "Adjusts color",
+        "name": "textColor",
+        "declarations": [
+          {
+            "fileName": "react/src/typography/types.ts",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"default\" | \"subtle\""
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",
@@ -10031,16 +10250,12 @@
       },
       "spacing": {
         "defaultValue": null,
-        "description": "Adds margin-bottom",
+        "description": "Adds spacing below text",
         "name": "spacing",
-        "parent": {
-          "fileName": "src/typography/ErrorMessage.tsx",
-          "name": "ErrorMessageProps"
-        },
         "declarations": [
           {
-            "fileName": "src/typography/ErrorMessage.tsx",
-            "name": "ErrorMessageProps"
+            "fileName": "react/src/typography/types.ts",
+            "name": "TypeLiteral"
           }
         ],
         "required": false,
@@ -10152,19 +10367,28 @@
         }
       },
       "spacing": {
-        "defaultValue": {
-          "value": "false"
-        },
-        "description": "Adds margin-bottom",
+        "defaultValue": null,
+        "description": "Adds spacing below text",
         "name": "spacing",
-        "parent": {
-          "fileName": "src/typography/Heading.tsx",
-          "name": "HeadingProps"
-        },
         "declarations": [
           {
-            "fileName": "src/typography/Heading.tsx",
-            "name": "HeadingProps"
+            "fileName": "react/src/typography/types.ts",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "visuallyHidden": {
+        "defaultValue": null,
+        "description": "Visually hide text. Text will still be accessible for screenreaders",
+        "name": "visuallyHidden",
+        "declarations": [
+          {
+            "fileName": "react/src/typography/types.ts",
+            "name": "TypeLiteral"
           }
         ],
         "required": false,
@@ -10172,6 +10396,36 @@
           "name": "boolean"
         }
       },
+      "align": {
+        "defaultValue": null,
+        "description": "Adjust text-align.",
+        "name": "align",
+        "declarations": [
+          {
+            "fileName": "react/src/typography/types.ts",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"start\" | \"center\" | \"end\""
+        }
+      },
+      "textColor": {
+        "defaultValue": null,
+        "description": "Adjusts color",
+        "name": "textColor",
+        "declarations": [
+          {
+            "fileName": "react/src/typography/types.ts",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"default\" | \"subtle\""
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",
@@ -10338,18 +10592,29 @@
           "name": "ReactNode"
         }
       },
+      "visuallyHidden": {
+        "defaultValue": null,
+        "description": "Visually hide text. Text will still be accessible for screenreaders",
+        "name": "visuallyHidden",
+        "declarations": [
+          {
+            "fileName": "react/src/typography/types.ts",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "spacing": {
         "defaultValue": null,
-        "description": "Adds margin-bottom",
+        "description": "Adds spacing below text",
         "name": "spacing",
-        "parent": {
-          "fileName": "src/typography/Label.tsx",
-          "name": "LabelProps"
-        },
         "declarations": [
           {
-            "fileName": "src/typography/Label.tsx",
-            "name": "LabelProps"
+            "fileName": "react/src/typography/types.ts",
+            "name": "TypeLiteral"
           }
         ],
         "required": false,
@@ -10357,6 +10622,21 @@
           "name": "boolean"
         }
       },
+      "textColor": {
+        "defaultValue": null,
+        "description": "Adjusts color",
+        "name": "textColor",
+        "declarations": [
+          {
+            "fileName": "react/src/typography/types.ts",
+            "name": "TypeLiteral"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"default\" | \"subtle\""
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",

package/cjs/form/Textarea.js

@@ -94,10 +94,7 @@ exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
                     "navds-textarea--counter": hasMaxLength,
                 }) }, (describedBy ? { "aria-describedby": describedBy } : {}))),
             hasMaxLength && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("span", { id: maxLengthId, className: "navds-sr-only" },
-                    "Tekstomr\u00E5de med plass til ",
-                    maxLength,
-                    " tegn."),
+                react_1.default.createElement("span", { id: maxLengthId, className: "navds-sr-only" }, `Tekstområde med plass til ${maxLength} tegn.`),
                 react_1.default.createElement(exports.Counter, { maxLength: maxLength, currentLength: (_c = (_b = props.value) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : controlledValue === null || controlledValue === void 0 ? void 0 : controlledValue.length, size: size, i18n: i18n })))),
         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)))));
 });

package/cjs/typography/BodyLong.js

@@ -40,6 +40,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BodyLong = void 0;
 const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const util_1 = require("./util");
 /**
  * Part of a set of components for displaying text with consistent typography.
  *
@@ -49,16 +50,22 @@ const clsx_1 = __importDefault(require("clsx"));
  *
  * @example
  * ```jsx
- *     <BodyLong level="1" size="xlarge">
- *       Pengestøtte når du er syk
+ *     <BodyLong>
+ *       Hvis du ikke bor sammen med begge foreldrene dine,
+ *       kan du ha rett til barnebidrag fra en eller begge foreldre mens du
+ *       fullfører videregående skole eller tilsvarende.
  *     </BodyLong>
  * ```
  */
 exports.BodyLong = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, size = "medium", spacing, as: Component = "p" } = _a, rest = __rest(_a, ["className", "size", "spacing", "as"]);
-    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)(className, "navds-body-long", {
-            "navds-body-long--small": size === "small",
-            "navds-typo--spacing": !!spacing,
-        }) })));
+    var { className, size = "medium", as: Component = "p", spacing, truncate, weight = "regular", align, visuallyHidden, textColor } = _a, rest = __rest(_a, ["className", "size", "as", "spacing", "truncate", "weight", "align", "visuallyHidden", "textColor"]);
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)(className, "navds-body-long", `navds-body-long--${size}`, (0, util_1.typoClassNames)({
+            spacing,
+            truncate,
+            weight,
+            align,
+            visuallyHidden,
+            textColor,
+        })) })));
 });
 exports.default = exports.BodyLong;

package/cjs/typography/BodyShort.js

@@ -38,8 +38,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BodyShort = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
+const util_1 = require("./util");
 /**
  * Part of a set of components for displaying text with consistent typography.
  *
@@ -49,16 +50,20 @@ const clsx_1 = __importDefault(require("clsx"));
  *
  * @example
  * ```jsx
- *     <BodyShort level="1" size="xlarge">
- *       Pengestøtte når du er syk
+ *     <BodyShort>
+ *       Du må gjøre en filtrering for å se brukere i listen.
  *     </BodyShort>
  * ```
  */
 exports.BodyShort = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, size = "medium", spacing, as: Component = "p" } = _a, rest = __rest(_a, ["className", "size", "spacing", "as"]);
-    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)(className, "navds-body-short", {
-            "navds-body-short--small": size === "small",
-            "navds-typo--spacing": !!spacing,
-        }) })));
+    var { className, size = "medium", as: Component = "p", spacing, truncate, weight = "regular", align, visuallyHidden, textColor } = _a, rest = __rest(_a, ["className", "size", "as", "spacing", "truncate", "weight", "align", "visuallyHidden", "textColor"]);
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)(className, "navds-body-short", `navds-body-short--${size}`, (0, util_1.typoClassNames)({
+            spacing,
+            truncate,
+            weight,
+            align,
+            visuallyHidden,
+            textColor,
+        })) })));
 });
 exports.default = exports.BodyShort;

package/cjs/typography/Detail.js

@@ -38,8 +38,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Detail = void 0;
-const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
+const react_1 = __importStar(require("react"));
+const util_1 = require("./util");
 /**
  * Part of a set of components for displaying text with consistent typography.
  *
@@ -49,17 +50,23 @@ const clsx_1 = __importDefault(require("clsx"));
  *
  * @example
  * ```jsx
- *     <Detail level="1" size="xlarge">
- *       Pengestøtte når du er syk
+ *     <Detail>
+ *       Du må gjøre en filtrering for å se brukere i listen.
  *     </Detail>
  * ```
  */
 exports.Detail = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, size = "medium", spacing, uppercase, as: Component = "p" } = _a, rest = __rest(_a, ["className", "size", "spacing", "uppercase", "as"]);
-    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)(className, "navds-detail", {
+    var { className, size = "medium", spacing, uppercase, as: Component = "p", truncate, weight = "regular", align, visuallyHidden, textColor } = _a, rest = __rest(_a, ["className", "size", "spacing", "uppercase", "as", "truncate", "weight", "align", "visuallyHidden", "textColor"]);
+    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)(className, "navds-detail", (0, util_1.typoClassNames)({
+            spacing,
+            truncate,
+            weight,
+            align,
+            visuallyHidden,
+            textColor,
+            uppercase,
+        }), {
             "navds-detail--small": size === "small",
-            "navds-typo--spacing": !!spacing,
-            "navds-typo--uppercase": !!uppercase,
         }) })));
 });
 exports.default = exports.Detail;