@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: "--cnvs-brand-error-base";
            color: "--cnvs-brand-error-accent";
            '&:hover, &.hover': {
                background: "--cnvs-brand-error-dark";
            };
            '& [data-part="exclamation-circle-icon"]': {
                [x: string]: string;
            };
        };
        false: {
            backgroundColor: "--cnvs-brand-alert-base";
            color: "--cnvs-sys-color-fg-contrast-default";
            '&:hover, &.hover': {
                background: "--cnvs-brand-alert-dark";
            };
            '& [data-part="exclamation-triangle-icon"]': {
                [x: string]: string;
            };
        };
    };
    isSticky: {
        true: {
            width: string;
            borderStartEndRadius: number;
            borderEndEndRadius: number;
        };
        false: {
            width: string;
        };
    };
}, {}, {}, 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