import * as React from 'react' ; import styled from '@emotion/styled' ; import { colors , space , type , CanvasColor , typeColors } from '@workday/canvas-kit-react/tokens' ; import { IconButton } from '@workday/canvas-kit-react/button' ; import { xIcon } from '@workday/canvas-system-icons-web' ; export interface DrawerHeaderProps extends React . HTMLAttributes < HTMLDivElement > { /**
     * The text of the DrawerHeader. This text will also be applied as the `title` attribute of the header element.
     */ title ? : string ; /**
     * The function called when the DrawerHeader close button is clicked.
     */ onClose ? : React . MouseEventHandler < HTMLButtonElement > ; default closeIconAriaLabel ? : string ; /**
     * The background color of the DrawerHeader.
     */ headerColor ? : CanvasColor | string ; /**
     * The border color of the DrawerHeader. This should match something close to `headerColor`.
     */ borderColor ? : CanvasColor | string ; default inverse ? : boolean ; /**
     * The unique id of the DrawerHeader for accessibility.
     */ id ? : string ; } const headerHeight = 56 ; const HeaderContainer = styled ( 'div' ) < Pick < DrawerHeaderProps , 'headerColor' | 'borderColor' > > ( { height : headerHeight , display : 'flex' , alignItems : 'center' , padding : `0 ${ space . s }` , justifyContent : 'space-between' , } , ( { borderColor } ) => ( { borderBottom : `1px solid ${ borderColor }` , } ) , ( { headerColor } ) => ( { backgroundColor : headerColor , } ) ) ; const HeaderTitle = styled ( 'h4' ) < Pick < DrawerHeaderProps , 'inverse' > > ( { ... type . levels . body . small , fontWeight : type . properties . fontWeights . bold , whiteSpace : 'nowrap' , textOverflow : 'ellipsis' , overflow : 'hidden' , paddingRight : space . xxxs , } , ( { inverse } ) => ( { color : inverse ? colors . frenchVanilla100 : typeColors . heading , } ) ) ; const CloseButton = styled ( IconButton ) ( { margin : '-8px' , } ) ; export default class DrawerHeader extends React . Component < DrawerHeaderProps , { } > { public render ( ) { const { closeIconAriaLabel = 'Close' , headerColor = colors . soap100 , borderColor = colors . soap500 , inverse = false , onClose , title , id , ... elemProps } = this . props ; return ( < HeaderContainer borderColor = { borderColor } { ... elemProps } headerColor = { headerColor } > < HeaderTitle id = { id } inverse = { inverse } title = { title } > { title } < /HeaderTitle> { onClose && closeIconAriaLabel && ( < CloseButton variant = { inverse ? 'inverse' : 'plain' } onClick = { onClose } aria - label = { closeIconAriaLabel } icon = { xIcon } / > ) } < /HeaderContainer>); } }