@oslokommune/punkt-react 16.26.3 → 17.0.0

package/src/components/footerSimple/FooterSimple.tsx

@@ -1,35 +1,69 @@
 'use client'
 
-import { FC, type HTMLAttributes } from 'react'
+import { FC, useEffect, useMemo, type HTMLAttributes } from 'react'
 
+import {
+  DEFAULT_FOOTER_PERSONVERN_URL,
+  DEFAULT_FOOTER_TILGJENGELIGHET_URL,
+  type IPktFooterLink,
+  type IPktFooterSimpleProps,
+} from 'shared-types'
+import { getLinkDomainLabel } from 'shared-utils/header-footer'
 import { PktConsent } from '../consent/Consent'
 import { PktIcon } from '../icon/Icon'
+import { FooterGlobal, useGlobalFooterData, type TFooterConsentConfig } from '../footer/FooterGlobal'
 
-export interface IPktFooterSimple extends HTMLAttributes<HTMLDivElement> {
-  links?: Array<{
-    href: string
-    text: string
-    external?: boolean
-    openInNewTab?: boolean
-  }>
+export interface IPktFooterSimple
+  extends IPktFooterSimpleProps<string>, TFooterConsentConfig, Omit<HTMLAttributes<HTMLElement>, 'children'> {
+  onDataError?: (error: Error) => void
+  /**
+   * @deprecated The privacy link now comes from the global footer's payload.
+   * Only rendered (in the secondary footer) when explicitly set to a
+   * non-default value.
+   */
   personvernOgInfoLink?: string
+  /**
+   * @deprecated The accessibility link now comes from the global footer's
+   * payload. Only rendered (in the secondary footer) when explicitly set
+   * to a non-default value.
+   */
   tilgjengelighetLink?: string
-  openLinksInNewTab?: boolean
-  includeConsent?: boolean
-  hotjarId?: string | null
-  googleAnalyticsId?: string | null
-  devMode?: boolean
-  cookieDomain?: string | null
-  cookieSecure?: string | null
-  cookieExpiryDays?: string | null
-  onToggleConsent?: (e: CustomEvent) => void
 }
 
+const SimpleLink: FC<{ link: IPktFooterLink; openLinksInNewTab: boolean }> = ({ link, openLinksInNewTab }) => {
+  const newTab = link.openInNewTab || openLinksInNewTab
+  // external = vis toppdomenet i parentes bak lenketeksten
+  const domain = link.external ? getLinkDomainLabel(link.href) : undefined
+  return (
+    <a
+      className="pkt-footer-simple__link"
+      href={link.href}
+      target={newTab ? '_blank' : '_self'}
+      rel={newTab ? 'noopener noreferrer' : undefined}
+    >
+      <PktIcon className="pkt-footer-simple__link-icon" name="arrow-link" />
+      <span>
+        {link.text}
+        {domain && <span className="pkt-footer-simple__link-domain"> ({domain})</span>}
+      </span>
+    </a>
+  )
+}
+
+/**
+ * PktFooterSimple — kompakt footer: en sentrert rad med pil-lenker i det
+ * grå sekundær-båndet, stablet oppå den globale (blå) footeren. Uten
+ * `links` rendres kun den globale footeren.
+ */
 export const PktFooterSimple: FC<IPktFooterSimple> = ({
-  links = [],
+  links,
+  personvernOgInfoLink,
+  tilgjengelighetLink,
+  skipGlobal = false,
+  data,
+  dataUrl,
+  locale = 'nb-NO',
   openLinksInNewTab = false,
-  personvernOgInfoLink = 'https://www.oslo.kommune.no/personvern-og-informasjonskapsler/',
-  tilgjengelighetLink = 'https://www.oslo.kommune.no/tilgjengelighet/',
   includeConsent = false,
   hotjarId = null,
   googleAnalyticsId = null,
@@ -37,68 +71,73 @@ export const PktFooterSimple: FC<IPktFooterSimple> = ({
   cookieDomain = null,
   cookieSecure = null,
   cookieExpiryDays = null,
-  onToggleConsent = (e: CustomEvent) => {
-    // eslint-disable-next-line no-console
-    console.log(e.detail)
-  },
+  onToggleConsent,
+  onDataError,
   className,
+  ...rest
 }) => {
+  useEffect(() => {
+    if (personvernOgInfoLink || tilgjengelighetLink) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        'PktFooterSimple: The "personvernOgInfoLink"/"tilgjengelighetLink" props are deprecated — the links now come from the global footer. Overridden values are rendered in the secondary footer.',
+      )
+    }
+  }, [personvernOgInfoLink, tilgjengelighetLink])
+
+  const globalFooter = useGlobalFooterData({ data, dataUrl, locale, skipGlobal, onDataError })
+
+  // Deprecated lenker rendres kun når de er eksplisitt overstyrt til noe
+  // annet enn default — ellers dekkes de av den globale footeren.
+  const effectiveLinks = useMemo(() => {
+    const legacyLinks: IPktFooterLink[] = []
+    if (personvernOgInfoLink && personvernOgInfoLink !== DEFAULT_FOOTER_PERSONVERN_URL) {
+      legacyLinks.push({ text: 'Personvern og informasjonskapsler', href: personvernOgInfoLink })
+    }
+    if (tilgjengelighetLink && tilgjengelighetLink !== DEFAULT_FOOTER_TILGJENGELIGHET_URL) {
+      legacyLinks.push({ text: 'Tilgjengelighet', href: tilgjengelighetLink })
+    }
+    return [...(links ?? []), ...legacyLinks]
+  }, [links, personvernOgInfoLink, tilgjengelighetLink])
+
+  const consent: TFooterConsentConfig = {
+    hotjarId,
+    googleAnalyticsId,
+    devMode,
+    cookieDomain,
+    cookieSecure,
+    cookieExpiryDays,
+    onToggleConsent,
+  }
+
+  // Med skipGlobal rendres consent-lenken i sekundær-båndet i stedet for i
+  // den globale footeren.
+  const consentInSecondary = skipGlobal && includeConsent
+  const hasSecondary = effectiveLinks.length > 0 || consentInSecondary
+
   const classNames = [className, 'pkt-footer-simple'].filter(Boolean).join(' ')
+
   return (
-    <footer className={classNames} data-mode="dark">
-      <div className="pkt-footer-simple__container">
-        <ul className="pkt-footer-simple__list">
-          {links.map((link, index) => (
-            <li className="pkt-footer-simple__list-item" key={index}>
-              <a
-                className={`pkt-footer-simple__link ${link.external ? ' pkt-link--external' : ''}`}
-                href={link.href}
-                target={link.openInNewTab || openLinksInNewTab ? '_blank' : '_self'}
-                rel={link.openInNewTab || openLinksInNewTab ? 'noopener noreferrer' : undefined}
-              >
-                <PktIcon className="pkt-footer-simple__link-icon" name="chevron-right" />
-                {link.text}
-              </a>
-            </li>
-          ))}
-          <li className="pkt-footer-simple__list-item">
-            <a
-              className="pkt-footer-simple__link"
-              href={personvernOgInfoLink}
-              target={openLinksInNewTab ? '_blank' : '_self'}
-              rel={openLinksInNewTab ? 'noopener noreferrer' : undefined}
-            >
-              <PktIcon className="pkt-footer-simple__link-icon" name="chevron-right"></PktIcon>
-              Personvern og informasjonskapsler
-            </a>
-          </li>
-          <li className="pkt-footer-simple__list-item">
-            <a
-              className="pkt-footer-simple__link"
-              href={tilgjengelighetLink}
-              target={openLinksInNewTab ? '_blank' : '_self'}
-              rel={openLinksInNewTab ? 'noopener noreferrer' : undefined}
-            >
-              <PktIcon className="pkt-footer-simple__link-icon" name="chevron-right"></PktIcon>
-              Tilgjengelighet
-            </a>
-          </li>
-          {includeConsent && (
-            <li className="pkt-footer-simple__list-item">
-              <PktConsent
-                triggerType="footerlink"
-                hotjarId={hotjarId}
-                googleAnalyticsId={googleAnalyticsId}
-                devMode={devMode}
-                cookieDomain={cookieDomain}
-                cookieSecure={cookieSecure}
-                cookieExpiryDays={cookieExpiryDays}
-                onToggleConsent={onToggleConsent}
-              />
-            </li>
-          )}
-        </ul>
-      </div>
+    <footer className={classNames} {...rest}>
+      {hasSecondary && (
+        <div className="pkt-footer__band pkt-footer__band--secondary">
+          <div className="pkt-footer__inner pkt-footer__inner--compact">
+            <ul className="pkt-footer-simple__list">
+              {effectiveLinks.map((link) => (
+                <li key={`${link.href}|${link.text}`}>
+                  <SimpleLink link={link} openLinksInNewTab={openLinksInNewTab} />
+                </li>
+              ))}
+              {consentInSecondary && (
+                <li>
+                  <PktConsent triggerType="footerlink" {...consent} />
+                </li>
+              )}
+            </ul>
+          </div>
+        </div>
+      )}
+      {globalFooter && <FooterGlobal footer={globalFooter} includeConsent={includeConsent} consent={consent} />}
     </footer>
   )
 }

package/src/components/header/Header.tsx

@@ -2,11 +2,20 @@
 
 import { ForwardedRef, forwardRef } from 'react'
 
+import { PktHeaderGlobal } from './HeaderGlobal'
 import { PktHeaderService } from './HeaderService'
-import { IPktHeader } from './types'
+import { IPktHeader, IPktHeaderGlobal } from './types'
 
 export * from './types'
 
+/**
+ * Props for `<PktHeader>`. The `type` prop selects the variant:
+ * the default `service` header (a single service's header) or the
+ * `global` (kommune-wide) header driven by the shared header/footer
+ * payload.
+ */
+export type IPktHeaderProps = (IPktHeader & { type?: 'service' }) | (IPktHeaderGlobal & { type: 'global' })
+
 /**
  * PktHeader - Main header component for Oslo kommune services
  *
@@ -17,10 +26,14 @@ export * from './types'
  * - Responsive mobile menu
  * - Fixed positioning with scroll-to-hide
  *
- * TODO: Add `type` prop to switch between `service` and `global` header types
+ * The `type` prop switches between the `service` header (default) and
+ * the `global` (kommune-wide) header.
  */
-export const PktHeader = forwardRef((props: IPktHeader, ref: ForwardedRef<HTMLDivElement>) => {
-  return <PktHeaderService {...props} ref={ref} />
+export const PktHeader = forwardRef((props: IPktHeaderProps, ref: ForwardedRef<HTMLElement>) => {
+  if (props.type === 'global') {
+    return <PktHeaderGlobal {...props} ref={ref as ForwardedRef<HTMLDivElement>} />
+  }
+  return <PktHeaderService {...props} ref={ref as ForwardedRef<HTMLDivElement>} />
 })
 
 PktHeader.displayName = 'PktHeader'

package/src/components/header/HeaderGlobal.accessibility.test.tsx

@@ -0,0 +1,86 @@
+import '@testing-library/jest-dom'
+
+import { fireEvent, render } from '@testing-library/react'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { EXAMPLE_HEADER_FOOTER_DATA } from 'shared-utils/header-footer'
+import { afterEach, describe, expect, test, vi } from 'vitest'
+
+import { PktHeaderGlobal } from './HeaderGlobal'
+
+expect.extend(toHaveNoViolations)
+
+// jsdom reports offsetWidth as 0 (compact). Zero the breakpoints to force the
+// full desktop layout; omit to exercise the compact/mobile layout.
+const DESKTOP = { mobileBreakpoint: 0, tabletBreakpoint: 0 }
+
+const renderGlobal = (props = {}) =>
+  render(<PktHeaderGlobal data={EXAMPLE_HEADER_FOOTER_DATA} position="relative" {...props} />)
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+
+describe('PktHeaderGlobal – tilgjengelighet', () => {
+  test('ingen brudd i standardvisning (desktop)', async () => {
+    const { container } = renderGlobal(DESKTOP)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+
+  test('ingen brudd i kompakt visning (mobil)', async () => {
+    const { container } = renderGlobal()
+    expect(await axe(container)).toHaveNoViolations()
+  })
+
+  test('ingen brudd med innlogget bruker', async () => {
+    const { container } = renderGlobal({
+      ...DESKTOP,
+      user: { name: 'Aksel Web Opdahl' },
+      logOutButtonPlacement: 'userMenu',
+      logOut: vi.fn(),
+    })
+    expect(await axe(container)).toHaveNoViolations()
+  })
+
+  test('ingen brudd med åpen megameny', async () => {
+    const { container } = renderGlobal(DESKTOP)
+    fireEvent.click(container.querySelector('#pkt-header-global-menu-toggle') as Element)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+
+  test('ingen brudd med åpent søke-overlay', async () => {
+    const { container } = renderGlobal()
+    fireEvent.click(container.querySelector('#pkt-header-global-search-toggle') as Element)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+
+  test('ingen brudd med åpen brukermeny', async () => {
+    const { container } = renderGlobal({
+      ...DESKTOP,
+      user: { name: 'Aksel Web Opdahl' },
+      logOutButtonPlacement: 'userMenu',
+      logOut: vi.fn(),
+    })
+    fireEvent.click(container.querySelector('.pkt-header-global__user-button') as Element)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+
+  test('ingen brudd når menydata feiler', async () => {
+    vi.stubGlobal('fetch', vi.fn().mockRejectedValue(new Error('network')))
+    const { container, findByRole } = render(<PktHeaderGlobal position="relative" {...DESKTOP} />)
+    const menuButton = await findByRole('button', { name: /Meny/ })
+    fireEvent.click(menuButton)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+
+  test('menyknappen har aria-expanded og aria-controls', () => {
+    const { container } = renderGlobal(DESKTOP)
+    const toggle = container.querySelector('#pkt-header-global-menu-toggle') as HTMLElement
+    expect(toggle).toHaveAttribute('aria-controls', 'pkt-header-global-menu')
+    expect(toggle).toHaveAttribute('aria-expanded', 'false')
+
+    fireEvent.click(toggle)
+    expect(
+      container.querySelector('#pkt-header-global-menu-toggle'),
+    ).toHaveAttribute('aria-expanded', 'true')
+  })
+})

package/src/components/header/HeaderGlobal.test.tsx

@@ -0,0 +1,254 @@
+import '@testing-library/jest-dom'
+
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { EXAMPLE_HEADER_FOOTER_DATA } from 'shared-utils/header-footer'
+import { afterEach, describe, expect, test, vi } from 'vitest'
+
+import { PktHeaderGlobal } from './HeaderGlobal'
+
+const renderGlobal = (props = {}) =>
+  render(<PktHeaderGlobal data={EXAMPLE_HEADER_FOOTER_DATA} position="relative" {...props} />)
+
+// jsdom reports offsetWidth as 0, which puts the header in compact mode.
+// Force the desktop (full) layout by zeroing the breakpoints.
+const DESKTOP = { mobileBreakpoint: 0, tabletBreakpoint: 0 }
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+
+describe('PktHeaderGlobal', () => {
+  test('viser søkefelt, kontaktlenke og menyknapp (desktop)', () => {
+    const { container } = renderGlobal(DESKTOP)
+
+    expect(container.querySelector('input[name="q"]')).toBeInTheDocument()
+
+    const contact = screen.getByRole('link', { name: 'Kontakt' })
+    expect(contact).toHaveAttribute('href', 'https://www.oslo.kommune.no/kontakt')
+
+    expect(screen.getByRole('button', { name: /Meny/ })).toBeInTheDocument()
+  })
+
+  test('søkefeltet er en GET-form mot søke-endepunktet (desktop)', () => {
+    const { container } = renderGlobal(DESKTOP)
+    const form = container.querySelector('form[role="search"]')
+    expect(form).toHaveAttribute('action', 'https://www.oslo.kommune.no/sokeresultat/')
+    expect(form).toHaveAttribute('method', 'get')
+  })
+
+  test('mobil: søkeknappen åpner et søkefelt-overlay', () => {
+    const { container } = renderGlobal()
+    // Compact layout: inline search is replaced by a round toggle.
+    expect(container.querySelector('.pkt-header-global__search-panel')).not.toBeInTheDocument()
+    const searchToggle = container.querySelector('#pkt-header-global-search-toggle')
+    expect(searchToggle).toBeInTheDocument()
+
+    fireEvent.click(searchToggle as Element)
+
+    const panel = container.querySelector('.pkt-header-global__search-panel')
+    expect(panel).toBeInTheDocument()
+    expect(panel?.querySelector('input[name="q"]')).toBeInTheDocument()
+  })
+
+  test('mobil: åpning av søk gir fokus til søkefeltet', () => {
+    const { container } = renderGlobal()
+    fireEvent.click(container.querySelector('#pkt-header-global-search-toggle') as Element)
+
+    const input = container.querySelector('#pkt-header-global-search-panel input') as HTMLInputElement
+    expect(input).toBeTruthy()
+    expect(document.activeElement).toBe(input)
+  })
+
+  test('mobil: Tab ut av søke-overlay lukker det og flytter fokus til søkeknappen', () => {
+    const { container } = renderGlobal()
+    const searchToggle = container.querySelector('#pkt-header-global-search-toggle') as HTMLElement
+    fireEvent.click(searchToggle)
+
+    const panel = container.querySelector('#pkt-header-global-search-panel') as HTMLElement
+    const focusables = panel.querySelectorAll<HTMLElement>('input, button')
+    const last = focusables[focusables.length - 1]
+    act(() => last.focus())
+
+    fireEvent.keyDown(document, { key: 'Tab' })
+
+    expect(container.querySelector('.pkt-header-global__search-panel')).not.toBeInTheDocument()
+    expect(searchToggle.contains(document.activeElement) || document.activeElement === searchToggle).toBe(true)
+  })
+
+  test('mobil: fokus utenfor søke-overlay lukker det', () => {
+    const { container } = renderGlobal()
+    fireEvent.click(container.querySelector('#pkt-header-global-search-toggle') as Element)
+    expect(container.querySelector('.pkt-header-global__search-panel')).toBeInTheDocument()
+
+    const menuToggle = container.querySelector('#pkt-header-global-menu-toggle') as HTMLElement
+    act(() => menuToggle.focus())
+    fireEvent.focusIn(menuToggle)
+
+    expect(container.querySelector('.pkt-header-global__search-panel')).not.toBeInTheDocument()
+  })
+
+  test('mobil: åpning av søk lukker megamenyen', () => {
+    const { container } = renderGlobal()
+    fireEvent.click(screen.getByRole('button', { name: /Meny/ }))
+    expect(screen.getByText('Tjenester og tilbud')).toBeInTheDocument()
+
+    fireEvent.click(container.querySelector('#pkt-header-global-search-toggle') as Element)
+    expect(screen.queryByText('Tjenester og tilbud')).not.toBeInTheDocument()
+    expect(container.querySelector('.pkt-header-global__search-panel')).toBeInTheDocument()
+  })
+
+  test('menyknappen åpner megamenyen', () => {
+    renderGlobal()
+    expect(screen.queryByText('Tjenester og tilbud')).not.toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: /Meny/ }))
+
+    expect(screen.getByText('Tjenester og tilbud')).toBeInTheDocument()
+  })
+
+  test('tastatur: Tab fra menyknappen flytter fokus inn i megamenyen', () => {
+    const { container } = renderGlobal(DESKTOP)
+    const toggle = container.querySelector('#pkt-header-global-menu-toggle') as HTMLElement
+    fireEvent.click(toggle)
+    act(() => toggle.focus())
+    expect(document.activeElement).toBe(toggle)
+
+    fireEvent.keyDown(document, { key: 'Tab' })
+
+    const menu = container.querySelector('#pkt-header-global-menu') as HTMLElement
+    const firstFocusable = menu.querySelector('a[href], button') as HTMLElement
+    expect(document.activeElement).toBe(firstFocusable)
+  })
+
+  test('mobil: Tab fra menyknappen flytter fokus inn i megamenyen (accordion)', () => {
+    const original = window.matchMedia
+    // Force the mega menu into its mobile accordion layout.
+    window.matchMedia = vi.fn().mockReturnValue({
+      matches: true,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      addListener: vi.fn(),
+      removeListener: vi.fn(),
+    }) as unknown as typeof window.matchMedia
+    try {
+      const { container } = renderGlobal()
+      const toggle = container.querySelector('#pkt-header-global-menu-toggle') as HTMLElement
+      fireEvent.click(toggle)
+      act(() => toggle.focus())
+
+      fireEvent.keyDown(document, { key: 'Tab' })
+
+      const menu = container.querySelector('#pkt-header-global-menu') as HTMLElement
+      const firstSummary = menu.querySelector('summary') as HTMLElement
+      expect(firstSummary).toBeTruthy()
+      expect(document.activeElement).toBe(firstSummary)
+    } finally {
+      window.matchMedia = original
+    }
+  })
+
+  test('tastatur: Tab ut av megamenyen lukker den og flytter fokus til menyknappen', () => {
+    const { container } = renderGlobal(DESKTOP)
+    const toggle = container.querySelector('#pkt-header-global-menu-toggle') as HTMLElement
+    fireEvent.click(toggle)
+
+    const menu = container.querySelector('#pkt-header-global-menu') as HTMLElement
+    const focusables = menu.querySelectorAll<HTMLElement>('a[href], button')
+    const last = focusables[focusables.length - 1]
+    act(() => last.focus())
+
+    fireEvent.keyDown(document, { key: 'Tab' })
+
+    expect(container.querySelector('#pkt-header-global-menu')).not.toBeInTheDocument()
+    expect(toggle.contains(document.activeElement) || document.activeElement === toggle).toBe(true)
+  })
+
+  test('tastatur: fokus utenfor megamenyen lukker den', () => {
+    const { container } = renderGlobal(DESKTOP)
+    fireEvent.click(container.querySelector('#pkt-header-global-menu-toggle') as Element)
+    expect(screen.getByText('Tjenester og tilbud')).toBeInTheDocument()
+
+    const contact = container.querySelector('.pkt-header-global__contact') as HTMLElement
+    act(() => contact.focus())
+    fireEvent.focusIn(contact)
+
+    expect(screen.queryByText('Tjenester og tilbud')).not.toBeInTheDocument()
+  })
+
+  test('viser feilmelding i menyen når data ikke kan lastes', async () => {
+    vi.stubGlobal('fetch', vi.fn().mockRejectedValue(new Error('network')))
+    render(<PktHeaderGlobal position="relative" {...DESKTOP} />)
+
+    const menuButton = await screen.findByRole('button', { name: /Meny/ })
+    await waitFor(() => expect(menuButton).not.toBeDisabled())
+
+    fireEvent.click(menuButton)
+    expect(screen.getByText('Kunne ikke laste meny.')).toBeInTheDocument()
+  })
+
+  test('brukerknappen åpner brukermenyen', () => {
+    renderGlobal({ user: { name: 'Aksel Web Opdahl' }, logOutButtonPlacement: 'userMenu', logOut: vi.fn() })
+
+    const userButton = screen.getByRole('button', { name: /Aksel Web Opdahl/ })
+    fireEvent.click(userButton)
+
+    expect(screen.getByText('Pålogget som')).toBeInTheDocument()
+  })
+
+  test('kaller onDataLoaded når data er forhåndshentet', () => {
+    const onDataLoaded = vi.fn()
+    renderGlobal({ onDataLoaded })
+    expect(onDataLoaded).toHaveBeenCalledWith(EXAMPLE_HEADER_FOOTER_DATA)
+  })
+
+  test('logo lenker til www.oslo.kommune.no når logoLink er satt', () => {
+    renderGlobal({ logoLink: 'https://www.oslo.kommune.no' })
+    const logoLink = screen.getByRole('link', { name: 'Til hovedsiden' })
+    expect(logoLink).toHaveAttribute('href', 'https://www.oslo.kommune.no')
+  })
+
+  test('skjuler kontaktlenken når bruker er innlogget', () => {
+    const { container } = renderGlobal({ ...DESKTOP, user: { name: 'Aksel Web Opdahl' } })
+    expect(container.querySelector('.pkt-header-global__contact')).not.toBeInTheDocument()
+    expect(container.querySelector('.pkt-header-global__user-button')).toBeInTheDocument()
+  })
+
+  test('megameny-overlegget forankres til headerens faktiske posisjon', () => {
+    const { container } = renderGlobal({ ...DESKTOP, position: 'relative' })
+    const header = container.querySelector('.pkt-header-global') as HTMLElement
+    // Simulate a header sitting 32px down the page (relative/sticky position).
+    header.getBoundingClientRect = () =>
+      ({ bottom: 120, top: 32, left: 16, right: 1296, width: 1280, height: 88 }) as DOMRect
+
+    fireEvent.click(container.querySelector('#pkt-header-global-menu-toggle') as Element)
+
+    const overlay = container.querySelector('#pkt-header-global-menu') as HTMLElement
+    // The CSS adds the design offset (104/88px) on top of this anchor.
+    expect(overlay.style.getPropertyValue('--pkt-header-global-top')).toBe('32px')
+    expect(overlay.style.getPropertyValue('--pkt-header-global-left')).toBe('16px')
+    expect(overlay.style.getPropertyValue('--pkt-header-global-width')).toBe('1280px')
+  })
+
+  test('position="sticky" gir sticky-klasse uten wrapper/spacer', () => {
+    const { container } = renderGlobal({ ...DESKTOP, position: 'sticky' })
+    const header = container.querySelector('.pkt-header-global')
+    expect(header).toHaveClass('pkt-header-global--sticky')
+    expect(header).not.toHaveClass('pkt-header-global--fixed')
+    expect(container.querySelector('.pkt-header-global-wrapper')).toBeNull()
+    expect(container.querySelector('.pkt-header-global-spacer')).toBeNull()
+  })
+
+  test('logoen lenker til www.oslo.kommune.no som standard', () => {
+    const { container } = renderGlobal(DESKTOP)
+    const logo = container.querySelector('.pkt-header-global__logo a')
+    expect(logo).toHaveAttribute('href', 'https://www.oslo.kommune.no')
+  })
+
+  test('logoClick kalles ved klikk på logoen', () => {
+    // preventDefault: jsdom kan ikke navigere
+    const onClick = vi.fn((e: React.MouseEvent) => e.preventDefault())
+    const { container } = renderGlobal({ ...DESKTOP, logoClick: onClick })
+    fireEvent.click(container.querySelector('.pkt-header-global__logo a') as Element)
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+})