@oslokommune/punkt-react 13.19.1 → 13.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "13.19.1",
+  "version": "13.20.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.19.1",
+    "@oslokommune/punkt-elements": "^13.20.0",
     "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-hook-form": "^7.53.0"
@@ -103,5 +103,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "5b4f6001bf615f85b3ea5cac18f4a2f8a14dfbd9"
+  "gitHead": "fa8d8103ac24cb2da42e47d09cf04c73f765cfd0"
 }

package/src/components/button/Button.test.tsx

@@ -127,3 +127,67 @@ describe('accessibility', () => {
     expect(results).toHaveNoViolations()
   })
 })
+
+describe('PktButton icon paths', () => {
+  test('passes iconPath to PktIcon when provided', () => {
+    const customPath = 'https://custom-cdn.example.com/icons/'
+    render(
+      <PktButton variant="icon-left" iconName="user" iconPath={customPath}>
+        Test Button
+      </PktButton>,
+    )
+
+    const icon = document.querySelector('.pkt-btn__icon:not(.pkt-btn__spinner)') as HTMLElement & { path?: string }
+    expect(icon?.path).toBe(customPath)
+  })
+
+  test('does not set path property when iconPath is not provided', () => {
+    render(
+      <PktButton variant="icon-left" iconName="user">
+        Test Button
+      </PktButton>,
+    )
+
+    const icon = document.querySelector('.pkt-btn__icon:not(.pkt-btn__spinner)') as HTMLElement & { path?: string }
+    // When not provided, path uses PktIcon's default
+    expect(icon?.path).toBe('https://punkt-cdn.oslo.kommune.no/latest/icons/')
+  })
+
+  test('passes secondIconPath to second PktIcon when provided', () => {
+    const customPath = 'https://custom-cdn.example.com/icons/'
+    render(
+      <PktButton variant="icons-right-and-left" iconName="home" secondIconName="star" secondIconPath={customPath}>
+        Test Button
+      </PktButton>,
+    )
+
+    const icons = document.querySelectorAll('.pkt-btn__icon:not(.pkt-btn__spinner)') as NodeListOf<
+      HTMLElement & { path?: string }
+    >
+    expect(icons).toHaveLength(2)
+    expect(icons[1]?.path).toBe(customPath)
+  })
+
+  test('handles both iconPath and secondIconPath independently', () => {
+    const iconPath = 'https://custom-cdn.example.com/icons/'
+    const secondIconPath = 'https://another-cdn.example.com/icons/'
+    render(
+      <PktButton
+        variant="icons-right-and-left"
+        iconName="home"
+        secondIconName="star"
+        iconPath={iconPath}
+        secondIconPath={secondIconPath}
+      >
+        Test Button
+      </PktButton>,
+    )
+
+    const icons = document.querySelectorAll('.pkt-btn__icon:not(.pkt-btn__spinner)') as NodeListOf<
+      HTMLElement & { path?: string }
+    >
+    expect(icons).toHaveLength(2)
+    expect(icons[0]?.path).toBe(iconPath)
+    expect(icons[1]?.path).toBe(secondIconPath)
+  })
+})

package/src/components/button/Button.tsx

@@ -14,6 +14,8 @@ window.pktAnimationPath = window.pktAnimationPath || 'https://punkt-cdn.oslo.kom
 export interface IPktButton extends ButtonHTMLAttributes<HTMLButtonElement> {
   iconName?: string
   secondIconName?: string
+  iconPath?: string
+  secondIconPath?: string
   mode?: 'light' | 'dark'
   size?: 'small' | 'medium' | 'large'
   fullWidth?: boolean
@@ -46,6 +48,8 @@ export const PktButton = forwardRef(
       className,
       iconName = 'user',
       secondIconName = 'user',
+      iconPath,
+      secondIconPath,
       size = 'medium',
       fullWidth = false,
       fullWidthOnMobile = false,
@@ -89,9 +93,17 @@ export const PktButton = forwardRef(
         {isLoading && (
           <PktIcon className="pkt-btn__icon pkt-btn__spinner" name="spinner-blue" path={loadingAnimationPath} />
         )}
-        {variant !== 'label-only' && <PktIcon className="pkt-btn__icon" name={iconName}></PktIcon>}
+        {variant !== 'label-only' && (
+          <PktIcon className="pkt-btn__icon" name={iconName} {...(iconPath && { path: iconPath })}></PktIcon>
+        )}
         <span className="pkt-btn__text">{children}</span>
-        {variant === 'icons-right-and-left' && <PktIcon className="pkt-btn__icon" name={secondIconName}></PktIcon>}
+        {variant === 'icons-right-and-left' && (
+          <PktIcon
+            className="pkt-btn__icon"
+            name={secondIconName}
+            {...(secondIconPath && { path: secondIconPath })}
+          ></PktIcon>
+        )}
       </button>
     )
   },

package/src/components/tag/Tag.tsx

@@ -8,6 +8,7 @@ import {
   ReactNode,
   RefObject,
   useCallback,
+  useEffect,
   useMemo,
   useRef,
   useState,
@@ -37,7 +38,7 @@ interface SpanPktTagProps extends BasePktTagProps, HTMLAttributes<HTMLSpanElemen
   type?: undefined
 }
 
-export type IPktTag = ButtonPktTagProps | SpanPktTagProps;
+export type IPktTag = ButtonPktTagProps | SpanPktTagProps
 
 export const PktTag = forwardRef<HTMLSpanElement | HTMLButtonElement, ButtonPktTagProps | SpanPktTagProps>(
   (
@@ -67,13 +68,15 @@ export const PktTag = forwardRef<HTMLSpanElement | HTMLButtonElement, ButtonPktT
     }, [setClosed])
 
     const spanRef: RefObject<HTMLButtonElement | HTMLSpanElement> = useRef<HTMLButtonElement | HTMLSpanElement>(null)
+    const [labelText, setLabelText] = useState('')
+
+    useEffect(() => {
+      setLabelText(spanRef.current?.textContent?.trim() ?? '')
+    }, [children])
 
     const ariaDescription = useMemo(() => {
-      if (closeTag && !ariaLabel) {
-        const label = spanRef.current?.textContent?.trim()
-        return (label && `Klikk for å fjerne ${label}`) || ariaDescriptionPropValue
-      }
-    }, [closeTag, ariaLabel])
+      if (closeTag && !ariaLabel) return (labelText && `Klikk for å fjerne ${labelText}`) || ariaDescriptionPropValue
+    }, [closeTag, ariaLabel, labelText, ariaDescriptionPropValue])
 
     const classes = {
       'pkt-tag': true,
@@ -112,7 +115,7 @@ export const PktTag = forwardRef<HTMLSpanElement | HTMLButtonElement, ButtonPktT
     } else {
       return (
         <span {...props} className={classNames(classes, className)} ref={forwardedRef as ForwardedRef<HTMLSpanElement>}>
-          {iconName && <PktIcon className={'pkt-tag__icon'} name={iconName} />}
+          {iconName && <PktIcon className={'pkt-tag__icon'} name={iconName} aria-hidden="true" />}
           <span ref={spanRef}>{children}</span>
         </span>
       )