@oslokommune/punkt-react 12.4.0 → 12.5.0

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "12.4.0",
+  "version": "12.5.0",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
   "main": "dist/punkt-react.umd.js",
   "module": "dist/punkt-react.es.js",
+  "nohoist": [
+    "**/@lit",
+    "**/@lit/**"
+  ],
   "files": [
     "/dist",
     "src/components/**/*",
@@ -43,8 +47,8 @@
   },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^12.4.0",
-    "@oslokommune/punkt-css": "^12.4.0",
-    "@oslokommune/punkt-elements": "^12.4.0",
+    "@oslokommune/punkt-css": "^12.5.0",
+    "@oslokommune/punkt-elements": "^12.5.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -94,6 +98,11 @@
     "ux",
     "ui"
   ],
+  "jest": {
+    "transformIgnorePatterns": [
+      "<rootDir>/node_modules/(?!@lit/react)"
+    ]
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/oslokommune/punkt.git"
@@ -102,5 +111,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "aeafb5797aedf64dcfe413b752d9f46bc7a82189"
+  "gitHead": "1342b6cc802b3fef7caa218bc76051777e8dbe57"
 }

package/src/components/accordion/Accordion.test.tsx

@@ -8,7 +8,7 @@ import React, { createRef } from 'react'
 expect.extend(toHaveNoViolations)
 
 describe('PktAccordion', () => {
-  test('renders without errors', () => {
+  test('renders without errors', async () => {
     render(
       <PktAccordion>
         <PktAccordionItem id="render-id" title="test">
@@ -16,19 +16,21 @@ describe('PktAccordion', () => {
         </PktAccordionItem>
       </PktAccordion>,
     )
+    await window.customElements.whenDefined('pkt-icon')
     // Assert that the Accordion component renders without throwing any errors
   })
 
-  test('ref works correctly', () => {
+  test('ref works correctly', async () => {
     const ref = createRef<HTMLDivElement>()
     const { unmount } = render(<PktAccordion ref={ref}>Alert text</PktAccordion>)
+    await window.customElements.whenDefined('pkt-icon')
     expect(ref.current).toBeInstanceOf(HTMLDivElement)
 
     unmount()
     expect(ref.current).toBe(null)
   })
 
-  test('renders children', () => {
+  test('renders children', async () => {
     const mockToggleOpen = jest.fn()
     render(
       <PktAccordion>
@@ -40,6 +42,7 @@ describe('PktAccordion', () => {
         </PktAccordionItem>
       </PktAccordion>,
     )
+    await window.customElements.whenDefined('pkt-icon')
 
     // Assert that the Accordion component renders its children correctly
     expect(screen.getByText('Title 1')).toBeInTheDocument()
@@ -48,7 +51,7 @@ describe('PktAccordion', () => {
     expect(screen.getByText('Content 2')).toBeInTheDocument()
   })
 
-  test('applies compact and skin ', () => {
+  test('applies compact and skin ', async () => {
     render(
       <>
         <h3 id="accordion-heading">Accordion Heading</h3>
@@ -59,6 +62,7 @@ describe('PktAccordion', () => {
         </PktAccordion>
       </>,
     )
+    await window.customElements.whenDefined('pkt-icon')
     // Assert that the Accordion component applies the props correctly
     expect(screen.getByTestId('pkt-accordion')).toHaveClass('pkt-accordion--compact')
     expect(screen.getByTestId('pkt-accordion')).toHaveClass('pkt-accordion--outlined')
@@ -76,6 +80,7 @@ describe('PktAccordion', () => {
           </PktAccordionItem>
         </PktAccordion>,
       )
+      await window.customElements.whenDefined('pkt-icon')
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })

package/src/components/breadcrumbs/Breadcrumbs.test.tsx

@@ -1,63 +1,67 @@
-import { render } from '@testing-library/react';
+import { render } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router } from 'react-router-dom'
 
-import { PktBreadcrumbs } from './Breadcrumbs';
+import { PktBreadcrumbs } from './Breadcrumbs'
 
 expect.extend(toHaveNoViolations)
 
 describe('PktBreadcrumbs Component', () => {
-    const breadcrumbs = [
-        { text: 'Home', href: '/' },
-        { text: 'Products', href: '/products' },
-        { text: 'Item', href: '/products/item' },
-    ];
-
-    it('renders breadcrumbs correctly with react-router navigation', () => {
-        const { getAllByText } = render(
-            <Router>
-                <PktBreadcrumbs breadcrumbs={breadcrumbs} navigationType="router" />
-            </Router>
-        );
-
-        expect(getAllByText('Home')).toBeTruthy();
-        expect(getAllByText('Products')).toBeTruthy();
-        expect(getAllByText('Item')).toBeTruthy();
-    });
-
-    it('renders breadcrumbs correctly with anchor navigation', () => {
-        const { getAllByText } = render(<PktBreadcrumbs breadcrumbs={breadcrumbs} navigationType="anchor" />);
-
-        expect(getAllByText('Home')).toBeTruthy();
-        expect(getAllByText('Products')).toBeTruthy();
-        expect(getAllByText('Item')).toBeTruthy();
-    });
-
-    it('renders back link correctly on mobile with router navigation', () => {
-        const { getAllByText } = render(
-            <Router>
-                <PktBreadcrumbs breadcrumbs={breadcrumbs} navigationType="router" />
-            </Router>
-        );
-
-        expect(getAllByText('Home')).toBeTruthy();
-        expect(getAllByText('Products')).toBeTruthy();
-        expect(getAllByText('Item')).toBeTruthy();
-    });
-
-    it('renders back link correctly on mobile with anchor navigation', () => {
-        const { getAllByText } = render(<PktBreadcrumbs breadcrumbs={breadcrumbs} navigationType="anchor" />);
-
-        expect(getAllByText('Home')).toBeTruthy();
-        expect(getAllByText('Products')).toBeTruthy();
-        expect(getAllByText('Item')).toBeTruthy();
-    });
-
-    it('renders with no wcag errors with axe', async () => {
-        const { container } = render(<PktBreadcrumbs breadcrumbs={breadcrumbs} navigationType="anchor" />)
-        const results = await axe(container)
-
-        expect(results).toHaveNoViolations()
-    })
-});
+  const breadcrumbs = [
+    { text: 'Home', href: '/' },
+    { text: 'Products', href: '/products' },
+    { text: 'Item', href: '/products/item' },
+  ]
 
+  it('renders breadcrumbs correctly with react-router navigation', async () => {
+    const { getAllByText } = render(
+      <Router>
+        <PktBreadcrumbs breadcrumbs={breadcrumbs} navigationType="router" />
+      </Router>,
+    )
+    await window.customElements.whenDefined('pkt-icon')
+
+    expect(getAllByText('Home')).toBeTruthy()
+    expect(getAllByText('Products')).toBeTruthy()
+    expect(getAllByText('Item')).toBeTruthy()
+  })
+
+  it('renders breadcrumbs correctly with anchor navigation', async () => {
+    const { getAllByText } = render(<PktBreadcrumbs breadcrumbs={breadcrumbs} navigationType="anchor" />)
+    await window.customElements.whenDefined('pkt-icon')
+
+    expect(getAllByText('Home')).toBeTruthy()
+    expect(getAllByText('Products')).toBeTruthy()
+    expect(getAllByText('Item')).toBeTruthy()
+  })
+
+  it('renders back link correctly on mobile with router navigation', async () => {
+    const { getAllByText } = render(
+      <Router>
+        <PktBreadcrumbs breadcrumbs={breadcrumbs} navigationType="router" />
+      </Router>,
+    )
+    await window.customElements.whenDefined('pkt-icon')
+
+    expect(getAllByText('Home')).toBeTruthy()
+    expect(getAllByText('Products')).toBeTruthy()
+    expect(getAllByText('Item')).toBeTruthy()
+  })
+
+  it('renders back link correctly on mobile with anchor navigation', async () => {
+    const { getAllByText } = render(<PktBreadcrumbs breadcrumbs={breadcrumbs} navigationType="anchor" />)
+    await window.customElements.whenDefined('pkt-icon')
+
+    expect(getAllByText('Home')).toBeTruthy()
+    expect(getAllByText('Products')).toBeTruthy()
+    expect(getAllByText('Item')).toBeTruthy()
+  })
+
+  it('renders with no wcag errors with axe', async () => {
+    const { container } = render(<PktBreadcrumbs breadcrumbs={breadcrumbs} navigationType="anchor" />)
+    await window.customElements.whenDefined('pkt-icon')
+    const results = await axe(container)
+
+    expect(results).toHaveNoViolations()
+  })
+})

package/src/components/breadcrumbs/Breadcrumbs.tsx

@@ -1,7 +1,7 @@
 import React, { ForwardedRef, forwardRef } from 'react'
 import { Link } from 'react-router-dom'
 
-import PktIcon from '../icon/Icon' // Import your Icon component
+import PktIcon from '../icon/Icon'
 
 export interface IBreadcrumbs {
   text: string

package/src/components/footer/Footer.test.tsx

@@ -1,14 +1,14 @@
 // Test med axe https://www.npmjs.com/package/jest-axe
 import '@testing-library/jest-dom'
 
-import { render, screen } from '@testing-library/react'
+import { render, screen } from '../../utils/test-utils'
 import { axe, toHaveNoViolations } from 'jest-axe'
 
 import { PktFooter } from './Footer'
 
 expect.extend(toHaveNoViolations)
 
-describe('PktFooterSimple', () => {
+describe('PktFooter', () => {
   const columnOne = {
     title: 'Column One',
     links: [
@@ -108,11 +108,4 @@ describe('PktFooterSimple', () => {
       expect(results).toHaveNoViolations()
     })
   })
-
-  describe('snapshot', () => {
-    it('renders correctly with all props', () => {
-      const { container } = render(<PktFooter columnOne={columnOne} columnTwo={columnTwo} socialLinks={socialLinks} />)
-      expect(container).toMatchSnapshot()
-    })
-  })
 })

package/src/components/footerSimple/FooterSimple.test.tsx

@@ -1,7 +1,7 @@
 // Test med axe https://www.npmjs.com/package/jest-axe
 import '@testing-library/jest-dom'
 
-import { render } from '@testing-library/react'
+import { render } from '../../utils/test-utils'
 import { axe, toHaveNoViolations } from 'jest-axe'
 
 import { PktFooterSimple } from './FooterSimple'
@@ -52,11 +52,4 @@ describe('PktFooterSimple', () => {
       expect(results).toHaveNoViolations()
     })
   })
-
-  describe('snapshot', () => {
-    it('renders correctly with all props', () => {
-      const { container } = render(<PktFooterSimple links={links} />)
-      expect(container).toMatchSnapshot()
-    })
-  })
 })

package/src/components/header/Header.test.tsx

@@ -78,18 +78,4 @@ describe('PktHeader', () => {
       expect(results).toHaveNoViolations()
     })
   })
-
-  describe('snapshot', () => {
-    it('renders correctly with all props', () => {
-      const { container } = render(
-        <PktHeader
-          user={mockUser}
-          userMenu={mockUserMenu}
-          userMenuFooter={mockUserMenuFooter}
-          representing={mockRepresenting}
-        />,
-      )
-      expect(container).toMatchSnapshot()
-    })
-  })
 })

package/src/components/icon/Icon.test.tsx

@@ -1,14 +1,24 @@
 import '@testing-library/jest-dom'
 
-import { render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor } from '../../utils/test-utils'
 import React from 'react'
 
 import { PktIcon } from './Icon'
-import { IconFetcher, PktIconContext } from './IconContext'
 
-describe('PktIcon', () => {
-  let fetchSpy: jest.SpyInstance
+declare global {
+  interface Window {
+    pktFetch: () => Promise<{ ok: boolean; text: () => Promise<string> }>
+    pktIconPath: string
+  }
+}
+window.pktFetch = (file = 'filnavn.svg') =>
+  Promise.resolve({
+    ok: true,
+    text: () => Promise.resolve(`<svg role="img" data-testid="icon" data-filename=${file}>Her er SVGen</svg>`),
+  })
+window.pktIconPath = 'sti'
 
+describe('PktIcon', () => {
   const localStorageMock = (() => {
     const store: { [key: string]: string } = {}
     return {
@@ -22,71 +32,37 @@ describe('PktIcon', () => {
   })()
   Object.defineProperty(global, 'localStorage', { value: localStorageMock })
 
-  beforeEach(() => {
-    fetchSpy = jest.spyOn(global, 'fetch')
-  })
-
   describe('with default fetcher', () => {
     test('fetches SVG with default fetcher', async () => {
-      fetchSpy.mockResolvedValue(new Response('<svg role="img">arrow Her er noe SVG</svg>', { status: 200 }))
-
-      render(<PktIcon name={'arrow'} />)
+      await render(<PktIcon name="arrow" />)
+      await window.customElements.whenDefined('pkt-icon')
 
       const icon = await screen.findByRole('img')
       expect(icon).toMatchInlineSnapshot(`
         <svg
+          data-filename="stiarrow.svg"
+          data-testid="icon"
           role="img"
         >
-          arrow Her er noe SVG
+          Her er SVGen
         </svg>
       `)
     })
 
     test('fetches SVG', async () => {
-      fetchSpy.mockImplementation(() =>
-        Promise.resolve(new Response('<svg role="img">some-icon Her er noe SVG</svg>', { status: 200 })),
-      )
-
-      render(
-        <>
+      const { container } = await render(
+        <div className="root">
           <PktIcon name={'some-icon'} />
           <PktIcon name={'some-other-icon'} />
           <PktIcon name={'some-icon'} />
-        </>,
+        </div>,
       )
+      await window.customElements.whenDefined('pkt-icon')
 
       await waitFor(async () => {
-        const icons = await screen.findAllByRole('img')
+        const icons = await screen.findAllByTestId('icon')
         expect(icons).toHaveLength(3)
-        expect(fetchSpy).toHaveBeenCalledTimes(2)
       })
     })
   })
-
-  describe('with custom fetcher', () => {
-    test('fetches SVG with custom fetcher', async () => {
-      const customIconFetcher: IconFetcher = {
-        fetchIcon: jest.fn((name: string, path: string | undefined) => {
-          return Promise.resolve(`<svg role="img">Her er SVGen for '${name}' fra '${path}'</svg>`)
-        }),
-      }
-
-      render(
-        <PktIconContext.Provider value={customIconFetcher}>
-          <PktIcon name={'arrow'} path={'http://path/to/something'} />
-        </PktIconContext.Provider>,
-      )
-
-      const icon = await screen.findByRole('img')
-      expect(icon).toMatchInlineSnapshot(`
-        <svg
-          role="img"
-        >
-          Her er SVGen for 'arrow' fra 'http://path/to/something'
-        </svg>
-      `)
-      expect(customIconFetcher.fetchIcon).toHaveBeenCalledTimes(1)
-      expect(fetchSpy).not.toHaveBeenCalled()
-    })
-  })
 })

package/src/components/icon/Icon.tsx

@@ -1,27 +1,23 @@
-import React, { useContext, useEffect, useState } from 'react'
+import React, { FC } from 'react'
 
-import { PktIconContext } from './IconContext'
+import { PktElConstructor, PktElType } from '@/interfaces/IPktElements'
+import { createComponent } from '@lit/react'
+import { PktIcon as PktEl } from '@oslokommune/punkt-elements'
 
-interface PktIconProps extends React.HTMLAttributes<HTMLSpanElement> {
+type Booleanish = boolean | 'true' | 'false'
+
+interface IPktIcon extends PktElType {
   name?: string
   path?: string
+  'aria-hidden'?: Booleanish | undefined
 }
 
-export const PktIcon: React.FC<PktIconProps> = ({ name, path, className = '', ...props }) => {
-  const [innerHtml, setInnerHtml] = useState<string | null>(null)
-  const iconFetcherContext = useContext(PktIconContext)
-
-  useEffect(() => {
-    if (!name) {
-      setInnerHtml(null)
-    } else {
-      iconFetcherContext.fetchIcon(name, path).then(setInnerHtml)
-    }
-  }, [name, path])
-
-  if (!innerHtml) return null
-
-  return <span className={`pkt-icon ${className}`} dangerouslySetInnerHTML={{ __html: innerHtml }} {...props} />
-}
+export const PktIcon: FC<IPktIcon> = createComponent({
+  tagName: 'pkt-icon',
+  elementClass: PktEl as PktElConstructor<HTMLElement>,
+  react: React,
+  displayName: 'PktIcon',
+  events: {},
+})
 
 export default PktIcon

package/src/components/index.ts

@@ -11,7 +11,6 @@ export { PktFooter } from './footer/Footer'
 export { PktFooterSimple } from './footerSimple/FooterSimple'
 export { PktHeader } from './header/Header'
 export { PktIcon } from './icon/Icon'
-export { PktIconContext } from './icon/IconContext'
 export { PktInput } from './input/Input'
 export { PktInputWrapper } from './inputwrapper/InputWrapper'
 export { PktLink } from './link/Link'

package/src/components/linkcard/LinkCard.test.tsx

@@ -61,15 +61,4 @@ describe('PktLinkCard', () => {
       expect(results).toHaveNoViolations()
     })
   })
-
-  describe('snapshots', () => {
-    it('renders correctly as fragment with props', () => {
-      const { asFragment } = render(
-        <PktLinkCard title="Link title" href="/example">
-          Link content
-        </PktLinkCard>,
-      )
-      expect(asFragment()).toMatchSnapshot()
-    })
-  })
 })

package/src/components/loader/Loader.tsx

@@ -67,7 +67,6 @@ export const PktLoader = forwardRef(
               <div className={classes} data-testid="pkt-loader" ref={ref} {...props}>
                 <PktIcon
                   name={getVariant(variant)}
-                  aria-label="loading"
                   path="https://punkt-cdn.oslo.kommune.no/latest/animations/"
                   className={`pkt-loader__svg pkt-loader__${variant}`}
                 />

package/src/components/preview/Preview.tsx

@@ -106,7 +106,9 @@ export const PktPreview: React.FC<PreviewProps> = ({ specs, children, fullWidth
               .replaceAll(componentType, specs.name || '')
               .replaceAll('={', "='")
               .replaceAll('}\n', "'\n")
-              .replaceAll(/([a-zA-Z0-9]+)(:)/g, '"$1"$2'),
+              .replaceAll(/([a-zA-Z0-9]+)(:)/g, '"$1"$2')
+              .replaceAll('"https"', 'https')
+              .replaceAll('className', 'class'),
         )
       })
     } else {

package/src/components/searchinput/SearchInput.test.tsx

@@ -22,31 +22,36 @@ const Wrapper = (props: { onChange: (e: React.ChangeEvent) => void }) => {
 }
 
 describe('PktSearchInput', () => {
-  it('renders with form element when action prop exists', () => {
+  it('renders with form element when action prop exists', async () => {
     const { container } = render(<PktSearchInput id="test-search-input" action="/search" />)
+    await window.customElements.whenDefined('pkt-icon')
     expect(container.querySelector('form')).toBeInTheDocument()
   })
 
-  it('renders with div element when action prop does not exist', () => {
+  it('renders with div element when action prop does not exist', async () => {
     const { container } = render(<PktSearchInput id="test-search-input" />)
+    await window.customElements.whenDefined('pkt-icon')
     expect(container.querySelector('div')).toBeInTheDocument()
     expect(container.querySelector('form')).not.toBeInTheDocument()
   })
 
-  it('renders with label element when label prop exists', () => {
+  it('renders with label element when label prop exists', async () => {
     const { container } = render(<PktSearchInput id="test-search-input" label="Test Label" />)
+    await window.customElements.whenDefined('pkt-icon')
     expect(container.querySelector('label')).toBeInTheDocument()
   })
 
-  it('renders with div element when label prop does not exist', () => {
+  it('renders with div element when label prop does not exist', async () => {
     const { container } = render(<PktSearchInput id="test-search-input" />)
+    await window.customElements.whenDefined('pkt-icon')
     expect(container.querySelector('div')).toBeInTheDocument()
     expect(container.querySelector('label')).not.toBeInTheDocument()
   })
 
-  it('calls onSearch prop with input value on button click', () => {
+  it('calls onSearch prop with input value on button click', async () => {
     const mockOnSearch = jest.fn()
     const { getByRole, getByPlaceholderText } = render(<Wrapper onChange={mockOnSearch} />)
+    await window.customElements.whenDefined('pkt-icon')
 
     const inputElement = getByPlaceholderText('Søk…')
     const buttonElement = getByRole('button')
@@ -63,13 +68,14 @@ describe('PktSearchInput', () => {
     )
   })
 
-  it('renders search suggestions when suggestions prop exists', () => {
+  it('renders search suggestions when suggestions prop exists', async () => {
     const suggestions = [
       { title: 'Suggestion 1', onClick: jest.fn() },
       { title: 'Suggestion 2', onClick: jest.fn() },
     ]
 
     render(<PktSearchInput id="test-search-input" suggestions={suggestions} />)
+    await window.customElements.whenDefined('pkt-icon')
 
     // Check if suggestion elements are rendered
     suggestions.forEach((suggestion) => {
@@ -84,6 +90,7 @@ describe('PktSearchInput', () => {
         { title: 'Suggestion 2', onClick: jest.fn() },
       ]
       const { container } = render(<PktSearchInput id="test-search-input" label="My label" suggestions={suggestions} />)
+      await window.customElements.whenDefined('pkt-icon')
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })

package/src/components/tag/Tag.test.tsx

@@ -71,15 +71,4 @@ describe('PktTag', () => {
       expect(results).toHaveNoViolations()
     })
   })
-
-  describe('snapshot', () => {
-    it('renders correctly with all props', () => {
-      const { container } = render(
-        <PktTag skin="red" size="small" iconName="user" closeTag={true}>
-          Tag
-        </PktTag>,
-      )
-      expect(container).toMatchSnapshot()
-    })
-  })
 })