@navikt/ds-react 5.2.1 → 5.3.0

package/esm/typography/Label.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
-export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+import { TypoProps } from "./types";
+export interface LabelProps extends Omit<TypoProps, "weight" | "align" | "truncate">, React.LabelHTMLAttributes<HTMLLabelElement> {
     /**
      * medium: 18px, small: 16px
      * @default "medium"
@@ -10,10 +11,6 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
      * Paragraph text
      */
     children: React.ReactNode;
-    /**
-     * Adds margin-bottom
-     */
-    spacing?: boolean;
 }
 /**
  * Part of a set of components for displaying text with consistent typography.
@@ -24,8 +21,8 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
  *
  * @example
  * ```jsx
- *     <Label level="1" size="xlarge">
- *       Pengestøtte når du er syk
+ *     <Label>
+ *       Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
  *     </Label>
  * ```
  */

package/esm/typography/Label.js

@@ -9,8 +9,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
+import { typoClassNames } from "./util";
 /**
  * Part of a set of components for displaying text with consistent typography.
  *
@@ -20,16 +21,19 @@ import cl from "clsx";
  *
  * @example
  * ```jsx
- *     <Label level="1" size="xlarge">
- *       Pengestøtte når du er syk
+ *     <Label>
+ *       Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
  *     </Label>
  * ```
  */
 export const Label = forwardRef((_a, ref) => {
-    var { className, size = "medium", spacing, as: Component = "label" } = _a, rest = __rest(_a, ["className", "size", "spacing", "as"]);
-    return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: cl(className, "navds-label", {
+    var { className, size = "medium", as: Component = "label", spacing, visuallyHidden, textColor } = _a, rest = __rest(_a, ["className", "size", "as", "spacing", "visuallyHidden", "textColor"]);
+    return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: cl(className, "navds-label", typoClassNames({
+            spacing,
+            visuallyHidden,
+            textColor,
+        }), {
             "navds-label--small": size === "small",
-            "navds-typo--spacing": !!spacing,
         }) })));
 });
 export default Label;

package/esm/typography/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../src/typography/Label.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AAoBtB;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,KAAK,GAChB,UAAU,CACR,CACE,EAAyE,EACzE,GAAG,EACH,EAAE;QAFF,EAAE,SAAS,EAAE,IAAI,GAAG,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,GAAG,OAAO,OAAW,EAAN,IAAI,cAAvE,sCAAyE,CAAF;IAEpE,OAAA,CACH,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE;YACtC,oBAAoB,EAAE,IAAI,KAAK,OAAO;YACtC,qBAAqB,EAAE,CAAC,CAAC,OAAO;SACjC,CAAC,IACF,CACH,CAAA;CAAA,CACF,CAAC;AAEJ,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../src/typography/Label.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAgBxC;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,KAAK,GAChB,UAAU,CACR,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,EAAE,EAAE,SAAS,GAAG,OAAO,EACvB,OAAO,EACP,cAAc,EACd,SAAS,OAEV,EADI,IAAI,cAPT,qEAQC,CADQ;IAGN,OAAA,CACH,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,SAAS,EACT,aAAa,EACb,cAAc,CAAC;YACb,OAAO;YACP,cAAc;YACd,SAAS;SACV,CAAC,EACF;YACE,oBAAoB,EAAE,IAAI,KAAK,OAAO;SACvC,CACF,IACD,CACH,CAAA;CAAA,CACF,CAAC;AAEJ,eAAe,KAAK,CAAC"}

package/esm/typography/types.d.ts

@@ -0,0 +1,26 @@
+export type TypoProps = {
+    /**
+     * Truncate text overflow with ellipsis.
+     */
+    truncate?: boolean;
+    /**
+     * Adjusts font-weight.
+     */
+    weight?: "regular" | "semibold";
+    /**
+     * Adjust text-align.
+     */
+    align?: "start" | "center" | "end";
+    /**
+     * Visually hide text. Text will still be accessible for screenreaders
+     */
+    visuallyHidden?: boolean;
+    /**
+     * Adds spacing below text
+     */
+    spacing?: boolean;
+    /**
+     * Adjusts color
+     */
+    textColor?: "default" | "subtle";
+};

package/esm/typography/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/esm/typography/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/typography/types.ts"],"names":[],"mappings":""}

package/esm/typography/util.d.ts

@@ -0,0 +1,4 @@
+import { TypoProps } from "./types";
+export declare const typoClassNames: (props: TypoProps & {
+    uppercase?: boolean;
+}) => string;

package/esm/typography/util.js

@@ -0,0 +1,13 @@
+import cl from "clsx";
+export const typoClassNames = (props) => {
+    return cl({
+        "navds-typo--spacing": props.spacing,
+        "navds-typo--truncate": props.truncate,
+        "navds-typo--semibold": props.weight === "semibold",
+        [`navds-typo--align-${props.align}`]: props.align,
+        [`navds-typo--color-${props.textColor}`]: props.textColor,
+        "navds-typo--visually-hidden": props.visuallyHidden,
+        "navds-typo--uppercase": props.uppercase,
+    });
+};
+//# sourceMappingURL=util.js.map

package/esm/typography/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../../src/typography/util.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AAGtB,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAA0C,EAAE,EAAE;IAC3E,OAAO,EAAE,CAAC;QACR,qBAAqB,EAAE,KAAK,CAAC,OAAO;QACpC,sBAAsB,EAAE,KAAK,CAAC,QAAQ;QACtC,sBAAsB,EAAE,KAAK,CAAC,MAAM,KAAK,UAAU;QACnD,CAAC,qBAAqB,KAAK,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,KAAK;QACjD,CAAC,qBAAqB,KAAK,CAAC,SAAS,EAAE,CAAC,EAAE,KAAK,CAAC,SAAS;QACzD,6BAA6B,EAAE,KAAK,CAAC,cAAc;QACnD,uBAAuB,EAAE,KAAK,CAAC,SAAS;KACzC,CAAC,CAAC;AACL,CAAC,CAAC"}

package/package.json

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

package/src/form/Textarea.tsx

@@ -171,7 +171,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           {hasMaxLength && (
             <>
               <span id={maxLengthId} className="navds-sr-only">
-                Tekstområde med plass til {maxLength} tegn.
+                {`Tekstområde med plass til ${maxLength} tegn.`}
               </span>
               <Counter
                 maxLength={maxLength}

package/src/typography/BodyLong.tsx

@@ -1,22 +1,21 @@
 import React, { forwardRef } from "react";
 import cl from "clsx";
 import { OverridableComponent } from "../util/OverridableComponent";
+import { TypoProps } from "./types";
+import { typoClassNames } from "./util";
 
 export interface BodyLongProps
-  extends React.HTMLAttributes<HTMLParagraphElement> {
+  extends TypoProps,
+    React.HTMLAttributes<HTMLParagraphElement> {
   /**
-   * medium: 18px, small: 16px
+   * large: 20px, medium: 18px, small: 16px
    * @default "medium"
    */
-  size?: "medium" | "small";
+  size?: "large" | "medium" | "small";
   /**
-   * Paragraph text
+   * Text
    */
   children: React.ReactNode;
-  /**
-   * Adds margin-bottom
-   */
-  spacing?: boolean;
 }
 
 /**
@@ -28,8 +27,10 @@ export interface BodyLongProps
  *
  * @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>
  * ```
  */
@@ -38,16 +39,36 @@ export const BodyLong: OverridableComponent<
   HTMLParagraphElement
 > = forwardRef(
   (
-    { className, size = "medium", spacing, as: Component = "p", ...rest },
+    {
+      className,
+      size = "medium",
+      as: Component = "p",
+      spacing,
+      truncate,
+      weight = "regular",
+      align,
+      visuallyHidden,
+      textColor,
+      ...rest
+    },
     ref
   ) => (
     <Component
       {...rest}
       ref={ref}
-      className={cl(className, "navds-body-long", {
-        "navds-body-long--small": size === "small",
-        "navds-typo--spacing": !!spacing,
-      })}
+      className={cl(
+        className,
+        "navds-body-long",
+        `navds-body-long--${size}`,
+        typoClassNames({
+          spacing,
+          truncate,
+          weight,
+          align,
+          visuallyHidden,
+          textColor,
+        })
+      )}
     />
   )
 );

package/src/typography/BodyShort.tsx

@@ -1,22 +1,21 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
+import { TypoProps } from "./types";
+import { typoClassNames } from "./util";
 
 export interface BodyShortProps
-  extends React.HTMLAttributes<HTMLParagraphElement> {
+  extends TypoProps,
+    React.HTMLAttributes<HTMLParagraphElement> {
   /**
-   * medium: 18px, small: 16px
+   * large: 20px, medium: 18px, small: 16px
    * @default "medium"
    */
-  size?: "medium" | "small";
+  size?: "large" | "medium" | "small";
   /**
    * Paragraph text
    */
   children: React.ReactNode;
-  /**
-   * Adds margin-bottom
-   */
-  spacing?: boolean;
 }
 
 /**
@@ -28,8 +27,8 @@ export interface BodyShortProps
  *
  * @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>
  * ```
  */
@@ -38,16 +37,36 @@ export const BodyShort: OverridableComponent<
   HTMLParagraphElement
 > = forwardRef(
   (
-    { className, size = "medium", spacing, as: Component = "p", ...rest },
+    {
+      className,
+      size = "medium",
+      as: Component = "p",
+      spacing,
+      truncate,
+      weight = "regular",
+      align,
+      visuallyHidden,
+      textColor,
+      ...rest
+    },
     ref
   ) => (
     <Component
       {...rest}
       ref={ref}
-      className={cl(className, "navds-body-short", {
-        "navds-body-short--small": size === "small",
-        "navds-typo--spacing": !!spacing,
-      })}
+      className={cl(
+        className,
+        "navds-body-short",
+        `navds-body-short--${size}`,
+        typoClassNames({
+          spacing,
+          truncate,
+          weight,
+          align,
+          visuallyHidden,
+          textColor,
+        })
+      )}
     />
   )
 );

package/src/typography/Detail.tsx

@@ -1,9 +1,12 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
+import { TypoProps } from "./types";
+import { typoClassNames } from "./util";
 
 export interface DetailProps
-  extends React.HTMLAttributes<HTMLParagraphElement> {
+  extends TypoProps,
+    React.HTMLAttributes<HTMLParagraphElement> {
   /**
    * @deprecated Medium === small
    */
@@ -12,10 +15,6 @@ export interface DetailProps
    * Paragraph text
    */
   children: React.ReactNode;
-  /**
-   * Adds margin-bottom
-   */
-  spacing?: boolean;
   /**
    * All caps
    */
@@ -31,8 +30,8 @@ export interface DetailProps
  *
  * @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>
  * ```
  */
@@ -45,6 +44,11 @@ export const Detail: OverridableComponent<DetailProps, HTMLParagraphElement> =
         spacing,
         uppercase,
         as: Component = "p",
+        truncate,
+        weight = "regular",
+        align,
+        visuallyHidden,
+        textColor,
         ...rest
       },
       ref
@@ -52,11 +56,22 @@ export const Detail: OverridableComponent<DetailProps, HTMLParagraphElement> =
       <Component
         {...rest}
         ref={ref}
-        className={cl(className, "navds-detail", {
-          "navds-detail--small": size === "small",
-          "navds-typo--spacing": !!spacing,
-          "navds-typo--uppercase": !!uppercase,
-        })}
+        className={cl(
+          className,
+          "navds-detail",
+          typoClassNames({
+            spacing,
+            truncate,
+            weight,
+            align,
+            visuallyHidden,
+            textColor,
+            uppercase,
+          }),
+          {
+            "navds-detail--small": size === "small",
+          }
+        )}
       />
     )
   );

package/src/typography/ErrorMessage.tsx

@@ -1,9 +1,12 @@
 import React, { forwardRef } from "react";
 import cl from "clsx";
 import { OverridableComponent } from "../util/OverridableComponent";
+import { TypoProps } from "./types";
+import { typoClassNames } from "./util";
 
 export interface ErrorMessageProps
-  extends React.HTMLAttributes<HTMLParagraphElement> {
+  extends Pick<TypoProps, "spacing">,
+    React.HTMLAttributes<HTMLParagraphElement> {
   /**
    * medium: 18px, small: 16px
    * @default "medium"
@@ -13,10 +16,6 @@ export interface ErrorMessageProps
    * Error text
    */
   children: React.ReactNode;
-  /**
-   * Adds margin-bottom
-   */
-  spacing?: boolean;
 }
 
 /**
@@ -28,8 +27,8 @@ export interface ErrorMessageProps
  *
  * @example
  * ```jsx
- *     <ErrorMessage level="1" size="xlarge">
- *       Pengestøtte når du er syk
+ *     <ErrorMessage>
+ *       Du må fylle ut: Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
  *     </ErrorMessage>
  * ```
  */
@@ -41,10 +40,17 @@ export const ErrorMessage: OverridableComponent<
     <Component
       {...rest}
       ref={ref}
-      className={cl("navds-error-message", "navds-label", className, {
-        "navds-label--small": size === "small",
-        "navds-typo--spacing": !!spacing,
-      })}
+      className={cl(
+        "navds-error-message",
+        "navds-label",
+        className,
+        typoClassNames({
+          spacing,
+        }),
+        {
+          "navds-label--small": size === "small",
+        }
+      )}
     />
   )
 );

package/src/typography/Heading.tsx

@@ -1,8 +1,12 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
+import { TypoProps } from "./types";
+import { typoClassNames } from "./util";
 
-export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+export interface HeadingProps
+  extends Pick<TypoProps, "spacing" | "visuallyHidden" | "align" | "textColor">,
+    React.HTMLAttributes<HTMLHeadingElement> {
   /**
    * Heading level
    * @default "1"
@@ -16,11 +20,6 @@ export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
    * Heading text
    */
   children: React.ReactNode;
-  /**
-   * Adds margin-bottom
-   * @default false
-   */
-  spacing?: boolean;
 }
 
 /**
@@ -33,22 +32,43 @@ export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
  * @example
  * ```jsx
  *     <Heading level="1" size="xlarge">
- *       Pengestøtte når du er syk
+ *       Hva kan vi hjelpe deg med?
  *     </Heading>
  * ```
  */
 export const Heading: OverridableComponent<HeadingProps, HTMLHeadingElement> =
   forwardRef(
-    ({ level = "1", size, spacing = false, className, as, ...rest }, ref) => {
+    (
+      {
+        level = "1",
+        size,
+        className,
+        as,
+        spacing,
+        align,
+        visuallyHidden,
+        textColor,
+        ...rest
+      },
+      ref
+    ) => {
       let HeadingTag = as ?? (`h${level}` as React.ElementType);
 
       return (
         <HeadingTag
           {...rest}
           ref={ref}
-          className={cl(className, "navds-heading", `navds-heading--${size}`, {
-            "navds-typo--spacing": spacing,
-          })}
+          className={cl(
+            className,
+            "navds-heading",
+            `navds-heading--${size}`,
+            typoClassNames({
+              spacing,
+              align,
+              visuallyHidden,
+              textColor,
+            })
+          )}
         />
       );
     }

package/src/typography/Ingress.tsx

@@ -15,6 +15,8 @@ export interface IngressProps
 }
 
 /**
+ * @deprecated Use `<BodyLong size="large" />`
+ *
  * Part of a set of components for displaying text with consistent typography.
  *
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/typography)
@@ -23,8 +25,8 @@ export interface IngressProps
  *
  * @example
  * ```jsx
- *     <Ingress level="1" size="xlarge">
- *       Pengestøtte når du er syk
+ *     <Ingress>
+ *       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.
  *     </Ingress>
  * ```
  */

package/src/typography/Label.tsx

@@ -1,9 +1,12 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/OverridableComponent";
+import { TypoProps } from "./types";
+import { typoClassNames } from "./util";
 
 export interface LabelProps
-  extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  extends Omit<TypoProps, "weight" | "align" | "truncate">,
+    React.LabelHTMLAttributes<HTMLLabelElement> {
   /**
    * medium: 18px, small: 16px
    * @default "medium"
@@ -13,10 +16,6 @@ export interface LabelProps
    * Paragraph text
    */
   children: React.ReactNode;
-  /**
-   * Adds margin-bottom
-   */
-  spacing?: boolean;
 }
 
 /**
@@ -28,24 +27,40 @@ export interface LabelProps
  *
  * @example
  * ```jsx
- *     <Label level="1" size="xlarge">
- *       Pengestøtte når du er syk
+ *     <Label>
+ *       Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
  *     </Label>
  * ```
  */
 export const Label: OverridableComponent<LabelProps, HTMLLabelElement> =
   forwardRef(
     (
-      { className, size = "medium", spacing, as: Component = "label", ...rest },
+      {
+        className,
+        size = "medium",
+        as: Component = "label",
+        spacing,
+        visuallyHidden,
+        textColor,
+        ...rest
+      },
       ref
     ) => (
       <Component
         {...rest}
         ref={ref}
-        className={cl(className, "navds-label", {
-          "navds-label--small": size === "small",
-          "navds-typo--spacing": !!spacing,
-        })}
+        className={cl(
+          className,
+          "navds-label",
+          typoClassNames({
+            spacing,
+            visuallyHidden,
+            textColor,
+          }),
+          {
+            "navds-label--small": size === "small",
+          }
+        )}
       />
     )
   );