@oslokommune/punkt-react 12.34.4 → 12.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "12.34.4",
+  "version": "12.35.0",
   "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.34.4",
+    "@oslokommune/punkt-elements": "^12.35.0",
     "angular-html-parser": "^6.0.2",
     "html-format": "^1.1.7",
     "prettier": "^3.3.3",
@@ -49,7 +49,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
     "@oslokommune/punkt-assets": "^12.34.4",
-    "@oslokommune/punkt-css": "^12.34.4",
+    "@oslokommune/punkt-css": "^12.35.0",
     "@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": "437c77a182d85a710e0d5adbf492ea7585a0d472"
+  "gitHead": "897a80f0520cca735bc514c074d11a7e750079cc"
 }

package/src/components/accordion/Accordion.tsx

@@ -1,7 +1,7 @@
 import { PktElConstructor, PktElType } from '@/interfaces/IPktElements'
 import { createComponent } from '@lit/react'
 import React, { ForwardRefExoticComponent, LegacyRef } from 'react'
-import { FC, ReactNode, Ref, forwardRef } from 'react'
+import { FC, forwardRef } from 'react'
 import { PktAccordion as PktElAccordion } from '@oslokommune/punkt-elements'
 import { TPktAccordionSkin } from '@oslokommune/punkt-elements'
 
@@ -28,14 +28,12 @@ const LitComponent: FC<IPktAccordion> = createComponent({
   displayName: 'PktAccordion',
 }) as ForwardRefExoticComponent<IPktAccordion>
 
-export const PktAccordion: FC<IPktAccordion> = forwardRef(
-  ({ compact = false, skin = 'borderless', ariaLabelledBy, children, ...props }: IPktAccordion, ref) => {
-    return (
-      <LitComponent data-testid="pkt-accordion" {...props} ref={ref} aria-labelledby={ariaLabelledBy}>
-        <div className="pkt-contents">{children}</div>
-      </LitComponent>
-    )
-  },
-)
+export const PktAccordion: FC<IPktAccordion> = forwardRef(({ children, ...props }: IPktAccordion, ref) => {
+  return (
+    <LitComponent data-testid="pkt-accordion" {...props} ref={ref}>
+      <div className="pkt-contents">{children}</div>
+    </LitComponent>
+  )
+})
 
 PktAccordion.displayName = 'PktAccordion'

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

@@ -0,0 +1,78 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { PktHeading } from './Heading'
+import { render, screen, waitFor } from '@testing-library/react'
+import React, { createRef } from 'react'
+
+expect.extend(toHaveNoViolations)
+
+describe('PktHeading', () => {
+  test('renders without errors', async () => {
+    render(<PktHeading />)
+    await window.customElements.whenDefined('pkt-heading')
+  })
+
+  test('renders with different levels', async () => {
+    const { container } = render(
+      <>
+        <PktHeading level={1}>Heading 1</PktHeading>
+        <PktHeading level={2}>Heading 2</PktHeading>
+        <PktHeading level={3}>Heading 3</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()
+  })
+
+  test('renders with different sizes', async () => {
+    const ref = createRef<any>()
+    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).toHaveAttribute('size', 'xlarge')
+  })
+
+  test('renders with visually hidden prop', async () => {
+    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).toHaveAttribute('visuallyHidden')
+  })
+
+  test('renders with noSpacing and align props', async () => {
+    const { container } = render(
+      <PktHeading noSpacing 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')
+  })
+
+  describe('accessibility', () => {
+    it('renders with no wcag errors with axe', async () => {
+      const { container } = render(
+        <PktHeading level={1} size="large">
+          Accessible Heading
+        </PktHeading>,
+      )
+      await window.customElements.whenDefined('pkt-heading')
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/heading/Heading.tsx

@@ -0,0 +1,30 @@
+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 React, { ForwardRefExoticComponent } from 'react'
+
+export interface IPktHeading extends PktElType {
+  level?: TPktHeadingLevel
+  size?: TPktHeadingSize
+  visuallyHidden?: boolean
+  noSpacing?: boolean
+  align?: 'start' | 'center' | 'end'
+}
+
+const LitComponent: FC<IPktHeading> = createComponent({
+  tagName: 'pkt-heading',
+  elementClass: PktElHeading as PktElConstructor<HTMLElement>,
+  react: React,
+  displayName: 'PktHeading',
+}) as ForwardRefExoticComponent<IPktHeading>
+
+export const PktHeading: FC<IPktHeading> = forwardRef(({ children, ...props }: IPktHeading, ref) => {
+  return (
+    <LitComponent data-testid="pkt-heading" {...props} ref={ref}>
+      {children}
+    </LitComponent>
+  )
+})
+
+PktHeading.displayName = 'PktHeading'