import { GlobalProps } from '../../shared/global'; import { ComponentChildren } from '../../shared/children'; import { ActionSlots } from '../../shared/action'; import { ToneKeyword } from '../../shared/theming'; export interface BannerProps extends GlobalProps, ActionSlots { /** * The title of the banner. * * @default '' */ heading?: string; /** * The content of the Banner. */ children?: ComponentChildren; /** * Sets the tone of the Banner, based on the intention of the information being conveyed. * * In an HTML host, the Banner is a live region and the type of status will be dictated by the Tone selected. * * - `critical` and `warning` creates an assertive live region (`role="alert"`) that is announced by screen readers immediately. * - `neutral`, `info`, `success`, and `caution` creates an informative live region (`role="status"`) that is announced by screen readers after the current message. * * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role * * @default 'auto' */ tone?: ToneKeyword; /** * Makes the content collapsible. * A collapsible banner will conceal child elements initially, but allow the user to expand the banner to see them. * * @default false */ collapsible?: boolean; /** * Determines whether the close button of the banner is present. * * When the close button is pressed, the `dismiss` event will fire, * then `hidden` will be true, * any animation will complete, * and the `afterhide` event will fire. * * @default false */ dismissible?: boolean; /** * Event handler when the banner is dismissed by the user. * * This does not fire when setting `hidden` manually. * * The `hidden` property will be `false` when this event fires. */ onDismiss?: () => void; /** * Event handler when the banner has fully hidden. * * The `hidden` property will be `true` when this event fires. * * @implementation If implementations animate the hiding of the banner, * this event must fire after the banner has fully hidden. * We can add an `onHide` event in future if we want to provide a hook for the start of the animation. */ onAfterHide?: () => void; /** * Determines whether the banner is hidden. * * If this property is being set on each framework render (as in 'controlled' usage), * and the banner is `dismissible`, * ensure you update app state for this property when the `dismiss` event fires. * * If the banner is not `dismissible`, it can still be hidden by setting this property. * * @default false */ hidden?: boolean; }