Alert: update story to use controls (#31145)

* Alert: updated story to use Controls

* updated some changes

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

 import React from 'react';
 import React from 'react';
+import { Story } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { action } from '@storybook/addon-actions';
 import { Alert, AlertVariant, VerticalGroup } from '@grafana/ui';
 import { Alert, AlertVariant, VerticalGroup } from '@grafana/ui';
+import { Props } from './Alert';
 import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
 import mdx from '../Alert/Alert.mdx';
 import mdx from '../Alert/Alert.mdx';
 import { StoryExample } from '../../utils/storybook/StoryExample';
 import { StoryExample } from '../../utils/storybook/StoryExample';
 
 
+const severities: AlertVariant[] = ['error', 'warning', 'info', 'success'];
+
 export default {
 export default {
   title: 'Overlays/Alert',
   title: 'Overlays/Alert',
   component: Alert,
   component: Alert,
@@ -13,26 +17,30 @@ export default {
     docs: {
     docs: {
       page: mdx,
       page: mdx,
     },
     },
+    knobs: {
+      disabled: true,
+    },
+  },
+  argTypes: {
+    severity: { control: { type: 'select', options: severities } },
   },
   },
 };
 };
 
 
-const severities: AlertVariant[] = ['error', 'warning', 'info', 'success'];
-
-export const Examples = () => {
+export const Examples: Story<Props> = ({ severity, title, buttonContent }) => {
   return (
   return (
     <VerticalGroup>
     <VerticalGroup>
       <StoryExample name="With buttonContent and children">
       <StoryExample name="With buttonContent and children">
         <Alert
         <Alert
-          title="Some very important message"
-          severity="error"
-          buttonContent={<span>Close</span>}
+          title={title}
+          severity={severity}
+          buttonContent={<span>{buttonContent}</span>}
           onRemove={action('Remove button clicked')}
           onRemove={action('Remove button clicked')}
         >
         >
           Child content that includes some alert details, like maybe what actually happened.
           Child content that includes some alert details, like maybe what actually happened.
         </Alert>
         </Alert>
       </StoryExample>
       </StoryExample>
       <StoryExample name="No dismiss">
       <StoryExample name="No dismiss">
-        <Alert title="Some very important message" severity="info" />
+        <Alert title={title} severity={severity} />
       </StoryExample>
       </StoryExample>
       <StoryExample name="Severities">
       <StoryExample name="Severities">
         <VerticalGroup>
         <VerticalGroup>
@@ -49,3 +57,9 @@ export const Examples = () => {
     </VerticalGroup>
     </VerticalGroup>
   );
   );
 };
 };
+
+Examples.args = {
+  severity: 'error',
+  title: 'Some very important message',
+  buttonContent: 'Close',
+};