@oslokommune/punkt-react 12.42.10 → 12.42.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "12.42.10",
+  "version": "12.42.12",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -38,7 +38,7 @@
   "dependencies": {
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@lit/react": "^1.0.7",
-    "@oslokommune/punkt-elements": "^12.42.10",
+    "@oslokommune/punkt-elements": "^12.42.12",
     "angular-html-parser": "^6.0.2",
     "html-format": "^1.1.7",
     "prettier": "^3.3.3",
@@ -48,8 +48,8 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
-    "@oslokommune/punkt-assets": "^12.42.10",
-    "@oslokommune/punkt-css": "^12.42.10",
+    "@oslokommune/punkt-assets": "^12.42.11",
+    "@oslokommune/punkt-css": "^12.42.12",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -112,5 +112,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "cb8b5335059c3069d06dcf8ae5452587ab50faf9"
+  "gitHead": "e265af504ef67134a0e86fbbcda012a78b1c6ab3"
 }

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

@@ -23,9 +23,9 @@ describe('PktHeading', () => {
     await window.customElements.whenDefined('pkt-heading')
 
     const headings = container.querySelectorAll('pkt-heading')
-    expect(headings[0].querySelector('h1')).toBeInTheDocument()
-    expect(headings[1].querySelector('h2')).toBeInTheDocument()
-    expect(headings[2].querySelector('h3')).toBeInTheDocument()
+    expect(headings[0]).toHaveAttribute('aria-level', '1')
+    expect(headings[1]).toHaveAttribute('aria-level', '2')
+    expect(headings[2]).toHaveAttribute('aria-level', '3')
   })
 
   test('renders with different sizes', async () => {
@@ -33,9 +33,8 @@ describe('PktHeading', () => {
     const { container } = render(<PktHeading size="xlarge">Large Heading</PktHeading>)
     await window.customElements.whenDefined('pkt-heading')
 
-    const heading = container.querySelector('.pkt-heading')
     const headingElement = container.querySelector('pkt-heading')
-    expect(heading).toHaveClass('pkt-heading--xlarge')
+    expect(headingElement).toHaveClass('pkt-heading--xlarge')
     expect(headingElement).toHaveAttribute('size', 'xlarge')
   })
 
@@ -43,23 +42,16 @@ describe('PktHeading', () => {
     const { container } = render(<PktHeading visuallyHidden>Hidden Heading</PktHeading>)
     await window.customElements.whenDefined('pkt-heading')
 
-    const heading = container.querySelector('.pkt-heading')
     const headingElement = container.querySelector('pkt-heading')
-    expect(heading).toHaveClass('pkt-sr-only')
+    expect(headingElement).toHaveClass('pkt-sr-only')
     expect(headingElement).toHaveAttribute('visuallyHidden')
   })
 
-  test('renders with noSpacing and align props', async () => {
-    const { container } = render(
-      <PktHeading noSpacing align="center">
-        Center Heading
-      </PktHeading>,
-    )
+  test('renders with align props', async () => {
+    const { container } = render(<PktHeading align="center">Center Heading</PktHeading>)
     await window.customElements.whenDefined('pkt-heading')
 
-    const heading = container.querySelector('.pkt-heading')
     const headingElement = container.querySelector('pkt-heading')
-    expect(heading).toHaveClass('pkt-heading--noSpacing')
     expect(headingElement).toHaveAttribute('align', 'center')
   })
 

package/src/components/heading/Heading.tsx

@@ -2,16 +2,13 @@
 
 import { createComponent } from '@lit/react'
 import { FC, forwardRef } from 'react'
-import { PktElConstructor, PktElType } from '@/interfaces/IPktElements'
-import { PktHeading as PktElHeading, TPktHeadingLevel, TPktHeadingSize } from '@oslokommune/punkt-elements'
+import { PktElConstructor } from '@/interfaces/IPktElements'
+import { PktHeading as PktElHeading, IPktHeading as IPktElHeading } from '@oslokommune/punkt-elements'
 import React, { ForwardRefExoticComponent } from 'react'
 
-export interface IPktHeading extends PktElType {
-  level?: TPktHeadingLevel
-  size?: TPktHeadingSize
-  visuallyHidden?: boolean
-  noSpacing?: boolean
-  align?: 'start' | 'center' | 'end'
+export interface IPktHeading extends IPktElHeading {
+  children?: React.ReactNode | React.ReactNode[]
+  ref?: React.LegacyRef<HTMLElement>
 }
 
 const LitComponent: FC<IPktHeading> = createComponent({