@navikt/ds-react 7.5.0 → 7.5.2

package/src/timeline/AxisLabels.tsx

@@ -1,4 +1,5 @@
 import {
+  Locale,
   addDays,
   addMonths,
   addYears,
@@ -13,9 +14,9 @@ import {
   startOfYear,
   subDays,
 } from "date-fns";
-import { nb as nbLocale } from "date-fns/locale";
 import React from "react";
 import { Detail } from "../typography/Detail";
+import { TFunction, useDateLocale, useI18n } from "../util/i18n/i18n.context";
 import { useTimelineContext } from "./hooks/useTimelineContext";
 import { isVisible } from "./utils";
 import { horizontalPositionAndWidth } from "./utils/calc";
@@ -26,7 +27,8 @@ export const dayLabels = (
   end: Date,
   totalDays: number,
   direction: "left" | "right",
-  template: string = "dd.MM",
+  template: string,
+  locale: Locale,
 ): AxisLabel[] => {
   const increment = Math.ceil(totalDays / 10);
   const lastDay = startOfDay(end);
@@ -44,7 +46,7 @@ export const dayLabels = (
       return {
         direction,
         horizontalPosition,
-        label: format(day, template, { locale: nbLocale }),
+        label: format(day, template, { locale }),
         date: day,
         width,
       };
@@ -56,7 +58,8 @@ export const monthLabels = (
   start: Date,
   end: Date,
   direction: "left" | "right",
-  template: string = "MMM yy",
+  template: string,
+  locale: Locale,
 ): AxisLabel[] => {
   const startMonth = startOfMonth(start);
   const endMonth = endOfMonth(end);
@@ -72,7 +75,7 @@ export const monthLabels = (
     return {
       direction,
       horizontalPosition,
-      label: format(month, template, { locale: nbLocale }),
+      label: format(month, template, { locale }),
       date: month,
       width,
     };
@@ -83,7 +86,8 @@ export const yearLabels = (
   start: Date,
   end: Date,
   direction: "left" | "right",
-  template: string = "yyyy",
+  template: string,
+  locale: Locale,
 ): AxisLabel[] => {
   const firstYear = startOfYear(start);
   const lastYear = endOfYear(end);
@@ -99,29 +103,33 @@ export const yearLabels = (
     return {
       direction,
       horizontalPosition,
-      label: format(year, template, { locale: nbLocale }),
+      label: format(year, template, { locale }),
       date: year,
       width,
     };
   });
 };
 
-const axisLabels = (
+const getLabels = (
   start: Date,
   end: Date,
   direction: "left" | "right",
-  templates?: AxisLabelTemplates,
+  locale: Locale,
+  translate: TFunction<"Timeline">,
 ): AxisLabel[] => {
   const totalDays = differenceInDays(end, start);
   if (totalDays < 40) {
-    return dayLabels(start, end, totalDays, direction, templates?.day);
+    const dayTemplate = translate("dayFormat");
+    return dayLabels(start, end, totalDays, direction, dayTemplate, locale);
   }
 
   if (totalDays < 370) {
-    return monthLabels(start, end, direction, templates?.month);
+    const monthTemplate = translate("monthFormat");
+    return monthLabels(start, end, direction, monthTemplate, locale);
   }
 
-  return yearLabels(start, end, direction, templates?.year);
+  const yearTemplate = translate("yearFormat");
+  return yearLabels(start, end, direction, yearTemplate, locale);
 };
 
 export const AxisLabels = ({
@@ -130,13 +138,19 @@ export const AxisLabels = ({
   templates?: AxisLabelTemplates;
 }) => {
   const { endDate, startDate, direction } = useTimelineContext();
-  const labels = axisLabels(startDate, endDate, direction, templates).filter(
-    isVisible,
-  );
+
+  const translate = useI18n("Timeline", {
+    dayFormat: templates?.day,
+    monthFormat: templates?.month,
+    yearFormat: templates?.year,
+  });
+  const locale = useDateLocale();
+
+  const labels = getLabels(startDate, endDate, direction, locale, translate);
 
   return (
     <div className="navds-timeline__axislabels" aria-hidden="true">
-      {labels.map((etikett) => (
+      {labels.filter(isVisible).map((etikett) => (
         <Detail
           className="navds-timeline__axislabels-label"
           as="div"

package/src/timeline/Pin.tsx

@@ -16,6 +16,7 @@ import {
 import { format } from "date-fns";
 import React, { forwardRef, useRef, useState } from "react";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
+import { useI18n } from "../util/i18n/i18n.context";
 import { useTimelineContext } from "./hooks/useTimelineContext";
 import { position } from "./utils/calc";
 import { TimelineComponentTypes } from "./utils/types.internal";
@@ -44,6 +45,7 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
     const { startDate, endDate, direction } = useTimelineContext();
     const [open, setOpen] = useState(false);
     const arrowRef = useRef<HTMLDivElement | null>(null);
+    const translate = useI18n("Timeline");
 
     const {
       context,
@@ -100,7 +102,9 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
             {...rest}
             ref={mergedRef}
             className="navds-timeline__pin-button"
-            aria-label={`pin:${format(date, "dd.MM.yyyy")}`}
+            aria-label={translate("Pin.pin", {
+              date: format(date, translate("dateFormat")),
+            })}
             type="button"
             aria-expanded={children ? open : undefined}
             {...getReferenceProps({

package/src/timeline/TimelineRow.tsx

@@ -2,6 +2,7 @@ import cl from "clsx";
 import { format } from "date-fns";
 import React, { forwardRef } from "react";
 import { BodyShort } from "../typography/BodyShort";
+import { useI18n } from "../util/i18n/i18n.context";
 import { PeriodContext } from "./hooks/usePeriodContext";
 import { useRowContext } from "./hooks/useRowContext";
 import { useTimelineContext } from "./hooks/useTimelineContext";
@@ -39,6 +40,7 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
   ({ label, className, headingTag = "h3", icon, ...rest }, ref) => {
     const { periods, id, active } = useRowContext();
     const { setActiveRow } = useTimelineContext();
+    const translate = useI18n("Timeline");
 
     const latest = periods.reduce((a, b) => {
       return a.end > b.end ? a : b;
@@ -77,11 +79,11 @@ export const TimelineRow = forwardRef<HTMLOListElement, TimelineRowProps>(
             ref={ref}
             aria-label={
               periods.length === 0
-                ? "Ingen perioder"
-                : `${format(earliest.start, "dd.MM.yyyy")} til ${format(
-                    latest.end,
-                    "dd.MM.yyyy",
-                  )}`
+                ? translate("Row.noPeriods")
+                : translate("Row.period", {
+                    start: format(earliest.start, translate("dateFormat")),
+                    end: format(latest.end, translate("dateFormat")),
+                  })
             }
             className={cl("navds-timeline__row-periods", className)}
             onKeyDown={(e) => {

package/src/timeline/period/ClickablePeriod.tsx

@@ -16,11 +16,12 @@ import {
 import cl from "clsx";
 import React, { useRef, useState } from "react";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
+import { useI18n } from "../../util/i18n/i18n.context";
 import { usePeriodContext } from "../hooks/usePeriodContext";
 import { useRowContext } from "../hooks/useRowContext";
 import { useTimelineContext } from "../hooks/useTimelineContext";
 import { ariaLabel, getConditionalClasses } from "../utils/period";
-import { PeriodProps } from "./types";
+import type { PeriodProps } from "./types";
 
 interface TimelineClickablePeriodProps extends PeriodProps {
   onSelectPeriod?: (
@@ -52,6 +53,7 @@ const ClickablePeriod = React.memo(
     const { firstFocus } = usePeriodContext();
     const { initiate, addFocusable } = useTimelineContext();
     const arrowRef = useRef<HTMLDivElement | null>(null);
+    const translate = useI18n("Timeline");
 
     const {
       context,
@@ -107,7 +109,7 @@ const ClickablePeriod = React.memo(
             firstFocus && addFocusable(r, index);
             mergedRef(r);
           }}
-          aria-label={ariaLabel(start, end, status, statusLabel)}
+          aria-label={ariaLabel(start, end, status, statusLabel, translate)}
           className={cl(
             "navds-timeline__period--clickable",
             getConditionalClasses(cropped, direction, status),

package/src/timeline/period/NonClickablePeriod.tsx

@@ -1,7 +1,8 @@
 import cl from "clsx";
 import React from "react";
+import { useI18n } from "../../util/i18n/i18n.context";
 import { ariaLabel, getConditionalClasses } from "../utils/period";
-import { PeriodProps } from "./types";
+import type { PeriodProps } from "./types";
 
 interface TimelineNonClickablePeriodProps extends PeriodProps {
   periodRef?: React.ForwardedRef<HTMLDivElement>;
@@ -20,6 +21,8 @@ const NonClickablePeriod = ({
   restProps,
   periodRef,
 }: TimelineNonClickablePeriodProps) => {
+  const translate = useI18n("Timeline");
+
   return (
     <div
       ref={periodRef}
@@ -36,7 +39,7 @@ const NonClickablePeriod = ({
       <span className="navds-timeline__period--inner">
         {icon}
         <span className="sr-only">
-          {ariaLabel(start, end, status, statusLabel)}
+          {ariaLabel(start, end, status, statusLabel, translate)}
         </span>
       </span>
     </div>

package/src/timeline/period/index.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from "react";
 import { usePeriodContext } from "../hooks/usePeriodContext";
 import { useRowContext } from "../hooks/useRowContext";
-import { TimelineComponentTypes } from "../utils/types.internal";
+import type { TimelineComponentTypes } from "../utils/types.internal";
 import ClickablePeriod from "./ClickablePeriod";
 import NonClickablePeriod from "./NonClickablePeriod";
 

package/src/timeline/period/types.ts

@@ -1,7 +1,9 @@
+import type { TimelinePeriodProps } from ".";
+
 export interface PeriodProps {
   start: Date;
   end: Date;
-  status: string;
+  status: Exclude<TimelinePeriodProps["status"], undefined>;
   cropped: string;
   direction: string;
   width: number;

package/src/timeline/utils/period.ts

@@ -1,5 +1,7 @@
 import cl from "clsx";
 import { format } from "date-fns";
+import type { TFunction } from "../../util/i18n/i18n.context";
+import type { PeriodProps } from "../period/types";
 
 export const getConditionalClasses = (
   cropped: string,
@@ -17,32 +19,19 @@ export const getConditionalClasses = (
   });
 };
 
-const translateStatus = (status: string): string => {
-  switch (status) {
-    case "success":
-      return "Suksess";
-    case "warning":
-      return "Advarsel";
-    case "danger":
-      return "Fare";
-    case "info":
-      return "Info";
-    case "neutral":
-      return "Nøytral";
-    default:
-      return status;
-  }
-};
-
 export const ariaLabel = (
   startDate: Date,
   endDate: Date,
-  status: string,
-  statusLabel?: string,
+  status: PeriodProps["status"],
+  statusLabel: string | undefined,
+  translate: TFunction<"Timeline">,
 ): string => {
-  const start = format(startDate, "dd.MM.yyyy");
-  const end = format(endDate, "dd.MM.yyyy");
-  return `${
-    statusLabel ? statusLabel : translateStatus(status)
-  } fra ${start} til ${end}`;
+  const dateFormat = translate("dateFormat");
+  const start = format(startDate, dateFormat);
+  const end = format(endDate, dateFormat);
+  return translate("Period.period", {
+    status: statusLabel || translate(`Period.${status}`),
+    start,
+    end,
+  });
 };

package/src/timeline/zoom/ZoomButton.tsx

@@ -8,6 +8,7 @@ import {
 } from "date-fns";
 import React, { forwardRef } from "react";
 import { Detail } from "../../typography/Detail";
+import { useI18n } from "../../util/i18n/i18n.context";
 import { useTimelineContext } from "../hooks/useTimelineContext";
 
 export interface TimelineZoomButtonProps {
@@ -33,6 +34,8 @@ export type ZoomButtonType = React.ForwardRefExoticComponent<
 export const ZoomButton: ZoomButtonType = forwardRef(
   ({ label, interval, count, ...rest }, ref) => {
     const { setStart, endDate, startDate, direction } = useTimelineContext();
+    const translate = useI18n("Timeline");
+    const dateFormat = translate("dateFormat");
 
     let startOfRange: Date;
 
@@ -59,11 +62,11 @@ export const ZoomButton: ZoomButtonType = forwardRef(
           type="button"
           aria-label={
             !currentZoom
-              ? `Zoom tidslinjen ${format(
-                  startOfRange,
-                  "dd.MM.yyyy",
-                )} til ${format(endDate, "dd.MM.yyyy")}`
-              : "Tilbakestill til initiell tidsperspektiv"
+              ? translate("Zoom.zoom", {
+                  start: format(startOfRange, dateFormat),
+                  end: format(endDate, dateFormat),
+                })
+              : translate("Zoom.reset")
           }
           ref={ref}
           {...rest}

package/src/util/i18n/get.ts

@@ -7,7 +7,7 @@ const OBJECT_NOTATION_MATCHER = /(\w+)/g;
 
 export function get(
   keypath: string | string[],
-  ...objs: (PartialTranslations | undefined)[]
+  objs: (PartialTranslations | undefined)[],
 ) {
   const keys = Array.isArray(keypath) ? keypath : getKeypath(keypath);
 
@@ -32,7 +32,7 @@ export function get(
   }
 
   throw new Error(
-    "Error translating key. The keypath does not resolve to a string.",
+    `Error translating key. Keypath '${keypath}' does not resolve to a string.`,
   );
 }
 

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

@@ -1,7 +1,13 @@
+import { Locale } from "date-fns";
 import { useContext } from "react";
 import { LanguageProviderContext } from "../../provider/i18n/LanguageProvider";
 import { get } from "./get";
-import { Component, ComponentTranslation, Translations } from "./i18n.types";
+import {
+  Component,
+  ComponentTranslation,
+  PartialTranslations,
+  Translations,
+} from "./i18n.types";
 
 /**
  * https://regex101.com/r/LYKWi3/1
@@ -15,27 +21,29 @@ type NestedKeyOf<ObjectType extends object> = {
     : `${Key}`;
 }[keyof ObjectType & (string | number)];
 
+export type TFunction<T extends Component> = (
+  keypath: NestedKeyOf<Translations[T]>,
+  replacements?: Record<string, string | number>,
+) => string;
+
 export function useI18n<T extends Component>(
   componentName: T,
   ...local: (ComponentTranslation<T> | undefined)[]
 ) {
   const languageProviderContext = useContext(LanguageProviderContext);
   const i18n = languageProviderContext.translations;
+  const i18nObjects: (PartialTranslations | undefined)[] = [
+    ...local,
+    ...(Array.isArray(i18n)
+      ? i18n.map((t) => t[componentName])
+      : [i18n[componentName]]),
+  ];
 
   /**
    * https://github.com/Shopify/polaris/blob/2115f9ba2f5bcbf2ad15745233501bff2db81ecf/polaris-react/src/utilities/i18n/I18n.ts#L24
    */
-  const translate = (
-    keypath: NestedKeyOf<Translations[T]>,
-    replacements?: Record<string, string | number>,
-  ) => {
-    const text = get(
-      keypath,
-      ...local,
-      ...(Array.isArray(i18n)
-        ? i18n.map((t) => t[componentName])
-        : [i18n[componentName]]),
-    );
+  const translate: TFunction<T> = (keypath, replacements) => {
+    const text = get(keypath, i18nObjects);
 
     if (replacements) {
       return text.replace(REPLACE_REGEX, (match) => {
@@ -43,7 +51,6 @@ export function useI18n<T extends Component>(
 
         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}'`,
           );
@@ -58,3 +65,18 @@ export function useI18n<T extends Component>(
 
   return translate;
 }
+
+export function useDateLocale() {
+  const languageProviderContext = useContext(LanguageProviderContext);
+  const i18n = languageProviderContext.translations;
+  const i18nObjects = Array.isArray(i18n)
+    ? i18n.map((t) => t.global)
+    : [i18n.global];
+
+  for (const obj of i18nObjects) {
+    if (obj?.dateLocale) {
+      return obj.dateLocale as Locale;
+    }
+  }
+  throw new Error("dateLocale not found.");
+}

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

@@ -1,7 +1,9 @@
+import { enGB } from "date-fns/locale";
 import type { Translations } from "../i18n.types";
 
 export default {
   global: {
+    dateLocale: enGB,
     showMore: "Show more",
     showLess: "Show less",
     readOnly: "Read-only",
@@ -70,4 +72,29 @@ export default {
     charsTooMany: "{chars} characters too many",
     charsLeft: "{chars} characters left",
   },
+  Timeline: {
+    dateFormat: "yyyy-MM-dd",
+    dayFormat: "d MMM",
+    monthFormat: "MMM yyyy",
+    yearFormat: "yyyy",
+    Row: {
+      noPeriods: "No periods",
+      period: "{start} to {end}",
+    },
+    Period: {
+      success: "Success",
+      warning: "Warning",
+      danger: "Danger",
+      info: "Info",
+      neutral: "Neutral",
+      period: "{status} from {start} to {end}",
+    },
+    Pin: {
+      pin: "Pin: {date}",
+    },
+    Zoom: {
+      zoom: "Zoom timeline {start} to {end}",
+      reset: "Reset zoom",
+    },
+  },
 } satisfies Translations;

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

@@ -1,13 +1,12 @@
+import { Locale, nb } from "date-fns/locale";
+
 interface TranslationMap {
-  [component: string]:
-    | Record<string, string>
-    | {
-        [subComponent: string]: Record<string, string>;
-      };
+  [component: string]: Record<string, string | Record<string, string> | Locale>;
 }
 
 export default {
   global: {
+    dateLocale: nb,
     showMore: "Vis mer",
     showLess: "Vis mindre",
     readOnly: "Skrivebeskyttet",
@@ -78,4 +77,29 @@ export default {
     charsTooMany: "{chars} tegn for mye",
     charsLeft: "{chars} tegn igjen",
   },
+  Timeline: {
+    dateFormat: "dd.MM.yyyy",
+    dayFormat: "dd.MM",
+    monthFormat: "MMM yy",
+    yearFormat: "yyyy",
+    Row: {
+      noPeriods: "Ingen perioder",
+      period: "{start} til {end}",
+    },
+    Period: {
+      success: "Suksess",
+      warning: "Advarsel",
+      danger: "Fare",
+      info: "Info",
+      neutral: "Nøytral", // TODO: Consider making these global
+      period: "{status} fra {start} til {end}",
+    },
+    Pin: {
+      pin: "Pin: {date}",
+    },
+    Zoom: {
+      zoom: "Zoom tidslinjen {start} til {end}",
+      reset: "Tilbakestill tidsperspektiv",
+    },
+  },
 } satisfies TranslationMap;

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

@@ -1,7 +1,9 @@
+import { nn } from "date-fns/locale";
 import type { Translations } from "../i18n.types";
 
 export default {
   global: {
+    dateLocale: nn,
     showMore: "Vis meir",
     showLess: "Vis mindre",
     readOnly: "Skrivebeskytta",
@@ -70,4 +72,29 @@ export default {
     charsTooMany: "{chars} teikn for mykje",
     charsLeft: "{chars} teikn igjen",
   },
+  Timeline: {
+    dateFormat: "dd.MM.yyyy",
+    dayFormat: "dd.MM",
+    monthFormat: "MMM yy",
+    yearFormat: "yyyy",
+    Row: {
+      noPeriods: "Ingen periodar",
+      period: "{start} til {end}",
+    },
+    Period: {
+      success: "Suksess",
+      warning: "Åtvaring",
+      danger: "Fare",
+      info: "Info",
+      neutral: "Nøytral",
+      period: "{status} frå {start} til {end}",
+    },
+    Pin: {
+      pin: "Pin: {date}",
+    },
+    Zoom: {
+      zoom: "Zoom tidslina {start} til {end}",
+      reset: "Tilbakestill tidsperspektiv",
+    },
+  },
 } satisfies Translations;

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

@@ -6,7 +6,10 @@ import nb from "./locales/nb";
 import nn from "./locales/nn";
 
 function checkValues(obj: Translations | Record<string, string>) {
-  Object.values(obj).forEach((value) => {
+  Object.entries(obj).forEach(([key, value]) => {
+    if (key === "dateLocale") {
+      return;
+    }
     if (typeof value === "object") {
       checkValues(value);
     } else {