@oslokommune/punkt-react 17.1.2 → 18.0.0

package/src/components/checkbox/Checkbox.tsx

@@ -8,6 +8,8 @@ import {
   useEffect,
   useRef,
 } from 'react'
+import { usePktStrings } from '../../hooks/usePktStrings'
+import type { TPktStringsOverride } from 'shared-strings'
 
 export interface IPktCheckbox extends InputHTMLAttributes<HTMLInputElement> {
   id: string
@@ -24,9 +26,13 @@ export interface IPktCheckbox extends InputHTMLAttributes<HTMLInputElement> {
   hideLabel?: boolean
   labelPosition?: 'right' | 'left'
   optionalTag?: boolean
+  /** @deprecated Bruk `strings={{ forms: { optional: '…' } }}` eller `setPktStrings()`. */
   optionalText?: string
   requiredTag?: boolean
+  /** @deprecated Bruk `strings={{ forms: { required: '…' } }}` eller `setPktStrings()`. */
   requiredText?: string
+  /** Overstyrer tekster for denne komponenten. */
+  strings?: TPktStringsOverride
   tagText?: string | null
   onChange?: ChangeEventHandler<HTMLInputElement>
 }
@@ -48,14 +54,16 @@ export const PktCheckbox = forwardRef(
       checked,
       indeterminate,
       optionalTag,
-      optionalText = 'Valgfritt',
+      optionalText,
       requiredTag,
-      requiredText = 'Må fylles ut',
+      requiredText,
+      strings,
       tagText,
       ...props
     }: IPktCheckbox,
     ref: ForwardedRef<HTMLInputElement>,
   ): ReactElement => {
+    const s = usePktStrings(['forms'], strings)
     const internalRef = useRef<HTMLInputElement>(null)
 
     useEffect(() => {
@@ -97,8 +105,16 @@ export const PktCheckbox = forwardRef(
       return (
         <>
           {tagText && <span className={tagClasses + ` pkt-tag--gray`}>{tagText}</span>}
-          {optionalTag && <span className={tagClasses + ` pkt-tag--blue-light`}>{optionalText}</span>}
-          {requiredTag && <span className={tagClasses + ` pkt-tag--beige`}>{requiredText}</span>}
+          {optionalTag && (
+            <span className={tagClasses + ` pkt-tag--blue-light`}>
+              {optionalText ?? s.forms.optional}
+            </span>
+          )}
+          {requiredTag && (
+            <span className={tagClasses + ` pkt-tag--beige`}>
+              {requiredText ?? s.forms.required}
+            </span>
+          )}
         </>
       )
     }

package/src/components/combobox/Combobox.tsx

@@ -27,6 +27,7 @@ export const PktCombobox = forwardRef<HTMLDivElement, IPktCombobox>((props, ref)
   return (
     <div className={outerClasses} ref={state.wrapperRef} id={state.id || undefined}>
       <PktInputWrapper
+        strings={state.strings}
         forId={wrapperForId}
         hasFieldset={props.hasFieldset ?? !hasTextInput}
         label={state.label || ''}

package/src/components/combobox/Listbox.tsx

@@ -2,12 +2,14 @@
 
 import type { IComboboxState } from './types'
 import { PktIcon } from '../icon/Icon'
+import { usePktStrings } from '../../hooks/usePktStrings'
 
 interface IListboxProps {
   state: IComboboxState
 }
 
 export const Listbox = ({ state }: IListboxProps) => {
+  const s = usePktStrings(['listbox'], state.strings)
   const {
     listboxId,
     label,
@@ -59,9 +61,9 @@ export const Listbox = ({ state }: IListboxProps) => {
               <input
                 className="pkt-txt-16-light"
                 type="text"
-                aria-label="Søk i listen"
+                aria-label={s.listbox.searchLabel}
                 form=""
-                placeholder={searchPlaceholder || 'Søk...'}
+                placeholder={searchPlaceholder ?? s.listbox.searchPlaceholder}
                 onChange={handleSearchInput}
                 onKeyDown={handleSearchKeydown}
                 value={searchValue}

package/src/components/combobox/types.ts

@@ -1,5 +1,7 @@
 'use client'
 
+import type { TPktStringsOverride } from 'shared-strings'
+
 import type {
   ChangeEvent,
   ChangeEventHandler,
@@ -52,6 +54,8 @@ export interface IPktCombobox {
   useWrapper?: boolean
   inline?: boolean
   counter?: boolean
+  /** Overstyrer tekster for denne komponenten. */
+  strings?: TPktStringsOverride
   hasFieldset?: boolean
   inputSize?: 'small' | 'medium' | 'xsmall'
 
@@ -65,6 +69,8 @@ export interface IPktCombobox {
 }
 
 export interface IComboboxState {
+  /** Tekstoverstyring sendt inn på komponenten. */
+  strings?: TPktStringsOverride
   // Identity
   id: string
   inputId: string

package/src/components/combobox/useComboboxState.ts

@@ -27,9 +27,11 @@ import {
   getInputKeyAction,
   getInputValueAction,
   getSingleValueForInput,
+  type TComboboxMessageKey,
 } from 'shared-utils/combobox'
 
 import type { IPktCombobox, IComboboxState } from './types'
+import { usePktStrings } from '../../hooks/usePktStrings'
 
 // Options sync helper (React-specific: immutable, returns new array)
 function syncOptionsWithValues(options: IPktComboboxOption[], values: string[]): IPktComboboxOption[] {
@@ -80,6 +82,7 @@ export function useComboboxState(props: IPktCombobox, ref: React.ForwardedRef<HT
     onChange,
     onValueChange,
     children,
+    strings,
   } = props
 
   // Identity
@@ -177,13 +180,16 @@ export function useComboboxState(props: IPktCombobox, ref: React.ForwardedRef<HT
   const [isOpen, setIsOpen] = useState(false)
   const [searchValue, setSearchValue] = useState('')
   const [inputValue, setInputValue] = useState('')
-  const [userInfoMessage, setUserInfoMessage] = useState('')
+  const [userInfoMessageKey, setUserInfoMessage] = useState<TComboboxMessageKey>('')
   const [addValueText, setAddValueText] = useState<string | null>(null)
   const [inputFocus, setInputFocus] = useState(false)
   const [editingSingleValue, setEditingSingleValue] = useState(false)
   const [focusedTagIndex, setFocusedTagIndex] = useState<number>(-1)
   const suppressNextOpenRef = useRef(false)
 
+  const catalog = usePktStrings(['combobox'], strings)
+  const userInfoMessage = userInfoMessageKey ? catalog.combobox[userInfoMessageKey] : ''
+
   // Derived state
   const maxIsReached = isMaxSelectionReached(values.length, maxlength ?? null)
   // Telleren vises av seg selv når det er noe å telle, men kan slås av eksplisitt
@@ -250,7 +256,7 @@ export function useComboboxState(props: IPktCombobox, ref: React.ForwardedRef<HT
       if (!optValue) return
       if (values.includes(optValue)) return
       if (multiple && isMaxSelectionReached(values.length, maxlength ?? null)) {
-        setUserInfoMessage('Maks antall valg nådd')
+        setUserInfoMessage('maxSelected')
         return
       }
       const newValues = multiple ? [...values, optValue] : [optValue]
@@ -346,7 +352,7 @@ export function useComboboxState(props: IPktCombobox, ref: React.ForwardedRef<HT
 
       let shouldOptionsBeOpen = false
       let shouldResetInput = true
-      let newUserInfoMessage = ''
+      let newUserInfoMessage: TComboboxMessageKey = ''
       let newSearchValue = ''
       // Track the resulting single value for resetInput (avoids stale closure reads)
       let resultingSingleValue: string | undefined
@@ -356,7 +362,7 @@ export function useComboboxState(props: IPktCombobox, ref: React.ForwardedRef<HT
       // Not in list + allowUserInput
       if (!isInOption && allowUserInput && !isEmpty) {
         addNewUserValue(val)
-        newUserInfoMessage = 'Ny verdi lagt til'
+        newUserInfoMessage = 'valueAdded'
         shouldOptionsBeOpen = isMultiple
         if (isSingle) resultingSingleValue = val || ''
       }
@@ -367,7 +373,7 @@ export function useComboboxState(props: IPktCombobox, ref: React.ForwardedRef<HT
         }
         shouldResetInput = false
         shouldOptionsBeOpen = true
-        newUserInfoMessage = 'Ingen treff i søket'
+        newUserInfoMessage = 'noResults'
       }
       // Already selected — deselect
       else if (isSelected) {
@@ -399,14 +405,14 @@ export function useComboboxState(props: IPktCombobox, ref: React.ForwardedRef<HT
       }
       // Multi at max
       else if (isMultiple && isMaxItemsReached) {
-        newUserInfoMessage = 'Maks antall valg nådd'
+        newUserInfoMessage = 'maxSelected'
         shouldResetInput = false
         newSearchValue = val || ''
       }
       // Fallback
       else {
         if (isSingle) removeAllSelected()
-        newUserInfoMessage = 'Ingen gyldig verdi valgt'
+        newUserInfoMessage = 'noValidValue'
         shouldResetInput = false
         shouldOptionsBeOpen = true
         newSearchValue = val || ''
@@ -606,7 +612,7 @@ export function useComboboxState(props: IPktCombobox, ref: React.ForwardedRef<HT
           // Just reset the input and keep the "already selected" message.
           if (input && values.includes(input)) {
             resetInput(true)
-            setUserInfoMessage('Verdien er allerede valgt')
+            setUserInfoMessage('alreadySelected')
             break
           }
           toggleValue(input)
@@ -1077,6 +1083,7 @@ export function useComboboxState(props: IPktCombobox, ref: React.ForwardedRef<HT
     // UI state
     isOpen,
     userInfoMessage,
+    strings,
     addValueText,
     maxIsReached,
     editingSingleValue,

package/src/components/consent/strings.ts

@@ -1,125 +1 @@
-export const consentStrings = {
-  i18n: {
-    nb: {
-      contentPresentation: {
-        title: 'Oslo kommune bruker informasjonskapsler',
-        description: [
-          'For at nettstedet skal fungere og være trygt, bruker Oslo kommune informasjonskapsler. Noen er teknisk nødvendige, mens andre sikrer ulik funksjonalitet.',
-          'Godtar du alle informasjonskapsler, tillater du også at vi samler inn data om statistikk og brukeradferd. Da hjelper du oss med å lage et bedre nettsted uten at du trenger å dele noe personlig informasjon med oss.',
-        ],
-        buttons: {
-          accept: 'Godta alle',
-          reject: 'Kun nødvendige',
-          settings: 'Innstillinger for informasjonskapsler',
-        },
-      },
-      contentSettings: {
-        title: 'Innstillinger for informasjonskapsler',
-        description: [
-          'Her kan du velge hvilke typer informasjonskapsler du vil tillate. Tillatelsen gjelder i 90 dager. Husk at nødvendige informasjonskapsler ikke kan velges bort.',
-          'Du kan når som helst endre innstillingene og finne mer informasjon nederst på nettstedet under «Innstillinger for informasjonskapsler» og «Personvern og informasjonskapsler».',
-        ],
-        buttons: {
-          back: 'Tilbake',
-          save: 'Lagre innstillinger',
-        },
-      },
-    },
-    en: {
-      contentPresentation: {
-        title: 'Before you visit Oslo kommune ...',
-        description: [
-          'This website uses cookies to make improvements. In this context, we need your consent to measure the traffic on the website in relation to statistics and feedback.',
-          'To read more about what we use cookies for, go to our privacy declaration which you will find at the bottom of our websites.',
-        ],
-        buttons: {
-          accept: 'Yes, I accept',
-          reject: 'Only necessary',
-          settings: 'Go to settings',
-        },
-      },
-      contentSettings: {
-        title: 'Her kan du aktivt velge mellom ulike informasjonskapsler',
-        description: [
-          'For å lese mer om hva vi bruker informasjonskapsler til gå til vår personvernserklering som du finner på våre nettsider',
-        ],
-        buttons: {
-          back: 'Back',
-          save: 'Save settings',
-        },
-      },
-    },
-  },
-  cookies: [
-    {
-      name: 'statistics',
-      defaultValue: null,
-      i18n: {
-        nb: {
-          title: 'Statistikk og analyse',
-          description:
-            'Jeg godtar at Oslo kommune bruker informasjonskapsler til å innhente data om statistikk og brukeradferd.',
-          buttons: {
-            yes: 'Ja',
-            no: 'Nei',
-          },
-        },
-        en: {
-          title: 'Statistics and analytics',
-          description: 'Select your preference for statistics and analytics',
-          buttons: {
-            yes: 'Yes',
-            no: 'No',
-          },
-        },
-      },
-    },
-    {
-      name: 'survey',
-      defaultValue: null,
-      i18n: {
-        nb: {
-          title: 'Skriftlige tilbakemeldinger',
-          description:
-            'Jeg godtar at Oslo kommune bruker informasjonskapsler til å vise responsfelt og registrere tilbakemeldinger.',
-          buttons: {
-            yes: 'Ja',
-            no: 'Nei',
-          },
-        },
-        en: {
-          title: 'Survey',
-          description: 'Select your preference for survey',
-          buttons: {
-            yes: 'Yes',
-            no: 'No',
-          },
-        },
-      },
-    },
-    {
-      name: 'functional',
-      defaultValue: true,
-      i18n: {
-        nb: {
-          title: 'Funksjonelle informasjonskapsler',
-          description:
-            'Jeg godtar at Oslo kommune bruker informasjonskapsler for å gjøre ulike funksjoner på nettstedet mulige (for eksempel skjemaer og barnehagevelger).',
-          buttons: {
-            yes: 'Ja',
-            no: 'Nei',
-          },
-        },
-        en: {
-          title: 'Functional cookies',
-          description:
-            'For the website to function optimally, we recommend that you accept these cookies',
-          buttons: {
-            yes: 'Yes',
-            no: 'No',
-          },
-        },
-      },
-    },
-  ],
-}
+export { consentStrings } from 'shared-strings/consent'

package/src/components/datepicker/DateTags.tsx

@@ -1,14 +1,15 @@
 'use client'
 
 import { sortDateStrings, fromISOtoLocal } from 'shared-utils/date-utils'
-import type { IDatepickerStrings } from 'shared-types/datepicker'
 import { PktTag } from '../tag/Tag'
+import { usePktStrings } from '../../hooks/usePktStrings'
+import type { TPktStringsOverride } from 'shared-strings'
 
 interface DateTagsProps {
   dates: string[]
   dateformat: string
   idBase: string
-  strings?: IDatepickerStrings
+  strings?: TPktStringsOverride
   onDateRemoved: (date: string) => void
 }
 
@@ -20,7 +21,7 @@ export const DateTags = ({
   onDateRemoved,
 }: DateTagsProps) => {
   const sorted = sortDateStrings(dates)
-  const deleteLabel = strings?.calendar?.buttonAltText ?? 'Slett dato'
+  const deleteLabel = usePktStrings(['datepicker'], strings).datepicker.deleteDate
 
   return (
     <div className="pkt-date-tags pkt-datepicker__tags" aria-live="polite">

package/src/components/datepicker/Datepicker.accessibility.test.tsx

@@ -256,7 +256,7 @@ describe('PktDatepicker', () => {
     test('uses custom strings for calendar button', () => {
       const { container } = createDatepickerTest({
         strings: {
-          calendar: { buttonAltText: 'Open calendar' },
+          datepicker: { openPicker: 'Open calendar' },
         },
       })
 
@@ -270,7 +270,7 @@ describe('PktDatepicker', () => {
         showRangeLabels: true,
         strings: {
           generic: { from: 'From', to: 'To' },
-          calendar: { buttonAltText: 'Open calendar' },
+          datepicker: { openPicker: 'Open calendar' },
         },
       })
 

package/src/components/datepicker/Datepicker.tsx

@@ -24,6 +24,7 @@ export const PktDatepicker = forwardRef<HTMLDivElement, IPktDatepicker>((props,
   return (
     <div className={outerClasses} id={state.id || undefined}>
       <PktInputWrapper
+        strings={state.stringsOverride}
         ref={state.wrapperRef}
         ariaDescribedby={props.ariaDescribedby}
         forId={state.inputId}

package/src/components/datepicker/DatepickerInputs.tsx

@@ -64,10 +64,10 @@ export const DatepickerInputs = ({ state }: { state: IDatepickerState }) => {
       type="button"
       onClick={toggleCalendar}
       disabled={disabled}
-      aria-label={strings.calendar?.buttonAltText ?? 'Åpne kalender'}
+      aria-label={strings.datepicker.openPicker}
     >
       <PktIcon name="calendar" />
-      <span className="pkt-btn__text">{strings.calendar?.buttonAltText ?? 'Åpne kalender'}</span>
+      <span className="pkt-btn__text">{strings.datepicker.openPicker}</span>
     </button>
   )
 
@@ -113,7 +113,7 @@ export const DatepickerInputs = ({ state }: { state: IDatepickerState }) => {
     return (
       <div className={datepickerInputsClasses}>
         <div className="pkt-input__container">
-          {showRangeLabels && <div className="pkt-input-prefix">{strings.generic?.from ?? 'Fra'}</div>}
+          {showRangeLabels && <div className="pkt-input-prefix">{strings.generic.from}</div>}
           <input
             {...restProps}
             ref={inputRef}
@@ -128,7 +128,7 @@ export const DatepickerInputs = ({ state }: { state: IDatepickerState }) => {
             readOnly={readOnly || (isIOSDevice && !readOnly)}
             disabled={disabled}
             required={required}
-            aria-label={`${label} ${strings.generic?.from ?? 'Fra'}`}
+            aria-label={`${label} ${strings.generic.from}`}
             aria-describedby={helptext ? `${id}-helptext` : undefined}
             aria-invalid={hasError}
             aria-errormessage={hasError ? `${id}-error` : undefined}
@@ -140,7 +140,7 @@ export const DatepickerInputs = ({ state }: { state: IDatepickerState }) => {
             onChange={handleRangeFromChange}
           />
           <div className={rangeLabelClasses} id={`${id}-to-label`}>
-            {strings.generic?.to ?? 'Til'}
+            {strings.generic.to}
           </div>
           {!showRangeLabels && <div className="pkt-input-separator">–</div>}
           <input
@@ -154,7 +154,7 @@ export const DatepickerInputs = ({ state }: { state: IDatepickerState }) => {
             max={maxStr}
             readOnly={readOnly || (isIOSDevice && !readOnly)}
             disabled={disabled}
-            aria-label={`${label} ${strings.generic?.to ?? 'Til'}`}
+            aria-label={`${label} ${strings.generic.to}`}
             aria-invalid={hasError}
             onClick={handleInputClick}
             onTouchEnd={handleInputTouchEnd}

package/src/components/datepicker/types.ts

@@ -1,5 +1,5 @@
+import type { TPktStrings, TPktStringsOverride } from 'shared-strings'
 import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react'
-import type { IDatepickerStrings } from 'shared-types/datepicker'
 import type { TPktInputSize } from 'shared-types/size'
 
 export interface IPktDatepicker extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
@@ -42,7 +42,8 @@ export interface IPktDatepicker extends Omit<InputHTMLAttributes<HTMLInputElemen
   useWrapper?: boolean
 
   // Localization
-  strings?: IDatepickerStrings
+  /** Overstyrer tekster for denne komponenten. */
+  strings?: TPktStringsOverride
 
   // Events
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void
@@ -103,7 +104,9 @@ export interface IDatepickerState {
   // Derived state
   inputType: string
   isIOSDevice: boolean
-  strings: IDatepickerStrings
+  strings: Pick<TPktStrings, 'generic' | 'datepicker' | 'validation'>
+  /** Rå tekstoverstyring, til videresending til underkomponenter. */
+  stringsOverride?: TPktStringsOverride
   inputClasses: string
   buttonClasses: string
   rangeLabelClasses: string

package/src/components/datepicker/useDatepickerState.ts

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
-import { defaultSingleStrings, defaultRangeStrings } from 'shared-types/datepicker'
 import type { TPktInputSize } from 'shared-types/size'
 import { valueToArray } from 'shared-utils/value-utils'
 import { isIOS } from 'shared-utils/device-utils'
@@ -15,6 +14,7 @@ import {
 } from 'shared-utils/datepicker-utils'
 
 import type { IPktDatepicker, IDatepickerState } from './types'
+import { usePktStrings } from '../../hooks/usePktStrings'
 
 export function useDatepickerState(props: IPktDatepicker, ref: React.ForwardedRef<HTMLDivElement>): IDatepickerState {
   const {
@@ -104,10 +104,8 @@ export function useDatepickerState(props: IPktDatepicker, ref: React.ForwardedRe
   //  Derived state
   const inputType = useMemo(() => getDatepickerInputType(), [])
   const isIOSDevice = useMemo(() => isIOS(), [])
-  const strings = useMemo(
-    () => stringsProp ?? (range ? defaultRangeStrings : defaultSingleStrings),
-    [stringsProp, range],
-  )
+  const strings = usePktStrings(['generic', 'datepicker', 'validation'], stringsProp)
+  const stringsOverride = stringsProp
 
   const minStr = typeof min === 'string' ? min : min !== undefined ? String(min) : undefined
   const maxStr = typeof max === 'string' ? max : max !== undefined ? String(max) : undefined
@@ -507,6 +505,7 @@ export function useDatepickerState(props: IPktDatepicker, ref: React.ForwardedRe
     inputType,
     isIOSDevice,
     strings,
+    stringsOverride,
     inputClasses,
     buttonClasses,
     rangeLabelClasses,

package/src/components/fileupload/DropZone.tsx

@@ -12,10 +12,11 @@ import {
   useState,
 } from 'react'
 
-import { defaultFileUploadStrings } from 'shared-types'
 
 import { PktIcon } from '../icon/Icon'
 import { FileItem, TFileItemList, TUploadStrategy } from './types'
+import { usePktStrings } from '../../hooks/usePktStrings'
+import type { TPktStringsOverride } from 'shared-strings'
 
 /**
  * Props for the internal `DropZone` building block.
@@ -27,6 +28,8 @@ import { FileItem, TFileItemList, TUploadStrategy } from './types'
  */
 interface IDropZoneProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked' | 'size' | 'type' | 'value' | 'onChange' | 'width'> {
+  /** Overstyrer tekster for denne komponenten. */
+  strings?: TPktStringsOverride
   /** Called with `FileItem`s created from dropped/selected files. */
   onFilesAdded?: (files: TFileItemList) => void
   /** Used for the native input `id` and related label/ARIA wiring. */
@@ -63,6 +66,7 @@ export const DropZone = forwardRef<HTMLInputElement, IDropZoneProps>(
       isThumbnailView = false,
       disabled = false,
       hasVisibleLabel = false,
+      strings,
       ...inputProps
     }: IDropZoneProps,
     forwardedRef,
@@ -86,33 +90,34 @@ export const DropZone = forwardRef<HTMLInputElement, IDropZoneProps>(
     useImperativeHandle(forwardedRef, () => fileInputRef.current! as HTMLInputElement)
 
     const [isDragActive, setIsDragActive] = useState(false)
+    const s = usePktStrings(['fileupload'], strings)
 
     const uiTexts = useMemo(() => {
       if (isThumbnailView) {
         return multiple
           ? {
-              dragInactive: defaultFileUploadStrings.dropZoneDragMultipleThumbnail,
-              dragActive: defaultFileUploadStrings.dropZoneDragActiveMultipleThumbnail,
-              openFileDialog: defaultFileUploadStrings.dropZoneOpenFileDialogMultipleThumbnail,
+              dragInactive: s.fileupload.dropZoneDragMultipleThumbnail,
+              dragActive: s.fileupload.dropZoneDragActiveMultipleThumbnail,
+              openFileDialog: s.fileupload.dropZoneOpenFileDialogMultipleThumbnail,
             }
           : {
-              dragInactive: defaultFileUploadStrings.dropZoneDragSingleThumbnail,
-              dragActive: defaultFileUploadStrings.dropZoneDragActiveSingleThumbnail,
-              openFileDialog: defaultFileUploadStrings.dropZoneOpenFileDialogSingleThumbnail,
+              dragInactive: s.fileupload.dropZoneDragSingleThumbnail,
+              dragActive: s.fileupload.dropZoneDragActiveSingleThumbnail,
+              openFileDialog: s.fileupload.dropZoneOpenFileDialogSingleThumbnail,
             }
       }
       return multiple
         ? {
-            dragInactive: defaultFileUploadStrings.dropZoneDragMultiple,
-            dragActive: defaultFileUploadStrings.dropZoneDragActiveMultiple,
-            openFileDialog: defaultFileUploadStrings.dropZoneOpenFileDialogMultiple,
+            dragInactive: s.fileupload.dropZoneDragMultiple,
+            dragActive: s.fileupload.dropZoneDragActiveMultiple,
+            openFileDialog: s.fileupload.dropZoneOpenFileDialogMultiple,
           }
         : {
-            dragInactive: defaultFileUploadStrings.dropZoneDragSingle,
-            dragActive: defaultFileUploadStrings.dropZoneDragActiveSingle,
-            openFileDialog: defaultFileUploadStrings.dropZoneOpenFileDialogSingle,
+            dragInactive: s.fileupload.dropZoneDragSingle,
+            dragActive: s.fileupload.dropZoneDragActiveSingle,
+            openFileDialog: s.fileupload.dropZoneOpenFileDialogSingle,
           }
-    }, [multiple, isThumbnailView])
+    }, [multiple, isThumbnailView, s])
 
     const populateNativeFileInput = useCallback(
       (fileItemList: TFileItemList) => {
@@ -240,7 +245,7 @@ export const DropZone = forwardRef<HTMLInputElement, IDropZoneProps>(
           </p>
           {acceptedFormatsReadableString ? (
             <p className={'pkt-fileupload__drop-zone__placeholder__formats'}>
-              {defaultFileUploadStrings.supportedFormatsPrefix} {acceptedFormatsReadableString}
+              {s.fileupload.supportedFormatsPrefix} {acceptedFormatsReadableString}
             </p>
           ) : null}
         </div>

package/src/components/fileupload/FileUpload.test.tsx

@@ -152,6 +152,43 @@ describe('PktFileUpload', () => {
       expectVisibleFilename('file2.docx')
       expectVisibleFilename('file3.png')
     })
+
+    it('should use drop zone text from the strings prop', () => {
+      render(
+        <PktFileUpload
+          multiple
+          name="pktFileUpload"
+          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()
+      expect(screen.queryByText('velg filer')).not.toBeInTheDocument()
+    })
+
+    it('should use overridden drag-active drop zone text', () => {
+      const { container } = render(
+        <PktFileUpload
+          multiple
+          name="pktFileUpload"
+          strings={{
+            fileupload: {
+              dropZoneDragActiveMultiple: 'Slipp dokumentene her',
+            },
+          }}
+        />,
+      )
+
+      fireEvent.dragOver(container.querySelector('.pkt-fileupload__drop-zone') as HTMLElement)
+
+      expect(screen.getByText(/Slipp dokumentene her/)).toBeInTheDocument()
+    })
   })
 
   describe('File selection via dialog', () => {