Docs: Add docs for InfoBox component (#28705)

* add mdx

* fixes after pr feedback

packages/grafana-ui/src/components/InfoBox/InfoBox.mdx

@@ -0,0 +1,24 @@
+import { Meta, Props } from '@storybook/addon-docs/blocks';
+import { InfoBox } from './InfoBox';
+
+<Meta title="MDX|InfoBox" component={InfoBox} />
+
+# InfoBox
+A component for displaying information in different levels of severity (Success, Warning, Error, Info).
+
+
+### Example usage
+This component can be found in the settings for various data sources.
+
+
+```tsx
+<InfoBox
+  title="Example info box"
+  severity='info'
+  url="http://url.to.some.documentation"
+  onDismiss={dissmisInfoBox}
+/>
+```
+
+
+<Props of={InfoBox} />

packages/grafana-ui/src/components/InfoBox/InfoBox.story.tsx

@@ -1,43 +1,44 @@
 import React from 'react';
-import { number } from '@storybook/addon-knobs';
+import { number, select, text } from '@storybook/addon-knobs';
-import { InfoBox, FeatureInfoBox } from '@grafana/ui';
 import { FeatureState } from '@grafana/data';
+import { InfoBox, FeatureInfoBox } from '@grafana/ui';
+import mdx from './InfoBox.mdx';
 
 export default {
   title: 'Layout/InfoBox',
   component: InfoBox,
   decorators: [],
   parameters: {
-    docs: {},
+    docs: {
+      page: mdx,
+    },
   },
 };
 
 const getKnobs = () => {
-  const CONTAINER_GROUP = 'Container options';
+  const containerWidth = number('Container width', 800, {
-  // ---
-  const containerWidth = number(
-    'Container width',
-    800,
-    {
     range: true,
     min: 100,
     max: 1500,
     step: 100,
-    },
+  });
-    CONTAINER_GROUP
-  );
 
-  return { containerWidth };
+  const title = text('Title', 'User permission');
+  const url = text('Url', 'http://docs.grafana.org/features/datasources/mysql/');
+  const severity = select('Severity', ['success', 'warning', 'error', 'info'], 'info');
+
+  return { containerWidth, severity, title, url };
 };
 
 export const basic = () => {
-  const { containerWidth } = getKnobs();
+  const { containerWidth, severity, title, url } = getKnobs();
 
   return (
     <div style={{ width: containerWidth }}>
       <InfoBox
-        title="User Permission"
+        title={title}
-        url={'http://docs.grafana.org/features/datasources/mysql/'}
+        url={url}
+        severity={severity}
         onDismiss={() => {
           alert('onDismiss clicked');
         }}

packages/grafana-ui/src/components/InfoBox/InfoBox.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { css, cx } from 'emotion';
 import { GrafanaTheme } from '@grafana/data';
-import { stylesFactory, useTheme } from '../../themes';
 import { Icon } from '../Icon/Icon';
 import { IconButton } from '../IconButton/IconButton';
 import { HorizontalGroup } from '../Layout/Layout';
+import { AlertVariant } from '../Alert/Alert';
 import panelArtDark from './panelArt_dark.svg';
 import panelArtLight from './panelArt_light.svg';
-import { AlertVariant } from '../Alert/Alert';
+import { stylesFactory, useTheme } from '../../themes';
 import { getColorsFromSeverity } from '../../utils/colors';
 
 export interface InfoBoxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
@@ -27,9 +27,7 @@ export interface InfoBoxProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
 }
 
 /**
- * This is a simple InfoBox component, the api is not considered stable yet and will likely see breaking changes
+  @public
- * in future minor releases.
- * @Alpha
  */
 export const InfoBox = React.memo(
   React.forwardRef<HTMLDivElement, InfoBoxProps>(