refactor Button story

Author: Lukas742

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

@@ -0,0 +1,65 @@
+import {ArgsTable, Canvas, Meta, Story} from '@storybook/addon-docs/blocks';
+import {Button} from '@ui5/webcomponents-react/lib/Button';
+import {ButtonDesign} from '@ui5/webcomponents-react/lib/ButtonDesign';
+import '@ui5/webcomponents-icons/dist/icons/employee.js';
+import {CSSProperties} from 'react';
+
+import {createSelectArgTypes} from '@shared/stories/createSelectArgTypes';
+import {DocsHeader} from '@shared/stories/DocsHeader';
+
+<Meta
+    title="UI5 Web Components / Button"
+    component={Button}
+    argTypes={{
+        ...createSelectArgTypes({design: ButtonDesign}),
+        children: {control: 'text'},
+        slot: {control: {disable: true}},
+        ref: {control: {disable: true}},
+        style: {
+            type: CSSProperties,
+            description:
+                'Element style which will be appended to the most outer element of a component. Use this prop carefully, some css properties might break the component.'
+        },
+        className: {
+            type: 'string',
+            description:
+                'CSS Class Name which will be appended to the most outer element of a component. Use this prop carefully, overwriting CSS rules might break the component.'
+        },
+        tooltip: {type: 'string', description: 'A tooltip which will be shown on hover'}
+    }}
+    args={{
+        design: ButtonDesign.Default,
+        icon: 'employee',
+        children: 'Button Text',
+        style: {},
+        className: '',
+        tooltip: '',
+        slot: '',
+        ref: null
+    }}
+/>
+
+<DocsHeader/>
+
+<Canvas>
+    <Story name="Default">
+        {(args) => {
+            return <Button {...args} />;
+        }}
+    </Story>
+</Canvas>
+
+<ArgsTable story="."/>
+<div style={{fontFamily: 'var(--sapFontFamily)', fontSize: 'var(--sapFontSize)', color: 'var(--sapTextColor)'}}>
+    <h3>Usage</h3>
+    For the <code>Button</code> UI, you can define text, icon, or both. You can also specify whether the text or the
+    icon is
+    displayed first. <br/><br/>
+    You can choose from a set of predefined types that offer different styling to correspond to the triggered action.
+    <br/><br/>
+    You can set the <code>Button</code> as enabled or disabled. An enabled <code>Button</code> can be pressed by
+    clicking or
+    tapping it. The button changes its style to provide visual feedback to the user that it is pressed or hovered over
+    with
+    the mouse cursor. A disabled <code>Button</code> appears inactive and cannot be pressed.
+</div>