[Translations] ProgressBar: i18n support (#3277)

Co-authored-by: Ken <26967723+KenAJoh@users.noreply.github.com>
navikt · Oct 29, 2024 · 92b39de · 92b39de
1 parent 9dade96
commit 92b39de
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 15 deletions.
diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx b/@navikt/core/react/src/progress-bar/ProgressBar.stories.tsx
@@ -100,7 +100,7 @@ Sizes.args = {
 
 export const IndeterminateState: Story = {
   render: () => {
-    const values = [0, 5, 10, 20];
+    const values = [0, 5.7, 10, 20];
     return (
       <>
         {values.map((value) => (

diff --git a/@navikt/core/react/src/progress-bar/ProgressBar.tsx b/@navikt/core/react/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,15 @@ 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", {
+                replacements: { seconds: Math.round(simulated?.seconds) },
+              })
+            : translate("progress", {
+                replacements: {
+                  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 +139,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>

diff --git a/@navikt/core/react/src/util/i18n/locales/en.ts b/@navikt/core/react/src/util/i18n/locales/en.ts
@@ -52,4 +52,9 @@ export default {
     previous: "Previous",
     next: "Next",
   },
+  ProgressBar: {
+    progress: "{current} of {max}",
+    progressUnknown:
+      "Progress is unknown, estimated time is {seconds} seconds.",
+  },
 } satisfies Translations;
diff --git a/@navikt/core/react/src/util/i18n/locales/nb.ts b/@navikt/core/react/src/util/i18n/locales/nb.ts
@@ -59,4 +59,9 @@ export default {
     previous: "Forrige",
     next: "Neste",
   },
+  ProgressBar: {
+    progress: "{current} av {max}",
+    progressUnknown:
+      "Fremdrift kan ikke beregnes, antatt tid er {seconds} sekunder.",
+  },
 } satisfies TranslationMap;
diff --git a/@navikt/core/react/src/util/i18n/locales/nn.ts b/@navikt/core/react/src/util/i18n/locales/nn.ts
@@ -52,4 +52,9 @@ export default {
     previous: "Førre",
     next: "Neste",
   },
+  ProgressBar: {
+    progress: "{current} av {max}",
+    progressUnknown:
+      "Framdrift kan ikkje bereknast, antatt tid er {seconds} sekund.",
+  },
 } satisfies Translations;