✨ Release i18n support

.changeset/afraid-timers-own.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": minor
+---
+
+Chips.Removable: Removed prop `removeLabel`

.changeset/funny-insects-fly.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": minor
+---
+
+i18n: :sparkles: Implemented i18n support for all components. Components come with support for nb, nn and en locales ([Docs](https://aksel.nav.no/komponenter/core/provider#84d7ea5ec517))

.changeset/rare-rules-shave.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Timeline: Deprecated prop `axisLabelTemplates`. Use [Provider](https://aksel.nav.no/komponenter/core/provider#84d7ea5ec517) if you still need to change the date formats.

.changeset/sweet-bobcats-promise.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": minor
+---
+
+DatePicker/MonthPicker: Added new `translations` prop and deprecated `locale` prop

.changeset/twenty-bulldogs-warn.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Search: Deprecated prop `clearButtonLabel`. Use [Provider](https://aksel.nav.no/komponenter/core/provider#84d7ea5ec517) if you still need to change the label.

.changeset/witty-bikes-remember.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Textarea: Deprecated prop `i18n`. Use [Provider](https://aksel.nav.no/komponenter/core/provider#84d7ea5ec517) if you still need to change these texts.

.storybook/preview.tsx

@@ -5,8 +5,10 @@ import React, { useLayoutEffect } from "react";
 import darksideCss from "@navikt/ds-css/darkside/index.css?inline";
 // @ts-expect-error - Temporary
 import defaultCss from "@navikt/ds-css/index.css?inline";
-import { UNSAFE_AkselTheme } from "../@navikt/core/react/src/provider";
-import UNSAFE_AkselLanguageProvider from "../@navikt/core/react/src/provider/i18n/LanguageProvider";
+import {
+  Provider,
+  UNSAFE_AkselTheme,
+} from "../@navikt/core/react/src/provider";
 import en from "../@navikt/core/react/src/util/i18n/locales/en";
 import nb from "../@navikt/core/react/src/util/i18n/locales/nb";
 import nn from "../@navikt/core/react/src/util/i18n/locales/nn";
@@ -46,9 +48,7 @@ const translations = {
 const LanguageDecorator = ({ children, language }) => {
   if (language) {
     return (
-      <UNSAFE_AkselLanguageProvider translations={translations[language]}>
-        {children}
-      </UNSAFE_AkselLanguageProvider>
+      <Provider translations={translations[language]}>{children}</Provider>
     );
   }
   return children;

@navikt/core/react/package.json

@@ -40,6 +40,16 @@
         "default": "./cjs/index.js"
       }
     },
+    "./locales": {
+      "import": {
+        "types": "./esm/util/i18n/locales/index.d.ts",
+        "default": "./esm/util/i18n/locales/index.js"
+      },
+      "require": {
+        "types": "./cjs/util/i18n/locales/index.d.ts",
+        "default": "./cjs/util/i18n/locales/index.js"
+      }
+    },
     "./Accordion": {
       "import": {
         "types": "./esm/accordion/index.d.ts",

@navikt/core/react/src/chips/Removable.tsx

@@ -16,11 +16,6 @@ export interface ChipsRemovableProps
    * Click callback
    */
   onDelete?: () => void;
-  /**
-   * Replaces label read for screen-readers
-   * @default "slett"
-   */
-  removeLabel?: string;
 }
 
 export const RemovableChips = forwardRef<
@@ -32,7 +27,6 @@ export const RemovableChips = forwardRef<
       children,
       variant = "action",
       onDelete,
-      removeLabel,
       className,
       onClick,
       type = "button",
@@ -51,9 +45,7 @@ export const RemovableChips = forwardRef<
           className,
           `navds-chips__removable--${variant}`,
         )}
-        aria-label={`${children} ${
-          removeLabel ?? translate("Removable.labelSuffix")
-        }`}
+        aria-label={`${children} ${translate("Removable.labelSuffix")}`}
         onClick={composeEventHandlers(onClick, onDelete)}
       >
         <span className="navds-chips__chip-text">{children}</span>

@navikt/core/react/src/date/context/index.ts

@@ -1,5 +1,9 @@
-export { useDateInputContext, DateContext } from "./useDateInputContext";
+export { useDateInputContext, DateInputContext } from "./useDateInputContext";
 export {
   useSharedMonthContext,
   SharedMonthProvider,
 } from "./useSharedMonthContext";
+export {
+  useDateTranslationContext,
+  DateTranslationContextProvider,
+} from "./useDateTranslationContext";

@navikt/core/react/src/date/context/useDateInputContext.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext } from "react";
 
-interface DateContextContextProps {
+interface DateInputContextProps {
   /**
    * Open state for popover
    */
@@ -19,13 +19,15 @@ interface DateContextContextProps {
   defined: boolean;
 }
 
-export const DateContext = createContext<DateContextContextProps | null>(null);
+export const DateInputContext = createContext<DateInputContextProps | null>(
+  null,
+);
 
 export const useDateInputContext = () => {
-  const context = useContext(DateContext);
+  const context = useContext(DateInputContext);
 
   if (!context) {
-    console.warn("useDateInputContext must be used with DateContext");
+    console.warn("useDateInputContext must be used with DateInputContext");
   }
 
   return context;

@navikt/core/react/src/date/context/useDateTranslationContext.ts

@@ -0,0 +1,9 @@
+import { createContext } from "../../util/create-context";
+import { TFunction } from "../../util/i18n/i18n.context";
+
+interface DateTranslationContextProps {
+  translate: TFunction<"DatePicker">;
+}
+
+export const [DateTranslationContextProvider, useDateTranslationContext] =
+  createContext<DateTranslationContextProps>();

@navikt/core/react/src/date/datepicker/DatePicker.tsx

@@ -5,11 +5,11 @@ import { DateRange, DayPicker, isMatch } from "react-day-picker";
 import { omit } from "../../util";
 import { useId } from "../../util/hooks";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
-import { useDateLocale } from "../../util/i18n/i18n.context";
-import { DateContext } from "../context";
+import { useDateLocale, useI18n } from "../../util/i18n/i18n.context";
+import { DateInputContext, DateTranslationContextProvider } from "../context";
 import { DatePickerInput } from "../parts/DateInput";
 import { DateWrapper } from "../parts/DateWrapper";
-import { getLocaleFromString } from "../utils";
+import { getLocaleFromString, getTranslations } from "../utils";
 import DatePickerStandalone from "./DatePickerStandalone";
 import Caption from "./parts/Caption";
 import DropdownCaption from "./parts/DropdownCaption";
@@ -68,6 +68,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     {
       children,
       locale,
+      translations,
       dropdownCaption,
       disabled = [],
       disableWeekends = false,
@@ -86,6 +87,11 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     },
     ref,
   ) => {
+    const translate = useI18n(
+      "DatePicker",
+      translations,
+      getTranslations(locale),
+    );
     const langProviderLocale = useDateLocale();
     const ariaId = useId(id);
     const [open, setOpen] = useState(_open ?? false);
@@ -151,37 +157,40 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     );
 
     return (
-      <DateContext.Provider
-        value={{
-          open: _open ?? open,
-          onOpen: () => {
-            setOpen((x) => !x);
-            onOpenToggle?.();
-          },
-          ariaId,
-          defined: true,
-        }}
-      >
-        <div
-          ref={mergedRef}
-          className={cl("navds-date__wrapper", wrapperClassName)}
+      <DateTranslationContextProvider translate={translate}>
+        <DateInputContext.Provider
+          value={{
+            open: _open ?? open,
+            onOpen: () => {
+              setOpen((x) => !x);
+              onOpenToggle?.();
+            },
+            ariaId,
+            defined: true,
+          }}
         >
-          {children}
-          <DateWrapper
-            open={_open ?? open}
-            anchor={wrapperRef}
-            onClose={() => onClose?.() ?? setOpen(false)}
-            locale={locale}
-            variant={mode}
-            popoverProps={{
-              id: ariaId,
-              strategy,
-            }}
+          <div
+            ref={mergedRef}
+            className={cl("navds-date__wrapper", wrapperClassName)}
           >
-            {DatePickerComponent}
-          </DateWrapper>
-        </div>
-      </DateContext.Provider>
+            {children}
+            <DateWrapper
+              open={_open ?? open}
+              anchor={wrapperRef}
+              onClose={() => onClose?.() ?? setOpen(false)}
+              locale={locale}
+              translate={translate}
+              variant={mode}
+              popoverProps={{
+                id: ariaId,
+                strategy,
+              }}
+            >
+              {DatePickerComponent}
+            </DateWrapper>
+          </div>
+        </DateInputContext.Provider>
+      </DateTranslationContextProvider>
     );
   },
 ) as DatePickerComponent;

@navikt/core/react/src/date/datepicker/DatePickerStandalone.tsx

@@ -3,8 +3,9 @@ import { isWeekend } from "date-fns";
 import React, { forwardRef } from "react";
 import { DateRange, DayPicker, isMatch } from "react-day-picker";
 import { omit } from "../../util";
-import { useDateLocale } from "../../util/i18n/i18n.context";
-import { getLocaleFromString } from "../utils";
+import { useDateLocale, useI18n } from "../../util/i18n/i18n.context";
+import { DateTranslationContextProvider } from "../context";
+import { getLocaleFromString, getTranslations } from "../utils";
 import Caption from "./parts/Caption";
 import DropdownCaption from "./parts/DropdownCaption";
 import { HeadRow } from "./parts/HeadRow";
@@ -51,6 +52,7 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
     {
       className,
       locale,
+      translations,
       dropdownCaption,
       disabled = [],
       disableWeekends = false,
@@ -64,6 +66,11 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
     },
     ref,
   ) => {
+    const translate = useI18n(
+      "DatePicker",
+      translations,
+      getTranslations(locale),
+    );
     const langProviderLocale = useDateLocale();
     const [selectedDates, setSelectedDates] = React.useState<
       Date | Date[] | DateRange | undefined
@@ -84,41 +91,43 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
         ref={ref}
         className={cl("navds-date__standalone-wrapper", className)}
       >
-        <DayPicker
-          locale={locale ? getLocaleFromString(locale) : langProviderLocale}
-          mode={mode}
-          onSelect={handleSelect}
-          selected={selected ?? selectedDates}
-          components={{
-            Caption: dropdownCaption ? DropdownCaption : Caption,
-            Head: TableHead,
-            HeadRow,
-            WeekNumber,
-            Row,
-          }}
-          className="navds-date"
-          classNames={{ vhidden: "navds-sr-only" }}
-          disabled={(day) => {
-            return (
-              (disableWeekends && isWeekend(day)) || isMatch(day, disabled)
-            );
-          }}
-          weekStartsOn={1}
-          initialFocus={false}
-          modifiers={{
-            weekend: (day) => disableWeekends && isWeekend(day),
-          }}
-          modifiersClassNames={{
-            weekend: "rdp-day__weekend",
-          }}
-          showWeekNumber={showWeekNumber}
-          onWeekNumberClick={
-            mode === "multiple" ? onWeekNumberClick : undefined
-          }
-          fixedWeeks={fixedWeeks}
-          showOutsideDays
-          {...omit(rest, ["children", "id"])}
-        />
+        <DateTranslationContextProvider translate={translate}>
+          <DayPicker
+            locale={locale ? getLocaleFromString(locale) : langProviderLocale}
+            mode={mode}
+            onSelect={handleSelect}
+            selected={selected ?? selectedDates}
+            components={{
+              Caption: dropdownCaption ? DropdownCaption : Caption,
+              Head: TableHead,
+              HeadRow,
+              WeekNumber,
+              Row,
+            }}
+            className="navds-date"
+            classNames={{ vhidden: "navds-sr-only" }}
+            disabled={(day) => {
+              return (
+                (disableWeekends && isWeekend(day)) || isMatch(day, disabled)
+              );
+            }}
+            weekStartsOn={1}
+            initialFocus={false}
+            modifiers={{
+              weekend: (day) => disableWeekends && isWeekend(day),
+            }}
+            modifiersClassNames={{
+              weekend: "rdp-day__weekend",
+            }}
+            showWeekNumber={showWeekNumber}
+            onWeekNumberClick={
+              mode === "multiple" ? onWeekNumberClick : undefined
+            }
+            fixedWeeks={fixedWeeks}
+            showOutsideDays
+            {...omit(rest, ["children", "id"])}
+          />
+        </DateTranslationContextProvider>
       </div>
     );
   },

@navikt/core/react/src/date/datepicker/parts/Caption.tsx

@@ -3,8 +3,7 @@ import { CaptionProps, useDayPicker, useNavigation } from "react-day-picker";
 import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import { Button } from "../../../button";
 import { Label } from "../../../typography";
-import { useI18n } from "../../../util/i18n/i18n.context";
-import { getTranslations } from "../../utils";
+import { useDateTranslationContext } from "../../context";
 import WeekRow from "./WeekRow";
 
 /**
@@ -16,7 +15,7 @@ export const DatePickerCaption = ({ displayMonth, id }: CaptionProps) => {
     formatters: { formatCaption },
     locale,
   } = useDayPicker();
-  const translate = useI18n("DatePicker", getTranslations(locale.code));
+  const translate = useDateTranslationContext().translate;
 
   return (
     <>