@oslokommune/punkt-react 13.7.0 → 13.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "13.7.0",
+  "version": "13.8.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": "^13.7.0",
+    "@oslokommune/punkt-elements": "^13.8.0",
     "prettier": "^3.3.3",
     "react-element-to-jsx-string": "^15.0.0",
     "react-hook-form": "^7.53.0",
@@ -106,5 +106,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "cfe27c04046718ff79f60e3babba60062296f05b"
+  "gitHead": "0433bdf21345e1260c74c132ee303fe7cf57b63d"
 }

package/src/components/combobox/Combobox.tsx

@@ -41,7 +41,7 @@ export const LitComponent = createComponent({
     onInput: 'input' as EventName<PktEventWithTarget>,
     onBlur: 'blur' as EventName<FocusEvent>,
     onFocus: 'focus' as EventName<FocusEvent>,
-    onValueChange: 'valueChange' as EventName<CustomEvent>,
+    onValueChange: 'value-change' as EventName<CustomEvent>,
     onToggleHelpText: 'toggleHelpText' as EventName<CustomEvent>,
   },
 }) as ForwardRefExoticComponent<IPktCombobox>

package/src/components/index.ts

@@ -35,6 +35,7 @@ export { PktTableHeader } from './table/TableHeader'
 export { PktTableHeaderCell } from './table/TableHeaderCell'
 export { PktTableRow } from './table/TableRow'
 export { PktTabs } from './tabs/Tabs'
+export { PktTabItem } from './tabs/TabItem'
 export { PktTag } from './tag/Tag'
 export { PktTextarea } from './textarea/Textarea'
 export { PktTextinput } from './textinput/Textinput'

package/src/components/tabs/TabItem.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import { ReactNode, MouseEvent, forwardRef } from 'react'
+import { PktIcon } from '../icon/Icon'
+import { PktTag } from '../tag/Tag'
+import type { IPktTag } from '../tag/Tag'
+import { useTabsContext } from './Tabs'
+
+export type TSkin = IPktTag['skin']
+
+export interface IPktTabItem {
+  children: ReactNode
+  active?: boolean
+  href?: string
+  onClick?: (event: MouseEvent) => void
+  icon?: string
+  controls?: string
+  tag?: string
+  tagSkin?: TSkin
+  index?: number
+}
+
+export const PktTabItem = forwardRef<HTMLAnchorElement | HTMLButtonElement, IPktTabItem>(
+  ({ children, active, href, onClick, icon, controls, tag, tagSkin, index = 0 }, ref) => {
+    const { arrowNav, registerTabRef, handleKeyPress, selectTab } = useTabsContext()
+
+    const handleClick = (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {
+      selectTab(index)
+      onClick?.(event)
+    }
+
+    const commonProps = {
+      'aria-selected': arrowNav ? !!active : undefined,
+      'aria-controls': controls,
+      role: arrowNav ? 'tab' : undefined,
+      onKeyUp: (event: React.KeyboardEvent) => handleKeyPress(index, event),
+      onClick: handleClick,
+      tabIndex: active || !arrowNav ? undefined : -1,
+      ref: (el: HTMLAnchorElement | HTMLButtonElement | null) => {
+        registerTabRef(index, el)
+        if (typeof ref === 'function') {
+          ref(el)
+        } else if (ref) {
+          ref.current = el
+        }
+      },
+    }
+
+    const content = (
+      <>
+        {icon && <PktIcon name={icon} className="pkt-icon--small" />}
+        {children}
+        {tag && (
+          <PktTag skin={tagSkin} size="small">
+            {tag}
+          </PktTag>
+        )}
+      </>
+    )
+
+    if (href) {
+      return (
+        <a {...commonProps} href={href} className={`pkt-tabs__link ${active ? 'active' : ''}`}>
+          {content}
+        </a>
+      )
+    }
+
+    return (
+      <button {...commonProps} type="button" className={`pkt-tabs__button pkt-link-button ${active ? 'active' : ''}`}>
+        {content}
+      </button>
+    )
+  },
+)
+
+PktTabItem.displayName = 'PktTabItem'

package/src/components/tabs/Tabs.test.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import '@testing-library/jest-dom'
-import { PktTabs } from './Tabs'
+import { PktTabs, PktTabItem } from './Tabs'
 
 expect.extend(toHaveNoViolations)
 
@@ -55,3 +55,395 @@ describe('Tabs component', () => {
     })
   })
 })
+
+describe('PktTabItem children format', () => {
+  it('renders tabs from children', () => {
+    const { getByText } = render(
+      <PktTabs>
+        <PktTabItem index={0}>First Tab</PktTabItem>
+        <PktTabItem index={1}>Second Tab</PktTabItem>
+        <PktTabItem index={2}>Third Tab</PktTabItem>
+      </PktTabs>,
+    )
+
+    expect(getByText('First Tab')).toBeInTheDocument()
+    expect(getByText('Second Tab')).toBeInTheDocument()
+    expect(getByText('Third Tab')).toBeInTheDocument()
+  })
+
+  it('applies active class to the active tab', () => {
+    const { getByText } = render(
+      <PktTabs>
+        <PktTabItem index={0}>First Tab</PktTabItem>
+        <PktTabItem index={1} active>
+          Second Tab
+        </PktTabItem>
+        <PktTabItem index={2}>Third Tab</PktTabItem>
+      </PktTabs>,
+    )
+
+    expect(getByText('Second Tab')).toHaveClass('active')
+    expect(getByText('First Tab')).not.toHaveClass('active')
+    expect(getByText('Third Tab')).not.toHaveClass('active')
+  })
+
+  it('calls onClick handler when tab is clicked', () => {
+    const handleClick = jest.fn()
+    const { getByText } = render(
+      <PktTabs>
+        <PktTabItem index={0}>First Tab</PktTabItem>
+        <PktTabItem index={1} onClick={handleClick}>
+          Second Tab
+        </PktTabItem>
+        <PktTabItem index={2}>Third Tab</PktTabItem>
+      </PktTabs>,
+    )
+
+    fireEvent.click(getByText('Second Tab'))
+    expect(handleClick).toHaveBeenCalled()
+    expect(handleClick.mock.calls[0][0]).toHaveProperty('type', 'click')
+  })
+
+  it('calls onTabSelected when tab is clicked', () => {
+    const handleTabSelected = jest.fn()
+    const { getByText } = render(
+      <PktTabs onTabSelected={handleTabSelected}>
+        <PktTabItem index={0}>First Tab</PktTabItem>
+        <PktTabItem index={1}>Second Tab</PktTabItem>
+        <PktTabItem index={2}>Third Tab</PktTabItem>
+      </PktTabs>,
+    )
+
+    fireEvent.click(getByText('Second Tab'))
+    expect(handleTabSelected).toHaveBeenCalledWith(1)
+  })
+
+  it('calls both onClick and onTabSelected when tab is clicked', () => {
+    const handleClick = jest.fn()
+    const handleTabSelected = jest.fn()
+    const { getByText } = render(
+      <PktTabs onTabSelected={handleTabSelected}>
+        <PktTabItem index={0}>First Tab</PktTabItem>
+        <PktTabItem index={1} onClick={handleClick}>
+          Second Tab
+        </PktTabItem>
+        <PktTabItem index={2}>Third Tab</PktTabItem>
+      </PktTabs>,
+    )
+
+    fireEvent.click(getByText('Second Tab'))
+    expect(handleClick).toHaveBeenCalled()
+    expect(handleTabSelected).toHaveBeenCalledWith(1)
+  })
+
+  it('renders as button when no href is provided', () => {
+    const { getByText } = render(
+      <PktTabs>
+        <PktTabItem index={0}>First Tab</PktTabItem>
+      </PktTabs>,
+    )
+
+    const tab = getByText('First Tab')
+    expect(tab.tagName).toBe('BUTTON')
+  })
+
+  it('renders as link when href is provided', () => {
+    const { getByText } = render(
+      <PktTabs>
+        <PktTabItem index={0} href="/first">
+          First Tab
+        </PktTabItem>
+      </PktTabs>,
+    )
+
+    const tab = getByText('First Tab')
+    expect(tab.tagName).toBe('A')
+    expect(tab).toHaveAttribute('href', '/first')
+  })
+
+  it('renders icon when icon prop is provided', () => {
+    const { container } = render(
+      <PktTabs>
+        <PktTabItem index={0} icon="user">
+          First Tab
+        </PktTabItem>
+      </PktTabs>,
+    )
+
+    const button = container.querySelector('.pkt-tabs__button')
+    expect(button).toBeInTheDocument()
+    const iconElement = container.querySelector('.pkt-icon--small')
+    expect(iconElement).toBeInTheDocument()
+  })
+
+  it('renders tag when tag and tagSkin props are provided', () => {
+    const { getByText } = render(
+      <PktTabs>
+        <PktTabItem index={0} tag="New" tagSkin="blue">
+          First Tab
+        </PktTabItem>
+      </PktTabs>,
+    )
+
+    expect(getByText('New')).toBeInTheDocument()
+  })
+
+  it('handles keyboard navigation with ArrowRight', () => {
+    const { getByText } = render(
+      <PktTabs>
+        <PktTabItem index={0} active>
+          First Tab
+        </PktTabItem>
+        <PktTabItem index={1}>Second Tab</PktTabItem>
+        <PktTabItem index={2}>Third Tab</PktTabItem>
+      </PktTabs>,
+    )
+
+    const firstTab = getByText('First Tab')
+    const secondTab = getByText('Second Tab')
+
+    firstTab.focus()
+    fireEvent.keyUp(firstTab, { code: 'ArrowRight' })
+
+    expect(secondTab).toHaveFocus()
+  })
+
+  it('handles keyboard navigation with ArrowLeft', () => {
+    const { getByText } = render(
+      <PktTabs>
+        <PktTabItem index={0}>First Tab</PktTabItem>
+        <PktTabItem index={1} active>
+          Second Tab
+        </PktTabItem>
+        <PktTabItem index={2}>Third Tab</PktTabItem>
+      </PktTabs>,
+    )
+
+    const firstTab = getByText('First Tab')
+    const secondTab = getByText('Second Tab')
+
+    secondTab.focus()
+    fireEvent.keyUp(secondTab, { code: 'ArrowLeft' })
+
+    expect(firstTab).toHaveFocus()
+  })
+
+  it('stays on last tab when navigating past it with ArrowRight', () => {
+    const { getByText } = render(
+      <PktTabs>
+        <PktTabItem index={0}>First Tab</PktTabItem>
+        <PktTabItem index={1}>Second Tab</PktTabItem>
+        <PktTabItem index={2} active>
+          Third Tab
+        </PktTabItem>
+      </PktTabs>,
+    )
+
+    const thirdTab = getByText('Third Tab')
+
+    thirdTab.focus()
+    fireEvent.keyUp(thirdTab, { code: 'ArrowRight' })
+
+    expect(thirdTab).toHaveFocus()
+  })
+
+  it('stays on first tab when navigating before it with ArrowLeft', () => {
+    const { getByText } = render(
+      <PktTabs>
+        <PktTabItem index={0} active>
+          First Tab
+        </PktTabItem>
+        <PktTabItem index={1}>Second Tab</PktTabItem>
+        <PktTabItem index={2}>Third Tab</PktTabItem>
+      </PktTabs>,
+    )
+
+    const firstTab = getByText('First Tab')
+
+    firstTab.focus()
+    fireEvent.keyUp(firstTab, { code: 'ArrowLeft' })
+
+    expect(firstTab).toHaveFocus()
+  })
+
+  it('selects tab when Space key is pressed', () => {
+    const handleTabSelected = jest.fn()
+    const { getByText } = render(
+      <PktTabs onTabSelected={handleTabSelected}>
+        <PktTabItem index={0}>First Tab</PktTabItem>
+        <PktTabItem index={1}>Second Tab</PktTabItem>
+      </PktTabs>,
+    )
+
+    const secondTab = getByText('Second Tab')
+    fireEvent.keyUp(secondTab, { code: 'Space' })
+
+    expect(handleTabSelected).toHaveBeenCalledWith(1)
+  })
+
+  it('selects tab when ArrowDown key is pressed', () => {
+    const handleTabSelected = jest.fn()
+    const { getByText } = render(
+      <PktTabs onTabSelected={handleTabSelected}>
+        <PktTabItem index={0}>First Tab</PktTabItem>
+        <PktTabItem index={1}>Second Tab</PktTabItem>
+      </PktTabs>,
+    )
+
+    const secondTab = getByText('Second Tab')
+    fireEvent.keyUp(secondTab, { code: 'ArrowDown' })
+
+    expect(handleTabSelected).toHaveBeenCalledWith(1)
+  })
+
+  it('disables keyboard navigation when arrowNav is false', () => {
+    const { getByText } = render(
+      <PktTabs arrowNav={false}>
+        <PktTabItem index={0} active>
+          First Tab
+        </PktTabItem>
+        <PktTabItem index={1}>Second Tab</PktTabItem>
+      </PktTabs>,
+    )
+
+    const firstTab = getByText('First Tab')
+    const secondTab = getByText('Second Tab')
+
+    firstTab.focus()
+    fireEvent.keyUp(firstTab, { code: 'ArrowRight' })
+
+    expect(secondTab).not.toHaveFocus()
+  })
+
+  it('disables keyboard navigation when disableArrowNav is true', () => {
+    const { getByText } = render(
+      <PktTabs disableArrowNav={true}>
+        <PktTabItem index={0} active>
+          First Tab
+        </PktTabItem>
+        <PktTabItem index={1}>Second Tab</PktTabItem>
+      </PktTabs>,
+    )
+
+    const firstTab = getByText('First Tab')
+    const secondTab = getByText('Second Tab')
+
+    firstTab.focus()
+    fireEvent.keyUp(firstTab, { code: 'ArrowRight' })
+
+    expect(secondTab).not.toHaveFocus()
+  })
+
+  it('disableArrowNav overrides arrowNav when both are set', () => {
+    const { getByText } = render(
+      <PktTabs arrowNav={true} disableArrowNav={true}>
+        <PktTabItem index={0} active>
+          First Tab
+        </PktTabItem>
+        <PktTabItem index={1}>Second Tab</PktTabItem>
+      </PktTabs>,
+    )
+
+    const firstTab = getByText('First Tab')
+    const secondTab = getByText('Second Tab')
+
+    // Even though arrowNav is true, disableArrowNav should override it
+    firstTab.focus()
+    fireEvent.keyUp(firstTab, { code: 'ArrowRight' })
+
+    expect(secondTab).not.toHaveFocus()
+  })
+
+  it('works with mapped children when explicit index is provided', () => {
+    const items = ['First', 'Second', 'Third']
+    const handleTabSelected = jest.fn()
+
+    const { getByText } = render(
+      <PktTabs onTabSelected={handleTabSelected}>
+        {items.map((item, i) => (
+          <PktTabItem key={i} index={i}>
+            {item}
+          </PktTabItem>
+        ))}
+      </PktTabs>,
+    )
+
+    fireEvent.click(getByText('Second'))
+    expect(handleTabSelected).toHaveBeenCalledWith(1)
+
+    fireEvent.click(getByText('Third'))
+    expect(handleTabSelected).toHaveBeenCalledWith(2)
+  })
+
+  describe('Accessibility', () => {
+    it('should not have any accessibility violations', async () => {
+      const { container } = render(
+        <PktTabs>
+          <PktTabItem index={0} active>
+            First Tab
+          </PktTabItem>
+          <PktTabItem index={1}>Second Tab</PktTabItem>
+          <PktTabItem index={2}>Third Tab</PktTabItem>
+        </PktTabs>,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('sets correct ARIA attributes on buttons', () => {
+      const { getByText } = render(
+        <PktTabs>
+          <PktTabItem index={0} active>
+            First Tab
+          </PktTabItem>
+          <PktTabItem index={1}>Second Tab</PktTabItem>
+        </PktTabs>,
+      )
+
+      const firstTab = getByText('First Tab')
+      const secondTab = getByText('Second Tab')
+
+      expect(firstTab).toHaveAttribute('role', 'tab')
+      expect(firstTab).toHaveAttribute('aria-selected', 'true')
+      expect(secondTab).toHaveAttribute('role', 'tab')
+      expect(secondTab).toHaveAttribute('aria-selected', 'false')
+    })
+
+    it('does not set tab role or aria-selected on links when arrowNav is false', () => {
+      const { getByText } = render(
+        <PktTabs arrowNav={false}>
+          <PktTabItem index={0} href="/" active>
+            Home
+          </PktTabItem>
+          <PktTabItem index={1} href="/about">
+            About
+          </PktTabItem>
+        </PktTabs>,
+      )
+
+      const homeLink = getByText('Home')
+      const aboutLink = getByText('About')
+
+      expect(homeLink).not.toHaveAttribute('role')
+      expect(homeLink).not.toHaveAttribute('aria-selected')
+      expect(aboutLink).not.toHaveAttribute('role')
+      expect(aboutLink).not.toHaveAttribute('aria-selected')
+    })
+
+    it('works with href links when arrowNav is false (no WCAG violations)', async () => {
+      const { container } = render(
+        <PktTabs arrowNav={false}>
+          <PktTabItem index={0} href="/" active>
+            Home
+          </PktTabItem>
+          <PktTabItem index={1} href="/about">
+            About
+          </PktTabItem>
+        </PktTabs>,
+      )
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})