@oslokommune/punkt-react 16.19.0 → 16.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "16.19.0",
+  "version": "16.21.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": "^16.19.0",
+    "@oslokommune/punkt-elements": "^16.21.0",
     "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-hook-form": "^7.53.0"
@@ -109,5 +109,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "e90194e9a4c25a6b7a5370c05889e262b4e6cfb0"
+  "gitHead": "f7f1779ccee5d510e6d011e7ec3edba89b41c255"
 }

package/src/components/helptext/Helptext.test.tsx

@@ -0,0 +1,98 @@
+import '@testing-library/jest-dom'
+
+import { fireEvent, render, screen } from '@testing-library/react'
+import { vi } from 'vitest'
+
+import { PktHelptext } from './Helptext'
+
+describe('PktHelptext', () => {
+  test('renders the container without the has-helptext modifier when empty', () => {
+    const { container } = render(<PktHelptext forId="field" />)
+
+    const root = container.querySelector('.pkt-inputwrapper__helptext-container')
+    expect(root).toBeInTheDocument()
+    expect(root).not.toHaveClass('pkt-inputwrapper__has-helptext')
+  })
+
+  test('renders helptext string as HTML inside the helptext div', () => {
+    const { container } = render(<PktHelptext forId="field" helptext="Hjelp <strong>her</strong>" />)
+
+    const helptext = container.querySelector(`#field-helptext`)
+    expect(helptext).toBeInTheDocument()
+    expect(helptext?.querySelector('strong')).toHaveTextContent('her')
+    expect(container.querySelector('.pkt-inputwrapper__helptext-container')).toHaveClass(
+      'pkt-inputwrapper__has-helptext',
+    )
+  })
+
+  test('renders helptext ReactNode directly', () => {
+    render(
+      <PktHelptext forId="field" helptext={<em data-testid="rn">Rich</em>} />,
+    )
+
+    expect(screen.getByTestId('rn')).toHaveTextContent('Rich')
+  })
+
+  test('renders children inside pkt-contents', () => {
+    const { container } = render(
+      <PktHelptext forId="field">
+        <span data-testid="slot">Slot content</span>
+      </PktHelptext>,
+    )
+
+    const contents = container.querySelector('.pkt-contents')
+    expect(contents).toBeInTheDocument()
+    expect(contents?.querySelector('[data-testid="slot"]')).toHaveTextContent('Slot content')
+  })
+
+  test('renders the dropdown toggle button with the default label when no button text is provided', () => {
+    render(<PktHelptext forId="field" helptextDropdown="Mer info" />)
+
+    const button = screen.getByRole('button')
+    expect(button.querySelector('.pkt-btn__text')).toHaveTextContent('Les mer')
+  })
+
+  test('renders a custom helptextDropdownButton as HTML', () => {
+    render(
+      <PktHelptext
+        forId="field"
+        helptextDropdown="Mer info"
+        helptextDropdownButton="Vis <em>detaljer</em>"
+      />,
+    )
+
+    const button = screen.getByRole('button')
+    expect(button.querySelector('em')).toHaveTextContent('detaljer')
+  })
+
+  test('toggles the dropdown open class and calls onToggleHelpText', () => {
+    const onToggle = vi.fn()
+    const { container } = render(
+      <PktHelptext
+        forId="field"
+        helptextDropdown="Mer info"
+        onToggleHelpText={onToggle}
+      />,
+    )
+
+    const expandable = container.querySelector('.pkt-inputwrapper__helptext-expandable')
+    const innerHelptext = expandable?.querySelector('.pkt-inputwrapper__helptext')
+    expect(innerHelptext).toHaveClass('pkt-inputwrapper__helptext-expandable-closed')
+
+    fireEvent.click(screen.getByRole('button'))
+    expect(innerHelptext).toHaveClass('pkt-inputwrapper__helptext-expandable-open')
+    expect(onToggle).toHaveBeenLastCalledWith(true)
+
+    fireEvent.click(screen.getByRole('button'))
+    expect(innerHelptext).toHaveClass('pkt-inputwrapper__helptext-expandable-closed')
+    expect(onToggle).toHaveBeenLastCalledWith(false)
+  })
+
+  test('does not render an id on the helptext div when forId is missing', () => {
+    const { container } = render(<PktHelptext helptext="No id here" />)
+
+    const helptext = container.querySelector('.pkt-inputwrapper__helptext')
+    expect(helptext).toBeInTheDocument()
+    expect(helptext).not.toHaveAttribute('id')
+  })
+})

package/src/components/helptext/Helptext.tsx

@@ -1,37 +1,95 @@
 'use client'
 
-import { createComponent, EventName } from '@lit/react'
-import { PktHelptext as PktElHelptext } from '@oslokommune/punkt-elements'
-// eslint-disable-next-line no-restricted-syntax -- React is required for createComponent
-import React, { FC, forwardRef, ForwardRefExoticComponent, HTMLAttributes, LegacyRef, type ReactNode } from 'react'
+import classNames from 'classnames'
+import { forwardRef, HTMLAttributes, ReactNode, useState } from 'react'
+
+import { PktIcon } from '../icon/Icon'
+
+const defaultDropdownButton = "Les mer <span class='pkt-sr-only'>om feltet</span>"
 
 export interface IPktHelptextProps extends HTMLAttributes<HTMLDivElement> {
-  helptext?: string | ReactNode | ReactNode[]
-  helptextDropdown?: string | ReactNode | ReactNode[]
+  helptext?: string | ReactNode
+  helptextDropdown?: string | ReactNode
   helptextDropdownButton?: string
   forId?: string
-  ref?: LegacyRef<HTMLDivElement>
-  onToggleHelpText?: (e: CustomEvent) => void
+  onToggleHelpText?: (isOpen: boolean) => void
 }
 
-export const LitComponent = createComponent({
-  tagName: 'pkt-helptext',
-  elementClass: PktElHelptext,
-  react: React,
-  displayName: 'PktHelptext',
-  events: {
-    onToggleHelpText: 'toggleHelpText' as EventName<CustomEvent>,
-  },
-}) as ForwardRefExoticComponent<IPktHelptextProps>
-
-export const PktHelptext: FC<IPktHelptextProps> = forwardRef(
-  ({ children, ...props }, ref: LegacyRef<HTMLDivElement>) => {
-    return (
-      <LitComponent {...props} ref={ref}>
-        <div className="pkt-contents">{children}</div>
-      </LitComponent>
-    )
+const renderContent = (content: string | ReactNode | undefined): ReactNode => {
+  if (content === undefined || content === null || content === '') return null
+  if (typeof content === 'string') {
+    return <span dangerouslySetInnerHTML={{ __html: content }} />
+  }
+  return content
+}
+
+export const PktHelptext = forwardRef<HTMLDivElement, IPktHelptextProps>(function PktHelptext(
+  {
+    helptext,
+    helptextDropdown,
+    helptextDropdownButton,
+    forId,
+    onToggleHelpText,
+    className,
+    children,
+    ...rest
   },
-)
+  ref,
+) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const toggle = () => {
+    const next = !isOpen
+    setIsOpen(next)
+    onToggleHelpText?.(next)
+  }
+
+  const hasContent = Boolean(helptext || helptextDropdown || children)
+
+  const containerClasses = classNames(
+    'pkt-inputwrapper__helptext-container',
+    hasContent && 'pkt-inputwrapper__has-helptext',
+    className,
+  )
+
+  return (
+    <div {...rest} ref={ref} className={containerClasses}>
+      <div className="pkt-inputwrapper__helptext" id={forId ? `${forId}-helptext` : undefined}>
+        {children && <div className="pkt-contents">{children}</div>}
+        {renderContent(helptext)}
+      </div>
+      {helptextDropdown && (
+        <div className="pkt-inputwrapper__helptext-expandable">
+          <button
+            type="button"
+            className="pkt-link pkt-link--icon-right pkt-btn pkt-btn--small pkt-btn--tertiary pkt-btn--icon-right"
+            onClick={toggle}
+          >
+            <PktIcon
+              className="pkt-btn__icon"
+              name={isOpen ? 'chevron-thin-up' : 'chevron-thin-down'}
+            />
+            <span
+              className="pkt-btn__text"
+              dangerouslySetInnerHTML={{
+                __html: helptextDropdownButton ?? defaultDropdownButton,
+              }}
+            />
+          </button>
+          <div
+            className={classNames(
+              'pkt-inputwrapper__helptext',
+              isOpen
+                ? 'pkt-inputwrapper__helptext-expandable-open'
+                : 'pkt-inputwrapper__helptext-expandable-closed',
+            )}
+          >
+            {renderContent(helptextDropdown)}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+})
 
 PktHelptext.displayName = 'PktHelptext'

package/src/components/inputwrapper/InputWrapper.tsx

@@ -1,10 +1,10 @@
 'use client'
 
-import { ForwardedRef, forwardRef, type ReactNode, RefAttributes, useState } from 'react'
+import { ForwardedRef, forwardRef, type ReactNode, RefAttributes } from 'react'
 
 import { useFocusModality } from '../../hooks/useFocusModality'
 import { PktAlert } from '../alert/Alert'
-import { PktButton } from '../button/Button'
+import { PktHelptext } from '../helptext/Helptext'
 
 export interface IPktInputWrapper extends RefAttributes<HTMLElement> {
   forId: string
@@ -63,8 +63,6 @@ export const PktInputWrapper = forwardRef(
     }: IPktInputWrapper,
     ref: ForwardedRef<HTMLDivElement>,
   ) => {
-    const [isHelpTextOpen, setIsHelpTextOpen] = useState(false)
-
     const focusModality = useFocusModality<HTMLDivElement>(ref)
 
     const describedBy = ariaDescribedby || (helptext ? `${forId}-helptext` : undefined)
@@ -72,8 +70,6 @@ export const PktInputWrapper = forwardRef(
     const counterTop = showCounter && counterPosition === 'top'
     const counterBottom = showCounter && counterPosition === 'bottom'
 
-    const toggleHelpText = () => setIsHelpTextOpen((prev) => !prev)
-
     const wrapperClasses = [
       'pkt-inputwrapper',
       className,
@@ -134,43 +130,16 @@ export const PktInputWrapper = forwardRef(
     }
 
     const renderHelptext = () => {
-      if (!helptext && !helptextDropdown) return null
+      const visibleHelptext = useWrapper ? helptext : undefined
+      if (!visibleHelptext && !helptextDropdown) return null
 
       return (
-        <>
-          {helptext && useWrapper && (
-            <div className="pkt-inputwrapper__helptext" id={`${forId}-helptext`}>
-              {helptext}
-            </div>
-          )}
-          {helptextDropdown && (
-            <div className="pkt-inputwrapper__helptext-expandable">
-              <PktButton
-                skin="tertiary"
-                size="small"
-                variant="icon-right"
-                iconName={isHelpTextOpen ? 'chevron-thin-up' : 'chevron-thin-down'}
-                className="pkt-link pkt-link--icon-right"
-                onClick={toggleHelpText}
-              >
-                <span
-                  dangerouslySetInnerHTML={{
-                    __html: helptextDropdownButton ?? 'Les mer <span class="pkt-sr-only">om inputfeltet</span>',
-                  }}
-                />
-              </PktButton>
-              <div
-                className={`pkt-inputwrapper__helptext ${
-                  isHelpTextOpen
-                    ? 'pkt-inputwrapper__helptext-expandable-open'
-                    : 'pkt-inputwrapper__helptext-expandable-closed'
-                }`}
-              >
-                {helptextDropdown}
-              </div>
-            </div>
-          )}
-        </>
+        <PktHelptext
+          forId={forId}
+          helptext={visibleHelptext}
+          helptextDropdown={helptextDropdown}
+          helptextDropdownButton={helptextDropdownButton}
+        />
       )
     }
 

package/src/components/loader/Loader.test.tsx

@@ -1,38 +1,75 @@
 import '@testing-library/jest-dom'
 
-import { render } from '@testing-library/react'
+import { act, render } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
+import { vi } from 'vitest'
 
 import { PktLoader } from './Loader'
 expect.extend(toHaveNoViolations)
 
 describe('PktLoader', () => {
   describe('basic rendering', () => {
-    it('renders correctly without any props', async () => {
+    it('renders correctly without any props', () => {
       const { container } = render(<PktLoader id="loader1" />)
-      await window.customElements.whenDefined('pkt-loader')
 
-      const element = container.querySelector('pkt-loader')
-      expect(element).toBeInTheDocument()
+      const root = container.querySelector('.pkt-loader')
+      expect(root).toBeInTheDocument()
+      expect(root).toHaveAttribute('id', 'loader1')
+      expect(root).toHaveAttribute('role', 'status')
+      expect(root).toHaveAttribute('aria-busy', 'true')
     })
 
-    it('renders with size and variant', async () => {
-      const { container } = render(<PktLoader id="loader1" size="small" variant="rainbow" message="Loading.." />)
-      await window.customElements.whenDefined('pkt-loader')
+    it('renders with size and variant', () => {
+      const { container } = render(
+        <PktLoader id="loader1" size="small" variant="rainbow" message="Loading.." />,
+      )
 
-      const loaderBox = container.querySelector('pkt-loader')
-      const loaderSize = loaderBox?.querySelector('.pkt-loader--small')
-
-      expect(loaderSize).toBeInTheDocument()
-      expect(loaderBox).toHaveTextContent('Loading..')
+      const root = container.querySelector('.pkt-loader')
+      expect(root).toHaveClass('pkt-loader--small')
+      expect(root?.querySelector('.pkt-loader__spinner')).toBeInTheDocument()
+      expect(root).toHaveTextContent('Loading..')
     })
 
-    it('renders inline', async () => {
+    it('renders inline', () => {
       const { container } = render(<PktLoader size="medium" message="Loading.." inline />)
-      await window.customElements.whenDefined('pkt-loader')
-      const elementInline = container.querySelector('.pkt-loader--inline')
+      expect(container.querySelector('.pkt-loader--inline')).toBeInTheDocument()
+    })
+
+    it('hides children while loading and shows them when not loading', () => {
+      const { container, rerender } = render(
+        <PktLoader isLoading>
+          <span data-testid="child">Innhold</span>
+        </PktLoader>,
+      )
+
+      const slot = container.querySelector('.pkt-contents')
+      expect(slot).toHaveClass('pkt-hide')
+      expect(slot?.querySelector('[data-testid="child"]')).toBeInTheDocument()
+
+      rerender(
+        <PktLoader isLoading={false}>
+          <span data-testid="child">Innhold</span>
+        </PktLoader>,
+      )
+      expect(container.querySelector('.pkt-contents')).not.toHaveClass('pkt-hide')
+      expect(container.querySelector('.pkt-loader__spinner')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('delay', () => {
+    it('defers the spinner until after the delay has elapsed', () => {
+      vi.useFakeTimers()
+      try {
+        const { container } = render(<PktLoader delay={500} />)
+        expect(container.querySelector('.pkt-loader__spinner')).not.toBeInTheDocument()
 
-      expect(elementInline).toBeInTheDocument()
+        act(() => {
+          vi.advanceTimersByTime(500)
+        })
+        expect(container.querySelector('.pkt-loader__spinner')).toBeInTheDocument()
+      } finally {
+        vi.useRealTimers()
+      }
     })
   })
 

package/src/components/loader/Loader.tsx

@@ -1,33 +1,123 @@
 'use client'
 
-import { createComponent } from '@lit/react'
-import { type IPktLoader as IPktElLoader, PktLoader as PktElLoader } from '@oslokommune/punkt-elements'
-// eslint-disable-next-line no-restricted-syntax -- React is required for createComponent
-import React, { FC, ForwardedRef, forwardRef, type ReactElement } from 'react'
+import classNames from 'classnames'
+import { forwardRef, HTMLAttributes, ReactNode, useEffect, useState } from 'react'
 
-import type { PktElConstructor, PktElType } from '@/interfaces/IPktElements'
+import { PktIcon } from '../icon/Icon'
 
-type ExtendedLoader = IPktElLoader & PktElType
+declare global {
+  interface Window {
+    pktAnimationPath?: string
+  }
+}
 
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface IPktLoader extends ExtendedLoader {}
+if (typeof window !== 'undefined') {
+  window.pktAnimationPath =
+    window.pktAnimationPath || 'https://punkt-cdn.oslo.kommune.no/latest/animations/'
+}
 
-const LitComponent: FC<IPktLoader> = createComponent({
-  tagName: 'pkt-loader',
-  elementClass: PktElLoader as PktElConstructor<HTMLElement>,
-  react: React,
-  displayName: 'PktLoader',
-  events: {},
-})
+export type TPktLoaderVariant = 'blue' | 'rainbow' | 'shapes'
+export type TPktLoaderSize = 'small' | 'medium' | 'large'
+
+export interface IPktLoader extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Tid i millisekunder før loader vises. Nyttig når lastetiden kan være
+   * så kort at loader ikke trengs.
+   */
+  delay?: number
+  /**
+   * Vises loader inline eller som blokk.
+   */
+  inline?: boolean
+  /**
+   * Styrer om loader eller barnenoder vises. Når `false` vises barnenoder.
+   */
+  isLoading?: boolean
+  /**
+   * Meldingstekst som vises sammen med loader.
+   */
+  message?: string | null
+  /**
+   * Størrelse på loader. Standard er "medium".
+   */
+  size?: TPktLoaderSize
+  /**
+   * Loader-variant. Standard er "shapes" (Oslo-bølger). Andre er "blue" og "rainbow" (spinner-varianter).
+   */
+  variant?: TPktLoaderVariant
+  /**
+   * Overstyrer stien til loader-animasjoner.
+   */
+  loadingAnimationPath?: string
+  children?: ReactNode
+}
 
-export const PktLoader: FC<IPktLoader> = forwardRef(
-  ({ children, ...props }: IPktLoader, ref: ForwardedRef<HTMLElement>): ReactElement => {
-    return (
-      <LitComponent {...props} ref={ref}>
-        <div className="pkt-contents">{children}</div>
-      </LitComponent>
-    )
+const variantIcon = (variant: TPktLoaderVariant): string => {
+  switch (variant) {
+    case 'blue':
+      return 'spinner-blue'
+    case 'rainbow':
+      return 'spinner'
+    default:
+      return 'loader'
+  }
+}
+
+export const PktLoader = forwardRef<HTMLDivElement, IPktLoader>(function PktLoader(
+  {
+    delay = 0,
+    inline = false,
+    isLoading = true,
+    message = null,
+    size = 'medium',
+    variant = 'shapes',
+    loadingAnimationPath = typeof window !== 'undefined' ? window.pktAnimationPath : undefined,
+    className,
+    children,
+    ...rest
   },
-)
+  ref,
+) {
+  const [shouldDisplayLoader, setShouldDisplayLoader] = useState(delay === 0)
+
+  useEffect(() => {
+    if (delay > 0) {
+      setShouldDisplayLoader(false)
+      const handle = setTimeout(() => setShouldDisplayLoader(true), delay)
+      return () => clearTimeout(handle)
+    }
+    setShouldDisplayLoader(true)
+  }, [delay])
+
+  const classes = classNames(
+    'pkt-loader',
+    inline ? 'pkt-loader--inline' : 'pkt-loader--box',
+    `pkt-loader--${size}`,
+    className,
+  )
+
+  return (
+    <div
+      {...rest}
+      ref={ref}
+      role="status"
+      aria-live="polite"
+      aria-busy={isLoading ? 'true' : 'false'}
+      className={classes}
+    >
+      {isLoading && shouldDisplayLoader && (
+        <div className="pkt-loader__spinner">
+          <PktIcon
+            name={variantIcon(variant)}
+            path={loadingAnimationPath}
+            className={`pkt-loader__svg pkt-loader__${variant}`}
+          />
+          {message && <p>{message}</p>}
+        </div>
+      )}
+      <div className={classNames('pkt-contents', isLoading && 'pkt-hide')}>{children}</div>
+    </div>
+  )
+})
 
 PktLoader.displayName = 'PktLoader'