@navikt/ds-react 7.4.0 → 7.4.2

package/src/form/error-summary/ErrorSummary.tsx

@@ -3,6 +3,7 @@ import React, { HTMLAttributes, forwardRef, useRef } from "react";
 import { BodyShort, Heading } from "../../typography";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
 import { useMergeRefs } from "../../util/hooks";
+import { useI18n } from "../../util/i18n/i18n.context";
 import ErrorSummaryItem from "./ErrorSummaryItem";
 
 export interface ErrorSummaryProps
@@ -72,11 +73,12 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
       className,
       size = "medium",
       headingTag = "h2",
-      heading = "Du må rette disse feilene før du kan fortsette:",
+      heading,
       ...rest
     },
     ref,
   ) => {
+    const translate = useI18n("ErrorSummary");
     const wrapperRef = useRef<HTMLDivElement>(null);
     const headingRef = useRef<HTMLHeadingElement>(null);
 
@@ -105,7 +107,7 @@ export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
           ref={headingRef}
           tabIndex={-1}
         >
-          {heading}
+          {heading ?? translate("heading")}
         </Heading>
         <BodyShort as="ul" size={size} className="navds-error-summary__list">
           {children}

package/src/form/form-progress/FormProgress.tsx

@@ -105,9 +105,7 @@ export const FormProgress = forwardRef<HTMLDivElement, FormProgressProps>(
         <Collapsible lazy open={open} onOpenChange={onOpenChange}>
           <HStack justify="space-between" align="center">
             <BodyShort as="span">
-              {translate("step", {
-                replacements: { activeStep, totalSteps },
-              })}
+              {translate("step", { activeStep, totalSteps })}
             </BodyShort>
             <Collapsible.Trigger asChild aria-expanded={undefined}>
               <Button

package/src/form/search/Search.tsx

@@ -2,7 +2,6 @@ import cl from "clsx";
 import React, {
   InputHTMLAttributes,
   forwardRef,
-  useCallback,
   useRef,
   useState,
 } from "react";
@@ -10,6 +9,7 @@ import { MagnifyingGlassIcon, XMarkIcon } from "@navikt/aksel-icons";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
+import { useI18n } from "../../util/i18n/i18n.context";
 import { FormFieldProps, useFormField } from "../useFormField";
 import SearchButton, { SearchButtonType } from "./SearchButton";
 import { SearchContext } from "./context";
@@ -68,13 +68,9 @@ export interface SearchProps
    */
   variant?: "primary" | "secondary" | "simple";
   /**
-   * Exposes the HTML size attribute. Specifies the width of the element, in characters.
+   * HTML size attribute. Specifies the width of the input, in characters.
    */
   htmlSize?: number | string;
-  /*
-   * Exposes role attribute.
-   */
-  role?: string;
 }
 
 interface SearchComponent
@@ -123,31 +119,24 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       onChange,
       onSearchClick,
       htmlSize,
-      role,
       ...rest
     } = props;
 
     const searchRef = useRef<HTMLInputElement | null>(null);
     const mergedRef = useMergeRefs(searchRef, ref);
-
+    const translate = useI18n("Search");
     const [internalValue, setInternalValue] = useState(defaultValue ?? "");
 
-    const handleChange = useCallback(
-      (v: string) => {
-        value === undefined && setInternalValue(v);
-        onChange?.(v);
-      },
-      [onChange, value],
-    );
+    const handleChange = (newValue: string) => {
+      value === undefined && setInternalValue(newValue);
+      onChange?.(newValue);
+    };
 
-    const handleClear = useCallback(
-      (event: SearchClearEvent) => {
-        onClear?.(event);
-        handleChange("");
-        searchRef.current?.focus?.();
-      },
-      [handleChange, onClear],
-    );
+    const handleClear = (clearEvent: SearchClearEvent) => {
+      onClear?.(clearEvent);
+      handleChange("");
+      searchRef.current?.focus?.();
+    };
 
     const handleClick = () => {
       onSearchClick?.(`${value ?? internalValue}`);
@@ -156,26 +145,22 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
     return (
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
       <div
-        onKeyDown={(e) => {
-          if (e.key !== "Escape") {
+        onKeyDown={(event) => {
+          if (event.key !== "Escape") {
             return;
           }
-          searchRef.current?.value &&
-            searchRef.current?.value !== "" &&
-            e.preventDefault();
-
-          handleClear({ trigger: "Escape", event: e });
+          searchRef.current?.value && event.preventDefault();
+          handleClear({ trigger: "Escape", event });
         }}
         className={cl(
           className,
           "navds-form-field",
           `navds-form-field--${size}`,
           "navds-search",
-
           {
             "navds-search--error": hasError,
-            "navds-search--disabled": !!inputProps.disabled,
-            "navds-search--with-size": !!htmlSize,
+            "navds-search--disabled": inputProps.disabled,
+            "navds-search--with-size": htmlSize,
           },
         )}
       >
@@ -215,7 +200,6 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
               value={value ?? internalValue}
               onChange={(e) => handleChange(e.target.value)}
               type="search"
-              role={role ?? "searchbox"}
               className={cl(
                 className,
                 "navds-search__input",
@@ -229,11 +213,11 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
             {(value ?? internalValue) && clearButton && (
               <button
                 type="button"
-                onClick={(e) => handleClear({ trigger: "Click", event: e })}
+                onClick={(event) => handleClear({ trigger: "Click", event })}
                 className="navds-search__button-clear"
               >
                 <span className="navds-sr-only">
-                  {clearButtonLabel ? clearButtonLabel : "Tøm"}
+                  {clearButtonLabel || translate("clear")}
                 </span>
                 <XMarkIcon aria-hidden />
               </button>

package/src/form/search/SearchButton.tsx

@@ -3,6 +3,7 @@ import React, { forwardRef, useContext } from "react";
 import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
 import { Button, ButtonProps } from "../../button";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
+import { useI18n } from "../../util/i18n/i18n.context";
 import { SearchContext } from "./context";
 
 export interface SearchButtonProps
@@ -19,6 +20,7 @@ export type SearchButtonType = React.ForwardRefExoticComponent<
 
 const SearchButton: SearchButtonType = forwardRef(
   ({ className, children, disabled, onClick, ...rest }, ref) => {
+    const translate = useI18n("Search");
     const context = useContext(SearchContext);
 
     if (context === null) {
@@ -40,7 +42,9 @@ const SearchButton: SearchButtonType = forwardRef(
         onClick={composeEventHandlers(onClick, handleClick)}
         icon={
           <MagnifyingGlassIcon
-            {...(children ? { "aria-hidden": true } : { title: "Søk" })}
+            {...(children
+              ? { "aria-hidden": true }
+              : { title: translate("search") })}
           />
         }
       >

package/src/form/textarea/Textarea.tsx

@@ -180,17 +180,13 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           {...(describedBy ? { "aria-describedby": describedBy } : {})}
         />
         {hasMaxLength && !readOnly && !inputProps.disabled && (
-          <>
-            <span id={maxLengthId} className="navds-sr-only">
-              {`Tekstområde med plass til ${maxLength} tegn.`}
-            </span>
-            <Counter
-              maxLength={maxLength}
-              currentLength={props.value?.length ?? uncontrolledValue.length}
-              size={size}
-              i18n={i18n}
-            />
-          </>
+          <Counter
+            maxLengthId={maxLengthId}
+            maxLength={maxLength}
+            currentLength={props.value?.length ?? uncontrolledValue.length}
+            size={size}
+            i18n={i18n}
+          />
         )}
         <div
           className="navds-form-field__error"

package/src/form/textarea/TextareaCounter.tsx

@@ -2,18 +2,32 @@ import cl from "clsx";
 import React, { useEffect, useState } from "react";
 import { BodyShort } from "../../typography";
 import debounce from "../../util/debounce";
+import { useI18n } from "../../util/i18n/i18n.context";
 import type { TextareaProps } from "./Textarea";
 
 interface Props {
+  maxLengthId: string;
   maxLength: number;
   currentLength: number;
   size: TextareaProps["size"];
   i18n: TextareaProps["i18n"];
 }
 
-const TextareaCounter = ({ maxLength, currentLength, size, i18n }: Props) => {
-  const difference = maxLength - currentLength;
+const TextareaCounter = ({
+  maxLengthId,
+  maxLength,
+  currentLength,
+  size,
+  i18n,
+}: Props) => {
+  const translate = useI18n("Textarea", {
+    charsLeft: i18n?.counterLeft ? `{chars} ${i18n.counterLeft}` : undefined,
+    charsTooMany: i18n?.counterTooMuch
+      ? `{chars} ${i18n.counterTooMuch}`
+      : undefined,
+  });
 
+  const difference = maxLength - currentLength;
   const [debouncedDiff, setDebouncedDiff] = useState(difference);
 
   useEffect(() => {
@@ -29,12 +43,16 @@ const TextareaCounter = ({ maxLength, currentLength, size, i18n }: Props) => {
 
   return (
     <>
+      <span id={maxLengthId} className="navds-sr-only">
+        {translate("maxLength", { maxLength })}
+      </span>
+
       {difference < 20 && (
         <span
           role="status"
           className="navds-textarea__sr-counter navds-sr-only"
         >
-          {getCounterText(debouncedDiff, i18n)}
+          {getCounterText(debouncedDiff, translate)}
         </span>
       )}
 
@@ -44,15 +62,21 @@ const TextareaCounter = ({ maxLength, currentLength, size, i18n }: Props) => {
         })}
         size={size}
       >
-        {getCounterText(difference, i18n)}
+        {getCounterText(difference, translate)}
       </BodyShort>
     </>
   );
 };
 
-const getCounterText = (difference: number, i18n: TextareaProps["i18n"]) =>
+const getCounterText = (
+  difference: number,
+  translate: (
+    key: "charsTooMany" | "charsLeft",
+    replacements?: { chars: number },
+  ) => string,
+) =>
   difference < 0
-    ? `${Math.abs(difference)} ${i18n?.counterTooMuch ?? "tegn for mye"}`
-    : `${difference} ${i18n?.counterLeft ?? "tegn igjen"}`;
+    ? translate("charsTooMany", { chars: Math.abs(difference) })
+    : translate("charsLeft", { chars: difference });
 
 export default TextareaCounter;

package/src/loader/Loader.tsx

@@ -2,6 +2,7 @@ import cl from "clsx";
 import React, { SVGProps, forwardRef } from "react";
 import { omit } from "../util";
 import { useId } from "../util/hooks";
+import { useI18n } from "../util/i18n/i18n.context";
 
 export interface LoaderProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
   /**
@@ -19,7 +20,7 @@ export interface LoaderProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
     | "xsmall";
   /**
    * Title prop on svg
-   * @default "venter..."
+   * @default "Venter…"
    */
   title?: React.ReactNode;
   /**
@@ -47,7 +48,7 @@ export type LoaderType = React.ForwardRefExoticComponent<
  *
  * @example
  * ```jsx
- * <Loader size="3xlarge" title="Venter..." />
+ * <Loader size="3xlarge" title="Venter…" />
  * ```
  */
 export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
@@ -55,7 +56,7 @@ export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
     {
       className,
       size = "medium",
-      title = "venter...",
+      title,
       transparent = false,
       variant = "neutral",
       id,
@@ -64,6 +65,7 @@ export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
     ref,
   ) => {
     const internalId = useId();
+    const translate = useI18n("Loader");
 
     return (
       <svg
@@ -83,7 +85,9 @@ export const Loader: LoaderType = forwardRef<SVGSVGElement, LoaderProps>(
         preserveAspectRatio="xMidYMid"
         {...omit(rest, ["children"])}
       >
-        <title id={id ?? `loader-${internalId}`}>{title}</title>
+        <title id={id ?? `loader-${internalId}`}>
+          {title || translate("title")}
+        </title>
         <circle
           className="navds-loader__background"
           xmlns="http://www.w3.org/2000/svg"

package/src/modal/ModalHeader.tsx

@@ -2,6 +2,7 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { XMarkIcon } from "@navikt/aksel-icons";
 import { Button } from "../button";
+import { useI18n } from "../util/i18n/i18n.context";
 import { useModalContext } from "./Modal.context";
 
 export interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -16,6 +17,7 @@ export interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
 const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
   ({ children, className, closeButton = true, ...rest }, ref) => {
     const context = useModalContext();
+    const translate = useI18n("Modal");
 
     return (
       <div {...rest} ref={ref} className={cl("navds-modal__header", className)}>
@@ -32,7 +34,7 @@ const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
               }
             }}
             onClick={context.closeHandler}
-            icon={<XMarkIcon title="Lukk" />}
+            icon={<XMarkIcon title={translate("close")} />}
           />
         )}
         {children}

package/src/pagination/Pagination.tsx

@@ -3,6 +3,7 @@ import React, { forwardRef } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
 import { BodyShort, Heading } from "../typography";
 import { useId } from "../util";
+import { useI18n } from "../util/i18n/i18n.context";
 import PaginationItem, {
   PaginationItemProps,
   PaginationItemType,
@@ -138,6 +139,7 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
     ref,
   ) => {
     const headingId = useId();
+    const translate = useI18n("Pagination");
 
     if (page < 1) {
       console.error("page cannot be less than 1");
@@ -194,11 +196,11 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
                 <ChevronLeftIcon
                   {...(prevNextTexts
                     ? { "aria-hidden": true }
-                    : { title: "Forrige" })}
+                    : { title: translate("previous") })}
                 />
               }
             >
-              {prevNextTexts && `Forrige`}
+              {prevNextTexts && translate("previous")}
             </Item>
           </li>
           {getSteps({ page, count, siblingCount, boundaryCount }).map(
@@ -241,12 +243,12 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
                 <ChevronRightIcon
                   {...(prevNextTexts
                     ? { "aria-hidden": true }
-                    : { title: "Neste" })}
+                    : { title: translate("next") })}
                 />
               }
               iconPosition="right"
             >
-              {prevNextTexts && `Neste`}
+              {prevNextTexts && translate("next")}
             </Item>
           </li>
         </ul>

package/src/progress-bar/ProgressBar.tsx

@@ -1,5 +1,6 @@
 import cl from "clsx";
-import React, { HTMLAttributes, forwardRef, useRef } from "react";
+import React, { HTMLAttributes, forwardRef, useEffect, useRef } from "react";
+import { useI18n } from "../util/i18n/i18n.context";
 
 interface ProgressBarPropsBase
   extends Omit<HTMLAttributes<HTMLDivElement>, "role"> {
@@ -92,11 +93,12 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
     },
     ref,
   ) => {
-    const translate = 100 - (Math.round(value) / valueMax) * 100;
+    const translateX = 100 - (Math.round(value) / valueMax) * 100;
     const onTimeoutRef = useRef<() => void>();
     onTimeoutRef.current = simulated?.onTimeout;
+    const translate = useI18n("ProgressBar");
 
-    React.useEffect(() => {
+    useEffect(() => {
       if (simulated?.seconds && onTimeoutRef.current) {
         const timeout = setTimeout(
           onTimeoutRef.current,
@@ -119,8 +121,13 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
         aria-valuenow={simulated?.seconds ? 0 : Math.round(value)}
         aria-valuetext={
           simulated?.seconds
-            ? `Fremdrift kan ikke beregnes, antatt tid er: ${simulated?.seconds} sekunder`
-            : `${Math.round(value)} av ${Math.round(valueMax)}`
+            ? translate("progressUnknown", {
+                seconds: Math.round(simulated?.seconds),
+              })
+            : translate("progress", {
+                current: Math.round(value),
+                max: Math.round(valueMax),
+              })
         }
         // biome-ignore lint/a11y/useAriaPropsForRole: We found that adding valueMin was not needed
         role="progressbar"
@@ -130,17 +137,15 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
       >
         <div
           className={cl("navds-progress-bar__foreground", {
-            "navds-progress-bar__foreground--indeterminate": Number.isInteger(
-              simulated?.seconds,
-            ),
+            "navds-progress-bar__foreground--indeterminate":
+              simulated?.seconds !== undefined,
           })}
           style={{
-            "--__ac-progress-bar-simulated": Number.isInteger(
-              simulated?.seconds,
-            )
-              ? `${simulated?.seconds}s`
-              : undefined,
-            "--__ac-progress-bar-translate": `-${translate}%`,
+            "--__ac-progress-bar-simulated":
+              simulated?.seconds !== undefined
+                ? `${simulated?.seconds}s`
+                : undefined,
+            "--__ac-progress-bar-translate": `-${translateX}%`,
           }}
         />
       </div>

package/src/table/ExpandableRow.tsx

@@ -4,6 +4,7 @@ import { ChevronDownIcon } from "@navikt/aksel-icons";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useId } from "../util/hooks";
 import { useControllableState } from "../util/hooks/useControllableState";
+import { useI18n } from "../util/i18n/i18n.context";
 import AnimateHeight from "./AnimateHeight";
 import DataCell from "./DataCell";
 import Row, { RowProps } from "./Row";
@@ -20,7 +21,7 @@ export interface ExpandableRowProps extends Omit<RowProps, "content"> {
   togglePlacement?: "left" | "right";
   /**
    * Opens component if 'true', closes if 'false'
-   * Using this props removes automatic control of open-state
+   * Using this prop removes automatic control of open-state
    */
   open?: boolean;
   /**
@@ -76,21 +77,19 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
       value: open,
       onChange: onOpenChange,
     });
-
+    const translate = useI18n("global");
     const id = useId();
 
-    const expansionHandler = (e) => {
-      _setOpen((x) => !x);
-      e.stopPropagation();
+    const expansionHandler = (event: React.MouseEvent<HTMLElement>) => {
+      _setOpen((oldOpen) => !oldOpen);
+      event.stopPropagation();
     };
 
-    const onRowClick = (e) =>
-      !isInteractiveTarget(e.target) && expansionHandler(e);
-
-    const handleRowClick = (
-      e: React.MouseEvent<HTMLTableRowElement, MouseEvent>,
-    ) => {
-      !expansionDisabled && expandOnRowClick && onRowClick(e);
+    const handleRowClick = (event: React.MouseEvent<HTMLTableRowElement>) => {
+      expandOnRowClick &&
+        !expansionDisabled &&
+        !isInteractiveTarget(event.target as HTMLElement) &&
+        expansionHandler(event);
     };
 
     return (
@@ -123,7 +122,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
               >
                 <ChevronDownIcon
                   className="navds-table__expandable-icon"
-                  title={_open ? "Vis mindre" : "Vis mer"}
+                  title={_open ? translate("showLess") : translate("showMore")}
                 />
               </button>
             )}

package/src/tabs/parts/tablist/ScrollButtons.tsx

@@ -17,11 +17,7 @@ function ScrollButton({ hidden, onClick, dir }: ScrollButtonProps) {
       onClick={onClick}
       aria-hidden
     >
-      {dir === "left" ? (
-        <ChevronLeftIcon title="scroll tilbake" />
-      ) : (
-        <ChevronRightIcon title="scroll neste" />
-      )}
+      {dir === "left" ? <ChevronLeftIcon /> : <ChevronRightIcon />}
     </div>
   );
 }

package/src/util/i18n/i18n.context.test.tsx

@@ -79,17 +79,15 @@ describe("useI18n", () => {
     };
     const { result } = renderHook(() => useI18n("FileUpload", i18n));
     const translate = result.current;
-    expect(
-      translate("item.uploading", { replacements: { name: "John", cnt: 3 } }),
-    ).toBe("Hello, John. You have 3 messages.");
+    expect(translate("item.uploading", { name: "John", cnt: 3 })).toBe(
+      "Hello, John. You have 3 messages.",
+    );
   });
 
   test("should throw an error if replacement key is not found", () => {
     const i18n = { item: { uploading: "Hello, {name}" } };
     const { result } = renderHook(() => useI18n("FileUpload", i18n));
     const translate = result.current;
-    expect(() =>
-      translate("item.uploading", { replacements: { other: "John" } }),
-    ).toThrowError();
+    expect(() => translate("item.uploading", { other: "John" })).toThrowError();
   });
 });

package/src/util/i18n/i18n.context.ts

@@ -27,7 +27,7 @@ export function useI18n<T extends Component>(
    */
   const translate = (
     keypath: NestedKeyOf<Translations[T]>,
-    options?: { replacements: Record<string, string | number> },
+    replacements?: Record<string, string | number>,
   ) => {
     const text = get(
       keypath,
@@ -37,19 +37,19 @@ export function useI18n<T extends Component>(
         : [i18n[componentName]]),
     );
 
-    if (options?.replacements) {
+    if (replacements) {
       return text.replace(REPLACE_REGEX, (match) => {
         const replacement = match.substring(1, match.length - 1);
 
-        if (options.replacements[replacement] === undefined) {
-          const replacementData = JSON.stringify(options.replacements);
+        if (replacements[replacement] === undefined) {
+          const replacementData = JSON.stringify(replacements);
 
           throw new Error(
             `Error translating key '${keypath}'. No replacement syntax ({}) found for key '${replacement}'. The following replacements were passed: '${replacementData}'`,
           );
         }
 
-        return options.replacements[replacement] as string; // can also be a number, but JS doesn't mind...
+        return replacements[replacement] as string; // can also be a number, but JS doesn't mind...
       });
     }
 

package/src/util/i18n/locales/en.ts

@@ -1,6 +1,11 @@
 import type { Translations } from "../i18n.types";
 
 export default {
+  global: {
+    showMore: "Show more",
+    showLess: "Show less",
+  },
+
   FileUpload: {
     dropzone: {
       button: "Choose file",
@@ -37,4 +42,31 @@ export default {
       labelSuffix: "delete",
     },
   },
+  ErrorSummary: {
+    heading: "You must correct the following errors before you can continue:",
+  },
+  Loader: {
+    title: "Waiting…",
+  },
+  Modal: {
+    close: "Close",
+  },
+  Pagination: {
+    previous: "Previous",
+    next: "Next",
+  },
+  ProgressBar: {
+    progress: "{current} of {max}",
+    progressUnknown:
+      "Progress is unknown, estimated time is {seconds} seconds.",
+  },
+  Search: {
+    clear: "Clear",
+    search: "Search",
+  },
+  Textarea: {
+    maxLength: "Text area with a {maxLength} character limit.",
+    charsTooMany: "{chars} characters too many",
+    charsLeft: "{chars} characters left",
+  },
 } satisfies Translations;