dibk-designsystemet 1.0.0-rc.1

package/dist/index.d.ts

@@ -0,0 +1,280 @@
+export * from '@digdir/designsystemet-react';
+import * as react from 'react';
+import { SVGProps, ComponentPropsWithoutRef, ReactNode, ElementType } from 'react';
+
+interface DibkLogoProps extends SVGProps<SVGSVGElement> {
+    /** "full" = roofline mark + wordmark; "mark" = roofline only. */
+    variant?: "full" | "mark";
+}
+/**
+ * DIBK brand mark. `full` renders the roofline mark + "Direktoratet for
+ * byggkvalitet" wordmark; `mark` renders the roofline only. Color is inherited
+ * via currentColor (navy by default; set color to recolor, e.g. white on navy).
+ */
+declare const DibkLogo: react.ForwardRefExoticComponent<Omit<DibkLogoProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+
+/** A highlighted shortcut shown in the top bar beside the menu toggle. */
+interface DibkHeaderShortcut {
+    label: string;
+    href: string;
+}
+interface DibkHeaderProps extends ComponentPropsWithoutRef<"header"> {
+    /** Whether the mega-menu is open (controls the Meny toggle state). */
+    menuOpen?: boolean;
+    onMenuToggle?: () => void;
+    /** id of the menu panel the Meny toggle controls (wired to aria-controls). */
+    menuPanelId?: string;
+    onSearchToggle?: () => void;
+    /**
+     * Render the "Søk" button. Defaults to true. Set false in apps whose search
+     * lives elsewhere (e.g. a page hero) so the header shows only "Meny".
+     */
+    search?: boolean;
+    /**
+     * Highlighted shortcut links rendered before Søk/Meny. On narrow viewports
+     * they collapse; reach them through the menu instead.
+     */
+    shortcuts?: DibkHeaderShortcut[];
+    /**
+     * Account/login control rendered rightmost in the bar, after Søk/Meny. Unlike
+     * shortcuts it does not collapse on narrow viewports, so sign-in state stays
+     * visible. The app owns the content (login button, avatar dropdown, ...).
+     */
+    account?: ReactNode;
+    /** Optional brand link target (logo href). */
+    homeHref?: string;
+    /**
+     * Component used to render the brand and shortcut links (receives `href`).
+     * Pass a router Link adapter for client-side navigation; defaults to `a`.
+     */
+    linkComponent?: ElementType;
+}
+/**
+ * DIBK top bar: roofline logo (linking home) on the left; an optional "Søk"
+ * button and the "Meny" (hamburger) toggle on the right. The toggle is a
+ * disclosure control for the menu panel: it swaps to
+ * "Lukk" + X while open and announces state via aria-expanded/aria-controls.
+ * Search and menu state are owned by the caller.
+ */
+declare const DibkHeader: react.ForwardRefExoticComponent<DibkHeaderProps & react.RefAttributes<HTMLElement>>;
+
+interface DibkMegaMenuProps extends ComponentPropsWithoutRef<"div"> {
+    open: boolean;
+    onClose: () => void;
+    /** Render the built-in search field (default true). Set false in apps whose
+     * search lives elsewhere, mirroring DibkHeader's `search`. */
+    search?: boolean;
+    /** Placeholder for the built-in search field (default "Søk"). */
+    searchPlaceholder?: string;
+    /** Fired when the built-in search field is submitted. */
+    onSearchSubmit?: (query: string) => void;
+    /** Optional hint line inside the search widget, under the field
+     * (e.g. "Søk etter f.eks. rekkverk eller bruksendring"). */
+    searchHint?: ReactNode;
+}
+/**
+ * DIBK navigation panel: a full-width disclosure that expands in document flow
+ * below the header: the page content is pushed down and the header stays
+ * visible. The header's Meny button owns the open state and
+ * references the panel via aria-expanded/aria-controls; this component renders
+ * the panel content: an optional large underline search field, then `children`
+ * (the caller owns the content layout). Escape closes the panel and hands
+ * focus back to the toggle.
+ */
+declare const DibkMegaMenu: react.ForwardRefExoticComponent<DibkMegaMenuProps & react.RefAttributes<HTMLDivElement>>;
+
+interface DibkIconLinkItem {
+    label: string;
+    href: string;
+    icon?: ReactNode;
+    description?: ReactNode;
+    /** Mark the item login-gated: renders a padlock after the label (with screen-reader text). */
+    locked?: boolean;
+}
+interface DibkIconLinkListProps extends ComponentPropsWithoutRef<"ul"> {
+    items: DibkIconLinkItem[];
+    /** Number of columns the list flows into. */
+    columns?: 1 | 2 | 3;
+    /** Render the chevron before each label (default true). Drop it where the
+     * list reads as a panel of shortcuts rather than a navigation list. */
+    chevron?: boolean;
+    /**
+     * Component used to render the item links (receives `href`). Pass a router
+     * Link adapter for client-side navigation; defaults to `a`.
+     */
+    linkComponent?: ElementType;
+}
+declare const DibkIconLinkList: react.ForwardRefExoticComponent<DibkIconLinkListProps & react.RefAttributes<HTMLUListElement>>;
+
+interface DibkMenuSectionProps extends Omit<ComponentPropsWithoutRef<"section">, "title"> {
+    /** Section heading (24px semibold navy beside a 40px icon). */
+    title: ReactNode;
+    /** Make the title itself a link (section titles point at landing pages). */
+    href?: string;
+    /** 40x40 illustration beside the title. */
+    icon?: ReactNode;
+    /** The section's links. */
+    items: DibkIconLinkItem[];
+    /**
+     * Component used to render the links (receives `href`). Pass a router Link
+     * adapter for client-side navigation; defaults to `a`.
+     */
+    linkComponent?: ElementType;
+}
+/**
+ * One section of the DIBK menu panel: an optional 40px
+ * icon + a title row, then an indented chevron-link list. Stack sections
+ * inside `.dibk-megamenu__column` wrappers for the two-column menu layout.
+ */
+declare const DibkMenuSection: react.ForwardRefExoticComponent<DibkMenuSectionProps & react.RefAttributes<HTMLElement>>;
+
+interface DibkSearchProps extends Omit<ComponentPropsWithoutRef<"form">, "onSubmit" | "onChange"> {
+    /** Placeholder text; also the input's accessible name. */
+    placeholder?: string;
+    /** Optional hint line under the field (e.g. example searches). */
+    hint?: ReactNode;
+    /** Controlled value. Omit (with onValueChange) for uncontrolled use. */
+    value?: string;
+    onValueChange?: (value: string) => void;
+    /** Fired with the query when the form submits (Enter or the magnifier). */
+    onSearch?: (query: string) => void;
+    /** Fired when the clear button empties the field. */
+    onClear?: () => void;
+    inputId?: string;
+}
+/**
+ * The DIBK search widget: an underline-only field with an inline
+ * magnifier, sitting in a quiet panel that turns white with a ring on
+ * hover/focus. Wraps Designsystemet's `Search` and renders its own `<form>`
+ * (DS `Search` is a plain div; Enter-to-submit needs a real form).
+ */
+declare const DibkSearch: react.ForwardRefExoticComponent<DibkSearchProps & react.RefAttributes<HTMLFormElement>>;
+
+interface DibkFooterProps extends ComponentPropsWithoutRef<"footer"> {
+    /** Optional app-specific content shown above the static bottom bar. */
+    children?: ReactNode;
+}
+/**
+ * The DIBK footer: an optional app-specific content area on top, then a static
+ * bottom bar carrying the standard legal links (left) and the brand mark (right).
+ */
+declare const DibkFooter: react.ForwardRefExoticComponent<DibkFooterProps & react.RefAttributes<HTMLElement>>;
+
+interface DibkSectionHeaderProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
+    title: ReactNode;
+    /** Large two-tone icon shown above/beside the title. */
+    icon?: ReactNode;
+    description?: ReactNode;
+}
+declare const DibkSectionHeader: react.ForwardRefExoticComponent<DibkSectionHeaderProps & react.RefAttributes<HTMLDivElement>>;
+
+interface DibkFeedbackWidgetProps extends ComponentPropsWithoutRef<"div"> {
+    /** Defaults to "Fant du det du lette etter?". */
+    question?: string;
+    onAnswer?: (answer: "ja" | "nei") => void;
+}
+declare const DibkFeedbackWidget: react.ForwardRefExoticComponent<DibkFeedbackWidgetProps & react.RefAttributes<HTMLDivElement>>;
+
+/** One menu section: title (+ optional icon/landing link) and its links. */
+type DibkMenuColumnSection = Pick<DibkMenuSectionProps, "title" | "href" | "icon" | "items">;
+interface DibkAppShellProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
+    /** App name shown beside the logo, with a subtle divider. */
+    title?: ReactNode;
+    /** Logo link target. */
+    homeHref?: string;
+    /** Render the header's "Søk" button (default true). */
+    search?: boolean;
+    /** Called when the header's Søk toggle is clicked. */
+    onSearchToggle?: () => void;
+    /** Highlighted shortcut links shown in the top bar beside the menu toggle. */
+    shortcuts?: DibkHeaderShortcut[];
+    /** Account/login control shown in the top bar (see DibkHeader's `account`). */
+    account?: ReactNode;
+    /** Mega-menu heading (default "Meny"). Visually hidden when `menuColumns` is
+     * used (the section titles carry the visual structure instead). */
+    menuHeading?: string;
+    /** Mega-menu navigation links, as a flat list under the menu heading. Ignored
+     * when `menuColumns` is provided. */
+    menuItems?: DibkIconLinkItem[];
+    /** Two-column menu layout: each column a stack of titled sections.
+     * Takes precedence over `menuItems`. */
+    menuColumns?: [DibkMenuColumnSection[], DibkMenuColumnSection[]];
+    /** Optional content below the menu links (e.g. an account/login row). */
+    menuExtra?: ReactNode;
+    /** Optional app-specific content shown above the footer's static bottom bar. */
+    footerContent?: ReactNode;
+    /**
+     * Component used for the header's brand/shortcut links and the menu items
+     * (receives `href`). Pass a router Link adapter for client-side navigation;
+     * defaults to `a`.
+     */
+    linkComponent?: ElementType;
+}
+/**
+ * The DIBK page frame: header (logo + app title + menu toggle), mega-menu,
+ * the routed content in the canonical container, and the footer. Owns the
+ * menu open/close state. The content sits in a `--dibk-container-max` container
+ * so it lines up edge-to-edge with the header and footer - apps don't manage
+ * their own page width.
+ */
+declare const DibkAppShell: react.ForwardRefExoticComponent<DibkAppShellProps & react.RefAttributes<HTMLDivElement>>;
+
+interface DibkAccountMenuProps extends Omit<ComponentPropsWithoutRef<"button">, "name" | "value"> {
+    /** The signed-in user's display name (drives the initials, heading and aria-label). */
+    name: string;
+    email?: string;
+    /** Role shown as a small tag under the email (e.g. "Redaktør"). */
+    roleLabel?: ReactNode;
+    /** Renders a "Logg ut" item that calls this. */
+    onLogout?: () => void;
+    /** Extra Dropdown.Item entries, listed before Logg ut. */
+    children?: ReactNode;
+}
+/** Header account control for a signed-in user: an initials avatar that opens a
+    small account dropdown (name, email, role, Logg ut). Designed for the app
+    shell's `account` slot; the app decides *whether* the user is signed in and
+    what the fields are - this component only renders them. */
+declare const DibkAccountMenu: react.ForwardRefExoticComponent<DibkAccountMenuProps & react.RefAttributes<HTMLButtonElement>>;
+interface DibkMenuLoginProps extends ComponentPropsWithoutRef<"button"> {
+}
+/** "Logg inn" row for the mega-menu's `menuExtra` slot, the anonymous counterpart
+    to DibkAccountMenu. The app renders it only for signed-out visitors and wires
+    the click to its sign-in flow. */
+declare const DibkMenuLogin: react.ForwardRefExoticComponent<DibkMenuLoginProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface DibkCopyButtonProps extends ComponentPropsWithoutRef<"button"> {
+    /** The text placed on the clipboard. */
+    value: string;
+    /** Accessible name for the button ("Kopier" when omitted). */
+    ariaLabel?: string;
+}
+/** A square navy "Kopier" button that flips to "✓ Kopiert!" for ~1.7s after a copy. */
+declare const DibkCopyButton: react.ForwardRefExoticComponent<DibkCopyButtonProps & react.RefAttributes<HTMLButtonElement>>;
+interface DibkCopyIconButtonProps extends ComponentPropsWithoutRef<"button"> {
+    /** The text placed on the clipboard. */
+    value: string;
+    /** Accessible name for the button. */
+    ariaLabel?: string;
+    /** Glyph size in px; the hit area comes from padding, not the glyph. */
+    size?: number;
+}
+/** Quiet icon-only sibling of DibkCopyButton: a muted clipboard glyph that turns
+    into a green ✓ after copying. For places where a full button would shout
+    (e.g. beside body text). */
+declare const DibkCopyIconButton: react.ForwardRefExoticComponent<DibkCopyIconButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface DibkCodeBlockProps extends ComponentPropsWithoutRef<"div"> {
+    /** Label shown in the bar above the code. */
+    label: string;
+    /** The value the Kopier button copies (and shows, unless `display` is set). */
+    value: string;
+    /** Text to show when it should differ from the copied value. */
+    display?: string;
+    /** Toggles the Kopier button; turn off for illustrative blocks that shouldn't be pasted. */
+    copyable?: boolean;
+}
+/** A labelled code block: a label bar over a monospace `<pre>`, with an optional
+    Kopier button. Wraps long lines (URLs, JSON) rather than only scrolling. */
+declare const DibkCodeBlock: react.ForwardRefExoticComponent<DibkCodeBlockProps & react.RefAttributes<HTMLDivElement>>;
+
+export { DibkAccountMenu, type DibkAccountMenuProps, DibkAppShell, type DibkAppShellProps, DibkCodeBlock, type DibkCodeBlockProps, DibkCopyButton, type DibkCopyButtonProps, DibkCopyIconButton, type DibkCopyIconButtonProps, DibkFeedbackWidget, type DibkFeedbackWidgetProps, DibkFooter, type DibkFooterProps, DibkHeader, type DibkHeaderProps, type DibkHeaderShortcut, type DibkIconLinkItem, DibkIconLinkList, type DibkIconLinkListProps, DibkLogo, type DibkLogoProps, DibkMegaMenu, type DibkMegaMenuProps, type DibkMenuColumnSection, DibkMenuLogin, type DibkMenuLoginProps, DibkMenuSection, type DibkMenuSectionProps, DibkSearch, type DibkSearchProps, DibkSectionHeader, type DibkSectionHeaderProps };