@oslokommune/punkt-elements 13.4.1 → 13.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-elements",
-  "version": "13.4.1",
+  "version": "13.4.2",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -69,5 +69,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "5768a452bf48f03c7448b9706ad1cb2c06d3fdc4"
+  "gitHead": "b8dc1a2d10d756fb0fc6babb0f3b03b4d8eea95a"
 }

package/src/components/card/card.test.ts

@@ -0,0 +1,592 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+
+expect.extend(toHaveNoViolations)
+
+import './card'
+import { PktCard } from './card'
+
+const waitForCustomElements = async () => {
+  await customElements.whenDefined('pkt-card')
+}
+
+// Helper function to create card markup
+const createCard = async (cardProps = '', content = 'Card content') => {
+  const container = document.createElement('div')
+  container.innerHTML = `
+    <pkt-card ${cardProps}>
+      ${content}
+    </pkt-card>
+  `
+  document.body.appendChild(container)
+  await waitForCustomElements()
+  return container
+}
+
+// Cleanup after each test
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktCard', () => {
+  describe('Rendering and basic functionality', () => {
+    test('renders without errors', async () => {
+      const container = await createCard()
+
+      const card = container.querySelector('pkt-card') as PktCard
+      expect(card).toBeInTheDocument()
+
+      await card.updateComplete
+      expect(card).toBeTruthy()
+
+      const article = card.querySelector('article')
+      expect(article).toBeInTheDocument()
+      expect(article).toHaveClass('pkt-card')
+    })
+
+    test('renders content in slot', async () => {
+      const container = await createCard('', '<p>Test content here</p>')
+
+      const card = container.querySelector('pkt-card') as PktCard
+      await card.updateComplete
+
+      const content = card.querySelector('.pkt-card__content')
+      expect(content).toBeInTheDocument()
+      expect(content?.textContent).toContain('Test content here')
+    })
+
+    test('renders basic structure correctly', async () => {
+      const container = await createCard('heading="Test Heading"', 'Test content')
+
+      const card = container.querySelector('pkt-card') as PktCard
+      await card.updateComplete
+
+      const article = card.querySelector('article')
+      const wrapper = article?.querySelector('.pkt-card__wrapper')
+      const header = wrapper?.querySelector('.pkt-card__header')
+      const content = wrapper?.querySelector('.pkt-card__content')
+
+      expect(wrapper).toBeInTheDocument()
+      expect(header).toBeInTheDocument()
+      expect(content).toBeInTheDocument()
+    })
+  })
+
+  describe('Properties and attributes', () => {
+    test('applies default properties correctly', async () => {
+      const container = await createCard()
+
+      const card = container.querySelector('pkt-card') as PktCard
+      await card.updateComplete
+
+      expect(card.skin).toBe('outlined')
+      expect(card.layout).toBe('vertical')
+      expect(card.padding).toBe('default')
+      expect(card.borderOnHover).toBe(true)
+      expect(card.tagPosition).toBe('top')
+      expect(card.imageShape).toBe('square')
+      expect(card.openLinkInNewTab).toBe(false)
+      expect(card.headinglevel).toBe(3)
+
+      const article = card.querySelector('article')
+      expect(article).toHaveClass('pkt-card--outlined')
+      expect(article).toHaveClass('pkt-card--vertical')
+      expect(article).toHaveClass('pkt-card--padding-default')
+      expect(article).toHaveClass('pkt-card--border-on-hover')
+    })
+
+    test('applies different skin properties correctly', async () => {
+      const skins = ['outlined', 'outlined-beige', 'gray', 'beige', 'green', 'blue']
+
+      for (const skin of skins) {
+        const container = await createCard(`skin="${skin}"`)
+        const card = container.querySelector('pkt-card') as PktCard
+        await card.updateComplete
+
+        expect(card.skin).toBe(skin)
+        expect(card.getAttribute('skin')).toBe(skin)
+
+        const article = card.querySelector('article')
+        expect(article).toHaveClass(`pkt-card--${skin}`)
+
+        // Cleanup for next iteration
+        container.remove()
+      }
+    })
+
+    test('rejects unsupported skin values and falls back to default', async () => {
+      const unsupportedSkins = ['zebra', 'goldenrod', 'hotpink', 'rainbow', 'invalid']
+
+      for (const invalidSkin of unsupportedSkins) {
+        const container = await createCard(`skin="${invalidSkin}"`)
+        const card = container.querySelector('pkt-card') as PktCard
+        await card.updateComplete
+
+        // The component should now validate skin values and fall back to default
+        expect(card.skin).not.toBe(invalidSkin)
+        expect(card.skin).toBe('outlined') // Should fall back to default
+
+        const article = card.querySelector('article')
+        // Should not have the invalid CSS class
+        expect(article).not.toHaveClass(`pkt-card--${invalidSkin}`)
+        // Should have the default skin class instead
+        expect(article).toHaveClass('pkt-card--outlined')
+
+        // Cleanup for next iteration
+        container.remove()
+      }
+    })
+
+    test('validates skin values and logs warnings for invalid skins', async () => {
+      // Spy on console.warn to check if warning is logged
+      const consoleSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+
+      const container = await createCard(`skin="zebra"`)
+      const card = container.querySelector('pkt-card') as PktCard
+      await card.updateComplete
+
+      // Should have logged a warning with the correct default value from spec
+      expect(consoleSpy).toHaveBeenCalledWith(
+        'Invalid skin value "zebra". Using default skin "outlined".',
+      )
+
+      // Should fall back to default from spec
+      expect(card.skin).toBe('outlined')
+
+      // Restore console.warn
+      consoleSpy.mockRestore()
+    })
+
+    test('applies different layout properties correctly', async () => {
+      const layouts = ['vertical', 'horizontal']
+
+      for (const layout of layouts) {
+        const container = await createCard(`layout="${layout}"`)
+        const card = container.querySelector('pkt-card') as PktCard
+        await card.updateComplete
+
+        expect(card.layout).toBe(layout)
+        expect(card.getAttribute('layout')).toBe(layout)
+
+        const article = card.querySelector('article')
+        expect(article).toHaveClass(`pkt-card--${layout}`)
+
+        // Cleanup for next iteration
+        container.remove()
+      }
+    })
+
+    test('applies different padding properties correctly', async () => {
+      const paddingOptions = ['none', 'default']
+
+      for (const padding of paddingOptions) {
+        const container = await createCard(`padding="${padding}"`)
+        const card = container.querySelector('pkt-card') as PktCard
+        await card.updateComplete
+
+        expect(card.padding).toBe(padding)
+        expect(card.getAttribute('padding')).toBe(padding)
+
+        const article = card.querySelector('article')
+        expect(article).toHaveClass(`pkt-card--padding-${padding}`)
+
+        // Cleanup for next iteration
+        container.remove()
+      }
+    })
+
+    test('handles borderOnHover property correctly', async () => {
+      // Test with borderOnHover false
+      const container = await createCard()
+      const card = container.querySelector('pkt-card') as PktCard
+      card.borderOnHover = false
+      await card.updateComplete
+
+      expect(card.borderOnHover).toBe(false)
+
+      const article = card.querySelector('article')
+      expect(article).not.toHaveClass('pkt-card--border-on-hover')
+    })
+  })
+
+  describe('Heading functionality', () => {
+    test('renders heading when provided', async () => {
+      const container = await createCard('heading="Test Card Title"')
+
+      const card = container.querySelector('pkt-card') as PktCard
+      await card.updateComplete
+
+      expect(card.heading).toBe('Test Card Title')
+
+      const heading = card.querySelector('pkt-heading')
+      expect(heading).toBeInTheDocument()
+      expect(heading).toHaveClass('pkt-card__heading')
+      expect(heading?.textContent?.trim()).toBe('Test Card Title')
+    })
+
+    test('renders subheading when provided', async () => {
+      const container = await createCard('subheading="Test Subheading"')
+
+      const card = container.querySelector('pkt-card') as PktCard
+      await card.updateComplete
+
+      expect(card.subheading).toBe('Test Subheading')
+
+      const subheading = card.querySelector('.pkt-card__subheading')
+      expect(subheading).toBeInTheDocument()
+      expect(subheading?.textContent).toBe('Test Subheading')
+    })
+
+    test('applies correct heading level', async () => {
+      const container = await createCard('heading="Test" headinglevel="2"')
+
+      const card = container.querySelector('pkt-card') as PktCard
+      await card.updateComplete
+
+      expect(card.headinglevel).toBe(2)
+
+      const heading = card.querySelector('pkt-heading')
+      expect(heading?.getAttribute('level')).toBe('2')
+    })
+
+    test('does not render header when no heading or subheading', async () => {
+      const container = await createCard()
+
+      const card = container.querySelector('pkt-card') as PktCard
+      await card.updateComplete
+
+      const header = card.querySelector('.pkt-card__header')
+      expect(header).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Link functionality', () => {
+    test('renders as regular card when no clickCardLink', async () => {
+      const container = await createCard('heading="Test Title"')
+
+      const card = container.querySelector('pkt-card') as PktCard
+      await card.updateComplete
+
+      expect(card.clickCardLink).toBe(null)
+
+      const heading = card.querySelector('pkt-heading')
+      const link = card.querySelector('.pkt-card__link')
+      expect(heading).toBeInTheDocument()
+      expect(link).not.toBeInTheDocument()
+
+      const article = card.querySelector('article')
+      expect(article?.getAttribute('aria-label')).toBe('Test Title')
+    })
+
+    test('renders as link card when clickCardLink provided', async () => {
+      const container = await createCard('heading="Test Title"')
+      const card = container.querySelector('pkt-card') as PktCard
+      card.clickCardLink = '/test-url'
+      await card.updateComplete
+
+      expect(card.clickCardLink).toBe('/test-url')
+
+      const linkHeading = card.querySelector('.pkt-card__link-heading')
+      const link = card.querySelector('.pkt-card__link')
+      expect(linkHeading).toBeInTheDocument()
+      expect(link).toBeInTheDocument()
+      expect(link?.getAttribute('href')).toBe('/test-url')
+      expect(link?.textContent).toBe('Test Title')
+
+      const article = card.querySelector('article')
+      expect(article?.getAttribute('aria-label')).toBe('Test Title lenkekort')
+    })
+
+    test('handles openLinkInNewTab correctly', async () => {
+      const container = await createCard('heading="Test"')
+      const card = container.querySelector('pkt-card') as PktCard
+      card.clickCardLink = '/test'
+      card.openLinkInNewTab = true
+      await card.updateComplete
+
+      expect(card.openLinkInNewTab).toBe(true)
+
+      const link = card.querySelector('.pkt-card__link')
+      expect(link?.getAttribute('target')).toBe('_blank')
+    })
+
+    test('applies correct aria-label for link cards', async () => {
+      const container = await createCard()
+      const card = container.querySelector('pkt-card') as PktCard
+      card.clickCardLink = '/test'
+      card.ariaLabel = 'Custom aria label'
+      await card.updateComplete
+
+      const article = card.querySelector('article')
+      expect(article?.getAttribute('aria-label')).toBe('Custom aria label')
+    })
+  })
+
+  describe('Image functionality', () => {
+    test('renders image when provided', async () => {
+      const container = await createCard()
+      const card = container.querySelector('pkt-card') as PktCard
+      card.image = { src: '/test-image.jpg', alt: 'Test image' }
+      await card.updateComplete
+
+      expect(card.image.src).toBe('/test-image.jpg')
+      expect(card.image.alt).toBe('Test image')
+
+      const imageDiv = card.querySelector('.pkt-card__image')
+      const img = imageDiv?.querySelector('img')
+      expect(imageDiv).toBeInTheDocument()
+      expect(img).toBeInTheDocument()
+      expect(img?.getAttribute('src')).toBe('/test-image.jpg')
+      expect(img?.getAttribute('alt')).toBe('Test image')
+    })
+
+    test('does not render image when not provided', async () => {
+      const container = await createCard()
+
+      const card = container.querySelector('pkt-card') as PktCard
+      await card.updateComplete
+
+      const imageDiv = card.querySelector('.pkt-card__image')
+      expect(imageDiv).not.toBeInTheDocument()
+    })
+
+    test('applies correct image shape classes', async () => {
+      const shapes = ['square', 'round'] as const
+
+      for (const shape of shapes) {
+        const container = await createCard()
+        const card = container.querySelector('pkt-card') as PktCard
+        card.image = { src: '/test.jpg', alt: 'Test' }
+        card.imageShape = shape
+        await card.updateComplete
+
+        expect(card.imageShape).toBe(shape)
+
+        const imageDiv = card.querySelector('.pkt-card__image')
+        expect(imageDiv).toHaveClass(`pkt-card__image-${shape}`)
+
+        // Cleanup for next iteration
+        container.remove()
+      }
+    })
+  })
+
+  describe('Tags functionality', () => {
+    test('renders tags when provided', async () => {
+      const container = await createCard()
+      const card = container.querySelector('pkt-card') as PktCard
+      card.tags = [
+        { text: 'Tag 1', skin: 'blue' },
+        { text: 'Tag 2', skin: 'green' },
+      ]
+      await card.updateComplete
+
+      expect(card.tags).toHaveLength(2)
+
+      const tagsContainer = card.querySelector('.pkt-card__tags')
+      const tags = tagsContainer?.querySelectorAll('pkt-tag')
+      expect(tagsContainer).toBeInTheDocument()
+      expect(tags).toHaveLength(2)
+      expect(tagsContainer?.getAttribute('aria-label')).toBe('merkelapper')
+    })
+
+    test('renders single tag with correct aria-label', async () => {
+      const container = await createCard()
+      const card = container.querySelector('pkt-card') as PktCard
+      card.tags = [{ text: 'Single Tag' }]
+      await card.updateComplete
+
+      const tagsContainer = card.querySelector('.pkt-card__tags')
+      expect(tagsContainer?.getAttribute('aria-label')).toBe('merkelapp')
+    })
+
+    test('applies correct tag position classes', async () => {
+      const positions = ['top', 'bottom'] as const
+
+      for (const position of positions) {
+        const container = await createCard()
+        const card = container.querySelector('pkt-card') as PktCard
+        card.tags = [{ text: 'Test Tag' }]
+        card.tagPosition = position
+        await card.updateComplete
+
+        expect(card.tagPosition).toBe(position)
+
+        const tagsContainer = card.querySelector('.pkt-card__tags')
+        expect(tagsContainer).toHaveClass(`pkt-card__tags-${position}`)
+
+        // Cleanup for next iteration
+        container.remove()
+      }
+    })
+
+    test('does not render tags when array is empty', async () => {
+      const container = await createCard()
+
+      const card = container.querySelector('pkt-card') as PktCard
+      await card.updateComplete
+
+      const tagsContainer = card.querySelector('.pkt-card__tags')
+      expect(tagsContainer).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Metadata functionality', () => {
+    test('renders metadata when provided', async () => {
+      const container = await createCard()
+      const card = container.querySelector('pkt-card') as PktCard
+      card.metaLead = 'Author Name'
+      card.metaTrail = '2023-12-01'
+      await card.updateComplete
+
+      expect(card.metaLead).toBe('Author Name')
+      expect(card.metaTrail).toBe('2023-12-01')
+
+      const metadata = card.querySelector('.pkt-card__metadata')
+      const metaLead = metadata?.querySelector('.pkt-card__metadata-lead')
+      const metaTrail = metadata?.querySelector('.pkt-card__metadata-trail')
+
+      expect(metadata).toBeInTheDocument()
+      expect(metaLead).toBeInTheDocument()
+      expect(metaTrail).toBeInTheDocument()
+      expect(metaLead?.textContent).toBe('Author Name')
+      expect(metaTrail?.textContent).toBe('2023-12-01')
+    })
+
+    test('renders only metaLead when metaTrail not provided', async () => {
+      const container = await createCard()
+      const card = container.querySelector('pkt-card') as PktCard
+      card.metaLead = 'Author Only'
+      await card.updateComplete
+
+      const metadata = card.querySelector('.pkt-card__metadata')
+      const metaLead = metadata?.querySelector('.pkt-card__metadata-lead')
+      const metaTrail = metadata?.querySelector('.pkt-card__metadata-trail')
+
+      expect(metadata).toBeInTheDocument()
+      expect(metaLead).toBeInTheDocument()
+      expect(metaTrail).not.toBeInTheDocument()
+      expect(metaLead?.textContent).toBe('Author Only')
+    })
+
+    test('renders only metaTrail when metaLead not provided', async () => {
+      const container = await createCard()
+      const card = container.querySelector('pkt-card') as PktCard
+      card.metaTrail = 'Date Only'
+      await card.updateComplete
+
+      const metadata = card.querySelector('.pkt-card__metadata')
+      const metaLead = metadata?.querySelector('.pkt-card__metadata-lead')
+      const metaTrail = metadata?.querySelector('.pkt-card__metadata-trail')
+
+      expect(metadata).toBeInTheDocument()
+      expect(metaLead).not.toBeInTheDocument()
+      expect(metaTrail).toBeInTheDocument()
+      expect(metaTrail?.textContent).toBe('Date Only')
+    })
+
+    test('does not render metadata when neither provided', async () => {
+      const container = await createCard()
+
+      const card = container.querySelector('pkt-card') as PktCard
+      await card.updateComplete
+
+      const metadata = card.querySelector('.pkt-card__metadata')
+      expect(metadata).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Content placement and structure', () => {
+    test('renders content elements in correct order', async () => {
+      const container = await createCard(
+        'heading="Test Title" subheading="Test Sub"',
+        'Main content here',
+      )
+      const card = container.querySelector('pkt-card') as PktCard
+      card.tags = [{ text: 'Test Tag' }]
+      card.image = { src: '/test.jpg', alt: 'Test' }
+      card.metaLead = 'Author'
+      card.metaTrail = 'Date'
+      await card.updateComplete
+
+      const article = card.querySelector('article')
+      const children = Array.from(article?.children || [])
+
+      // Should have image first, then wrapper
+      expect(children[0]).toHaveClass('pkt-card__image')
+      expect(children[1]).toHaveClass('pkt-card__wrapper')
+
+      const wrapper = children[1]
+      const wrapperChildren = Array.from(wrapper?.children || [])
+
+      // Order within wrapper: tags (top), header, content, metadata
+      expect(wrapperChildren[0]).toHaveClass('pkt-card__tags-top')
+      expect(wrapperChildren[1]).toHaveClass('pkt-card__header')
+      expect(wrapperChildren[2]).toHaveClass('pkt-card__content')
+      expect(wrapperChildren[3]).toHaveClass('pkt-card__metadata')
+    })
+
+    test('places tags at bottom when tagPosition is bottom', async () => {
+      const container = await createCard('heading="Test Title"', 'Main content')
+      const card = container.querySelector('pkt-card') as PktCard
+      card.tags = [{ text: 'Test Tag' }]
+      card.tagPosition = 'bottom'
+      await card.updateComplete
+
+      const wrapper = card.querySelector('.pkt-card__wrapper')
+      const wrapperChildren = Array.from(wrapper?.children || [])
+
+      // Order: header, content, tags (bottom)
+      expect(wrapperChildren[0]).toHaveClass('pkt-card__header')
+      expect(wrapperChildren[1]).toHaveClass('pkt-card__content')
+      expect(wrapperChildren[2]).toHaveClass('pkt-card__tags-bottom')
+    })
+  })
+
+  describe('Accessibility', () => {
+    test('has no accessibility violations', async () => {
+      const container = await createCard(
+        'heading="Accessible Card" aria-label="Test card"',
+        'Accessible content',
+      )
+
+      const card = container.querySelector('pkt-card') as PktCard
+      await card.updateComplete
+
+      const results = await axe(card)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('applies correct ARIA attributes', async () => {
+      const container = await createCard('heading="Test"')
+      const card = container.querySelector('pkt-card') as PktCard
+      card.ariaLabel = 'Custom accessible label'
+      await card.updateComplete
+
+      expect(card.ariaLabel).toBe('Custom accessible label')
+
+      const article = card.querySelector('article')
+      expect(article?.getAttribute('aria-label')).toBe('Custom accessible label')
+    })
+
+    test('falls back to heading for aria-label when no explicit aria-label', async () => {
+      const container = await createCard('heading="Default Aria Label"')
+
+      const card = container.querySelector('pkt-card') as PktCard
+      await card.updateComplete
+
+      const article = card.querySelector('article')
+      expect(article?.getAttribute('aria-label')).toBe('Default Aria Label')
+    })
+
+    test('falls back to "kort" when no heading or aria-label', async () => {
+      const container = await createCard()
+
+      const card = container.querySelector('pkt-card') as PktCard
+      await card.updateComplete
+
+      const article = card.querySelector('article')
+      expect(article?.getAttribute('aria-label')).toBe('kort')
+    })
+  })
+})

package/src/components/card/card.ts

@@ -10,6 +10,7 @@ import { IPktHeading } from '../heading'
 import specs from 'componentSpecs/card.json'
 import '@/components/icon'
 import '@/components/tag'
+import '@/components/heading'
 import { IAriaAttributes } from '@/types/aria'
 
 export type TCardSkin = 'outlined' | 'outlined-beige' | 'gray' | 'beige' | 'green' | 'blue'
@@ -67,7 +68,29 @@ export class PktCard extends PktElement implements IPktCard {
   @property({ type: String }) imageShape: TCardImageShape = 'square'
   @property({ type: Boolean }) openLinkInNewTab: boolean = false
   @property({ type: String }) padding: TCardPadding = specs.props.padding.default as TCardPadding
-  @property({ type: String }) skin: TCardSkin = specs.props.skin.default as TCardSkin
+
+  @property({
+    type: String,
+    converter: {
+      fromAttribute: (value: string | null): TCardSkin => {
+        const validSkins = specs.props.skin.type as TCardSkin[]
+
+        if (value && validSkins.includes(value as TCardSkin)) {
+          return value as TCardSkin
+        } else {
+          if (value && !validSkins.includes(value as TCardSkin)) {
+            console.warn(
+              `Invalid skin value "${value}". Using default skin "${specs.props.skin.default}".`,
+            )
+          }
+          return specs.props.skin.default as TCardSkin
+        }
+      },
+      toAttribute: (value: TCardSkin): string => value,
+    },
+  })
+  skin: TCardSkin = specs.props.skin.default as TCardSkin
+
   @property({ type: String }) subheading: string = ''
   @property({ type: String }) tagPosition: 'top' | 'bottom' = 'top'
   @property({ type: Array }) tags: (Omit<IPktTag, 'closeTag'> & { text: string })[] = []