@oslokommune/punkt-react 12.43.1 → 13.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "12.43.1",
+  "version": "13.0.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.43.1",
+    "@oslokommune/punkt-elements": "^13.0.0",
     "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.43.1",
-    "@oslokommune/punkt-css": "^12.43.1",
+    "@oslokommune/punkt-assets": "^13.0.0",
+    "@oslokommune/punkt-css": "^13.0.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": "4f7639deccc0ea325861c3f28152bc16da2c7f5d"
+  "gitHead": "8012adb5b795a7ab26d844a3311435fef05121c4"
 }

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

@@ -12,8 +12,6 @@ describe('PktCheckbox', () => {
   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()
@@ -22,8 +20,6 @@ describe('PktCheckbox', () => {
   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
@@ -33,8 +29,6 @@ describe('PktCheckbox', () => {
   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
@@ -44,7 +38,6 @@ describe('PktCheckbox', () => {
   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
@@ -55,8 +48,6 @@ describe('PktCheckbox', () => {
     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')
 
@@ -70,7 +61,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,49 +1,60 @@
-'use client'
+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 InputHTMLAttributes<HTMLInputElement> {
+export interface IPktCheckbox extends React.InputHTMLAttributes<HTMLInputElement> {
   id: string
-  name?: string
-  label: string
   hasTile?: boolean
+  disabled?: boolean
+  label?: string
+  checkHelptext?: string
   hasError?: boolean
   defaultChecked?: boolean
-  disabled?: boolean
   value?: string
-  checkHelptext?: string | ReactNode | 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 = 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>,
+export const PktCheckbox = forwardRef(
+  (
+    {
+      id,
+      hasTile = false,
+      disabled = false,
+      label,
+      checkHelptext,
+      hasError = false,
+      className,
+      isSwitch = false,
+      hideLabel = false,
+      labelPosition,
+      checked,
+      ...props
+    }: IPktCheckbox,
+    ref: ForwardedRef<HTMLInputElement>,
+  ): React.ReactElement => {
+    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' : ''}`}>
+          <input
+            role={isSwitch ? 'switch' : 'checkbox'}
+            ref={ref}
+            className={`pkt-input-check__input-checkbox ${hasError ? 'pkt-input-check__input-checkbox--error' : ''}`}
+            type="checkbox"
+            id={id}
+            disabled={disabled}
+            {...props}
+          />
+          <label className="pkt-input-check__input-label" htmlFor={id}>
+            {label}
+            {checkHelptext && <div className="pkt-input-check__input-helptext">{checkHelptext}</div>}
+          </label>
+        </div>
+      </div>
+    )
   },
-}) as ForwardRefExoticComponent<IPktCheckbox>
+)
+
+PktCheckbox.displayName = 'PktCheckbox'

package/src/components/inputwrapper/InputWrapper.tsx

@@ -1,15 +1,14 @@
 'use client'
 
-import React, { FC, forwardRef, ForwardRefExoticComponent, LegacyRef, ReactElement, ReactNode } from 'react'
-import { createComponent, EventName } from '@lit/react'
-import { PktInputWrapper as PktEl } from '@oslokommune/punkt-elements'
-import type { PktElType } from '@/interfaces/IPktElements'
+import { ForwardedRef, forwardRef, ReactNode, RefAttributes, useState, MouseEvent } from 'react'
+import { PktAlert } from '../alert/Alert'
+import { PktButton } from '../button/Button'
 
-export interface IPktInputWrapper extends Omit<PktElType, 'ref'> {
+export interface IPktInputWrapper extends RefAttributes<HTMLElement> {
   forId: string
   label: string
-  helptext?: string | ReactNode | ReactNode[]
-  helptextDropdown?: string | ReactNode | ReactNode[]
+  helptext?: string | ReactNode
+  helptextDropdown?: string | ReactNode
   helptextDropdownButton?: string
   counter?: boolean
   counterCurrent?: number
@@ -19,35 +18,186 @@ export interface IPktInputWrapper extends Omit<PktElType, 'ref'> {
   requiredTag?: boolean
   requiredText?: string
   hasError?: boolean
-  errorMessage?: string | ReactNode | ReactNode[]
+  errorMessage?: string | ReactNode
   disabled?: boolean
   inline?: boolean
   ariaDescribedby?: string
   useWrapper?: boolean
+  children?: ReactNode
+  className?: string
   hasFieldset?: boolean
-  ref?: LegacyRef<PktEl>
-  onToggleHelpText?: (e: CustomEvent) => void
+  role?: string
+  counterPosition?: 'top' | 'bottom'
 }
 
-const LitComponent: ForwardRefExoticComponent<IPktInputWrapper> = createComponent({
-  tagName: 'pkt-input-wrapper',
-  elementClass: PktEl,
-  react: React,
-  displayName: 'PktInputWrapper',
-  events: {
-    onToggleHelpText: 'toggleHelpText' as EventName<CustomEvent>,
-  },
-})
+export const PktInputWrapper = forwardRef(
+  (
+    {
+      forId,
+      label,
+      helptext,
+      helptextDropdown,
+      helptextDropdownButton,
+      counter,
+      counterCurrent = 0,
+      counterMaxLength,
+      optionalTag = false,
+      optionalText = 'Valgfritt',
+      requiredTag = false,
+      requiredText = 'Må fylles ut',
+      hasError = false,
+      errorMessage,
+      disabled = false,
+      inline = false,
+      ariaDescribedby,
+      useWrapper = true,
+      children,
+      className = '',
+      hasFieldset = false,
+      role = 'group',
+      counterPosition = 'bottom',
+    }: IPktInputWrapper,
+    ref: ForwardedRef<HTMLDivElement>,
+  ) => {
+    const [isHelpTextOpen, setIsHelpTextOpen] = useState(false)
 
-export const PktInputWrapper: FC<IPktInputWrapper> = forwardRef(
-  ({ children, helptext, ...props }: IPktInputWrapper, ref: LegacyRef<PktEl>): ReactElement => {
-    return (
-      <LitComponent ref={ref} {...props}>
-        <div className="pkt-contents" slot="helptext">
-          {helptext}
+    const tagText = optionalTag ? optionalText : requiredTag ? requiredText : null
+
+    const describedBy = ariaDescribedby || (helptext ? `${forId}-helptext` : undefined)
+    const showCounter = !!counter
+    const counterTop = showCounter && counterPosition === 'top'
+    const counterBottom = showCounter && counterPosition === 'bottom'
+
+    const toggleHelpText = () => setIsHelpTextOpen((prev) => !prev)
+
+    const wrapperClasses = [
+      'pkt-inputwrapper',
+      className,
+      hasError ? 'pkt-inputwrapper--error' : '',
+      disabled ? 'pkt-inputwrapper--disabled' : '',
+      inline ? 'pkt-inputwrapper--inline' : '',
+    ]
+      .filter(Boolean)
+      .join(' ')
+
+    const tagClasses = [
+      'pkt-tag',
+      'pkt-tag--small',
+      'pkt-tag--thin-text',
+      optionalTag && 'pkt-tag--blue-light',
+      !optionalTag && requiredTag && 'pkt-tag--beige',
+    ]
+      .filter(Boolean)
+      .join(' ')
+
+    const Counter = () =>
+      showCounter ? (
+        <div className="pkt-input__counter" aria-live="polite" aria-atomic="true">
+          {counterCurrent}
+          {counterMaxLength ? `/${counterMaxLength}` : ''}
         </div>
-        <div className="pkt-contents">{children}</div>
-      </LitComponent>
+      ) : null
+
+    const renderLabel = () => {
+      const labelContent = (
+        <>
+          {label} {tagText && <span className={tagClasses}>{tagText}</span>}
+        </>
+      )
+
+      if (!useWrapper) {
+        return (
+          <label htmlFor={forId} className="pkt-sr-only" aria-describedby={describedBy} id={`${forId}-label`}>
+            {label}
+          </label>
+        )
+      }
+
+      if (hasFieldset) {
+        return (
+          <legend className="pkt-inputwrapper__legend" id={`${forId}-label`}>
+            {labelContent}
+          </legend>
+        )
+      }
+
+      return (
+        <label className="pkt-inputwrapper__label" htmlFor={forId} aria-describedby={describedBy} id={`${forId}-label`}>
+          {labelContent}
+        </label>
+      )
+    }
+
+    const renderHelptext = () => {
+      if (!helptext && !helptextDropdown) return null
+
+      return (
+        <>
+          {helptext && (
+            <div className="pkt-inputwrapper__helptext" id={`${forId}-helptext`}>
+              {helptext}
+            </div>
+          )}
+          {helptextDropdown && (
+            <div className="pkt-inputwrapper__helptext-expandable">
+              <PktButton
+                skin="tertiary"
+                size="small"
+                variant="icon-right"
+                iconName={isHelpTextOpen ? 'chevron-thin-up' : 'chevron-thin-down'}
+                className="pkt-link pkt-link--icon-right"
+                onClick={toggleHelpText}
+              >
+                <span
+                  dangerouslySetInnerHTML={{
+                    __html: helptextDropdownButton ?? 'Les mer <span class="pkt-sr-only">om inputfeltet</span>',
+                  }}
+                />
+              </PktButton>
+              <div
+                className={`pkt-inputwrapper__helptext ${
+                  isHelpTextOpen
+                    ? 'pkt-inputwrapper__helptext-expandable-open'
+                    : 'pkt-inputwrapper__helptext-expandable-closed'
+                }`}
+              >
+                {helptextDropdown}
+              </div>
+            </div>
+          )}
+        </>
+      )
+    }
+
+    const content = (
+      <>
+        {renderLabel()}
+        {renderHelptext()}
+        {counterTop && <Counter />}
+        {children}
+        {counterBottom && <Counter />}
+        {hasError && errorMessage && (
+          <div className="pkt-inputwrapper__alert-wrapper">
+            <PktAlert skin="error" aria-live="assertive" role="alert" id={`${forId}-error`} compact>
+              {errorMessage}
+            </PktAlert>
+          </div>
+        )}
+      </>
+    )
+
+    return (
+      <div className={wrapperClasses} ref={ref} role={role}>
+        {hasFieldset ? (
+          <fieldset className="pkt-inputwrapper__fieldset" aria-describedby={describedBy}>
+            {content}
+          </fieldset>
+        ) : (
+          <div className="pkt-inputwrapper__fieldset">{content}</div>
+        )}
+      </div>
     )
   },
 )
+
+PktInputWrapper.displayName = 'PktInputWrapper'

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

@@ -12,9 +12,8 @@ describe('PktRadiobutton', () => {
   // Test case for rendering a basic radiogroup
   it('renders without errors', async () => {
     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')
+    const inputElement = container.querySelector('input[type="radio"]')
     expect(inputElement).toBeInTheDocument()
     expect(inputElement).toHaveAttribute('id', 'radio1')
     expect(inputElement).toHaveAttribute('name', 'radioGroup')
@@ -37,11 +36,8 @@ describe('PktRadiobutton', () => {
       </PktInputWrapper>,
     )
 
-    await window.customElements.whenDefined('pkt-radiobutton')
-    await window.customElements.whenDefined('pkt-input-wrapper')
-
-    const option1 = container.querySelector('pkt-radiobutton[id="radio1"]')
-    const option2 = container.querySelector('pkt-radiobutton[id="radio2"]')
+    const option1 = container.querySelector('input[type="radio"][id="radio1"]')
+    const option2 = container.querySelector('input[type="radio"][id="radio2"]')
 
     expect(option1).toBeInTheDocument()
     expect(option2).toBeInTheDocument()
@@ -62,7 +58,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()

package/src/components/radio/RadioButton.tsx

@@ -1,46 +1,57 @@
-'use client'
+import React, { ForwardedRef, forwardRef } from 'react'
 
-import React, {
-  ChangeEventHandler,
-  FocusEventHandler,
-  ForwardedRef,
-  ForwardRefExoticComponent,
-  InputHTMLAttributes,
-  ReactNode,
-} from 'react'
-import { createComponent, EventName } from '@lit/react'
-import { PktRadioButton as PktElRadioButton } from '@oslokommune/punkt-elements'
-import { PktEventWithTarget } from '@/interfaces/IPktElements'
-
-export interface IPktRadioButton extends InputHTMLAttributes<HTMLInputElement> {
+export interface IPktRadioButton extends React.InputHTMLAttributes<HTMLInputElement> {
   id: string
   name: string
   label: string
   hasTile?: boolean
-  hasError?: boolean
-  defaultChecked?: boolean
   disabled?: boolean
+  checkHelptext?: string | React.ReactNode | React.ReactNode[]
+  hasError?: boolean
   value?: string
-  checkHelptext?: string | ReactNode | ReactNode[]
-
-  ref?: ForwardedRef<HTMLInputElement>
-  onChange?: ChangeEventHandler<HTMLInputElement>
-  onInput?: ChangeEventHandler<HTMLInputElement>
-  onBlur?: FocusEventHandler<HTMLInputElement>
-  onFocus?: FocusEventHandler<HTMLInputElement>
-  onValueChange?: (e: CustomEvent) => void
 }
 
-export const PktRadioButton = createComponent({
-  tagName: 'pkt-radiobutton',
-  elementClass: PktElRadioButton,
-  react: React,
-  displayName: 'PktRadioButton',
-  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>,
+export const PktRadioButton = forwardRef(
+  (
+    {
+      id,
+      name,
+      label,
+      className,
+      hasTile = false,
+      disabled = false,
+      checkHelptext,
+      hasError = false,
+      ...props
+    }: IPktRadioButton,
+    ref: ForwardedRef<HTMLInputElement>,
+  ): React.ReactElement => {
+    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' : ''
+          }`}
+        >
+          <input
+            ref={ref}
+            id={id}
+            type="radio"
+            name={name}
+            disabled={disabled}
+            className={`pkt-input-check__input-checkbox ${hasError ? 'pkt-input-check__input-checkbox--error' : ''}`}
+            {...props}
+          />
+          <label className="pkt-input-check__input-label" htmlFor={id}>
+            {label}
+            {checkHelptext && <div className="pkt-input-check__input-helptext">{checkHelptext}</div>}
+          </label>
+        </div>
+      </div>
+    )
   },
-}) as ForwardRefExoticComponent<IPktRadioButton>
+)
+
+PktRadioButton.displayName = 'PktRadioButton'

package/src/components/select/Select.test.tsx

@@ -11,55 +11,49 @@ expect.extend(toHaveNoViolations)
 describe('PktSelect', () => {
   test('renders select field with correct props', async () => {
     const { container } = render(
-      <PktSelect
-        label="Input Label"
-        id="inputId"
-        ariaLabelledby="inputId"
-        options={[{ value: 'verdi', label: 'Verdi' }]}
-      />,
+      <PktSelect label="Input Label" id="inputIdeas" ariaLabelledby="inputId">
+        <option>Oslosommer</option>
+      </PktSelect>,
     )
-    await window.customElements.whenDefined('pkt-select')
 
-    const select = container.querySelector('pkt-select')
+    const select = container.querySelector('#inputIdeas-input') as HTMLSelectElement | null
     expect(select).toBeInTheDocument()
-    expect(select).toHaveAttribute('id', 'inputId')
-    expect(select?.tagName).toBe('PKT-SELECT')
-    expect(select?.id).toBe('inputId')
+    expect(select).toHaveAttribute('id', 'inputIdeas-input')
+    expect(select?.tagName).toBe('SELECT')
+    expect(select?.id).toBe('inputIdeas-input')
 
-    const inputWrapper = container.querySelector('pkt-input-wrapper')
+    const inputWrapper = container.querySelector('.pkt-inputwrapper') as HTMLDivElement | null
     expect(inputWrapper).toBeInTheDocument()
-    expect(inputWrapper).toHaveAttribute('label', 'Input Label')
+    expect(inputWrapper).toHaveTextContent('Input Label')
+
+    const label = container.querySelector('label') as HTMLLabelElement | null
+    expect(label).toBeInTheDocument()
+    expect(label).toHaveAttribute('for', 'inputIdeas-input')
   })
 
   test('renders error message when hasError prop is true', async () => {
-    const { getByText } = render(
-      <PktSelect
-        label="Input Label"
-        id="inputId"
-        hasError
-        errorMessage="Input error"
-        options={[{ value: 'verdi', label: 'Verdi' }]}
-      />,
+    const { getByText, getByRole } = render(
+      <PktSelect label="Input Label" id="inputId" hasError errorMessage="Input error" />,
     )
-    await window.customElements.whenDefined('pkt-select')
 
+    await window.customElements.whenDefined('pkt-alert')
     const errorMessage = getByText('Input error')
     expect(errorMessage).toBeInTheDocument()
-    expect(errorMessage.closest('.pkt-alert')).toHaveAttribute('id', 'inputId-input-error')
+
+    const alertContainer = errorMessage.closest('pkt-alert')
+    expect(alertContainer).toHaveAttribute('id', 'inputId-input-error')
+    expect(alertContainer).toHaveTextContent('Input error')
+
+    const alert = getByRole('alert')
+    expect(alert).toBeInTheDocument()
+    expect(alert).toHaveAttribute('role', 'alert')
   })
 
   describe('PktSelect', () => {
     test('toggles helptext class', async () => {
       const { getByText, container } = render(
-        <PktSelect
-          label="Input Label"
-          id="inputId"
-          helptext="Help Text"
-          helptextDropdown="Help Text"
-          options={[{ value: 'verdi', label: 'Verdi' }]}
-        />,
+        <PktSelect label="Input Label" id="inputId" helptext="Help Text" helptextDropdown="Help Text" />,
       )
-      await window.customElements.whenDefined('pkt-select')
 
       const expandButton = getByText('Les mer').closest('button') as HTMLButtonElement
       const helptextElement = container.querySelector('.pkt-inputwrapper__helptext-expandable-closed')
@@ -74,10 +68,8 @@ describe('PktSelect', () => {
 
   describe('accessibility', () => {
     it('renders with no wcag errors with axe', async () => {
-      const { container } = render(
-        <PktSelect label="Input Label" id="inputId" options={[{ value: 'verdi', label: 'Verdi' }]} />,
-      )
-      await window.customElements.whenDefined('pkt-select')
+      const { container } = render(<PktSelect label="Input Label" id="inputId" />)
+
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })