@oslokommune/punkt-react 13.9.1 → 13.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "13.9.1",
+  "version": "13.10.1",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -40,6 +40,7 @@
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@lit/react": "^1.0.7",
     "@oslokommune/punkt-elements": "^13.9.1",
+    "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-element-to-jsx-string": "^15.0.0",
     "react-hook-form": "^7.53.0",
@@ -59,7 +60,6 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^4.3.1",
-    "classnames": "^2.5.1",
     "eslint": "^9.37.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
@@ -106,5 +106,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "44dcfeeeecbe7f3d5404f3d77f2de46689ccb80e"
+  "gitHead": "9390b12e766784c827247d15cde4ab8899a3c518"
 }

package/src/components/alert/Alert.test.tsx

@@ -1,5 +1,4 @@
-import { createRef } from 'react'
-import { render, fireEvent } from '@testing-library/react'
+import { render, fireEvent, waitFor } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import { PktAlert } from './Alert'
 
@@ -12,15 +11,6 @@ expect.extend(toHaveNoViolations)
 afterEach(cleanup)
 
 describe('PktAlert', () => {
-  test('ref works correctly', async () => {
-    const ref = createRef<HTMLElement>()
-    const { unmount } = render(<PktAlert ref={ref}>Alert text</PktAlert>)
-    await window.customElements.whenDefined('pkt-alert')
-    expect(ref.current).toBeInstanceOf(HTMLElement)
-    unmount()
-    expect(ref.current).toBeNull()
-  })
-
   test('calls onClose when close button is clicked', async () => {
     const onClose = jest.fn()
     const { getByLabelText } = render(
@@ -28,14 +18,14 @@ describe('PktAlert', () => {
         Hello World
       </PktAlert>,
     )
-    await window.customElements.whenDefined('pkt-alert')
     fireEvent.click(getByLabelText('close'))
-    expect(onClose).toHaveBeenCalledTimes(1)
+    await waitFor(() => {
+      expect(onClose).toHaveBeenCalledTimes(1)
+    })
   })
 
   test('renders with default role', async () => {
     const { getByRole } = render(<PktAlert>Alert text</PktAlert>)
-    await window.customElements.whenDefined('pkt-alert')
     const alert = getByRole('status')
     expect(alert).toBeInTheDocument()
     expect(alert).toHaveAttribute('role', 'status')
@@ -43,16 +33,54 @@ describe('PktAlert', () => {
 
   test('renders with alert as role prop', async () => {
     const { getByRole } = render(<PktAlert role="alert">Alert text</PktAlert>)
-    await window.customElements.whenDefined('pkt-alert')
     const alert = getByRole('alert')
     expect(alert).toBeInTheDocument()
     expect(alert).toHaveAttribute('role', 'alert')
   })
 
+  test.each`
+    camelCase      | kebabCase      | rendered
+    ${'assertive'} | ${undefined}   | ${'assertive'}
+    ${undefined}   | ${'assertive'} | ${'assertive'}
+    ${'polite'}    | ${undefined}   | ${'polite'}
+    ${undefined}   | ${undefined}   | ${'polite'}
+    ${'off'}       | ${'assertive'} | ${'off'}
+  `(
+    'should support both ariaLive ($camelCase) and aria-live ($kebabCase) attributes ',
+    async ({ camelCase, kebabCase, rendered }) => {
+      const { container } = render(
+        <PktAlert ariaLive={camelCase} aria-live={kebabCase}>
+          Alert text
+        </PktAlert>,
+      )
+      const elementThatHasAriaLive = container.querySelector('*[aria-live]')
+      expect(elementThatHasAriaLive).toHaveAttribute('aria-live', rendered)
+    },
+  )
+
+  test.each`
+    title             | expected
+    ${'Simple title'} | ${'Simple title'}
+    ${''}             | ${undefined}
+    ${null}           | ${undefined}
+    ${(
+    <span>
+    Complex <strong>title</strong>
+  </span>
+  )} | ${'<span>Complex <strong>title</strong></span>'}
+  `('support complex title %$', async ({title, expected}) => {
+    const { container } = render(
+      <PktAlert title={title}>
+        Alert text
+      </PktAlert>,
+    )
+    const titleElement = container.querySelector('.pkt-alert__title');
+    expect(titleElement?.innerHTML).toEqual(expected)
+  })
+
   describe('accessibility', () => {
     test('renders with no wcag errors with axe', async () => {
       const { container } = render(<PktAlert title="Error" skin="error"></PktAlert>)
-      await window.customElements.whenDefined('pkt-alert')
       const results = await axe(container)
 
       expect(results).toHaveNoViolations()

package/src/components/alert/Alert.tsx

@@ -1,40 +1,91 @@
 'use client'
 
-import { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
-import * as React from 'react'
-import { createComponent, EventName } from '@lit/react'
-import { PktAlert as PktElAlert } from '@oslokommune/punkt-elements'
-import type { PktElType, PktElConstructor } from '@/interfaces/IPktElements'
+import { ReactNode, useState } from 'react'
+import { FC, HTMLAttributes, ReactElement, useCallback } from 'react'
+import classNames from 'classnames'
+import { PktButton, PktIcon } from '..'
+import { TAlertRole, TAriaLive } from '@/types/aria'
 
-export interface IPktAlert extends PktElType {
+export interface IPktAlert extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   skin?: 'error' | 'success' | 'warning' | 'info'
   closeAlert?: boolean
-  title?: string
+  title?: ReactNode
   date?: string
-  ariaLive?: 'off' | 'polite' | 'assertive'
+  ariaLive?: TAriaLive
   compact?: boolean
-  role?: string
+  role?: TAlertRole
   onClose?: (e: CustomEvent) => void
 }
 
-const LitComponent: FC<IPktAlert> = createComponent({
-  tagName: 'pkt-alert',
-  elementClass: PktElAlert as PktElConstructor<HTMLElement>,
-  react: React,
-  displayName: 'PktAlert',
-  events: {
-    onClose: 'close' as EventName<CustomEvent>,
-  },
-})
-
-export const PktAlert: FC<IPktAlert> = forwardRef(
-  ({ children, ...props }: IPktAlert, ref: ForwardedRef<HTMLElement>): ReactElement => {
-    return (
-      <LitComponent ref={ref} {...props}>
-        <div className="pkt-contents">{children}</div>
-      </LitComponent>
-    )
-  },
-)
+export type TAlertSkin = 'error' | 'success' | 'warning' | 'info'
+
+export const PktAlert: FC<IPktAlert> = ({
+  children,
+  closeAlert,
+  compact,
+  title,
+  date,
+  ariaLive: ariaLiveCamel,
+  'aria-live': ariaLiveKebab = 'polite' as TAriaLive,
+  role = 'status',
+  skin = 'info' as TAlertSkin,
+  ...props
+}: IPktAlert): ReactElement => {
+  const [isClosed, setIsClosed] = useState(false)
+
+  const classes = {
+    'pkt-alert': true,
+    'pkt-alert--compact': compact,
+    [`pkt-alert--${skin}`]: skin,
+    'pkt-hide': isClosed,
+  }
+  const gridClasses = {
+    'pkt-alert__grid': true,
+    'pkt-alert__noTitle': !title,
+    'pkt-alert__noDate': !date,
+  }
+
+  const onClose = useCallback(() => {
+    setIsClosed(true)
+    props.onClose &&
+      props.onClose(new CustomEvent('close', { detail: { origin: event }, bubbles: true, composed: true }))
+  }, [props.onClose, setIsClosed])
+
+  const ariaLive = ariaLiveCamel || ariaLiveKebab
+
+  return (
+    <div {...props} aria-live={ariaLive} role={role} className={classNames(classes)}>
+      <div className={classNames(gridClasses)}>
+        <PktIcon
+          className="pkt-alert__icon"
+          aria-hidden="true"
+          name={skin === 'info' ? 'alert-information' : `alert-${skin}`}
+        ></PktIcon>
+
+        {closeAlert && (
+          <div className="pkt-alert__close">
+            <PktButton
+              tabIndex={0}
+              aria-label="close"
+              size={compact ? 'small' : 'medium'}
+              type="button"
+              skin="tertiary"
+              iconName="close"
+              variant="icon-only"
+              onClick={onClose}
+            >
+              <span className="sr-only">Lukk</span>
+            </PktButton>
+          </div>
+        )}
+        {title && <div className="pkt-alert__title">{title}</div>}
+
+        <div className="pkt-alert__text">{children}</div>
+
+        {date && <div className="pkt-alert__date">Sist oppdatert: {date}</div>}
+      </div>
+    </div>
+  )
+}
 
 PktAlert.displayName = 'PktAlert'

package/src/components/select/Select.test.tsx

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom'
 
-import { fireEvent, render } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import React from 'react'
 
@@ -32,21 +32,13 @@ describe('PktSelect', () => {
   })
 
   test('renders error message when hasError prop is true', async () => {
-    const { getByText, getByRole } = render(
+    render(
       <PktSelect label="Input Label" id="inputId" hasError errorMessage="Input error" />,
     )
-
-    await window.customElements.whenDefined('pkt-alert')
-    const errorMessage = getByText('Input error')
-    expect(errorMessage).toBeInTheDocument()
-
-    const alertContainer = errorMessage.closest('pkt-alert')
-    expect(alertContainer).toHaveAttribute('id', 'inputId-input-error')
+    const alertContainer = screen.getByRole('alert')
+    const errorMessageId = 'inputId-input-error' // når https://github.com/oslokommune/punkt/issues/3092 er fiksa:  screen.getByRole('combobox').getAttribute('aria-errormessage')
+    expect(alertContainer).toHaveAttribute('id', errorMessageId)
     expect(alertContainer).toHaveTextContent('Input error')
-
-    const alert = getByRole('alert')
-    expect(alert).toBeInTheDocument()
-    expect(alert).toHaveAttribute('role', 'alert')
   })
 
   describe('PktSelect', () => {

package/src/components/textarea/Textarea.test.tsx

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom'
 
-import { fireEvent, render } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import React from 'react'
 
@@ -19,14 +19,11 @@ describe('PktTextarea', () => {
   })
 
   test('renders error message when hasError prop is true', async () => {
-    const { getByText } = render(<PktTextarea label="Input Label" id="inputId" hasError errorMessage="Input error" />)
-
-    await window.customElements.whenDefined('pkt-alert')
-    const errorMessage = getByText('Input error')
-    expect(errorMessage).toBeInTheDocument()
-    const alertContainer = errorMessage.closest('pkt-alert')
-
-    expect(alertContainer).toHaveAttribute('id', 'inputId-input-error')
+    render(<PktTextarea label="Input Label" id="inputId" hasError errorMessage="Input error" />)
+    const errorMessageId = 'inputId-input-error' // når https://github.com/oslokommune/punkt/issues/3093 er fiksa:  screen.getByRole('textbox').getAttribute('aria-errormessage')
+    const alertContainer = screen.getByRole('alert')
+    expect(alertContainer).toHaveAttribute('id', errorMessageId)
+    expect(alertContainer).toHaveTextContent('Input error')
   })
 
   describe('PktTextarea', () => {

package/src/components/textinput/Textinput.test.tsx

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom'
 
-import { fireEvent, render } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
 
 import { PktTextinput } from './Textinput'
@@ -21,13 +21,13 @@ describe('PktTextinput', () => {
   })
 
   test('renders error message when hasError prop is true', async () => {
-    const { getByText } = render(<PktTextinput label={label} id={inputId} hasError errorMessage="Input error" />)
+    render(<PktTextinput label={label} id={inputId} hasError errorMessage="Input error" />)
+
+    const errorMessageId = screen.getByRole('textbox').getAttribute('aria-errormessage')
+    const alertContainer = screen.getByRole('alert')
+    expect(alertContainer).toHaveAttribute('id', errorMessageId)
+    expect(alertContainer).toHaveTextContent('Input error')
 
-    const errorMessage = getByText('Input error')
-    expect(errorMessage).toBeInTheDocument()
-    const alertContainer = errorMessage.closest('pkt-alert')
-    expect(alertContainer).not.toBeNull()
-    expect(alertContainer).toHaveAttribute('id', 'inputId-error')
   })
 
   describe('PktTextinput', () => {