@oslokommune/punkt-react
Version:
React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo
96 lines (95 loc) • 4.03 kB
TypeScript
/**
* footer.ts
*
* Framework-agnostic prop types for the reworked footer components
* (`PktFooter` / `pkt-footer` and `PktFooterSimple` / `pkt-footer-simple`).
*
* Both components render an optional grey "secondary" band with the
* consumer's custom content, stacked on top of the global (blue) footer
* whose content comes from the same CDN payload as the global header —
* see `header-footer.ts`.
*/
import type { THeaderFooterApi, THeaderMenuLocale } from './header-footer';
/** Custom link in the secondary (grey) footer. */
export interface IPktFooterLink {
href: string;
text: string;
/**
* Mark the link as external: the link's top domain is shown in
* parentheses after the text ("Ledige stillinger (webcruiter.com)"),
* per Punkt's link-labelling guidance.
*/
external?: boolean;
openInNewTab?: boolean;
}
/** Column of custom content in the secondary footer (1–3 per footer). */
export interface IPktFooterColumn {
title: string;
/** Optional free-text paragraph shown above the links. */
text?: string;
links?: IPktFooterLink[];
}
/**
* @deprecated The social-media row now comes from the global footer's
* payload. Only rendered when explicitly supplied.
*/
export interface IPktFooterSocialLink {
href: string;
iconName?: string;
language?: string;
openInNewTab?: boolean;
}
/** Props shared by `PktFooter` and `PktFooterSimple` in both frameworks. */
export interface IPktFooterBase<IconType = string> {
/** Pre-fetched header/footer payload. If supplied, the component skips its own fetch. */
data?: THeaderFooterApi<IconType>;
/** Endpoint to fetch the header/footer payload from. */
dataUrl?: string;
/** Locale key to select from the payload. Defaults to `nb-NO`. */
locale?: THeaderMenuLocale;
/** Skip the global (blue) footer entirely, e.g. when CSP blocks the CDN. Default: false */
skipGlobal?: boolean;
/** Open custom links in a new tab. Applies to custom content only. Default: false */
openLinksInNewTab?: boolean;
/**
* Replace the payload's cookie-settings link (`#cb-trigger`) with
* Punkt's own consent dialog. When unset the cookie-settings link is
* hidden. Default: false
*/
includeConsent?: boolean;
hotjarId?: string | null;
googleAnalyticsId?: string | null;
devMode?: boolean;
cookieDomain?: string | null;
cookieSecure?: string | null;
cookieExpiryDays?: string | null;
}
export interface IPktFooterProps<IconType = string> extends IPktFooterBase<IconType> {
/** Custom content columns for the secondary (grey) footer. */
columns?: IPktFooterColumn[];
/** @deprecated Use `columns`. Mapped to the first entry of `columns`. */
columnOne?: IPktFooterColumn;
/** @deprecated Use `columns`. Mapped to the second entry of `columns`. */
columnTwo?: IPktFooterColumn;
/**
* @deprecated The privacy link now comes from the global footer's payload.
* Only rendered (in the secondary footer) when explicitly set to a
* non-default value.
*/
personvernOgInfoLink?: string;
/**
* @deprecated The accessibility link now comes from the global footer's
* payload. Only rendered (in the secondary footer) when explicitly set
* to a non-default value.
*/
tilgjengelighetLink?: string;
/** @deprecated The social-media row now comes from the global footer's payload. */
socialLinks?: IPktFooterSocialLink[];
}
export interface IPktFooterSimpleProps<IconType = string> extends IPktFooterBase<IconType> {
/** Custom links shown as a compact row in the secondary (grey) footer. */
links?: IPktFooterLink[];
}
/** Historical defaults for the deprecated link props — used to detect explicit overrides. */
export declare const DEFAULT_FOOTER_PERSONVERN_URL = "https://www.oslo.kommune.no/personvern-og-informasjonskapsler/";
export declare const DEFAULT_FOOTER_TILGJENGELIGHET_URL = "https://www.oslo.kommune.no/tilgjengelighet/";