Merge branch 'main' into page-ex

@navikt/core/css/darkside/copybutton.darkside.css

@@ -21,7 +21,7 @@
   }
 
   &:hover {
-    background-color: var(--ax-bg-neutral-moderate-hover);
+    background-color: var(--ax-bg-neutral-moderate-hoverA);
   }
 
   &:focus-visible {

@navikt/core/react/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"

@navikt/core/react/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({

@navikt/core/react/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) => {

@navikt/core/react/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),

@navikt/core/react/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>

@navikt/core/react/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";
 

@navikt/core/react/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;