@oslokommune/punkt-react 13.14.0 → 13.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "13.14.0",
+  "version": "13.15.0",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -106,5 +106,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "fe689e7956b40608a560d8c8cd6ee32b5f408f27"
+  "gitHead": "4fdac01524382592f47b2a77735477a5a0aa6d1e"
 }

package/src/components/tag/Tag.test.tsx

@@ -1,35 +1,41 @@
 import '@testing-library/jest-dom'
+
+import { fireEvent, render as originalRender, RenderOptions, RenderResult } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
-import { fireEvent, render, screen } from '@testing-library/react'
-import React, { createRef } from 'react'
-import userEvent from '@testing-library/user-event'
+import { createRef, ReactNode } from 'react'
 
 import { PktTag } from './Tag'
 
 expect.extend(toHaveNoViolations)
 
+const render = async (
+  ui: ReactNode,
+  options?: Omit<RenderOptions, 'queries'> | undefined,
+): Promise<RenderResult> => {
+  const renderResult = originalRender(ui, options)
+  await window.customElements.whenDefined('pkt-icon')
+  return Promise.resolve(renderResult)
+}
+
 describe('PktTag', () => {
   describe('basic rendering', () => {
     it('renders correctly without any props', async () => {
-      const { getByText } = render(<PktTag>Hello</PktTag>)
-      await window.customElements.whenDefined('pkt-tag')
+      const { getByText } = await render(<PktTag>Hello</PktTag>)
       expect(getByText('Hello')).toBeInTheDocument()
     })
 
     it('renders an icon when iconName prop is provided', async () => {
-      render(<PktTag iconName="user">Tag with Icon</PktTag>)
-      await window.customElements.whenDefined('pkt-tag')
+      await render(<PktTag iconName="user">Tag with Icon</PktTag>)
       const iconElement = document.querySelector('.pkt-tag__icon.pkt-icon[name="user"]')
       expect(iconElement).toBeInTheDocument()
     })
 
     it('renders with the specified skin and size', async () => {
-      const { container } = render(
+      const { container } = await render(
         <PktTag skin="red" size="small">
           Tag
         </PktTag>,
       )
-      await window.customElements.whenDefined('pkt-tag')
 
       const spanElement = container.querySelector('span.pkt-tag')
 
@@ -38,40 +44,48 @@ describe('PktTag', () => {
     })
 
     it('forwardRef works correctly', async () => {
-      const ref = createRef<HTMLElement>()
-      const { unmount } = render(
+      const ref = createRef<HTMLButtonElement>()
+      const { unmount } = await render(
         <PktTag closeTag={true} ref={ref}>
           Click me
         </PktTag>,
       )
-      await window.customElements.whenDefined('pkt-tag')
       expect(ref.current).toBeInstanceOf(HTMLElement)
       unmount()
       expect(ref.current).toBeNull()
     })
 
     it('closes the tag when the close button is clicked', async () => {
-      const { container, getByText } = render(<PktTag closeTag={true}>Closeable Tag</PktTag>)
-      await window.customElements.whenDefined('pkt-tag')
+      const { container, getByText } = await render(<PktTag closeTag={true}>Closeable Tag</PktTag>)
 
       const buttonElement = container.querySelector('.pkt-tag.pkt-btn')
       expect(buttonElement).not.toHaveClass('pkt-hide')
 
-      await fireEvent.click(getByText('Closeable Tag'))
+      fireEvent.click(getByText('Closeable Tag'))
 
       expect(buttonElement).toBeInTheDocument()
       expect(buttonElement).toHaveClass('pkt-hide')
     })
+
+    it('calls onClose when tag is clicked', async () => {
+      const onClose = jest.fn()
+      const { getByText } = await render(
+        <PktTag closeTag={true} onClose={onClose}>
+          Closeable Tag
+        </PktTag>,
+      )
+      fireEvent.click(getByText('Closeable Tag'))
+      expect(onClose).toHaveBeenCalled()
+    })
   })
 
   describe('accessibility', () => {
     it('renders with no wcag errors with axe', async () => {
-      const { container } = render(
+      const { container } = await render(
         <PktTag skin="red" size="small" iconName="user" closeTag={true}>
           Tag
         </PktTag>,
       )
-      await window.customElements.whenDefined('pkt-tag')
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })

package/src/components/tag/Tag.tsx

@@ -1,38 +1,122 @@
 'use client'
 
-import { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
-import * as React from 'react'
-import { createComponent, EventName } from '@lit/react'
-import { PktTag as PktElTag } from '@oslokommune/punkt-elements'
-import type { PktElType, PktElConstructor } from '@/interfaces/IPktElements'
+import classNames from 'classnames'
+import {
+  ForwardedRef,
+  forwardRef,
+  HTMLAttributes,
+  ReactNode,
+  RefObject,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 
-export interface IPktTag extends PktElType {
+import { PktIcon } from '..'
+
+interface BasePktTagProps {
   skin?: 'blue' | 'blue-light' | 'blue-dark' | 'green' | 'red' | 'beige' | 'yellow' | 'grey' | 'gray'
   textStyle?: 'normal-text' | 'thin-text'
   size?: 'small' | 'medium' | 'large'
   closeTag?: boolean
   iconName?: string
   ariaLabel?: string
-  onClose?: (e: CustomEvent) => void
+  onClose?: () => void
+  children?: ReactNode
 }
 
-const LitComponent: FC<IPktTag> = createComponent({
-  tagName: 'pkt-tag',
-  elementClass: PktElTag as PktElConstructor<HTMLElement>,
-  react: React,
-  displayName: 'PktTag',
-  events: {
-    onClose: 'close' as EventName<CustomEvent>,
-  },
-})
-
-export const PktTag: FC<IPktTag> = forwardRef(
-  ({ children, ...props }: IPktTag, ref: ForwardedRef<HTMLElement>): ReactElement => {
-    return (
-      <LitComponent ref={ref} {...props}>
-        <div className="pkt-contents">{children}</div>
-      </LitComponent>
-    )
+interface ButtonPktTagProps extends BasePktTagProps, HTMLAttributes<HTMLButtonElement> {
+  closeTag: true
+  type?: 'button' | 'submit' | 'reset'
+}
+
+interface SpanPktTagProps extends BasePktTagProps, HTMLAttributes<HTMLSpanElement> {
+  closeTag?: false | undefined
+  onClose?: undefined
+  type?: undefined
+}
+
+export type IPktTag = ButtonPktTagProps | SpanPktTagProps;
+
+export const PktTag = forwardRef<HTMLSpanElement | HTMLButtonElement, ButtonPktTagProps | SpanPktTagProps>(
+  (
+    {
+      children,
+      skin,
+      textStyle,
+      size,
+      closeTag,
+      className,
+      iconName,
+      ariaLabel,
+      onClose,
+      type,
+      'aria-description': ariaDescriptionPropValue,
+      ...props
+    }: ButtonPktTagProps | SpanPktTagProps,
+    forwardedRef: ForwardedRef<HTMLElement>,
+  ) => {
+    const [isClosed, setClosed] = useState<boolean>(false)
+
+    const close = useCallback(() => {
+      setClosed(true)
+      if (onClose) {
+        onClose()
+      }
+    }, [setClosed])
+
+    const spanRef: RefObject<HTMLButtonElement | HTMLSpanElement> = useRef<HTMLButtonElement | HTMLSpanElement>(null)
+
+    const ariaDescription = useMemo(() => {
+      if (closeTag && !ariaLabel) {
+        const label = spanRef.current?.textContent?.trim()
+        return (label && `Klikk for å fjerne ${label}`) || ariaDescriptionPropValue
+      }
+    }, [closeTag, ariaLabel])
+
+    const classes = {
+      'pkt-tag': true,
+      [`pkt-tag--${size}`]: !!size,
+      [`pkt-tag--${skin}`]: !!skin,
+      [`pkt-tag--${textStyle}`]: !!textStyle,
+    }
+
+    const btnClasses = {
+      'pkt-tag': true,
+      'pkt-btn': true,
+      'pkt-btn--tertiary': true,
+      [`pkt-tag--${textStyle}`]: !!textStyle,
+      [`pkt-tag--${size}`]: !!size,
+      [`pkt-tag--${skin}`]: !!skin,
+      'pkt-btn--icons-right-and-left': closeTag && !!iconName,
+      'pkt-hide': isClosed,
+    }
+
+    if (closeTag) {
+      return (
+        <button
+          {...props}
+          className={classNames(btnClasses, className)}
+          type={type}
+          onClick={close}
+          aria-label={ariaLabel}
+          aria-description={ariaDescription}
+          ref={forwardedRef as ForwardedRef<HTMLButtonElement>}
+        >
+          {iconName && <PktIcon className={'pkt-tag__icon'} name={iconName} />}
+          <span ref={spanRef}>{children}</span>
+          <PktIcon className={'pkt-tag__close-btn'} name={'close'} />
+        </button>
+      )
+    } else {
+      return (
+        <span {...props} className={classNames(classes, className)} ref={forwardedRef as ForwardedRef<HTMLSpanElement>}>
+          {iconName && <PktIcon className={'pkt-tag__icon'} name={iconName} />}
+          <span ref={spanRef}>{children}</span>
+        </span>
+      )
+    }
   },
 )