@oslokommune/punkt-react 17.1.3 → 18.0.0

package/src/components/fileupload/FileUpload.tsx

@@ -27,7 +27,6 @@ import {
   useState,
 } from 'react'
 
-import { defaultFileUploadStrings } from 'shared-types'
 import {
   countFileTransferStates,
   resolveAcceptAttribute,
@@ -54,6 +53,8 @@ import {
   TQueueItemOperation,
   TUploadStrategy,
 } from './types'
+import { usePktStrings } from '../../hooks/usePktStrings'
+import { formatString, plural, type TPktStringsOverride } from 'shared-strings'
 
 // Re-export for external use
 export { formatFileSize, parseFileSize } from 'shared-utils/fileupload'
@@ -135,6 +136,8 @@ interface IBaseFileUploadProps extends Omit<
   tagText?: string | null
   /** Marks the upload as required. Native validation is used in `form`; submit validation in `custom`. */
   required?: boolean
+  /** Overstyrer tekster for denne komponenten. */
+  strings?: TPktStringsOverride
   /** Enable image preview modal (only applies to thumbnail renderer). */
   enableImagePreview?: boolean
 }
@@ -193,6 +196,7 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
       enableImagePreview = false,
       ['aria-describedby']: ariaDescribedByProp,
       ['aria-invalid']: ariaInvalidProp,
+      strings,
       ...props
     }: IPktFileUpload,
     forwardedRef,
@@ -203,6 +207,7 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
     useImperativeHandle(forwardedRef, () => fileInputRef.current as HTMLInputElement, [])
 
     const transfers = 'transfers' in props ? props.transfers : undefined
+    const fileuploadStrings = usePktStrings(['fileupload'], strings).fileupload
     const [validationError, setValidationError] = useState<string | null>(null)
     const [addedAnnouncement, setAddedAnnouncement] = useState('')
 
@@ -262,7 +267,10 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
       uploadStrategy,
       required,
       currentFileCount: value.length,
-      onMissingFiles: useCallback(() => setValidationError(defaultFileUploadStrings.requiredMissing), []),
+      onMissingFiles: useCallback(
+        () => setValidationError(fileuploadStrings.requiredMissing),
+        [fileuploadStrings],
+      ),
     })
 
     const itemRenderer = typeof itemRendererProp === 'string' ? ItemRenderers[itemRendererProp] : itemRendererProp
@@ -293,8 +301,10 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
         const acceptedItems: TFileItemList = multiple ? addedFileItems : [addedFileItems[0]]
         setAddedAnnouncement(
           acceptedItems.length === 1
-            ? defaultFileUploadStrings.srFileAdded(acceptedItems[0].attributes.targetFilename)
-            : defaultFileUploadStrings.srFilesAdded(acceptedItems.length),
+            ? formatString(fileuploadStrings.srFileAdded, {
+                filename: acceptedItems[0].attributes.targetFilename,
+              })
+            : formatString(fileuploadStrings.srFilesAdded, { count: acceptedItems.length }),
         )
 
         if (!isControlled) setInternalValue(newValue)
@@ -306,7 +316,16 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
           })
         }
       },
-      [onFilesChanged, value, multiple, uploadStrategy, onFileUploadRequested, validateFile, isControlled],
+      [
+        onFilesChanged,
+        value,
+        multiple,
+        uploadStrategy,
+        onFileUploadRequested,
+        validateFile,
+        isControlled,
+        fileuploadStrings,
+      ],
     )
 
     const onFileUpdated = useCallback(
@@ -346,7 +365,11 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
       [value, transfers],
     )
 
-    const totalLabel = defaultFileUploadStrings.fileLabel(totalCount)
+    const totalLabel = plural(
+      totalCount,
+      fileuploadStrings.fileLabelOne,
+      fileuploadStrings.fileLabelOther,
+    )
 
     const fileUploadContent = (
       <div
@@ -362,13 +385,21 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
           <div className="pkt-sr-only" aria-live="polite" aria-atomic="true">
             {addedAnnouncement ||
               (totalCount > 0 && uploadedCount > 0
-                ? defaultFileUploadStrings.srFilesUploadedOfTotal(uploadedCount, totalCount, totalLabel)
+                ? formatString(fileuploadStrings.srFilesUploadedOfTotal, {
+                    uploaded: uploadedCount,
+                    total: totalCount,
+                    label: totalLabel,
+                  })
                 : '')}
           </div>
           <div className="pkt-sr-only" aria-live="assertive" aria-atomic="true">
             {totalCount > 0 &&
               failedCount > 0 &&
-              defaultFileUploadStrings.srFilesFailedOfTotal(failedCount, totalCount, totalLabel)}
+              formatString(fileuploadStrings.srFilesFailedOfTotal, {
+                failed: failedCount,
+                total: totalCount,
+                label: totalLabel,
+              })}
           </div>
 
           <DropZone
@@ -387,6 +418,7 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
             aria-invalid={isAriaInvalid ? 'true' : undefined}
             aria-describedby={describedBy}
             hasVisibleLabel={!!label}
+            strings={strings}
           />
           {hasError && errorMessage && (
             <PktAlert
@@ -423,6 +455,7 @@ export const PktFileUpload: FC<IPktFileUpload> = forwardRef<HTMLInputElement, IP
       return (
         <div className="pkt-fileupload-component">
           <PktInputWrapper
+            strings={strings}
             forId={id}
             label={label}
             helptext={helptext}

package/src/components/header/HeaderGlobal.tsx

@@ -14,6 +14,7 @@ import { PktHeaderUserMenu } from '../headerUserMenu/UserMenu'
 import { PktIcon } from '../icon/Icon'
 import { PktSearchInput } from '../searchinput/SearchInput'
 import { IPktHeaderGlobal } from './types'
+import { usePktStrings } from '../../hooks/usePktStrings'
 
 const defaultLogoPath = 'https://punkt-cdn.oslo.kommune.no/latest/logos/'
 
@@ -56,6 +57,7 @@ export const PktHeaderGlobal = forwardRef(
       tabletBreakpoint = 1024,
       onDataLoaded,
       onDataError,
+      strings,
     }: IPktHeaderGlobal,
     ref: ForwardedRef<HTMLElement>,
   ) => {
@@ -251,10 +253,11 @@ export const PktHeaderGlobal = forwardRef(
 
     const showLogoutInUserMenu = logOutButtonPlacement === 'userMenu' || logOutButtonPlacement === 'both'
 
+    const headerStrings = usePktStrings(['header'], strings).header
     const search = localeData?.search
     const contact = localeData?.header?.contact
-    const menuText = localeData?.i18n?.menu || 'Meny'
-    const searchText = localeData?.i18n?.search || 'Søk'
+    const menuText = localeData?.i18n?.menu || headerStrings.menu
+    const searchText = localeData?.i18n?.search || headerStrings.search
     const isMenuOpen = openMenu === 'menu'
     const isUserOpen = openMenu === 'user'
     const isSearchOpen = openMenu === 'search'

package/src/components/header/HeaderService.tsx

@@ -26,6 +26,7 @@ import { PktTextinput } from '../textinput/Textinput'
 import { DEFAULT_HEADER_LOGO_LINK } from 'shared-types'
 
 import { IPktHeader, Representing, THeaderMenu, User, UserMenuFooterItem, UserMenuItem } from './types'
+import { usePktStrings } from '../../hooks/usePktStrings'
 
 export type { Representing, THeaderMenu, User, UserMenuFooterItem, UserMenuItem }
 export type IPktHeaderService = IPktHeader
@@ -58,7 +59,7 @@ export const PktHeaderService = forwardRef(
       onSearch,
       onSearchChange,
       searchValue,
-      searchPlaceholder = 'Søk',
+      searchPlaceholder,
       representing,
       serviceLink,
       serviceClick,
@@ -77,6 +78,7 @@ export const PktHeaderService = forwardRef(
       scrollBehavior = 'hide',
       slotMenuVariant = 'icon-only',
       slotMenuText = 'Meny',
+      strings,
     }: IPktHeaderService,
     ref: ForwardedRef<HTMLDivElement>,
   ) => {
@@ -92,6 +94,9 @@ export const PktHeaderService = forwardRef(
       }
     }, [userMenuFooter])
 
+    const headerStrings = usePktStrings(['header'], strings).header
+    const resolvedSearchPlaceholder = searchPlaceholder ?? headerStrings.search
+
     // Warning for userOptions - no longer available
     useEffect(() => {
       if (userOptions) {
@@ -341,7 +346,7 @@ export const PktHeaderService = forwardRef(
                   onClick={() => handleMenuToggle('slot')}
                   aria-expanded={openMenu === 'slot'}
                   aria-controls="mobile-slot-menu"
-                  aria-label="Åpne meny"
+                  aria-label={headerStrings.openMenu}
                 >
                   {slotMenuText}
                 </PktButton>
@@ -375,7 +380,7 @@ export const PktHeaderService = forwardRef(
                       state={openMenu === 'search' ? 'active' : 'normal'}
                       aria-expanded={openMenu === 'search'}
                       aria-controls="mobile-search-menu"
-                      aria-label="Åpne søkefelt"
+                      aria-label={headerStrings.openSearch}
                     >
                       Søk
                     </PktButton>
@@ -392,9 +397,9 @@ export const PktHeaderService = forwardRef(
                           id="mobile-search-menu"
                           className="pkt-header-service__search-input"
                           type="search"
-                          label="Søk"
+                          label={headerStrings.search}
                           useWrapper={false}
-                          placeholder={searchPlaceholder}
+                          placeholder={resolvedSearchPlaceholder}
                           value={searchValue}
                           autoFocus
                           fullwidth={true}
@@ -413,9 +418,9 @@ export const PktHeaderService = forwardRef(
                     id="header-service-search"
                     className="pkt-header-service__search-input"
                     type="search"
-                    label="Søk"
+                    label={headerStrings.search}
                     useWrapper={false}
-                    placeholder={searchPlaceholder}
+                    placeholder={resolvedSearchPlaceholder}
                     value={searchValue}
                     onChange={(e: ChangeEvent<HTMLInputElement>) => onSearchChange?.(e.target.value)}
                     onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {

package/src/components/header/types.ts

@@ -9,6 +9,7 @@ import type {
   THeaderMenuLocale,
   IPktHeaderGlobal as ISharedPktHeaderGlobal,
 } from 'shared-types'
+import type { TPktStringsOverride } from 'shared-strings'
 
 export type {
   THeaderMenu,
@@ -53,6 +54,9 @@ export interface UserMenuFooterItem {
 }
 
 export interface IPktHeader {
+  /** Overstyrer tekster for denne komponenten. */
+  strings?: TPktStringsOverride
+
   children?: ReactNode
   /** Additional CSS class name(s) to apply to the header */
   className?: string
@@ -127,6 +131,8 @@ export interface IPktHeader {
  * (in shared-types) with React-specific callbacks and DOM props.
  */
 export interface IPktHeaderGlobal extends ISharedPktHeaderGlobal {
+  /** Overstyrer tekster for denne komponenten. */
+  strings?: TPktStringsOverride
   /** Additional CSS class name(s) to apply to the header */
   className?: string
   /** Set dark mode on the header */

package/src/components/index.ts

@@ -52,3 +52,13 @@ export { PktTextinput } from './textinput/Textinput'
 export { PktTimepicker } from './timepicker/Timepicker'
 export * from './interfaces'
 export * from './types'
+export { PktStringsProvider } from './strings/PktStringsProvider'
+export type { IPktStringsProvider } from './strings/PktStringsProvider'
+export {
+  getPktStrings,
+  nb as pktStringsNb,
+  resetPktStrings,
+  setPktStrings,
+  subscribePktStrings,
+} from 'shared-strings'
+export type { TPktStrings, TPktStringsNamespace, TPktStringsOverride } from 'shared-strings'

package/src/components/inputwrapper/InputWrapper.tsx

@@ -3,6 +3,8 @@
 import { ForwardedRef, forwardRef, type ReactNode, RefAttributes } from 'react'
 
 import { useFocusModality } from '../../hooks/useFocusModality'
+import { usePktStrings } from '../../hooks/usePktStrings'
+import { formatString, type TPktStringsOverride } from 'shared-strings'
 import { counterStatusId, isCounterExceeded } from 'shared-utils/forms/described-by'
 import { PktAlert } from '../alert/Alert'
 import { PktHelptext } from '../helptext/Helptext'
@@ -12,13 +14,16 @@ export interface IPktInputWrapper extends RefAttributes<HTMLElement> {
   label: string
   helptext?: string | ReactNode
   helptextDropdown?: string | ReactNode
+  /** @deprecated Bruk `strings={{ forms: { readMore: '…' } }}` eller `setPktStrings()`. */
   helptextDropdownButton?: string
   counter?: boolean
   counterCurrent?: number
   counterMaxLength?: number
   optionalTag?: boolean
+  /** @deprecated Bruk `strings={{ forms: { optional: '…' } }}` eller `setPktStrings()`. */
   optionalText?: string
   requiredTag?: boolean
+  /** @deprecated Bruk `strings={{ forms: { required: '…' } }}` eller `setPktStrings()`. */
   requiredText?: string
   tagText?: string | null
   hasError?: boolean
@@ -33,6 +38,8 @@ export interface IPktInputWrapper extends RefAttributes<HTMLElement> {
   role?: string
   counterPosition?: 'top' | 'bottom'
   size?: 'small' | 'medium' | 'xsmall'
+  /** Overstyrer tekster for denne komponenten. */
+  strings?: TPktStringsOverride
 }
 
 export const PktInputWrapper = forwardRef(
@@ -47,9 +54,9 @@ export const PktInputWrapper = forwardRef(
       counterCurrent = 0,
       counterMaxLength,
       optionalTag = false,
-      optionalText = 'Valgfritt',
+      optionalText,
       requiredTag = false,
-      requiredText = 'Må fylles ut',
+      requiredText,
       tagText = null,
       hasError = false,
       errorMessage,
@@ -63,10 +70,12 @@ export const PktInputWrapper = forwardRef(
       role,
       counterPosition = 'bottom',
       size = 'medium',
+      strings,
     }: IPktInputWrapper,
     ref: ForwardedRef<HTMLDivElement>,
   ) => {
     const focusModality = useFocusModality<HTMLDivElement>(ref)
+    const s = usePktStrings(['forms', 'validation'], strings)
 
     const describedBy = ariaDescribedby || (helptext ? `${forId}-helptext` : undefined)
     const showCounter = !!counter
@@ -95,7 +104,12 @@ export const PktInputWrapper = forwardRef(
             {counterMaxLength ? `/${counterMaxLength}` : ''}
           </div>
           <div className="pkt-sr-only" id={counterStatusId(forId)} aria-live="polite">
-            {counterExceeded ? `Du har brukt ${counterCurrent} av ${counterMaxLength} tegn` : ''}
+            {counterExceeded
+              ? formatString(s.validation.counterExceeded, {
+                  current: counterCurrent,
+                  max: counterMaxLength ?? 0,
+                })
+              : ''}
           </div>
         </>
       ) : null
@@ -104,8 +118,16 @@ export const PktInputWrapper = 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>
+          )}
         </>
       )
     }
@@ -148,7 +170,7 @@ export const PktInputWrapper = forwardRef(
           forId={forId}
           helptext={visibleHelptext}
           helptextDropdown={helptextDropdown}
-          helptextDropdownButton={helptextDropdownButton}
+          helptextDropdownButton={helptextDropdownButton ?? s.forms.readMore}
         />
       )
     }

package/src/components/radio/RadioButton.tsx

@@ -6,6 +6,8 @@ import {
   ReactElement,
   ReactNode,
 } from 'react'
+import { usePktStrings } from '../../hooks/usePktStrings'
+import type { TPktStringsOverride } from 'shared-strings'
 
 export interface IPktRadioButton extends InputHTMLAttributes<HTMLInputElement> {
   id: string
@@ -19,9 +21,13 @@ export interface IPktRadioButton extends InputHTMLAttributes<HTMLInputElement> {
   hasError?: boolean
   value?: string
   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>
 }
@@ -43,11 +49,13 @@ export const PktRadioButton = forwardRef(
       optionalText,
       requiredTag,
       requiredText,
+      strings,
       tagText,
       ...props
     }: IPktRadioButton,
     ref: ForwardedRef<HTMLInputElement>,
   ): ReactElement => {
+    const s = usePktStrings(['forms'], strings)
     const classes = [className, 'pkt-input-check'].filter(Boolean).join(' ')
 
     const inputTileClasses = [
@@ -75,8 +83,16 @@ export const PktRadioButton = 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/searchinput/SearchInput.tsx

@@ -6,6 +6,8 @@ import type { IPktSearchInputSuggestion } from 'shared-types/searchinput'
 
 import { useFocusModality } from '../../hooks/useFocusModality'
 import { PktButton } from '../button/Button'
+import { usePktStrings } from '../../hooks/usePktStrings'
+import type { TPktStringsOverride } from 'shared-strings'
 
 /**
  * React suggestion item: portable fields from {@link IPktSearchInputSuggestion}
@@ -18,6 +20,9 @@ export type PktSearchInputSuggestion = Omit<IPktSearchInputSuggestion, 'title' |
 }
 
 interface ISearch extends HTMLProps<HTMLInputElement> {
+  /** Overstyrer tekster for denne komponenten. */
+  strings?: TPktStringsOverride
+
   appearance?: 'local' | 'local-with-button' | 'global'
   inputSize?: 'small' | 'medium' | 'xsmall'
   disabled?: boolean
@@ -25,6 +30,7 @@ interface ISearch extends HTMLProps<HTMLInputElement> {
   id: string
   label?: string
   name?: string
+  /** @deprecated Bruk `strings={{ searchinput: { placeholder: '…' } }}` eller `setPktStrings()`. */
   placeholder?: string
   suggestions?: PktSearchInputSuggestion[]
   value?: string | undefined
@@ -54,7 +60,7 @@ export const PktSearchInput = forwardRef<HTMLInputElement, ISearchInput | ISearc
       id,
       label,
       name,
-      placeholder = 'Søk…',
+      placeholder,
       suggestions,
       value = '',
       action,
@@ -62,10 +68,14 @@ export const PktSearchInput = forwardRef<HTMLInputElement, ISearchInput | ISearc
       onChange,
       onSearch,
       onSuggestionClick,
+      strings,
       ...props
     },
     ref,
   ) => {
+    const s = usePktStrings(['searchinput'], strings)
+    const resolvedPlaceholder = placeholder ?? s.searchinput.placeholder
+
     const handleSuggestionActivate = (cb: (() => void) | undefined, index: number) => {
       if (cb) {
         cb()
@@ -130,7 +140,7 @@ export const PktSearchInput = forwardRef<HTMLInputElement, ISearchInput | ISearc
             type="search"
             name={name || id}
             id={id}
-            placeholder={placeholder}
+            placeholder={resolvedPlaceholder}
             defaultValue={value}
             disabled={disabled}
             autoComplete="off"
@@ -167,7 +177,7 @@ export const PktSearchInput = forwardRef<HTMLInputElement, ISearchInput | ISearc
               })
             }
           >
-            {label || placeholder}
+            {label || resolvedPlaceholder}
           </PktButton>
         </div>
 

package/src/components/select/Select.tsx

@@ -4,10 +4,13 @@ import { ForwardedRef, forwardRef, ReactNode, SelectHTMLAttributes } from 'react
 
 import { PktInputWrapper } from '../inputwrapper/InputWrapper'
 import { describedByIds } from 'shared-utils/forms/described-by'
+import type { TPktStringsOverride } from 'shared-strings'
 
 export type { IPktSelectOption, TSelectOption } from 'shared-types/select'
 
 export interface IPktSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  /** Overstyrer tekster for denne komponenten. */
+  strings?: TPktStringsOverride
   ariaDescribedby?: string
   ariaLabelledby?: string
   children?: ReactNode | ReactNode[]
@@ -60,6 +63,7 @@ export const PktSelect = forwardRef(
       useWrapper = true,
       hasFieldset,
       inputSize = 'medium',
+      strings,
       ...props
     }: IPktSelectProps,
     ref: ForwardedRef<HTMLSelectElement>,
@@ -69,6 +73,7 @@ export const PktSelect = forwardRef(
     return (
       <div className={outerClasses}>
         <PktInputWrapper
+          strings={strings}
           forId={`${id}-input`}
           label={label}
           helptext={helptext}

package/src/components/strings/PktStringsProvider.tsx

@@ -0,0 +1,38 @@
+import { createContext, useContext, useMemo, type ReactNode } from 'react'
+import type { TPktStringsOverride } from 'shared-strings'
+
+export const PktStringsContext = createContext<TPktStringsOverride | undefined>(undefined)
+
+export interface IPktStringsProvider {
+  /** Tekstene som skal gjelde for dette undertreet. */
+  strings: TPktStringsOverride
+  children?: ReactNode
+}
+
+/**
+ * Overstyrer Punkt-tekster for et undertre.
+ *
+ * Providere kan nestes — en indre provider merges oppå den ytre, og en `strings`-prop
+ * på en enkelt komponent vinner uansett over begge.
+ *
+ * ```tsx
+ * <PktStringsProvider strings={{ forms: { optional: 'Kan stå tomt' } }}>
+ *   <PktTextinput id="navn" name="navn" label="Navn" />
+ * </PktStringsProvider>
+ * ```
+ */
+export const PktStringsProvider = ({ strings, children }: IPktStringsProvider) => {
+  const parent = useContext(PktStringsContext)
+
+  const value = useMemo(() => {
+    if (!parent) return strings
+
+    const merged: TPktStringsOverride = { ...parent }
+    for (const key of Object.keys(strings) as (keyof TPktStringsOverride)[]) {
+      merged[key] = { ...merged[key], ...strings[key] } as TPktStringsOverride[typeof key]
+    }
+    return merged
+  }, [parent, strings])
+
+  return <PktStringsContext.Provider value={value}>{children}</PktStringsContext.Provider>
+}