@oslokommune/punkt-react 12.30.2 → 12.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "12.30.2",
+  "version": "12.31.0",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -38,7 +38,7 @@
   "dependencies": {
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@lit/react": "^1.0.5",
-    "@oslokommune/punkt-elements": "^12.30.2",
+    "@oslokommune/punkt-elements": "^12.31.0",
     "angular-html-parser": "^6.0.2",
     "html-format": "^1.1.7",
     "prettier": "^3.3.3",
@@ -48,7 +48,7 @@
   },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^12.30.1",
-    "@oslokommune/punkt-css": "^12.30.1",
+    "@oslokommune/punkt-css": "^12.31.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -111,5 +111,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "a4b93e347c6b9167efadde236794e42aafc18489"
+  "gitHead": "95a46dc5e5fcbab72e2c303c26127a95297c3e83"
 }

package/src/components/backlink/BackLink.test.tsx

@@ -1,50 +1,44 @@
-
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
 
-import { PktBackLink } from './BackLink';
+import { PktBackLink } from './BackLink'
 
 expect.extend(toHaveNoViolations)
 
 describe('PktBackLink', () => {
-    it('renders with default text and href', () => {
-        const { getByRole } = render(<PktBackLink />);
-
-        const link = getByRole('link');
-        expect(link.textContent).toBe('Forsiden');
-        expect(link.getAttribute('href')).toBe('/');
-
-    });
-
-    it('renders with custom text and href', () => {
-        const { getByRole } = render(
-            <PktBackLink href="/custom-url" text="Custom Text" />
-        );
-
-        const link = getByRole('link');
-        expect(link.textContent).toBe('Custom Text');
-        expect(link.getAttribute('href')).toBe('/custom-url');
-    });
-
-    it('calls onClick when clicked', () => {
-        const onClickMock = jest.fn();
-
-        const { getByText } = render(
-            <PktBackLink text="Back" onClick={onClickMock} />
-        );
-
-        const link = getByText('Back');
-        fireEvent.click(link);
-
-        expect(onClickMock).toHaveBeenCalledTimes(1);
-    });
-
-    describe('accessibility', () => {
-        it('renders with no wcag errors with axe', async () => {
-            const { container } = render(<PktBackLink text="Tilbake" href="/" />)
-            const results = await axe(container)
-
-            expect(results).toHaveNoViolations()
-        })
+  it('renders with default text and href', async () => {
+    const { getByRole } = render(<PktBackLink />)
+    await window.customElements.whenDefined('pkt-backlink')
+    const link = getByRole('link')
+    await expect(link.textContent).toBe('Forsiden')
+    await expect(link.getAttribute('href')).toBe('/')
+  })
+
+  it('renders with custom text and href', async () => {
+    const { getByRole } = render(<PktBackLink href="/custom-url" text="Custom Text" />)
+    await window.customElements.whenDefined('pkt-backlink')
+    const link = getByRole('link')
+    await expect(link.textContent).toBe('Custom Text')
+    await expect(link.getAttribute('href')).toBe('/custom-url')
+  })
+
+  it('calls onClick when clicked', async () => {
+    const onClickMock = jest.fn()
+    const { getByText } = render(<PktBackLink text="Back" onClick={onClickMock} />)
+    await window.customElements.whenDefined('pkt-backlink')
+    const link = getByText('Back')
+    await fireEvent.click(link)
+
+    await expect(onClickMock).toHaveBeenCalledTimes(1)
+  })
+
+  describe('accessibility', () => {
+    it('renders with no wcag errors with axe', async () => {
+      const { container } = render(<PktBackLink text="Tilbake" href="/" />)
+
+      const results = await axe(container)
+
+      await expect(results).toHaveNoViolations()
     })
-});
+  })
+})

package/src/components/backlink/BackLink.tsx

@@ -1,36 +1,22 @@
-import React, { ForwardedRef, forwardRef } from 'react'
+import React, { ForwardRefExoticComponent, LegacyRef, AnchorHTMLAttributes, MouseEventHandler } from 'react'
+import { createComponent, EventName } from '@lit/react'
+import { PktBackLink as PktElBackLink } from '@oslokommune/punkt-elements'
+import type { IPktBackLink as IPktElBackLink } from '@oslokommune/punkt-elements'
 
-import { PktIcon } from '../icon/Icon'
+type ExtendedBackLink = Omit<IPktElBackLink, 'text'> & AnchorHTMLAttributes<HTMLAnchorElement>
 
-export interface IPktBackLink extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-  href?: string
+export interface IPktBackLink extends ExtendedBackLink {
   text?: string
-  className?: string
+  ref?: LegacyRef<HTMLAnchorElement>
+  ariaLabel?: string
+  onClick?: MouseEventHandler<HTMLAnchorElement>
 }
 
-export const PktBackLink = forwardRef(
-  ({ href, text, onClick, className, ...props }: IPktBackLink, ref: ForwardedRef<HTMLAnchorElement>) => {
-    const classes = [className, 'pkt-back-link'].filter(Boolean).join(' ')
-
-    const handleClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
-      if (onClick) {
-        onClick(event)
-      }
-    }
-
-    return (
-      <nav ref={ref} className={classes} aria-label="Gå tilbake et steg">
-        <a href={href || '/'} className="pkt-link pkt-link--icon-left" onClick={handleClick} {...props}>
-          <PktIcon
-            className="pkt-back-link__icon pkt-icon pkt-link__icon"
-            name="chevron-thin-left"
-            aria-hidden="true"
-          />
-          <span className="pkt-back-link__text">{text || 'Forsiden'}</span>
-        </a>
-      </nav>
-    )
-  },
-)
+export const PktBackLink = createComponent({
+  tagName: 'pkt-backlink',
+  elementClass: PktElBackLink,
+  react: React,
+  displayName: 'PktBackLink',
+}) as ForwardRefExoticComponent<IPktBackLink>
 
 PktBackLink.displayName = 'PktBackLink'