Expose timeline axis label templates as a prop

.changeset/flat-weeks-flow.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Timeline: Har nå egen `axisLabelTemplates`-prop for axixlabel formatering

@navikt/core/react/src/timeline/AxisLabels.tsx

@@ -19,13 +19,14 @@ import React from "react";
 import { useTimelineContext } from "./hooks/useTimelineContext";
 import { isVisible } from "./utils";
 import { horizontalPositionAndWidth } from "./utils/calc";
-import { AxisLabel } from "./utils/types.external";
+import { AxisLabel, AxisLabelTemplates } from "./utils/types.external";
 
 export const dayLabels = (
   start: Date,
   end: Date,
   totalDays: number,
-  direction: "left" | "right"
+  direction: "left" | "right",
+  template: string = "dd.MM"
 ): AxisLabel[] => {
   const increment = Math.ceil(totalDays / 10);
   const lastDay = startOfDay(end);
@@ -43,7 +44,7 @@ export const dayLabels = (
       return {
         direction: direction,
         horizontalPosition: horizontalPosition,
-        label: format(day, "dd.MM", { locale: nbLocale }),
+        label: format(day, template, { locale: nbLocale }),
         date: day,
         width: width,
       };
@@ -54,7 +55,8 @@ export const dayLabels = (
 export const monthLabels = (
   start: Date,
   end: Date,
-  direction: "left" | "right"
+  direction: "left" | "right",
+  template: string = "MMM yy"
 ): AxisLabel[] => {
   const startMonth = startOfMonth(start);
   const endMonth = endOfMonth(end);
@@ -70,7 +72,7 @@ export const monthLabels = (
     return {
       direction: direction,
       horizontalPosition: horizontalPosition,
-      label: format(month, "MMM yy", { locale: nbLocale }),
+      label: format(month, template, { locale: nbLocale }),
       date: month,
       width: width,
     };
@@ -80,7 +82,8 @@ export const monthLabels = (
 export const yearLabels = (
   start: Date,
   end: Date,
-  direction: "left" | "right"
+  direction: "left" | "right",
+  template: string = "yyyy"
 ): AxisLabel[] => {
   const firstYear = startOfYear(start);
   const lastYear = endOfYear(end);
@@ -96,7 +99,7 @@ export const yearLabels = (
     return {
       direction: direction,
       horizontalPosition: horizontalPosition,
-      label: year.getFullYear().toString(),
+      label: format(year, template, { locale: nbLocale }),
       date: year,
       width: width,
     };
@@ -106,21 +109,28 @@ export const yearLabels = (
 const axisLabels = (
   start: Date,
   end: Date,
-  direction: "left" | "right"
+  direction: "left" | "right",
+  templates?: AxisLabelTemplates
 ): AxisLabel[] => {
   const totalDays = differenceInDays(end, start);
   if (totalDays < 40) {
-    return dayLabels(start, end, totalDays, direction);
+    return dayLabels(start, end, totalDays, direction, templates?.day);
   } else if (totalDays < 370) {
-    return monthLabels(start, end, direction);
+    return monthLabels(start, end, direction, templates?.month);
   } else {
-    return yearLabels(start, end, direction);
+    return yearLabels(start, end, direction, templates?.year);
   }
 };
 
-export const AxisLabels = () => {
+export const AxisLabels = ({
+  templates,
+}: {
+  templates?: AxisLabelTemplates;
+}) => {
   const { endDate, startDate, direction } = useTimelineContext();
-  const labels = axisLabels(startDate, endDate, direction).filter(isVisible);
+  const labels = axisLabels(startDate, endDate, direction, templates).filter(
+    isVisible
+  );
 
   return (
     <div className="navds-timeline__axislabels" aria-hidden="true">

@navikt/core/react/src/timeline/Timeline.tsx

@@ -13,6 +13,7 @@ import Pin, { PinType } from "./Pin";
 import TimelineRow, { TimelineRowType } from "./TimelineRow";
 import { parseRows } from "./utils/timeline";
 import Zoom, { ZoomType } from "./zoom";
+import { AxisLabelTemplates } from "./utils/types.external";
 
 export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
@@ -33,6 +34,11 @@ export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
    * @default "left"
    */
   direction?: "left" | "right";
+  /**
+   * Templates for label texts. The templates are passed to the date-fns `format` function.
+   * Defaults to { day: "dd.MM", month: "MMM yy", year: "yyyy" }.
+   */
+  axisLabelTemplates?: AxisLabelTemplates;
 }
 
 interface TimelineComponent
@@ -74,7 +80,17 @@ interface TimelineComponent
  * ```
  */
 export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
-  ({ children, startDate, endDate, direction = "left", ...rest }, ref) => {
+  (
+    {
+      children,
+      startDate,
+      endDate,
+      direction = "left",
+      axisLabelTemplates,
+      ...rest
+    },
+    ref
+  ) => {
     const isMultipleRows = Array.isArray(children);
 
     const firstFocusabled = useRef<
@@ -194,7 +210,7 @@ export const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
       >
         <div {...rest} ref={ref}>
           <div className="navds-timeline">
-            <AxisLabels />
+            <AxisLabels templates={axisLabelTemplates} />
 
             {pins.map((pin) => {
               return pin;

@navikt/core/react/src/timeline/utils/types.external.ts

@@ -65,3 +65,9 @@ export interface SimplePeriod {
    */
   end: Date;
 }
+
+export type AxisLabelTemplates = {
+  day?: string;
+  month?: string;
+  year?: string;
+};