ErrorSummary: add translation support (#3245)

* ErrorSummary: add translation support * Update @navikt/core/react/src/form/error-summary/ErrorSummary.tsx Co-authored-by: Halvor Haugan <[email protected]> * Update @navikt/core/react/src/util/i18n/locales/nn.ts Co-authored-by: Halvor Haugan <[email protected]> * ErrorSummary: fix broken object notation (thanks github conflict webGUI! 😂) * ErrorSummary: use proper casing for translations object --------- Co-authored-by: Halvor Haugan <[email protected]>
navikt · Oct 30, 2024 · bbc06a3 · bbc06a3
1 parent 6e49de8
commit bbc06a3
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 2 deletions.
diff --git a/@navikt/core/react/src/form/error-summary/ErrorSummary.tsx b/@navikt/core/react/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}

diff --git a/@navikt/core/react/src/form/error-summary/error-summary.stories.tsx b/@navikt/core/react/src/form/error-summary/error-summary.stories.tsx
@@ -2,6 +2,8 @@ import { Meta, StoryObj } from "@storybook/react";
 import { expect, userEvent, within } from "@storybook/test";
 import React, { useRef } from "react";
 import { VStack } from "../../layout/stack";
+import UNSAFE_AkselLanguageProvider from "../../provider/i18n/LanguageProvider";
+import nn from "../../util/i18n/locales/nn";
 import { ErrorSummary } from "./ErrorSummary";
 
 export default {
@@ -134,3 +136,18 @@ export const Chromatic: Story = {
     chromatic: { disable: false },
   },
 };
+
+export const ProvidedTranslations: Story = {
+  render: () => {
+    return (
+      <UNSAFE_AkselLanguageProvider translations={nn}>
+        <ErrorSummary size="small">
+          <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
+          <ErrorSummary.Item href="#2">
+            Tekstfeltet må ha en godkjent e-mail
+          </ErrorSummary.Item>
+        </ErrorSummary>
+      </UNSAFE_AkselLanguageProvider>
+    );
+  },
+};
diff --git a/@navikt/core/react/src/util/i18n/locales/en.ts b/@navikt/core/react/src/util/i18n/locales/en.ts
@@ -42,6 +42,9 @@ export default {
       labelSuffix: "delete",
     },
   },
+  ErrorSummary: {
+    heading: "You must correct the following errors before you can continue:",
+  },
   Loader: {
     title: "Waiting…",
   },

diff --git a/@navikt/core/react/src/util/i18n/locales/nb.ts b/@navikt/core/react/src/util/i18n/locales/nb.ts
@@ -49,6 +49,9 @@ export default {
       labelSuffix: "slett",
     },
   },
+  ErrorSummary: {
+    heading: "Du må rette disse feilene før du kan fortsette:",
+  },
   Loader: {
     title: "Venter…",
   },

diff --git a/@navikt/core/react/src/util/i18n/locales/nn.ts b/@navikt/core/react/src/util/i18n/locales/nn.ts
@@ -42,6 +42,9 @@ export default {
       labelSuffix: "slett",
     },
   },
+  ErrorSummary: {
+    heading: "Du må rette desse feila før du kan halde fram:",
+  },
   Loader: {
     title: "Ventar…",
   },