@oslokommune/punkt-react 16.21.0 → 16.22.0

package/dist/shared-types/index.d.ts

@@ -8,6 +8,7 @@ export type { THeaderMenuLocale, IHeaderMenuLink, IHeaderMenuIconLink, IHeaderMe
 export { DEFAULT_HEADER_FOOTER_URL } from './header-menu';
 export type { TLayout, TVerticalPosition, THorizontalPosition, TPosition, TPositionWithCenter, } from './layout';
 export type { THTMLButtonType, TSelectionMode } from './form';
+export type { TSelectOption } from './select';
 export type { TSize3, TSize5, TSize7 } from './size';
 export type { TAlertSkin, TMessageboxSkin, TAccordionSkin, TCardSkin, TTagSkin } from './skin';
 export type { IDateConstraints, ICalendarGridDimensions, IGridCellPosition, TDateRangeMap, ISelectionState, ISelectionOptions, } from './calendar';

package/dist/shared-types/select.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Shape of a single option in a `<pkt-select>` / `<PktSelect>` component.
+ * Lives in shared-types so both `@oslokommune/punkt-elements` and
+ * `@oslokommune/punkt-react` can re-export the same canonical type.
+ */
+export type TSelectOption = {
+    value: string;
+    label: string;
+    selected?: boolean;
+    disabled?: boolean;
+    hidden?: boolean;
+};

package/package.json

@@ -1,15 +1,11 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "16.21.0",
+  "version": "16.22.0",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
   "main": "dist/punkt-react.umd.js",
   "module": "dist/punkt-react.es.js",
-  "nohoist": [
-    "**/@lit",
-    "**/@lit/**"
-  ],
   "files": [
     "/dist",
     "src/components/**/*",
@@ -37,9 +33,6 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@lit-labs/ssr-dom-shim": "^1.2.1",
-    "@lit/react": "^1.0.7",
-    "@oslokommune/punkt-elements": "^16.21.0",
     "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-hook-form": "^7.53.0"
@@ -109,5 +102,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "f7f1779ccee5d510e6d011e7ec3edba89b41c255"
+  "gitHead": "23fb504541072d6e50b5f23d6c13208e5c0c03ce"
 }

package/src/components/breadcrumbs/Breadcrumbs.test.tsx

@@ -34,7 +34,6 @@ describe('PktBreadcrumbs Component', () => {
         <PktBreadcrumbs breadcrumbs={breadcrumbs} navigationType="router" />
       </TestRouter>,
     )
-    await window.customElements.whenDefined('pkt-icon')
 
     expect(getAllByText('Home')).toBeTruthy()
     expect(getAllByText('Products')).toBeTruthy()
@@ -43,7 +42,6 @@ describe('PktBreadcrumbs Component', () => {
 
   it('renders breadcrumbs correctly with anchor navigation', async () => {
     const { getAllByText } = render(<PktBreadcrumbs breadcrumbs={breadcrumbs} navigationType="anchor" />)
-    await window.customElements.whenDefined('pkt-icon')
 
     expect(getAllByText('Home')).toBeTruthy()
     expect(getAllByText('Products')).toBeTruthy()
@@ -56,7 +54,6 @@ describe('PktBreadcrumbs Component', () => {
         <PktBreadcrumbs breadcrumbs={breadcrumbs} navigationType="router" />
       </TestRouter>,
     )
-    await window.customElements.whenDefined('pkt-icon')
 
     expect(getAllByText('Home')).toBeTruthy()
     expect(getAllByText('Products')).toBeTruthy()
@@ -65,7 +62,6 @@ describe('PktBreadcrumbs Component', () => {
 
   it('renders back link correctly on mobile with anchor navigation', async () => {
     const { getAllByText } = render(<PktBreadcrumbs breadcrumbs={breadcrumbs} navigationType="anchor" />)
-    await window.customElements.whenDefined('pkt-icon')
 
     expect(getAllByText('Home')).toBeTruthy()
     expect(getAllByText('Products')).toBeTruthy()
@@ -74,7 +70,6 @@ describe('PktBreadcrumbs Component', () => {
 
   it('renders with no wcag errors with axe', async () => {
     const { container } = render(<PktBreadcrumbs breadcrumbs={breadcrumbs} navigationType="anchor" />)
-    await window.customElements.whenDefined('pkt-icon')
     const results = await axe(container)
 
     expect(results).toHaveNoViolations()

package/src/components/button/Button.tsx

@@ -8,7 +8,10 @@ declare global {
   }
 }
 
-window.pktAnimationPath = window.pktAnimationPath || 'https://punkt-cdn.oslo.kommune.no/latest/animations/'
+if (typeof window !== 'undefined') {
+  window.pktAnimationPath =
+    window.pktAnimationPath || 'https://punkt-cdn.oslo.kommune.no/latest/animations/'
+}
 
 export interface IPktButton extends ButtonHTMLAttributes<HTMLButtonElement> {
   iconName?: string

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'