@oslokommune/punkt-elements 19.8.0 → 19.9.0

package/src/components/checkbox-group/checkbox-group.test.ts

@@ -0,0 +1,406 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { fireEvent } from '@testing-library/dom'
+import { vi } from 'vitest'
+import type { LitElement } from 'lit'
+import { CustomElementFor } from '../../tests/component-registry'
+import '@/components/textinput'
+import './checkbox-group'
+
+expect.extend(toHaveNoViolations)
+
+type TCheckboxGroup = CustomElementFor<'pkt-checkbox-group'>
+type TCheckbox = CustomElementFor<'pkt-checkbox'> & {
+  internals: { validity: ValidityState; validationMessage: string }
+}
+
+const settle = async () => {
+  for (let i = 0; i < 2; i++) {
+    const elements = Array.from(
+      document.querySelectorAll<LitElement>('pkt-checkbox-group, pkt-input-wrapper, pkt-checkbox'),
+    )
+    await Promise.all(elements.map((el) => el.updateComplete))
+    await new Promise((resolve) => setTimeout(resolve, 0))
+  }
+}
+
+const mount = async (markup: string) => {
+  document.body.innerHTML = markup
+  await settle()
+  return document.querySelector('pkt-checkbox-group') as TCheckboxGroup
+}
+
+const checkbox = (id: string) => document.getElementById(id) as TCheckbox
+const inner = (id: string) => checkbox(id).querySelector('input') as HTMLInputElement
+
+const toggle = async (id: string) => {
+  fireEvent.click(inner(id))
+  await settle()
+}
+
+const options = `
+  <pkt-checkbox id="enkelt" value="enkelt" label="Enkeltrom"></pkt-checkbox>
+  <pkt-checkbox id="dobbelt" value="dobbelt" label="Dobbeltrom"></pkt-checkbox>
+  <pkt-checkbox id="varsler" value="varsler" label="Send meg varsler" isSwitch></pkt-checkbox>
+`
+
+describe('pkt-checkbox-group', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  describe('rendering', () => {
+    test('renders the checkboxes inside the fieldset options of an input wrapper', async () => {
+      const group = await mount(
+        `<pkt-checkbox-group id="rom" label="Romtype">${options}</pkt-checkbox-group>`,
+      )
+
+      const container = group.querySelector('fieldset .pkt-inputwrapper__options')
+      expect(group.querySelector('legend')).toHaveTextContent('Romtype')
+      expect(checkbox('enkelt').parentElement).toBe(container)
+      expect(checkbox('varsler').parentElement).toBe(container)
+    })
+
+    test('allows switches in the group', async () => {
+      await mount(`<pkt-checkbox-group label="Romtype">${options}</pkt-checkbox-group>`)
+
+      expect(inner('varsler')).toHaveAttribute('role', 'switch')
+    })
+  })
+
+  describe('name and defaults', () => {
+    test('gives checkboxes without a name the group name', async () => {
+      await mount(`<pkt-checkbox-group name="rom" label="Romtype">${options}</pkt-checkbox-group>`)
+
+      expect(checkbox('enkelt')).toHaveAttribute('name', 'rom')
+      expect(checkbox('dobbelt')).toHaveAttribute('name', 'rom')
+    })
+
+    test('keeps a name set on the checkbox', async () => {
+      await mount(
+        `<pkt-checkbox-group name="rom" label="Romtype">
+          <pkt-checkbox id="enkelt" name="eget" value="enkelt" label="Enkeltrom"></pkt-checkbox>
+        </pkt-checkbox-group>`,
+      )
+
+      expect(checkbox('enkelt')).toHaveAttribute('name', 'eget')
+    })
+
+    test('turns on tile and error state for every checkbox', async () => {
+      await mount(
+        `<pkt-checkbox-group label="Romtype" hasTile hasError>${options}</pkt-checkbox-group>`,
+      )
+
+      expect(checkbox('dobbelt').querySelector('.pkt-input-check__input')).toHaveClass(
+        'pkt-input-check__input--tile',
+      )
+      expect(inner('dobbelt')).toHaveClass('pkt-input-check__input-checkbox--error')
+    })
+
+    test('does not pass required on to the checkboxes', async () => {
+      await mount(`<pkt-checkbox-group label="Romtype" required>${options}</pkt-checkbox-group>`)
+
+      expect(checkbox('enkelt').required).toBe(false)
+    })
+  })
+
+  describe('value', () => {
+    test('is the values of the checked checkboxes in DOM order', async () => {
+      const group = await mount(
+        `<pkt-checkbox-group label="Romtype">
+          <pkt-checkbox id="enkelt" value="enkelt" label="Enkeltrom" checked></pkt-checkbox>
+          <pkt-checkbox id="dobbelt" value="dobbelt" label="Dobbeltrom"></pkt-checkbox>
+          <pkt-checkbox id="suite" value="suite" label="Suite" checked></pkt-checkbox>
+        </pkt-checkbox-group>`,
+      )
+
+      expect(group.value).toEqual(['enkelt', 'suite'])
+    })
+
+    test('keeps DOM order regardless of the order they were checked in', async () => {
+      const group = await mount(
+        `<pkt-checkbox-group label="Romtype">${options}</pkt-checkbox-group>`,
+      )
+
+      await toggle('varsler')
+      await toggle('enkelt')
+
+      expect(group.value).toEqual(['enkelt', 'varsler'])
+    })
+
+    test('leaves out disabled checkboxes', async () => {
+      const group = await mount(
+        `<pkt-checkbox-group label="Romtype">
+          <pkt-checkbox id="enkelt" value="enkelt" label="Enkeltrom" checked></pkt-checkbox>
+          <pkt-checkbox id="dobbelt" value="dobbelt" label="Dobbeltrom" checked disabled></pkt-checkbox>
+        </pkt-checkbox-group>`,
+      )
+
+      expect(group.value).toEqual(['enkelt'])
+    })
+
+    test('uses on for a checked checkbox without a value', async () => {
+      const group = await mount(
+        `<pkt-checkbox-group label="Vilkår">
+          <pkt-checkbox id="godta" label="Jeg godtar" checked></pkt-checkbox>
+        </pkt-checkbox-group>`,
+      )
+
+      expect(group.value).toEqual(['on'])
+    })
+
+    test('checks the checkboxes listed in the value attribute', async () => {
+      const group = await mount(
+        `<pkt-checkbox-group label="Romtype" value="enkelt,varsler">${options}</pkt-checkbox-group>`,
+      )
+
+      expect(checkbox('enkelt').checked).toBe(true)
+      expect(checkbox('dobbelt').checked).toBeFalsy()
+      expect(checkbox('varsler').checked).toBe(true)
+      expect(group.value).toEqual(['enkelt', 'varsler'])
+    })
+
+    test('checks the matching checkboxes when set from code, without firing events', async () => {
+      const group = await mount(
+        `<pkt-checkbox-group label="Romtype">${options}</pkt-checkbox-group>`,
+      )
+      const changed = vi.fn()
+      group.addEventListener('change', changed)
+      group.addEventListener('value-change', changed)
+
+      group.value = ['dobbelt']
+      await settle()
+
+      expect(checkbox('dobbelt').checked).toBe(true)
+      expect(inner('dobbelt').checked).toBe(true)
+      expect(checkbox('enkelt').checked).toBeFalsy()
+      expect(changed).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('events', () => {
+    test('fires value-change on the group with all checked values', async () => {
+      const group = await mount(
+        `<pkt-checkbox-group label="Romtype">${options}</pkt-checkbox-group>`,
+      )
+      const fromGroup: unknown[] = []
+      group.addEventListener('value-change', (event) => {
+        if (event.target === group) fromGroup.push((event as CustomEvent).detail)
+      })
+
+      await toggle('dobbelt')
+      await toggle('enkelt')
+      await toggle('dobbelt')
+
+      expect(fromGroup).toEqual([['dobbelt'], ['enkelt', 'dobbelt'], ['enkelt']])
+    })
+
+    test('fires change from the group with all checked values as its value', async () => {
+      const group = await mount(
+        `<form><pkt-checkbox-group name="rom" label="Romtype">${options}</pkt-checkbox-group></form>`,
+      )
+      const values: unknown[] = []
+      group.addEventListener('change', (event) => {
+        expect(event.target).toBe(group)
+        values.push((event.target as TCheckboxGroup).value)
+      })
+      const formChanges = vi.fn()
+      group.closest('form')!.addEventListener('change', formChanges)
+
+      await toggle('dobbelt')
+      await toggle('enkelt')
+
+      expect(values).toEqual([['dobbelt'], ['enkelt', 'dobbelt']])
+      expect(formChanges).toHaveBeenCalledTimes(2)
+      expect(formChanges.mock.calls.every(([event]) => event.target === group)).toBe(true)
+    })
+
+    test('still fires the events on the checkbox itself', async () => {
+      await mount(`<pkt-checkbox-group label="Romtype">${options}</pkt-checkbox-group>`)
+      const changed = vi.fn()
+      checkbox('enkelt').addEventListener('change', changed)
+
+      await toggle('enkelt')
+
+      expect(changed).toHaveBeenCalledTimes(1)
+    })
+
+    test('focus() moves focus to the first checked checkbox, or the first one', async () => {
+      const group = await mount(
+        `<pkt-checkbox-group label="Romtype">${options}</pkt-checkbox-group>`,
+      )
+
+      group.focus()
+      expect(document.activeElement).toBe(inner('enkelt'))
+
+      group.value = ['dobbelt']
+      await settle()
+      group.focus()
+      expect(document.activeElement).toBe(inner('dobbelt'))
+    })
+  })
+
+  describe('validation', () => {
+    test('makes every checkbox invalid with a custom error until one is checked', async () => {
+      await mount(`<pkt-checkbox-group label="Romtype" required>${options}</pkt-checkbox-group>`)
+
+      for (const id of ['enkelt', 'dobbelt', 'varsler']) {
+        expect(checkbox(id).internals.validity.customError).toBe(true)
+        expect(checkbox(id).internals.validity.valueMissing).toBe(false)
+        expect(checkbox(id).internals.validationMessage).toBe('Velg minst ett alternativ')
+      }
+
+      await toggle('dobbelt')
+
+      for (const id of ['enkelt', 'dobbelt', 'varsler']) {
+        expect(checkbox(id).internals.validity.valid).toBe(true)
+      }
+
+      await toggle('dobbelt')
+
+      expect(checkbox('enkelt').internals.validity.customError).toBe(true)
+    })
+
+    test('counts a checked value set from code', async () => {
+      const group = await mount(
+        `<pkt-checkbox-group label="Romtype" required>${options}</pkt-checkbox-group>`,
+      )
+
+      group.value = ['enkelt']
+      await settle()
+
+      expect(checkbox('dobbelt').internals.validity.valid).toBe(true)
+    })
+
+    test('clears the custom error when the group is no longer required', async () => {
+      const group = await mount(
+        `<pkt-checkbox-group label="Romtype" required>${options}</pkt-checkbox-group>`,
+      )
+
+      group.required = false
+      await settle()
+
+      expect(checkbox('enkelt').internals.validity.valid).toBe(true)
+    })
+
+    test('keeps the rule of a required checkbox in a required group', async () => {
+      await mount(
+        `<pkt-checkbox-group label="Vilkår" required>
+          <pkt-checkbox id="vilkar" value="vilkar" label="Vilkår" required></pkt-checkbox>
+          <pkt-checkbox id="nyhetsbrev" value="nyhetsbrev" label="Nyhetsbrev"></pkt-checkbox>
+        </pkt-checkbox-group>`,
+      )
+
+      await toggle('nyhetsbrev')
+
+      expect(checkbox('nyhetsbrev').internals.validity.valid).toBe(true)
+      expect(checkbox('vilkar').internals.validity.valueMissing).toBe(true)
+    })
+
+    test('leaves the checkboxes valid when the group is not required', async () => {
+      await mount(`<pkt-checkbox-group label="Romtype">${options}</pkt-checkbox-group>`)
+
+      expect(checkbox('enkelt').internals.validity.valid).toBe(true)
+    })
+  })
+
+  describe('disabled', () => {
+    test('disables the fieldset', async () => {
+      const group = await mount(
+        `<pkt-checkbox-group label="Romtype" disabled>${options}</pkt-checkbox-group>`,
+      )
+
+      expect(group.querySelector('fieldset')).toHaveAttribute('disabled', '')
+    })
+  })
+
+  describe('a text field for an other option', () => {
+    const settleAll = async () => {
+      for (let i = 0; i < 3; i++) {
+        const elements = Array.from(document.querySelectorAll<LitElement>('*')).filter(
+          (el) => 'updateComplete' in el,
+        )
+        await Promise.all(elements.map((el) => el.updateComplete))
+        await new Promise((resolve) => setTimeout(resolve, 0))
+      }
+    }
+
+    const mountOther = async () => {
+      document.body.innerHTML = `
+        <form id="skjema">
+          <pkt-checkbox-group id="gruppe" name="varsling" label="Spørsmål">
+            <pkt-checkbox id="epost" value="epost" label="E-post"></pkt-checkbox>
+            <pkt-checkbox id="annet" value="annet" label="Annet"></pkt-checkbox>
+            <pkt-textinput id="annet-tekst" name="varsling-annet" label="Hva annet?" hidden></pkt-textinput>
+          </pkt-checkbox-group>
+          <button>Utenfor</button>
+        </form>`
+      await settleAll()
+      const group = document.getElementById('gruppe') as HTMLElement & { value: unknown }
+      const field = document.getElementById('annet-tekst') as HTMLElement
+      group.addEventListener('change', (event) => {
+        if (event.target === group) field.hidden = !String(group.value).includes('annet')
+      })
+      return { group, field, input: () => field.querySelector('input') as HTMLInputElement }
+    }
+
+    test('shows the text field inside the group when the other option is chosen', async () => {
+      const { field } = await mountOther()
+
+      fireEvent.click(document.getElementById('annet')!.querySelector('input')!)
+      await settleAll()
+
+      expect(field.hidden).toBe(false)
+      expect(field.closest('.pkt-inputwrapper__options')).toBeInTheDocument()
+    })
+
+    test('keeps the text field out of the group value, and lets its events through', async () => {
+      const { group, input } = await mountOther()
+      fireEvent.click(document.getElementById('annet')!.querySelector('input')!)
+      await settleAll()
+      const targets: string[] = []
+      group.addEventListener('change', (event) => targets.push((event.target as Element).id))
+
+      input().value = 'Brevdue'
+      fireEvent.input(input())
+      fireEvent.change(input())
+      await settleAll()
+
+      expect(group.value).toEqual(['annet'])
+      expect(targets).toEqual(['annet-tekst'])
+      expect(
+        Array.from(new FormData(document.getElementById('skjema') as HTMLFormElement).entries()),
+      ).toEqual([
+        ['varsling', 'annet'],
+        ['varsling-annet', 'Brevdue'],
+      ])
+    })
+
+    test('fires blur only when focus leaves the group, also from the text field', async () => {
+      const { group, input } = await mountOther()
+      fireEvent.click(document.getElementById('annet')!.querySelector('input')!)
+      await settleAll()
+      const blurs: Element[] = []
+      group.addEventListener('blur', (event) => {
+        if (event.target === group) blurs.push(event.target as Element)
+      })
+
+      document.getElementById('annet')!.querySelector('input')!.focus()
+      input().focus()
+      expect(blurs).toEqual([])
+
+      document.querySelector('button')!.focus()
+      expect(blurs).toEqual([group])
+    })
+  })
+
+  describe('accessibility', () => {
+    test('has no axe violations', async () => {
+      const group = await mount(
+        `<pkt-checkbox-group id="rom" label="Romtype" helptext="Velg alle som passer">${options}</pkt-checkbox-group>`,
+      )
+
+      expect(await axe(group)).toHaveNoViolations()
+    })
+  })
+})

package/src/components/checkbox-group/checkbox-group.ts

@@ -0,0 +1,69 @@
+import { provide } from '@lit/context'
+import { customElement, property, state } from 'lit/decorators.js'
+import {
+  optionChecked,
+  optionDisabled,
+  optionValue,
+  PktOptionGroupElement,
+  type TOption,
+} from '@/base-elements/option-group-element'
+import { checkboxGroupContext, type CheckboxGroupContext } from './checkbox-group-context'
+import '@/components/checkbox'
+
+export class PktCheckboxGroup extends PktOptionGroupElement {
+  protected readonly optionSelector = 'pkt-checkbox'
+
+  @provide({ context: checkboxGroupContext })
+  @state()
+  protected groupContext: CheckboxGroupContext = { name: '', hasTile: false, hasError: false }
+
+  private storedValue: string[] | null = null
+  private validityApplied = false
+
+  @property({ type: String })
+  get value(): string[] {
+    return this.options()
+      .filter((option) => optionChecked(option) && !optionDisabled(option))
+      .map(optionValue)
+  }
+
+  set value(newValue: string | string[] | null | undefined) {
+    const oldValue = this.value
+    this.storedValue = Array.isArray(newValue) ? newValue : newValue ? newValue.split(',') : []
+    this.applyStoredValue(this.options())
+    this.requestUpdate('value', oldValue)
+  }
+
+  protected get hasStoredValue(): boolean {
+    return this.storedValue !== null
+  }
+
+  protected storeCurrentValue(): void {
+    this.storedValue = this.value
+  }
+
+  protected applyStoredValue(options: TOption[]): void {
+    options.forEach((option) => {
+      const checked = !!this.storedValue?.includes(optionValue(option))
+      if (optionChecked(option) !== checked) option.checked = checked
+    })
+  }
+
+  protected syncValidity(): void {
+    if (!this.required && !this.validityApplied) return
+    this.validityApplied = this.required
+    const options = this.options()
+    const missing =
+      this.required && !options.some((option) => optionChecked(option) && !optionDisabled(option))
+    const message = missing ? this.pktStrings.get('validation').checkboxGroupValueMissing : ''
+    options.forEach((option) => option.setGroupValidity?.(message))
+  }
+}
+
+try {
+  customElement('pkt-checkbox-group')(PktCheckboxGroup)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-checkbox-group>, men den er allerede definert')
+}
+
+export default PktCheckboxGroup

package/src/components/checkbox-group/index.ts

@@ -0,0 +1,4 @@
+import { PktCheckboxGroup } from './checkbox-group'
+
+export { PktCheckboxGroup }
+export default PktCheckboxGroup

package/src/components/combobox/combobox.ts

@@ -313,7 +313,7 @@ export class PktCombobox extends ComboboxHandlers implements IPktCombobox {
       this.inputRef.value.value = ''
     }
 
-    this.internals.setFormValue('')
+    this.setFormValue('')
     this.internals.ariaInvalid = 'false'
     this.requestUpdate()
   }

package/src/components/datepicker/datepicker.ts

@@ -612,7 +612,7 @@ export class PktDatepicker extends PktInputElement<Props> {
   public clearInputValue() {
     this._value = []
     this.value = ''
-    this.internals.setFormValue(this.value)
+    this.setFormValue(this.value)
     this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))
     this.dispatchEvent(
       new CustomEvent('value-change', {

package/src/components/index.ts

@@ -9,6 +9,7 @@ export { PktCard } from '@/components/card'
 export { PktCombobox } from './combobox'
 export { PktConsent } from './consent'
 export { PktCheckbox } from '@/components/checkbox'
+export { PktCheckboxGroup } from '@/components/checkbox-group'
 export { PktFileUpload } from '@/components/fileupload'
 export { PktDateTags } from '@/components/datepicker/date-tags.js'
 export { PktDatepicker } from '@/components/datepicker/datepicker.js'
@@ -31,6 +32,7 @@ export { PktMessagebox } from '@/components/messagebox'
 export { PktModal } from '@/components/modal'
 export { PktProgressbar } from '@/components/progressbar'
 export { PktRadioButton } from '@/components/radiobutton'
+export { PktRadioGroup } from '@/components/radio-group'
 // TODO: Avklar om RadioButton kan eksporteres som *kun* PktRadiobutton
 export { PktRadioButton as PktRadiobutton } from '@/components/radiobutton'
 export { PktTag } from '@/components/tag'

package/src/components/input-wrapper/input-wrapper.ts

@@ -232,7 +232,11 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
 
     const wrapperElement = () => {
       return this.hasFieldset
-        ? html`<fieldset class="pkt-inputwrapper__fieldset" aria-describedby="${describedBy}">
+        ? html`<fieldset
+            class="pkt-inputwrapper__fieldset"
+            aria-describedby="${describedBy}"
+            ?disabled=${this.disabled}
+          >
             ${inputContent()}
           </fieldset>`
         : html`<div class="pkt-inputwrapper__fieldset">${inputContent()}</div>`

package/src/components/input-wrapper/wrapper-parity.test.ts

@@ -36,6 +36,14 @@ const COMPONENTS = {
     elements: 'packages/elements/src/components/fileupload/fileupload.ts',
     react: 'packages/react/src/components/fileupload/FileUpload.tsx',
   },
+  radioGroup: {
+    elements: 'packages/elements/src/base-elements/option-group-element.ts',
+    react: 'packages/react/src/components/radiogroup/RadioGroup.tsx',
+  },
+  checkboxGroup: {
+    elements: 'packages/elements/src/base-elements/option-group-element.ts',
+    react: 'packages/react/src/components/checkboxgroup/CheckboxGroup.tsx',
+  },
 } as const
 
 // Props som med vilje ikke videresendes, med begrunnelse.
@@ -44,16 +52,22 @@ const OMITTED: Record<string, Partial<Record<keyof typeof COMPONENTS, string>>>
     select: 'ingenting å telle i en select',
     timepicker: 'ingenting å telle',
     fileupload: 'ingenting å telle',
+    radioGroup: 'ingenting å telle',
+    checkboxGroup: 'ingenting å telle',
   },
   counterCurrent: {
     select: 'se counter',
     timepicker: 'se counter',
     fileupload: 'se counter',
+    radioGroup: 'se counter',
+    checkboxGroup: 'se counter',
   },
   counterMaxLength: {
     select: 'se counter',
     timepicker: 'se counter',
     fileupload: 'se counter',
+    radioGroup: 'se counter',
+    checkboxGroup: 'se counter',
   },
   counterPosition: {
     textinput: 'teller over feltet er aldri støttet',
@@ -63,6 +77,8 @@ const OMITTED: Record<string, Partial<Record<keyof typeof COMPONENTS, string>>>
     datepicker: 'teller over feltet er aldri støttet',
     timepicker: 'teller over feltet er aldri støttet',
     fileupload: 'teller over feltet er aldri støttet',
+    radioGroup: 'ingenting å telle',
+    checkboxGroup: 'ingenting å telle',
   },
   layout: {
     textinput: 'layout gjelder alternativer i en gruppe, ikke ett felt',
@@ -76,9 +92,18 @@ const OMITTED: Record<string, Partial<Record<keyof typeof COMPONENTS, string>>>
   hasFieldset: {
     fileupload: 'ikke støttet',
   },
-  inline: { fileupload: 'ikke et enkelt felt på en linje' },
+  inline: {
+    fileupload: 'ikke et enkelt felt på en linje',
+    radioGroup: 'ikke et enkelt felt på en linje, retningen styres av layout',
+    checkboxGroup: 'ikke et enkelt felt på en linje, retningen styres av layout',
+  },
   useWrapper: { fileupload: 'wrapperen rendres bare når label er satt' },
-  ariaDescribedby: { combobox: 'ikke implementert ennå', fileupload: 'ikke implementert ennå' },
+  ariaDescribedby: {
+    combobox: 'ikke implementert ennå',
+    fileupload: 'ikke implementert ennå',
+    radioGroup: 'fieldset beskrives av hjelpeteksten og feilmeldingen',
+    checkboxGroup: 'fieldset beskrives av hjelpeteksten og feilmeldingen',
+  },
   errorMessage: { fileupload: 'egen feilvisning' },
   size: { fileupload: 'har ikke størrelsesvarianter' },
   role: {},

package/src/components/radio-group/index.ts

@@ -0,0 +1,4 @@
+import { PktRadioGroup } from './radio-group'
+
+export { PktRadioGroup }
+export default PktRadioGroup

package/src/components/radio-group/radio-group-context.ts

@@ -0,0 +1,8 @@
+import { createContext } from '@lit/context'
+import type { IPktOptionGroupContext } from '@/base-elements/input-element'
+
+export interface RadioGroupContext extends IPktOptionGroupContext {
+  required: boolean
+}
+
+export const radioGroupContext = createContext<RadioGroupContext>(Symbol('pkt-radio-group-context'))