refactor RatingIndicator prop description + story

Author: Lukas742

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

@@ -1,13 +1,36 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
-import { RatingIndicator } from '@ui5/webcomponents-react/lib/RatingIndicator';
-import { DocsHeader } from '@shared/stories/DocsHeader';
+import {ArgsTable, Canvas, Meta, Story} from '@storybook/addon-docs/blocks';
+import {RatingIndicator} from '@ui5/webcomponents-react/lib/RatingIndicator';
+import {CSSProperties} from 'react';
+
+import {createSelectArgTypes} from '@shared/stories/createSelectArgTypes';
+import {DocsHeader} from '@shared/stories/DocsHeader';
 
 <Meta
-  title="UI5 Web Components / RatingIndicator"
-  component={RatingIndicator}
-  args={{
-    value: 3
-  }}
+    title="UI5 Web Components / RatingIndicator"
+    component={RatingIndicator}
+    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 />
@@ -20,4 +43,8 @@ import { DocsHeader } from '@shared/stories/DocsHeader';
   </Story>
 </Canvas>
 
-<ArgsTable story="." />
+<ArgsTable story="."/>
+<div style={{fontFamily: 'var(--sapFontFamily)', fontSize: 'var(--sapFontSize)', color: 'var(--sapTextColor)'}}>
+    <h3>Usage</h3>
+    The reccomended number of icons is between 5 and 7.
+</div>

packages/main/src/webComponents/RatingIndicator/index.tsx

@@ -18,7 +18,7 @@ export interface RatingIndicatorPropTypes extends Omit<WithWebComponentPropTypes
    */
   readonly?: boolean;
   /**
-   * The indicated value of the rating <br><br> <b>Note:</b> If you set a number which is not round, it would be shown as follows: <ul> <li>1.0 - 1.2 -> 1</li> <li>1.3 - 1.7 -> 1.5</li> <li>1.8 - 1.9 -> 2</li> <ul>
+   * The indicated value of the rating <br><br> <b>Note:</b> If you set a number which is not round, it would be shown as follows: <ul><li>1.0 - 1.2 -> 1</li><li>1.3 - 1.7 -> 1.5</li><li>1.8 - 1.9 -> 2</li></ul>
    */
   value?: number;
   /**