@oslokommune/punkt-react 16.16.2 → 16.17.1

package/dist/shared-types/header-menu.d.ts

@@ -0,0 +1,108 @@
+/**
+ * header-menu.ts
+ *
+ * Type definitions for the global header mega menu, shared between
+ * @oslokommune/punkt-elements and (eventually) @oslokommune/punkt-react.
+ *
+ * The shape mirrors the live API response from
+ * https://cdn.web.oslo.kommune.no/header-footer/header-footer.json
+ * which the legacy oslo.kommune.no header consumes.
+ */
+/**
+ * Locale keys present in the live payload. Typed as a string union with a
+ * `string & {}` escape hatch so additional locales can be added without
+ * a type-level breaking change.
+ */
+export type THeaderMenuLocale = 'nb-NO' | 'en-GB' | (string & {});
+/** Plain link without an icon. */
+export interface IHeaderMenuLink {
+    text: string;
+    url: string;
+}
+/**
+ * Link with an icon name. The icon name is the raw value from the API
+ * (legacy ODS naming) and gets mapped to a Punkt icon name inside the
+ * component via `mapOdsIcon`.
+ *
+ * `IconType` is generic so the Elements package can narrow it to
+ * `PktIconName` while shared code keeps it as `string`.
+ */
+export interface IHeaderMenuIconLink<IconType = string> extends IHeaderMenuLink {
+    icon: IconType;
+}
+/** CTA button at the top of the menu (e.g. "Min side"). */
+export interface IHeaderMenuButton<IconType = string> extends IHeaderMenuLink {
+    iconName?: IconType;
+}
+/** Featured services grid: a heading and 1–N icon-prefixed links. */
+export interface IHeaderMenuServices<IconType = string> {
+    title: string;
+    links: IHeaderMenuIconLink<IconType>[];
+}
+/** Categorised column section: a heading and a flat list of links. */
+export interface IHeaderMenuSection {
+    title: string;
+    links: IHeaderMenuLink[];
+}
+/** The `megamenu` slice of the API payload. */
+export interface IMegaMenu<IconType = string> {
+    buttons?: IHeaderMenuButton<IconType>[];
+    services: IHeaderMenuServices<IconType>;
+    sections: IHeaderMenuSection[];
+    links: IHeaderMenuLink[];
+    some: IHeaderMenuLink[];
+}
+/** The `footer` slice — kept here so consumers can reuse one fetch for both. */
+export interface IHeaderFooter {
+    sections: IHeaderMenuSection[];
+    links: IHeaderMenuLink[];
+    some: IHeaderMenuLink[];
+}
+/** Per-locale slice of the API response. */
+export interface IHeaderFooterLocaleData<IconType = string> {
+    megamenu: IMegaMenu<IconType>;
+    footer: IHeaderFooter;
+    header?: {
+        contact: IHeaderMenuLink;
+    };
+    search?: {
+        input: {
+            id: string;
+            name: string;
+            placeholder: string;
+            autocomplete?: string;
+        };
+        texts: Record<string, string>;
+        endpoint: string;
+        hiddenFields?: Array<{
+            name: string;
+            value: string;
+        }>;
+    };
+    i18n?: {
+        menu: string;
+        search: string;
+        navAriaLabel: string;
+    };
+}
+/** Top-level API response keyed by locale. */
+export type THeaderFooterApi<IconType = string> = Record<THeaderMenuLocale, IHeaderFooterLocaleData<IconType>>;
+/**
+ * Public props for the pkt-header-menu element / future React component.
+ * Fields are intentionally framework-agnostic — Elements adds Lit-specific
+ * pieces (Booleanish converters, etc.) on top.
+ */
+export interface IPktHeaderMenu<IconType = string> {
+    /** Endpoint to fetch the header/footer payload from. */
+    dataUrl?: string;
+    /** Pre-fetched payload. If supplied, the component skips its own fetch. */
+    data?: THeaderFooterApi<IconType>;
+    /** Locale key to select from the payload. Defaults to `nb-NO`. */
+    locale?: THeaderMenuLocale;
+    /** Whether the menu is visible. Controlled by the parent header. */
+    open?: boolean;
+    /** Pixel breakpoint below which sections collapse into accordions. */
+    mobileBreakpoint?: number;
+}
+/** Default URL of the live header/footer endpoint. */
+export declare const DEFAULT_HEADER_FOOTER_URL = "https://cdn.web.oslo.kommune.no/header-footer/header-footer.json";

package/dist/shared-types/index.d.ts

@@ -4,6 +4,8 @@ export type { TAriaBoolean, TAriaBooleanMixed, TAriaCurrent, TAriaHasPopup, TAri
 export type { THeadingLevel, THeadingSize, THeadingWeight } from './heading';
 export type { User, Representing, UserMenuItem, InternalMenuItemBase, InternalMenuLink, InternalMenuButton, TInternalMenuItem, TSlotMenuVariant, THeaderMenu, TLogOutButtonPlacement, THeaderPosition, THeaderScrollBehavior, } from './header';
 export { convertUserMenuItem } from './header';
+export type { THeaderMenuLocale, IHeaderMenuLink, IHeaderMenuIconLink, IHeaderMenuButton, IHeaderMenuServices, IHeaderMenuSection, IMegaMenu, IHeaderFooter, IHeaderFooterLocaleData, THeaderFooterApi, IPktHeaderMenu, } from './header-menu';
+export { DEFAULT_HEADER_FOOTER_URL } from './header-menu';
 export type { TLayout, TVerticalPosition, THorizontalPosition, TPosition, TPositionWithCenter, } from './layout';
 export type { THTMLButtonType, TSelectionMode } from './form';
 export type { TSize3, TSize5, TSize7 } from './size';

package/dist/shared-types/skin.d.ts

@@ -17,7 +17,7 @@ export type TMessageboxSkin = 'beige' | 'blue' | 'red' | 'green';
 /**
  * Accordion component skin variants
  */
-export type TAccordionSkin = 'borderless' | 'outlined' | 'beige' | 'blue';
+export type TAccordionSkin = 'borderless' | 'outlined' | 'beige' | 'blue' | 'plus-minus';
 /**
  * Card component skin variants
  */

package/dist/shared-utils/header-menu/example-data.d.ts

@@ -0,0 +1,11 @@
+import type { THeaderFooterApi } from '../../shared-types/header-menu';
+/**
+ * Example header/footer payload used by the dev/demo pages in both
+ * Punkt Elements and Punkt React. Mirrors the live Oslo kommune
+ * payload closely enough to exercise every region of the mega menu
+ * (services grid, four section columns, footer + social links).
+ *
+ * Tests use focused per-test fixtures with smaller shapes — this
+ * dataset is for visual demos only.
+ */
+export declare const EXAMPLE_HEADER_FOOTER_DATA: THeaderFooterApi;

package/dist/shared-utils/header-menu/fetch-header-footer-data.d.ts

@@ -0,0 +1,12 @@
+import { DEFAULT_HEADER_FOOTER_URL, type THeaderFooterApi } from '../../shared-types/header-menu';
+export { DEFAULT_HEADER_FOOTER_URL };
+/**
+ * Fetch and parse the Oslo kommune header/footer JSON payload.
+ *
+ * Throws on HTTP errors and on invalid JSON. The caller is responsible
+ * for surfacing or hiding errors — the Lit element, for example, hides
+ * the menu and dispatches a `data-error` event.
+ *
+ * `signal` lets callers abort the fetch when the component disconnects.
+ */
+export declare function fetchHeaderFooterData<IconType = string>(url?: string, signal?: AbortSignal): Promise<THeaderFooterApi<IconType>>;

package/dist/shared-utils/header-menu/icon-map.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Renames from legacy oslo.kommune.no design-system icon names ("ods")
+ * to current Punkt icon names. Only entries where the name actually
+ * changed are listed — `mapOdsIcon` returns the input unchanged for any
+ * name not in this map, so identity entries would just be noise.
+ */
+export declare const ICON_MAP_ODS_TO_PUNKT: Readonly<Record<string, string>>;
+/**
+ * Translate a legacy ODS icon name to a Punkt icon name. Falls back to
+ * the input string when no mapping exists, so unknown icons render as-is
+ * rather than blowing up.
+ */
+export declare function mapOdsIcon(name: string): string;
+/**
+ * Map of known social-media hostnames to Punkt icon names. Hostnames are
+ * stored without the `www.` / `m.` subdomain prefix — `deriveSocialIcon`
+ * normalises before looking up.
+ */
+export declare const SOCIAL_HOSTNAME_TO_ICON: Readonly<Record<string, string>>;
+/**
+ * The header/footer API ships social-media entries as `{ text, url }` only
+ * (no `icon` field). Resolve an icon name from the entry — preferring the
+ * URL's hostname because it's stable across locales (`facebook.com` is the
+ * same regardless of how the link is labelled).
+ *
+ * If the URL doesn't parse or its host isn't a known platform, fall back
+ * to deriving from the label: lower-case, slugify, run through
+ * `mapOdsIcon` so legacy spellings like "LinkedIn" / "linked-in" still
+ * resolve to `linkedin`.
+ *
+ * Returns `undefined` when neither input yields a usable icon — callers
+ * should then skip the icon rather than rendering a broken one.
+ */
+export declare function deriveSocialIcon(url?: string, text?: string): string | undefined;

package/dist/shared-utils/header-menu/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Header menu helper exports
+ *
+ * Shared between @oslokommune/punkt-elements and (later) @oslokommune/punkt-react
+ * so both implementations stay aligned with the live oslo.kommune.no
+ * header/footer API.
+ */
+export { ICON_MAP_ODS_TO_PUNKT, mapOdsIcon, deriveSocialIcon } from './icon-map';
+export { selectLocaleData, selectMegamenu } from './select-megamenu';
+export { DEFAULT_HEADER_FOOTER_URL, fetchHeaderFooterData, } from './fetch-header-footer-data';
+export { EXAMPLE_HEADER_FOOTER_DATA } from './example-data';

package/dist/shared-utils/header-menu/select-megamenu.d.ts

@@ -0,0 +1,16 @@
+import type { IHeaderFooterLocaleData, IMegaMenu, THeaderFooterApi, THeaderMenuLocale } from '../../shared-types/header-menu';
+/**
+ * Pick the locale slice from a header/footer payload. Falls back to
+ * `nb-NO` when the requested locale is missing — the same fallback the
+ * legacy oslo.kommune.no header used.
+ *
+ * Returns `undefined` when the payload doesn't contain the fallback
+ * either (e.g. a malformed response). Callers should treat that as an
+ * error state.
+ */
+export declare function selectLocaleData<IconType = string>(api: THeaderFooterApi<IconType> | undefined, locale?: THeaderMenuLocale): IHeaderFooterLocaleData<IconType> | undefined;
+/**
+ * Convenience wrapper that returns the `megamenu` slice for the given
+ * locale.
+ */
+export declare function selectMegamenu<IconType = string>(api: THeaderFooterApi<IconType> | undefined, locale?: THeaderMenuLocale): IMegaMenu<IconType> | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "16.16.2",
+  "version": "16.17.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": "^16.16.1",
+    "@oslokommune/punkt-elements": "^16.17.0",
     "classnames": "^2.5.1",
     "prettier": "^3.3.3",
     "react-hook-form": "^7.53.0"
@@ -50,7 +50,7 @@
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.37.0",
     "@oslokommune/punkt-assets": "^16.16.1",
-    "@oslokommune/punkt-css": "^16.16.1",
+    "@oslokommune/punkt-css": "^16.17.1",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -109,5 +109,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "873a23e17fa2d2ee99297c6e763522f1ca059942"
+  "gitHead": "9c280105a8c6698188d458d289d56d8d5e6b8b86"
 }

package/src/components/accordion/AccordionItem.tsx

@@ -96,7 +96,26 @@ export const PktAccordionItem = forwardRef<HTMLDetailsElement, IPktAccordionItem
       >
         <summary className="pkt-accordion-item__title" id={`pkt-accordion-item-summary-${id}`}>
           {title}
-          <PktIcon name="chevron-thin-down" className="pkt-accordion-item__icon" aria-hidden="true" />
+          {skin === 'plus-minus' ? (
+            <>
+              <PktIcon
+                name="plus-sign"
+                className="pkt-accordion-item__icon pkt-accordion-item__icon--plus"
+                aria-hidden="true"
+              />
+              <PktIcon
+                name="minus-sign"
+                className="pkt-accordion-item__icon pkt-accordion-item__icon--minus"
+                aria-hidden="true"
+              />
+            </>
+          ) : (
+            <PktIcon
+              name="chevron-thin-down"
+              className="pkt-accordion-item__icon"
+              aria-hidden="true"
+            />
+          )}
         </summary>
         <div className="pkt-accordion-item__content" id={`pkt-accordion-item__content-${id}`} role="region">
           <div className="pkt-accordion-item__content-inner">{children}</div>

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

@@ -0,0 +1,199 @@
+import '@testing-library/jest-dom'
+
+import { render, waitFor } from '@testing-library/react'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import type { THeaderFooterApi } from 'shared-types'
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
+
+import { PktHeaderMenu } from './HeaderMenu'
+
+expect.extend(toHaveNoViolations)
+
+const LOCAL_DATA: THeaderFooterApi = {
+  'nb-NO': {
+    megamenu: {
+      buttons: [{ text: 'Min side', url: 'https://www.oslo.kommune.no/min-side/' }],
+      services: {
+        title: 'Tjenester og tilbud',
+        links: [
+          { icon: '24h', text: 'Døgnåpne tjenester', url: 'https://example.test/24h' },
+          { icon: 'fire-emblem', text: 'Brannvern', url: 'https://example.test/brannvern' },
+          { icon: 'unknown-icon', text: 'Ukjent', url: 'https://example.test/ukjent' },
+        ],
+      },
+      sections: [
+        {
+          title: 'Oslo vokser',
+          links: [{ text: 'Byutvikling', url: 'https://example.test/byutvikling' }],
+        },
+        {
+          title: 'Politikk og innsyn',
+          links: [{ text: 'Politikk', url: 'https://example.test/politikk' }],
+        },
+      ],
+      links: [
+        { text: 'Kontakt', url: 'https://example.test/kontakt' },
+        { text: 'English', url: 'https://example.test/english' },
+      ],
+      some: [
+        { text: 'Facebook', url: 'https://www.facebook.com/Oslo/' },
+        { text: 'LinkedIn', url: 'https://www.linkedin.com/company/oslo-kommune' },
+      ],
+    },
+    footer: { sections: [], links: [], some: [] },
+    i18n: { menu: 'Meny', search: 'Søk', navAriaLabel: 'Oslo kommune hovedmeny' },
+  },
+  'en-GB': {
+    megamenu: {
+      services: {
+        title: 'Services and information',
+        links: [{ icon: '24h', text: '24h', url: 'https://example.test/en/24h' }],
+      },
+      sections: [],
+      links: [],
+      some: [],
+    },
+    footer: { sections: [], links: [], some: [] },
+    i18n: { menu: 'Menu', search: 'Search', navAriaLabel: 'Oslo kommune main menu' },
+  },
+}
+
+afterEach(() => {
+  vi.restoreAllMocks()
+})
+
+describe('PktHeaderMenu rendering', () => {
+  test('renders services, sections and footer when given pre-fetched data', () => {
+    const { container } = render(<PktHeaderMenu data={LOCAL_DATA} open />)
+    expect(container.querySelector('.pkt-header-menu__services-title')?.textContent).toContain(
+      'Tjenester og tilbud',
+    )
+    expect(container.querySelectorAll('.pkt-header-menu__service')).toHaveLength(3)
+    expect(container.querySelectorAll('.pkt-header-menu__section')).toHaveLength(2)
+    expect(container.querySelectorAll('.pkt-header-menu__footer-link')).toHaveLength(2)
+  })
+
+  test('does not fetch when data prop is supplied', () => {
+    const fetchSpy = vi.spyOn(globalThis, 'fetch').mockRejectedValue(new Error('should not run'))
+    render(<PktHeaderMenu data={LOCAL_DATA} open />)
+    expect(fetchSpy).not.toHaveBeenCalled()
+  })
+
+  test('maps ODS icon names on service links', async () => {
+    const { container } = render(<PktHeaderMenu data={LOCAL_DATA} open />)
+    await window.customElements.whenDefined('pkt-icon')
+    const icons = container.querySelectorAll<HTMLElement>('.pkt-header-menu__service-icon')
+    await waitFor(() => expect(icons[0]).toHaveAttribute('name', '24h'))
+    expect(icons[1]).toHaveAttribute('name', 'shield-fire')
+    // Unmapped passes through
+    expect(icons[2]).toHaveAttribute('name', 'unknown-icon')
+  })
+
+  test('reflects the open prop to a host class', () => {
+    const { container, rerender } = render(<PktHeaderMenu data={LOCAL_DATA} open />)
+    const root = container.firstChild as HTMLElement
+    expect(root).toHaveClass('pkt-header-menu')
+    expect(root).toHaveClass('pkt-header-menu--open')
+    rerender(<PktHeaderMenu data={LOCAL_DATA} open={false} />)
+    expect(root).not.toHaveClass('pkt-header-menu--open')
+  })
+
+  test('uses the locale-specific nav aria-label', () => {
+    const { container } = render(<PktHeaderMenu data={LOCAL_DATA} locale="nb-NO" open />)
+    expect(container.querySelector('nav')?.getAttribute('aria-label')).toBe(
+      'Oslo kommune hovedmeny',
+    )
+  })
+
+  test('switches content when locale changes', () => {
+    const { container, rerender } = render(
+      <PktHeaderMenu data={LOCAL_DATA} locale="nb-NO" open />,
+    )
+    expect(container.querySelector('.pkt-header-menu__services-title')?.textContent).toContain(
+      'Tjenester og tilbud',
+    )
+    rerender(<PktHeaderMenu data={LOCAL_DATA} locale="en-GB" open />)
+    expect(container.querySelector('.pkt-header-menu__services-title')?.textContent).toContain(
+      'Services and information',
+    )
+    expect(container.querySelector('nav')?.getAttribute('aria-label')).toBe(
+      'Oslo kommune main menu',
+    )
+  })
+
+  test('renders social links with derived aria-labels and icons', async () => {
+    const { container } = render(<PktHeaderMenu data={LOCAL_DATA} open />)
+    await window.customElements.whenDefined('pkt-icon')
+    const social = container.querySelectorAll<HTMLElement>('.pkt-header-menu__social-link')
+    expect(social).toHaveLength(2)
+    expect(social[0]).toHaveAttribute('aria-label', 'Facebook')
+    expect(social[1]).toHaveAttribute('aria-label', 'LinkedIn')
+    await waitFor(() =>
+      expect(social[0].querySelector('pkt-icon')).toHaveAttribute('name', 'facebook'),
+    )
+    expect(social[1].querySelector('pkt-icon')).toHaveAttribute('name', 'linkedin')
+  })
+
+  test('calls onDataLoaded with the supplied payload', async () => {
+    const onDataLoaded = vi.fn()
+    render(<PktHeaderMenu data={LOCAL_DATA} open onDataLoaded={onDataLoaded} />)
+    await waitFor(() => expect(onDataLoaded).toHaveBeenCalledWith(LOCAL_DATA))
+  })
+})
+
+describe('PktHeaderMenu fetching', () => {
+  beforeEach(() => {
+    vi.spyOn(globalThis, 'fetch').mockImplementation(() =>
+      Promise.resolve(
+        new Response(JSON.stringify(LOCAL_DATA), {
+          status: 200,
+          headers: { 'Content-Type': 'application/json' },
+        }),
+      ),
+    )
+  })
+
+  test('fetches the default URL on mount when no data is supplied', async () => {
+    const { container } = render(<PktHeaderMenu open />)
+    await waitFor(() => expect(globalThis.fetch).toHaveBeenCalled())
+    expect(globalThis.fetch).toHaveBeenCalledWith(
+      'https://cdn.web.oslo.kommune.no/header-footer/header-footer.json',
+      expect.any(Object),
+    )
+    await waitFor(() =>
+      expect(container.querySelector('.pkt-header-menu__services-title')?.textContent).toContain(
+        'Tjenester og tilbud',
+      ),
+    )
+  })
+
+  test('honors a custom data-url', async () => {
+    render(<PktHeaderMenu dataUrl="https://custom.test/payload.json" open />)
+    await waitFor(() =>
+      expect(globalThis.fetch).toHaveBeenCalledWith(
+        'https://custom.test/payload.json',
+        expect.any(Object),
+      ),
+    )
+  })
+
+  test('calls onDataError when the fetch fails', async () => {
+    vi.restoreAllMocks()
+    vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+      new Response('boom', { status: 500 }) as unknown as Response,
+    )
+    const onDataError = vi.fn()
+    const { container } = render(<PktHeaderMenu open onDataError={onDataError} />)
+    await waitFor(() => expect(onDataError).toHaveBeenCalledTimes(1))
+    expect((onDataError.mock.calls[0][0] as Error).message).toMatch(/HTTP 500/)
+    expect(container.querySelector('.pkt-header-menu__error')).not.toBeNull()
+  })
+})
+
+describe('PktHeaderMenu accessibility', () => {
+  test('has no axe violations with the local-data payload', async () => {
+    const { container } = render(<PktHeaderMenu data={LOCAL_DATA} open />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+})