@oslokommune/punkt-react 12.27.7 → 12.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "12.27.7",
+  "version": "12.28.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.5",
-    "@oslokommune/punkt-elements": "^12.27.7",
+    "@oslokommune/punkt-elements": "^12.28.0",
     "angular-html-parser": "^6.0.2",
     "html-format": "^1.1.7",
     "prettier": "^3.3.3",
@@ -48,7 +48,7 @@
   },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^12.27.1",
-    "@oslokommune/punkt-css": "^12.27.7",
+    "@oslokommune/punkt-css": "^12.28.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -111,5 +111,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "8462afda718ac2c8045708ae881430f12fabc8d8"
+  "gitHead": "3dee4a0c63e59fe126be318bad620cfb9b9a6c6f"
 }

package/src/components/checkbox/Checkbox.test.tsx

@@ -9,42 +9,54 @@ expect.extend(toHaveNoViolations)
 
 describe('PktCheckbox', () => {
   // Test case for rendering a basic checkbox
-  it('renders a basic checkbox with label', () => {
+  it('renders a basic checkbox with label', async () => {
     const { getByLabelText } = render(<PktCheckbox id="myCheckbox" label="My Checkbox" />)
 
+    await window.customElements.whenDefined('pkt-checkbox')
+
     // Check if the label is present in the document
     const checkboxLabel = getByLabelText('My Checkbox')
     expect(checkboxLabel).toBeInTheDocument()
   })
 
-  it('renders an error state checkbox', () => {
+  it('renders an error state checkbox', async () => {
     render(<PktCheckbox id="myCheckbox" label="My Checkbox" hasError />)
+
+    await window.customElements.whenDefined('pkt-checkbox')
+
     const checkbox = screen.getByRole('checkbox', { name: 'My Checkbox' })
 
     // Verify that the error class is applied to the checkbox
     expect(checkbox).toHaveClass('pkt-input-check__input-checkbox--error')
   })
 
-  it('renders as Switch', () => {
+  it('renders as Switch', async () => {
     render(<PktCheckbox id="myCheckbox" label="My Checkbox" isSwitch />)
+
+    await window.customElements.whenDefined('pkt-checkbox')
+
     const checkbox = screen.getByRole('switch', { name: 'My Checkbox' })
 
     // Verify that the error class is applied to the checkbox
     expect(checkbox).toHaveAttribute('role', 'switch')
   })
 
-  test('renders a default checked checkbox', () => {
+  test('renders a default checked checkbox', async () => {
     const { getByRole } = render(<PktCheckbox id="myCheckbox" label="My Checkbox" defaultChecked={true} />)
+
+    await window.customElements.whenDefined('pkt-checkbox')
     // Find the checkbox element by its "checkbox" role
     const checkbox = getByRole('checkbox') as HTMLInputElement
     // Verify that the checkbox is initially checked
     expect(checkbox).toBeChecked()
   })
 
-  test('handles onClick callback', () => {
+  test('handles onClick callback', async () => {
     const onClickMock = jest.fn()
     const { getByLabelText } = render(<PktCheckbox id="myCheckbox" label="My Checkbox" onClick={onClickMock} />)
 
+    await window.customElements.whenDefined('pkt-checkbox')
+
     // Get the checkbox label element
     const checkboxLabel = getByLabelText('My Checkbox')
 
@@ -58,6 +70,7 @@ describe('PktCheckbox', () => {
   describe('accessibility', () => {
     it('renders with no wcag errors with axe', async () => {
       const { container } = render(<PktCheckbox id="accessibilityTest" label="My checkkbox"></PktCheckbox>)
+      await window.customElements.whenDefined('pkt-checkbox')
       const results = await axe(container)
 
       expect(results).toHaveNoViolations()

package/src/components/checkbox/Checkbox.tsx

@@ -1,71 +1,47 @@
-import React, { ForwardedRef, forwardRef } from 'react'
+import React, {
+  ChangeEventHandler,
+  FocusEventHandler,
+  ForwardedRef,
+  ForwardRefExoticComponent,
+  InputHTMLAttributes,
+  ReactNode,
+} from 'react'
+import { createComponent, EventName } from '@lit/react'
+import { PktCheckbox as PktElCheckbox } from '@oslokommune/punkt-elements'
+import { PktEventWithTarget } from '@/interfaces/IPktElements'
 
-export interface IPktCheckbox extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface IPktCheckbox extends InputHTMLAttributes<HTMLInputElement> {
   id: string
+  name?: string
+  label: string
   hasTile?: boolean
-  disabled?: boolean
-  label?: string
-  labelPosition?: 'right' | 'left'
-  hideLabel?: boolean
-  checkHelptext?: string | React.ReactNode | React.ReactNode[]
   hasError?: boolean
   defaultChecked?: boolean
-  isSwitch?: boolean
+  disabled?: boolean
   value?: string
+  checkHelptext?: string | React.ReactNode | React.ReactNode[]
+  isSwitch?: boolean
+  hideLabel?: boolean
+  labelPosition?: 'right' | 'left'
+  checked?: boolean
+  ref?: ForwardedRef<HTMLInputElement>
+  onChange?: ChangeEventHandler<HTMLInputElement>
+  onInput?: ChangeEventHandler<HTMLInputElement>
+  onBlur?: FocusEventHandler<HTMLInputElement>
+  onFocus?: FocusEventHandler<HTMLInputElement>
+  onValueChange?: (e: CustomEvent) => void
 }
 
-export const PktCheckbox = forwardRef(
-  (
-    {
-      id,
-      hasTile = false,
-      disabled = false,
-      label,
-      labelPosition = 'right',
-      hideLabel = false,
-      checkHelptext,
-      hasError = false,
-      isSwitch = false,
-      className,
-      ...props
-    }: IPktCheckbox,
-    ref: ForwardedRef<HTMLInputElement>,
-  ): React.ReactElement => {
-    // Define the classes
-    const classes = [className, 'pkt-input-check'].filter(Boolean).join(' ')
-
-    return (
-      <div className={classes}>
-        <div
-          className={`pkt-input-check__input ${hasTile ? 'pkt-input-check__input--tile' : ''} ${
-            disabled && hasTile ? 'pkt-input-check__input--tile-disabled' : ''
-          }`}
-        >
-          {label && labelPosition === 'left' && (
-            <label className={`pkt-input-check__input-label ${hideLabel ? 'pkt-sr-only' : ''}`} htmlFor={id}>
-              {label}
-              {checkHelptext && <div className="pkt-input-check__input-helptext">{checkHelptext}</div>}
-            </label>
-          )}
-          <input
-            ref={ref}
-            className={`pkt-input-check__input-checkbox ${hasError ? 'pkt-input-check__input-checkbox--error' : ''}`}
-            type="checkbox"
-            role={isSwitch ? 'switch' : 'checkbox'}
-            id={id}
-            disabled={disabled}
-            {...props}
-          />
-          {label && labelPosition === 'right' && (
-            <label className={`pkt-input-check__input-label ${hideLabel ? 'pkt-sr-only' : ''}`} htmlFor={id}>
-              {label}
-              {checkHelptext && <div className="pkt-input-check__input-helptext">{checkHelptext}</div>}
-            </label>
-          )}
-        </div>
-      </div>
-    )
+export const PktCheckbox = createComponent({
+  tagName: 'pkt-checkbox',
+  elementClass: PktElCheckbox,
+  react: React,
+  displayName: 'PktCheckbox',
+  events: {
+    onChange: 'change' as EventName<PktEventWithTarget>,
+    onInput: 'input' as EventName<PktEventWithTarget>,
+    onBlur: 'blur' as EventName<FocusEvent>,
+    onFocus: 'focus' as EventName<FocusEvent>,
+    onValueChange: 'valueChange' as EventName<CustomEvent>,
   },
-)
-
-PktCheckbox.displayName = 'PktCheckbox'
+}) as ForwardRefExoticComponent<IPktCheckbox>

package/src/components/radio/RadioButton.test.tsx

@@ -11,9 +11,7 @@ expect.extend(toHaveNoViolations)
 describe('PktRadiobutton', () => {
   // Test case for rendering a basic radiogroup
   it('renders without errors', async () => {
-    const { getByLabelText, container } = render(
-      <PktRadioButton id="radio1" name="radioGroup" label="Option 1" value="option1" />,
-    )
+    const { container } = render(<PktRadioButton id="radio1" name="radioGroup" label="Option 1" value="option1" />)
     await window.customElements.whenDefined('pkt-radiobutton')
 
     const inputElement = container.querySelector('pkt-radiobutton')
@@ -64,6 +62,7 @@ describe('PktRadiobutton', () => {
       const { container } = render(
         <PktRadioButton name="accessibilitytest" id="accessibilityTest" label="My checkkbox" />,
       )
+      await window.customElements.whenDefined('pkt-radiobutton')
       const results = await axe(container)
 
       expect(results).toHaveNoViolations()