@oslokommune/punkt-react 12.33.1 → 12.34.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "12.33.1",
+  "version": "12.34.1",
   "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.5",
-    "@oslokommune/punkt-elements": "^12.33.0",
+    "@oslokommune/punkt-elements": "^12.34.1",
     "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.30.1",
-    "@oslokommune/punkt-css": "^12.33.0",
+    "@oslokommune/punkt-css": "^12.34.1",
     "@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": "243754eb54ccccf67e042fd1a94826399e188503"
+  "gitHead": "62e323745bcb2f3d3a27ff2f05090680fbeaeef7"
 }

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

@@ -2,7 +2,7 @@ import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import { PktAccordion } from './Accordion'
 import { PktAccordionItem } from './AccordionItem'
-import { render, screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import React, { createRef } from 'react'
 
 expect.extend(toHaveNoViolations)
@@ -20,24 +20,14 @@ describe('PktAccordion', () => {
     // Assert that the Accordion component renders without throwing any errors
   })
 
-  test('ref works correctly', async () => {
-    const ref = createRef<HTMLDivElement>()
-    const { unmount } = render(<PktAccordion ref={ref}>Alert text</PktAccordion>)
-    await window.customElements.whenDefined('pkt-icon')
-    expect(ref.current).toBeInstanceOf(HTMLDivElement)
-
-    unmount()
-    expect(ref.current).toBe(null)
-  })
-
   test('renders children', async () => {
     const mockToggleOpen = jest.fn()
     render(
       <PktAccordion>
-        <PktAccordionItem title="Title 1" id="item1" toggleProps={{ isOpen: false, onToggleClick: mockToggleOpen }}>
+        <PktAccordionItem title="Title 1" id="item1" onClick={mockToggleOpen}>
           Content 1
         </PktAccordionItem>
-        <PktAccordionItem title="Title 2" id="item2" toggleProps={{ isOpen: false, onToggleClick: mockToggleOpen }}>
+        <PktAccordionItem title="Title 2" id="item2" onClick={mockToggleOpen}>
           Content 2
         </PktAccordionItem>
       </PktAccordion>,
@@ -51,38 +41,78 @@ describe('PktAccordion', () => {
     expect(screen.getByText('Content 2')).toBeInTheDocument()
   })
 
-  test('applies compact and skin ', async () => {
-    render(
+  test('applies compact and skin', async () => {
+    const ref = createRef<any>()
+    const { container } = render(
       <>
         <h3 id="accordion-heading">Accordion Heading</h3>
-        <PktAccordion skin="outlined" compact>
+        <PktAccordion ref={ref}>
           <PktAccordionItem title="Title" id="item1">
             Content
           </PktAccordionItem>
         </PktAccordion>
       </>,
     )
-    await window.customElements.whenDefined('pkt-icon')
-    // Assert that the Accordion component applies the props correctly
-    expect(screen.getByTestId('pkt-accordion')).toHaveClass('pkt-accordion--compact')
-    expect(screen.getByTestId('pkt-accordion')).toHaveClass('pkt-accordion--outlined')
+
+    // Wait for the element to be defined
+    await window.customElements.whenDefined('pkt-accordion')
+    await window.customElements.whenDefined('pkt-accordion-item')
+
+    // 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
+    }
+
+    const accordion = container.querySelector('pkt-accordion')!
+    expect(accordion).toBeInTheDocument()
+    expect(accordion).toHaveAttribute('compact') // compact reflected as boolean attribute
+    expect(accordion).toHaveAttribute('skin', 'blue')
   })
+})
 
-  describe('accessibility', () => {
-    it('renders with no wcag errors with axe', async () => {
-      const { container } = render(
-        <PktAccordion>
-          <PktAccordionItem title="Title 1" id="item1">
-            Content 1
-          </PktAccordionItem>
-          <PktAccordionItem title="Title 2" id="item2">
-            Content 2
-          </PktAccordionItem>
-        </PktAccordion>,
-      )
-      await window.customElements.whenDefined('pkt-icon')
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-    })
+describe('PktAccordionItem', () => {
+  test('applies compact and skin', async () => {
+    const ref = createRef<any>()
+    const { container } = render(
+      <>
+        <PktAccordionItem ref={ref} title="Title" id="item1" skin="blue" compact>
+          Content
+        </PktAccordionItem>
+      </>,
+    )
+
+    // Wait for the element to be defined
+    await window.customElements.whenDefined('pkt-accordion-item')
+
+    // 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
+    }
+
+    const details = container.querySelector('details')!
+    expect(details.classList.contains('pkt-accordion-item--blue')).toBe(true)
+  })
+})
+
+describe('accessibility', () => {
+  it('renders with no wcag errors with axe', async () => {
+    const { container } = render(
+      <PktAccordion>
+        <PktAccordionItem title="Title 1" id="item1">
+          Content 1
+        </PktAccordionItem>
+        <PktAccordionItem title="Title 2" id="item2">
+          Content 2
+        </PktAccordionItem>
+      </PktAccordion>,
+    )
+    await window.customElements.whenDefined('pkt-icon')
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
   })
 })

package/src/components/accordion/Accordion.tsx

@@ -1,36 +1,41 @@
-import { ReactNode, Ref, forwardRef } from 'react'
+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 { PktAccordion as PktElAccordion } from '@oslokommune/punkt-elements'
+import { TPktAccordionSkin } from '@oslokommune/punkt-elements'
 
-export interface IPktAccordion {
-  className?: string
-  children: ReactNode | ReactNode[]
-  /**
-   * @default compact: "false"
-   */
+export interface IPktAccordion extends PktElType {
   compact?: boolean
   /**
    * @default skin: "borderless"
    */
-  skin?: 'borderless' | 'outlined' | 'beige' | 'blue'
+  skin?: TPktAccordionSkin
+  /**
+   * @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>
 }
 
-export const PktAccordion = forwardRef(
-  ({ compact = false, skin = 'borderless', className, children }: IPktAccordion, ref: Ref<HTMLDivElement>) => {
-    const stylingClasses = [
-      className,
-      'pkt-accordion',
-      compact && `pkt-accordion--compact`,
-      skin && `pkt-accordion--${skin}`,
-    ]
-      .filter(Boolean)
-      .join(' ')
+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(
+  ({ compact = false, skin = 'borderless', ariaLabelledBy, children, ...props }: IPktAccordion, ref) => {
     return (
-      <div data-testid="pkt-accordion" className={stylingClasses} ref={ref}>
-        {children}
-      </div>
+      <LitComponent data-testid="pkt-accordion" {...props} ref={ref} aria-labelledby={ariaLabelledBy}>
+        <div className="pkt-contents">{children}</div>
+      </LitComponent>
     )
   },
 )
+
+PktAccordion.displayName = 'PktAccordion'

package/src/components/accordion/AccordionItem.tsx

@@ -1,83 +1,38 @@
-import React, { LegacyRef, forwardRef, useState } from 'react'
-import PktIcon from '../icon/Icon'
-import classNames from 'classnames'
-
-/**
- * @param toggleProps
- *
- * @description Send in an "isOpen" boolean and "onToggleClick" function
- * to override the automatic toggling
- */
-
-export interface IPktAccordionToggleProps {
-  isOpen: boolean
-  onToggleClick: (e: React.MouseEvent, id: string) => void
-}
-
-export interface IPktAccordionItem {
-  children?: React.ReactNode | React.ReactNode[]
-  className?: string
+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'
+
+export interface IPktAccordionItem extends Omit<PktElType, 'onClick'> {
+  compact?: boolean
+  skin?: TPktAccordionSkin
+  title?: string
   defaultOpen?: boolean
-  id: string
-  title: string | React.ReactNode
-  toggleProps?: IPktAccordionToggleProps
+  isOpen?: boolean
+  id?: string
+  onClick?: (e: PktEventWithTarget) => void
+  ref?: LegacyRef<HTMLElement>
 }
 
-export const PktAccordionItem = forwardRef(
-  (
-    { title, className, children, toggleProps, defaultOpen = false, id }: IPktAccordionItem,
-    ref: LegacyRef<HTMLDetailsElement>,
-  ) => {
-    const [isOpen, setIsOpen] = useState<boolean>(defaultOpen)
-
-    const openToggleProp: boolean = toggleProps ? toggleProps.isOpen : isOpen
-
-    /**
-     *     To use the "open" attribute of <details> element correctly,
-     *     we need to return either "open=true" or "open=undefined" as setting "open=false"
-     *     will set the "open" attribute to true as "false" is still a boolean
-     */
-
-    const returnTrueIfOpen = (isOpen: boolean): boolean | undefined => {
-      return isOpen ?? undefined
-    }
-
-    const handleToggleClick = (e: React.MouseEvent, id: string) => {
-      /**
-       *   e.preventDefault() is important to prevent native default onToggle behavior
-       *   (that the event receives from being a <details> element) as it creates
-       *   inconsistent behaviour toggling the "open" attribute both locally
-       *   and through the React state.
-       *   Read more here: https://github.com/facebook/react/issues/15486#issuecomment-873516817
-       * */
-      e.preventDefault()
-
-      if (toggleProps !== undefined) {
-        toggleProps.onToggleClick(e, id)
-      }
-      setIsOpen(!openToggleProp) // use open if it exists, if not use isOpen
-    }
-    const accordionItemClass = classNames(className, 'pkt-accordion-item')
+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: FC<IPktAccordionItem> = forwardRef(
+  ({ children, ...props }: Omit<IPktAccordionItem, 'ref'>, ref): ReactElement => {
     return (
-      <details
-        className={accordionItemClass}
-        ref={ref}
-        id={id}
-        open={toggleProps ? returnTrueIfOpen(toggleProps.isOpen) : returnTrueIfOpen(isOpen)}
-      >
-        <summary
-          className="pkt-accordion-item__title"
-          id={`pkt-accordion-item-summary-${id}`}
-          onClick={(e) => handleToggleClick(e, id)}
-        >
-          {title}
-          <PktIcon name="chevron-thin-down" className="pkt-accordion-item__icon" aria-hidden="true" />
-        </summary>
-        <div id={`pkt-accordion-item-content-${id}`} role="region" className="pkt-accordion-item__content">
-          {children}
-        </div>
-      </details>
+      <LitComponent ref={ref} {...props}>
+        <div className="pkt-contents">{children}</div>
+      </LitComponent>
     )
   },
 )
+
+PktAccordionItem.displayName = 'PktAccordionItem'

package/src/components/checkbox/Checkbox.tsx

@@ -19,7 +19,7 @@ export interface IPktCheckbox extends InputHTMLAttributes<HTMLInputElement> {
   defaultChecked?: boolean
   disabled?: boolean
   value?: string
-  checkHelptext?: string | React.ReactNode | React.ReactNode[]
+  checkHelptext?: string | ReactNode | ReactNode[]
   isSwitch?: boolean
   hideLabel?: boolean
   labelPosition?: 'right' | 'left'