@oslokommune/punkt-react 13.13.2 → 13.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "13.13.2",
+  "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": "7707f0d8e3d999702c6b5bf2d4986d8b75307ffb"
+  "gitHead": "4fdac01524382592f47b2a77735477a5a0aa6d1e"
 }

package/src/components/link/Link.test.tsx

@@ -0,0 +1,112 @@
+import { render, screen } from '@testing-library/react'
+
+import { PktLink } from './Link'
+
+describe('PktLink', () => {
+  it('should render with children element', () => {
+    render(
+      <PktLink href="/test">
+        Test <strong>Link</strong>
+      </PktLink>,
+    )
+    const link = screen.getByRole('link')
+    expect(link.innerHTML).toEqual('Test <strong>Link</strong>')
+  })
+
+  it('should apply href attribute', () => {
+    render(<PktLink href="/test-url">Test Link</PktLink>)
+    const link = screen.getByText('Test Link')
+    expect(link).toHaveAttribute('href', '/test-url')
+  })
+
+  it('should apply base pkt-link class', () => {
+    render(<PktLink href="/test">Test Link</PktLink>)
+    const link = screen.getByText('Test Link')
+    expect(link).toHaveClass('pkt-link')
+  })
+
+  it('should apply custom className in addition to base class', () => {
+    render(
+      <PktLink href="/test" className="custom-class">
+        Test Link
+      </PktLink>,
+    )
+    const link = screen.getByText('Test Link')
+    expect(link).toHaveClass('pkt-link')
+    expect(link).toHaveClass('custom-class')
+  })
+
+  it.each`
+    description                                            | iconName     | iconPosition | expectedClasses             | notExpectedClasses
+    ${'icon-left class when iconName and no iconPosition'} | ${'arrow'}   | ${undefined} | ${['pkt-link--icon-left']}  | ${['pkt-link--icon-right']}
+    ${'icon-left class when iconPosition is "left"'}       | ${'arrow'}   | ${'left'}    | ${['pkt-link--icon-left']}  | ${['pkt-link--icon-right']}
+    ${'icon-right class when iconPosition is "right"'}     | ${'arrow'}   | ${'right'}   | ${['pkt-link--icon-right']} | ${['pkt-link--icon-left']}
+    ${'no icon classes when iconName is not provided'}     | ${undefined} | ${undefined} | ${[]}                       | ${['pkt-link--icon-left', 'pkt-link--icon-right']}
+    ${'no icon classes when iconName is not provided'}     | ${undefined} | ${'left'}    | ${[]}                       | ${['pkt-link--icon-left', 'pkt-link--icon-right']}
+  `('should apply $description', ({ iconName, iconPosition, expectedClasses, notExpectedClasses }) => {
+    render(
+      <PktLink href="/test" iconName={iconName} iconPosition={iconPosition}>
+        Test Link
+      </PktLink>,
+    )
+    const link = screen.getByText('Test Link')
+    expectedClasses.forEach((className: string) => {
+      expect(link).toHaveClass(className)
+    })
+    notExpectedClasses.forEach((className: string) => {
+      expect(link).not.toHaveClass(className)
+    })
+    const icon = document.querySelector('.pkt-link__icon')
+    if (iconName) {
+      expect(icon).toBeInTheDocument();
+    } else {
+      expect(icon).not.toBeInTheDocument();
+    }
+  })
+
+  it.each`
+    description                                              | external     | hasExternalClass | relAttribute
+    ${'external class and rel when external is true'}        | ${true}      | ${true}          | ${'noopener noreferrer'}
+    ${'no external class or rel when external is false'}     | ${false}     | ${false}         | ${null}
+    ${'no external class or rel when external is undefined'} | ${undefined} | ${false}         | ${null}
+  `('should apply $description', ({ external, hasExternalClass, relAttribute }) => {
+    render(
+      <PktLink href="/test" external={external}>
+        Test Link
+      </PktLink>,
+    )
+    const link = screen.getByText('Test Link')
+
+    if (hasExternalClass) {
+      expect(link).toHaveClass('pkt-link--external')
+    } else {
+      expect(link).not.toHaveClass('pkt-link--external')
+    }
+
+    if (relAttribute) {
+      expect(link).toHaveAttribute('rel', relAttribute)
+    } else {
+      expect(link).not.toHaveAttribute('rel')
+    }
+  })
+
+  it('should apply target attribute', () => {
+    render(
+      <PktLink href="/test" target="_blank">
+        Test Link
+      </PktLink>,
+    )
+    const link = screen.getByText('Test Link')
+    expect(link).toHaveAttribute('target', '_blank')
+  })
+
+  it('should spread additional props to anchor element', () => {
+    render(
+      <PktLink href="/test" data-testid="custom-link" aria-label="Custom label">
+        Test Link
+      </PktLink>,
+    )
+    const link = screen.getByTestId('custom-link')
+    expect(link).toHaveAttribute('aria-label', 'Custom label')
+  })
+})

package/src/components/link/Link.tsx

@@ -1,41 +1,48 @@
 'use client'
 
-import React, {
-  FC,
-  ForwardedRef,
-  forwardRef,
-  ForwardRefExoticComponent,
-  LegacyRef,
-  LinkHTMLAttributes,
-  ReactElement,
-} from 'react'
-import { createComponent } from '@lit/react'
-import { PktLink as PktElLink } from '@oslokommune/punkt-elements'
+import classNames from 'classnames'
+import { FC, LinkHTMLAttributes } from 'react'
+
+import { PktIcon } from '..'
 
 interface IPktLink extends LinkHTMLAttributes<HTMLAnchorElement> {
   href?: string
   iconName?: string | undefined
+  className?: string | undefined
   iconPosition?: string | undefined
   external?: boolean
-  target?: string | null
-  ref?: LegacyRef<HTMLAnchorElement>
+  target?: string | undefined
 }
 
-const LitComponent = createComponent({
-  tagName: 'pkt-link',
-  elementClass: PktElLink,
-  react: React,
-  displayName: 'PktLink',
-}) as ForwardRefExoticComponent<IPktLink>
+export const PktLink: FC<IPktLink> = ({
+  href,
+  iconName,
+  className,
+  iconPosition,
+  external,
+  target,
+  children,
+  ...props
+}: IPktLink) => {
+  const classes = {
+    'pkt-link': true,
+    'pkt-link--icon-left': (!!iconName && iconPosition === 'left') || !!(iconName && !iconPosition),
+    'pkt-link--icon-right': !!iconName && iconPosition === 'right',
+    'pkt-link--external': external,
+  }
 
-export const PktLink: FC<IPktLink> = forwardRef(
-  ({ children, ...props }: IPktLink, ref: LegacyRef<HTMLAnchorElement>): ReactElement => {
-    return (
-      <LitComponent {...props} ref={ref}>
-        <span className="pkt-contents">{children}</span>
-      </LitComponent>
-    )
-  },
-)
+  return (
+    <a
+      {...props}
+      className={classNames(classes, className)}
+      href={href}
+      target={target}
+      rel={external ? 'noopener noreferrer' : undefined}
+    >
+      {iconName && <PktIcon name={iconName} className="pkt-link__icon" />}
+      {children}
+    </a>
+  )
+}
 
 PktLink.displayName = 'PktLink'

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>
+      )
+    }
   },
 )