refactor Input main description + story

Author: Lukas742

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

@@ -0,0 +1,57 @@
+import {ArgsTable, Canvas, Meta, Story} from '@storybook/addon-docs/blocks';
+import {Input} from '@ui5/webcomponents-react/lib/Input';
+import {InputType} from '@ui5/webcomponents-react/lib/InputType';
+import {ValueState} from '@ui5/webcomponents-react/lib/ValueState';
+import '@ui5/webcomponents-icons/dist/icons/employee.js';
+import {Icon} from '@ui5/webcomponents-react/lib/Icon';
+import {CSSProperties} from 'react';
+import {SuggestionItem} from '@ui5/webcomponents-react/lib/SuggestionItem';
+import {createSelectArgTypes} from '@shared/stories/createSelectArgTypes';
+import {DocsHeader} from '@shared/stories/DocsHeader';
+
+<Meta
+    title="UI5 Web Components / Input"
+    component={Input}
+    subcomponents={{SuggestionItem}}
+    argTypes={{
+        ...createSelectArgTypes({type: InputType, valueState: ValueState}),
+        children: {control: {disable: true}},
+        icon: {control: {disable: true}},
+        valueStateMessage: {control: {disable: true}},
+        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={{
+        type: InputType.Text,
+        valueState: ValueState.None,
+        icon: <Icon name="employee"/>,
+        style: {},
+        className: '',
+        tooltip: '',
+        slot: '',
+        ref: null
+    }}
+/>
+
+<DocsHeader/>
+
+<Canvas>
+    <Story name="Default">
+        {(args) => {
+            return <Input {...args} />;
+        }}
+    </Story>
+</Canvas>
+
+<ArgsTable story="."/>

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

@@ -97,8 +97,7 @@ export interface InputPropTypes extends Omit<WithWebComponentPropTypes, 'onChang
  * The <code>Input</code> component allows the user to enter and edit text or numeric values in one line. <br />
  Additionally, you can provide <code>suggestionItems</code>, that are displayed in a popover right under the input.
  <br /><br />
- The text field can be editable or read-only (<code>readonly</code> property), and it can be enabled or disabled (<code >enabled</code
- >
+ The text field can be editable or read-only (<code>readonly</code> property), and it can be enabled or disabled (<code>enabled</code>
  property). To visualize semantic states, such as "error" or "warning", the <code>valueState</code> property is provided.
  When the user makes changes to the text, the change event is fired, which enables you to react on any text change.
  <br /><br />