From 62ddf5b7b4428f3bd36781a4c7244ed7fe204d69 Mon Sep 17 00:00:00 2001
From: Uchechukwu Obasi <obasiuche62@gmail.com>
Date: Thu, 8 Apr 2021 14:42:31 +0100
Subject: [PATCH] Layout: updates story from knobs to control (#32761)

* Layout: updates story from knobs to control

* exported default as meta

* removes unnecessary prop and disables knobs
---
 .../src/components/Layout/Layout.story.tsx    | 55 ++++++++++++++-----
 1 file changed, 40 insertions(+), 15 deletions(-)

diff --git a/packages/grafana-ui/src/components/Layout/Layout.story.tsx b/packages/grafana-ui/src/components/Layout/Layout.story.tsx
index 41f9ac7742f..498c3e564a3 100644
--- a/packages/grafana-ui/src/components/Layout/Layout.story.tsx
+++ b/packages/grafana-ui/src/components/Layout/Layout.story.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { Layout } from './Layout';
+import { Layout, LayoutProps } from './Layout';
 import { Button, VerticalGroup, HorizontalGroup } from '@grafana/ui';
 import { withStoryContainer } from '../../utils/storybook/withStoryContainer';
-import { select } from '@storybook/addon-knobs';
+import { Story, Meta } from '@storybook/react';
 import mdx from './Layout.mdx';
 
 export default {
@@ -15,29 +15,54 @@ export default {
     docs: {
       page: mdx,
     },
+    knobs: {
+      disabled: true,
+    },
+    controls: {
+      exclude: ['orientation'],
+    },
   },
-};
+  args: {
+    justify: 'flex-start',
+    spacing: 'sm',
+    align: 'center',
+    wrap: false,
+    width: '100%',
+  },
+  argTypes: {
+    justify: {
+      control: {
+        type: 'select',
+        options: ['flex-start', 'flex-end', 'space-between', 'center'],
+      },
+    },
+    align: {
+      control: {
+        type: 'select',
+        options: ['flex-start', 'flex-end', 'center', 'normal'],
+      },
+    },
+    spacing: {
+      control: {
+        type: 'select',
+        options: ['xs', 'sm', 'md', 'lg'],
+      },
+    },
+  },
+} as Meta;
 
-const justifyVariants = ['flex-start', 'flex-end', 'space-between'];
-
-const spacingVariants = ['xs', 'sm', 'md', 'lg'];
-
-export const horizontal = () => {
-  const justify = select('Justify elements', justifyVariants, 'flex-start');
-  const spacing = select('Elements spacing', spacingVariants, 'sm');
+export const Horizontal: Story<LayoutProps> = (args) => {
   return (
-    <HorizontalGroup justify={justify as any} spacing={spacing as any}>
+    <HorizontalGroup {...args}>
       <Button>Save</Button>
       <Button>Cancel</Button>
     </HorizontalGroup>
   );
 };
 
-export const vertical = () => {
-  const justify = select('Justify elements', justifyVariants, 'flex-start');
-  const spacing = select('Elements spacing', spacingVariants, 'sm');
+export const Vertical: Story<LayoutProps> = (args) => {
   return (
-    <VerticalGroup justify={justify as any} spacing={spacing as any}>
+    <VerticalGroup {...args}>
       <Button>Save</Button>
       <Button>Cancel</Button>
     </VerticalGroup>