@oslokommune/punkt-elements 13.3.1 → 13.4.1

package/src/components/button/button.test.ts

@@ -0,0 +1,514 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { fireEvent } from '@testing-library/dom'
+
+expect.extend(toHaveNoViolations)
+
+import './button'
+import { PktButton } from './button' // For type checking
+
+const waitForCustomElements = async () => {
+  await Promise.all([
+    customElements.whenDefined('pkt-button'),
+    customElements.whenDefined('pkt-icon'),
+  ])
+}
+
+// Helper function to create button markup
+const createButton = async (buttonProps = '', content = 'Test Button') => {
+  const container = document.createElement('div')
+  container.innerHTML = `
+    <pkt-button ${buttonProps}>
+      ${content}
+    </pkt-button>
+  `
+  document.body.appendChild(container)
+  await waitForCustomElements()
+  return container
+}
+
+// Cleanup after each test
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktButton', () => {
+  describe('Rendering and basic functionality', () => {
+    test('renders without errors', async () => {
+      const container = await createButton()
+
+      const pktButton = container.querySelector('pkt-button') as PktButton
+      expect(pktButton).toBeInTheDocument()
+
+      await pktButton.updateComplete
+      expect(pktButton).toBeTruthy()
+
+      const button = pktButton.querySelector('button')
+      expect(button).toBeInTheDocument()
+    })
+
+    test('renders with correct structure', async () => {
+      const container = await createButton('variant="icon-left" icon-name="user"', 'Click Me')
+
+      const pktButton = container.querySelector('pkt-button') as PktButton
+      await pktButton.updateComplete
+
+      const button = pktButton.querySelector('button')
+      const icon = button?.querySelector('pkt-icon')
+      const textSpan = button?.querySelector('.pkt-btn__text')
+
+      expect(button).toHaveClass('pkt-btn')
+      expect(icon).toHaveClass('pkt-btn__icon')
+      expect(textSpan).toHaveClass('pkt-btn__text')
+      expect(textSpan?.textContent?.trim()).toContain('Click Me')
+    })
+
+    test('renders text correctly', async () => {
+      const container = await createButton('', 'Button Text Content')
+
+      const pktButton = container.querySelector('pkt-button') as PktButton
+      await pktButton.updateComplete
+
+      const textSpan = pktButton.querySelector('.pkt-btn__text')
+      expect(textSpan).toBeInTheDocument()
+      expect(textSpan?.textContent?.trim()).toContain('Button Text Content')
+    })
+  })
+
+  describe('Properties and attributes', () => {
+    test('applies default properties correctly', async () => {
+      const container = await createButton()
+
+      const pktButton = container.querySelector('pkt-button') as PktButton
+      await pktButton.updateComplete
+
+      expect(pktButton.size).toBe('medium')
+      expect(pktButton.skin).toBe('primary')
+      expect(pktButton.variant).toBe('label-only')
+      expect(pktButton.type).toBe('button')
+      expect(pktButton.mode).toBe('light')
+      expect(pktButton.disabled).toBe(false)
+      expect(pktButton.isLoading).toBe(false)
+
+      const button = pktButton.querySelector('button')
+      expect(button).toHaveClass('pkt-btn')
+      expect(button).toHaveClass('pkt-btn--medium')
+      expect(button).toHaveClass('pkt-btn--primary')
+      expect(button).toHaveClass('pkt-btn--label-only')
+    })
+
+    test('applies different size properties correctly', async () => {
+      const sizes = ['small', 'medium', 'large'] as const
+
+      for (const size of sizes) {
+        const container = await createButton(`size="${size}"`)
+        const pktButton = container.querySelector('pkt-button') as PktButton
+        await pktButton.updateComplete
+
+        expect(pktButton.size).toBe(size)
+
+        const button = pktButton.querySelector('button')
+        expect(button).toHaveClass(`pkt-btn--${size}`)
+
+        // Cleanup for next iteration
+        container.remove()
+      }
+    })
+
+    test('applies different skin properties correctly', async () => {
+      const skins = ['primary', 'secondary', 'tertiary'] as const
+
+      for (const skin of skins) {
+        const container = await createButton(`skin="${skin}"`)
+        const pktButton = container.querySelector('pkt-button') as PktButton
+        await pktButton.updateComplete
+
+        expect(pktButton.skin).toBe(skin)
+
+        const button = pktButton.querySelector('button')
+        expect(button).toHaveClass(`pkt-btn--${skin}`)
+
+        // Cleanup for next iteration
+        container.remove()
+      }
+    })
+
+    test('applies different variant properties correctly', async () => {
+      const variants = [
+        'label-only',
+        'icon-left',
+        'icon-right',
+        'icon-only',
+        'icons-right-and-left',
+      ] as const
+
+      for (const variant of variants) {
+        const container = await createButton(
+          `variant="${variant}" icon-name="user" second-icon-name="star"`,
+        )
+        const pktButton = container.querySelector('pkt-button') as PktButton
+        await pktButton.updateComplete
+
+        expect(pktButton.variant).toBe(variant)
+
+        const button = pktButton.querySelector('button')
+        expect(button).toHaveClass(`pkt-btn--${variant}`)
+
+        // Check icon rendering based on variant
+        const icons = button?.querySelectorAll('pkt-icon:not(.pkt-btn__spinner)')
+        if (variant === 'label-only') {
+          expect(icons).toHaveLength(0)
+        } else if (variant === 'icons-right-and-left') {
+          expect(icons).toHaveLength(2)
+        } else {
+          expect(icons).toHaveLength(1)
+        }
+
+        // Cleanup for next iteration
+        container.remove()
+      }
+    })
+
+    test('applies different color properties correctly', async () => {
+      const colors = ['blue', 'green', 'red', 'yellow'] as const
+
+      for (const color of colors) {
+        const container = await createButton(`color="${color}"`)
+        const pktButton = container.querySelector('pkt-button') as PktButton
+        await pktButton.updateComplete
+
+        expect(pktButton.color).toBe(color)
+
+        const button = pktButton.querySelector('button')
+        expect(button).toHaveClass(`pkt-btn--${color}`)
+
+        // Cleanup for next iteration
+        container.remove()
+      }
+    })
+
+    test('handles type property correctly', async () => {
+      const types = ['button', 'submit', 'reset'] as const
+
+      for (const type of types) {
+        const container = await createButton(`type="${type}"`)
+        const pktButton = container.querySelector('pkt-button') as PktButton
+        await pktButton.updateComplete
+
+        expect(pktButton.type).toBe(type)
+
+        const button = pktButton.querySelector('button')
+        expect(button?.getAttribute('type')).toBe(type)
+
+        // Cleanup for next iteration
+        container.remove()
+      }
+    })
+
+    test('handles icon properties correctly', async () => {
+      const container = await createButton('variant="icon-left" icon-name="user"')
+
+      const pktButton = container.querySelector('pkt-button') as PktButton
+      await pktButton.updateComplete
+
+      expect(pktButton.iconName).toBe('user')
+
+      const icon = pktButton.querySelector('pkt-icon:not(.pkt-btn__spinner)')
+      expect(icon?.getAttribute('name')).toBe('user')
+      expect(icon).toHaveClass('pkt-btn__icon')
+    })
+
+    test('handles second icon for icons-right-and-left variant', async () => {
+      const container = await createButton('variant="icons-right-and-left"')
+      const pktButton = container.querySelector('pkt-button') as PktButton
+
+      // Set both icon names as properties
+      pktButton.iconName = 'home'
+      pktButton.secondIconName = 'star'
+      await pktButton.updateComplete
+
+      expect(pktButton.iconName).toBe('home')
+      expect(pktButton.secondIconName).toBe('star')
+
+      const icons = pktButton.querySelectorAll('pkt-icon:not(.pkt-btn__spinner)')
+      expect(icons).toHaveLength(2)
+      expect(icons[0]?.getAttribute('name')).toBe('home')
+      expect(icons[1]?.getAttribute('name')).toBe('star')
+    })
+  })
+
+  describe('Disabled state', () => {
+    test('handles disabled property correctly', async () => {
+      const container = await createButton('disabled')
+
+      const pktButton = container.querySelector('pkt-button') as PktButton
+      await pktButton.updateComplete
+
+      expect(pktButton.disabled).toBe(true)
+
+      const button = pktButton.querySelector('button')
+      expect(button).toHaveClass('pkt-btn--disabled')
+      expect(button?.hasAttribute('disabled')).toBe(true)
+      expect(button?.getAttribute('aria-disabled')).toBe('true')
+    })
+
+    test('prevents click events when disabled', async () => {
+      const container = await createButton('disabled')
+      const clickSpy = jest.fn()
+
+      const pktButton = container.querySelector('pkt-button') as PktButton
+      await pktButton.updateComplete
+
+      pktButton.addEventListener('click', clickSpy)
+
+      const button = pktButton.querySelector('button')
+      fireEvent.click(button!)
+
+      expect(clickSpy).not.toHaveBeenCalled()
+    })
+
+    test('prevents keyboard events when disabled', async () => {
+      const container = await createButton('disabled')
+      const clickSpy = jest.fn()
+
+      const pktButton = container.querySelector('pkt-button') as PktButton
+      await pktButton.updateComplete
+
+      pktButton.addEventListener('click', clickSpy)
+
+      const button = pktButton.querySelector('button')
+      fireEvent.keyDown(button!, { key: 'Enter' })
+      fireEvent.keyDown(button!, { key: ' ' })
+
+      expect(clickSpy).not.toHaveBeenCalled()
+    })
+
+    test('converts string "false" to boolean false for disabled', async () => {
+      const container = await createButton('disabled="false"')
+
+      const pktButton = container.querySelector('pkt-button') as PktButton
+      await pktButton.updateComplete
+
+      expect(pktButton.disabled).toBe(false)
+
+      const button = pktButton.querySelector('button')
+      expect(button).not.toHaveClass('pkt-btn--disabled')
+      expect(button?.hasAttribute('disabled')).toBe(false)
+    })
+  })
+
+  describe('Loading state', () => {
+    test('handles isLoading property correctly', async () => {
+      const container = await createButton()
+      const pktButton = container.querySelector('pkt-button') as PktButton
+
+      // Set isLoading as a property
+      pktButton.isLoading = true
+      await pktButton.updateComplete
+
+      expect(pktButton.isLoading).toBe(true)
+
+      const button = pktButton.querySelector('button')
+      expect(button).toHaveClass('pkt-btn--isLoading')
+      expect(button?.getAttribute('aria-busy')).toBe('true')
+      expect(button?.getAttribute('aria-disabled')).toBe('true')
+    })
+
+    test('renders loading spinner when isLoading is true', async () => {
+      const container = await createButton()
+      const pktButton = container.querySelector('pkt-button') as PktButton
+
+      // Set isLoading as a property
+      pktButton.isLoading = true
+      await pktButton.updateComplete
+
+      const spinner = pktButton.querySelector('.pkt-btn__spinner')
+      expect(spinner).toBeInTheDocument()
+      expect(spinner?.getAttribute('name')).toBe('spinner-blue')
+    })
+
+    test('prevents click events when loading', async () => {
+      const container = await createButton()
+      const clickSpy = jest.fn()
+
+      const pktButton = container.querySelector('pkt-button') as PktButton
+
+      // Set isLoading as a property
+      pktButton.isLoading = true
+      await pktButton.updateComplete
+
+      pktButton.addEventListener('click', clickSpy)
+
+      const button = pktButton.querySelector('button')
+      fireEvent.click(button!)
+
+      expect(clickSpy).not.toHaveBeenCalled()
+    })
+
+    test('uses custom loading animation path', async () => {
+      const customPath = 'https://custom.example.com/animations/'
+      const container = await createButton('isLoading')
+      const pktButton = container.querySelector('pkt-button') as PktButton
+
+      pktButton.loadingAnimationPath = customPath
+      await pktButton.updateComplete
+
+      expect(pktButton.loadingAnimationPath).toBe(customPath)
+
+      const spinner = pktButton.querySelector('.pkt-btn__spinner')
+      expect(spinner?.getAttribute('path')).toBe(customPath)
+    })
+
+    test('converts string "false" to boolean false for isLoading', async () => {
+      const container = await createButton('isLoading="false"')
+
+      const pktButton = container.querySelector('pkt-button') as PktButton
+      await pktButton.updateComplete
+
+      expect(pktButton.isLoading).toBe(false)
+
+      const button = pktButton.querySelector('button')
+      expect(button).not.toHaveClass('pkt-btn--isLoading')
+    })
+  })
+
+  describe('Form integration', () => {
+    test('handles form attribute correctly', async () => {
+      const container = await createButton('form="test-form" type="submit"')
+
+      const pktButton = container.querySelector('pkt-button') as PktButton
+      await pktButton.updateComplete
+
+      expect(pktButton.form).toBe('test-form')
+
+      const button = pktButton.querySelector('button')
+      expect(button?.getAttribute('form')).toBe('test-form')
+    })
+
+    test('works as submit button', async () => {
+      const container = await createButton('type="submit"')
+
+      const pktButton = container.querySelector('pkt-button') as PktButton
+      await pktButton.updateComplete
+
+      const button = pktButton.querySelector('button')
+      expect(button?.getAttribute('type')).toBe('submit')
+    })
+  })
+
+  describe('Click functionality', () => {
+    test('allows click events when not disabled or loading', async () => {
+      const container = await createButton()
+      const clickSpy = jest.fn()
+
+      const pktButton = container.querySelector('pkt-button') as PktButton
+      await pktButton.updateComplete
+
+      pktButton.addEventListener('click', clickSpy)
+
+      const button = pktButton.querySelector('button')
+      fireEvent.click(button!)
+
+      expect(clickSpy).toHaveBeenCalledTimes(1)
+    })
+
+    test('allows keyboard activation when not disabled or loading', async () => {
+      const container = await createButton()
+      const clickSpy = jest.fn()
+
+      const pktButton = container.querySelector('pkt-button') as PktButton
+      await pktButton.updateComplete
+
+      pktButton.addEventListener('click', clickSpy)
+
+      const button = pktButton.querySelector('button')
+      fireEvent.keyDown(button!, { key: 'Enter' })
+
+      // Note: Native button handles Enter key, so we just test that events aren't prevented
+      // The actual click event would be triggered by the browser
+    })
+  })
+
+  describe('Accessibility', () => {
+    test('has correct ARIA attributes', async () => {
+      const container = await createButton('disabled')
+      const pktButton = container.querySelector('pkt-button') as PktButton
+
+      // Set isLoading as a property
+      pktButton.isLoading = true
+      await pktButton.updateComplete
+
+      const button = pktButton.querySelector('button')
+
+      expect(button?.getAttribute('aria-disabled')).toBe('true')
+      expect(button?.getAttribute('aria-busy')).toBe('true')
+      expect(button?.hasAttribute('disabled')).toBe(true)
+    })
+
+    test('provides semantic button structure', async () => {
+      const container = await createButton()
+
+      const pktButton = container.querySelector('pkt-button') as PktButton
+      await pktButton.updateComplete
+
+      const button = pktButton.querySelector('button')
+
+      expect(button).toBeInTheDocument()
+      expect(button?.tagName.toLowerCase()).toBe('button')
+      expect(button?.getAttribute('type')).toBe('button')
+    })
+
+    test('renders with no WCAG errors with axe - default button', async () => {
+      const container = await createButton('', 'Click me')
+
+      const pktButton = container.querySelector('pkt-button') as PktButton
+      await pktButton.updateComplete
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('renders with no WCAG errors with axe - icon button', async () => {
+      const container = await createButton(
+        'variant="icon-left" icon-name="user" skin="secondary"',
+        'User Profile',
+      )
+
+      const pktButton = container.querySelector('pkt-button') as PktButton
+      await pktButton.updateComplete
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('renders with no WCAG errors with axe - disabled button', async () => {
+      const container = await createButton('disabled', 'Disabled Button')
+
+      const pktButton = container.querySelector('pkt-button') as PktButton
+      await pktButton.updateComplete
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('renders with no WCAG errors with axe - loading button', async () => {
+      const container = await createButton('isLoading', 'Loading...')
+
+      const pktButton = container.querySelector('pkt-button') as PktButton
+      await pktButton.updateComplete
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('renders with no WCAG errors with axe - submit button', async () => {
+      const container = await createButton('type="submit" color="green"', 'Submit Form')
+
+      const pktButton = container.querySelector('pkt-button') as PktButton
+      await pktButton.updateComplete
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/button/button.ts

@@ -7,6 +7,8 @@ import { classMap } from 'lit/directives/class-map.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { createRef, Ref, ref } from 'lit/directives/ref.js'
 
+import '@/components/icon'
+
 // Allow global override of animation assets path
 window.pktAnimationPath =
   window.pktAnimationPath || 'https://punkt-cdn.oslo.kommune.no/latest/animations/'

package/dist/backlink-C5jQRMwJ.cjs

@@ -1,13 +0,0 @@
-"use strict";const i=require("./element-6DBpyGQm.cjs"),c=require("./if-defined-Cni-RHLS.cjs");var p=Object.defineProperty,o=Object.getOwnPropertyDescriptor,n=(k,t,a,r)=>{for(var e=r>1?void 0:r?o(t,a):t,l=k.length-1,s;l>=0;l--)(s=k[l])&&(e=(r?s(t,a,e):s(e))||e);return r&&e&&p(t,a,e),e};exports.PktBackLink=class extends i.PktElement{constructor(){super(...arguments),this.href="",this.text="Forsiden",this.ariaLabel=""}attributeChangedCallback(t,a,r){t==="arialabel"&&this.removeAttribute("arialabel"),t==="href"&&this.removeAttribute("href"),t==="text"&&this.removeAttribute("text"),super.attributeChangedCallback(t,a,r)}render(){return i.x`<nav
-      class="pkt-back-link"
-      aria-label=${this.ariaLabel||"Gå tilbake til forrige side"}
-    >
-      <a href=${c.o(this.href||"/")} class="pkt-link pkt-link--icon-left"
-        ><pkt-icon
-          class="pkt-back-link__icon pkt-icon pkt-link__icon"
-          name="chevron-thin-left"
-          aria-hidden="true"
-        ></pkt-icon
-        ><span class="pkt-back-link__text">${this.text}</span></a
-      >
-    </nav>`}};n([i.n({type:String,reflect:!0})],exports.PktBackLink.prototype,"href",2);n([i.n({type:String,reflect:!0})],exports.PktBackLink.prototype,"text",2);n([i.n({type:String,reflect:!0})],exports.PktBackLink.prototype,"ariaLabel",2);exports.PktBackLink=n([i.t("pkt-backlink")],exports.PktBackLink);