dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
61 lines (60 loc) • 4.31 kB
TypeScript
import { EventName } from '@lit/react';
import { default as Component } from '../../components/banner/banner.js';
import { DdsCloseEvent } from '../../events/events';
export type { DdsCloseEvent } from '../../events/events';
/**
* `dap-ds-banner` is a custom banner component.
* @element dap-ds-banner
* @summary A banner is a message displayed at the top of the page to provide important information to the user.
* @title - Banner
*
* @event {{ void }} dds-close - Event fired when the banner is closed.
*
* @slot - The content of the banner.
* @slot actions - Actions of banner
* @slot icon - The icon of the banner.
*
* @csspart base - The main banner container.
* @csspart card-base - The wrapper card container.
* @csspart icon - The icon of the banner.
* @csspart icon-element - The icon element of the banner.
* @csspart icon-base - The base of the icon.
* @csspart closebutton - The close button of the banner.
* @csspart close-icon-element - The icon element of the close button.
* @csspart close-icon-base - The base of the close button icon.
* @csspart actions - The actions of the banner.
* @csspart title - The title of the banner.
*
* @cssproperty --dds-banner-gap - The gap between banner elements (default: var(--dds-spacing-200))
* @cssproperty --dds-banner-line-height - The line height of the banner text (default: var(--dds-font-line-height-xlarge))
* @cssproperty --dds-banner-transition - The transition property for the banner (default: all 0.2s ease-in-out)
*
* @cssproperty --dds-banner-brand-background - The background color of the brand banner (default: var(--dds-banner-background-brand))
* @cssproperty --dds-banner-brand-icon-color - The color of the brand banner icon (default: var(--dds-banner-icon-brand))
* @cssproperty --dds-banner-brand-text-color - The text color of the brand banner (default: var(--dds-banner-text-brand))
* @cssproperty --dds-banner-brand-action-color - The color of the brand banner actions (default: var(--dds-banner-action-enabled))
*
* @cssproperty --dds-banner-info-background - The background color of the info banner (default: var(--dds-banner-background-informative))
* @cssproperty --dds-banner-info-icon-color - The color of the info banner icon (default: var(--dds-banner-icon-informative))
* @cssproperty --dds-banner-info-text-color - The text color of the info banner (default: var(--dds-banner-text-informative))
* @cssproperty --dds-banner-info-action-color - The color of the info banner actions (default: var(--dds-banner-action-enabled))
*
* @cssproperty --dds-banner-positive-background - The background color of the positive banner (default: var(--dds-banner-background-positive))
* @cssproperty --dds-banner-positive-icon-color - The color of the positive banner icon (default: var(--dds-banner-icon-positive))
* @cssproperty --dds-banner-positive-text-color - The text color of the positive banner (default: var(--dds-banner-text-positive))
* @cssproperty --dds-banner-positive-action-color - The color of the positive banner actions (default: var(--dds-banner-action-enabled))
*
* @cssproperty --dds-banner-warning-background - The background color of the warning banner (default: var(--dds-banner-background-warning))
* @cssproperty --dds-banner-warning-icon-color - The color of the warning banner icon (default: var(--dds-banner-icon-warning))
* @cssproperty --dds-banner-warning-text-color - The text color of the warning banner (default: var(--dds-banner-text-warning))
* @cssproperty --dds-banner-warning-action-color - The color of the warning banner actions (default: var(--dds-banner-action-inverted-enabled))
*
* @cssproperty --dds-banner-negative-background - The background color of the negative banner (default: var(--dds-banner-background-negative))
* @cssproperty --dds-banner-negative-icon-color - The color of the negative banner icon (default: var(--dds-banner-icon-negative))
* @cssproperty --dds-banner-negative-text-color - The text color of the negative banner (default: var(--dds-banner-text-negative))
* @cssproperty --dds-banner-negative-action-color - The color of the negative banner actions (default: var(--dds-banner-action-inverted-enabled))
*/
declare const reactWrapper: import('@lit/react').ReactWebComponent<Component, {
onDdsClose: EventName<DdsCloseEvent>;
}>;
export default reactWrapper;