@oslokommune/punkt-react 14.2.0 → 14.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "14.2.0",
+  "version": "14.3.1",
   "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": "^14.2.0",
+    "@oslokommune/punkt-elements": "^14.3.0",
     "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-hook-form": "^7.53.0"
@@ -103,5 +103,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "47682b6620c3d10622e5121814954fa294996b9b"
+  "gitHead": "53803b9d2bfd31e286f7ee79b2184570a3e208cc"
 }

package/src/components/header/HeaderService.tsx

@@ -9,9 +9,9 @@ import { PktTextinput } from '../textinput/Textinput'
 import { useElementWidth } from '../../hooks/useElementWidth'
 import classNames from 'classnames'
 import { useScrollLock } from '../../hooks/useScrollLock'
-import { User, Representing, UserMenuItem, UserMenuFooterItem, IPktHeader, TPktHeaderServiceMenu } from './types'
+import { User, Representing, UserMenuItem, UserMenuFooterItem, IPktHeader, THeaderMenu } from './types'
 
-export type { User, Representing, UserMenuItem, UserMenuFooterItem, TPktHeaderServiceMenu }
+export type { User, Representing, UserMenuItem, UserMenuFooterItem, THeaderMenu }
 export type IPktHeaderService = IPktHeader
 
 export const PktHeaderService = forwardRef(
@@ -20,6 +20,7 @@ export const PktHeaderService = forwardRef(
       mobileBreakpoint = 768,
       tabletBreakpoint = 1280,
       children,
+      className,
       compact = false,
       'data-mode': dataMode,
       logOutButtonPlacement = 'none',
@@ -45,6 +46,8 @@ export const PktHeaderService = forwardRef(
       logoClick,
       position = 'fixed',
       scrollBehavior = 'hide',
+      slotMenuVariant = 'icon-only',
+      slotMenuText = 'Meny',
     }: IPktHeaderService,
     ref: ForwardedRef<HTMLDivElement>,
   ) => {
@@ -126,7 +129,7 @@ export const PktHeaderService = forwardRef(
 
     useScrollLock(isFixed && isMobile && openMenu !== 'none')
 
-    const handleFocusOut = useCallback((event: React.FocusEvent<HTMLDivElement>, menuType: TPktHeaderServiceMenu) => {
+    const handleFocusOut = useCallback((event: React.FocusEvent<HTMLDivElement>, menuType: THeaderMenu) => {
       const relatedTarget = event.relatedTarget as HTMLElement | null
 
       let containerRef: React.RefObject<HTMLDivElement>
@@ -246,7 +249,7 @@ export const PktHeaderService = forwardRef(
     )
 
     const handleMenuToggle = useCallback(
-      (mode: TPktHeaderServiceMenu) => {
+      (mode: THeaderMenu) => {
         if (openMenu !== 'none') {
           setOpenMenu('none')
         } else {
@@ -276,6 +279,7 @@ export const PktHeaderService = forwardRef(
           isFixed && 'pkt-header-service--fixed',
           shouldHideOnScroll && 'pkt-header-service--scroll-to-hide',
           hidden && 'pkt-header-service--hidden',
+          className,
         )}
         data-mode={dataMode}
         ref={setRefs}
@@ -343,7 +347,7 @@ export const PktHeaderService = forwardRef(
             {isTablet && children && (
               <PktButton
                 skin="secondary"
-                variant="icon-only"
+                variant={slotMenuVariant}
                 iconName="menu"
                 size={isMobile ? 'small' : 'medium'}
                 state={openMenu === 'slot' ? 'active' : 'normal'}
@@ -352,7 +356,7 @@ export const PktHeaderService = forwardRef(
                 aria-controls="mobile-slot-menu"
                 aria-label="Åpne meny"
               >
-                Meny
+                {slotMenuText}
               </PktButton>
             )}
             <div

package/src/components/header/types.ts

@@ -1,4 +1,19 @@
 import { TBreakpoint } from '../../types/breakpoint'
+import type {
+  TSlotMenuVariant,
+  THeaderMenu,
+  TLogOutButtonPlacement,
+  THeaderPosition,
+  THeaderScrollBehavior,
+} from 'shared-types'
+
+export type {
+  TSlotMenuVariant,
+  THeaderMenu,
+  TLogOutButtonPlacement,
+  THeaderPosition,
+  THeaderScrollBehavior,
+}
 
 /** User object for header components */
 export interface User {
@@ -29,10 +44,10 @@ export interface UserMenuFooterItem {
   target: string | (() => void)
 }
 
-export type TPktHeaderServiceMenu = 'none' | 'slot' | 'search' | 'user'
-
 export interface IPktHeader {
   children?: React.ReactNode
+  /** Additional CSS class name(s) to apply to the header */
+  className?: string
   /** Set dark mode on the header */
   'data-mode'?: 'dark'
   /** Hide the Oslo logo. Default: false (logo is shown) */
@@ -64,7 +79,7 @@ export interface IPktHeader {
   /** @deprecated userOptions is no longer available. Use userMenu instead. */
   userOptions?: UserMenuItem[]
   /** Where to show the logout button: 'userMenu', 'header', 'both', or 'none' */
-  logOutButtonPlacement?: 'userMenu' | 'header' | 'both' | 'none'
+  logOutButtonPlacement?: TLogOutButtonPlacement
   /** Callback when user clicks logout */
   logOut?: () => void
   /** Show search input in the header */
@@ -82,9 +97,13 @@ export interface IPktHeader {
   /** Custom breakpoint for tablet responsive behavior (interaction pattern) in pixels. Default: 1280 */
   tabletBreakpoint?: number
   /** Which menu is initially open */
-  openedMenu?: TPktHeaderServiceMenu
+  openedMenu?: THeaderMenu
   /** Header position. 'fixed' fixes to top of viewport, 'relative' follows document flow. Default: 'fixed' */
-  position?: 'fixed' | 'relative'
+  position?: THeaderPosition
   /** Scroll behavior. 'hide' hides header on scroll down, 'none' keeps it visible. Default: 'hide' */
-  scrollBehavior?: 'hide' | 'none'
+  scrollBehavior?: THeaderScrollBehavior
+  /** Variant for the slot menu button in tablet/mobile mode. Default: 'icon-only' */
+  slotMenuVariant?: TSlotMenuVariant
+  /** Text for the slot menu button in tablet/mobile mode. Default: 'Meny' */
+  slotMenuText?: string
 }