@oslokommune/punkt-react 16.18.0 → 16.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "16.18.0",
+  "version": "16.19.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.18.0",
+    "@oslokommune/punkt-elements": "^16.19.0",
     "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": "693c10d8d7a30c6b5c8acb6a7cb072b0afe50554"
+  "gitHead": "e90194e9a4c25a6b7a5370c05889e262b4e6cfb0"
 }

package/src/components/heading/Heading.test.tsx

@@ -1,20 +1,19 @@
 import '@testing-library/jest-dom'
 
-import { render, screen, waitFor } from '@testing-library/react'
+import { render } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
-import { createRef } from 'react'
 
 import { PktHeading } from './Heading'
 
 expect.extend(toHaveNoViolations)
 
 describe('PktHeading', () => {
-  test('renders without errors', async () => {
-    render(<PktHeading />)
-    await window.customElements.whenDefined('pkt-heading')
+  test('renders without errors', () => {
+    const { container } = render(<PktHeading />)
+    expect(container.querySelector('h2')).toBeInTheDocument()
   })
 
-  test('renders with different levels', async () => {
+  test('renders with different levels', () => {
     const { container } = render(
       <>
         <PktHeading level={1}>Heading 1</PktHeading>
@@ -22,39 +21,41 @@ describe('PktHeading', () => {
         <PktHeading level={3}>Heading 3</PktHeading>
       </>,
     )
-    await window.customElements.whenDefined('pkt-heading')
 
-    const headings = container.querySelectorAll('pkt-heading')
-    expect(headings[0]).toHaveAttribute('aria-level', '1')
-    expect(headings[1]).toHaveAttribute('aria-level', '2')
-    expect(headings[2]).toHaveAttribute('aria-level', '3')
+    expect(container.querySelector('h1')).toHaveTextContent('Heading 1')
+    expect(container.querySelector('h2')).toHaveTextContent('Heading 2')
+    expect(container.querySelector('h3')).toHaveTextContent('Heading 3')
   })
 
-  test('renders with different sizes', async () => {
-    const ref = createRef<any>()
+  test('applies default size class based on level', () => {
+    const { container } = render(<PktHeading level={1}>Heading</PktHeading>)
+    expect(container.querySelector('h1')).toHaveClass('pkt-heading--xlarge')
+  })
+
+  test('renders with explicit size', () => {
     const { container } = render(<PktHeading size="xlarge">Large Heading</PktHeading>)
-    await window.customElements.whenDefined('pkt-heading')
+    const heading = container.querySelector('h2')
+    expect(heading).toHaveClass('pkt-heading--xlarge')
+  })
 
-    const headingElement = container.querySelector('pkt-heading')
-    expect(headingElement).toHaveClass('pkt-heading--xlarge')
-    expect(headingElement).toHaveAttribute('size', 'xlarge')
+  test('renders with explicit weight', () => {
+    const { container } = render(<PktHeading weight="bold">Bold Heading</PktHeading>)
+    expect(container.querySelector('h2')).toHaveClass('pkt-heading--fw-bold')
   })
 
-  test('renders with visually hidden prop', async () => {
+  test('renders with visually hidden prop', () => {
     const { container } = render(<PktHeading visuallyHidden>Hidden Heading</PktHeading>)
-    await window.customElements.whenDefined('pkt-heading')
-
-    const headingElement = container.querySelector('pkt-heading')
-    expect(headingElement).toHaveClass('pkt-sr-only')
-    expect(headingElement).toHaveAttribute('visuallyHidden')
+    expect(container.querySelector('h2')).toHaveClass('pkt-sr-only')
   })
 
-  test('renders with align props', async () => {
+  test('renders with align prop', () => {
     const { container } = render(<PktHeading align="center">Center Heading</PktHeading>)
-    await window.customElements.whenDefined('pkt-heading')
+    expect(container.querySelector('h2')).toHaveClass('pkt-heading--center')
+  })
 
-    const headingElement = container.querySelector('pkt-heading')
-    expect(headingElement).toHaveAttribute('align', 'center')
+  test('always carries the pkt-heading base class', () => {
+    const { container } = render(<PktHeading>Heading</PktHeading>)
+    expect(container.querySelector('h2')).toHaveClass('pkt-heading')
   })
 
   describe('accessibility', () => {
@@ -64,7 +65,6 @@ describe('PktHeading', () => {
           Accessible Heading
         </PktHeading>,
       )
-      await window.customElements.whenDefined('pkt-heading')
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })

package/src/components/heading/Heading.tsx

@@ -1,29 +1,77 @@
 'use client'
 
-import { createComponent } from '@lit/react'
-import { IPktHeading as IPktElHeading, PktHeading as PktElHeading } from '@oslokommune/punkt-elements'
-// eslint-disable-next-line no-restricted-syntax -- React is required for createComponent
-import React, { FC, forwardRef, ForwardRefExoticComponent, type LegacyRef, type ReactNode } from 'react'
+import classNames from 'classnames'
+import { forwardRef, HTMLAttributes, ReactNode } from 'react'
+import type { THeadingLevel, THeadingSize, THeadingWeight } from 'shared-types'
 
-import { PktElConstructor } from '@/interfaces/IPktElements'
+export type TPktHeadingLevel = THeadingLevel
+export type TPktHeadingSize = THeadingSize
+export type TPktHeadingWeight = THeadingWeight
 
-export interface IPktHeading extends IPktElHeading {
-  children?: ReactNode | ReactNode[]
-  ref?: LegacyRef<HTMLElement>
+export interface IPktHeading extends HTMLAttributes<HTMLHeadingElement> {
+  size?: TPktHeadingSize
+  level?: TPktHeadingLevel
+  weight?: TPktHeadingWeight
+  visuallyHidden?: boolean
+  align?: 'start' | 'center' | 'end'
+  children?: ReactNode
 }
 
-const LitComponent: FC<IPktHeading> = createComponent({
-  tagName: 'pkt-heading',
-  elementClass: PktElHeading as PktElConstructor<HTMLElement>,
-  react: React,
-  displayName: 'PktHeading',
-}) as ForwardRefExoticComponent<IPktHeading>
+const defaultSizeForLevel = (level: TPktHeadingLevel): TPktHeadingSize => {
+  switch (level) {
+    case 1:
+      return 'xlarge'
+    case 2:
+      return 'large'
+    case 3:
+      return 'medium'
+    case 4:
+      return 'small'
+    case 5:
+    case 6:
+      return 'xsmall'
+    default:
+      return 'medium'
+  }
+}
+
+const defaultWeightForLevel = (level: TPktHeadingLevel): TPktHeadingWeight => {
+  switch (level) {
+    case 1:
+    case 2:
+      return 'regular'
+    case 3:
+    case 4:
+    case 5:
+    case 6:
+      return 'medium'
+    default:
+      return 'medium'
+  }
+}
+
+export const PktHeading = forwardRef<HTMLHeadingElement, IPktHeading>(function PktHeading(
+  { level = 2, size, weight, visuallyHidden, align, className, children, ...rest },
+  ref,
+) {
+  const effectiveSize = size ?? defaultSizeForLevel(level)
+  const effectiveWeight = weight ?? defaultWeightForLevel(level)
+
+  const classes = classNames(
+    'pkt-heading',
+    `pkt-heading--${effectiveSize}`,
+    `pkt-heading--fw-${effectiveWeight}`,
+    align && `pkt-heading--${align}`,
+    visuallyHidden && 'pkt-sr-only',
+    className,
+  )
+
+  const Tag = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 
-export const PktHeading: FC<IPktHeading> = forwardRef(({ children, ...props }: IPktHeading, ref) => {
   return (
-    <LitComponent data-testid="pkt-heading" {...props} ref={ref}>
+    <Tag {...rest} ref={ref} className={classes} data-testid="pkt-heading">
       {children}
-    </LitComponent>
+    </Tag>
   )
 })