@dnanpm/styleguide
Version:
DNA Styleguide repository provides the set of components and theme object used in various DNA projects.
63 lines (62 loc) • 2.09 kB
TypeScript
import type { MouseEvent, ReactNode } from 'react';
import React from 'react';
type NotificationType = 'info' | 'success' | 'warning' | 'error';
interface Props {
/**
* Allows to change styling of component, depending on the passed type
*
* @param {NotificationType} info Displays `info` icon and uses `theme.color.notification.info` for styling
* @param {NotificationType} success Displays `success` icon and uses `theme.color.notification.success` for styling
* @param {NotificationType} warning Displays `warning` icon and uses `theme.color.notification.warning` for styling
* @param {NotificationType} error Displays `error` icon and uses `theme.color.notification.error` for styling
*
* @default 'info'
*/
type?: NotificationType;
/**
* Content of the component
*/
children: ReactNode;
/**
* Allows to show and hide close button
*
* @default false
*/
closeButton?: boolean;
/**
* Label for the close button
*/
closeButtonLabel?: string;
/**
* On close button click callback
*/
onClickCloseButton?: (e: MouseEvent<HTMLElement>) => void;
/**
* Allows to dismiss the notification programmatically
*
* @default false
*/
dismissed?: boolean;
/**
* Allows to pass a custom className
*/
className?: string;
/**
* Allows to pass testid string for testing purposes
*/
'data-testid'?: string;
/**
* If true, the component is treated as static (non-interactive),
* and uses `aria-label` instead of `role="alert"`.
*
* @default false
*/
isStatic?: boolean;
/**
* Accessible label for the notification. Required when `isStatic` is true
* and no type-based default label is desired.
*/
ariaLabel?: string;
}
declare const Notification: ({ type, "data-testid": dataTestId, isStatic, className, children, closeButton, closeButtonLabel, onClickCloseButton, dismissed, ariaLabel, }: Props) => React.JSX.Element | null;
export default Notification;