@oslokommune/punkt-react 16.3.0 → 16.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "16.3.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.3.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.3.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": "3561a39e6329e3fc85d558d89cf20b58aa410d24"
+  "gitHead": "7ea157177224bb319ade35eb479b90e10940fdc6"
 }

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()}