Migrate Avatar and Badge

Author: MarcusNotheis

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

@@ -5,22 +5,38 @@ import { AvatarFitType } from '@ui5/webcomponents-react/lib/AvatarFitType';
 import { AvatarShape } from '@ui5/webcomponents-react/lib/AvatarShape';
 import { AvatarSize } from '@ui5/webcomponents-react/lib/AvatarSize';
 import React from 'react';
+import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
 
 export default {
   title: 'UI5 Web Components / Avatar',
-  component: Avatar
+  component: Avatar,
+  argTypes: {
+    ...createSelectArgTypes({
+      backgroundColor: AvatarBackgroundColor,
+      imageFitType: AvatarFitType,
+      shape: AvatarShape,
+      size: AvatarSize
+    })
+  },
+  args: {
+    backgroundColor: AvatarBackgroundColor.Accent6,
+    icon: 'employee',
+    imageFitType: AvatarFitType.Cover,
+    shape: AvatarShape.Circle,
+    size: AvatarSize.S
+  }
 };
 
-export const generatedDefaultStory = () => (
+export const generatedDefaultStory = (props) => (
   <Avatar
-    backgroundColor={select('backgroundColor', AvatarBackgroundColor, AvatarBackgroundColor.Accent6)}
-    icon={text('icon', 'employee')}
-    image={text('image', '')}
-    imageFitType={select('imageFitType', AvatarFitType, AvatarFitType.Cover)}
-    initials={text('initials', '')}
-    shape={select('shape', AvatarShape, AvatarShape.Circle)}
-    size={select('size', AvatarSize, AvatarSize.S)}
-    accessibleName={text('accessibleName', '')}
+    backgroundColor={props.backgroundColor}
+    icon={props.icon}
+    image={props.image}
+    imageFitType={props.imageFitType}
+    initials={props.initials}
+    shape={props.shape}
+    size={props.size}
+    accessibleName={props.accessibleName}
   />
 );
 

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

@@ -1,15 +1,28 @@
-import { text } from '@storybook/addon-knobs';
 import { Badge } from '@ui5/webcomponents-react/lib/Badge';
+import { Icon } from '@ui5/webcomponents-react/lib/Icon';
 import React from 'react';
 
 export default {
   title: 'UI5 Web Components / Badge',
-  component: Badge
+  component: Badge,
+  argTypes: {
+    colorScheme: {
+      control: {
+        type: 'number',
+        min: 1,
+        max: 10
+      }
+    }
+  },
+  args: {
+    colorScheme: 1,
+    children: 'Some Content'
+  }
 };
 
-export const generatedDefaultStory = () => (
-  <Badge colorScheme={text('colorScheme', '1')} icon={null}>
-    Some Content
+export const generatedDefaultStory = (props) => (
+  <Badge colorScheme={props.colorScheme} icon={<Icon name="add" />}>
+    {props.children}
   </Badge>
 );
 

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

@@ -1,6 +1,6 @@
 import { withWebComponent } from '@ui5/webcomponents-react/lib/withWebComponent';
 import '@ui5/webcomponents/dist/Badge';
-import React, { FC, ReactNode } from 'react';
+import React, { FC, ReactElement, ReactNode } from 'react';
 import { WithWebComponentPropTypes } from '../../internal/withWebComponent';
 
 export interface BadgePropTypes extends WithWebComponentPropTypes {
@@ -15,7 +15,7 @@ export interface BadgePropTypes extends WithWebComponentPropTypes {
   /**
    * Defines the <code>ui5-icon</code> to be displayed in the <code>ui5-badge</code>.
    */
-  icon?: ReactNode | ReactNode[];
+  icon?: ReactElement;
 }
 
 /**

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

@@ -1,3 +1,4 @@
+import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
 import { Button } from '@ui5/webcomponents-react/lib/Button';
 import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign';
 import React from 'react';
@@ -6,9 +7,7 @@ export default {
   title: 'UI5 Web Components / Button',
   component: Button,
   argTypes: {
-    design: {
-      control: { type: 'options', controlType: 'select', options: ButtonDesign }
-    },
+    ...createSelectArgTypes({ design: ButtonDesign }),
     onClick: { control: { type: 'function' } }
   },
   args: {

shared/stories/createSelectArgTypes.ts

@@ -0,0 +1,19 @@
+type ArgDefinition = {
+  [key: string]: Record<string, string>;
+};
+
+export const createSelectArgTypes = (definition: ArgDefinition) => {
+  const argTypes = {};
+
+  for (let arg in definition) {
+    argTypes[arg] = {
+      control: {
+        type: 'options',
+        controlType: 'select',
+        options: definition[arg]
+      }
+    };
+  }
+
+  return argTypes;
+};