Switch: updates story from knobs to control (#34016)

* Switch: updates story from knobs to control

* small nit fixes

* exported default storybook config as meta

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

@@ -1,5 +1,5 @@
 import React, { useState, useCallback } from 'react';
-import { boolean } from '@storybook/addon-knobs';
+import { Meta, Story } from '@storybook/react';
 import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { InlineField, Switch, InlineSwitch } from '@grafana/ui';
 import mdx from './Switch.mdx';
@@ -14,41 +14,50 @@ export default {
     docs: {
       page: mdx,
     },
+    knobs: {
+      disable: true,
+    },
   },
-};
-
-export const Controlled = () => {
-  const [checked, setChecked] = useState(false);
-  const onChange = useCallback((e) => setChecked(e.currentTarget.checked), [setChecked]);
-  const BEHAVIOUR_GROUP = 'Behaviour props';
-  const disabled = boolean('Disabled', false, BEHAVIOUR_GROUP);
+  args: {
+    disabled: false,
+    value: false,
+    transparent: false,
+  },
+} as Meta;
 
+export const Controlled: Story = (args) => {
   return (
     <div>
       <div style={{ marginBottom: '32px' }}>
         <Field label="Normal switch" description="For horizontal forms">
-          <Switch value={checked} disabled={disabled} onChange={onChange} />
+          <Switch value={args.value} disabled={args.disabled} transparent={args.transparent} />
         </Field>
       </div>
       <div style={{ marginBottom: '32px' }}>
         <InlineFieldRow>
           <InlineField label="My switch">
-            <InlineSwitch value={checked} disabled={disabled} onChange={onChange} />
+            <InlineSwitch value={args.value} disabled={args.disabled} transparent={args.transparent} />
           </InlineField>
         </InlineFieldRow>
       </div>
       <div style={{ marginBottom: '32px' }}>
         <div>just inline switch with show label</div>
         <span>
-          <InlineSwitch label="Raw data" showLabel={true} value={checked} disabled={disabled} onChange={onChange} />
+          <InlineSwitch
+            label="Raw data"
+            showLabel={true}
+            value={args.value}
+            disabled={args.disabled}
+            transparent={args.transparent}
+          />
         </span>
       </div>
     </div>
   );
 };
 
-export const Uncontrolled = () => {
-  const BEHAVIOUR_GROUP = 'Behaviour props';
-  const disabled = boolean('Disabled', false, BEHAVIOUR_GROUP);
-  return <Switch disabled={disabled} />;
+export const Uncontrolled: Story = (args) => {
+  const [checked, setChecked] = useState(args.value);
+  const onChange = useCallback((e) => setChecked(e.currentTarget.checked), [setChecked]);
+  return <Switch value={checked} disabled={args.disabled} transparent={args.transparent} onChange={onChange} />;
 };