@oslokommune/punkt-react
Version:
React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo
156 lines (155 loc) • 6.22 kB
TypeScript
/**
* header-footer.ts
*
* Type definitions for the global header/footer payload (mega menu,
* footer, search and contact), shared between @oslokommune/punkt-elements
* and @oslokommune/punkt-react.
*
* The shape mirrors the live API response from
* https://cdn.web.oslo.kommune.no/header-footer/header-footer.json
* which the "live" 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.
*/
import type { Representing, TLogOutButtonPlacement, THeaderPosition, THeaderScrollBehavior, User, UserMenuItem } from './header';
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;
}
/**
* Framework-agnostic props for the global (kommune-wide) header
* (`pkt-header-global` / `PktHeaderGlobal`). Elements narrows the
* boolean fields to `Booleanish` and React adds callback/className
* props on top — see each package's `header/types.ts`.
*/
export interface IPktHeaderGlobal<IconType = string> {
/** Endpoint to fetch the header/footer payload from. */
dataUrl?: string;
/** Pre-fetched payload. If supplied, the component (and its menu) skips its own fetch. */
data?: THeaderFooterApi<IconType>;
/** Locale key to select from the payload. Defaults to `nb-NO`. */
locale?: THeaderMenuLocale;
/** Logo link URL. When omitted the logo is rendered without a link. */
logoLink?: string;
/** Override the CDN path the logo assets load from. Can also be set
* globally via `window.pktLogoPath`. */
logoPath?: string;
/** Show the search field. Default: true */
showSearch?: boolean;
/** Placeholder for the search field. Falls back to the payload's search placeholder, then 'Søk'. */
searchPlaceholder?: string;
/** Show the contact link (from the payload's `header.contact`). Default: true */
showContact?: boolean;
/** User object for the logged-in user. When set, the user menu is shown. */
user?: User;
/** User menu items. */
userMenu?: UserMenuItem<IconType>[];
/** Representation object. */
representing?: Representing;
/** Allow the user to change representation. */
canChangeRepresentation?: boolean;
/** Logout button placement. */
logOutButtonPlacement?: TLogOutButtonPlacement;
/** Header position. Default: 'fixed' */
position?: THeaderPosition;
/** Scroll behavior. Default: 'hide' */
scrollBehavior?: THeaderScrollBehavior;
/** Width below which the header switches to mobile layout. Default: 768 */
mobileBreakpoint?: number;
/** Width below which the header switches to tablet layout. Default: 1024 */
tabletBreakpoint?: 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";
/** Default logo link for both header variants (unless overridden or hidden). */
export declare const DEFAULT_HEADER_LOGO_LINK = "https://www.oslo.kommune.no";