@oslokommune/punkt-react 13.11.0 → 13.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "13.11.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": "f25b08c9f4382250d0097d22bc8541cfd459fe73"
+  "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'

package/src/components/messagebox/Messagebox.test.tsx

@@ -0,0 +1,63 @@
+import { fireEvent, render as originalRender } from '@testing-library/react'
+import { ReactNode } from 'react'
+
+import { PktMessagebox } from './Messagebox'
+
+describe('Messagebox', () => {
+  const render = (jsx: ReactNode) => {
+    const renderResult = originalRender(jsx)
+    const messageBox = renderResult.container.children[0]
+    return { ...renderResult, messageBox }
+  }
+
+  it('render with defaults', async () => {
+    const { messageBox } = render(<PktMessagebox />)
+
+    expect(messageBox.className).toEqual('pkt-messagebox')
+  })
+
+  it('render with skin', async () => {
+    const { messageBox } = render(<PktMessagebox skin={'green'} />)
+
+    expect(messageBox.classList).toContain('pkt-messagebox--green')
+  })
+
+  it('render compact', async () => {
+    const { messageBox } = render(<PktMessagebox compact />)
+
+    expect(messageBox.classList).toContain('pkt-messagebox--compact')
+  })
+
+  it('render simple title', async () => {
+    const { getByText } = render(<PktMessagebox title={'Messagebox title'} />)
+    const titleElement = getByText('Messagebox title')
+    expect(titleElement.classList).toContain('pkt-messagebox__title')
+  })
+  it('render complex title', async () => {
+    const { messageBox } = render(
+      <PktMessagebox
+        title={
+          <>
+            Message<strong>box</strong> title
+          </>
+        }
+      />,
+    )
+    const titleElement = messageBox.querySelector('.pkt-messagebox__title')!
+    expect(titleElement.innerHTML).toEqual('Message<strong>box</strong> title')
+  })
+
+  it('should render empty title element when no title specified', async () => {
+    const { messageBox } = render(<PktMessagebox title={''} />)
+    expect(messageBox.querySelector('.pkt-messagebox__title')).toBeInTheDocument()
+  })
+
+  it('closable', async () => {
+    const { getByRole, messageBox } = render(<PktMessagebox closable />)
+    const closeButton = getByRole('button', { name: 'Lukk' })
+
+    fireEvent.click(closeButton)
+
+    expect(messageBox.classList).toContain('pkt-hide')
+  })
+})

package/src/components/messagebox/Messagebox.tsx

@@ -1,36 +1,66 @@
 'use client'
 
-import React, { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
-import { createComponent, EventName } from '@lit/react'
-import { PktMessagebox as PktElMessagebox } from '@oslokommune/punkt-elements'
-import type { PktElType, PktElConstructor } from '@/interfaces/IPktElements'
-
-export interface IPktMessagebox extends PktElType {
-  skin?: 'beige' | 'red' | 'green' | 'blue'
-  title?: string
+import classNames from 'classnames'
+import { createRef, FC, HTMLAttributes, ReactNode, useCallback, useState } from 'react'
+
+import { PktIcon } from '..'
+
+export type TMessageboxSkin = 'beige' | 'blue' | 'red' | 'green'
+
+export interface IPktMessagebox extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  skin?: TMessageboxSkin
+  title?: ReactNode
   compact?: boolean
   closable?: boolean
-  onClose?: (e: CustomEvent) => void
+  onClose?: () => void
 }
 
-const LitComponent: FC<IPktMessagebox> = createComponent({
-  tagName: 'pkt-messagebox',
-  elementClass: PktElMessagebox as PktElConstructor<HTMLElement>,
-  react: React,
-  displayName: 'PktMessagebox',
-  events: {
-    onClose: 'close' as EventName<CustomEvent>,
-  },
-})
-
-export const PktMessagebox: FC<IPktMessagebox> = forwardRef(
-  ({ children, ...props }: IPktMessagebox, ref: ForwardedRef<HTMLElement>): ReactElement => {
-    return (
-      <LitComponent {...props} ref={ref}>
-        <div className="pkt-contents">{children}</div>
-      </LitComponent>
-    )
-  },
-)
+export const PktMessagebox: FC<IPktMessagebox> = ({
+  children,
+  className,
+  skin,
+  title,
+  compact,
+  closable,
+  onClose,
+  ...props
+}: IPktMessagebox) => {
+  const [closed, setClosed] = useState(false)
+
+  const classes = {
+    'pkt-messagebox': true,
+    'pkt-messagebox--compact': compact,
+    [`pkt-messagebox--${skin}`]: skin,
+    'pkt-messagebox--closable': closable,
+    'pkt-hide': closed,
+  }
+
+  const componentRootRef = createRef<HTMLDivElement>()
+
+  const close = useCallback(() => {
+    setClosed(true)
+    if (onClose) {
+      onClose()
+    }
+  }, [setClosed, onClose])
+
+  return (
+    <div {...props} className={classNames(classes, className)} ref={componentRootRef}>
+      {closable && (
+        <div className={'"pkt-messagebox__close"'}>
+          <button
+            onClick={close}
+            className={'pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only'}
+            aria-label={'Lukk'}
+          >
+            <PktIcon name="close" className="pkt-link__icon" />
+          </button>
+        </div>
+      )}
+      <div className="pkt-messagebox__title">{title}</div>
+      <div className={'pkt-messagebox__text'}>{children}</div>
+    </div>
+  )
+}
 
 PktMessagebox.displayName = 'PktMessagebox'