@oslokommune/punkt-react 12.12.3 → 12.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "12.12.3",
+  "version": "12.13.0",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -47,8 +47,8 @@
   },
   "devDependencies": {
     "@oslokommune/punkt-assets": "^12.7.3",
-    "@oslokommune/punkt-css": "^12.12.3",
-    "@oslokommune/punkt-elements": "^12.12.3",
+    "@oslokommune/punkt-css": "^12.13.0",
+    "@oslokommune/punkt-elements": "^12.13.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": "0dc3e24d50fb19d8298f7c6912ce7cb815d78cd0"
+  "gitHead": "fafdb670e002cbf94fd34acc45dd066344695816"
 }

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

@@ -10,49 +10,112 @@ import { PktLinkCard } from './LinkCard'
 expect.extend(toHaveNoViolations)
 
 describe('PktLinkCard', () => {
+  // BASIC RENDERING TESTS
   describe('basic rendering', () => {
-    it('renders with title and content', () => {
-      const { getByRole, getByText } = render(
-        <PktLinkCard title="Link title" href="/example">
-          Link content
-        </PktLinkCard>,
-      )
+    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()
+    })
 
-      expect(getByRole('link')).toHaveAttribute('href', '/example')
-      expect(getByText('Link title')).toBeInTheDocument()
-      expect(getByText('Link content')).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()
     })
 
-    it('renders a link with the correct href', () => {
+    it('renders with correct href', async () => {
       const href = 'https://www.example.com'
-      const { getByRole } = render(<PktLinkCard href={href}>Link content</PktLinkCard>)
-      const linkElement = getByRole('link')
+      const { container } = render(
+        <PktLinkCard title="Link title" href={href}>
+          Link content
+        </PktLinkCard>,
+      )
+      await window.customElements.whenDefined('pkt-linkcard')
+      const linkElement = container.querySelector('.pkt-linkcard')
       expect(linkElement).toHaveAttribute('href', href)
     })
   })
 
+  // SKIN TESTS
+
   describe('skins', () => {
-    it('renders with different skins', () => {
+    it('renders with normal skin', async () => {
+      const { container } = render(
+        <div>
+          <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')
+    })
+
+    it('renders with blue skin', async () => {
       const { container } = render(
         <div>
-          <PktLinkCard title="Normal" skin="normal" />
           <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')
+    })
+
+    it('renders with beige skin', async () => {
+      const { container } = render(
+        <div>
           <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')
+    })
+
+    it('renders with green skin', async () => {
+      const { container } = render(
+        <div>
+          <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')
+    })
+
+    it('renders with beige-outline skin', async () => {
+      const { container } = render(
+        <div>
           <PktLinkCard title="Beige outline" skin="beige-outline" />
-          <PktLinkCard title="Grey outline" skin="grey-outline" />
+        </div>,
+      )
+      await window.customElements.whenDefined('pkt-linkcard')
+      const linkElement = container.querySelector('.pkt-linkcard')
+      expect(linkElement).toHaveClass('pkt-linkcard pkt-linkcard--beige-outline')
+    })
+    it('renders with gray-outline skin', async () => {
+      const { container } = render(
+        <div>
           <PktLinkCard title="Gray outline" skin="gray-outline" />
         </div>,
       )
-
-      expect(container.querySelectorAll('.pkt-linkcard--normal')).toHaveLength(1)
-      expect(container.querySelectorAll('.pkt-linkcard--blue')).toHaveLength(1)
-      expect(container.querySelectorAll('.pkt-linkcard--beige')).toHaveLength(1)
-      expect(container.querySelectorAll('.pkt-linkcard--beige-outline')).toHaveLength(1)
-      expect(container.querySelectorAll('.pkt-linkcard--grey-outline')).toHaveLength(1)
-      expect(container.querySelectorAll('.pkt-linkcard--gray-outline')).toHaveLength(1)
+      await window.customElements.whenDefined('pkt-linkcard')
+      const linkElement = container.querySelector('.pkt-linkcard')
+      expect(linkElement).toHaveClass('pkt-linkcard pkt-linkcard--gray-outline')
     })
   })
 
+  // ACCESSIBILITY TESTS
+
   describe('accessibility', () => {
     it('renders with no wcag errors with axe', async () => {
       const { container } = render(<PktLinkCard title="Normal" skin="normal"></PktLinkCard>)

package/src/components/linkcard/LinkCard.tsx

@@ -1,9 +1,10 @@
-import React, { ForwardedRef, forwardRef } from 'react'
+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 { PktIcon } from '../icon/Icon'
-
-export interface IPktLinkCard extends React.HTMLAttributes<HTMLAnchorElement> {
-  skin?: 'normal' | 'blue' | 'beige' | 'beige-outline' | 'green' | 'grey' | 'gray' | 'grey-outline' | 'gray-outline'
+export interface IPktLinkCard extends PktElType {
+  skin?: 'normal' | 'blue' | 'beige' | 'green' | 'gray' | 'beige-outline' | 'gray-outline'
   title?: string
   href?: string
   iconName?: string
@@ -11,35 +12,20 @@ export interface IPktLinkCard extends React.HTMLAttributes<HTMLAnchorElement> {
   external?: boolean
 }
 
-export const PktLinkCard = forwardRef(
-  (
-    {
-      children,
-      className,
-      iconName,
-      openInNewTab = false,
-      skin = 'normal',
-      href = '#',
-      external = false,
-      title,
-      ...props
-    }: IPktLinkCard,
-    ref: ForwardedRef<HTMLAnchorElement>,
-  ) => {
-    const classes = [className, 'pkt-linkcard', skin && `pkt-linkcard--${skin}`].filter(Boolean).join(' ')
+const LitComponent: FC<IPktLinkCard> = createComponent({
+  tagName: 'pkt-linkcard',
+  elementClass: PktElLinkCard as PktElConstructor<HTMLElement>,
+  react: React,
+  displayName: 'PktLinkCard',
+  events: {},
+})
+
+export const PktLinkCard: FC<IPktLinkCard> = forwardRef(
+  ({ children, ...props }: IPktLinkCard, ref: ForwardedRef<HTMLElement>): ReactElement => {
     return (
-      <a
-        {...props}
-        href={href}
-        className={`pkt-linkcard pkt-link ${classes}`}
-        target={openInNewTab ? '_blank' : '_self'}
-        rel={openInNewTab ? 'noopener noreferrer' : undefined}
-        ref={ref}
-      >
-        {iconName && <PktIcon className="pkt-link__icon" name={iconName}></PktIcon>}
-        <div className={`pkt-linkcard__title ${external ? 'pkt-link pkt-link--external' : ''}`}>{title}</div>
-        <div className="pkt-linkcard__text">{children}</div>
-      </a>
+      <LitComponent ref={ref} {...props}>
+        <div className="pkt-contents">{children}</div>
+      </LitComponent>
     )
   },
 )