event part in storybook fixed (#2345)

* fix: event part in storybook fixed

* fix: german versions fixed

packages/storybook-vue/stories/setup_and_info/ScaleAndAngular_de.md

@@ -72,12 +72,12 @@ Nun solltest du in der Lage sein, Scale-Komponenten in deinen Templates zu verwe
 
 ## Events in Angular
 
-Um Konflikte mit Standard-Events zu vermeiden und für beste Kompatibilität mit anderen Libraries und Frameworks, sind die Custom Events, die von einigen Scale-Komponenten ausgegeben werden, mit dem Prefix `scale` gekennzeichnet. Event-Namen werden in camelCase-Syntax geschrieben (z. B. scaleChange). Die Dokumentation zu Custom Events findest du auf den jeweiligen Komponentenseiten im Abschnitt "docs".
+Um Konflikte mit Standard-Events zu vermeiden und für bessere Kompatibilität mit anderen Libraries und Frameworks, sind Custom Events mit dem Prefix `scale` gekennzeichnet. Event-Namen werden in kebab-case-Syntax geschrieben (z.B. `scale-change`). Beachte, dass die Events vor v3 im сamelCase geschrieben wurden (z.B. `scaleChange`). Diese sind jetzt veraltet, aber noch verfügbar, um die Abwärtskompatibilität zu gewährleisten. Für die neuesten Komponenten gelten nur noch Events im kebab-case. Die Dokumentation zu Custom Events findest du auf den entsprechenden Komponentenseiten im Abschnitt "Docs".
 
 An Events mit dem Prefix `scale` kannst du reguläre Angular-Syntax anbinden:
 
 ```html
-<scale-slider (scaleInput)="setValue($event)"></scale-slider>
+<scale-slider (scale-input)="setValue($event)"></scale-slider>
 ```
 
 ## Reactive Forms

packages/storybook-vue/stories/setup_and_info/ScaleAndAngular_en.md

@@ -72,12 +72,12 @@ You should now be able to use Scale components in your templates:
 
 ## Events in Angular
 
-In order to prevent collisions with standard events and for better compatibility with other libraries and frameworks, the custom events emitted by some Scale components are prefixed with `scale`. Event names are camelCased (e.g. `scaleChange`). You can find the documentation on these custom events on the respective component pages in the "docs" section.
+In order to prevent collisions with standard events and for better compatibility with other libraries and frameworks, the custom events emitted by some Scale components are prefixed with `scale`. Event names are kebab-cased (e.g. scale-change). Note, that before v3 events were camelCased (e.g. `scaleChange`), these are now deprecated, but still available for maintaining backward compatibility. For newest components only kebab-case events apply. You can find the documentation to custom events on the respective component pages in the "docs" section.
 
 You can bind to `scale`-prefixed events with the regular Angular syntax:
 
 ```html
-<scale-slider (scaleInput)="setValue($event)"></scale-slider>
+<scale-slider (scale-input)="setValue($event)"></scale-slider>
 ```
 
 ## Reactive Forms

packages/storybook-vue/stories/setup_and_info/ScaleAndReact_de.md

@@ -62,7 +62,7 @@ React übermittelt Daten zu Custom Elements nicht als Properties, sondern als HT
 
 ### Custom Events
 
-React hat sein eigenes [Synthetic Event System](https://reactjs.org/docs/handling-events.html), weshalb Custom Events nicht deklarativ angebunden werden können. `<scale-button onScaleChange={handleChange}>` wird nicht funktionieren.
+React hat sein eigenes [Synthetic Event System](https://reactjs.org/docs/handling-events.html), weshalb Custom Events nicht deklarativ angebunden werden können. `<scale-button on-scale-change={handleChange}>` wird nicht funktionieren.
 
 Diese Einschränkung ohne Hilfe zu umgehen, kann aufwändig sein und erfordert imperativen Code. Wir empfehlen die Verwendung eines Wrappers oder Interop Layers.
 
@@ -82,17 +82,19 @@ const App = () => {
   const handleInput = (event) => {
     // it works!
   };
-  return <ScaleSlider label="Example" onScaleInput={handleInput}></ScaleSlider>;
+  return (
+    <ScaleSlider label="Example" on-scale-input={handleInput}></ScaleSlider>
+  );
 };
 
 export default App;
 ```
 
-Bitte beachten Sie, dass es wichtig ist, das Wort "on" vor dem Ereignisnamen zu verwenden, wenn Sie benutzerdefinierte Ereignisse von einer Skala in einem Wrapper verwenden. "scaleChange" sollte zum Beispiel als "onScaleChange" geschrieben werden.
+Bitte beachten Sie, dass es wichtig ist, das Wort "on" vor dem Ereignisnamen zu verwenden, wenn Sie benutzerdefinierte Ereignisse von einer Skala in einem Wrapper verwenden. "scale-change" sollte zum Beispiel als "on-scale-change" geschrieben werden.
 
 ## Events in React
 
-Um Konflikte mit Standard-Events zu vermeiden und für bessere Kompatibilität mit anderen Libraries und Frameworks, sind Custom Events mit dem Prefix `scale` gekennzeichnet. Event-Namen werden in camelCase-Syntax geschrieben (z.B. `scaleChange`) Die Dokumentation zu Custom Events findest du auf den entsprechenden Komponentenseiten im Abschnitt "Docs".
+Um Konflikte mit Standard-Events zu vermeiden und für bessere Kompatibilität mit anderen Libraries und Frameworks, sind Custom Events mit dem Prefix `scale` gekennzeichnet. Event-Namen werden in kebab-case-Syntax geschrieben (z.B. `scale-change`). Beachte, dass die Events vor v3 im сamelCase geschrieben wurden (z.B. `scaleChange`). Diese sind jetzt veraltet, aber noch verfügbar, um die Abwärtskompatibilität zu gewährleisten. Für die neuesten Komponenten gelten nur noch Events im kebab-case. Die Dokumentation zu Custom Events findest du auf den entsprechenden Komponentenseiten im Abschnitt "Docs".
 
 Aufgrund von Reacts [Synthetic Events](https://reactjs.org/docs/handling-events.html), bedarf das Binding von Custom Events etwas Mehraufwand. Nutze wie oben beschrieben einen Interop Layer oder alternativ [`ref`](https://reactjs.org/docs/refs-and-the-dom.html), um `addEventListener` imperativ anzuwenden.
 

packages/storybook-vue/stories/setup_and_info/ScaleAndReact_en.md

@@ -62,7 +62,7 @@ React passes all data to custom elements not as props but as HTML attributes whi
 
 ### Custom Events
 
-React has its own [synthetic event system](https://reactjs.org/docs/handling-events.html), which makes it impossible to declaratively bind to custom events. That means `<scale-button onScaleChange={handleChange}>` won't work.
+React has its own [synthetic event system](https://reactjs.org/docs/handling-events.html), which makes it impossible to declaratively bind to custom events. That means `<scale-button on-scale-change={handleChange}>` won't work.
 
 Working around these limitations without help is possible but can be cumbersome and requires some imperative code. So we recommend using a wrapper or interop layer to make things easier.
 
@@ -82,17 +82,19 @@ const App = () => {
   const handleInput = (event) => {
     // it works!
   };
-  return <ScaleSlider label="Example" onScaleInput={handleInput}></ScaleSlider>;
+  return (
+    <ScaleSlider label="Example" on-scale-input={handleInput}></ScaleSlider>
+  );
 };
 
 export default App;
 ```
 
-Please note that when using any custom events from scale in a wrapper, it is important to include "on" before the event name. For example, "scaleChange" should be written as "onScaleChange.
+Please note that when using any custom events from scale in a wrapper, it is important to include "on" before the event name. For example, "scale-change" should be written as "on-scale-change".
 
 ## Events in React
 
-In order to prevent collisions with standard events and for better compatibility with other libraries and frameworks, the custom events emitted by some Scale components are prefixed with `scale`. Event names are camelCased (e.g. `scaleChange`). You can find the documentation for these custom events on the respective component pages in the "docs" section.
+In order to prevent collisions with standard events and for better compatibility with other libraries and frameworks, the custom events emitted by some Scale components are prefixed with `scale`. Event names are kebab-cased (e.g. scale-change). Note, that before v3 events were camelCased (e.g. `scaleChange`), these are now deprecated, but still available for maintaining backward compatibility. For newest components only kebab-case events apply. You can find the documentation to custom events on the respective component pages in the "docs" section.
 
 Due to React's [synthetic events](https://reactjs.org/docs/handling-events.html), binding to custom events requires some extra work. You can use an interop layer like the ones listed above, or alternatively use [`ref`](https://reactjs.org/docs/refs-and-the-dom.html) to bind imperatively with `addEventListener`.
 

packages/storybook-vue/stories/setup_and_info/ScaleAndVue_de.md

@@ -100,12 +100,12 @@ Nun solltest du in der Lage sein, Scale-Komponenten in deinen Templates zu verwe
 
 ## Events in Vue
 
-Um Konflikte mit Standard-Events zu vermeiden und für beste Kompatibilität mit anderen Libraries und Frameworks, sind die Custom Events, die von einigen Scale-Komponenten ausgegeben werden, mit dem Prefix `scale` gekennzeichnet. Event-Namen werden in camelCase-Syntax geschrieben (z. B. scaleChange). Die Dokumentation zu Custom Events findest du auf den jeweiligen Komponentenseiten im Abschnitt "Docs".
+Um Konflikte mit Standard-Events zu vermeiden und für bessere Kompatibilität mit anderen Libraries und Frameworks, sind Custom Events mit dem Prefix `scale` gekennzeichnet. Event-Namen werden in kebab-case-Syntax geschrieben (z.B. `scale-change`). Beachte, dass die Events vor v3 im сamelCase geschrieben wurden (z. B. `scaleChange`). Diese sind jetzt veraltet, aber noch verfügbar, um die Abwärtskompatibilität zu gewährleisten. Für die neuesten Komponenten gelten nur noch Events im kebab-case. Die Dokumentation zu Custom Events findest du auf den entsprechenden Komponentenseiten im Abschnitt "Docs".
 
 An Events mit dem Prefix `scale` kannst du reguläre Vue-Syntax anbinden:
 
 ```html
-<scale-slider @scaleInput="handleInput"></scale-slider>
+<scale-slider @scale-input="handleInput"></scale-slider>
 ```
 
 ## Form Input Bindings
@@ -117,7 +117,7 @@ Du kannst ganz einfach die gleichen Ergebnisse erzielen:
 ```html
 <scale-text-field
   :value="example"
-  @scaleChange="example = $event.target.value"
+  @scale-change="example = $event.target.value"
 ></scale-text-field>
 ```
 

packages/storybook-vue/stories/setup_and_info/ScaleAndVue_en.md

@@ -100,12 +100,12 @@ You should now be able to use Scale components in your templates:
 
 ## Events in Vue
 
-In order to prevent collisions with standard events and for better compatibility with other libraries and frameworks, the custom events emitted by some Scale components are prefixed with `scale`. Event names are camelCased (e.g. `scaleChange`). You can find the documentation for these custom events on the respective component pages in the "docs" section.
+In order to prevent collisions with standard events and for better compatibility with other libraries and frameworks, the custom events emitted by some Scale components are prefixed with `scale`. Event names are kebab-cased (e.g. scale-change). Note, that before v3 events were camelCased (e.g. `scaleChange`), these are now deprecated, but still available for maintaining backward compatibility. For newest components only kebab-case events apply. You can find the documentation to custom events on the respective component pages in the "docs" section.
 
 You can bind to `scale`-prefixed events with the regular Vue syntax:
 
 ```html
-<scale-slider @scaleInput="handleInput"></scale-slider>
+<scale-slider @scale-input="handleInput"></scale-slider>
 ```
 
 ## Form Input Bindings
@@ -117,7 +117,7 @@ You can achieve the same results quite easily:
 ```html
 <scale-text-field
   :value="example"
-  @scaleChange="example = $event.target.value"
+  @scale-change="example = $event.target.value"
 ></scale-text-field>
 ```