@oslokommune/punkt-elements 13.4.2 → 13.5.1

package/src/components/calendar/calendar.selection.test.ts

@@ -0,0 +1,273 @@
+import '@testing-library/jest-dom'
+import { fireEvent } from '@testing-library/dom'
+import { parseISODateString } from '@/utils/dateutils'
+
+import './calendar'
+import { PktCalendar } from './calendar'
+
+const waitForCustomElements = async () => {
+  await customElements.whenDefined('pkt-calendar')
+}
+
+// Helper function to create calendar markup
+const createCalendar = async (calendarProps = '') => {
+  const container = document.createElement('div')
+  container.innerHTML = `
+    <pkt-calendar ${calendarProps}></pkt-calendar>
+  `
+  document.body.appendChild(container)
+  await waitForCustomElements()
+  return container
+}
+
+// Cleanup after each test
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktCalendar', () => {
+  describe('Date selection functionality', () => {
+    test('selects single date correctly', async () => {
+      const container = await createCalendar()
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      // Find and click on a date
+      const availableDate = calendar.querySelector(
+        '.pkt-calendar__date:not(.pkt-calendar__date--disabled)',
+      )
+      expect(availableDate).toBeInTheDocument()
+
+      fireEvent.click(availableDate!)
+      await calendar.updateComplete
+
+      expect(availableDate).toHaveClass('pkt-calendar__date--selected')
+    })
+
+    test('handles multiple date selection', async () => {
+      const container = await createCalendar('multiple')
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      // Find and click on multiple dates
+      const availableDates = calendar.querySelectorAll(
+        '.pkt-calendar__date:not(.pkt-calendar__date--disabled)',
+      )
+      expect(availableDates.length).toBeGreaterThan(1)
+
+      fireEvent.click(availableDates[0])
+      await calendar.updateComplete
+      fireEvent.click(availableDates[1])
+      await calendar.updateComplete
+
+      expect(availableDates[0]).toHaveClass('pkt-calendar__date--selected')
+      expect(availableDates[1]).toHaveClass('pkt-calendar__date--selected')
+    })
+
+    test('respects maxMultiple limit', async () => {
+      const container = await createCalendar('multiple maxMultiple="2"')
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      // Try to select more than maxMultiple dates
+      const availableDates = calendar.querySelectorAll(
+        '.pkt-calendar__date:not(.pkt-calendar__date--disabled)',
+      )
+      expect(availableDates.length).toBeGreaterThan(2)
+
+      // Select 3 dates but only 2 should be selected
+      fireEvent.click(availableDates[0])
+      await calendar.updateComplete
+      fireEvent.click(availableDates[1])
+      await calendar.updateComplete
+      fireEvent.click(availableDates[2])
+      await calendar.updateComplete
+
+      const selectedDates = calendar.querySelectorAll('.pkt-calendar__date--selected')
+      expect(selectedDates.length).toBeLessThanOrEqual(2)
+    })
+
+    test('handles pre-selected dates', async () => {
+      const preSelectedDates = '2024-06-15,2024-06-20'
+      const container = await createCalendar(
+        `selected="${preSelectedDates}" currentmonth="2024-06-01"`,
+      )
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      expect(calendar.selected).toEqual(['2024-06-15', '2024-06-20'])
+
+      const selectedDates = calendar.querySelectorAll('.pkt-calendar__date--selected')
+      expect(selectedDates.length).toBe(2)
+    })
+
+    test('toggles date selection when clicking same date twice', async () => {
+      const container = await createCalendar()
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      const availableDate = calendar.querySelector(
+        '.pkt-calendar__date:not(.pkt-calendar__date--disabled)',
+      )
+      expect(availableDate).toBeInTheDocument()
+
+      // First click - select
+      fireEvent.click(availableDate!)
+      await calendar.updateComplete
+      expect(availableDate).toHaveClass('pkt-calendar__date--selected')
+
+      // Second click - deselect
+      fireEvent.click(availableDate!)
+      await calendar.updateComplete
+      expect(availableDate).not.toHaveClass('pkt-calendar__date--selected')
+    })
+  })
+
+  describe('Range selection functionality', () => {
+    test('handles range selection correctly', async () => {
+      const container = await createCalendar('range')
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      const availableDates = calendar.querySelectorAll(
+        '.pkt-calendar__date:not(.pkt-calendar__date--disabled)',
+      )
+      expect(availableDates.length).toBeGreaterThan(3)
+
+      // Select start date
+      fireEvent.click(availableDates[5])
+      await calendar.updateComplete
+
+      // Select end date
+      fireEvent.click(availableDates[10])
+      await calendar.updateComplete
+
+      // Check for range styling
+      const rangeStart = calendar.querySelector('.pkt-calendar__date--range-start')
+      const rangeEnd = calendar.querySelector('.pkt-calendar__date--range-end')
+      const rangeInBetween = calendar.querySelectorAll('.pkt-calendar__date--in-range')
+
+      expect(rangeStart).toBeInTheDocument()
+      expect(rangeEnd).toBeInTheDocument()
+      expect(rangeInBetween.length).toBeGreaterThan(0)
+    })
+
+    test('shows range hover preview', async () => {
+      const container = await createCalendar('range')
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      const availableDates = calendar.querySelectorAll(
+        '.pkt-calendar__date:not(.pkt-calendar__date--disabled)',
+      )
+
+      // Select start date
+      fireEvent.click(availableDates[5])
+      await calendar.updateComplete
+
+      // Hover over potential end date
+      fireEvent.mouseOver(availableDates[10])
+      await calendar.updateComplete
+
+      // Should show hover preview styling
+      const hoveredRanges = calendar.querySelectorAll('.pkt-calendar__date--in-range-hover')
+      expect(hoveredRanges.length).toBeGreaterThan(0)
+    })
+
+    test('clears range when selecting new start date', async () => {
+      const container = await createCalendar('range')
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      const availableDates = calendar.querySelectorAll(
+        '.pkt-calendar__date:not(.pkt-calendar__date--disabled)',
+      )
+
+      // Create initial range
+      fireEvent.click(availableDates[5])
+      await calendar.updateComplete
+      fireEvent.click(availableDates[10])
+      await calendar.updateComplete
+
+      // Select new start date
+      fireEvent.click(availableDates[2])
+      await calendar.updateComplete
+
+      // Old range should be cleared
+      const selectedDates = calendar.querySelectorAll('.pkt-calendar__date--selected')
+      expect(selectedDates.length).toBe(1)
+    })
+  })
+
+  describe('API methods', () => {
+    test('addToSelected method works correctly', async () => {
+      const container = await createCalendar('multiple')
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      const testDate = parseISODateString('2024-06-15')
+      calendar.addToSelected(testDate)
+      await calendar.updateComplete
+
+      expect(calendar['_selected']).toContainEqual(testDate)
+    })
+
+    test('removeFromSelected method works correctly', async () => {
+      const container = await createCalendar('multiple')
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      const testDate = new Date('2024-06-15')
+      calendar.addToSelected(testDate)
+      await calendar.updateComplete
+
+      calendar.removeFromSelected(testDate)
+      await calendar.updateComplete
+
+      expect(calendar['_selected']).not.toContainEqual(testDate)
+    })
+
+    test('toggleSelected method works correctly', async () => {
+      const container = await createCalendar()
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      const testDate = parseISODateString('2024-06-15')
+
+      // Toggle on
+      calendar.toggleSelected(testDate)
+      await calendar.updateComplete
+      expect(calendar['_selected']).toContainEqual(testDate)
+
+      // Toggle off
+      calendar.toggleSelected(testDate)
+      await calendar.updateComplete
+      expect(calendar['_selected']).not.toContainEqual(testDate)
+    })
+
+    test('focusOnCurrentDate method works correctly', async () => {
+      const container = await createCalendar()
+
+      const calendar = container.querySelector('pkt-calendar') as PktCalendar
+      await calendar.updateComplete
+
+      calendar.focusOnCurrentDate()
+      await calendar.updateComplete
+
+      // Should focus on a date element
+      const focusedElement = document.activeElement
+      expect(focusedElement).toHaveClass('pkt-calendar__date')
+    })
+  })
+})

package/src/components/calendar/calendar.ts

@@ -133,7 +133,10 @@ export class PktCalendar extends PktElement {
       if (Array.isArray(days) && days.length) {
         const inRange: DatesInRange = {}
         for (let i = 0; i < days.length; i++) {
-          inRange[formatISODate(days[i])] = this.isInRange(days[i])
+          const day = days[i]
+          // A date is in range if it's between the start and end dates (exclusive)
+          const isInRange = day > this._selected[0] && day < this._selected[1]
+          inRange[formatISODate(day)] = isInRange
         }
         this.inRange = inRange
       }
@@ -144,7 +147,7 @@ export class PktCalendar extends PktElement {
   setCurrentMonth() {
     if (this.currentmonth === null && !this.currentmonthtouched) {
       this.currentmonthtouched = true
-      return
+      // Don't return here - continue to set a default currentmonth
     }
     if (this.selected.length && this.selected[0] !== '') {
       const d = parseISODateString(this.selected[this.selected.length - 1])
@@ -182,7 +185,12 @@ export class PktCalendar extends PktElement {
   handleArrowKey(e: KeyboardEvent, direction: number) {
     if ((e.target as HTMLElement)?.nodeName === 'INPUT') return
     if ((e.target as HTMLElement)?.nodeName === 'SELECT') return
-    if ((e.target as HTMLElement)?.nodeName === 'BUTTON') return
+    // Allow arrow keys on date buttons (which have data-date attribute), but not on navigation buttons
+    if (
+      (e.target as HTMLElement)?.nodeName === 'BUTTON' &&
+      !(e.target as HTMLElement)?.dataset?.date
+    )
+      return
     e.preventDefault()
     if (!this.focusedDate) {
       this.focusOnCurrentDate()
@@ -190,22 +198,22 @@ export class PktCalendar extends PktElement {
     const date = this.focusedDate ? newDate(this.focusedDate) : newDateYMD(this.year, this.month, 1)
     let nextDate = addDays(date, direction)
     if (nextDate) {
-      let el = this.querySelector(`div[data-date="${formatISODate(nextDate)}"]`)
-      if (el instanceof HTMLDivElement) {
+      let el = this.querySelector(`button[data-date="${formatISODate(nextDate)}"]`)
+      if (el instanceof HTMLButtonElement) {
         if (el.dataset.disabled) {
           nextDate = addDays(nextDate, direction)
-          let nextElement = this.querySelector(`div[data-date="${formatISODate(nextDate)}"]`)
+          let nextElement = this.querySelector(`button[data-date="${formatISODate(nextDate)}"]`)
           while (
             nextElement &&
-            nextElement instanceof HTMLDivElement &&
+            nextElement instanceof HTMLButtonElement &&
             nextElement.dataset.disabled
           ) {
             nextDate = addDays(nextDate, direction)
-            nextElement = this.querySelector(`div[data-date="${formatISODate(nextDate)}"]`)
+            nextElement = this.querySelector(`button[data-date="${formatISODate(nextDate)}"]`)
           }
           el = nextElement
         }
-        if (el instanceof HTMLDivElement && !el.dataset.disabled) {
+        if (el instanceof HTMLButtonElement && !el.dataset.disabled) {
           this.focusedDate = formatISODate(nextDate)
           el.focus()
         }
@@ -218,7 +226,7 @@ export class PktCalendar extends PktElement {
   render() {
     return html`
       <div
-        class="pkt-calendar ${this.weeknumbers ? 'pkt-cal-weeknumbers' : nothing}"
+        class="pkt-calendar ${this.weeknumbers ? 'pkt-cal-weeknumbers' : ''}"
         @focusout=${this.closeEvent}
         @keydown=${(e: KeyboardEvent) => {
           if (e.key === 'Escape') {
@@ -231,14 +239,15 @@ export class PktCalendar extends PktElement {
           <div>
             <button
               type="button"
-              @click=${this.isPrevMonthAllowed() && this.prevMonth}
+              aria-label="${this.prevMonthString}"
+              @click=${() => this.isPrevMonthAllowed() && this.prevMonth()}
               @keydown=${(e: KeyboardEvent) => {
                 if (e.key === 'Enter' || e.key === ' ') {
                   e.preventDefault()
-                  this.isNextMonthAllowed() && this.prevMonth()
+                  this.isPrevMonthAllowed() && this.prevMonth()
                 }
               }}
-              class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only ${this.isPrevMonthAllowed()
+              class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only pkt-calendar__prev-month ${this.isPrevMonthAllowed()
                 ? ''
                 : 'pkt-hide'}"
               .data-disabled=${!this.isPrevMonthAllowed() ? 'disabled' : nothing}
@@ -253,14 +262,15 @@ export class PktCalendar extends PktElement {
           <div>
             <button
               type="button"
-              @click=${this.isNextMonthAllowed() && this.nextMonth}
+              aria-label="${this.nextMonthString}"
+              @click=${() => this.isNextMonthAllowed() && this.nextMonth()}
               @keydown=${(e: KeyboardEvent) => {
                 if (e.key === 'Enter' || e.key === ' ') {
                   e.preventDefault()
                   this.isNextMonthAllowed() && this.nextMonth()
                 }
               }}
-              class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only ${this.isNextMonthAllowed()
+              class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only pkt-calendar__next-month ${this.isNextMonthAllowed()
                 ? ''
                 : 'pkt-hide'}"
               .data-disabled=${!this.isNextMonthAllowed() ? 'disabled' : nothing}
@@ -273,7 +283,7 @@ export class PktCalendar extends PktElement {
           </div>
         </nav>
         <table
-          class="pkt-cal-days pkt-txt-12-medium"
+          class="pkt-cal-days pkt-txt-12-medium pkt-calendar__body"
           role="grid"
           ?aria-multiselectable=${this.range || this.multiple}
         >
@@ -289,13 +299,17 @@ export class PktCalendar extends PktElement {
   }
 
   private renderDayNames() {
-    const days = []
+    const days: any[] = []
     if (this.weeknumbers) {
-      days.push(html`<th><div>${this.weekString}</div></th>`)
+      days.push(html`<th><div class="pkt-calendar__week-number">${this.weekString}</div></th>`)
     }
     for (let i = 0; i < this.dayStrings.length; i++) {
       days.push(
-        html`<th><div aria-label="${this.dayStringsLong[i]}">${this.dayStrings[i]}</div></th>`,
+        html`<th>
+          <div class="pkt-calendar__day-name" aria-label="${this.dayStringsLong[i]}">
+            ${this.dayStrings[i]}
+          </div>
+        </th>`,
       )
     }
     return html`<tr class="pkt-cal-week-row">
@@ -304,7 +318,7 @@ export class PktCalendar extends PktElement {
   }
 
   private renderMonthNav() {
-    let monthView = []
+    let monthView: any[] = []
     if (this.withcontrols) {
       monthView.push(
         html`<div class="pkt-cal-month-picker">
@@ -341,7 +355,7 @@ export class PktCalendar extends PktElement {
       )
     } else {
       monthView.push(
-        html`<div class="pkt-txt-16-medium" aria-live="polite">
+        html`<div class="pkt-txt-16-medium pkt-calendar__month-title" aria-live="polite">
           ${this.monthStrings[this.month]} ${this.year}
         </div>`,
       )
@@ -391,11 +405,31 @@ export class PktCalendar extends PktElement {
       'pkt-cal-range-hover':
         this.rangeHovered !== null && currentDateISO === formatISODate(this.rangeHovered),
     }
+
+    const buttonClasses = {
+      'pkt-calendar__date': true,
+      'pkt-calendar__date--today': isToday,
+      'pkt-calendar__date--selected': isSelected,
+      'pkt-calendar__date--disabled': isDisabled,
+      'pkt-calendar__date--in-range': this.inRange[currentDateISO],
+      'pkt-calendar__date--in-range-hover':
+        this.rangeHovered !== null && currentDateISO === formatISODate(this.rangeHovered),
+      'pkt-calendar__date--range-start':
+        this.range &&
+        (this.selected.length === 2 || this.rangeHovered !== null) &&
+        currentDateISO === this.selected[0],
+      'pkt-calendar__date--range-end':
+        this.range && this.selected.length === 2 && currentDateISO === this.selected[1],
+    }
+
     return html`<td class=${classMap(classes)}>
-      <div
-        ?aria-selected=${isSelected}
-        role="gridcell"
-        class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--label-only"
+      <button
+        type="button"
+        aria-pressed=${isSelected ? 'true' : 'false'}
+        ?disabled=${isDisabled}
+        class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--label-only ${classMap(
+          buttonClasses,
+        )}"
         @mouseover=${() =>
           this.range && !this.isExcluded(j, currentDate) && this.handleRangeHover(currentDate)}
         @focus=${() => {
@@ -420,7 +454,7 @@ export class PktCalendar extends PktElement {
         }}
       >
         <span class="pkt-btn__text pkt-txt-14-light">${dayCounter}</span>
-      </div>
+      </button>
     </td>`
   }
 
@@ -437,10 +471,10 @@ export class PktCalendar extends PktElement {
     let dayCounter = 1
     this.week = getWeek(newDateYMD(this.year, this.month, 1))
 
-    const rows = []
+    const rows: any[] = []
 
     for (let i = 0; i < numRows; i++) {
-      const cells = []
+      const cells: any[] = []
 
       this.weeknumbers && cells.push(html`<td class="pkt-cal-week">${this.week}</td>`)
       this.week++
@@ -530,20 +564,12 @@ export class PktCalendar extends PktElement {
   private changeMonth(year: number, month: number) {
     this.year = typeof year === 'string' ? parseInt(year) : year
     this.month = typeof month === 'string' ? parseInt(month) : month
+    this.currentmonth = new Date(this.year, this.month, 1)
     this.tabIndexSet = 0
     this.focusedDate = null
     this.selectableDates = []
   }
 
-  private isInRange(date: Date) {
-    if (this.range && this.selected.length === 2) {
-      if (date > newDate(this.selected[0]) && date < newDate(this.selected[1])) return true
-    } else if (this.range && this.selected.length === 1 && this.rangeHovered) {
-      if (date > newDate(this.selected[0]) && date < this.rangeHovered) return true
-    }
-    return false
-  }
-
   private isRangeAllowed(date: Date) {
     let allowed = true
     if (this._selected.length === 1) {
@@ -578,7 +604,10 @@ export class PktCalendar extends PktElement {
     if (this.selected.includes(formatISODate(selectedDate))) return
     this.selected = [...this.selected, formatISODate(selectedDate)]
     this._selected = [...this._selected, selectedDate]
+
+    // Update range styling if in range mode
     if (this.range && this.selected.length === 2) {
+      this.convertSelected()
       this.close()
     }
   }
@@ -648,7 +677,10 @@ export class PktCalendar extends PktElement {
 
       if (Array.isArray(days) && days.length) {
         for (let i = 0; i < days.length; i++) {
-          this.inRange[formatISODate(days[i])] = this.isInRange(days[i])
+          const day = days[i]
+          // A date is in range if it's between the start and hovered end dates (exclusive)
+          const isInRange = day > this._selected[0] && day < date
+          this.inRange[formatISODate(day)] = isInRange
         }
       }
     } else {
@@ -683,17 +715,17 @@ export class PktCalendar extends PktElement {
 
   public focusOnCurrentDate() {
     const currentDateISO = formatISODate(newDate())
-    const el = this.querySelector(`div[data-date="${currentDateISO}"]`)
-    if (el instanceof HTMLDivElement) {
+    const el = this.querySelector(`button[data-date="${currentDateISO}"]`)
+    if (el instanceof HTMLButtonElement) {
       this.focusedDate = currentDateISO
       el.focus()
     } else {
       const firstSelectable = this.selectableDates.find((x) => !x.isDisabled)
       if (firstSelectable) {
         const firstSelectableEl = this.querySelector(
-          `div[data-date="${firstSelectable.currentDateISO}"]`,
+          `button[data-date="${firstSelectable.currentDateISO}"]`,
         )
-        if (firstSelectableEl instanceof HTMLDivElement) {
+        if (firstSelectableEl instanceof HTMLButtonElement) {
           this.focusedDate = firstSelectable.currentDateISO
           firstSelectableEl.focus()
         }

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

@@ -28,6 +28,18 @@ afterEach(() => {
   document.body.innerHTML = ''
 })
 
+// Global console.warn spy to suppress validation warnings in tests
+let consoleWarnSpy: jest.SpyInstance
+beforeEach(() => {
+  consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
+})
+
+afterEach(() => {
+  if (consoleWarnSpy) {
+    consoleWarnSpy.mockRestore()
+  }
+})
+
 describe('PktCard', () => {
   describe('Rendering and basic functionality', () => {
     test('renders without errors', async () => {
@@ -138,23 +150,25 @@ describe('PktCard', () => {
     })
 
     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(() => {})
+      // Clear the global spy and create a new one for this specific test
+      consoleWarnSpy.mockRestore()
+      const localConsoleSpy = 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(
+      expect(localConsoleSpy).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()
+      // Restore and recreate global spy for subsequent tests
+      localConsoleSpy.mockRestore()
+      consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {})
     })
 
     test('applies different layout properties correctly', async () => {