@oslokommune/punkt-react 16.16.2 → 16.17.0

package/src/components/header-menu/HeaderMenu.tsx

@@ -0,0 +1,305 @@
+'use client'
+
+import { type HTMLAttributes, type Ref, useEffect, useMemo, useRef, useState } from 'react'
+import {
+  DEFAULT_HEADER_FOOTER_URL,
+  type IHeaderMenuButton,
+  type IHeaderMenuLink,
+  type IHeaderMenuSection,
+  type IHeaderMenuServices,
+  type IPktHeaderMenu as ISharedPktHeaderMenu,
+  type THeaderFooterApi,
+  type THeaderMenuLocale,
+} from 'shared-types'
+import { deriveSocialIcon, fetchHeaderFooterData, mapOdsIcon, selectLocaleData } from 'shared-utils/header-menu'
+
+import { PktAccordion } from '../accordion/Accordion'
+import { PktAccordionItem } from '../accordion/AccordionItem'
+import { PktIcon } from '../icon/Icon'
+
+export type {
+  THeaderFooterApi,
+  THeaderMenuLocale,
+  IHeaderMenuLink,
+  IHeaderMenuButton,
+  IHeaderMenuSection,
+  IHeaderMenuServices,
+}
+
+export interface IPktHeaderMenu extends Omit<HTMLAttributes<HTMLElement>, 'onError'>, ISharedPktHeaderMenu {
+  /** Forwarded to the host element. */
+  ref?: Ref<HTMLElement>
+  /** Fired when the payload has been fetched (or `data` was supplied). */
+  onDataLoaded?: (data: THeaderFooterApi) => void
+  /** Fired when the fetch fails. */
+  onDataError?: (error: Error) => void
+  /** Optional id of the toggle button that controls this menu. */
+  ariaLabelledBy?: string
+}
+
+type LoadState = 'idle' | 'loading' | 'ready' | 'error'
+
+/**
+ * `<PktHeaderMenu>` — global mega menu for Oslo kommune.
+ *
+ * Fetches the live header/footer payload on mount and renders the
+ * `megamenu` slice for the current locale. Mirrors `pkt-header-menu`
+ * (Punkt Elements) — both implementations share types and data
+ * helpers from `shared-utils/header-menu`.
+ *
+ * This component is purely presentational with respect to focus/scroll-lock;
+ * the parent header is expected to control `open` and own focus
+ * management.
+ */
+export const PktHeaderMenu = ({
+  dataUrl = DEFAULT_HEADER_FOOTER_URL,
+  data,
+  locale = 'nb-NO',
+  open = false,
+  mobileBreakpoint = 768,
+  ariaLabelledBy,
+  className,
+  onDataLoaded,
+  onDataError,
+  ref,
+  ...rest
+}: IPktHeaderMenu) => {
+  const [loadState, setLoadState] = useState<LoadState>(data ? 'ready' : 'idle')
+  const [fetchedData, setFetchedData] = useState<THeaderFooterApi | undefined>(undefined)
+  const [isMobile, setIsMobile] = useState(false)
+
+  // Stable refs for the latest callbacks so effect deps stay narrow.
+  const onDataLoadedRef = useRef(onDataLoaded)
+  const onDataErrorRef = useRef(onDataError)
+  useEffect(() => {
+    onDataLoadedRef.current = onDataLoaded
+  }, [onDataLoaded])
+  useEffect(() => {
+    onDataErrorRef.current = onDataError
+  }, [onDataError])
+
+  // Track viewport width via matchMedia.
+  useEffect(() => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return
+    const query = window.matchMedia(`(max-width: ${mobileBreakpoint - 1}px)`)
+    setIsMobile(query.matches)
+    const handler = (event: MediaQueryListEvent) => setIsMobile(event.matches)
+    query.addEventListener('change', handler)
+    return () => query.removeEventListener('change', handler)
+  }, [mobileBreakpoint])
+
+  // When the supplied pre-fetched data, fire the loaded callback
+  // and short-circuit the network call.
+  useEffect(() => {
+    if (data) {
+      setLoadState('ready')
+      onDataLoadedRef.current?.(data)
+    }
+  }, [data])
+
+  // Fetch when no `data` prop is supplied.
+  useEffect(() => {
+    if (data) return
+    const controller = new AbortController()
+    setLoadState('loading')
+
+    fetchHeaderFooterData<string>(dataUrl, controller.signal)
+      .then((payload) => {
+        if (controller.signal.aborted) return
+        setFetchedData(payload)
+        setLoadState('ready')
+        onDataLoadedRef.current?.(payload)
+      })
+      .catch((error: Error) => {
+        if (error.name === 'AbortError') return
+        setLoadState('error')
+        onDataErrorRef.current?.(error)
+      })
+
+    return () => controller.abort()
+  }, [data, dataUrl])
+
+  const effectiveData = data ?? fetchedData
+  const localeData = useMemo(() => selectLocaleData(effectiveData, locale), [effectiveData, locale])
+
+  const hostClasses = ['pkt-header-menu', open && 'pkt-header-menu--open', className].filter(Boolean).join(' ')
+
+  if (loadState === 'loading') {
+    return (
+      <section {...rest} ref={ref} className={hostClasses}>
+        <nav aria-busy="true">
+          <p className="pkt-header-menu__loading">Laster meny…</p>
+        </nav>
+      </section>
+    )
+  }
+
+  if (loadState === 'error' || !localeData) {
+    return (
+      <section {...rest} ref={ref} className={hostClasses}>
+        <nav aria-hidden={!open}>
+          <p className="pkt-header-menu__error">Kunne ikke laste meny.</p>
+        </nav>
+      </section>
+    )
+  }
+
+  const { megamenu, i18n } = localeData
+  const navAriaLabel = i18n?.navAriaLabel || 'Hovedmeny'
+
+  return (
+    <section {...rest} ref={ref} className={hostClasses} aria-labelledby={ariaLabelledBy || undefined}>
+      <nav aria-label={navAriaLabel}>
+        {isMobile ? (
+          <MobileAccordion services={megamenu.services} sections={megamenu.sections} />
+        ) : (
+          <>
+            <Services services={megamenu.services} />
+            <Buttons buttons={megamenu.buttons} mobile={false} />
+            <Sections sections={megamenu.sections} />
+          </>
+        )}
+        <Buttons buttons={megamenu.buttons} mobile={true} />
+        <Footer links={megamenu.links} some={megamenu.some} />
+      </nav>
+    </section>
+  )
+}
+
+const ServicesList = ({ services }: { services: IHeaderMenuServices }) => (
+  <ul className="pkt-header-menu__services-list">
+    {services.links.map((link, index) => (
+      <li className="pkt-header-menu__service" key={`service-${index}`}>
+        <a className="pkt-header-menu__service-link" href={link.url}>
+          <PktIcon className="pkt-header-menu__service-icon" name={mapOdsIcon(link.icon)} aria-hidden="true" />
+          <span className="pkt-header-menu__service-text">{link.text}</span>
+        </a>
+      </li>
+    ))}
+  </ul>
+)
+
+const MobileAccordion = ({ services, sections }: { services: IHeaderMenuServices; sections: IHeaderMenuSection[] }) => (
+  <div className="pkt-header-menu__sections">
+    <PktAccordion className="pkt-header-menu__sections-inner" skin="plus-minus" name="header-menu-accordion">
+      <PktAccordionItem
+        className="pkt-header-menu__section"
+        skin="plus-minus"
+        id="pkt-header-menu-services"
+        title={services.title}
+      >
+        <ServicesList services={services} />
+      </PktAccordionItem>
+      {sections.map((section, index) => (
+        <PktAccordionItem
+          key={`section-${index}`}
+          className="pkt-header-menu__section"
+          skin="plus-minus"
+          id={`pkt-header-menu-section-${index}`}
+          title={section.title}
+        >
+          <SectionList links={section.links} />
+        </PktAccordionItem>
+      ))}
+    </PktAccordion>
+  </div>
+)
+
+const Services = ({ services }: { services: IHeaderMenuServices }) => (
+  <div className="pkt-header-menu__services">
+    <h2 className="pkt-header-menu__services-title">{services.title}</h2>
+    <ServicesList services={services} />
+  </div>
+)
+
+const Buttons = ({ buttons, mobile }: { buttons: IHeaderMenuButton[] | undefined; mobile: boolean }) => {
+  if (!buttons || buttons.length === 0) return null
+  const classes = ['pkt-header-menu__buttons', mobile && 'pkt-header-menu__buttons--mobile'].filter(Boolean).join(' ')
+  return (
+    <div className={classes}>
+      {buttons.map((button, index) => (
+        <a
+          key={`button-${index}`}
+          className="pkt-btn pkt-btn--secondary pkt-btn--icon-right pkt-btn--small"
+          href={button.url}
+        >
+          <PktIcon
+            className="pkt-btn__icon"
+            name={button.iconName ? mapOdsIcon(button.iconName) : 'user'}
+            aria-hidden="true"
+          />
+          <span className="pkt-btn__text">{button.text}</span>
+        </a>
+      ))}
+    </div>
+  )
+}
+
+const Sections = ({ sections }: { sections: IHeaderMenuSection[] }) => {
+  if (!sections || sections.length === 0) return null
+
+  return (
+    <div className="pkt-header-menu__sections">
+      <div className="pkt-header-menu__sections-inner">
+        {sections.map((section, index) => (
+          <div className="pkt-header-menu__section" key={`section-${index}`}>
+            <h2 className="pkt-header-menu__section-title">{section.title}</h2>
+            <SectionList links={section.links} />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+const SectionList = ({ links }: { links: IHeaderMenuLink[] }) => (
+  <ul className="pkt-header-menu__section-list">
+    {links.map((link, index) => (
+      <li key={`section-link-${index}`}>
+        <a className="pkt-header-menu__section-link" href={link.url}>
+          {link.text}
+        </a>
+      </li>
+    ))}
+  </ul>
+)
+
+const Footer = ({ links, some }: { links: IHeaderMenuLink[]; some: IHeaderMenuLink[] }) => {
+  const hasLinks = links && links.length > 0
+  const hasSome = some && some.length > 0
+  if (!hasLinks && !hasSome) return null
+
+  return (
+    <div className="pkt-header-menu__footer">
+      {hasLinks && (
+        <ul className="pkt-header-menu__footer-list">
+          {links.map((link, index) => (
+            <li key={`footer-link-${index}`}>
+              <a className="pkt-header-menu__footer-link" href={link.url}>
+                {link.text}
+              </a>
+            </li>
+          ))}
+        </ul>
+      )}
+      {hasSome && (
+        <ul className="pkt-header-menu__footer-list pkt-header-menu__footer-list--social">
+          {some.map((entry, index) => (
+            <SocialLink key={`some-${index}`} entry={entry} />
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+const SocialLink = ({ entry }: { entry: IHeaderMenuLink }) => {
+  const iconName = deriveSocialIcon(entry.url, entry.text)
+  return (
+    <li>
+      <a className="pkt-header-menu__social-link" href={entry.url} aria-label={entry.text}>
+        {iconName ? <PktIcon name={iconName} aria-hidden="true" /> : <span>{entry.text}</span>}
+      </a>
+    </li>
+  )
+}

package/src/components/index.ts

@@ -15,6 +15,7 @@ export { ItemRenderers } from './fileupload/QueueDisplay'
 export { PktFooter } from './footer/Footer'
 export { PktFooterSimple } from './footerSimple/FooterSimple'
 export { PktHeader } from './header/Header'
+export { PktHeaderMenu } from './header-menu/HeaderMenu'
 export { PktHeaderService } from './header/HeaderService'
 export { PktHeading } from './heading/Heading'
 export { PktHelptext } from './helptext/Helptext'

package/src/components/interfaces.ts

@@ -12,6 +12,7 @@ export type { IPktFileUpload } from './fileupload/FileUpload'
 export type { IPktFooter } from './footer/Footer'
 export type { IPktFooterSimple } from './footerSimple/FooterSimple'
 export type { IPktHeader } from './header/Header'
+export type { IPktHeaderMenu } from './header-menu/HeaderMenu'
 export type { IPktHeaderService } from './header/HeaderService'
 export type { IPktInputWrapper } from './inputwrapper/InputWrapper'
 export type { IPktLinkCard } from './linkcard/LinkCard'