@oslokommune/punkt-react 13.19.2 → 13.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "13.19.2",
+  "version": "13.21.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.2",
+    "@oslokommune/punkt-elements": "^13.21.0",
     "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-hook-form": "^7.53.0"
@@ -47,7 +47,7 @@
   "devDependencies": {
     "@babel/plugin-transform-private-property-in-object": "^7.25.9",
     "@oslokommune/punkt-assets": "^13.16.0",
-    "@oslokommune/punkt-css": "^13.19.0",
+    "@oslokommune/punkt-css": "^13.21.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -103,5 +103,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "5288eb3b3820c776ffbc2e9dc264664fa4d465ea"
+  "gitHead": "7559532feebf044efeec97d19d74c9c77e46a5b3"
 }

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>
     )
   },