From 100e7eb9927f1264cd1ab423ad42b8158a544259 Mon Sep 17 00:00:00 2001
From: Uchechukwu Obasi <obasiuche62@gmail.com>
Date: Fri, 12 Feb 2021 16:45:05 +0100
Subject: [PATCH] Alert: update story to use controls (#31145)

* Alert: updated story to use Controls

* updated some changes
---
 .../src/components/Alert/Alert.story.tsx      | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/grafana-ui/src/components/Alert/Alert.story.tsx b/packages/grafana-ui/src/components/Alert/Alert.story.tsx
index d9517371f99..b459290ced4 100644
--- a/packages/grafana-ui/src/components/Alert/Alert.story.tsx
+++ b/packages/grafana-ui/src/components/Alert/Alert.story.tsx
@@ -1,10 +1,14 @@
 import React from 'react';
+import { Story } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { Alert, AlertVariant, VerticalGroup } from '@grafana/ui';
+import { Props } from './Alert';
 import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
 import mdx from '../Alert/Alert.mdx';
 import { StoryExample } from '../../utils/storybook/StoryExample';
 
+const severities: AlertVariant[] = ['error', 'warning', 'info', 'success'];
+
 export default {
   title: 'Overlays/Alert',
   component: Alert,
@@ -13,26 +17,30 @@ export default {
     docs: {
       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 (
     <VerticalGroup>
       <StoryExample name="With buttonContent and children">
         <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')}
         >
           Child content that includes some alert details, like maybe what actually happened.
         </Alert>
       </StoryExample>
       <StoryExample name="No dismiss">
-        <Alert title="Some very important message" severity="info" />
+        <Alert title={title} severity={severity} />
       </StoryExample>
       <StoryExample name="Severities">
         <VerticalGroup>
@@ -49,3 +57,9 @@ export const Examples = () => {
     </VerticalGroup>
   );
 };
+
+Examples.args = {
+  severity: 'error',
+  title: 'Some very important message',
+  buttonContent: 'Close',
+};