dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
92 lines (91 loc) • 5.71 kB
TypeScript
import { nothing, PropertyValueMap } from 'lit';
import { DdsElement } from '../../internal/dds-hu-element';
import { default as DapDSCard } from '../card/card.component';
import { default as DapDSCardContent } from '../card/card-content.component';
import { default as DapDSIcon } from '../icon/icon.component';
import { default as DapDSIconButton } from '../icon-button/icon-button.component';
export type BannerTheme = 'clean' | 'normal';
export type BannerVariant = 'brand' | 'positive' | 'info' | 'warning' | 'negative';
/**
* `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))
*/
export default class DapDSBanner extends DdsElement {
static tagName: string;
static dependencies: {
'dap-ds-card': typeof DapDSCard;
'dap-ds-card-content': typeof DapDSCardContent;
'dap-ds-icon': typeof DapDSIcon;
'dap-ds-icon-button': typeof DapDSIconButton;
};
/** @ignore */
actionSlot: HTMLElement[];
/** @ignore */
actionContainer: HTMLElement;
/** The variant of the banner
* @type { 'brand' | 'positive' | 'info' | 'warning' | 'negative' }
*/
variant: BannerVariant;
/** Whether the banner is closeable */
closeable: boolean;
/** State of the banner. If false banner is hidden */
opened: string;
/** The aria-label for the close button */
closeButtonLabel: string;
/** `data-testid` for the close button. */
closeButtonTestId: string;
/** The icon of the banner, this is a name of a built icon icon */
icon: string;
static readonly styles: import('lit').CSSResult;
protected firstUpdated(_changedProperties: PropertyValueMap<DapDSBanner> | Map<PropertyKey, unknown>): void;
private onCloseClick;
render(): typeof nothing | import('lit-html').TemplateResult;
}