import * as React from 'react'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/NotificationDrawer/notification-drawer'; import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; import { Button, ButtonVariant } from '../Button'; export interface NotificationDrawerHeaderProps extends React.HTMLProps { /** Content rendered inside the drawer */ children?: React.ReactNode; /** Additional classes for notification drawer header. */ className?: string; /** Adds custom accessible text to the notification drawer close button. */ closeButtonAriaLabel?: string; /** Notification drawer heading count */ count?: number; /** Notification drawer heading custom text which can be used instead of providing count/unreadText */ customText?: string; /** Callback for when close button is clicked */ onClose?: (event: KeyboardEvent | React.MouseEvent) => void; /** Notification drawer heading title */ title?: string; /** Notification drawer heading unread text used in combination with a count */ unreadText?: string; } export const NotificationDrawerHeader: React.FunctionComponent = ({ children, className = '', count, closeButtonAriaLabel = 'Close', customText, onClose, title = 'Notifications', unreadText = 'unread', ...props }: NotificationDrawerHeaderProps) => (

# {title}

{(customText !== undefined || count !== undefined) && ( {customText || `${count} ${unreadText}`} )} {(children || onClose) && (
{children} {onClose && (
)}
)}
); NotificationDrawerHeader.displayName = 'NotificationDrawerHeader';