@oslokommune/punkt-react 13.10.1 → 13.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "13.10.1",
+  "version": "13.12.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.9.1",
+    "@oslokommune/punkt-elements": "^13.11.0",
     "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-element-to-jsx-string": "^15.0.0",
@@ -48,8 +48,8 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-private-property-in-object": "^7.25.9",
-    "@oslokommune/punkt-assets": "^13.6.3",
-    "@oslokommune/punkt-css": "^13.9.1",
+    "@oslokommune/punkt-assets": "^13.11.0",
+    "@oslokommune/punkt-css": "^13.11.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": "9390b12e766784c827247d15cde4ab8899a3c518"
+  "gitHead": "d3cc0fca4886e3b69ab5cbe305765cef483eab32"
 }

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'