Card and Carousel

Author: MarcusNotheis

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

@@ -1,5 +1,3 @@
-import { action } from '@storybook/addon-actions';
-import { boolean, text } from '@storybook/addon-knobs';
 import '@ui5/webcomponents-icons/dist/icons/person-placeholder.js';
 import { Avatar } from '@ui5/webcomponents-react/lib/Avatar';
 import { AvatarBackgroundColor } from '@ui5/webcomponents-react/lib/AvatarBackgroundColor';
@@ -10,18 +8,23 @@ import React from 'react';
 
 export default {
   title: 'UI5 Web Components / Card',
-  component: Card
+  component: Card,
+  args: {
+    heading: 'Team Space',
+    status: '3 of 5',
+    subheading: 'Direct Reports'
+  }
 };
 
-export const generatedDefaultStory = () => (
+export const generatedDefaultStory = (props) => (
   <Card
-    headerInteractive={boolean('headerInteractive', false)}
-    heading={text('heading', 'Team Space')}
-    status={text('status', '3 of 5')}
-    subheading={text('subheading', 'Direct Reports')}
     avatar={<Avatar backgroundColor={AvatarBackgroundColor.Accent3} icon="person-placeholder" />}
-    onHeaderClick={action('onHeaderClick')}
     style={{ width: '300px' }}
+    headerInteractive={props.headerInteractive}
+    heading={props.heading}
+    status={props.status}
+    subheading={props.subheading}
+    onHeaderClick={props.onHeaderClick}
   >
     <List>
       <StandardListItem description="Software Architect">Richard Wilson</StandardListItem>

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

@@ -1,25 +1,31 @@
-import { action } from '@storybook/addon-actions';
-import { boolean, number, select } from '@storybook/addon-knobs';
+import { createSelectArgTypes } from '@shared/stories/createSelectArgTypes';
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
 import { Carousel } from '@ui5/webcomponents-react/lib/Carousel';
 import { CarouselArrowsPlacement } from '@ui5/webcomponents-react/lib/CarouselArrowsPlacement';
 import React from 'react';
 
 export default {
   title: 'UI5 Web Components / Carousel',
-  component: Carousel
+  component: Carousel,
+  argTypes: {
+    ...createSelectArgTypes({ arrowsPlacement: CarouselArrowsPlacement })
+  },
+  args: {
+    arrowsPlacement: CarouselArrowsPlacement.Content,
+    selectedIndex: 0
+  }
 };
 
-export const generatedDefaultStory = () => (
+export const generatedDefaultStory = (props) => (
   <Carousel
-    arrowsPlacement={select('arrowsPlacement', CarouselArrowsPlacement, CarouselArrowsPlacement['Content'])}
-    cyclic={boolean('cyclic', false)}
-    hideNavigation={boolean('hideNavigation', false)}
-    itemsPerPageL={number('itemsPerPageL', 1)}
-    itemsPerPageM={number('itemsPerPageM', 1)}
-    itemsPerPageS={number('itemsPerPageS', 1)}
-    onNavigate={action('onNavigate')}
-    selectedIndex={number('selectedIndex', 0)}
+    arrowsPlacement={props.arrowsPlacement}
+    cyclic={props.cyclic}
+    hideNavigation={props.hideNavigation}
+    itemsPerPageL={props.itemsPerPageL}
+    itemsPerPageM={props.itemsPerPageM}
+    itemsPerPageS={props.itemsPerPageS}
+    onNavigate={props.onNavigate}
+    selectedIndex={props.selectedIndex}
   >
     <div style={{ height: '300px', width: '100%', backgroundColor: ThemingParameters.sapInformationBackground }}>
       Carousel Content 1