@oslokommune/punkt-elements 19.5.2 → 19.6.0

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

@@ -64,6 +64,15 @@ const OMITTED: Record<string, Partial<Record<keyof typeof COMPONENTS, string>>>
     timepicker: 'teller over feltet er aldri støttet',
     fileupload: 'teller over feltet er aldri støttet',
   },
+  layout: {
+    textinput: 'layout gjelder alternativer i en gruppe, ikke ett felt',
+    textarea: 'layout gjelder alternativer i en gruppe, ikke ett felt',
+    select: 'layout gjelder alternativer i en gruppe, ikke ett felt',
+    combobox: 'layout gjelder alternativer i en gruppe, ikke ett felt',
+    datepicker: 'layout gjelder alternativer i en gruppe, ikke ett felt',
+    timepicker: 'layout gjelder alternativer i en gruppe, ikke ett felt',
+    fileupload: 'layout gjelder alternativer i en gruppe, ikke ett felt',
+  },
   hasFieldset: {
     fileupload: 'ikke støttet',
   },

package/src/components/radiobutton/radiobutton.test.ts

@@ -271,3 +271,29 @@ describe('pkt-radiobutton', () => {
     expect(results).toHaveNoViolations()
   })
 })
+
+describe('pkt-radiobutton inputSize', () => {
+  const root = async (attributes = '') => {
+    document.body.innerHTML = `<pkt-radiobutton id="s" name="s" label="Valg" ${attributes}></pkt-radiobutton>`
+    const el = document.querySelector('pkt-radiobutton') as HTMLElement & { updateComplete: Promise<unknown> }
+    await el.updateComplete
+    return el.querySelector('.pkt-input-check') as HTMLElement
+  }
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  test('adds no size class without input-size, so the size is inherited', async () => {
+    expect((await root()).className).toBe('pkt-input-check')
+  })
+
+  test('adds the size class for input-size', async () => {
+    expect(await root('input-size="small"')).toHaveClass('pkt-input-check--small')
+    expect(await root('input-size="xsmall"')).toHaveClass('pkt-input-check--xsmall')
+  })
+
+  test('adds the medium class when medium is set explicitly', async () => {
+    expect(await root('input-size="medium"')).toHaveClass('pkt-input-check--medium')
+  })
+})

package/src/components/radiobutton/radiobutton.ts

@@ -5,6 +5,7 @@ import { Ref, createRef, ref } from 'lit/directives/ref.js'
 import { html, nothing } from 'lit'
 import { classMap } from 'lit/directives/class-map.js'
 import { ElementProps } from '@/types/typeUtils'
+import type { TPktInputSize } from 'shared-types'
 
 type Props = ElementProps<
   PktRadioButton,
@@ -27,6 +28,7 @@ export class PktRadioButton extends PktInputElement<Props> {
   @property({ type: Boolean }) hasTile: boolean = false
   @property({ type: Boolean, reflect: true }) checked: boolean | string | null = null
   @property({ type: String, reflect: true }) type: string = 'radio'
+  @property({ type: String, attribute: 'input-size' }) inputSize: TPktInputSize | undefined = undefined
   @property({ type: String }) tagText: string | null = null
   @property({ type: Boolean }) optionalTag: boolean = false
   /** @deprecated Bruk `strings={{ forms: { optional: '…' } }}` eller `setPktStrings()`. */
@@ -113,7 +115,7 @@ export class PktRadioButton extends PktInputElement<Props> {
     }
 
     return html`
-      <div class="pkt-input-check">
+      <div class="pkt-input-check${this.inputSize ? ` pkt-input-check--${this.inputSize}` : ''}">
         <div class=${inputTileClasses}>
           <input
             id=${this.id + '-internal'}