update button story

Author: MarcusNotheis

.storybook/preview.js

@@ -22,7 +22,9 @@ addParameters({
         : a[1].id.localeCompare(b[1].id, undefined, { numeric: true, caseFirst: 'upper' });
     },
     showRoots: true
-  }
+  },
+  passArgsFirst: true,
+  actions: { argTypesRegex: '^on.*' }
 });
 
 const ThemeContainer = ({ theme, contentDensity, children, direction }) => {

packages/main/src/webComponents/Button/Button.stories.tsx

@@ -1,26 +1,28 @@
-import { action } from '@storybook/addon-actions';
-import { boolean, select, text } from '@storybook/addon-knobs';
 import { Button } from '@ui5/webcomponents-react/lib/Button';
 import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign';
 import React from 'react';
 
 export default {
   title: 'UI5 Web Components / Button',
-  component: Button
+  component: Button,
+  argTypes: {
+    design: {
+      defaultValue: ButtonDesign.Default,
+      control: { type: 'options', controlType: 'select', options: ButtonDesign }
+    },
+    icon: { defaultValue: 'add' },
+    children: { defaultValue: 'Button Text' },
+    onClick: { control: { type: 'function' } }
+  }
 };
 
-export const generatedDefaultStory = () => (
-  <Button
-    design={select('design', ButtonDesign, ButtonDesign.Default)}
-    disabled={boolean('disabled', false)}
-    icon={text('icon', 'add')}
-    iconEnd={boolean('iconEnd', false)}
-    submits={boolean('submits', false)}
-    onClick={action('onClick')}
-  >
-    Some Content
-  </Button>
-);
+export const generatedDefaultStory = ({ design, disabled, icon, iconEnd, submits, onClick, children }) => {
+  return (
+    <Button design={design} disabled={disabled} icon={icon} iconEnd={iconEnd} submits={submits} onClick={onClick}>
+      {children}
+    </Button>
+  );
+};
 
 generatedDefaultStory.story = {
   name: 'Generated default story'