@oslokommune/punkt-elements
Version:
Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo
109 lines (108 loc) • 3.88 kB
TypeScript
/**
* 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";