@navikt/ds-react/cjs/process/Process.d.ts

React components from the Norwegian Labour and Welfare Administration.

import React from "react";
interface ProcessProps extends React.HTMLAttributes<HTMLOListElement> {
    /**
     * `<Process.Event />` elements.
     */
    children: React.ReactElement<typeof ProcessEvent>[];
    /**
     * Hides the "aktiv"-text when the event is active.
     * @default false
     */
    hideStatusText?: boolean;
}
interface ProcessComponent extends React.ForwardRefExoticComponent<ProcessProps & React.RefAttributes<HTMLOListElement>> {
    /**
     * @see 🏷️ {@link ProcessEventProps}
     */
    Event: typeof ProcessEvent;
}
/**
 * A component that presents a Process as a vertical line of events.
 * Each event can contain information, actions, links or status indicators.
 *
 * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/process)
 * @see 🏷️ {@link ProcessProps}
 *
 * @example
 * ```jsx
 * <>
 *   <Heading size="medium" spacing level="2" id="Process-heading">
 *     Søknadssteg
 *   </Heading>
 *   <Process
 *     aria-labelledby="Process-heading"
 *     activeStep={activeStep}
 *   >
 *     <Process.Event title="Start søknad" timestamp="21. august 2025" />
 *     <Process.Event
 *       title="Saksopplysninger"
 *       timestamp="22. august 2025"
 *       icon={<PaperclipIcon />}
 *     >
 *       Saksopplysninger er sendt inn
 *     </Process.Event>
 *     <Process.Event
 *       title="Vedlegg"
 *       timestamp="25. august 2025"
 *     >
 *       <h3> Vedlegg er lastet opp </h3>
 *       <p>
 *         Dokumentasjon av saksopplysninger er lastet opp og tilgjengelig for
 *         saksbehandler.
 *       </p>
 *     </Process.Event>
 *     <Process.Event title="Vedtak" timestamp="8. september 2025">
 *       Det er gjort endelig vedtak i saken
 *     </Process.Event>
 *   </Process>
 * </>
 * ```
 */
export declare const Process: ProcessComponent;
interface ProcessEventProps extends React.HTMLAttributes<HTMLLIElement> {
    /**
     * Rich content to display under the title and timestamp if provided.
     */
    children?: React.ReactNode;
    /**
     * Hide the content section of the event.
     */
    hideContent?: boolean;
    /**
     * Step title.
     */
    title?: string;
    /**
     * Timestamp or date to display for event.
     */
    timestamp?: string;
    /**
     * Icon or number to display inside the bullet.
     */
    bullet?: React.ReactNode;
    /**
     * Current event status.
     * @default "uncompleted"
     */
    status?: "active" | "completed" | "uncompleted";
}
export declare const ProcessEvent: React.ForwardRefExoticComponent<ProcessEventProps & React.RefAttributes<HTMLLIElement>>;
export type { ProcessEventProps, ProcessProps };