@oslokommune/punkt-react 12.31.2 → 12.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "12.31.2",
+  "version": "12.32.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.31.2",
+    "@oslokommune/punkt-elements": "^12.32.0",
     "angular-html-parser": "^6.0.2",
     "html-format": "^1.1.7",
     "prettier": "^3.3.3",
@@ -48,7 +48,8 @@
   },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^12.30.1",
-    "@oslokommune/punkt-css": "^12.31.0",
+    "@oslokommune/punkt-css": "^12.32.0",
+    "@oslokommune/punkt-testing-utils": "^12.32.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -111,5 +112,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "bb030d6ba98fa9e45a95cf3092d95b46a750a730"
+  "gitHead": "8d17b2b21d83b498b237d837747e753c64570285"
 }

package/src/components/combobox/Combobox.test.tsx

@@ -0,0 +1,219 @@
+import '@testing-library/jest-dom'
+import * as ReactTestingLibrary from '@testing-library/react'
+import { setupPktTestingLibrary } from '@oslokommune/punkt-testing-utils'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { PktCombobox } from './Combobox'
+
+const { getPktElementByLabelText, waitForPktElementsToBeDefined } = setupPktTestingLibrary(ReactTestingLibrary)
+
+describe('PktCombobox', () => {
+  beforeAll(() => {
+    expect.extend(toHaveNoViolations)
+  })
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders a basic combobox with label', async () => {
+    const { container } = ReactTestingLibrary.render(<PktCombobox id="myCombobox" label="My Combobox" allowUserInput />)
+
+    await waitForPktElementsToBeDefined()
+
+    // Check if the label is present in the document
+    const comboboxLabel = getPktElementByLabelText('My Combobox')
+    expect(comboboxLabel).toBeInTheDocument()
+  })
+  it('renders an error state combobox', async () => {
+    const { container } = ReactTestingLibrary.render(<PktCombobox id="myCombobox" label="My Combobox" hasError />)
+
+    await waitForPktElementsToBeDefined()
+
+    const comboboxError = getPktElementByLabelText('My Combobox').querySelector('.pkt-combobox__input') as HTMLElement
+
+    // Verify that the error class is applied to the combobox
+    expect(comboboxError).toHaveClass('pkt-combobox__input--error')
+  })
+  it('renders a disabled combobox', async () => {
+    const { container } = ReactTestingLibrary.render(<PktCombobox id="myCombobox" label="My Combobox" disabled />)
+
+    await waitForPktElementsToBeDefined()
+
+    const comboboxDisabled = getPktElementByLabelText('My Combobox') as HTMLElement
+
+    // Verify that the error class is applied to the combobox
+    expect(comboboxDisabled).toBeDisabled()
+  })
+  it('renders a combobox with default value', async () => {
+    const { container } = ReactTestingLibrary.render(
+      <PktCombobox id="myCombobox" label="My Combobox" defaultValue="Option 1" />,
+    )
+
+    await waitForPktElementsToBeDefined()
+
+    const combobox: HTMLElement = getPktElementByLabelText('My Combobox')
+
+    // Verify that the default value is set
+    expect(combobox).toHaveAttribute('value', 'Option 1')
+  })
+  it('renders a combobox with options', async () => {
+    const { queryAllByRole } = ReactTestingLibrary.render(
+      <PktCombobox id="myCombobox" label="My Combobox">
+        <option value="Option 1">Option 1</option>
+        <option value="Option 2">Option 2</option>
+        <option value="Option 3">Option 3</option>
+      </PktCombobox>,
+    )
+    await waitForPktElementsToBeDefined()
+    const options = queryAllByRole('option')
+    // Verify that the options are rendered correctly
+    expect(options).toHaveLength(3)
+    expect(options[0].textContent).toContain('Option 1')
+    expect(options[1].textContent).toContain('Option 2')
+    expect(options[2].textContent).toContain('Option 3')
+  })
+  it('handles onChange callback', async () => {
+    const onChangeMock = jest.fn()
+    const { container } = ReactTestingLibrary.render(
+      <PktCombobox id="myCombobox" label="My Combobox" onChange={onChangeMock} allowUserInput />,
+    )
+
+    await waitForPktElementsToBeDefined()
+
+    // Get the combobox element
+    const combobox = getPktElementByLabelText('My Combobox')
+    const comboboxInput = combobox.querySelector('input') as HTMLInputElement
+
+    ReactTestingLibrary.fireEvent.change(comboboxInput, { target: { value: 'New Value' } })
+
+    // Verify that the onChange callback is called
+    expect(onChangeMock).toHaveBeenCalledTimes(1)
+  })
+  it('handles onFocus callback', async () => {
+    const onFocusMock = jest.fn()
+    const { container } = ReactTestingLibrary.render(
+      <PktCombobox id="myCombobox" label="My Combobox" onFocus={onFocusMock} allowUserInput />,
+    )
+
+    await waitForPktElementsToBeDefined()
+
+    // Get the combobox element
+    const combobox = getPktElementByLabelText('My Combobox')
+    const comboboxInput = combobox.querySelector('input') as HTMLInputElement
+
+    // Simulate a focus event on the combobox
+    ReactTestingLibrary.fireEvent.focus(comboboxInput)
+
+    // Verify that the onFocus callback is called
+    expect(onFocusMock).toHaveBeenCalledTimes(1)
+  })
+  it('handles onBlur callback', async () => {
+    const onBlurMock = jest.fn()
+    const { container } = ReactTestingLibrary.render(
+      <PktCombobox id="myCombobox" label="My Combobox" onBlur={onBlurMock} allowUserInput />,
+    )
+
+    await waitForPktElementsToBeDefined()
+
+    // Get the combobox element
+    const combobox = getPktElementByLabelText('My Combobox')
+    const comboboxInput = combobox.querySelector('input') as HTMLInputElement
+
+    // Simulate a blur event on the combobox
+    ReactTestingLibrary.fireEvent.blur(comboboxInput)
+
+    // Verify that the onBlur callback is called
+    expect(onBlurMock).toHaveBeenCalled()
+  })
+  it('should not have any accessibility violations', async () => {
+    const { container } = ReactTestingLibrary.render(<PktCombobox id="myCombobox" label="My Combobox" />)
+
+    await waitForPktElementsToBeDefined()
+
+    const results = await axe(container)
+
+    expect(results).toHaveNoViolations()
+  })
+  it('should not have any accessibility violations with options', async () => {
+    const { container } = ReactTestingLibrary.render(
+      <PktCombobox id="myCombobox" label="My Combobox">
+        <option value="Option 1">Option 1</option>
+        <option value="Option 2">Option 2</option>
+        <option value="Option 3">Option 3</option>
+      </PktCombobox>,
+    )
+
+    await waitForPktElementsToBeDefined()
+
+    const results = await axe(container)
+
+    expect(results).toHaveNoViolations()
+  })
+  it('should not have any accessibility violations with options and default value', async () => {
+    const { container } = ReactTestingLibrary.render(
+      <PktCombobox id="myCombobox" label="My Combobox" defaultValue="Option 1">
+        <option value="Option 1">Option 1</option>
+        <option value="Option 2">Option 2</option>
+        <option value="Option 3">Option 3</option>
+      </PktCombobox>,
+    )
+
+    await waitForPktElementsToBeDefined()
+
+    const results = await axe(container)
+
+    expect(results).toHaveNoViolations()
+  })
+  it('should not have any accessibility violations with options and default value and error state', async () => {
+    const { container } = ReactTestingLibrary.render(
+      <PktCombobox id="myCombobox" label="My Combobox" defaultValue="Option 1" hasError>
+        <option value="Option 1">Option 1</option>
+        <option value="Option 2">Option 2</option>
+        <option value="Option 3">Option 3</option>
+      </PktCombobox>,
+    )
+
+    await waitForPktElementsToBeDefined()
+
+    const results = await axe(container)
+
+    expect(results).toHaveNoViolations()
+  })
+  it('should not have any accessibility violations with options and default value and error state and disabled', async () => {
+    const { container } = ReactTestingLibrary.render(
+      <PktCombobox id="myCombobox" label="My Combobox" defaultValue="Option 1" hasError disabled>
+        <option value="Option 1">Option 1</option>
+        <option value="Option 2">Option 2</option>
+        <option value="Option 3">Option 3</option>
+      </PktCombobox>,
+    )
+
+    await waitForPktElementsToBeDefined()
+
+    const results = await axe(container)
+
+    expect(results).toHaveNoViolations()
+  })
+  it('should not have any accessibility violations with options and default value and error state and disabled and placeholder', async () => {
+    const { container } = ReactTestingLibrary.render(
+      <PktCombobox
+        id="myCombobox"
+        label="My Combobox"
+        defaultValue="Option 1"
+        hasError
+        disabled
+        placeholder="Select an option"
+      >
+        <option value="Option 1">Option 1</option>
+        <option value="Option 2">Option 2</option>
+        <option value="Option 3">Option 3</option>
+      </PktCombobox>,
+    )
+
+    await waitForPktElementsToBeDefined()
+
+    const results = await axe(container)
+
+    expect(results).toHaveNoViolations()
+  })
+})

package/src/components/combobox/Combobox.tsx

@@ -0,0 +1,60 @@
+import React, {
+  ForwardRefExoticComponent,
+  ReactNode,
+  SelectHTMLAttributes,
+  ChangeEventHandler,
+  FocusEventHandler,
+  LegacyRef,
+  FC,
+  forwardRef,
+} from 'react'
+import { PktCombobox as PktElCombobox } from '@oslokommune/punkt-elements'
+import type { IPktCombobox as IPktElCombobox, IPktComboboxOption } from '@oslokommune/punkt-elements'
+import { createComponent, EventName } from '@lit/react'
+import { PktEventWithTarget } from '@/interfaces/IPktElements'
+
+type ExtendedCombobox = Omit<IPktElCombobox, 'helptext'> & SelectHTMLAttributes<HTMLSelectElement>
+
+export interface IPktCombobox extends ExtendedCombobox {
+  helptext?: string | ReactNode | ReactNode[]
+  ref?: LegacyRef<HTMLSelectElement>
+  onChange?: ChangeEventHandler<HTMLSelectElement>
+  onInput?: ChangeEventHandler<HTMLSelectElement>
+  onBlur?: FocusEventHandler<HTMLSelectElement>
+  onFocus?: FocusEventHandler<HTMLSelectElement>
+  onValueChange?: (e: CustomEvent) => void
+  onToggleHelpText?: (e: CustomEvent) => void
+}
+
+export const LitComponent = createComponent({
+  tagName: 'pkt-combobox',
+  elementClass: PktElCombobox,
+  react: React,
+  displayName: 'PktCombobox',
+  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>,
+    onToggleHelpText: 'toggleHelpText' as EventName<CustomEvent>,
+  },
+}) as ForwardRefExoticComponent<IPktCombobox>
+
+// Note:
+// helptext slot needs to be before children because of how React reactivity works.
+// Please do not change this.
+export const PktCombobox: FC<IPktCombobox> = forwardRef(({ children, helptext, ...props }: IPktCombobox, ref) => {
+  return (
+    <LitComponent {...props} ref={ref}>
+      {helptext && (
+        <div slot="helptext" className="pkt-contents">
+          {helptext}
+        </div>
+      )}
+      {children}
+    </LitComponent>
+  )
+})
+
+PktCombobox.displayName = 'PktCombobox'

package/src/components/index.ts

@@ -6,6 +6,7 @@ export { PktBreadcrumbs } from './breadcrumbs/Breadcrumbs'
 export { PktButton } from './button/Button'
 export { PktCard } from './card/Card'
 export { PktCheckbox } from './checkbox/Checkbox'
+export { PktCombobox } from './combobox/Combobox'
 export { PktDatepicker } from './datepicker/Datepicker'
 export { PktFooter } from './footer/Footer'
 export { PktFooterSimple } from './footerSimple/FooterSimple'

package/src/components/interfaces.ts

@@ -5,6 +5,7 @@ export type { IPktBackLink } from './backlink/BackLink'
 export type { IPktBreadcrumbs } from './breadcrumbs/Breadcrumbs'
 export type { IPktButton } from './button/Button'
 export type { IPktCheckbox } from './checkbox/Checkbox'
+export type { IPktCombobox } from './combobox/Combobox'
 export type { IPktDatepicker } from './datepicker/Datepicker'
 export type { IPktFooter } from './footer/Footer'
 export type { IPktFooterSimple } from './footerSimple/FooterSimple'

package/src/components/preview/Preview.tsx

@@ -26,6 +26,19 @@ export const PktPreview: React.FC<PreviewProps> = ({ specs, children, fullWidth
     specs.props && typeof specs.props === 'object' && !Array.isArray(specs.props)
       ? Object.entries(specs.props).reduce<Record<string, any>>((acc, [key, value]) => {
           if (
+            typeof value === 'object' &&
+            !Array.isArray(value) &&
+            value.previewDefault !== undefined &&
+            value.previewDefault !== null
+          ) {
+            if (value.previewDefault === 'false') {
+              value.previewDefault = false
+            }
+            if (value.previewDefault === 'true') {
+              value.previewDefault = true
+            }
+            acc[key] = value.previewDefault
+          } else if (
             typeof value === 'object' &&
             !Array.isArray(value) &&
             value.default !== undefined &&

package/src/components/preview/PreviewSpecs.tsx

@@ -25,6 +25,7 @@ type PropObject = {
   converter?: string
   reflect?: boolean
   default?: any
+  previewDefault?: any
   items?: PropObject
 }