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

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'];
+export const Horizontal: Story<LayoutProps> = (args) => {
-
-const spacingVariants = ['xs', 'sm', 'md', 'lg'];
-
-export const horizontal = () => {
-  const justify = select('Justify elements', justifyVariants, 'flex-start');
-  const spacing = select('Elements spacing', spacingVariants, 'sm');
   return (
-    <HorizontalGroup justify={justify as any} spacing={spacing as any}>
+    <HorizontalGroup {...args}>
       <Button>Save</Button>
       <Button>Cancel</Button>
     </HorizontalGroup>
   );
 };
 
-export const vertical = () => {
+export const Vertical: Story<LayoutProps> = (args) => {
-  const justify = select('Justify elements', justifyVariants, 'flex-start');
-  const spacing = select('Elements spacing', spacingVariants, 'sm');
   return (
-    <VerticalGroup justify={justify as any} spacing={spacing as any}>
+    <VerticalGroup {...args}>
       <Button>Save</Button>
       <Button>Cancel</Button>
     </VerticalGroup>