import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/Wizard/wizard'; import { css } from '@patternfly/react-styles'; import { Button } from '../Button'; import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; export interface WizardHeaderProps { /** Callback function called when the X (Close) button is clicked */ onClose?: (event: React.MouseEvent) => void; /** Title of the wizard */ title: string; /** Description of the wizard */ description?: React.ReactNode; /** Component type of the description */ descriptionComponent?: 'div' | 'p'; /** Flag indicating whether the close button should be in the header */ isCloseHidden?: boolean; /** Aria-label applied to the X (Close) button */ closeButtonAriaLabel?: string; /** id for the title */ titleId?: string; /** id for the description */ descriptionId?: string; } export const WizardHeader: React.FunctionComponent = ({ onClose = () => undefined, title, description, isCloseHidden, closeButtonAriaLabel, titleId, descriptionComponent: Component = 'div', descriptionId }: WizardHeaderProps) => (
{!isCloseHidden && (
)}

## {title || <> }

{description && ( {description} )}
); WizardHeader.displayName = 'WizardHeader';