@oslokommune/punkt-react 16.5.0 → 16.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "16.5.0",
+  "version": "16.6.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.5.0",
+    "@oslokommune/punkt-elements": "^16.6.0",
     "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-hook-form": "^7.53.0"
@@ -50,7 +50,7 @@
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.37.0",
     "@oslokommune/punkt-assets": "^16.0.0",
-    "@oslokommune/punkt-css": "^16.4.0",
+    "@oslokommune/punkt-css": "^16.5.1",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -109,5 +109,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "81940eb91344498b82fc74316684b452f9fcc82c"
+  "gitHead": "a5df0ac2434d55a4c73421d970a55cc9329fec0e"
 }

package/src/components/progressbar/Progressbar.test.tsx

@@ -1,7 +1,6 @@
 import '@testing-library/jest-dom'
 
 import { render, screen } from '@testing-library/react'
-import exp from 'constants'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import { createRef } from 'react'
 
@@ -11,11 +10,10 @@ expect.extend(toHaveNoViolations)
 
 describe('PktProgressbar', () => {
   describe('rendering', () => {
-    test('renders with default props', async () => {
+    test('renders with default props', () => {
       const { container } = render(<PktProgressbar id="progress1" valueCurrent={50} />)
-      await window.customElements.whenDefined('pkt-progressbar')
 
-      const progressbar = container.querySelector('pkt-progressbar')
+      const progressbar = container.firstChild as HTMLElement
 
       expect(progressbar).toBeInTheDocument()
       expect(progressbar).toHaveAttribute('id', 'progress1')
@@ -27,119 +25,124 @@ describe('PktProgressbar', () => {
       expect(bar).toBeInTheDocument()
     })
 
-    test('renders with custom skin', async () => {
+    test('renders with custom skin', () => {
       const { container } = render(<PktProgressbar id="progress2" valueCurrent={50} skin="red" />)
-      await window.customElements.whenDefined('pkt-progressbar')
 
-      const progressbar = container.querySelector('pkt-progressbar')
+      const progressbar = container.firstChild as HTMLElement
       const bar = progressbar?.querySelector('.pkt-progressbar__bar--red')
       expect(bar).toBeInTheDocument()
     })
 
-    test('renders title correctly', async () => {
-      const { container, getByText } = render(<PktProgressbar id="progress3" valueCurrent={50} title="Progress" />)
-      await window.customElements.whenDefined('pkt-progressbar')
+    test('renders title correctly', () => {
+      const { container, getByText } = render(
+        <PktProgressbar id="progress3" valueCurrent={50} title="Progress" />,
+      )
 
-      const progressbar = container.querySelector('pkt-progressbar')
+      const progressbar = container.firstChild as HTMLElement
 
-      // Select by class
       const title = progressbar?.querySelector('.pkt-progressbar__title')
       expect(title).toBeInTheDocument()
 
-      // Select by text
       const titleText = getByText('Progress')
       expect(titleText).toBeInTheDocument()
     })
 
-    test('renders title with center position', async () => {
+    test('renders title with center position', () => {
       const { container } = render(
         <PktProgressbar id="progress4" valueCurrent={50} title="Progress" titlePosition="center" />,
       )
-      await window.customElements.whenDefined('pkt-progressbar')
       const title = container.querySelector('.pkt-progressbar__title-center')
       expect(title).toBeInTheDocument()
     })
 
-    test('renders status as percentage', async () => {
-      const { container } = render(<PktProgressbar id="progress5" valueCurrent={50} statusType="percentage" />)
-      await window.customElements.whenDefined('pkt-progressbar')
+    test('renders status as percentage', () => {
+      const { container } = render(
+        <PktProgressbar id="progress5" valueCurrent={50} statusType="percentage" />,
+      )
       const status = container.querySelector('.pkt-progressbar__status')
       expect(status).toBeInTheDocument()
       expect(status).toHaveTextContent('50%')
     })
 
-    test('renders status as fraction', async () => {
+    test('renders status as fraction', () => {
       const { container } = render(
         <PktProgressbar id="progress6" valueCurrent={50} valueMax={200} statusType="fraction" />,
       )
-      await window.customElements.whenDefined('pkt-progressbar')
       const status = container.querySelector('.pkt-progressbar__status')
       expect(status).toBeInTheDocument()
       expect(status).toHaveTextContent('50 av 200')
     })
 
-    test('renders status with center placement', async () => {
+    test('renders status with center placement', () => {
       const { container } = render(
-        <PktProgressbar id="progress7" valueCurrent={50} statusType="percentage" statusPlacement="center" />,
+        <PktProgressbar
+          id="progress7"
+          valueCurrent={50}
+          statusType="percentage"
+          statusPlacement="center"
+        />,
       )
-      await window.customElements.whenDefined('pkt-progressbar')
       const status = container.querySelector('.pkt-progressbar__status--center')
       expect(status).toBeInTheDocument()
     })
 
-    test('renders status with following placement', async () => {
+    test('renders status with following placement', () => {
       const { container } = render(
-        <PktProgressbar id="progress8" valueCurrent={50} statusType="percentage" statusPlacement="following" />,
+        <PktProgressbar
+          id="progress8"
+          valueCurrent={50}
+          statusType="percentage"
+          statusPlacement="following"
+        />,
       )
-      await window.customElements.whenDefined('pkt-progressbar')
       const status = container.querySelector('.pkt-progressbar__status-placement--following')
       expect(status).toBeInTheDocument()
     })
 
-    test('handles aria-label correctly', async () => {
-      const { container } = render(<PktProgressbar id="progress9" valueCurrent={50} ariaLabel="Progress bar" />)
-      await window.customElements.whenDefined('pkt-progressbar')
-      const progressbar = container.querySelector('pkt-progressbar')
+    test('handles aria-label correctly', () => {
+      const { container } = render(
+        <PktProgressbar id="progress9" valueCurrent={50} ariaLabel="Progress bar" />,
+      )
+      const progressbar = container.firstChild as HTMLElement
       expect(progressbar).toHaveAttribute('aria-label', 'Progress bar')
       expect(progressbar).not.toHaveAttribute('aria-labelledby')
     })
 
-    test('handles role meter correctly', async () => {
+    test('handles role meter correctly', () => {
       const { container } = render(
         <PktProgressbar id="progress10" role="meter" valueCurrent={50} ariaLabel="Meter bar" />,
       )
-      await window.customElements.whenDefined('pkt-progressbar')
-      const progressbar = container.querySelector('pkt-progressbar')
+      const progressbar = container.firstChild as HTMLElement
       expect(progressbar).toHaveAttribute('role', 'meter')
     })
 
-    test('handles id for title and aria-labelledby correctly', async () => {
-      const { container } = render(<PktProgressbar valueCurrent={50} title="Progress" id="progressId" />)
-      await window.customElements.whenDefined('pkt-progressbar')
+    test('handles id for title and aria-labelledby correctly', () => {
+      const { container } = render(
+        <PktProgressbar valueCurrent={50} title="Progress" id="progressId" />,
+      )
 
-      const progressbar = container.querySelector('pkt-progressbar')
+      const progressbar = container.firstChild as HTMLElement
 
       expect(progressbar).toBeInTheDocument()
       expect(progressbar).toHaveAttribute('aria-labelledby', 'progressId-title')
     })
 
-    test('generates id if none is provided', async () => {
+    test('generates id if none is provided', () => {
       const { container } = render(<PktProgressbar valueCurrent={50} />)
-      await window.customElements.whenDefined('pkt-progressbar')
 
-      const progressbar = container.querySelector('pkt-progressbar')
+      const progressbar = container.firstChild as HTMLElement
 
       const id = progressbar?.getAttribute('id')
       expect(id).toHaveLength(36)
     })
 
-    test('sets ref correctly', async () => {
-      const ref = createRef<HTMLElement>()
-      const { unmount } = render(<PktProgressbar ref={ref} id="progress-ref" valueCurrent={50} title="Ref bar" />)
-
-      await window.customElements.whenDefined('pkt-progressbar')
+    test('sets ref correctly', () => {
+      const ref = createRef<HTMLDivElement>()
+      const { unmount } = render(
+        <PktProgressbar ref={ref} id="progress-ref" valueCurrent={50} title="Ref bar" />,
+      )
 
-      expect(ref.current).toBeInstanceOf(HTMLElement)
+      expect(ref.current).toBeInstanceOf(HTMLDivElement)
       unmount()
       expect(ref.current).toBeNull()
     })
@@ -152,7 +155,6 @@ describe('PktProgressbar', () => {
       const { container } = render(
         <PktProgressbar id="progress-axe" valueCurrent={50} title="Axe test" role="progressbar" />,
       )
-      await window.customElements.whenDefined('pkt-progressbar')
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })

package/src/components/progressbar/Progressbar.tsx

@@ -1,31 +1,146 @@
 'use client'
 
-import { createComponent } from '@lit/react'
-import { type IPktProgressbar as IPktElProgressbar, PktProgressbar as PktElProgressbar } from '@oslokommune/punkt-elements'
-// eslint-disable-next-line no-restricted-syntax -- React is required for createComponent
-import React, { ForwardedRef, forwardRef, type ReactElement } from 'react'
+import classNames from 'classnames'
+import { forwardRef, HTMLAttributes, Ref, useEffect, useMemo, useRef, useState } from 'react'
+import type {
+  TAriaLive,
+  TProgressbarRole,
+  TProgressbarSkin,
+  TProgressbarStatusPlacement,
+  TProgressbarStatusType,
+  TProgressbarTitlePosition,
+} from 'shared-types'
+import { uuidish } from 'shared-utils/utils'
 
-import type { PktElConstructor, PktElType } from '@/interfaces/IPktElements'
+export type { TProgressbarRole, TProgressbarSkin, TProgressbarStatusPlacement, TProgressbarStatusType, TProgressbarTitlePosition }
 
-type ExtendedProgressbar = IPktElProgressbar & PktElType
+export interface IPktProgressbar extends Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'title'> {
+  ariaLabel?: string | null
+  ariaLabelledby?: string | null
+  ariaLive?: TAriaLive
+  ariaValueText?: string | null
+  id?: string
+  role?: TProgressbarRole
+  skin?: TProgressbarSkin
+  statusPlacement?: TProgressbarStatusPlacement
+  statusType?: TProgressbarStatusType
+  title?: string | null
+  titlePosition?: TProgressbarTitlePosition
+  valueCurrent: number
+  valueMax?: number
+  valueMin?: number
+  ref?: Ref<HTMLDivElement>
+}
 
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface IPktProgressbar extends ExtendedProgressbar {}
+export const PktProgressbar = forwardRef<HTMLDivElement, IPktProgressbar>(
+  (
+    {
+      ariaLabel,
+      ariaLabelledby,
+      ariaLive = 'polite',
+      ariaValueText,
+      id,
+      role = 'progressbar',
+      skin = 'dark-blue',
+      statusPlacement = 'following',
+      statusType = 'none',
+      title,
+      titlePosition = 'left',
+      valueCurrent = 0,
+      valueMax = 100,
+      valueMin = 0,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const generatedId = useMemo(() => uuidish(), [])
+    const progressbarId = id || generatedId
 
-const LitComponent = createComponent({
-  tagName: 'pkt-progressbar',
-  elementClass: PktElProgressbar as PktElConstructor<HTMLElement>,
-  react: React,
-  displayName: 'PktProgressbar',
-  events: {},
-})
+    const labelRef = useRef<HTMLSpanElement>(null)
+    const [labelWidth, setLabelWidth] = useState(0)
+
+    useEffect(() => {
+      if (labelRef.current) {
+        setLabelWidth(labelRef.current.getBoundingClientRect().width || 0)
+      }
+    }, [valueCurrent])
+
+    const totalSteps = valueMax - valueMin
+    const currentPercentage =
+      statusType === 'fraction'
+        ? Math.round((valueCurrent / totalSteps) * 100)
+        : Math.round(((valueCurrent - valueMin) / totalSteps) * 100)
+
+    const formattedTitle = `${valueCurrent} av ${totalSteps}`
+
+    const computedAriaValueText =
+      statusType === 'fraction' && !ariaValueText
+        ? `${valueCurrent} av ${valueMax - valueMin}`
+        : ariaValueText || undefined
+
+    const computedAriaLabelledby = !ariaLabel
+      ? ariaLabelledby || `${progressbarId}-title`
+      : undefined
 
-export const PktProgressbar = forwardRef(
-  ({ children, ...props }: IPktProgressbar, ref: ForwardedRef<HTMLElement>): ReactElement => {
     return (
-      <LitComponent ref={ref} {...props}>
-        <div className="pkt-contents">{children}</div>
-      </LitComponent>
+      <div
+        ref={ref}
+        id={progressbarId}
+        role={role}
+        aria-live={ariaLive}
+        aria-atomic="true"
+        aria-valuenow={valueCurrent}
+        aria-valuemin={valueMin}
+        aria-valuemax={valueMax}
+        aria-valuetext={computedAriaValueText}
+        aria-label={ariaLabel || undefined}
+        aria-labelledby={computedAriaLabelledby}
+        className={classNames('pkt-progressbar', className)}
+        {...props}
+      >
+        <div
+          className="pkt-progressbar__container"
+          style={{
+            '--pkt-progress-label-width': `${labelWidth}px`,
+            '--pkt-progress-width': `${currentPercentage}%`,
+          } as React.CSSProperties}
+        >
+          {title && (
+            <p
+              id={`${progressbarId}-title`}
+              className={classNames('pkt-progressbar__title', {
+                'pkt-progressbar__title-center': titlePosition === 'center',
+              })}
+            >
+              {title}
+            </p>
+          )}
+
+          <div className="pkt-progressbar__bar-wrapper">
+            <div className={classNames('pkt-progressbar__bar', `pkt-progressbar__bar--${skin}`)} />
+          </div>
+
+          {statusType !== 'none' && (
+            <div
+              className={classNames('pkt-progressbar__status', {
+                'pkt-progressbar__status--center': statusPlacement === 'center',
+              })}
+            >
+              <span
+                ref={labelRef}
+                className={classNames({
+                  'pkt-progressbar__status-placement--following': statusPlacement === 'following',
+                  'pkt-progressbar__status-placement--center': statusPlacement === 'center',
+                  'pkt-progressbar__status-placement--left': statusPlacement === 'left',
+                })}
+              >
+                {statusType === 'percentage' ? `${currentPercentage}%` : formattedTitle}
+              </span>
+            </div>
+          )}
+        </div>
+      </div>
     )
   },
 )