import { IStyle , FontIcon , mergeStyles , Stack , Text } from '@fluentui/react' ; import { ComponentSlotStyle } from '@fluentui/react-northstar' ; import React from 'react' ; import { systemMessageIconStyle } from './styles/SystemMessage.styles' ; private export type SystemMessageIconTypes = 'PeopleAdd' | 'PeopleBlock' | 'Edit' ; private export type SystemMessageProps = { /**
     * Icon name for the system message.
     */ iconName : SystemMessageIconTypes ; /**
     * Content string for the system message.
     */ content : string ; containerStyle ? : ComponentSlotStyle ; } ; private export const SystemMessage = ( props ) : JSX . Element => { const { iconName , content } = props ; const Icon = < FontIcon iconName = { iconName } className = { mergeStyles ( systemMessageIconStyle ) } / > ; return ( < Stack horizontal className = { mergeStyles ( props ?. containerStyle as IStyle ) } > { Icon } < Text style = { { wordBreak : 'break-word' } } role = "status" title = { content } > { content } < /Text> < /Stack>); } ;