Update BusyIndicator.stories.tsx

Author: MarcusNotheis

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

@@ -1,20 +1,31 @@
-import { boolean, select, text } from '@storybook/addon-knobs';
+import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
 import { BusyIndicator } from '@ui5/webcomponents-react/lib/BusyIndicator';
 import { BusyIndicatorSize } from '@ui5/webcomponents-react/lib/BusyIndicatorSize';
+import { Text } from '@ui5/webcomponents-react/lib/Text';
 import React from 'react';
 
 export default {
   title: 'UI5 Web Components / BusyIndicator',
-  component: BusyIndicator
+  component: BusyIndicator,
+  argTypes: {
+    ...createSelectArgTypes({ sie: BusyIndicatorSize })
+  },
+  args: {
+    active: true,
+    text: 'Loading...'
+  }
 };
 
-export const generatedDefaultStory = () => (
-  <BusyIndicator
-    active={boolean('active', true)}
-    size={select('size', BusyIndicatorSize, BusyIndicatorSize.Medium)}
-    text={text('text', 'Loading...')}
-  >
-    Some Content
+export const generatedDefaultStory = (props) => (
+  <BusyIndicator active={props.active} size={props.size} text={props.text}>
+    <Text>
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+      dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
+      kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+      sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
+      sanctus est Lorem ipsum dolor sit amet.
+    </Text>
   </BusyIndicator>
 );