1import React from 'react'; 2import { css, cx } from '@emotion/css'; 3import { GrafanaTheme2 } from '@grafana/data'; 4import { Icon } from '../Icon/Icon'; 5import { Alert, AlertVariant } from '../Alert/Alert'; 6import { stylesFactory, useStyles2 } from '../../themes'; 7 8export interface InfoBoxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> { 9 children: React.ReactNode; 10 /** Title of the box */ 11 title?: string | JSX.Element; 12 /** Url of the read more link */ 13 url?: string; 14 /** Text of the read more link */ 15 urlTitle?: string; 16 /** Indicates whether or not box should be rendered with Grafana branding background */ 17 branded?: boolean; 18 /** Color variant of the box */ 19 severity?: AlertVariant; 20 /** Call back to be performed when box is dismissed */ 21 onDismiss?: () => void; 22} 23 24/** @deprecated use Alert with severity info */ 25export const InfoBox = React.memo( 26 React.forwardRef<HTMLDivElement, InfoBoxProps>( 27 ({ title, className, children, branded, url, urlTitle, onDismiss, severity = 'info', ...otherProps }, ref) => { 28 const styles = useStyles2(getStyles); 29 30 return ( 31 <Alert severity={severity} className={className} {...otherProps} ref={ref} title={title as string}> 32 <div>{children}</div> 33 {url && ( 34 <a href={url} className={cx('external-link', styles.docsLink)} target="_blank" rel="noreferrer"> 35 <Icon name="book" /> {urlTitle || 'Read more'} 36 </a> 37 )} 38 </Alert> 39 ); 40 } 41 ) 42); 43 44InfoBox.displayName = 'InfoBox'; 45 46const getStyles = stylesFactory((theme: GrafanaTheme2) => { 47 return { 48 docsLink: css` 49 display: inline-block; 50 margin-top: ${theme.spacing(2)}; 51 `, 52 }; 53}); 54