@oslokommune/punkt-react 16.21.0 → 16.21.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "16.21.0",
+  "version": "16.21.1",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -39,7 +39,7 @@
   "dependencies": {
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@lit/react": "^1.0.7",
-    "@oslokommune/punkt-elements": "^16.21.0",
+    "@oslokommune/punkt-elements": "^16.21.1",
     "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-hook-form": "^7.53.0"
@@ -109,5 +109,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "f7f1779ccee5d510e6d011e7ec3edba89b41c255"
+  "gitHead": "15799459d01ea67c7770b8603da84069a717a164"
 }

package/src/components/consent/Consent.test.tsx

@@ -0,0 +1,217 @@
+import '@testing-library/jest-dom'
+
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { afterEach, beforeEach, vi } from 'vitest'
+
+import { PktConsent } from './Consent'
+
+expect.extend(toHaveNoViolations)
+
+type CapturedHandler = ((consent: { value: string | { items: unknown[] } }) => void) | undefined
+let capturedHandler: CapturedHandler
+
+const installCookieBannerStub = ({ hasConsent = false }: { hasConsent?: boolean } = {}) => {
+  Object.defineProperty(window, 'cookieBanner', {
+    value: {
+      cookieConsent: {
+        validateConsentCookie: vi.fn().mockResolvedValue(hasConsent),
+        getConsentCookie: vi.fn().mockReturnValue('{"items":[]}'),
+      },
+      openCookieModal: vi.fn(),
+    },
+    writable: true,
+    configurable: true,
+  })
+  capturedHandler = undefined
+  Object.defineProperty(window, '__cookieEvents', {
+    value: {
+      on: vi.fn((_event: string, handler: CapturedHandler) => {
+        capturedHandler = handler
+      }),
+      off: vi.fn(),
+    },
+    writable: true,
+    configurable: true,
+  })
+}
+
+const preInjectScriptMarker = () => {
+  // The component's loadConsentScript() resolves immediately if the marker
+  // script is already in the DOM. Inject it up-front so the test doesn't
+  // depend on a network fetch that jsdom can't fulfil.
+  if (!document.querySelector('#oslo-consent-script')) {
+    const marker = document.createElement('script')
+    marker.id = 'oslo-consent-script'
+    document.head.appendChild(marker)
+  }
+}
+
+describe('PktConsent', () => {
+  beforeEach(() => {
+    preInjectScriptMarker()
+    installCookieBannerStub()
+  })
+
+  afterEach(() => {
+    document.querySelector('#oslo-consent-script')?.remove()
+    document.querySelector('#oslo-consent-styles')?.remove()
+    delete (window as { cookieBanner?: unknown }).cookieBanner
+    delete (window as { __cookieEvents?: unknown }).__cookieEvents
+    capturedHandler = undefined
+  })
+
+  describe('Trigger rendering', () => {
+    test('renders the default button trigger with the bokmål settings label', () => {
+      render(<PktConsent />)
+
+      expect(
+        screen.getByRole('button', { name: 'Innstillinger for informasjonskapsler' }),
+      ).toBeInTheDocument()
+    })
+
+    test('uses the English settings label when i18nLanguage is "en"', () => {
+      render(<PktConsent i18nLanguage="en" />)
+
+      expect(screen.getByRole('button', { name: 'Go to settings' })).toBeInTheDocument()
+    })
+
+    test('renders a custom triggerText when provided', () => {
+      render(<PktConsent triggerText="Endre samtykke" />)
+
+      expect(screen.getByRole('button', { name: 'Endre samtykke' })).toBeInTheDocument()
+    })
+
+    test('renders a link trigger when triggerType="link"', () => {
+      const { container } = render(<PktConsent triggerType="link" triggerText="Innstillinger" />)
+
+      const link = container.querySelector('a.pkt-link')
+      expect(link).toBeInTheDocument()
+      expect(link).toHaveAttribute('href', '#')
+      expect(link).toHaveTextContent('Innstillinger')
+    })
+
+    test('renders a footer link with chevron icon when triggerType="footerlink"', () => {
+      const { container } = render(
+        <PktConsent triggerType="footerlink" triggerText="Innstillinger" />,
+      )
+
+      const link = container.querySelector('a.pkt-footer__link')
+      expect(link).toBeInTheDocument()
+      expect(link?.querySelector('.pkt-icon')).toHaveAttribute('name', 'chevron-right')
+    })
+
+    test('renders an icon-only button when triggerType="icon"', () => {
+      const { container } = render(<PktConsent triggerType="icon" triggerText="Cookies" />)
+
+      const button = container.querySelector('button')
+      expect(button).toHaveClass('pkt-btn--icon-only')
+      expect(button).toHaveClass('pkt-btn--tertiary')
+    })
+  })
+
+  describe('Click behaviour', () => {
+    test('opens the cookie modal on button click', () => {
+      vi.useFakeTimers()
+      try {
+        render(<PktConsent />)
+        fireEvent.click(screen.getByRole('button'))
+        vi.runAllTimers()
+        expect(window.cookieBanner?.openCookieModal).toHaveBeenCalled()
+      } finally {
+        vi.useRealTimers()
+      }
+    })
+
+    test('opens the cookie modal on link click', () => {
+      vi.useFakeTimers()
+      try {
+        const { container } = render(<PktConsent triggerType="link" />)
+        const link = container.querySelector('a.pkt-link') as HTMLAnchorElement
+        fireEvent.click(link)
+        vi.runAllTimers()
+        expect(window.cookieBanner?.openCookieModal).toHaveBeenCalled()
+      } finally {
+        vi.useRealTimers()
+      }
+    })
+  })
+
+  describe('Side effects', () => {
+    test('sets the cookie banner globals from props', async () => {
+      render(
+        <PktConsent
+          devMode
+          googleAnalyticsId="GA-123"
+          hotjarId="HJ-456"
+          cookieDomain=".example.com"
+          cookieSecure="true"
+          cookieExpiryDays="90"
+        />,
+      )
+
+      await waitFor(() => {
+        expect(window.cookieBanner_googleAnalyticsId).toBe('GA-123')
+      })
+      expect(window.cookieBanner_hotjarId).toBe('HJ-456')
+      expect(window.cookieBanner_cookieDomain).toBe('.example.com')
+      expect(window.cookieBanner_cookieSecure).toBe('true')
+      expect(window.cookieBanner_cookieExpiryDays).toBe('90')
+      expect(window.cookieBanner_devMode).toBe(true)
+    })
+  })
+
+  describe('onToggleConsent', () => {
+    test('invokes onToggleConsent with a CustomEvent carrying parsed consent details', async () => {
+      installCookieBannerStub({ hasConsent: true })
+      const onToggle = vi.fn()
+
+      render(<PktConsent onToggleConsent={onToggle} />)
+
+      // First emit comes from the initial consent-cookie read; wait for it,
+      // then clear so we can assert specifically on the handler-driven call.
+      await waitFor(() => expect(capturedHandler).toBeDefined())
+      await waitFor(() => expect(onToggle).toHaveBeenCalled())
+      onToggle.mockClear()
+
+      capturedHandler!({
+        value: JSON.stringify({
+          items: [
+            { name: 'statistics', consent: true },
+            { name: 'survey', consent: false },
+          ],
+        }),
+      })
+
+      expect(onToggle).toHaveBeenCalledTimes(1)
+      const event = onToggle.mock.calls[0][0] as CustomEvent<Record<string, boolean>>
+      expect(event).toBeInstanceOf(CustomEvent)
+      expect(event.type).toBe('toggle-consent')
+      expect(event.detail).toEqual({ statistics: true, survey: false })
+    })
+  })
+
+  describe('Accessibility', () => {
+    test('button trigger has no axe violations', async () => {
+      const { container } = render(<PktConsent triggerText="Cookie settings" />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('link trigger has no axe violations', async () => {
+      const { container } = render(
+        <PktConsent triggerType="link" triggerText="Cookie settings" />,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('footer link trigger has no axe violations', async () => {
+      const { container } = render(
+        <PktConsent triggerType="footerlink" triggerText="Cookie settings" />,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/consent/Consent.tsx

@@ -1,23 +1,282 @@
 'use client'
 
-import { createComponent, EventName } from '@lit/react'
-import { type IPktConsent as IPktElConsent, PktConsent as PktElConsent } from '@oslokommune/punkt-elements'
-// eslint-disable-next-line no-restricted-syntax -- React is required for createComponent
-import React, { ForwardRefExoticComponent, LegacyRef } from 'react'
-
-export interface IPktConsent extends IPktElConsent {
-  ref?: LegacyRef<HTMLDivElement>
-  onToggleConsent?: (e: CustomEvent) => void
-}
-
-export const PktConsent: ForwardRefExoticComponent<IPktConsent> = createComponent({
-  tagName: 'pkt-consent',
-  elementClass: PktElConsent,
-  react: React,
-  displayName: 'PktConsent',
-  events: {
-    onToggleConsent: 'toggle-consent' as EventName<CustomEvent>,
+import {
+  forwardRef,
+  HTMLAttributes,
+  MouseEvent as ReactMouseEvent,
+  Ref,
+  useEffect,
+  useRef,
+} from 'react'
+
+import { PktButton } from '../button/Button'
+import { PktIcon } from '../icon/Icon'
+import { consentStrings } from './strings'
+
+interface ConsentItem {
+  name: string
+  consent: boolean
+}
+
+interface ConsentValue {
+  items: ConsentItem[]
+}
+
+interface CookieConsentEvent {
+  value: string | ConsentValue
+}
+
+type ConsentDetailsMap = Record<string, boolean>
+
+type CookieEventHandler = (consent: CookieConsentEvent) => void
+
+interface CookieEvents {
+  on(eventName: string, handler: CookieEventHandler): void
+  off(eventName: string, handler: CookieEventHandler): void
+}
+
+interface CookieBannerApi {
+  cookieConsent: {
+    validateConsentCookie(): Promise<boolean>
+    getConsentCookie(): string | ConsentValue
+  }
+  openCookieModal(): void
+}
+
+declare global {
+  interface Window {
+    cookieBanner_devMode?: boolean
+    cookieBanner_cookieDomain?: string | null
+    cookieBanner_cookieSecure?: string | null
+    cookieBanner_cookieExpiryDays?: string | null
+    cookieBanner_googleAnalyticsId?: string | null
+    cookieBanner_hotjarId?: string | null
+    cookieBanner?: CookieBannerApi
+    __cookieEvents?: CookieEvents
+  }
+}
+
+let consentScriptPromise: Promise<void> | null = null
+
+const loadConsentScript = (): Promise<void> => {
+  if (consentScriptPromise) return consentScriptPromise
+
+  consentScriptPromise = new Promise((resolve, reject) => {
+    if (document.querySelector('#oslo-consent-script')) {
+      resolve()
+      return
+    }
+    const script = document.createElement('script')
+    script.src = 'https://cdn.web.oslo.kommune.no/cb/cb-v1.1.0.js'
+    script.id = 'oslo-consent-script'
+    script.onload = () => resolve()
+    script.onerror = reject
+    document.head.appendChild(script)
+
+    const styles = document.createElement('link')
+    styles.href = 'https://cdn.web.oslo.kommune.no/cb/cb-v1.1.0.css'
+    styles.type = 'text/css'
+    styles.rel = 'stylesheet'
+    styles.id = 'oslo-consent-styles'
+    document.head.appendChild(styles)
+  })
+
+  return consentScriptPromise
+}
+
+const parseJsonOrPassThrough = <T,>(value: T | string): T => {
+  if (typeof value !== 'string') return value
+  try {
+    return JSON.parse(value) as T
+  } catch {
+    return value as unknown as T
+  }
+}
+
+const toConsentDetails = (consent: CookieConsentEvent): ConsentDetailsMap => {
+  const parsed = parseJsonOrPassThrough<ConsentValue>(consent.value)
+  return parsed.items.reduce<ConsentDetailsMap>((acc, item) => {
+    acc[item.name] = item.consent
+    return acc
+  }, {})
+}
+
+export type TPktConsentTriggerType = 'button' | 'link' | 'footerlink' | 'icon'
+
+export interface IPktConsent extends HTMLAttributes<HTMLElement> {
+  devMode?: boolean
+  cookieDomain?: string | null
+  cookieSecure?: string | null
+  cookieExpiryDays?: string | null
+  hotjarId?: string | null
+  googleAnalyticsId?: string | null
+  i18nLanguage?: string
+  triggerType?: TPktConsentTriggerType | null
+  triggerText?: string | null
+  onToggleConsent?: (e: CustomEvent<ConsentDetailsMap>) => void
+}
+
+export const PktConsent = forwardRef<HTMLElement, IPktConsent>(function PktConsent(
+  {
+    devMode = false,
+    cookieDomain = null,
+    cookieSecure = null,
+    cookieExpiryDays = null,
+    hotjarId = null,
+    googleAnalyticsId = null,
+    i18nLanguage = 'nb',
+    triggerType = 'button',
+    triggerText,
+    onToggleConsent,
+    ...rest
   },
-}) as ForwardRefExoticComponent<IPktConsent>
+  ref,
+) {
+  const onToggleRef = useRef(onToggleConsent)
+  onToggleRef.current = onToggleConsent
+
+  const configRef = useRef({
+    devMode,
+    cookieDomain,
+    cookieSecure,
+    cookieExpiryDays,
+    hotjarId,
+    googleAnalyticsId,
+  })
+  configRef.current = {
+    devMode,
+    cookieDomain,
+    cookieSecure,
+    cookieExpiryDays,
+    hotjarId,
+    googleAnalyticsId,
+  }
+
+  const triggerInitRef = useRef<() => void>(() => {})
+
+  const language = (i18nLanguage in consentStrings.i18n
+    ? i18nLanguage
+    : 'nb') as keyof typeof consentStrings.i18n
+  const resolvedTriggerText =
+    triggerText ?? consentStrings.i18n[language].contentPresentation.buttons.settings
+
+  useEffect(() => {
+    let cancelled = false
+    let cookieEventHandler: CookieEventHandler | undefined
+
+    const config = configRef.current
+    // cookieBanner_* identifiers are defined by the external cookie banner script
+    /* eslint-disable camelcase */
+    window.cookieBanner_googleAnalyticsId = config.googleAnalyticsId
+    window.cookieBanner_hotjarId = config.hotjarId
+    if (config.cookieDomain) window.cookieBanner_cookieDomain = config.cookieDomain
+    if (config.cookieSecure) window.cookieBanner_cookieSecure = config.cookieSecure
+    if (config.cookieExpiryDays) window.cookieBanner_cookieExpiryDays = config.cookieExpiryDays
+    if (config.devMode) window.cookieBanner_devMode = config.devMode
+    /* eslint-enable camelcase */
+
+    const emitConsents = (consent: CookieConsentEvent) => {
+      const handler = onToggleRef.current
+      if (!handler) return
+      handler(
+        new CustomEvent<ConsentDetailsMap>('toggle-consent', {
+          detail: toConsentDetails(consent),
+          bubbles: true,
+          cancelable: false,
+        }),
+      )
+    }
+
+    triggerInitRef.current = () => {
+      window.document.dispatchEvent(
+        new Event('CookieBannerReady', { bubbles: true, cancelable: true }),
+      )
+
+      const banner = window.cookieBanner
+      const events = window.__cookieEvents
+      if (!banner || !events) return
+
+      banner.cookieConsent.validateConsentCookie().then((hasConsent) => {
+        if (cancelled || !hasConsent) return
+
+        const cookie = banner.cookieConsent.getConsentCookie()
+        window.setTimeout(() => {
+          if (!cancelled) emitConsents({ value: cookie })
+        }, 0)
+
+        if (cookieEventHandler) {
+          events.off('CookieManager.setCookie', cookieEventHandler)
+        }
+        cookieEventHandler = (consent) => emitConsents(consent)
+        events.on('CookieManager.setCookie', cookieEventHandler)
+      })
+    }
+
+    loadConsentScript().then(() => {
+      if (!cancelled) triggerInitRef.current()
+    })
+
+    return () => {
+      cancelled = true
+      if (cookieEventHandler) {
+        window.__cookieEvents?.off('CookieManager.setCookie', cookieEventHandler)
+      }
+    }
+  }, [])
+
+  const openModal = (e: ReactMouseEvent<HTMLElement>) => {
+    e.preventDefault()
+    if (!window.cookieBanner?.cookieConsent) {
+      triggerInitRef.current()
+    }
+    setTimeout(() => window.cookieBanner?.openCookieModal())
+  }
+
+  if (triggerType === 'link') {
+    return (
+      <a
+        {...rest}
+        ref={ref as Ref<HTMLAnchorElement>}
+        href="#"
+        className="pkt-link"
+        onClick={openModal}
+      >
+        {resolvedTriggerText}
+      </a>
+    )
+  }
+  if (triggerType === 'footerlink') {
+    return (
+      <a
+        {...rest}
+        ref={ref as Ref<HTMLAnchorElement>}
+        href="#"
+        className="pkt-footer__link"
+        onClick={openModal}
+      >
+        <PktIcon name="chevron-right" className="pkt-footer__link-icon" />
+        {resolvedTriggerText}
+      </a>
+    )
+  }
+  if (triggerType === 'icon') {
+    return (
+      <PktButton
+        ref={ref as Ref<HTMLButtonElement>}
+        skin="tertiary"
+        variant="icon-only"
+        iconName="cookie"
+        onClick={openModal}
+      >
+        {resolvedTriggerText}
+      </PktButton>
+    )
+  }
+  return (
+    <PktButton ref={ref as Ref<HTMLButtonElement>} onClick={openModal}>
+      {resolvedTriggerText}
+    </PktButton>
+  )
+})
 
 PktConsent.displayName = 'PktConsent'

package/src/components/consent/strings.ts

@@ -0,0 +1,125 @@
+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',
+          },
+        },
+      },
+    },
+  ],
+}