refactor Switch main description + story

Author: Lukas742

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

@@ -0,0 +1,50 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Switch } from '@ui5/webcomponents-react/lib/Switch';
+import { CSSProperties, Ref } from 'react';
+
+import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
+import { DocsHeader } from '@shared/stories/DocsHeader';
+
+<Meta
+  title="UI5 Web Components / Switch"
+  component={Switch}
+  argTypes={{
+    ...createSelectArgTypes({}),
+    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={{
+    style: {},
+    className: '',
+    tooltip: '',
+    slot: '',
+    ref: null
+  }}
+/>
+
+<DocsHeader />
+
+<Canvas>
+  <Story name="Default">
+    {(args) => {
+      return <Switch {...args} />;
+    }}
+  </Story>
+</Canvas>
+
+<ArgsTable story="." />
+<div style={{fontFamily:'var(--sapFontFamily)', fontSize:'var(--sapFontSize)', color:'var(--sapTextColor)'}}>
+<h3>Keyboard Handling</h3>
+The state can be changed by pressing the Space and Enter keys.
+</div>

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

@@ -35,7 +35,7 @@ export interface SwitchPropTypes extends Omit<WithWebComponentPropTypes, 'onChan
  * The <code>Switch</code> component is used for changing between binary states. <br />
  The component can display texts, that will be switched, based on the component state, via the <code>textOn</code> and
  <code>textOff</code> properties, but texts longer than 3 letters will be cutted off. <br />
- However, users are able to customize the width of <code>Switch</code> with pure CSS (&lt;Switch style="width: 200px">),
+ However, users are able to customize the width of <code>Switch</code> with pure CSS (&lt;Switch style={{width: "200px"}}/>),
  and set widths, depending on the texts they would use. <br />
  Note: the component would not automatically stretch to fit the whole text width.