fix: update text-with-icon

treely · Oct 28, 2024 · 8457fb1 · 8457fb1
1 parent 19e0f68
commit 8457fb1
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 14 deletions.
diff --git a/src/components/TextCardWithIcon/TextCardWithIcon.stories.tsx b/src/components/TextCardWithIcon/TextCardWithIcon.stories.tsx
@@ -40,12 +40,10 @@ WithImage.args = {
 export const WithButton = Template.bind({});
 WithButton.args = {
   displayAs: 'column',
-  image: (
-    <img
-      src={storybookCoverUrl}
-      alt="Alt"
-      style={{ height: '100%', width: '100%', objectFit: 'cover' }}
-    />
-  ),
+  button: { text: 'Button', onClick: () => alert('Button clicked') },
+};
+export const AsRowWithButton = Template.bind({});
+AsRowWithButton.args = {
+  displayAs: 'row',
   button: { text: 'Button', onClick: () => alert('Button clicked') },
 };
diff --git a/src/components/TextCardWithIcon/TextCardWithIcon.tsx b/src/components/TextCardWithIcon/TextCardWithIcon.tsx
@@ -45,6 +45,12 @@ export const TextCardWithIcon: React.FC<TextCardWithIconProps> = ({
     </Box>
   );
 
+  const ButtonElement = button && (
+    <Button mt="auto" size="lg" onClick={button.onClick} maxWidth="24">
+      {button.text}
+    </Button>
+  );
+
   return (
     <Box
       px="6"
@@ -85,19 +91,16 @@ export const TextCardWithIcon: React.FC<TextCardWithIconProps> = ({
           mt={image ? '6' : '0'}
         >
           {image && Icon}
-          <Heading as="h6" size="xs" mb="2">
+          <Heading as="h6" size="xs" mb={image ? '0' : '2'}>
             {title}
           </Heading>
         </Flex>
-        <Text size="smRegularNormal" marginBottom="6">
+        <Text size="smRegularNormal" marginBottom="4">
           {text}
         </Text>
+        {displayAs === 'row' && ButtonElement}
       </Flex>
-      {button && (
-        <Button mt="auto" size="lg" onClick={button.onClick}>
-          {button.text}
-        </Button>
-      )}
+      {displayAs === 'column' && ButtonElement}
     </Box>
   );
 };