From f3a7cb4709e80608cafdc8e4bddfc0b128324d9c Mon Sep 17 00:00:00 2001
From: Uchechukwu Obasi <obasiuche62@gmail.com>
Date: Wed, 24 Feb 2021 12:52:56 +0100
Subject: [PATCH] NamedColorsPalette: updates story from knobs to controls
 (#31443)

---
 .../ColorPicker/NamedColorsPalette.story.tsx  | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx
index 16017a910b4..6c0c0a48e44 100644
--- a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import { NamedColorsPalette } from './NamedColorsPalette';
-import { select } from '@storybook/addon-knobs';
+import { NamedColorsPalette, NamedColorsPaletteProps } from './NamedColorsPalette';
+import { Story } from '@storybook/react';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
+import { NOOP_CONTROL } from '../../utils/storybook/noopControl';
 import { UseState } from '../../utils/storybook/UseState';
 import mdx from './ColorPicker.mdx';
 
@@ -14,20 +15,22 @@ export default {
     docs: {
       page: mdx,
     },
+    knobs: {
+      disable: true,
+    },
+  },
+  argTypes: {
+    selectedColor: { control: { type: 'select', options: ['green', 'red', 'light-blue', 'yellow'] } },
+    theme: NOOP_CONTROL,
+    color: NOOP_CONTROL,
   },
 };
 
-export const namedColors = () => {
-  const selectedColor = select(
-    'Selected color',
-    {
-      Green: 'green',
-      Red: 'red',
-      'Light blue': 'light-blue',
-    },
-    'red'
-  );
+interface StoryProps extends Partial<NamedColorsPaletteProps> {
+  selectedColor: string;
+}
 
+export const NamedColors: Story<StoryProps> = ({ selectedColor }) => {
   return (
     <UseState initialState={selectedColor}>
       {(selectedColor, updateSelectedColor) => {
@@ -39,3 +42,6 @@ export const namedColors = () => {
     </UseState>
   );
 };
+NamedColors.args = {
+  selectedColor: 'red',
+};