@oslokommune/punkt-react 12.17.2 → 12.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "12.17.2",
+  "version": "12.18.0",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -38,7 +38,7 @@
   "dependencies": {
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@lit/react": "^1.0.5",
-    "@oslokommune/punkt-elements": "^12.17.2",
+    "@oslokommune/punkt-elements": "^12.18.0",
     "angular-html-parser": "^6.0.2",
     "html-format": "^1.1.7",
     "prettier": "^3.3.3",
@@ -111,5 +111,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "998cf96281840a47cba5ba3e0c76e6fa1d2ed10e"
+  "gitHead": "ceaac8e8aac119c09de9e77927150022aa6e316d"
 }

package/src/components/header/Header.tsx

@@ -163,7 +163,9 @@ export const PktHeader = forwardRef(
               ></PktIcon>
             </button>
           )}
-          <span className="pkt-header__logo-service">{serviceName}</span>
+          <span className="pkt-header__logo-service" translate="no">
+            {serviceName}
+          </span>
         </div>
         <nav className="pkt-header__actions">
           <ul className="pkt-header__actions-row">
@@ -195,8 +197,12 @@ export const PktHeader = forwardRef(
                   onClick={openUserMenu}
                 >
                   <PktIcon name="user" className="pkt-btn__icon" />
-                  <span className="pkt-header__user-fullname">{representing?.name || user?.name}</span>
-                  <span className="pkt-header__user-shortname">{representing?.shortname || user?.shortname}</span>
+                  <span className="pkt-header__user-fullname" translate="no">
+                    {representing?.name || user?.name}
+                  </span>
+                  <span className="pkt-header__user-shortname" translate="no">
+                    {representing?.shortname || user?.shortname}
+                  </span>
                   <PktIcon name="chevron-thin-down" className="pkt-btn--closed" />
                   <PktIcon name="chevron-thin-up" className="pkt-btn--open" />
                 </button>
@@ -204,7 +210,9 @@ export const PktHeader = forwardRef(
                   {user && (
                     <li>
                       <div className="pkt-user-menu__label">Pålogget som</div>
-                      <div className="pkt-user-menu__name">{user.name}</div>
+                      <div className="pkt-user-menu__name" translate="no">
+                        {user.name}
+                      </div>
                       {user.lastLoggedIn && (
                         <div className="pkt-user-menu__last-logged-in">
                           Sist pålogget: <time>{lastLoggedIn}</time>
@@ -238,7 +246,9 @@ export const PktHeader = forwardRef(
                       {representing && (
                         <>
                           <div className="pkt-user-menu__label">Representerer</div>
-                          <div className="pkt-user-menu__name">{representing.name}</div>
+                          <div className="pkt-user-menu__name" translate="no">
+                            {representing.name}
+                          </div>
                           {representing.orgNumber && (
                             <div className="pkt-user-menu__org-number">Org.nr. {representing.orgNumber}</div>
                           )}

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

@@ -3,109 +3,155 @@ import { render, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import { PktProgressbar } from './Progressbar'
+import exp from 'constants'
 
 expect.extend(toHaveNoViolations)
 
 describe('PktProgressbar', () => {
   describe('rendering', () => {
-    it('renders with default props', () => {
-      render(<PktProgressbar id="progress1" valueCurrent={50} />)
-      const progressbar = screen.getByRole('progressbar')
+    test('renders with default props', async () => {
+      const { container } = render(<PktProgressbar id="progress1" valueCurrent={50} />)
+      await window.customElements.whenDefined('pkt-progressbar')
+
+      const progressbar = container.querySelector('pkt-progressbar')
+
       expect(progressbar).toBeInTheDocument()
-      expect(progressbar).toHaveAttribute('aria-valuemin', '0')
-      expect(progressbar).toHaveAttribute('aria-valuemax', '100')
-      expect(progressbar).toHaveAttribute('aria-valuenow', '50')
-      const bar = progressbar.querySelector('.pkt-progressbar__bar--dark-blue')
+      expect(progressbar).toHaveAttribute('id', 'progress1')
+      expect(progressbar).toHaveAttribute('valuemin', '0')
+      expect(progressbar).toHaveAttribute('valuemax', '100')
+      expect(progressbar).toHaveAttribute('valuecurrent', '50')
+
+      const bar = progressbar?.querySelector('.pkt-progressbar__bar--dark-blue')
       expect(bar).toBeInTheDocument()
     })
 
-    it('renders with custom skin', () => {
-      render(<PktProgressbar id="progress2" valueCurrent={50} skin="red" />)
-      const bar = screen.getByRole('progressbar').querySelector('.pkt-progressbar__bar--red')
+    test('renders with custom skin', async () => {
+      const { container } = render(<PktProgressbar id="progress2" valueCurrent={50} skin="red" />)
+      await window.customElements.whenDefined('pkt-progressbar')
+
+      const progressbar = container.querySelector('pkt-progressbar')
+      const bar = progressbar?.querySelector('.pkt-progressbar__bar--red')
       expect(bar).toBeInTheDocument()
     })
 
-    it('renders title correctly', () => {
-      render(<PktProgressbar id="progress3" valueCurrent={50} title="Progress" />)
-      const title = screen.getByText('Progress')
+    test('renders title correctly', async () => {
+      const { container, getByText } = render(<PktProgressbar id="progress3" valueCurrent={50} title="Progress" />)
+      await window.customElements.whenDefined('pkt-progressbar')
+
+      const progressbar = container.querySelector('pkt-progressbar')
+
+      // Select by class
+      const title = progressbar?.querySelector('.pkt-progressbar__title')
       expect(title).toBeInTheDocument()
-      expect(title).toHaveClass('pkt-progressbar__title')
+
+      // Select by text
+      const titleText = getByText('Progress')
+      expect(titleText).toBeInTheDocument()
     })
 
-    it('renders title with center position', () => {
-      render(<PktProgressbar id="progress4" valueCurrent={50} title="Progress" titlePosition="center" />)
-      const title = screen.getByText('Progress')
-      expect(title).toHaveClass('pkt-progressbar__title-center')
+    test('renders title with center position', async () => {
+      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()
     })
 
-    it('renders status as percentage', () => {
-      render(<PktProgressbar id="progress5" valueCurrent={50} statusType="percentage" />)
-      const status = screen.getByText('50%').parentElement
+    test('renders status as percentage', async () => {
+      const { container } = render(<PktProgressbar id="progress5" valueCurrent={50} statusType="percentage" />)
+      await window.customElements.whenDefined('pkt-progressbar')
+      const status = container.querySelector('.pkt-progressbar__status')
+      console.log(status)
       expect(status).toBeInTheDocument()
-      expect(status).toHaveClass('pkt-progressbar__status')
+      expect(status).toHaveTextContent('50%')
     })
 
-    it('renders status as fraction', () => {
-      render(<PktProgressbar id="progress6" valueCurrent={50} valueMax={200} statusType="fraction" />)
-      const status = screen.getByText('50 av 200').parentElement
+    test('renders status as fraction', async () => {
+      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).toHaveClass('pkt-progressbar__status')
+      expect(status).toHaveTextContent('50 av 200')
     })
 
-    it('renders status with center placement', () => {
-      render(<PktProgressbar id="progress7" valueCurrent={50} statusType="percentage" statusPlacement="center" />)
-      const status = screen.getByText('50%').parentElement
-      expect(status).toHaveClass('pkt-progressbar__status--center')
+    test('renders status with center placement', async () => {
+      const { container } = render(
+        <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()
     })
 
-    it('renders status with following placement', () => {
-      render(<PktProgressbar id="progress8" valueCurrent={50} statusType="percentage" statusPlacement="following" />)
-      const status = screen.getByText('50%')
-      expect(status).toHaveClass('pkt-progressbar__status-placement--following')
+    test('renders status with following placement', async () => {
+      const { container } = render(
+        <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()
     })
 
-    it('handles aria-label correctly', () => {
-      render(<PktProgressbar id="progress9" valueCurrent={50} ariaLabel="Progress bar" />)
-      const progressbar = screen.getByRole('progressbar')
-      expect(progressbar).toHaveAttribute('aria-label', 'Progress bar')
-      expect(progressbar).not.toHaveAttribute('aria-labelledby')
+    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')
+      expect(progressbar).toHaveAttribute('arialabel', 'Progress bar')
+      expect(progressbar).toHaveAttribute('arialabelledby', '')
     })
 
-    it('handles role meter correctly', () => {
-      render(<PktProgressbar id="progress10" role="meter" valueCurrent={50} ariaLabel="Meter bar" />)
-      const progressbar = screen.getByRole('meter')
-      expect(progressbar).toHaveAttribute('aria-label', 'Meter bar')
+    test('handles role meter correctly', async () => {
+      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')
+      expect(progressbar).toHaveAttribute('role', 'meter')
     })
 
-    it('handles id for title and aria-labelledby correctly', () => {
-      render(<PktProgressbar valueCurrent={50} title="Progress" id="progresstitle" />)
-      const title = screen.getByText('Progress')
-      expect(title).toHaveAttribute('id', 'progresstitle-title')
-      const progressbar = screen.getByRole('progressbar')
-      expect(progressbar).toHaveAttribute('aria-labelledby', 'progresstitle-title')
+    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')
+      const title = container.querySelector('.pkt-progressbar__title')
+      expect(title).toHaveAttribute('id', 'progressId-title')
+
+      const progressbarDiv = container.querySelector('.pkt-progressbar__bar-wrapper')
+      expect(progressbarDiv).toBeInTheDocument()
+      expect(progressbarDiv).toHaveAttribute('aria-labelledby', 'progressId-title')
     })
 
-    it('generates id if none is provided', () => {
-      render(<PktProgressbar valueCurrent={51} />)
+    test('generates id if none is provided', async () => {
       const { container } = render(<PktProgressbar valueCurrent={50} />)
-      const outerDiv = container.firstChild as HTMLElement
-      const id = outerDiv.getAttribute('id')
+      await window.customElements.whenDefined('pkt-progressbar')
+
+      const outerDiv = container.querySelector('.pkt-progressbar__container')
+      const id = outerDiv?.getAttribute('id')
       expect(id).toHaveLength(36)
     })
 
-    it('sets ref correctly', () => {
-      const ref = React.createRef<HTMLDivElement>()
-      const { container } = render(<PktProgressbar ref={ref} id="progress-ref" valueCurrent={50} title="Ref bar" />)
-      const outerDiv = container.firstChild
-      expect(ref.current).toBeInstanceOf(HTMLDivElement)
-      expect(ref.current).not.toBeNull()
-      expect(outerDiv).toBe(ref.current)
+    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')
+
+      expect(ref.current).toBeInstanceOf(HTMLElement)
+      unmount()
+      expect(ref.current).toBeNull()
     })
   })
 
+  // ACCESSIBILITY TESTS
+
   describe('accessibility', () => {
-    it('renders with no wcag errors with axe', async () => {
-      const { container } = render(<PktProgressbar id="progress-axe" valueCurrent={50} title="Axe test" />)
+    test('renders with no wcag errors with axe', async () => {
+      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,123 +1,27 @@
-import React, { useState, useEffect, useRef, CSSProperties, forwardRef, HTMLAttributes, ForwardedRef } from 'react'
-import classNames from 'classnames'
-import { v4 as uuidv4 } from 'uuid'
+import React, { forwardRef, ForwardedRef, ReactElement } from 'react'
+import { createComponent } from '@lit/react'
+import { PktProgressbar as PktElProgressbar } from '@oslokommune/punkt-elements'
+import type { PktElType, PktElConstructor } from '@/interfaces/IPktElements'
+import type { IPktProgressbar as IPktElProgressbar } from '@oslokommune/punkt-elements'
 
-interface IPktProgressbar extends HTMLAttributes<HTMLDivElement> {
-  valueCurrent: number
-  valueMax?: number
-  valueMin?: number
-  ariaValueText?: string
-  skin?: 'dark-blue' | 'light-blue' | 'green' | 'red'
-  title?: string
-  titlePosition?: 'left' | 'center'
-  statusType?: 'none' | 'percentage' | 'fraction'
-  statusPlacement?: 'center' | 'left' | 'following'
-  ariaLabel?: string
-  ariaLabelledby?: string
-  role?: 'progressbar' | 'meter'
-  className?: string
-  id?: string
-}
+type ExtendedProgressbar = IPktElProgressbar & PktElType
 
-export const PktProgressbar = forwardRef(
-  (
-    {
-      valueCurrent,
-      valueMin = 0,
-      valueMax = 100,
-      skin = 'dark-blue',
-      title,
-      titlePosition = 'left',
-      statusType = 'none',
-      statusPlacement = 'following',
-      id,
-      ariaLabel,
-      ariaLabelledby,
-      role = 'progressbar',
-      className,
-      ariaValueText,
-      ...props
-    }: IPktProgressbar,
-    ref: ForwardedRef<HTMLDivElement>,
-  ) => {
-    const labelRef = useRef(null)
-    const [labelWidth, setLabelWidth] = useState(0)
-    const [progressId, setProgressId] = useState(id)
-
-    useEffect(() => {
-      if (!id) {
-        setProgressId(uuidv4())
-      }
-    }, [id])
-
-    useEffect(() => {
-      if (labelRef.current) {
-        const label: HTMLSpanElement = labelRef.current
-        setLabelWidth(label.getBoundingClientRect().width)
-      }
-    })
-    const totalSteps = valueMax - valueMin
-    const percentageOfSteps = (valueCurrent / totalSteps) * 100
-    const currentPercentage = valueMax !== 100 || valueMin !== 0 ? Math.round(percentageOfSteps) : valueCurrent
-    const formattedTitle = `${valueCurrent} av ${valueMax}`
-    const hasStatus = statusType !== 'none'
-
-    const barClasses = classNames('pkt-progressbar__bar', { [`pkt-progressbar__bar--${skin}`]: skin })
-
-    const titleClasses = classNames('pkt-progressbar__title', {
-      ['pkt-progressbar__title-center']: titlePosition === 'center',
-    })
+export interface IPktProgressbar extends ExtendedProgressbar {}
 
-    const statusClasses = classNames('pkt-progressbar__status', {
-      ['pkt-progressbar__status--center']: statusPlacement === 'center',
-    })
-
-    const placementClasses = classNames({
-      ['pkt-progressbar__status-placement--following']: statusPlacement === 'following',
-      ['pkt-progressbar__status-placement--center']: statusPlacement === 'center',
-      ['pkt-progressbar__status-placement--left']: statusPlacement === 'left',
-    })
+const LitComponent = createComponent({
+  tagName: 'pkt-progressbar',
+  elementClass: PktElProgressbar as PktElConstructor<HTMLElement>,
+  react: React,
+  displayName: 'PktProgressbar',
+  events: {},
+})
 
+export const PktProgressbar = forwardRef(
+  ({ children, ...props }: IPktProgressbar, ref: ForwardedRef<HTMLElement>): ReactElement => {
     return (
-      <div
-        {...props}
-        ref={ref}
-        className={classNames('pkt-progressbar__container', className)}
-        id={progressId}
-        style={
-          {
-            '--pkt-progress-label-width': `${labelWidth}px`,
-            '--pkt-progress-width': `${currentPercentage}%`,
-          } as CSSProperties
-        }
-      >
-        {title && (
-          <p id={`${progressId}-title`} className={titleClasses}>
-            {title}
-          </p>
-        )}
-
-        <div
-          role={role}
-          className="pkt-progressbar__bar-wrapper"
-          aria-valuemin={valueMin}
-          aria-valuemax={valueMax}
-          aria-valuenow={valueCurrent}
-          aria-labelledby={ariaLabelledby || (title && `${progressId}-title`)}
-          aria-label={ariaLabel}
-          aria-valuetext={ariaValueText}
-        >
-          <div className={barClasses}></div>
-        </div>
-
-        {hasStatus && (
-          <div className={statusClasses}>
-            <span className={placementClasses} ref={labelRef}>
-              {statusType === 'percentage' ? `${currentPercentage}%` : formattedTitle}
-            </span>
-          </div>
-        )}
-      </div>
+      <LitComponent ref={ref} {...props}>
+        <div className="pkt-contents">{children}</div>
+      </LitComponent>
     )
   },
 )