@oslokommune/punkt-react 16.10.0 → 16.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "16.10.0",
+  "version": "16.11.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": "^16.10.0",
+    "@oslokommune/punkt-elements": "^16.11.0",
     "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-hook-form": "^7.53.0"
@@ -50,7 +50,7 @@
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.37.0",
     "@oslokommune/punkt-assets": "^16.0.0",
-    "@oslokommune/punkt-css": "^16.10.0",
+    "@oslokommune/punkt-css": "^16.11.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": "7d339c3bc11d0da4291536496aebb6761dd519cb"
+  "gitHead": "c0da9ee95130ddfec70981101500f84217b031d6"
 }

package/src/components/tabs/TabItem.tsx

@@ -65,7 +65,7 @@ export const PktTabItem = forwardRef<HTMLAnchorElement | HTMLButtonElement, IPkt
 
     const content = (
       <>
-        {icon && <PktIcon name={icon} className="pkt-icon--small" />}
+        {icon && <PktIcon name={icon} className={`pkt-icon--small ${icon === 'check' ? 'pkt-tabs__status-icon' : ''}`} />}
         {children}
         {tag && (
           <PktTag skin={tagSkin} size="small">

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

@@ -56,6 +56,45 @@ describe('Tabs component', () => {
       expect(results).toHaveNoViolations()
     })
   })
+
+  describe('separators', () => {
+    it('applies separator class on tabs root when separator icon is provided', () => {
+      const { container } = render(<PktTabs tabs={tabs} separatorIconName="arrow-right" />)
+      expect(container.querySelector('.pkt-tabs')).toHaveClass('pkt-tabs--with-separator')
+    })
+
+    it('keeps tab semantics when separators are enabled', () => {
+      const { getByText, container } = render(<PktTabs tabs={tabs} separatorIconName="arrow-right" />)
+      const tabList = container.querySelector('.pkt-tabs__list')
+
+      expect(tabList).toHaveAttribute('role', 'tablist')
+      expect(getByText('Tab 1')).toHaveAttribute('role', 'tab')
+      expect(getByText('Tab 2')).toHaveAttribute('role', 'tab')
+    })
+
+    it('renders decorative separators in DOM', () => {
+      const { container } = render(
+        <PktTabs separatorIconName="arrow-right">
+          <PktTabItem index={0}>First</PktTabItem>
+          <PktTabItem index={1} disabled>
+            Second
+          </PktTabItem>
+          <PktTabItem index={2}>Third</PktTabItem>
+        </PktTabs>,
+      )
+
+      expect(container.querySelectorAll('.pkt-tabs__separator')).toHaveLength(2)
+      expect(container.querySelectorAll('.pkt-tabs__button, .pkt-tabs__link')).toHaveLength(3)
+    })
+
+    it('prefers separatorIconPath over separatorIconName', () => {
+      const { container } = render(
+        <PktTabs tabs={tabs} separatorIconName="arrow-right" separatorIconPath="/custom.svg" />,
+      )
+      const separatorImage = container.querySelector('.pkt-tabs__separator img')
+      expect(separatorImage).toHaveAttribute('src', '/custom.svg')
+    })
+  })
 })
 
 describe('PktTabItem children format', () => {

package/src/components/tabs/Tabs.tsx

@@ -12,6 +12,7 @@ import {
   useRef,
 } from 'react'
 
+import { PktIcon } from '../icon/Icon'
 import { PktTabItem } from './TabItem'
 
 export type TSkin = 'blue' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray' | 'blue-light'
@@ -55,6 +56,8 @@ export interface IPktTab {
 export interface IPktTabs {
   arrowNav?: boolean
   disableArrowNav?: boolean
+  separatorIconName?: string
+  separatorIconPath?: string
   tabs?: IPktTab[]
   onTabSelected?: (index: number) => void
   children?: ReactNode
@@ -62,7 +65,15 @@ export interface IPktTabs {
 
 export const PktTabs = forwardRef(
   (
-    { arrowNav = true, disableArrowNav = false, tabs, onTabSelected, children }: IPktTabs,
+    {
+      arrowNav = true,
+      disableArrowNav = false,
+      separatorIconName,
+      separatorIconPath,
+      tabs,
+      onTabSelected,
+      children,
+    }: IPktTabs,
     ref: Ref<HTMLDivElement>,
   ): JSX.Element => {
     const tabRefs = useRef<Array<HTMLAnchorElement | HTMLButtonElement | null>>([])
@@ -71,8 +82,10 @@ export const PktTabs = forwardRef(
     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
+    const childItems = Children.toArray(children)
+    const hasChildren = childItems.length > 0
+    const tabCount = hasChildren ? childItems.length : tabs?.length || 0
+    const hasSeparator = !!(separatorIconName || separatorIconPath)
 
     useEffect(() => {
       tabRefs.current = tabRefs.current.slice(0, tabCount)
@@ -139,7 +152,23 @@ export const PktTabs = forwardRef(
       disabledMap.current[index] = disabled
     }
 
-    // If tabs as prop instead of children
+    const renderSeparator = (key: string) => (
+      <span className="pkt-tabs__separator" aria-hidden="true" role="presentation" key={key}>
+        {separatorIconPath ? (
+          <img src={separatorIconPath} alt="" aria-hidden="true" />
+        ) : separatorIconName ? (
+          <PktIcon name={separatorIconName} className="pkt-tabs__separator-icon" />
+        ) : null}
+      </span>
+    )
+
+    const withSeparators = (items: ReactNode[]) => {
+      if (!hasSeparator || items.length <= 1) return items
+      return items.flatMap((item, index) =>
+        index < items.length - 1 ? [item, renderSeparator(`separator-${index}`)] : [item],
+      )
+    }
+
     const tabItems = tabs?.map((tab, index) => (
       <PktTabItem
         key={index}
@@ -156,11 +185,14 @@ export const PktTabs = forwardRef(
       </PktTabItem>
     ))
 
+    const tabsClasses = ['pkt-tabs', hasSeparator && 'pkt-tabs--with-separator'].filter(Boolean).join(' ')
+    const renderedTabs = withSeparators((hasChildren ? childItems : tabItems || []) as ReactNode[])
+
     return (
       <TabsContext.Provider value={{ arrowNav: useArrowNav, registerTabRef, handleKeyPress, selectTab }}>
-        <div className="pkt-tabs" ref={ref}>
+        <div className={tabsClasses} ref={ref}>
           <div className="pkt-tabs__list" role={useArrowNav ? 'tablist' : 'navigation'}>
-            {children || tabItems}
+            {renderedTabs}
           </div>
         </div>
       </TabsContext.Provider>