@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
103 lines • 3.15 kB
TypeScript
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;
}
/**
* `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 styled {@link Flex}. 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 styled {@link Box}. 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