@octopusdeploy/design-system-components/dist/src/components/Page/Level2OuterPageLayout.d.ts

The design systems component library.

import { type ReactElement, type ReactNode } from "react";
import type { DesignSystemLinkHref } from "../../routing";
import type { BreadcrumbItem } from "../Breadcrumbs";
import { type HeaderPrimaryLogo } from "../HeaderPrimary";
import type { PageSideNavItem } from "./PageSideNav";
import type { PageTitleBadge, PageTitleStatusBadge } from "./types";
interface Level2OuterPageLayoutProps {
    /**
     * Page Navigation items to be displayed in the sidebar.
     * Refer to the PageSideNav component for more information.
     */
    navItems?: PageSideNavItem[];
    children: ReactNode;
    /**
     * Defines the elements used in the page header, ensuring a consistent and structured layout.
     * The `title` is required, while other elements such as chips, breadcrumbs, and actions are optional.
     * - **breadcrumbs**: `BreadcrumbItem[]` *(optional)*
     * An array of breadcrumb items for hierarchical navigation. Refer to the the Breadcumbs component.
     * - **logo**: `HeaderPrimaryLogo` *(optional)*
     * The primary logo element to be displayed within the header.
     * - **title**: `string` *(required)*
     * The main title of the page. This is a required field and serves as the primary header text.
     * - **logoLinkURL**: `DesignSystemLinkHref` *(optional)*
     * A URL associated with the logo, allowing navigation when clicked.
     * - **titleIcon**: `React.ReactElement` *(optional)*
     * An optional icon to be displayed alongside the page title.
     * - **titleBadges**: `(PageTitleBadge | PageTitleStatusBadge)[]` *(optional)*
     * A list of badge to display alongside the title, often used for status or categorization. Refer to the Badge and StatusBadge components.
     * - **statusSection**: `React.ReactNode` *(optional)*
     * Displays the status of the current page, such as a project status
     */
    header?: {
        breadcrumbs?: BreadcrumbItem[];
        logo?: HeaderPrimaryLogo;
        title: string;
        logoLinkURL?: DesignSystemLinkHref;
        titleIcon?: ReactElement;
        titleBadges?: (PageTitleBadge | PageTitleStatusBadge)[];
        statusSection?: ReactNode;
    };
    /**
     * Displays important information or alerts to the user.
     * Please refer to the Callout component for more information.
     */
    callout?: ReactNode;
    /**
     * Displays the progress of a tour or walkthrough for the user. Visible in the sidebar navigation.
     */
    tourProgress?: ReactNode;
    /**
     * Adds a description to the page layout visible in the sidebar navigation, providing context or additional information to the user.
     *
     * This needs design review.
     */
    description?: ReactNode;
    /**
     * When true, the sidebar navigation will remain visible (sticky) as the user scrolls page content.
     * Only applies when the sidebar is visible (viewport width >= 1050px).
     */
    isSideNavSticky?: boolean;
}
export declare function Level2OuterPageLayout({ navItems, children, description, header, callout, tourProgress, isSideNavSticky }: Level2OuterPageLayoutProps): import("react/jsx-runtime").JSX.Element;
export {};