@oslokommune/punkt-react 13.22.0 → 14.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "13.22.0",
+  "version": "14.0.0",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -39,15 +39,15 @@
   "dependencies": {
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@lit/react": "^1.0.7",
-    "@oslokommune/punkt-elements": "^13.22.0",
+    "@oslokommune/punkt-elements": "^14.0.0",
     "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-hook-form": "^7.53.0"
   },
   "devDependencies": {
     "@babel/plugin-transform-private-property-in-object": "^7.25.9",
-    "@oslokommune/punkt-assets": "^13.16.0",
-    "@oslokommune/punkt-css": "^13.22.0",
+    "@oslokommune/punkt-assets": "^14.0.0",
+    "@oslokommune/punkt-css": "^14.0.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -103,5 +103,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "ac304ed1adafb9567490e5b9a8d550712f4e68f1"
+  "gitHead": "65ed905c2410ac9ea347ede2e54a59b2fb1417cc"
 }

package/src/components/header/Header.test.tsx

@@ -3,15 +3,31 @@ import '@testing-library/jest-dom'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { axe, toHaveNoViolations } from 'jest-axe'
 import React from 'react'
+import { vi } from 'vitest'
 
 import { PktHeader } from './Header'
 
 expect.extend(toHaveNoViolations)
 
+// Mock useWindowWidth hook to control viewport size
+let mockedWidth = 1400
+vi.mock('../../hooks/useWindowWidth', () => ({
+  useWindowWidth: () => mockedWidth,
+}))
+
 describe('PktHeader', () => {
+  beforeAll(() => {
+    // jsdom does not implement scrollTo; our scroll lock hook uses it
+    window.scrollTo = vi.fn()
+  })
+
+  beforeEach(() => {
+    mockedWidth = 1400 // Reset to desktop by default
+    vi.clearAllMocks()
+  })
+
   const mockUser = {
     name: 'John Doe',
-    shortname: 'JD',
     lastLoggedIn: '2023-08-20T12:34:56Z',
   }
 
@@ -22,59 +38,49 @@ describe('PktHeader', () => {
 
   const mockRepresenting = {
     name: 'Org Name',
-    shortname: 'ON',
     orgNumber: '123456789',
   }
 
-  const mockUserMenuFooter = [{ title: 'Help', target: '/help' }]
-
-  it('renders header with default props', () => {
-    render(<PktHeader />)
-    // Add assertions to check the presence of certain elements or classes
-    expect(screen.getByTestId('pkt-header')).toBeInTheDocument()
+  it('renders header with service name', () => {
+    const { container } = render(<PktHeader serviceName="Test Service" />)
+    expect(container.querySelector('.pkt-header-service')).toBeInTheDocument()
+    expect(screen.getByText('Test Service')).toBeInTheDocument()
   })
 
   it('renders user menu when user is present', () => {
-    render(<PktHeader user={mockUser} userMenu={mockUserMenu} />)
-    const userButton = screen.getByRole('button', { name: 'John Doe JD' })
+    render(<PktHeader serviceName="Test" user={mockUser} userMenu={mockUserMenu} />)
+    const userButton = screen.getByRole('button', { name: /John Doe/ })
     fireEvent.click(userButton)
-    // Add assertions to check if user menu items are displayed
     expect(screen.getByText('Profile')).toBeInTheDocument()
     expect(screen.getByText('Settings')).toBeInTheDocument()
   })
 
   it('renders representing organization when representing is present', () => {
-    render(<PktHeader representing={mockRepresenting} />)
-    // Add assertions to check if representing organization info is displayed
-    expect(screen.getAllByText('Org Name')[1]).toBeInTheDocument()
+    render(<PktHeader serviceName="Test" user={mockUser} representing={mockRepresenting} />)
+    const userButton = screen.getByRole('button', { name: /Org Name/ })
+    fireEvent.click(userButton)
     expect(screen.getByText('Org.nr. 123456789')).toBeInTheDocument()
   })
 
   it('calls logOut function when Log Out button is clicked', async () => {
-    const mockLogOut = jest.fn()
-    render(<PktHeader showLogOutButton logOut={mockLogOut} />)
-    await window.customElements.whenDefined('pkt-button')
+    const mockLogOut = vi.fn()
+    render(<PktHeader serviceName="Test" logOutButtonPlacement="header" logOut={mockLogOut} />)
     const logOutButton = screen.getByRole('button', { name: 'Logg ut' })
     await fireEvent.click(logOutButton)
     expect(mockLogOut).toHaveBeenCalled()
   })
 
   it('toggles user menu when user button is clicked', () => {
-    render(<PktHeader user={mockUser} userMenu={mockUserMenu} userMenuFooter={mockUserMenuFooter} />)
-    const userButton = screen.getByRole('button', { name: 'John Doe JD' })
+    render(<PktHeader serviceName="Test" user={mockUser} userMenu={mockUserMenu} />)
+    const userButton = screen.getByRole('button', { name: /John Doe/ })
     fireEvent.click(userButton)
-    // Add assertions to check if user menu is open
-    expect(screen.getByTestId('usermenu').classList.contains('pkt-header--open-dropdown')).toBe(true)
-    fireEvent.click(userButton)
-    // Add assertions to check if user menu is closed
-    expect(screen.getByTestId('usermenu').classList.contains('pkt-header--open-dropdown')).toBe(false)
+    // User menu should be open - check for menu items
+    expect(screen.getByText('Profile')).toBeInTheDocument()
   })
 
   describe('accessibility', () => {
     it('renders with no wcag errors with axe', async () => {
-      const { container } = render(
-        <PktHeader user={mockUser} userMenu={mockUserMenu} userMenuFooter={mockUserMenuFooter} />,
-      )
+      const { container } = render(<PktHeader serviceName="Test" user={mockUser} userMenu={mockUserMenu} />)
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })

package/src/components/header/Header.tsx

@@ -1,344 +1,25 @@
 'use client'
 
-import classNames from 'classnames'
-import React, { ForwardedRef, forwardRef, HTMLAttributes } from 'react'
-
-import { PktButton } from '../button/Button'
-import { PktIcon } from '../icon/Icon'
-
-export interface User {
-  name?: string
-  shortname?: string
-  lastLoggedIn?: string | Date
-}
-
-export interface UserMenuItem {
-  iconName?: string
-  title: string
-  target: string | (() => void)
-}
-
-export interface Representing {
-  name?: string
-  shortname?: string
-  orgNumber?: string | number
-}
-
-export interface UserMenuFooterItem {
-  title: string
-  target: string | (() => void)
-}
-
-export interface IPktHeader extends HTMLAttributes<HTMLDivElement> {
-  logoLink?: string | (() => void)
-  serviceName?: string
-  fixed?: boolean
-  scrollToHide?: boolean
-  user?: User
-  userMenu?: UserMenuItem[]
-  representing?: Representing
-  userOptions?: UserMenuItem[]
-  userMenuFooter?: UserMenuFooterItem[]
-  canChangeRepresentation?: boolean
-  showMenuButton?: boolean
-  showLogOutButton?: boolean
-  openMenu?: () => void
-  logOut?: () => void
-  changeRepresentation?: () => void
-  children?: React.ReactNode | React.ReactNode[]
-}
-
-export const PktHeader = forwardRef(
-  (
-    {
-      className,
-      logoLink = 'https://www.oslo.kommune.no/',
-      serviceName,
-      fixed = true,
-      scrollToHide = true,
-      user,
-      userMenu,
-      representing,
-      userOptions,
-      userMenuFooter,
-      canChangeRepresentation = true,
-      showMenuButton = false,
-      showLogOutButton = false,
-      openMenu,
-      logOut,
-      changeRepresentation,
-      children,
-      ...props
-    }: IPktHeader,
-    ref: ForwardedRef<HTMLDivElement>,
-  ) => {
-    const lastLoggedIn = React.useMemo(() => {
-      if (typeof user?.lastLoggedIn === 'string') {
-        return user.lastLoggedIn
-      }
-      return user?.lastLoggedIn
-        ? new Date(user.lastLoggedIn).toLocaleString('nb-NO', {
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric',
-          })
-        : ''
-    }, [user])
-
-    const [hidden, setHidden] = React.useState(false)
-    const [lastScrollPosition, setLastScrollPosition] = React.useState(0)
-    const [userMenuOpen, setUserMenuOpen] = React.useState(false)
-
-    const userMenuRef = React.useRef<HTMLLIElement>(null)
-
-    React.useEffect(() => {
-      if (document) {
-        document.addEventListener('mouseup', clickOutside)
-        window.addEventListener('scroll', onScroll)
-      }
-      return () => {
-        if (document) {
-          document.removeEventListener('mouseup', clickOutside)
-          window.removeEventListener('scroll', onScroll)
-        }
-      }
-    })
-
-    const openUserMenu = () => {
-      setUserMenuOpen(!userMenuOpen)
-    }
-
-    const clickOutside = (e: MouseEvent) => {
-      if (userMenuRef.current && !userMenuRef.current.contains(e.target as HTMLElement)) {
-        setUserMenuOpen(false)
-      }
-    }
-
-    const onScroll = () => {
-      if (scrollToHide) {
-        const currentScrollPosition = window.pageYOffset || document.documentElement.scrollTop
-        if (currentScrollPosition < 0) {
-          return
-        }
-        if (Math.abs(currentScrollPosition - lastScrollPosition) < 60) {
-          return
-        }
-        setHidden(currentScrollPosition > lastScrollPosition)
-        setLastScrollPosition(currentScrollPosition)
-      }
-    }
-
-    return (
-      <header
-        {...props}
-        id="pkt-header"
-        data-testid="pkt-header"
-        aria-label="Topp"
-        className={classNames(className, 'pkt-header', {
-          'pkt-header--fixed': fixed,
-          'pkt-header--scroll-to-hide': scrollToHide,
-          'pkt-header--hidden': hidden,
-        })}
-        ref={ref}
-      >
-        <div className="pkt-header__logo">
-          {typeof logoLink === 'string' ? (
-            <a aria-label="Tilbake til forside" className="pkt-header__logo-link" href={logoLink}>
-              <PktIcon
-                name="oslologo"
-                className="pkt-header__logo-svg"
-                aria-hidden="true"
-                path="https://punkt-cdn.oslo.kommune.no/latest/logos/"
-              ></PktIcon>
-            </a>
-          ) : (
-            <button
-              aria-label="Tilbake til forside"
-              className="pkt-link-button pkt-link pkt-header__logo-link"
-              onClick={logoLink}
-            >
-              <PktIcon
-                name="oslologo"
-                className="pkt-header__logo-svg"
-                aria-hidden="true"
-                path="https://punkt-cdn.oslo.kommune.no/latest/logos/"
-              ></PktIcon>
-            </button>
-          )}
-          <span className="pkt-header__logo-service" translate="no">
-            {serviceName}
-          </span>
-        </div>
-        <nav className="pkt-header__actions">
-          <ul className="pkt-header__actions-row">
-            {showMenuButton && (
-              <li>
-                <PktButton
-                  className="pkt-header__menu-btn"
-                  skin="secondary"
-                  variant="icon-right"
-                  iconName="menu"
-                  onClick={openMenu}
-                >
-                  Meny
-                </PktButton>
-              </li>
-            )}
-            {(user || representing) && (
-              <li
-                data-testid="usermenu"
-                className={`pkt-header--has-dropdown ${userMenuOpen && !hidden ? 'pkt-header--open-dropdown' : ''}`}
-                ref={userMenuRef}
-              >
-                <button
-                  className="pkt-header__user-btn pkt-btn pkt-btn--secondary pkt-btn--icons-right-and-left"
-                  type="button"
-                  role="button"
-                  aria-controls="pktUserDropdown"
-                  aria-expanded={userMenuOpen}
-                  onClick={openUserMenu}
-                >
-                  <PktIcon name="user" className="pkt-btn__icon" />
-                  <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>
-                <ul id="pktUserDropdown" className="pkt-header__dropdown pkt-user-menu">
-                  {user && (
-                    <li>
-                      <div className="pkt-user-menu__label">Pålogget som</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>
-                        </div>
-                      )}
-                    </li>
-                  )}
-                  {userMenu && (
-                    <li>
-                      <ul className="pkt-list">
-                        {userMenu.map((item, index) => (
-                          <li key={`userMenu-${index}`}>
-                            {typeof item.target === 'string' ? (
-                              <a href={item.target} className="pkt-link">
-                                {item.iconName && <PktIcon name={item.iconName} className="pkt-link__icon" />}
-                                {item.title}
-                              </a>
-                            ) : (
-                              <button className="pkt-link-button pkt-link" onClick={item.target}>
-                                {item.iconName && <PktIcon name={item.iconName} className="pkt-link__icon" />}
-                                {item.title}
-                              </button>
-                            )}
-                          </li>
-                        ))}
-                      </ul>
-                    </li>
-                  )}
-                  {(representing || canChangeRepresentation) && (
-                    <li>
-                      {representing && (
-                        <>
-                          <div className="pkt-user-menu__label">Representerer</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>
-                          )}
-                        </>
-                      )}
-                      <ul className="pkt-list mt-size-16">
-                        {canChangeRepresentation && (
-                          <li>
-                            <button className="pkt-link-button pkt-link" onClick={changeRepresentation}>
-                              <PktIcon name="cogwheel" className="pkt-link__icon" />
-                              Endre organisasjon
-                            </button>
-                          </li>
-                        )}
-                      </ul>
-                    </li>
-                  )}
-                  <li>
-                    <ul className="pkt-list">
-                      {(userOptions || !showLogOutButton) && (
-                        <>
-                          {userOptions?.map((item, index) => (
-                            <li key={`userOptions-${index}`}>
-                              {typeof item.target === 'string' ? (
-                                <a href={item.target} className="pkt-link">
-                                  {item.iconName && <PktIcon name={item.iconName} className="pkt-link__icon" />}
-                                  {item.title}
-                                </a>
-                              ) : (
-                                <button className="pkt-link-button pkt-link" onClick={item.target}>
-                                  {item.iconName && <PktIcon name={item.iconName} className="pkt-link__icon" />}
-                                  {item.title}
-                                </button>
-                              )}
-                            </li>
-                          ))}
-                          {!showLogOutButton && (
-                            <li>
-                              <button className="pkt-link-button pkt-link" onClick={logOut}>
-                                <PktIcon name="exit" className="pkt-link__icon" />
-                                Logg ut
-                              </button>
-                            </li>
-                          )}
-                        </>
-                      )}
-                    </ul>
-                  </li>
-                  {userMenuFooter && (
-                    <li className="footer">
-                      <ul className="pkt-list-horizontal bordered">
-                        {userMenuFooter.map((item, index) => (
-                          <li key={`userMenuFooter-${index}`}>
-                            {typeof item.target === 'string' ? (
-                              <a href={item.target} className="pkt-link">
-                                {item.title}
-                              </a>
-                            ) : (
-                              <button className="pkt-link-button pkt-link" onClick={item.target}>
-                                {item.title}
-                              </button>
-                            )}
-                          </li>
-                        ))}
-                      </ul>
-                    </li>
-                  )}
-                </ul>
-              </li>
-            )}
-            {children && <li>{children}</li>}
-            {showLogOutButton && (
-              <li>
-                <PktButton
-                  className="pkt-header__user-btn pkt-header__user-btn-logout"
-                  iconName="exit"
-                  role="button"
-                  onClick={logOut}
-                  skin="secondary"
-                  variant="icon-right"
-                >
-                  Logg ut
-                </PktButton>
-              </li>
-            )}
-          </ul>
-        </nav>
-      </header>
-    )
-  },
-)
+import { ForwardedRef, forwardRef } from 'react'
+import { PktHeaderService } from './HeaderService'
+import { IPktHeader } from './types'
+
+export * from './types'
+
+/**
+ * PktHeader - Main header component for Oslo kommune services
+ *
+ * This component provides a complete header solution with:
+ * - Logo and service name
+ * - User menu with login/logout functionality
+ * - Search functionality
+ * - Responsive mobile menu
+ * - Fixed positioning with scroll-to-hide
+ *
+ * TODO: Add `type` prop to switch between `service` and `global` header types
+ */
+export const PktHeader = forwardRef((props: IPktHeader, ref: ForwardedRef<HTMLDivElement>) => {
+  return <PktHeaderService {...props} ref={ref} />
+})
+
+PktHeader.displayName = 'PktHeader'