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