ClipboardButton: updates story from knobs to controls (#31422)

packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.internal.tsx

@@ -1,39 +1,11 @@
 import React, { useState } from 'react';
-import { text } from '@storybook/addon-knobs';
+import { Story } from '@storybook/react';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { ClipboardButton } from './ClipboardButton';
+import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
+import { ClipboardButton, Props } from './ClipboardButton';
 import { Input } from '../Forms/Legacy/Input/Input';
 import mdx from './ClipboardButton.mdx';
 
-const getKnobs = () => {
-  return {
-    buttonText: text('Button text', 'Copy to clipboard'),
-    inputText: text('Input', 'go run build.go -goos linux -pkg-arch amd64 ${OPT} package-only'),
-    clipboardCopyMessage: text('Copy message', 'Value copied to clipboard'),
-  };
-};
-
-const Wrapper = () => {
-  const { inputText, buttonText } = getKnobs();
-  const [copyMessage, setCopyMessage] = useState('');
-
-  return (
-    <div style={{ width: '100%' }}>
-      <div style={{ display: 'flex', width: '100%', marginBottom: '1em' }}>
-        <ClipboardButton
-          variant="secondary"
-          getText={() => getKnobs().inputText}
-          onClipboardCopy={() => setCopyMessage(getKnobs().clipboardCopyMessage)}
-        >
-          {buttonText}
-        </ClipboardButton>
-        <Input value={inputText} onChange={() => {}} />
-      </div>
-      <span>{copyMessage}</span>
-    </div>
-  );
-};
-
 export default {
   title: 'Buttons/ClipboardButton',
   component: ClipboardButton,
@@ -42,7 +14,45 @@ export default {
     docs: {
       page: mdx,
     },
+    knobs: {
+      disable: true,
+    },
+  },
+  argTypes: {
+    size: NOOP_CONTROL,
+    variant: NOOP_CONTROL,
+    icon: NOOP_CONTROL,
+    className: NOOP_CONTROL,
+    fullWidth: NOOP_CONTROL,
   },
 };
 
-export const copyToClipboard = () => <Wrapper />;
+interface StoryProps extends Partial<Props> {
+  inputText: string;
+  buttonText: string;
+}
+
+const Wrapper: Story<StoryProps> = (args) => {
+  const [copyMessage, setCopyMessage] = useState('');
+  const clipboardCopyMessage = 'Value copied to clipboard';
+  return (
+    <div style={{ width: '100%' }}>
+      <div style={{ display: 'flex', width: '100%', marginBottom: '1em' }}>
+        <ClipboardButton
+          variant="secondary"
+          getText={() => args.inputText}
+          onClipboardCopy={() => setCopyMessage(clipboardCopyMessage)}
+        >
+          {args.buttonText}
+        </ClipboardButton>
+        <Input value={args.inputText} onChange={() => {}} />
+      </div>
+      <span>{copyMessage}</span>
+    </div>
+  );
+};
+export const CopyToClipboard = Wrapper.bind({});
+CopyToClipboard.args = {
+  inputText: 'go run build.go -goos linux -pkg-arch amd64 ${OPT} package-only',
+  buttonText: 'Copy to clipboard',
+};