@oslokommune/punkt-react 14.5.4 → 15.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "14.5.4",
+  "version": "15.0.1",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -39,7 +39,7 @@
   "dependencies": {
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@lit/react": "^1.0.7",
-    "@oslokommune/punkt-elements": "^14.5.4",
+    "@oslokommune/punkt-elements": "^15.0.1",
     "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-hook-form": "^7.53.0"
@@ -49,8 +49,8 @@
     "@eslint/compat": "^2.0.2",
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.37.0",
-    "@oslokommune/punkt-assets": "^14.1.1",
-    "@oslokommune/punkt-css": "^14.5.3",
+    "@oslokommune/punkt-assets": "^15.0.0",
+    "@oslokommune/punkt-css": "^15.0.1",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -109,5 +109,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "be4a01f06388571ca22a28c90fa518e1a6dff097"
+  "gitHead": "e4a75d4efe0a17688bdba0071e12cb789ae430c2"
 }

package/src/components/calendar/Calendar.accessibility.test.tsx

@@ -0,0 +1,75 @@
+import '@testing-library/jest-dom'
+import { render, fireEvent } from '@testing-library/react'
+import { axe, toHaveNoViolations } from 'jest-axe'
+
+import { PktCalendar, IPktCalendar } from './Calendar'
+
+expect.extend(toHaveNoViolations)
+
+const createCalendar = (props: Partial<IPktCalendar> = {}) => {
+  return render(<PktCalendar {...props} />)
+}
+
+describe('PktCalendar', () => {
+  describe('Accessibility', () => {
+    test('has no accessibility violations', async () => {
+      const { container } = createCalendar({ withcontrols: true, weeknumbers: true })
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('has proper ARIA attributes', () => {
+      const { container } = createCalendar({ withcontrols: true })
+
+      const calendarTable = container.querySelector('.pkt-calendar__body')
+      expect(calendarTable).toHaveAttribute('role', 'grid')
+
+      const dateButtons = container.querySelectorAll('.pkt-calendar__date')
+      dateButtons.forEach((button) => {
+        expect(button).toHaveAttribute('aria-pressed')
+        expect(button).toHaveAttribute('tabindex')
+      })
+    })
+
+    test('navigation buttons have proper labels', () => {
+      const { container } = createCalendar({ withcontrols: true })
+
+      const prevButton = container.querySelector('.pkt-calendar__prev-month')
+      const nextButton = container.querySelector('.pkt-calendar__next-month')
+
+      expect(prevButton).toHaveAttribute('aria-label')
+      expect(nextButton).toHaveAttribute('aria-label')
+    })
+
+    test('date buttons have proper accessible names', () => {
+      const { container } = createCalendar()
+
+      const dateButtons = container.querySelectorAll('.pkt-calendar__date')
+      dateButtons.forEach((button) => {
+        expect(button).toHaveAttribute('aria-label')
+        expect(button.getAttribute('aria-label')).toBeTruthy()
+      })
+    })
+
+    test('selected dates have proper ARIA state', () => {
+      const { container } = createCalendar()
+
+      const firstDate = container.querySelector(
+        '.pkt-calendar__date:not(.pkt-calendar__date--disabled)',
+      )
+      fireEvent.click(firstDate!)
+
+      expect(firstDate).toHaveAttribute('aria-pressed', 'true')
+    })
+
+    test('disabled dates have proper ARIA state', () => {
+      const { container } = createCalendar({ excludeweekdays: ['0', '6'] })
+
+      const disabledDates = container.querySelectorAll('.pkt-calendar__date--disabled')
+      disabledDates.forEach((date) => {
+        expect(date).toHaveAttribute('disabled')
+      })
+    })
+  })
+})

package/src/components/calendar/Calendar.constraints.test.tsx

@@ -0,0 +1,84 @@
+import '@testing-library/jest-dom'
+import { render } from '@testing-library/react'
+
+import { PktCalendar, IPktCalendar } from './Calendar'
+
+const createCalendar = (props: Partial<IPktCalendar> = {}) => {
+  return render(<PktCalendar {...props} />)
+}
+
+describe('PktCalendar', () => {
+  describe('Date range functionality', () => {
+    test('handles earliest date property correctly', () => {
+      const { container } = createCalendar({
+        earliest: '2024-01-15',
+        currentmonth: '2024-01-01',
+      })
+
+      // Check that dates before earliest are disabled (dates 1-14 should be disabled)
+      const disabledDates = container.querySelectorAll('.pkt-calendar__date--disabled')
+      expect(disabledDates.length).toBeGreaterThan(0)
+    })
+
+    test('handles latest date property correctly', () => {
+      const { container } = createCalendar({ latest: '2024-12-15' })
+
+      // Should render without errors
+      expect(container.querySelector('.pkt-calendar')).toBeInTheDocument()
+    })
+
+    test('restricts selectable dates between earliest and latest', () => {
+      const { container } = createCalendar({
+        earliest: '2024-06-10',
+        latest: '2024-06-20',
+        currentmonth: '2024-06-01',
+      })
+
+      const enabledDates = container.querySelectorAll(
+        '.pkt-calendar__date:not(.pkt-calendar__date--disabled)',
+      )
+      const disabledDates = container.querySelectorAll('.pkt-calendar__date--disabled')
+
+      expect(enabledDates.length).toBeGreaterThan(0)
+      expect(disabledDates.length).toBeGreaterThan(0)
+    })
+  })
+
+  describe('Date exclusion functionality', () => {
+    test('excludes specific dates correctly', () => {
+      const { container } = createCalendar({
+        excludedates: ['2024-06-15', '2024-06-20'],
+        currentmonth: '2024-06-01',
+      })
+
+      // The excluded dates should be disabled
+      const date15 = container.querySelector('button[data-date="2024-06-15"]')
+      const date20 = container.querySelector('button[data-date="2024-06-20"]')
+      expect(date15).toHaveClass('pkt-calendar__date--disabled')
+      expect(date20).toHaveClass('pkt-calendar__date--disabled')
+    })
+
+    test('excludes weekdays correctly', () => {
+      const { container } = createCalendar({ excludeweekdays: ['0', '6'] })
+
+      // Check that weekend dates are disabled
+      const disabledDates = container.querySelectorAll('.pkt-calendar__date--disabled')
+      expect(disabledDates.length).toBeGreaterThan(0)
+    })
+
+    test('excludes both specific dates and weekdays', () => {
+      const { container } = createCalendar({
+        excludedates: ['2024-06-15'],
+        excludeweekdays: ['0', '6'],
+        currentmonth: '2024-06-01',
+      })
+
+      // Both specific dates and weekends should be disabled
+      const disabledDates = container.querySelectorAll('.pkt-calendar__date--disabled')
+      expect(disabledDates.length).toBeGreaterThan(0)
+
+      const date15 = container.querySelector('button[data-date="2024-06-15"]')
+      expect(date15).toHaveClass('pkt-calendar__date--disabled')
+    })
+  })
+})

package/src/components/calendar/Calendar.core.test.tsx

@@ -0,0 +1,272 @@
+import '@testing-library/jest-dom'
+import { render, fireEvent } from '@testing-library/react'
+import { parseISODateString } from 'shared-utils/date-utils'
+
+import { PktCalendar, IPktCalendar } from './Calendar'
+
+const createCalendar = (props: Partial<IPktCalendar> = {}) => {
+  return render(<PktCalendar {...props} />)
+}
+
+describe('PktCalendar', () => {
+  describe('Rendering and basic functionality', () => {
+    test('renders without errors', () => {
+      const { container } = createCalendar()
+
+      const calendarElement = container.querySelector('.pkt-calendar')
+      expect(calendarElement).toBeInTheDocument()
+    })
+
+    test('renders with correct structure', () => {
+      const { container } = createCalendar()
+
+      const calendarElement = container.querySelector('.pkt-calendar')
+      const calendarTable = container.querySelector('.pkt-cal-days')
+      const monthNav = container.querySelector('.pkt-cal-month-nav')
+
+      expect(calendarElement).toBeInTheDocument()
+      expect(calendarTable).toBeInTheDocument()
+      expect(monthNav).toBeInTheDocument()
+    })
+
+    test('renders month picker when withcontrols is true', () => {
+      const { container } = createCalendar({ withcontrols: true })
+
+      // Navigation buttons should always be present
+      const prevButton = container.querySelector('.pkt-calendar__prev-month')
+      const nextButton = container.querySelector('.pkt-calendar__next-month')
+      expect(prevButton).toBeInTheDocument()
+      expect(nextButton).toBeInTheDocument()
+
+      // Should show month picker controls, not static title
+      const monthPicker = container.querySelector('.pkt-cal-month-picker')
+      const monthTitle = container.querySelector('.pkt-calendar__month-title')
+
+      expect(monthPicker).toBeInTheDocument()
+      expect(monthTitle).not.toBeInTheDocument()
+
+      // Should have month and year inputs
+      const monthSelect = monthPicker?.querySelector('select')
+      const yearInput = monthPicker?.querySelector('input[type="number"]')
+      expect(monthSelect).toBeInTheDocument()
+      expect(yearInput).toBeInTheDocument()
+    })
+
+    test('renders static month title when withcontrols is false', () => {
+      const { container } = createCalendar()
+
+      // Navigation buttons should always be present
+      const prevButton = container.querySelector('.pkt-calendar__prev-month')
+      const nextButton = container.querySelector('.pkt-calendar__next-month')
+      expect(prevButton).toBeInTheDocument()
+      expect(nextButton).toBeInTheDocument()
+
+      // Should show static month title, not controls
+      const monthTitle = container.querySelector('.pkt-calendar__month-title')
+      const monthPicker = container.querySelector('.pkt-cal-month-picker')
+
+      expect(monthTitle).toBeInTheDocument()
+      expect(monthPicker).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Properties and attributes', () => {
+    test('applies default properties correctly', () => {
+      const { container } = createCalendar()
+
+      // Verify defaults through DOM effects
+      const grid = container.querySelector('[role="grid"]')
+      expect(grid).not.toHaveAttribute('aria-multiselectable')
+
+      // No week numbers by default
+      const weekNumbers = container.querySelectorAll('.pkt-calendar__week-number')
+      expect(weekNumbers.length).toBe(0)
+
+      // No month picker by default
+      const monthPicker = container.querySelector('.pkt-cal-month-picker')
+      expect(monthPicker).not.toBeInTheDocument()
+
+      // No selected dates
+      const selectedDates = container.querySelectorAll('.pkt-calendar__date--selected')
+      expect(selectedDates.length).toBe(0)
+    })
+
+    test('handles multiple property correctly', () => {
+      const { container } = createCalendar({ multiple: true })
+
+      const grid = container.querySelector('[role="grid"]')
+      expect(grid).toHaveAttribute('aria-multiselectable', 'true')
+    })
+
+    test('handles range property correctly', () => {
+      const { container } = createCalendar({ range: true })
+
+      const grid = container.querySelector('[role="grid"]')
+      expect(grid).toHaveAttribute('aria-multiselectable', 'true')
+    })
+
+    test('handles weeknumbers property correctly', () => {
+      const { container } = createCalendar({ weeknumbers: true })
+
+      const weekNumbers = container.querySelectorAll('.pkt-calendar__week-number')
+      expect(weekNumbers.length).toBeGreaterThan(0)
+    })
+
+    test('handles maxMultiple property correctly', () => {
+      const { container } = createCalendar({ multiple: true, maxMultiple: 3 })
+
+      const grid = container.querySelector('[role="grid"]')
+      expect(grid).toHaveAttribute('aria-multiselectable', 'true')
+
+      // Select 3 dates - all should work
+      const availableDates = container.querySelectorAll(
+        '.pkt-calendar__date:not(.pkt-calendar__date--disabled)',
+      )
+      expect(availableDates.length).toBeGreaterThan(3)
+
+      fireEvent.click(availableDates[0])
+      fireEvent.click(availableDates[1])
+      fireEvent.click(availableDates[2])
+
+      const selectedDates = container.querySelectorAll('.pkt-calendar__date--selected')
+      expect(selectedDates.length).toBe(3)
+    })
+
+    test('handles currentmonth property correctly', () => {
+      const { container } = createCalendar({ currentmonth: '2024-03-15' })
+
+      const monthTitle = container.querySelector('.pkt-calendar__month-title')
+      expect(monthTitle?.textContent).toContain('Mars')
+      expect(monthTitle?.textContent).toContain('2024')
+    })
+  })
+
+  describe('Month navigation', () => {
+    it('should navigate to previous month when clicking previous button', () => {
+      const { container } = createCalendar({ currentmonth: '2024-06-15' })
+
+      const monthTitle = container.querySelector('.pkt-calendar__month-title')
+      expect(monthTitle?.textContent).toContain('Juni')
+
+      const prevButton = container.querySelector('.pkt-calendar__prev-month')
+      fireEvent.click(prevButton!)
+
+      expect(monthTitle?.textContent).toContain('Mai')
+    })
+
+    it('should navigate to next month when clicking next button', () => {
+      const { container } = createCalendar({ currentmonth: '2024-06-15' })
+
+      const monthTitle = container.querySelector('.pkt-calendar__month-title')
+      expect(monthTitle?.textContent).toContain('Juni')
+
+      const nextButton = container.querySelector('.pkt-calendar__next-month')
+      fireEvent.click(nextButton!)
+
+      expect(monthTitle?.textContent).toContain('Juli')
+    })
+
+    test('navigates to next month with controls', () => {
+      const { container } = createCalendar({ withcontrols: true, currentmonth: '2024-06-15' })
+
+      const nextButton = container.querySelector('.pkt-calendar__next-month')
+      expect(nextButton).toBeInTheDocument()
+
+      const monthSelect = container.querySelector(
+        '.pkt-cal-month-picker select',
+      ) as HTMLSelectElement
+      const initialMonth = monthSelect?.value
+
+      fireEvent.click(nextButton!)
+
+      const newMonth = monthSelect?.value
+      expect(newMonth).not.toBe(initialMonth)
+    })
+
+    test('month navigation updates visible dates', () => {
+      const { container } = createCalendar({ withcontrols: true, currentmonth: '2024-06-15' })
+
+      const initialDates = Array.from(container.querySelectorAll('.pkt-calendar__date')).map(
+        (el) => el.textContent,
+      )
+
+      const nextButton = container.querySelector('.pkt-calendar__next-month')
+      fireEvent.click(nextButton!)
+
+      const newDates = Array.from(container.querySelectorAll('.pkt-calendar__date')).map(
+        (el) => el.textContent,
+      )
+      expect(newDates).not.toEqual(initialDates)
+    })
+  })
+
+  describe('Date formatting and localization', () => {
+    test('displays day names correctly', () => {
+      const { container } = createCalendar()
+
+      const dayHeaders = container.querySelectorAll('.pkt-calendar__day-name')
+      expect(dayHeaders.length).toBe(7)
+
+      dayHeaders.forEach((header) => {
+        expect(header.textContent).toBeTruthy()
+        expect(header.textContent!.length).toBeGreaterThan(0)
+      })
+    })
+
+    test('displays month names correctly', () => {
+      const { container } = createCalendar({ currentmonth: '2024-06-15' })
+
+      const monthTitle = container.querySelector('.pkt-calendar__month-title')
+      expect(monthTitle).toBeInTheDocument()
+      expect(monthTitle?.textContent).toBeTruthy()
+    })
+
+    test('handles custom day strings', () => {
+      const { container } = createCalendar({
+        strings: { daysShort: ['S', 'M', 'T', 'W', 'T', 'F', 'S'] },
+      })
+
+      const dayHeaders = container.querySelectorAll('.pkt-calendar__day-name')
+      expect(dayHeaders[0].textContent?.trim()).toBe('S')
+      expect(dayHeaders[1].textContent?.trim()).toBe('M')
+    })
+
+    test('handles custom month strings', () => {
+      const { container } = createCalendar({
+        withcontrols: true,
+        strings: {
+          months: [
+            'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
+          ],
+        },
+      })
+
+      const monthSelect = container.querySelector('.pkt-cal-month-picker select')
+      expect(monthSelect).toBeInTheDocument()
+
+      const options = monthSelect?.querySelectorAll('option')
+      expect(options?.[0]?.textContent).toContain('Jan')
+    })
+  })
+
+  describe('Today highlighting', () => {
+    test('highlights today date', () => {
+      const { container } = createCalendar()
+
+      const todayDate = container.querySelector('.pkt-calendar__date--today')
+      expect(todayDate).toBeInTheDocument()
+    })
+
+    test('today date is selectable unless excluded', () => {
+      const { container } = createCalendar()
+
+      const todayDate = container.querySelector('.pkt-calendar__date--today')
+
+      if (todayDate && !todayDate.classList.contains('pkt-calendar__date--disabled')) {
+        fireEvent.click(todayDate)
+        expect(todayDate).toHaveClass('pkt-calendar__date--selected')
+      }
+    })
+  })
+})

package/src/components/calendar/Calendar.interaction.test.tsx

@@ -0,0 +1,96 @@
+import '@testing-library/jest-dom'
+import { render, fireEvent, act } from '@testing-library/react'
+
+import { PktCalendar, IPktCalendar } from './Calendar'
+
+const createCalendar = (props: Partial<IPktCalendar> = {}) => {
+  return render(<PktCalendar {...props} />)
+}
+
+describe('PktCalendar', () => {
+  describe('Keyboard navigation', () => {
+    test('handles arrow key navigation', () => {
+      const { container } = createCalendar()
+
+      const firstDate = container.querySelector(
+        '.pkt-calendar__date:not(.pkt-calendar__date--disabled)',
+      ) as HTMLElement
+
+      act(() => {
+        firstDate?.focus()
+        fireEvent.keyDown(firstDate!, { key: 'ArrowRight' })
+      })
+
+      // Check that focus moved (implementation dependent)
+      expect(document.activeElement).toBeTruthy()
+    })
+
+    test('handles enter key for date selection', () => {
+      const { container } = createCalendar()
+
+      const firstDate = container.querySelector(
+        '.pkt-calendar__date:not(.pkt-calendar__date--disabled)',
+      ) as HTMLElement
+
+      act(() => {
+        firstDate?.focus()
+        fireEvent.keyDown(firstDate!, { key: 'Enter' })
+      })
+
+      expect(firstDate).toHaveClass('pkt-calendar__date--selected')
+    })
+
+    test('handles escape key', () => {
+      const onClose = jest.fn()
+      const { container } = createCalendar({ onClose })
+
+      const calendarEl = container.querySelector('.pkt-calendar') as HTMLElement
+      fireEvent.keyDown(calendarEl, { key: 'Escape' })
+
+      // Should trigger close callback
+      expect(onClose).toHaveBeenCalled()
+    })
+  })
+
+  describe('Edge cases and error handling', () => {
+    test('handles invalid date formats gracefully', () => {
+      const { container } = createCalendar({ earliest: 'invalid-date', latest: 'also-invalid' })
+
+      // Should not crash and render normally
+      expect(container.querySelector('.pkt-calendar')).toBeInTheDocument()
+      const calendarBody = container.querySelector('.pkt-calendar__body')
+      expect(calendarBody).toBeInTheDocument()
+    })
+
+    test('handles empty selected dates array', () => {
+      const { container } = createCalendar({ selected: [] })
+
+      const selectedDates = container.querySelectorAll('.pkt-calendar__date--selected')
+      expect(selectedDates.length).toBe(0)
+    })
+
+    test('handles conflicting properties gracefully', () => {
+      // Both multiple and range shouldn't typically be used together
+      const { container } = createCalendar({ multiple: true, range: true })
+
+      // Should still render without errors
+      expect(container.querySelector('.pkt-calendar')).toBeInTheDocument()
+    })
+
+    test('handles very early dates', () => {
+      const { container } = createCalendar({ currentmonth: '1900-01-01' })
+
+      expect(container.querySelector('.pkt-calendar')).toBeInTheDocument()
+      const calendarBody = container.querySelector('.pkt-calendar__body')
+      expect(calendarBody).toBeInTheDocument()
+    })
+
+    test('handles far future dates', () => {
+      const { container } = createCalendar({ currentmonth: '2100-12-31' })
+
+      expect(container.querySelector('.pkt-calendar')).toBeInTheDocument()
+      const calendarBody = container.querySelector('.pkt-calendar__body')
+      expect(calendarBody).toBeInTheDocument()
+    })
+  })
+})