@oslokommune/punkt-elements/src/components/header/types.ts

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { PktIconName } from '@oslokommune/punkt-assets/dist/icons/icon'
import { booleanishConverter } from 'shared-types'
import type {
  Booleanish,
  User as SharedUser,
  Representing as SharedRepresenting,
  UserMenuItem as SharedUserMenuItem,
  TInternalMenuItem as SharedTInternalMenuItem,
  TSlotMenuVariant,
  THeaderMenu,
  TLogOutButtonPlacement,
  THeaderPosition,
  THeaderScrollBehavior,
} from 'shared-types'
import { convertUserMenuItem as sharedConvertUserMenuItem } from 'shared-types'

export type {
  Booleanish,
  TSlotMenuVariant,
  THeaderMenu,
  TLogOutButtonPlacement,
  THeaderPosition,
  THeaderScrollBehavior,
}
export { booleanishConverter }

// Re-export with PktIconName typing
export type User = SharedUser
export type Representing = SharedRepresenting
export type UserMenuItem = SharedUserMenuItem<PktIconName>
export type TInternalMenuItem = SharedTInternalMenuItem<PktIconName>

/**
 * Helper to convert UserMenuItem (with target) to internal format
 */
export const convertUserMenuItem = (item: UserMenuItem): TInternalMenuItem => {
  return sharedConvertUserMenuItem(item)
}

/**
 * Interface for the Header component props
 */
export interface IPktHeader {
  /** Hide the Oslo logo */
  hideLogo?: Booleanish
  /** Logo link URL */
  logoLink?: string
  /** Service name displayed in the header */
  serviceName?: string
  /** Service link URL */
  serviceLink?: string
  /** Use compact header height */
  compact?: Booleanish
  /** Header position. 'fixed' fixes to top of viewport, 'relative' follows document flow. Default: 'fixed' */
  position?: THeaderPosition
  /** Scroll behavior. 'hide' hides header on scroll down, 'none' keeps it visible. Default: 'hide' */
  scrollBehavior?: THeaderScrollBehavior
  /** User object for logged-in user */
  user?: User
  /** User menu items */
  userMenu?: UserMenuItem[]
  /** Representation object */
  representing?: Representing
  /** Allow user to change representation */
  canChangeRepresentation?: Booleanish
  /** Logout button placement */
  logOutButtonPlacement?: TLogOutButtonPlacement
  /** Whether there's a logout handler attached (required for logout button to show) */
  hasLogOut?: Booleanish
  /** Show search field */
  showSearch?: Booleanish
  /** Search field placeholder */
  searchPlaceholder?: string
  /** Controlled search value */
  searchValue?: string
  /** Custom breakpoint for responsive behavior in pixels. Default: 1024 */
  mobileBreakpoint?: number
  /** Custom breakpoint for tablet responsive behavior in pixels. Default: 1280 */
  tabletBreakpoint?: number
  /** Which menu is initially open */
  openedMenu?: THeaderMenu
  /** Variant for the slot menu button. Default: 'icon-only' */
  slotMenuVariant?: TSlotMenuVariant
  /** Text for the slot menu button. Default: 'Meny' */
  slotMenuText?: string
}