From 5773b8f28cdca8794b7f02164a202a668cb1f1f2 Mon Sep 17 00:00:00 2001
From: Uchechukwu Obasi <obasiuche62@gmail.com>
Date: Mon, 1 Mar 2021 16:39:36 +0100
Subject: [PATCH] ConfirmButton: updates story from knobs to controls (#31476)

* ConfirmButton: updates story from knobs to controls

* made some changes
---
 .../ConfirmButton/ConfirmButton.story.tsx     | 137 ++++++++----------
 1 file changed, 59 insertions(+), 78 deletions(-)

diff --git a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx
index e61f9794043..c71b4fbe8c7 100644
--- a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx
+++ b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx
@@ -1,32 +1,14 @@
 import React from 'react';
-import { text, boolean, select } from '@storybook/addon-knobs';
+import { Story } from '@storybook/react';
 import { ConfirmButton } from '@grafana/ui';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
 import { action } from '@storybook/addon-actions';
 import { Button } from '../Button';
 import { DeleteButton } from './DeleteButton';
+import { Props } from './ConfirmButton';
 import mdx from './ConfirmButton.mdx';
 
-const getKnobs = () => {
-  return {
-    buttonText: text('Button text', 'Edit'),
-    confirmText: text('Confirm text', 'Save'),
-    size: select('Size', ['sm', 'md', 'lg'], 'md'),
-    confirmVariant: select(
-      'Confirm variant',
-      {
-        primary: 'primary',
-        secondary: 'secondary',
-        destructive: 'destructive',
-        link: 'link',
-      },
-      'primary'
-    ),
-    disabled: boolean('Disabled', false),
-    closeOnConfirm: boolean('Close on confirm', true),
-  };
-};
-
 export default {
   title: 'Buttons/ConfirmButton',
   component: ConfirmButton,
@@ -36,74 +18,73 @@ export default {
     docs: {
       page: mdx,
     },
+    knobs: {
+      disable: true,
+    },
+  },
+  args: {
+    buttonText: 'Edit',
+    confirmText: 'Save',
+    size: 'md',
+    confirmVariant: 'primary',
+    disabled: false,
+    closeOnConfirm: true,
+  },
+  argTypes: {
+    confirmVariant: { control: { type: 'select' } },
+    size: { control: { type: 'select' } },
+    className: NOOP_CONTROL,
   },
 };
 
-export const basic = () => {
-  const { size, buttonText, confirmText, confirmVariant, disabled, closeOnConfirm } = getKnobs();
+interface StoryProps extends Partial<Props> {
+  buttonText: string;
+}
+
+export const Basic: Story<StoryProps> = (args) => {
   return (
-    <>
-      <div className="gf-form-group">
-        <div className="gf-form">
-          <ConfirmButton
-            closeOnConfirm={closeOnConfirm}
-            size={size}
-            confirmText={confirmText}
-            disabled={disabled}
-            confirmVariant={confirmVariant}
-            onConfirm={() => {
-              action('Saved')('save!');
-            }}
-          >
-            {buttonText}
-          </ConfirmButton>
-        </div>
-      </div>
-    </>
+    <ConfirmButton
+      closeOnConfirm={args.closeOnConfirm}
+      size={args.size}
+      confirmText={args.confirmText}
+      disabled={args.disabled}
+      confirmVariant={args.confirmVariant}
+      onConfirm={() => {
+        action('Saved')('save!');
+      }}
+    >
+      {args.buttonText}
+    </ConfirmButton>
   );
 };
 
-export const withCustomButton = () => {
-  const { buttonText, confirmText, confirmVariant, disabled, size, closeOnConfirm } = getKnobs();
+export const WithCustomButton: Story<StoryProps> = (args) => {
   return (
-    <>
-      <div className="gf-form-group">
-        <div className="gf-form">
-          <ConfirmButton
-            closeOnConfirm={closeOnConfirm}
-            size={size}
-            confirmText={confirmText}
-            disabled={disabled}
-            confirmVariant={confirmVariant}
-            onConfirm={() => {
-              action('Saved')('save!');
-            }}
-          >
-            <Button size={size} variant="secondary" icon="pen">
-              {buttonText}
-            </Button>
-          </ConfirmButton>
-        </div>
-      </div>
-    </>
+    <ConfirmButton
+      closeOnConfirm={args.closeOnConfirm}
+      size={args.size}
+      confirmText={args.confirmText}
+      disabled={args.disabled}
+      confirmVariant={args.confirmVariant}
+      onConfirm={() => {
+        action('Saved')('save!');
+      }}
+    >
+      <Button size={args.size} variant="secondary" icon="pen">
+        {args.buttonText}
+      </Button>
+    </ConfirmButton>
   );
 };
 
-export const deleteButton = () => {
-  const { disabled, size } = getKnobs();
+export const Delete: Story<StoryProps> = (args) => {
   return (
-    <>
-      <div className="gf-form-group">
-        <div className="gf-form">
-          <DeleteButton
-            size={size}
-            disabled={disabled}
-            onConfirm={() => {
-              action('Deleted')('delete!');
-            }}
-          />
-        </div>
-      </div>
-    </>
+    <DeleteButton
+      size={args.size}
+      disabled={args.disabled}
+      onConfirm={() => {
+        action('Deleted')('delete!');
+      }}
+    />
   );
 };