@oslokommune/punkt-react 13.7.0 → 13.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "13.7.0",
+  "version": "13.8.0",
   "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": "291eaf91a93ce286149605e36547068da3bf90e9"
 }

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()
+    })
+  })
+})

package/src/components/tabs/Tabs.tsx

@@ -1,11 +1,38 @@
 'use client'
 
-import React, { forwardRef, Ref, useRef, useEffect, KeyboardEvent, Fragment } from 'react'
-import { PktIcon } from '../icon/Icon'
-import { PktTag } from '../tag/Tag'
+import {
+  forwardRef,
+  Ref,
+  useRef,
+  useEffect,
+  KeyboardEvent,
+  ReactNode,
+  Children,
+  createContext,
+  useContext,
+} from 'react'
+import { PktTabItem } from './TabItem'
 
 export type TSkin = 'blue' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray' | 'blue-light'
 
+// Context for passing tab navigation logic to children
+interface ITabsContext {
+  arrowNav: boolean
+  registerTabRef: (index: number, el: HTMLAnchorElement | HTMLButtonElement | null) => void
+  handleKeyPress: (index: number, event: KeyboardEvent) => void
+  selectTab: (index: number) => void
+}
+
+const TabsContext = createContext<ITabsContext | null>(null)
+
+export const useTabsContext = () => {
+  const context = useContext(TabsContext)
+  if (!context) {
+    throw new Error('TabItem must be used within a Tabs component')
+  }
+  return context
+}
+
 export interface IPktTab {
   text: string
   href?: string
@@ -21,88 +48,82 @@ export interface IPktTab {
 
 export interface IPktTabs {
   arrowNav?: boolean
-  tabs: IPktTab[]
+  disableArrowNav?: boolean
+  tabs?: IPktTab[]
   onTabSelected?: (index: number) => void
+  children?: ReactNode
 }
 
 export const PktTabs = forwardRef(
-  ({ arrowNav = true, tabs, onTabSelected }: IPktTabs, ref: Ref<HTMLDivElement>): JSX.Element => {
+  (
+    { arrowNav = true, disableArrowNav = false, tabs, onTabSelected, children }: IPktTabs,
+    ref: Ref<HTMLDivElement>,
+  ): JSX.Element => {
     const tabRefs = useRef<Array<HTMLAnchorElement | HTMLButtonElement | null>>([])
+
+    const useArrowNav = arrowNav && !disableArrowNav
+
+    // Determine if we're using children or tabs array
+    const hasChildren = children && Children.count(children) > 0
+    const tabCount = hasChildren ? Children.count(children) : tabs?.length || 0
+
     useEffect(() => {
-      tabRefs.current = tabRefs.current.slice(0, tabs.length)
-    }, [tabs])
-    const selectTab = (index: number, tab: IPktTab): void => {
-      if (tab.action) tab.action(index)
+      tabRefs.current = tabRefs.current.slice(0, tabCount)
+    }, [tabCount])
+
+    const selectTab = (index: number): void => {
+      const tab = tabs?.[index]
+      if (tab?.action) {
+        tab.action(index)
+      }
       if (onTabSelected) onTabSelected(index)
     }
+
     const handleKeyPress = (index: number, event: KeyboardEvent) => {
-      if (arrowNav) {
+      if (useArrowNav) {
         if (event.code === 'ArrowLeft' && index !== 0) {
           tabRefs.current[index - 1]?.focus()
         }
-        if (event.code === 'ArrowRight' && index < tabs.length - 1) {
+        if (event.code === 'ArrowRight' && index < tabCount - 1) {
           tabRefs.current[index + 1]?.focus()
         }
         if (event.code === 'ArrowDown' || event.code === 'Space') {
-          selectTab(index, tabs[index])
+          selectTab(index)
         }
       }
     }
+
+    const registerTabRef = (index: number, el: HTMLAnchorElement | HTMLButtonElement | null) => {
+      tabRefs.current[index] = el
+    }
+
+    // If tabs as prop instead of children
+    const tabItems = tabs?.map((tab, index) => (
+      <PktTabItem
+        key={index}
+        active={tab.active}
+        href={tab.href}
+        onClick={() => selectTab(index)}
+        icon={tab.icon}
+        controls={tab.controls}
+        tag={tab.tag?.text}
+        tagSkin={tab.tag?.skin}
+        index={index}
+      >
+        {tab.text}
+      </PktTabItem>
+    ))
+
     return (
-      <div className="pkt-tabs" ref={ref}>
-        <div className="pkt-tabs__list" role={arrowNav ? 'tablist' : 'navigation'}>
-          {tabs.map((tab, index) => (
-            <Fragment key={index}>
-              {tab.href ? (
-                <a
-                  aria-selected={!!tab.active}
-                  role={arrowNav ? 'tab' : undefined}
-                  href={tab.href}
-                  aria-controls={tab.controls}
-                  className={`pkt-tabs__link ${tab.active ? 'active' : ''}`}
-                  onKeyUp={(event) => handleKeyPress(index, event)}
-                  onClick={() => selectTab(index, tab)}
-                  tabIndex={tab.active || !arrowNav ? undefined : -1}
-                  ref={(el) => {
-                    tabRefs.current[index] = el
-                  }}
-                >
-                  {tab.icon && <PktIcon name={tab.icon} className="pkt-icon--small" />}
-                  {tab.text}
-                  {tab.tag && (
-                    <PktTag skin={tab.tag.skin} size="small">
-                      {tab.tag.text}
-                    </PktTag>
-                  )}
-                </a>
-              ) : (
-                <button
-                  aria-selected={!!tab.active}
-                  role={arrowNav ? 'tab' : undefined}
-                  type="button"
-                  aria-controls={tab.controls}
-                  className={`pkt-tabs__button pkt-link-button ${tab.active ? 'active' : ''}`}
-                  key={'b-' + index}
-                  onKeyUp={(event) => handleKeyPress(index, event)}
-                  onClick={() => selectTab(index, tab)}
-                  tabIndex={tab.active || !arrowNav ? undefined : -1}
-                  ref={(el) => {
-                    tabRefs.current[index] = el
-                  }}
-                >
-                  {tab.icon && <PktIcon name={tab.icon} className="pkt-icon--small" />}
-                  {tab.text}
-                  {tab.tag && (
-                    <PktTag skin={tab.tag.skin} size="small">
-                      {tab.tag.text}
-                    </PktTag>
-                  )}
-                </button>
-              )}
-            </Fragment>
-          ))}
+      <TabsContext.Provider value={{ arrowNav: useArrowNav, registerTabRef, handleKeyPress, selectTab }}>
+        <div className="pkt-tabs" ref={ref}>
+          <div className="pkt-tabs__list" role={useArrowNav ? 'tablist' : 'navigation'}>
+            {children || tabItems}
+          </div>
         </div>
-      </div>
+      </TabsContext.Provider>
     )
   },
 )
+
+export { PktTabItem } from './TabItem'