@oslokommune/punkt-react 13.12.0 → 13.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "13.12.0",
+  "version": "13.13.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.11.0",
+    "@oslokommune/punkt-elements": "^13.13.0",
     "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-element-to-jsx-string": "^15.0.0",
@@ -49,7 +49,7 @@
   "devDependencies": {
     "@babel/plugin-transform-private-property-in-object": "^7.25.9",
     "@oslokommune/punkt-assets": "^13.11.0",
-    "@oslokommune/punkt-css": "^13.11.0",
+    "@oslokommune/punkt-css": "^13.13.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -106,5 +106,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "d3cc0fca4886e3b69ab5cbe305765cef483eab32"
+  "gitHead": "dfda73999cbdf688f04f4fce0240779bd4fed111"
 }

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

@@ -3,7 +3,6 @@ import '@testing-library/jest-dom'
 
 import { render } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
-import * as React from 'react'
 
 import { PktLinkCard } from './LinkCard'
 
@@ -14,20 +13,17 @@ describe('PktLinkCard', () => {
   describe('basic rendering', () => {
     it('renders correctly with only default props', async () => {
       const { getByText } = render(<PktLinkCard>LinkCard Content</PktLinkCard>)
-      await window.customElements.whenDefined('pkt-linkcard')
       expect(getByText('LinkCard Content')).toBeInTheDocument()
     })
 
     it('renders with title', async () => {
       render(<PktLinkCard title="Link title">Link content</PktLinkCard>)
-      await window.customElements.whenDefined('pkt-linkcard')
       const iconElement = document.querySelector('.pkt-linkcard__title')
       expect(iconElement).toBeInTheDocument()
     })
 
     it('renders without title', async () => {
       render(<PktLinkCard>Link content</PktLinkCard>)
-      await window.customElements.whenDefined('pkt-linkcard')
       const iconElement = document.querySelector('.pkt-linkcard__title')
       expect(iconElement).not.toBeInTheDocument()
     })
@@ -39,7 +35,6 @@ describe('PktLinkCard', () => {
           Link content
         </PktLinkCard>,
       )
-      await window.customElements.whenDefined('pkt-linkcard')
       const linkElement = container.querySelector('.pkt-linkcard')
       expect(linkElement).toHaveAttribute('href', href)
     })
@@ -54,7 +49,6 @@ describe('PktLinkCard', () => {
           <PktLinkCard title="normal" skin="normal" />
         </div>,
       )
-      await window.customElements.whenDefined('pkt-linkcard')
       const linkElement = container.querySelector('.pkt-linkcard')
       expect(linkElement).toHaveClass('pkt-linkcard pkt-linkcard--normal')
     })
@@ -65,7 +59,6 @@ describe('PktLinkCard', () => {
           <PktLinkCard title="Blue" skin="blue" />
         </div>,
       )
-      await window.customElements.whenDefined('pkt-linkcard')
       const linkElement = container.querySelector('.pkt-linkcard')
       expect(linkElement).toHaveClass('pkt-linkcard pkt-linkcard--blue')
     })
@@ -76,7 +69,6 @@ describe('PktLinkCard', () => {
           <PktLinkCard title="Beige" skin="beige" />
         </div>,
       )
-      await window.customElements.whenDefined('pkt-linkcard')
       const linkElement = container.querySelector('.pkt-linkcard')
       expect(linkElement).toHaveClass('pkt-linkcard pkt-linkcard--beige')
     })
@@ -87,7 +79,6 @@ describe('PktLinkCard', () => {
           <PktLinkCard title="Green" skin="green" />
         </div>,
       )
-      await window.customElements.whenDefined('pkt-linkcard')
       const linkElement = container.querySelector('.pkt-linkcard')
       expect(linkElement).toHaveClass('pkt-linkcard pkt-linkcard--green')
     })
@@ -98,7 +89,6 @@ describe('PktLinkCard', () => {
           <PktLinkCard title="Beige outline" skin="beige-outline" />
         </div>,
       )
-      await window.customElements.whenDefined('pkt-linkcard')
       const linkElement = container.querySelector('.pkt-linkcard')
       expect(linkElement).toHaveClass('pkt-linkcard pkt-linkcard--beige-outline')
     })
@@ -108,7 +98,6 @@ describe('PktLinkCard', () => {
           <PktLinkCard title="Gray outline" skin="gray-outline" />
         </div>,
       )
-      await window.customElements.whenDefined('pkt-linkcard')
       const linkElement = container.querySelector('.pkt-linkcard')
       expect(linkElement).toHaveClass('pkt-linkcard pkt-linkcard--gray-outline')
     })

package/src/components/linkcard/LinkCard.tsx

@@ -1,35 +1,48 @@
 'use client'
 
-import React, { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
-import { createComponent } from '@lit/react'
-import { PktLinkCard as PktElLinkCard } from '@oslokommune/punkt-elements'
-import type { PktElType, PktElConstructor } from '@/interfaces/IPktElements'
+import classNames from 'classnames'
+import { HTMLAttributes, ReactNode } from 'react'
 
-export interface IPktLinkCard extends PktElType {
+import { PktIcon } from '..'
+
+export interface IPktLinkCard extends Omit<HTMLAttributes<HTMLAnchorElement>, 'title'> {
   skin?: 'normal' | 'no-padding' | 'blue' | 'beige' | 'green' | 'gray' | 'beige-outline' | 'gray-outline'
   title?: string
   href?: string
   iconName?: string
   openInNewTab?: boolean
   external?: boolean
+  children?: ReactNode
 }
 
-const LitComponent: FC<IPktLinkCard> = createComponent({
-  tagName: 'pkt-linkcard',
-  elementClass: PktElLinkCard as PktElConstructor<HTMLElement>,
-  react: React,
-  displayName: 'PktLinkCard',
-  events: {},
-})
+export const PktLinkCard = ({
+  children,
+  skin,
+  title,
+  href,
+  iconName,
+  openInNewTab,
+  external,
+  className,
+  ...props
+}: IPktLinkCard) => {
+  const classes = ['pkt-linkcard', skin && `pkt-linkcard--${skin}`].filter(Boolean).join(' ')
+
+  const titleClasses = ['pkt-linkcard__title', external && 'pkt-link pkt-link--external'].filter(Boolean).join(' ')
 
-export const PktLinkCard: FC<IPktLinkCard> = forwardRef(
-  ({ children, ...props }: IPktLinkCard, ref: ForwardedRef<HTMLElement>): ReactElement => {
-    return (
-      <LitComponent ref={ref} {...props}>
-        <div className="pkt-contents">{children}</div>
-      </LitComponent>
-    )
-  },
-)
+  return (
+    <a
+      {...props}
+      href={href}
+      className={classNames(classes, className)}
+      target={openInNewTab ? '_blank' : '_self'}
+      rel={openInNewTab ? 'noopener noreferrer' : undefined}
+    >
+      {iconName && <PktIcon className="pkt-link__icon" name={iconName} />}
+      {title && <div className={classNames(titleClasses)}>{title}</div>}
+      <div className="pkt-linkcard__text">{children}</div>
+    </a>
+  )
+}
 
 PktLinkCard.displayName = 'PktLinkCard'