feat: adjust card story (#6)

storybookjs · Nov 11, 2021 · 1303714 · 1303714
1 parent b47c859
commit 1303714
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/stories/libraries/Paper/Card.stories.tsx b/stories/libraries/Paper/Card.stories.tsx
@@ -2,16 +2,18 @@ import React from 'react';
 import { ComponentMeta, ComponentStoryObj } from '@storybook/react';
 import { Provider as PaperProvider, DefaultTheme } from 'react-native-paper';
 import { Card } from './Card';
+import { View } from 'react-native';
 
 export default {
   component: Card,
-  decorators: [
-    (Story) => (
-      <PaperProvider theme={DefaultTheme}>
-        <Story />
-      </PaperProvider>
-    ),
-  ],
+
+  render: (args) => (
+    <PaperProvider theme={DefaultTheme}>
+      <View style={{ width: 480 }}>
+        <Card {...args} />
+      </View>
+    </PaperProvider>
+  ),
 } as ComponentMeta<typeof Card>;
 
 export const Basic: ComponentStoryObj<typeof Card> = {

diff --git a/stories/libraries/Paper/Card.tsx b/stories/libraries/Paper/Card.tsx
@@ -30,7 +30,10 @@ export const Card = ({ title, content, onCancel, onConfirm }: CardProps) => (
     <PaperCard.Content>
       <Paragraph>{content}</Paragraph>
     </PaperCard.Content>
-    <PaperCard.Cover source={{ uri: 'https://picsum.photos/700' }} />
+    <PaperCard.Cover
+      source={{ uri: require('./picture.png') }}
+      resizeMethod='scale'
+    />
     <PaperCard.Actions>
       <Button onPress={onCancel}>Cancel</Button>
       <Button onPress={onConfirm}>Ok</Button>

diff --git a/stories/libraries/Paper/picture.png b/stories/libraries/Paper/picture.png