@oslokommune/punkt-react 13.1.2 → 13.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "13.1.2",
+  "version": "13.2.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": "^13.1.2",
+    "@oslokommune/punkt-elements": "^13.2.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": "^13.0.0",
-    "@oslokommune/punkt-css": "^13.1.2",
+    "@oslokommune/punkt-css": "^13.2.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": "cb98f3d45e891775f449eb4b78b3ae8cab40725f"
+  "gitHead": "36713c6c03feb884203fd9def6d137402c212eb0"
 }

package/src/components/accordion/Accordion.test.tsx

@@ -2,13 +2,13 @@ import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import { PktAccordion } from './Accordion'
 import { PktAccordionItem } from './AccordionItem'
-import { render, screen, waitFor } from '@testing-library/react'
+import { render, screen, fireEvent } from '@testing-library/react'
 import React, { createRef } from 'react'
 
 expect.extend(toHaveNoViolations)
 
 describe('PktAccordion', () => {
-  test('renders without errors', async () => {
+  test('renders without errors', () => {
     render(
       <PktAccordion>
         <PktAccordionItem id="render-id" title="test">
@@ -16,11 +16,10 @@ describe('PktAccordion', () => {
         </PktAccordionItem>
       </PktAccordion>,
     )
-    await window.customElements.whenDefined('pkt-icon')
     // Assert that the Accordion component renders without throwing any errors
   })
 
-  test('renders children', async () => {
+  test('renders children', () => {
     const mockToggleOpen = jest.fn()
     render(
       <PktAccordion>
@@ -32,7 +31,6 @@ describe('PktAccordion', () => {
         </PktAccordionItem>
       </PktAccordion>,
     )
-    await window.customElements.whenDefined('pkt-icon')
 
     // Assert that the Accordion component renders its children correctly
     expect(screen.getByText('Title 1')).toBeInTheDocument()
@@ -41,12 +39,11 @@ describe('PktAccordion', () => {
     expect(screen.getByText('Content 2')).toBeInTheDocument()
   })
 
-  test('applies compact and skin', async () => {
-    const ref = createRef<any>()
+  test('applies compact and skin classes', () => {
     const { container } = render(
       <>
         <h3 id="accordion-heading">Accordion Heading</h3>
-        <PktAccordion ref={ref}>
+        <PktAccordion compact skin="blue" ariaLabelledBy="accordion-heading" data-testid="accordion">
           <PktAccordionItem title="Title" id="item1">
             Content
           </PktAccordionItem>
@@ -54,48 +51,139 @@ describe('PktAccordion', () => {
       </>,
     )
 
-    // Wait for the element to be defined
-    await window.customElements.whenDefined('pkt-accordion')
-    await window.customElements.whenDefined('pkt-accordion-item')
+    const accordion = container.querySelector('[data-testid="pkt-accordion"]')!
+    expect(accordion).toBeInTheDocument()
+    expect(accordion).toHaveClass('pkt-accordion')
+    expect(accordion).toHaveClass('pkt-accordion--compact')
+    expect(accordion).toHaveClass('pkt-accordion--blue')
+    expect(accordion).toHaveAttribute('aria-labelledby', 'accordion-heading')
+  })
 
-    // Now manually set properties on the element
-    if (ref.current) {
-      ref.current.skin = 'blue'
-      ref.current.compact = true
-      await ref.current.updateComplete // Wait for Lit to update
-    }
+  test('forwards ref correctly', () => {
+    const ref = createRef<HTMLDivElement>()
+    render(
+      <PktAccordion ref={ref}>
+        <PktAccordionItem title="Title" id="item1">
+          Content
+        </PktAccordionItem>
+      </PktAccordion>,
+    )
 
-    const accordion = container.querySelector('pkt-accordion')!
-    expect(accordion).toBeInTheDocument()
-    expect(accordion).toHaveAttribute('compact') // compact reflected as boolean attribute
-    expect(accordion).toHaveAttribute('skin', 'blue')
+    expect(ref.current).toBeDefined()
+    expect(ref.current?.tagName).toBe('DIV')
+    expect(ref.current).toHaveClass('pkt-accordion')
   })
 })
 
 describe('PktAccordionItem', () => {
-  test('applies compact and skin', async () => {
-    const ref = createRef<any>()
+  test('applies compact and skin classes', () => {
     const { container } = render(
-      <>
-        <PktAccordionItem ref={ref} title="Title" id="item1" skin="blue" compact>
-          Content
-        </PktAccordionItem>
-      </>,
+      <PktAccordionItem title="Title" id="item1" skin="blue" compact>
+        Content
+      </PktAccordionItem>,
+    )
+
+    const details = container.querySelector('details')!
+    expect(details).toBeInTheDocument()
+    expect(details).toHaveClass('pkt-accordion-item')
+    expect(details).toHaveClass('pkt-accordion-item--blue')
+    expect(details).toHaveClass('pkt-accordion-item--compact')
+  })
+
+  test('renders with correct structure', () => {
+    const { container } = render(
+      <PktAccordionItem title="Test Title" id="test-item">
+        Test Content
+      </PktAccordionItem>,
+    )
+
+    const details = container.querySelector('details')!
+    const summary = details.querySelector('summary')!
+    const content = details.querySelector('.pkt-accordion-item__content')!
+    const contentInner = content.querySelector('.pkt-accordion-item__content-inner')!
+
+    expect(details).toHaveAttribute('id', 'test-item')
+    expect(summary).toHaveClass('pkt-accordion-item__title')
+    expect(summary).toHaveAttribute('id', 'pkt-accordion-item-summary-test-item')
+    expect(summary).toHaveTextContent('Test Title')
+    expect(content).toHaveAttribute('id', 'pkt-accordion-item__content-test-item')
+    expect(content).toHaveAttribute('role', 'region')
+    expect(contentInner).toHaveTextContent('Test Content')
+  })
+
+  test('handles defaultOpen prop', () => {
+    const { container } = render(
+      <PktAccordionItem title="Title" id="item1" defaultOpen>
+        Content
+      </PktAccordionItem>,
     )
 
-    // Wait for the element to be defined
-    await window.customElements.whenDefined('pkt-accordion-item')
+    const details = container.querySelector('details')!
+    expect(details).toHaveAttribute('open')
+  })
+
+  test('handles controlled isOpen prop', () => {
+    const { container, rerender } = render(
+      <PktAccordionItem title="Title" id="item1" isOpen={false}>
+        Content
+      </PktAccordionItem>,
+    )
+
+    const details = container.querySelector('details')!
+    expect(details).not.toHaveAttribute('open')
 
-    // Now manually set properties on the element
-    if (ref.current) {
-      ref.current.skin = 'blue'
-      ref.current.compact = true
-      ref.current.requestUpdate()
-      await ref.current.updateComplete
-    }
+    rerender(
+      <PktAccordionItem title="Title" id="item1" isOpen={true}>
+        Content
+      </PktAccordionItem>,
+    )
+
+    expect(details).toHaveAttribute('open')
+  })
+
+  test('calls onClick handler', () => {
+    const mockOnClick = jest.fn()
+    const { container } = render(
+      <PktAccordionItem title="Title" id="item1" onClick={mockOnClick}>
+        Content
+      </PktAccordionItem>,
+    )
 
     const details = container.querySelector('details')!
-    expect(details.classList.contains('pkt-accordion-item--blue')).toBe(true)
+    fireEvent.click(details)
+
+    // onClick is called after a setTimeout, so we need to wait
+    setTimeout(() => {
+      expect(mockOnClick).toHaveBeenCalledTimes(1)
+    }, 10)
+  })
+
+  test('forwards ref correctly', () => {
+    const ref = createRef<HTMLDetailsElement>()
+    render(
+      <PktAccordionItem ref={ref} title="Title" id="item1">
+        Content
+      </PktAccordionItem>,
+    )
+
+    expect(ref.current).toBeDefined()
+    expect(ref.current?.tagName).toBe('DETAILS')
+    expect(ref.current).toHaveClass('pkt-accordion-item')
+  })
+
+  test('renders PktIcon', async () => {
+    const { container } = render(
+      <PktAccordionItem title="Title" id="item1">
+        Content
+      </PktAccordionItem>,
+    )
+
+    await window.customElements.whenDefined('pkt-icon')
+    const icon = container.querySelector('pkt-icon')
+    expect(icon).toBeInTheDocument()
+    expect(icon).toHaveAttribute('name', 'chevron-thin-down')
+    expect(icon).toHaveClass('pkt-accordion-item__icon')
+    expect(icon).toHaveAttribute('aria-hidden', 'true')
   })
 })
 
@@ -111,7 +199,6 @@ describe('accessibility', () => {
         </PktAccordionItem>
       </PktAccordion>,
     )
-    await window.customElements.whenDefined('pkt-icon')
     const results = await axe(container)
     expect(results).toHaveNoViolations()
   })

package/src/components/accordion/Accordion.tsx

@@ -1,13 +1,10 @@
 'use client'
 
-import { PktElConstructor, PktElType } from '@/interfaces/IPktElements'
-import { createComponent } from '@lit/react'
-import React, { ForwardRefExoticComponent, LegacyRef } from 'react'
-import { FC, forwardRef } from 'react'
-import { PktAccordion as PktElAccordion } from '@oslokommune/punkt-elements'
-import { TPktAccordionSkin } from '@oslokommune/punkt-elements'
-
-export interface IPktAccordion extends PktElType {
+import React, { ReactNode, forwardRef, createContext, useContext } from 'react'
+
+export type TPktAccordionSkin = 'borderless' | 'outlined' | 'beige' | 'blue'
+
+export interface IPktAccordion {
   compact?: boolean
   /**
    * @default skin: "borderless"
@@ -17,25 +14,40 @@ export interface IPktAccordion extends PktElType {
    * @description A unique identifier to connect the accordion with a heading
    */
   ariaLabelledBy?: string
-  /**
-   * @description A unique identifier to connect the accordion with a heading
-   */
-  ref?: LegacyRef<HTMLElement>
+  children?: ReactNode
+  name?: string
+  className?: string
 }
 
-const LitComponent: FC<IPktAccordion> = createComponent({
-  tagName: 'pkt-accordion',
-  elementClass: PktElAccordion as PktElConstructor<HTMLElement>,
-  react: React,
-  displayName: 'PktAccordion',
-}) as ForwardRefExoticComponent<IPktAccordion>
-
-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>
-  )
-})
+// Send name som context til AccordionItem-children
+const AccordionContext = createContext<{ name?: string }>({})
+
+export const useAccordionContext = () => useContext(AccordionContext)
+
+export const PktAccordion = forwardRef<HTMLDivElement, IPktAccordion>(
+  ({ compact = false, skin = 'borderless', ariaLabelledBy, children, name, className }, ref) => {
+    const accordionClasses = [
+      'pkt-accordion',
+      compact && 'pkt-accordion--compact',
+      skin && `pkt-accordion--${skin}`,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+
+    return (
+      <AccordionContext.Provider value={{ name }}>
+        <div
+          ref={ref}
+          className={accordionClasses}
+          data-testid="pkt-accordion"
+          aria-labelledby={ariaLabelledBy || undefined}
+        >
+          {children}
+        </div>
+      </AccordionContext.Provider>
+    )
+  },
+)
 
 PktAccordion.displayName = 'PktAccordion'

package/src/components/accordion/AccordionItem.tsx

@@ -1,38 +1,102 @@
 'use client'
 
-import React, { FC, ForwardRefExoticComponent, LegacyRef, ReactElement, forwardRef } from 'react'
-import { PktElConstructor, PktElType, PktEventWithTarget } from '@/interfaces/IPktElements'
-import { createComponent, EventName } from '@lit/react'
-import { PktAccordionItem as PktElAccordionItem } from '@oslokommune/punkt-elements'
-import { TPktAccordionSkin } from '@oslokommune/punkt-elements'
+import React, { ReactNode, useState, useEffect, forwardRef } from 'react'
+import { PktIcon } from '../icon/Icon'
+import { useAccordionContext } from './Accordion'
 
-export interface IPktAccordionItem extends Omit<PktElType, 'onClick'> {
-  compact?: boolean
-  skin?: TPktAccordionSkin
-  title?: string
+export type TPktAccordionSkin = 'borderless' | 'outlined' | 'beige' | 'blue'
+
+export interface IPktAccordionItem {
   defaultOpen?: boolean
+  id: string
+  title: string | ReactNode
+  skin?: TPktAccordionSkin
+  compact?: boolean
   isOpen?: boolean
-  id?: string
-  onClick?: (e: PktEventWithTarget) => void
-  ref?: LegacyRef<HTMLElement>
+  children?: ReactNode
+  name?: string
+  className?: string
+  onClick?: (e: React.MouseEvent<HTMLDetailsElement>) => void
+  onToggle?: (e: React.SyntheticEvent<HTMLDetailsElement>) => void
 }
 
-const LitComponent: FC<IPktAccordionItem> = createComponent({
-  tagName: 'pkt-accordion-item',
-  elementClass: PktElAccordionItem as PktElConstructor<HTMLElement>,
-  react: React,
-  displayName: 'PktAccordionItem',
-  events: {
-    onClick: 'click' as EventName<PktEventWithTarget>,
-  },
-}) as ForwardRefExoticComponent<IPktAccordionItem>
+export const PktAccordionItem = forwardRef<HTMLDetailsElement, IPktAccordionItem>(
+  (
+    {
+      defaultOpen = false,
+      id,
+      title,
+      skin,
+      compact = false,
+      isOpen: controlledIsOpen,
+      children,
+      name,
+      className,
+      onClick,
+      onToggle,
+    },
+    ref,
+  ) => {
+    const [internalIsOpen, setInternalIsOpen] = useState(defaultOpen)
+    const { name: contextName } = useAccordionContext()
+
+    // Bruk name fra props eller fra context
+    const actualName = name || contextName
+
+    // Bruk controlled isOpen om prop, ellers bruk intern state
+    const isOpen = controlledIsOpen !== undefined ? controlledIsOpen : internalIsOpen
+
+    useEffect(() => {
+      if (controlledIsOpen === undefined) {
+        setInternalIsOpen(defaultOpen)
+      }
+    }, [defaultOpen, controlledIsOpen])
+
+    const handleToggle = (e: React.SyntheticEvent<HTMLDetailsElement>) => {
+      const detailsElement = e.currentTarget
+      const newOpenState = detailsElement.open
+
+      if (controlledIsOpen === undefined) {
+        setInternalIsOpen(newOpenState)
+      }
+
+      onToggle?.(e)
+    }
+
+    const handleClick = (e: React.MouseEvent<HTMLDetailsElement>) => {
+      // La native toggle skje først, så trigge onClick
+      setTimeout(() => {
+        onClick?.(e)
+      }, 0)
+    }
+
+    const accordionItemClass = [
+      'pkt-accordion-item',
+      compact && 'pkt-accordion-item--compact',
+      skin && `pkt-accordion-item--${skin}`,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
 
-export const PktAccordionItem: FC<IPktAccordionItem> = forwardRef(
-  ({ children, ...props }: Omit<IPktAccordionItem, 'ref'>, ref): ReactElement => {
     return (
-      <LitComponent ref={ref} {...props}>
-        <div className="pkt-contents">{children}</div>
-      </LitComponent>
+      <details
+        ref={ref}
+        className={accordionItemClass}
+        id={id}
+        open={isOpen}
+        onClick={handleClick}
+        name={actualName}
+        onToggle={handleToggle}
+      >
+        <summary className="pkt-accordion-item__title" id={`pkt-accordion-item-summary-${id}`}>
+          {title}
+          <PktIcon name="chevron-thin-down" className="pkt-accordion-item__icon" aria-hidden="true" />
+        </summary>
+        <div className="pkt-accordion-item__content" id={`pkt-accordion-item__content-${id}`} role="region">
+          <div className="pkt-accordion-item__content-inner">{children}</div>
+        </div>
+      </details>
     )
   },
 )

package/src/components/checkbox/Checkbox.tsx

@@ -1,11 +1,11 @@
-import React, { ChangeEventHandler, ForwardedRef, forwardRef } from 'react'
+import React, { ChangeEventHandler, ForwardedRef, forwardRef, ReactNode } from 'react'
 
 export interface IPktCheckbox extends React.InputHTMLAttributes<HTMLInputElement> {
   id: string
   hasTile?: boolean
   disabled?: boolean
   label?: string
-  checkHelptext?: string
+  checkHelptext?: ReactNode | ReactNode[] | string
   hasError?: boolean
   defaultChecked?: boolean
   checked?: boolean

package/src/components/radio/RadioButton.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEventHandler, ForwardedRef, forwardRef } from 'react'
+import React, { ChangeEventHandler, ForwardedRef, forwardRef, ReactNode } from 'react'
 
 export interface IPktRadioButton extends React.InputHTMLAttributes<HTMLInputElement> {
   id: string
@@ -6,7 +6,7 @@ export interface IPktRadioButton extends React.InputHTMLAttributes<HTMLInputElem
   label: string
   hasTile?: boolean
   disabled?: boolean
-  checkHelptext?: string | React.ReactNode | React.ReactNode[]
+  checkHelptext?: ReactNode | ReactNode[] | string
   defaultChecked?: boolean
   checked?: boolean
   hasError?: boolean