@workday/canvas-kit-react/dist/commonjs/banner/lib/Banner.d.ts

The parent module that contains all Workday Canvas Kit React components

import * as React from 'react';
import { ExtractProps } from '@workday/canvas-kit-react/common';
import { Flex } from '@workday/canvas-kit-react/layout';
export interface BannerProps extends ExtractProps<typeof Flex, never> {
    /**
     * Children of the Banner. Should contain a `<Banner.Label>` a <Banner.Icon> and an optional `<Banner.ActionText>`
     */
    children?: React.ReactNode;
}
export declare const bannerStencil: import("@workday/canvas-kit-styling").Stencil<{
    hasErrors: {
        true: {
            backgroundColor: "var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)))";
            color: "--cnvs-sys-color-fg-inverse";
            '&:hover, &.hover': {
                background: string;
            };
            '& [data-part="exclamation-circle-icon"]': {
                [x: string]: "--cnvs-sys-color-fg-inverse" | "var(--cnvs-sys-color-brand-accent-critical, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)))";
            };
        };
        false: {
            backgroundColor: "var(--cnvs-sys-color-brand-accent-caution, oklch(0.7909 0.1711 70.15 / 1))";
            color: "--cnvs-sys-color-fg-contrast-default";
            '&:hover, &.hover': {
                background: string;
            };
            '& [data-part="exclamation-triangle-icon"]': {
                [x: string]: "var(--cnvs-sys-color-fg-inverse, currentColor)" | "var(--cnvs-sys-color-brand-fg-caution-strong, oklch(0.4824 0.1353 46.11 / 1))";
            };
        };
    };
    isSticky: {
        true: {
            width: string;
            borderStartEndRadius: number;
            borderEndEndRadius: number;
        };
        false: {
            width: string;
        };
    };
}, {}, {}, import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
    shape: string;
}, never>, {}, {
    shape: string;
}, never, never>, never>;
/**
 * `Banner` is a container component rendered as a `<button>` element that is responsible for creating
 * a `BannerModel` and sharing it with its subcomponents using React context.
 *
 * ```tsx
 * <Banner
 * 	isSticky={true}
 * 	hasError={true}
 * 	id='custom-banner-id'
 * 	onClick={() => console.log('clicked banner')}
 * >
 *   {Child components}
 * </Banner>
 * ```
 *
 * Alternatively, you may pass in a model using the hoisted model pattern.
 *
 * ```tsx
 * const model = useBannerModel({
 *   isSticky: true,
 *   hasError: true,
 *   id: 'custom-banner-id',
 * });
 *
 * return (
 *   <Banner onClick={() => console.log('clicked banner')} model={model}>
 *     {Child components}
 *   </Banner>
 * );
 * ```
 */
export declare const Banner: import("@workday/canvas-kit-react/common").ElementComponentM<"button", BannerProps & Partial<{
    hasError: boolean;
    isSticky: boolean;
    id: string;
}> & {} & {}, {
    state: {
        id: string;
        hasError: boolean;
        isSticky: boolean;
    };
    events: {};
}> & {
    /**
     * `Banner.Icon` is a styled {@link SystemIcon}. The icon defaults to exclamationTriangleIcon or
     * exclamationCircleIcon when the model's hasError is true.
     *
     * ```tsx
     * <Banner.Icon />
     * ```
     */
    Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./BannerIcon").BannerIconProps, {
        state: {
            id: string;
            hasError: boolean;
            isSticky: boolean;
        };
        events: {};
    }>;
    /**
     * `Banner.Label` is a div element with flex styles. This component will get an id that will be used for
     * the aria-describedby on the top level `<button>`.
     *
     * ```tsx
     * <Banner.Label>3 Warnings</Banner.Label>
     * ```
     */
    Label: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./BannerLabel").BannerLabelProps, {
        state: {
            id: string;
            hasError: boolean;
            isSticky: boolean;
        };
        events: {};
    }>;
    /**
     * `Banner.ActionText` is a span element. This component will get an id that will be used
     * for the aria-labelledby on the top level `<button>`. This component will be visually hidden
     * when the model's `isSticky` prop is set to true.
     *
     * ```tsx
     * <Banner.ActionText>Custom call to action</Banner.ActionText>
     * ```
     */
    ActionText: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./BannerActionText").BannerActionTextProps, {
        state: {
            id: string;
            hasError: boolean;
            isSticky: boolean;
        };
        events: {};
    }>;
};
//# sourceMappingURL=Banner.d.ts.map