@oslokommune/punkt-react 16.2.0 → 16.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "16.2.0",
+  "version": "16.4.0",
   "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.2.0",
+    "@oslokommune/punkt-elements": "^16.4.0",
     "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-hook-form": "^7.53.0"
@@ -50,7 +50,7 @@
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.37.0",
     "@oslokommune/punkt-assets": "^16.0.0",
-    "@oslokommune/punkt-css": "^16.2.0",
+    "@oslokommune/punkt-css": "^16.4.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -109,5 +109,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "554167272be133d1486fb9b041b3afe0980c5069"
+  "gitHead": "7ea157177224bb319ade35eb479b90e10940fdc6"
 }

package/src/components/accordion/AccordionItem.tsx

@@ -58,6 +58,9 @@ export const PktAccordionItem = forwardRef<HTMLDetailsElement, IPktAccordionItem
       const detailsElement = e.currentTarget
       const newOpenState = detailsElement.open
 
+      // Ignorer toggle-events som skyldes React-synkronisering av open-attributtet
+      if (newOpenState === isOpen) return
+
       if (controlledIsOpen === undefined) {
         setInternalIsOpen(newOpenState)
       }

package/src/components/backlink/BackLink.test.tsx

@@ -1,45 +1,79 @@
-import { fireEvent, render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import { cleanup, fireEvent, render } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { createRef } from 'react'
 import { vi } from 'vitest'
 
 import { PktBackLink } from './BackLink'
 
 expect.extend(toHaveNoViolations)
 
+afterEach(cleanup)
+
 describe('PktBackLink', () => {
-  it('renders with default text and href', async () => {
+  test('renders with default text and href', () => {
     const { getByRole } = render(<PktBackLink />)
-    await window.customElements.whenDefined('pkt-backlink')
     const link = getByRole('link')
-    await expect(link.textContent).toBe('Forsiden')
-    await expect(link.getAttribute('href')).toBe('/')
+    expect(link).toHaveTextContent('Forsiden')
+    expect(link).toHaveAttribute('href', '/')
   })
 
-  it('renders with custom text and href', async () => {
+  test('renders with custom text and href', () => {
     const { getByRole } = render(<PktBackLink href="/custom-url" text="Custom Text" />)
-    await window.customElements.whenDefined('pkt-backlink')
     const link = getByRole('link')
-    await expect(link.textContent).toBe('Custom Text')
-    await expect(link.getAttribute('href')).toBe('/custom-url')
+    expect(link).toHaveTextContent('Custom Text')
+    expect(link).toHaveAttribute('href', '/custom-url')
   })
 
-  it('calls onClick when clicked', async () => {
+  test('calls onClick when clicked', () => {
     const onClickMock = vi.fn()
     const { getByText } = render(<PktBackLink text="Back" onClick={onClickMock} />)
-    await window.customElements.whenDefined('pkt-backlink')
-    const link = getByText('Back')
-    await fireEvent.click(link)
+    fireEvent.click(getByText('Back'))
+    expect(onClickMock).toHaveBeenCalledTimes(1)
+  })
 
-    await expect(onClickMock).toHaveBeenCalledTimes(1)
+  test('renders with default aria-label on nav', () => {
+    const { container } = render(<PktBackLink />)
+    const nav = container.querySelector('nav')
+    expect(nav).toHaveAttribute('aria-label', 'Gå tilbake til forrige side')
+  })
+
+  test('renders with custom aria-label on nav', () => {
+    const { container } = render(<PktBackLink ariaLabel="Tilbake til oversikt" />)
+    const nav = container.querySelector('nav')
+    expect(nav).toHaveAttribute('aria-label', 'Tilbake til oversikt')
+  })
+
+  test('forwards ref to nav element', () => {
+    const ref = createRef<HTMLElement>()
+    render(<PktBackLink ref={ref} />)
+    expect(ref.current).toBeInstanceOf(HTMLElement)
+    expect(ref.current?.tagName).toBe('NAV')
+  })
+
+  test('supports custom renderLink', () => {
+    const { getByRole } = render(
+      <PktBackLink
+        href="/test"
+        text="Tilbake"
+        renderLink={({ href, className, children }) => (
+          <button data-href={href} className={className}>
+            {children}
+          </button>
+        )}
+      />,
+    )
+    const button = getByRole('button')
+    expect(button).toHaveAttribute('data-href', '/test')
+    expect(button).toHaveTextContent('Tilbake')
   })
 
   describe('accessibility', () => {
-    it('renders with no wcag errors with axe', async () => {
+    test('renders with no wcag errors with axe', async () => {
       const { container } = render(<PktBackLink text="Tilbake" href="/" />)
-
       const results = await axe(container)
-
-      await expect(results).toHaveNoViolations()
+      expect(results).toHaveNoViolations()
     })
   })
 })

package/src/components/backlink/BackLink.tsx

@@ -1,24 +1,50 @@
 'use client'
 
-import { createComponent } from '@lit/react'
-import { type IPktBackLink as IPktElBackLink, PktBackLink as PktElBackLink } from '@oslokommune/punkt-elements'
-// eslint-disable-next-line no-restricted-syntax -- React is required for createComponent
-import React, { AnchorHTMLAttributes, ForwardRefExoticComponent, LegacyRef, MouseEventHandler } from 'react'
+import { AnchorHTMLAttributes, forwardRef, ReactNode, Ref } from 'react'
 
-type ExtendedBackLink = Omit<IPktElBackLink, 'text'> & AnchorHTMLAttributes<HTMLAnchorElement>
+import { PktIcon } from '../icon/Icon'
 
-export interface IPktBackLink extends ExtendedBackLink {
+export interface IPktBackLink extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+  href?: string
   text?: string
-  ref?: LegacyRef<HTMLAnchorElement>
   ariaLabel?: string
-  onClick?: MouseEventHandler<HTMLAnchorElement>
+  renderLink?: (args: {
+    href: string
+    className: string
+    children: ReactNode
+    props: AnchorHTMLAttributes<HTMLAnchorElement>
+  }) => ReactNode
+  ref?: Ref<HTMLElement>
 }
 
-export const PktBackLink = createComponent({
-  tagName: 'pkt-backlink',
-  elementClass: PktElBackLink,
-  react: React,
-  displayName: 'PktBackLink',
-}) as ForwardRefExoticComponent<IPktBackLink>
+export const PktBackLink = forwardRef<HTMLElement, IPktBackLink>(
+  ({ href = '/', text = 'Forsiden', ariaLabel, renderLink, ...props }, ref) => {
+    const linkChildren = (
+      <>
+        <PktIcon className="pkt-back-link__icon pkt-icon pkt-link__icon" name="chevron-thin-left" aria-hidden="true" />
+        <span className="pkt-back-link__text">{text}</span>
+      </>
+    )
+
+    const linkRenderer =
+      renderLink ||
+      (({ href, className, children, props }) => (
+        <a href={href} className={className} {...props}>
+          {children}
+        </a>
+      ))
+
+    return (
+      <nav className="pkt-back-link" aria-label={ariaLabel || 'Gå tilbake til forrige side'} ref={ref}>
+        {linkRenderer({
+          href,
+          className: 'pkt-link pkt-link--icon-left',
+          children: linkChildren,
+          props,
+        })}
+      </nav>
+    )
+  },
+)
 
 PktBackLink.displayName = 'PktBackLink'

package/src/components/card/Card.tsx

@@ -4,7 +4,6 @@ import classNames from 'classnames'
 import { forwardRef, HTMLAttributes, ReactNode, Ref } from 'react'
 import type { TCardSkin, TLayout } from 'shared-types'
 
-import { PktIcon } from '../icon/Icon'
 import { PktTag } from '../tag/Tag'
 
 export type { TCardSkin, TLayout }
@@ -76,8 +75,7 @@ export const PktCard = forwardRef<HTMLDivElement, IPktCard>(
       'pkt-card--border-on-hover': borderOnHover,
     })
 
-    const ariaLabelLenke =
-      ariaLabel?.trim() || (heading ? `${heading} lenkekort` : 'lenkekort')
+    const ariaLabelLenke = ariaLabel?.trim() || (heading ? `${heading} lenkekort` : 'lenkekort')
     const ariaLabelVanlig = ariaLabel?.trim() || (heading ? heading : 'kort')
 
     const HeadingTag = `h${headingLevel}` as keyof JSX.IntrinsicElements
@@ -168,11 +166,7 @@ export const PktCard = forwardRef<HTMLDivElement, IPktCard>(
 
     return (
       <div ref={ref} className={classNames('pkt-card-root', className)} style={{ display: 'block', width: '100%' }}>
-        <article
-          {...props}
-          className={classes}
-          aria-label={clickCardLink ? ariaLabelLenke : ariaLabelVanlig}
-        >
+        <article {...props} className={classes} aria-label={clickCardLink ? ariaLabelLenke : ariaLabelVanlig}>
           {renderImage()}
           <div className="pkt-card__wrapper">
             {tagPosition === 'top' && renderTags()}

package/src/components/modal/Modal.test.tsx

@@ -11,35 +11,40 @@ expect.extend(toHaveNoViolations)
 afterEach(cleanup)
 
 describe('PktModal', () => {
-  test('ref works correctly', async () => {
-    const ref = createRef<HTMLElement>()
+  test('ref works correctly', () => {
+    const ref = createRef<HTMLDialogElement>()
     const { unmount } = render(
       <PktModal ref={ref} headingText="Modal Title">
         modal content
       </PktModal>,
     )
-    await window.customElements.whenDefined('pkt-modal')
-    expect(ref.current).toBeInstanceOf(HTMLElement)
+    expect(ref.current).toBeInstanceOf(HTMLDialogElement)
     unmount()
     expect(ref.current).toBeNull()
   })
 
-  test('renders with the specified size', async () => {
+  test('renders with the specified size', () => {
     const { container } = render(
       <PktModal headingText="Modal Title" size="small">
         modal content
       </PktModal>,
     )
-    await window.customElements.whenDefined('pkt-modal')
     const dialogElement = container.querySelector('dialog.pkt-modal')
     expect(dialogElement).toHaveClass('pkt-modal--small')
   })
 
   test('renders with no wcag errors with axe', async () => {
     const { container } = render(<PktModal headingText="Modal Title"></PktModal>)
-    await window.customElements.whenDefined('pkt-modal')
     const results = await axe(container)
 
     expect(results).toHaveNoViolations()
   })
+
+  test('renders with default props', () => {
+    const { container } = render(<PktModal>innhold</PktModal>)
+    const dialog = container.querySelector('dialog.pkt-modal')
+    expect(dialog).toBeInTheDocument()
+    expect(dialog).toHaveClass('pkt-modal--medium')
+  })
+
 })

package/src/components/modal/Modal.tsx

@@ -1,13 +1,22 @@
 'use client'
 
-import { createComponent } from '@lit/react'
-import { PktModal as PktElModal } from '@oslokommune/punkt-elements'
-// eslint-disable-next-line no-restricted-syntax -- React is required for createComponent
-import React, { FC, ForwardedRef, forwardRef, type ReactElement } from 'react'
+import classNames from 'classnames'
+import {
+  ForwardedRef,
+  forwardRef,
+  HTMLAttributes,
+  ReactNode,
+  Ref,
+  useCallback,
+  useEffect,
+  useRef,
+} from 'react'
 
-import type { PktElConstructor,PktElType } from '@/interfaces/IPktElements'
+import { PktButton } from '../button/Button'
 
-export interface IPktModal extends PktElType {
+export interface IPktModal
+  extends Omit<HTMLAttributes<HTMLDialogElement>, 'onClose' | 'open'> {
+  open?: boolean
   headingText?: string
   hideCloseButton?: boolean
   closeOnBackdropClick?: boolean
@@ -17,21 +26,148 @@ export interface IPktModal extends PktElType {
   variant?: 'dialog' | 'drawer'
   drawerPosition?: 'left' | 'right'
   transparentBackdrop?: boolean
+  onClose?: () => void
+  children?: ReactNode
+  ref?: Ref<HTMLDialogElement>
 }
-const LitComponent: FC<IPktModal> = createComponent({
-  tagName: 'pkt-modal',
-  elementClass: PktElModal as PktElConstructor<HTMLElement>,
-  react: React,
-  displayName: 'PktModal',
-  events: {},
-})
-
-export const PktModal: FC<IPktModal> = forwardRef(
-  ({ children, ...props }: IPktModal, ref: ForwardedRef<HTMLElement>): ReactElement => {
+
+export const PktModal = forwardRef(
+  (
+    {
+      children,
+      className,
+      open = false,
+      headingText = '',
+      hideCloseButton = false,
+      closeOnBackdropClick = false,
+      size = 'medium',
+      removePadding = false,
+      closeButtonSkin = 'blue',
+      variant = 'dialog',
+      drawerPosition = 'right',
+      transparentBackdrop = false,
+      onClose,
+      ...props
+    }: IPktModal,
+    ref: ForwardedRef<HTMLDialogElement>,
+  ) => {
+    const internalRef = useRef<HTMLDialogElement>(null)
+    const dialogRef = (ref as React.RefObject<HTMLDialogElement>) || internalRef
+
+    const close = useCallback(() => {
+      if (!dialogRef.current?.open) return
+      dialogRef.current?.close()
+      onClose?.()
+    }, [dialogRef, onClose])
+
+    // Synkroniser scroll-lock med dialogens faktiske åpen/lukket-tilstand
+    useEffect(() => {
+      const dialog = dialogRef.current
+      if (!dialog) return
+
+      const observer = new MutationObserver(() => {
+        if (dialog.open) {
+          document.body.classList.add('pkt-modal--open')
+        } else {
+          document.body.classList.remove('pkt-modal--open')
+        }
+      })
+      observer.observe(dialog, { attributes: true, attributeFilter: ['open'] })
+      return () => observer.disconnect()
+    }, [dialogRef])
+
+    // Deklarativ åpne/lukke via open-prop
+    useEffect(() => {
+      if (open) {
+        if (!dialogRef.current?.open) {
+          dialogRef.current?.showModal()
+        }
+      } else {
+        if (dialogRef.current?.open) {
+          dialogRef.current?.close()
+        }
+      }
+    }, [open, dialogRef])
+
+    const handleBackdropClick = useCallback(
+      (event: React.MouseEvent<HTMLDialogElement>) => {
+        if (closeOnBackdropClick && event.target === dialogRef.current) {
+          close()
+        }
+      },
+      [closeOnBackdropClick, dialogRef, close],
+    )
+
+    const handleNativeClose = useCallback(() => {
+      onClose?.()
+    }, [onClose])
+
+    const isCloseButtonSkinDefault = closeButtonSkin === 'blue'
+
+    const classes = classNames(
+      {
+        'pkt-modal': true,
+        'pkt-modal--removePadding': removePadding,
+        'pkt-modal--noHeadingText': !headingText,
+        'pkt-modal--noShadow': closeButtonSkin === 'yellow-filled',
+        'pkt-modal--transparentBackdrop': transparentBackdrop,
+        [`pkt-modal--${size}`]: size,
+        [`pkt-modal__${variant}`]: variant,
+        [`pkt-modal__drawer--${drawerPosition}`]: variant === 'drawer',
+      },
+      className,
+    )
+
     return (
-      <LitComponent {...props} ref={ref}>
-        <div className="pkt-contents">{children}</div>
-      </LitComponent>
+      <dialog
+        {...props}
+        className={classes}
+        ref={dialogRef}
+        aria-labelledby={headingText ? 'pkt-modal__headingText' : undefined}
+        aria-describedby="pkt-modal__content"
+        onClick={handleBackdropClick}
+        onClose={handleNativeClose}
+      >
+        <div className="pkt-modal__wrapper">
+          {(headingText || !hideCloseButton) && (
+            <div className="pkt-modal__header">
+              <div className="pkt-modal__header-background" />
+              {headingText ? (
+                <h1 id="pkt-modal__headingText" className="pkt-modal__headingText pkt-txt-24">
+                  {headingText}
+                </h1>
+              ) : (
+                <div className="pkt-modal__headingText" />
+              )}
+              {!hideCloseButton ? (
+                <div
+                  className={classNames('pkt-modal__closeButton', {
+                    [`pkt-modal__closeButton--${closeButtonSkin}`]: true,
+                  })}
+                >
+                  <PktButton
+                    onClick={close}
+                    aria-label="close"
+                    iconName="close"
+                    variant="icon-only"
+                    size="medium"
+                    skin={isCloseButtonSkinDefault ? 'tertiary' : 'primary'}
+                  >
+                    Lukk
+                  </PktButton>
+                </div>
+              ) : (
+                <div className="pkt-modal__noCloseButton" />
+              )}
+            </div>
+          )}
+          <div className="pkt-modal__container">
+            <div id="pkt-modal__content" className="pkt-modal__content pkt-txt-18-light">
+              {children}
+            </div>
+          </div>
+        </div>
+      </dialog>
     )
   },
 )