@oslokommune/punkt-react 17.1.2 → 18.0.0

package/src/components/strings/strings-override.test.tsx

@@ -0,0 +1,130 @@
+import { describe, expect, test, afterEach } from 'vitest'
+import { render, screen, cleanup } from '@testing-library/react'
+import { resetPktStrings, setPktStrings } from 'shared-strings'
+
+import { PktBackLink } from '../backlink/BackLink'
+import { PktBreadcrumbs } from '../breadcrumbs/Breadcrumbs'
+import { PktFileUpload } from '../fileupload/FileUpload'
+import { PktSearchInput } from '../searchinput/SearchInput'
+import { PktTextinput } from '../textinput/Textinput'
+import { PktStringsProvider } from './PktStringsProvider'
+
+/**
+ * Sjekker at hvert av de tre lagene faktisk slår gjennom på ekte komponenter:
+ * global store, provider og `strings`-propen på komponenten.
+ */
+
+afterEach(() => {
+  cleanup()
+  resetPktStrings()
+})
+
+describe('strings-propen per komponent', () => {
+  test('backlink bruker teksten fra propen', () => {
+    render(<PktBackLink href="/" strings={{ backlink: { label: 'Tilbake til lista' } }} />)
+    expect(screen.getByLabelText('Tilbake til lista')).toBeInTheDocument()
+  })
+
+  test('breadcrumbs bruker teksten fra propen', () => {
+    render(
+      <PktBreadcrumbs
+        breadcrumbs={[
+          { text: 'Hjem', href: '/' },
+          { text: 'Skjema', href: '/skjema' },
+        ]}
+        strings={{ breadcrumbs: { ariaLabel: 'Sti' } }}
+      />,
+    )
+    expect(screen.getByLabelText('Sti')).toBeInTheDocument()
+  })
+
+  test('searchinput bruker teksten fra propen', () => {
+    render(
+      <PktSearchInput id="s" strings={{ searchinput: { placeholder: 'Finn ansatt' } }} />,
+    )
+    expect(screen.getByPlaceholderText('Finn ansatt')).toBeInTheDocument()
+  })
+
+  test('fileupload bruker drop zone-tekst fra propen', () => {
+    render(
+      <PktFileUpload
+        name="files"
+        multiple
+        strings={{
+          fileupload: {
+            dropZoneDragMultiple: 'Dra dokumentene hit eller',
+            dropZoneOpenFileDialogMultiple: 'bla i filene',
+          },
+        }}
+      />,
+    )
+    expect(screen.getByText(/Dra dokumentene hit eller/)).toBeInTheDocument()
+    expect(screen.getByText('bla i filene')).toBeInTheDocument()
+  })
+
+  test('textinput sender propen videre til input-wrapperen', () => {
+    render(
+      <PktTextinput
+        id="t"
+        name="t"
+        label="Navn"
+        optionalTag
+        strings={{ forms: { optional: 'Frivillig' } }}
+      />,
+    )
+    expect(screen.getByText('Frivillig')).toBeInTheDocument()
+  })
+})
+
+describe('lagene i rekkefølge', () => {
+  test('propen vinner over den globale overstyringen', () => {
+    setPktStrings({ searchinput: { placeholder: 'Global' } })
+    render(<PktSearchInput id="s" strings={{ searchinput: { placeholder: 'Instans' } }} />)
+    expect(screen.getByPlaceholderText('Instans')).toBeInTheDocument()
+  })
+
+  test('den globale overstyringen gjelder uten prop', () => {
+    setPktStrings({ searchinput: { placeholder: 'Global' } })
+    render(<PktSearchInput id="s" />)
+    expect(screen.getByPlaceholderText('Global')).toBeInTheDocument()
+  })
+
+  test('provideren gjelder for undertreet', () => {
+    render(
+      <PktStringsProvider strings={{ forms: { optional: 'Kan stå tomt' } }}>
+        <PktTextinput id="t" name="t" label="Navn" optionalTag />
+      </PktStringsProvider>,
+    )
+    expect(screen.getByText('Kan stå tomt')).toBeInTheDocument()
+  })
+
+  test('propen vinner over provideren', () => {
+    render(
+      <PktStringsProvider strings={{ forms: { optional: 'Fra provider' } }}>
+        <PktTextinput
+          id="t"
+          name="t"
+          label="Navn"
+          optionalTag
+          strings={{ forms: { optional: 'Fra prop' } }}
+        />
+      </PktStringsProvider>,
+    )
+    expect(screen.getByText('Fra prop')).toBeInTheDocument()
+  })
+
+  test('den utfasede optionalText-propen vinner over alt', () => {
+    setPktStrings({ forms: { optional: 'Global' } })
+    render(
+      <PktTextinput
+        id="t"
+        name="t"
+        label="Navn"
+        optionalTag
+        optionalText="Gammel"
+        strings={{ forms: { optional: 'Fra prop' } }}
+      />,
+    )
+    expect(screen.getByText('Gammel')).toBeInTheDocument()
+  })
+})

package/src/components/tag/Tag.tsx

@@ -17,8 +17,13 @@ import {
 import type { TTagSkin } from 'shared-types'
 
 import { PktIcon } from '../icon/Icon'
+import { usePktStrings } from '../../hooks/usePktStrings'
+import { formatString, type TPktStringsOverride } from 'shared-strings'
 
 interface BasePktTagProps {
+  /** Overstyrer tekster for denne komponenten. */
+  strings?: TPktStringsOverride
+
   skin?: TTagSkin
   textStyle?: 'normal-text' | 'thin-text'
   size?: 'small' | 'medium' | 'large'
@@ -56,6 +61,7 @@ export const PktTag = forwardRef<HTMLSpanElement | HTMLButtonElement, ButtonPktT
       onClose,
       type,
       'aria-description': ariaDescriptionPropValue,
+      strings,
       ...props
     }: ButtonPktTagProps | SpanPktTagProps,
     forwardedRef: ForwardedRef<HTMLElement>,
@@ -76,9 +82,14 @@ export const PktTag = forwardRef<HTMLSpanElement | HTMLButtonElement, ButtonPktT
       setLabelText(spanRef.current?.textContent?.trim() ?? '')
     }, [children])
 
+    const s = usePktStrings(['tag'], strings)
+
     const ariaDescription = useMemo(() => {
-      if (closeTag && !ariaLabel) return (labelText && `Klikk for å fjerne ${labelText}`) || ariaDescriptionPropValue
-    }, [closeTag, ariaLabel, labelText, ariaDescriptionPropValue])
+      if (closeTag && !ariaLabel)
+        return (
+          (labelText && formatString(s.tag.remove, { label: labelText })) || ariaDescriptionPropValue
+        )
+    }, [closeTag, ariaLabel, labelText, ariaDescriptionPropValue, s])
 
     const classes = {
       'pkt-tag': true,

package/src/components/textarea/Textarea.tsx

@@ -14,8 +14,11 @@ import {
 import { PktInputWrapper } from '../inputwrapper/InputWrapper'
 import { TPktInputSize } from 'shared-types/size'
 import { describedByIds } from 'shared-utils/forms/described-by'
+import type { TPktStringsOverride } from 'shared-strings'
 
 export interface IPktTextarea extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /** Overstyrer tekster for denne komponenten. */
+  strings?: TPktStringsOverride
   id: string
   ariaDescribedby?: string
   ariaLabelledby?: string
@@ -87,6 +90,7 @@ export const PktTextarea = forwardRef(
       readOnly,
       skipForwardTestid = false,
       inputSize = 'medium',
+      strings,
       ...props
     }: IPktTextarea,
     ref: ForwardedRef<HTMLTextAreaElement>,
@@ -125,6 +129,7 @@ export const PktTextarea = forwardRef(
     return (
       <div className={outerClasses}>
         <PktInputWrapper
+          strings={strings}
           ariaDescribedby={ariaDescribedby}
           disabled={disabled}
           errorMessage={errorMessage}

package/src/components/textinput/Textinput.tsx

@@ -14,8 +14,11 @@ import {
 import { PktIcon } from '../icon/Icon'
 import { PktInputWrapper } from '../inputwrapper/InputWrapper'
 import { describedByIds } from 'shared-utils/forms/described-by'
+import type { TPktStringsOverride } from 'shared-strings'
 
 export interface IPktTextinput extends InputHTMLAttributes<HTMLInputElement> {
+  /** Overstyrer tekster for denne komponenten. */
+  strings?: TPktStringsOverride
   id: string
   ariaDescribedby?: string
   ariaLabelledby?: string
@@ -106,6 +109,7 @@ export const PktTextinput = forwardRef(
       onChange,
       skipForwardTestid = false,
       inputSize = 'medium',
+      strings,
       ...props
     }: IPktTextinput,
     ref: ForwardedRef<HTMLInputElement>,
@@ -140,6 +144,7 @@ export const PktTextinput = forwardRef(
     return (
       <div className={outerClasses}>
         <PktInputWrapper
+          strings={strings}
           ariaDescribedby={ariaDescribedby}
           disabled={disabled}
           errorMessage={errorMessage}

package/src/components/timepicker/Timepicker.tsx

@@ -220,6 +220,7 @@ export const PktTimepicker = forwardRef<HTMLDivElement, IPktTimepicker>((props,
       onBlur={state.handleFocusOut}
     >
       <PktInputWrapper
+        strings={state.stringsOverride}
         forId={state.hoursId}
         label={state.label}
         disabled={state.disabled}

package/src/components/timepicker/types.ts

@@ -1,6 +1,6 @@
+import type { TPktStringsOverride } from 'shared-strings'
 import type { ChangeEvent, FocusEvent, InputHTMLAttributes, ReactNode } from 'react'
 import { TPktInputSize } from 'shared-types/size'
-import type { ITimepickerStrings } from 'shared-types/timepicker'
 
 /**
  * Props for {@link PktTimepicker}: a React time picker with `HH:MM`, aligned with Elements `pkt-timepicker`.
@@ -95,7 +95,8 @@ export interface IPktTimepicker extends Omit<
   ariaDescribedby?: string
 
   /** Copy for hours, minutes, buttons, and popup. */
-  strings?: ITimepickerStrings
+  /** Overstyrer tekster for denne komponenten. */
+  strings?: TPktStringsOverride
 
   /** Change event from the hidden input (`e.target.value` is `HH:MM`). In React, `onChange` already fires on input. */
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void

package/src/components/timepicker/useTimepickerState.ts

@@ -8,13 +8,14 @@ import {
   useRef,
   useState,
 } from 'react'
-import { defaultTimepickerStrings } from 'shared-types/timepicker'
 import { getHourOptions, getMinuteOptions, getMinuteStep } from 'shared-utils/timepicker/options'
 import { stepTime } from 'shared-utils/timepicker/stepper'
 import { isValidTimeString, timeToMinutes } from 'shared-utils/timepicker/time-utils'
 
 import type { IPktTimepicker } from './types'
 import { TPktInputSize } from 'shared-types/size'
+import { usePktStrings } from '../../hooks/usePktStrings'
+import { formatString, type TPktStrings } from 'shared-strings'
 
 /**
  * ## Why this hook exists (React form model)
@@ -42,15 +43,6 @@ import { TPktInputSize } from 'shared-types/size'
  * node” idea. React components don’t get `attachInternals()` for that API on a `<div>`, so this pattern
  * is the sustainable equivalent in plain React.
  */
-const FORM_MESSAGES = {
-  required: 'Dette feltet er påkrevd',
-  invalid: 'Ugyldig verdi',
-  timeStepMismatch: 'Må treffe på et steg, for eksempel 0, {step} minutter',
-  timeStepMismatchHour: 'Må treffe på hver hele time',
-  timeStepMismatchHalfHour: 'Må treffe på hver hele eller halve time',
-  rangeUnderflowMin: 'Verdien må være større enn eller lik {min}.',
-  rangeOverflowMax: 'Verdien må være mindre enn eller lik {max}.',
-} as const
 
 function splitValid(value: string | undefined): [string, string] {
   if (value && isValidTimeString(value)) {
@@ -68,38 +60,41 @@ function displaySegmentsToCommittedTime(h: string, m: string): string {
 function validateTimeValue(
   value: string,
   opts: { required?: boolean; min?: string | number; max?: string | number; step?: number },
+  messages: TPktStrings['validation'],
 ): { valid: boolean; message?: string } {
   const { required, min, max, step } = opts
   if (required && !value) {
-    return { valid: false, message: FORM_MESSAGES.required }
+    return { valid: false, message: messages.valueMissing }
   }
   if (!value) {
     return { valid: true }
   }
   if (!isValidTimeString(value)) {
-    return { valid: false, message: FORM_MESSAGES.invalid }
+    return { valid: false, message: messages.typeMismatch }
   }
   const totalMinutes = timeToMinutes(value)
   const minuteStep = getMinuteStep(step)
   if (min && totalMinutes < timeToMinutes(String(min))) {
     return {
       valid: false,
-      message: FORM_MESSAGES.rangeUnderflowMin.replace('{min}', String(min)),
+      message: formatString(messages.rangeUnderflowMin, { min: String(min) }),
     }
   }
   if (max && totalMinutes > timeToMinutes(String(max))) {
     return {
       valid: false,
-      message: FORM_MESSAGES.rangeOverflowMax.replace('{max}', String(max)),
+      message: formatString(messages.rangeOverflowMax, { max: String(max) }),
     }
   }
   if (step && totalMinutes % minuteStep !== 0) {
     const stepMessage =
       minuteStep === 60
-        ? FORM_MESSAGES.timeStepMismatchHour
+        ? messages.timeStepMismatchHour
         : minuteStep === 30
-          ? FORM_MESSAGES.timeStepMismatchHalfHour
-          : FORM_MESSAGES.timeStepMismatch.replace('{step}', `${minuteStep}, ${minuteStep * 2}, ${minuteStep * 3}`)
+          ? messages.timeStepMismatchHalfHour
+          : formatString(messages.timeStepMismatch, {
+              step: `${minuteStep}, ${minuteStep * 2}, ${minuteStep * 3}`,
+            })
     return { valid: false, message: stepMessage }
   }
   return { valid: true }
@@ -145,7 +140,9 @@ export function useTimepickerState(props: IPktTimepicker, ref: React.ForwardedRe
     onBlur: onBlurProp,
   } = props
 
-  const strings = useMemo(() => stringsProp ?? defaultTimepickerStrings, [stringsProp])
+  const catalog = usePktStrings(['timepicker', 'validation'], stringsProp)
+  const strings = catalog.timepicker
+  const stringsOverride = stringsProp
 
   const isControlled = value !== undefined
   const initialStringValue = value !== undefined ? (value ?? '') : (defaultValue ?? '')
@@ -225,10 +222,10 @@ export function useTimepickerState(props: IPktTimepicker, ref: React.ForwardedRe
   useEffect(() => {
     const anchor = hoursInputRef.current
     if (!anchor) return
-    const validation = validateTimeValue(effectiveValue, { required, min, max, step })
+    const validation = validateTimeValue(effectiveValue, { required, min, max, step }, catalog.validation)
     anchor.setCustomValidity(validation.valid ? '' : (validation.message ?? ''))
     setIsInvalid(touched && !validation.valid)
-  }, [effectiveValue, required, min, max, step, touched])
+  }, [effectiveValue, required, min, max, step, touched, catalog.validation])
 
   const commitValue = useCallback(
     (newValue: string) => {
@@ -282,9 +279,9 @@ export function useTimepickerState(props: IPktTimepicker, ref: React.ForwardedRe
     const hidden = changeInputRef.current
     if (!hoursEl) return
     const raw = hidden?.value ?? ''
-    const result = validateTimeValue(raw, { required, min, max, step })
+    const result = validateTimeValue(raw, { required, min, max, step }, catalog.validation)
     hoursEl.setCustomValidity(result.valid ? '' : (result.message ?? ''))
-  }, [syncValueFromDisplay, required, min, max, step])
+  }, [syncValueFromDisplay, required, min, max, step, catalog.validation])
 
   useEffect(() => {
     const root = containerRef.current
@@ -793,6 +790,7 @@ export function useTimepickerState(props: IPktTimepicker, ref: React.ForwardedRe
     outerClasses,
     inputSize,
     strings,
+    stringsOverride,
     label,
     disabled,
     required,