From 0992cedbf44e96168758d4936e25c1aff99cfa77 Mon Sep 17 00:00:00 2001
From: Uchechukwu Obasi <obasiuche62@gmail.com>
Date: Wed, 12 May 2021 11:24:22 +0100
Subject: [PATCH] Slider: updates story from knobs to control (#33983)

---
 .../src/components/Slider/Slider.story.tsx    | 51 ++++++++++++-------
 1 file changed, 34 insertions(+), 17 deletions(-)

diff --git a/packages/grafana-ui/src/components/Slider/Slider.story.tsx b/packages/grafana-ui/src/components/Slider/Slider.story.tsx
index 7b98c43bc8e..9a99cfd7d4b 100644
--- a/packages/grafana-ui/src/components/Slider/Slider.story.tsx
+++ b/packages/grafana-ui/src/components/Slider/Slider.story.tsx
@@ -1,30 +1,47 @@
 import React from 'react';
 import { Slider } from '@grafana/ui';
-import { select, number, boolean } from '@storybook/addon-knobs';
+import { SliderProps } from './types';
+import { Story, Meta } from '@storybook/react';
 
 export default {
   title: 'Forms/Slider',
   component: Slider,
-};
+  parameters: {
+    controls: {
+      exclude: ['step', 'formatTooltipResult', 'onChange', 'onAfterChange', 'value', 'tooltipAlwaysVisible'],
+    },
+    knobs: {
+      disabled: true,
+    },
+  },
+  argTypes: {
+    isStep: { name: 'Step' },
+    orientation: { control: { type: 'select', options: ['horizontal', 'vertical'] } },
+  },
+} as Meta;
 
-const getKnobs = () => {
-  return {
-    min: number('min', 0),
-    max: number('max', 100),
-    step: boolean('enable step', false),
-    orientation: select('orientation', ['horizontal', 'vertical'], 'horizontal'),
-    reverse: boolean('reverse', false),
-  };
-};
+interface StoryProps extends Partial<SliderProps> {
+  isStep: boolean;
+}
 
-const SliderWrapper = () => {
-  const { min, max, orientation, reverse, step } = getKnobs();
-  const stepValue = step ? 10 : undefined;
+export const Basic: Story<StoryProps> = (args) => {
   return (
     <div style={{ width: '300px', height: '300px' }}>
-      <Slider min={min} max={max} step={stepValue} orientation={orientation} value={10} reverse={reverse} />
+      <Slider
+        step={args.isStep ? 10 : undefined}
+        value={args.value}
+        min={args.min as number}
+        max={args.max as number}
+        {...args}
+      />
     </div>
   );
 };
-
-export const basic = () => <SliderWrapper />;
+Basic.args = {
+  min: 0,
+  max: 100,
+  value: 10,
+  isStep: false,
+  orientation: 'horizontal',
+  reverse: false,
+};