@oslokommune/punkt-react 13.22.0 → 14.0.0

package/src/components/headerUserMenu/UserMenu.tsx

@@ -0,0 +1,173 @@
+'use client'
+
+import { ForwardedRef, forwardRef } from 'react'
+import { PktIcon } from '../icon/Icon'
+import { PktLink } from '../link/Link'
+import { User, Representing, UserMenuItem } from '../header/types'
+import classNames from 'classnames'
+
+// Internal type for rendering links/buttons (supports both href and onClick)
+interface IInternalMenuItemBase {
+  title: string
+  iconName?: string
+}
+
+interface InternalMenuLink extends IInternalMenuItemBase {
+  href: string
+}
+
+interface InternalMenuButton extends IInternalMenuItemBase {
+  onClick: () => void
+}
+
+type TInternalMenuItem = InternalMenuLink | InternalMenuButton
+
+// Helper to convert UserMenuItem (with target) to internal format
+const convertUserMenuItem = (item: UserMenuItem): TInternalMenuItem => {
+  if (typeof item.target === 'string') {
+    return { title: item.title, iconName: item.iconName, href: item.target }
+  }
+  return { title: item.title, iconName: item.iconName, onClick: item.target }
+}
+
+export interface IPktHeaderUserMenu {
+  user: User
+  formattedLastLoggedIn?: string
+  representing?: Representing
+  userMenu?: UserMenuItem[]
+  canChangeRepresentation?: boolean
+  changeRepresentation?: () => void
+  logoutOnClick?: () => void
+}
+
+const LinkOrButtonComponent = ({ item, className }: { item: TInternalMenuItem; className?: string }) => {
+  const isLink = 'href' in item
+
+  return isLink ? (
+    <PktLink
+      iconName={item.iconName}
+      href={item.href}
+      aria-hidden="true"
+      className={classNames('pkt-user-menu__link', className)}
+    >
+      {item.title}
+    </PktLink>
+  ) : (
+    <button
+      className={classNames('pkt-user-menu__link pkt-link-button pkt-link pkt-link--icon-left', className)}
+      type="button"
+      onClick={() => {
+        if ('onClick' in item && typeof item.onClick === 'function') {
+          item.onClick()
+        } else {
+          console.error('UserMenuButton item is missing onClick handler or onClick is not a function:', item)
+        }
+      }}
+    >
+      {item.iconName && <PktIcon name={item.iconName} className="pkt-link__icon" aria-hidden="true" />}
+      {item.title}
+    </button>
+  )
+}
+
+const LinkSection = ({ links }: { links: TInternalMenuItem[] }) => {
+  return (
+    <ul className="pkt-user-menu__sublist">
+      {links.map((item, index) => {
+        return (
+          <li key={index} className="pkt-user-menu__subitem">
+            <LinkOrButtonComponent item={item} />
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+
+export const PktHeaderUserMenu = forwardRef(
+  (
+    {
+      user,
+      formattedLastLoggedIn,
+      representing,
+      userMenu,
+      canChangeRepresentation,
+      changeRepresentation,
+      logoutOnClick,
+    }: IPktHeaderUserMenu,
+    ref: ForwardedRef<HTMLDivElement>,
+  ) => {
+    // Convert userMenu items to internal format
+    const internalMenuItems = userMenu?.map(convertUserMenuItem)
+
+    return (
+      <nav className="pkt-user-menu" ref={ref} aria-label="Meny for innlogget bruker">
+        <ul className="pkt-user-menu__list">
+          {/* User section */}
+          {user && (
+            <li className="pkt-user-menu__item">
+              <div className="pkt-user-menu__label">Pålogget som</div>
+              <div className="pkt-user-menu__name" translate="no">
+                {user.name}
+              </div>
+              {formattedLastLoggedIn && (
+                <div className="pkt-user-menu__last-logged-in">
+                  Sist pålogget: <time>{formattedLastLoggedIn}</time>
+                </div>
+              )}
+            </li>
+          )}
+
+          {/* User menu items */}
+          {internalMenuItems && internalMenuItems.length > 0 && (
+            <li className="pkt-user-menu__item">
+              <LinkSection links={internalMenuItems} />
+            </li>
+          )}
+
+          {/* Representing section */}
+          {representing && (
+            <li className="pkt-user-menu__item">
+              <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>
+              )}
+              {canChangeRepresentation && changeRepresentation && (
+                <ul className="pkt-user-menu__sublist mt-size-16">
+                  <li className="pkt-user-menu__subitem">
+                    <LinkOrButtonComponent
+                      item={{ title: 'Endre organisasjon', iconName: 'cogwheel', onClick: changeRepresentation }}
+                    />
+                  </li>
+                </ul>
+              )}
+            </li>
+          )}
+
+          {/* Change representation without representing object */}
+          {!representing && canChangeRepresentation && changeRepresentation && (
+            <li className="pkt-user-menu__item">
+              <ul className="pkt-user-menu__sublist">
+                <li className="pkt-user-menu__subitem">
+                  <LinkOrButtonComponent
+                    item={{ title: 'Endre organisasjon', iconName: 'cogwheel', onClick: changeRepresentation }}
+                  />
+                </li>
+              </ul>
+            </li>
+          )}
+
+          {/* Logout */}
+          {logoutOnClick && (
+            <li className="pkt-user-menu__item">
+              <LinkOrButtonComponent item={{ title: 'Logg ut', iconName: 'exit', onClick: logoutOnClick }} />
+            </li>
+          )}
+        </ul>
+      </nav>
+    )
+  },
+)

package/src/components/index.ts

@@ -12,6 +12,7 @@ export { PktDatepicker } from './datepicker/Datepicker'
 export { PktFooter } from './footer/Footer'
 export { PktFooterSimple } from './footerSimple/FooterSimple'
 export { PktHeader } from './header/Header'
+export { PktHeaderService } from './header/HeaderService'
 export { PktHeading } from './heading/Heading'
 export { PktHelptext } from './helptext/Helptext'
 export { PktIcon } from './icon/Icon'

package/src/components/interfaces.ts

@@ -11,6 +11,7 @@ export type { IPktDatepicker } from './datepicker/Datepicker'
 export type { IPktFooter } from './footer/Footer'
 export type { IPktFooterSimple } from './footerSimple/FooterSimple'
 export type { IPktHeader } from './header/Header'
+export type { IPktHeaderService } from './header/HeaderService'
 export type { IPktInputWrapper } from './inputwrapper/InputWrapper'
 export type { IPktLinkCard } from './linkcard/LinkCard'
 export type { IPktLoader } from './loader/Loader'