From 49a5b9f0cbd627c75403ca3ec91d41c8adb03e51 Mon Sep 17 00:00:00 2001
From: Uchechukwu Obasi <obasiuche62@gmail.com>
Date: Tue, 23 Mar 2021 12:33:27 +0100
Subject: [PATCH] Legacy Switch: updates story from knobs to controls (#32249)

* Legacy Switch: updates story from knobs to controls

* destructure arguments appropriately
---
 .../Legacy/Switch/Switch.story.internal.tsx   | 31 +++++++++++--------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.story.internal.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.story.internal.tsx
index abb402cae79..04136625665 100644
--- a/packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.story.internal.tsx
+++ b/packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.story.internal.tsx
@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 
-import { Switch } from './Switch';
-import { text } from '@storybook/addon-knobs';
+import { Props, Switch } from './Switch';
+import { Story } from '@storybook/react';
 import mdx from './Switch.mdx';
+import { NOOP_CONTROL } from '../../../../utils/storybook/noopControl';
 
 const getStory = (title: string, component: any) => ({
   title,
@@ -11,22 +12,26 @@ const getStory = (title: string, component: any) => ({
     docs: {
       page: mdx,
     },
+    knobs: {
+      disable: true,
+    },
+  },
+  argTypes: {
+    className: NOOP_CONTROL,
+    labelClass: NOOP_CONTROL,
+    switchClass: NOOP_CONTROL,
   },
 });
 
 export default getStory('Forms/Legacy/Switch', Switch);
 
-const getKnobs = () => {
-  return {
-    label: text('Label Text', 'Label'),
-    tooltip: text('Tooltip', ''),
-  };
-};
-
-const SwitchWrapper = () => {
-  const { label, tooltip } = getKnobs();
+const SwitchWrapper: Story<Props> = ({ label, ...args }) => {
   const [checked, setChecked] = useState(false);
-  return <Switch label={label} checked={checked} onChange={() => setChecked(!checked)} tooltip={tooltip} />;
+  return <Switch {...args} label={label} checked={checked} onChange={() => setChecked(!checked)} />;
 };
 
-export const basic = () => <SwitchWrapper />;
+export const Basic = SwitchWrapper.bind({});
+Basic.args = {
+  label: 'Label',
+  tooltip: '',
+};