feat: add image to text-card-with-icon

treely · Oct 22, 2024 · 43a7d43 · 43a7d43
1 parent 6850fc5
commit 43a7d43
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 25 deletions.
diff --git a/src/components/TextCardWithIcon/TextCardWithIcon.stories.tsx b/src/components/TextCardWithIcon/TextCardWithIcon.stories.tsx
@@ -3,6 +3,7 @@ import { StoryFn, Meta } from '@storybook/react';
 
 import { TextCardWithIcon } from './TextCardWithIcon';
 import { Heart } from '@phosphor-icons/react';
+import { storybookCoverUrl } from '../../test/storybookMedia';
 
 export default {
   title: 'components/TextCardWithIcon',
@@ -23,3 +24,15 @@ export const AsColumn = Template.bind({});
 AsColumn.args = {
   displayAs: 'column',
 };
+
+export const WithImage = Template.bind({});
+WithImage.args = {
+  displayAs: 'column',
+  image: (
+    <img
+      src={storybookCoverUrl}
+      alt="Alt"
+      style={{ height: '100%', width: '100%', objectFit: 'cover' }}
+    />
+  ),
+};
diff --git a/src/components/TextCardWithIcon/TextCardWithIcon.tsx b/src/components/TextCardWithIcon/TextCardWithIcon.tsx
@@ -1,10 +1,12 @@
-import { Box, Heading, Text } from '@chakra-ui/react';
+import { Box, Heading, Text, Flex } from '@chakra-ui/react';
 import React, { ReactNode } from 'react';
+import { css } from '@emotion/react';
 
 export interface TextCardWithIconProps {
   title: string;
   text: string;
   icon: ReactNode;
+  image?: ReactNode;
   height?: 'full' | 'auto';
 
   displayAs?: 'row' | 'column';
@@ -14,30 +16,19 @@ export const TextCardWithIcon: React.FC<TextCardWithIconProps> = ({
   title,
   text,
   icon,
+  image,
   height = 'auto',
   displayAs = 'row',
-}: TextCardWithIconProps) => (
-  <Box
-    px="6"
-    py="8"
-    marginBottom="4"
-    border="1.5px solid var(--boemly-colors-gray-200)"
-    borderRadius="2xl"
-    data-testid="text-card-with-icon"
-    display="flex"
-    alignItems={displayAs === 'row' ? 'center' : 'flex-start'}
-    flexDir={displayAs}
-    height={height}
-    backgroundColor="white"
-  >
+}: TextCardWithIconProps) => {
+  const Icon = (
     <Box
       width={displayAs === 'row' ? '16' : '8'}
       minWidth={displayAs === 'row' ? '16' : '8'}
       height={displayAs === 'row' ? '16' : '8'}
       backgroundColor={displayAs === 'row' ? 'primary.50' : 'transparent'}
       borderRadius={displayAs === 'row' ? 'full' : '0'}
-      mr="8"
-      mb={displayAs === 'row' ? '0' : '6'}
+      mr={image ? '0' : '8'}
+      mb={displayAs === 'row' || image ? '0' : '6'}
       display="flex"
       alignItems="center"
       justifyContent="space-around"
@@ -50,11 +41,56 @@ export const TextCardWithIcon: React.FC<TextCardWithIconProps> = ({
         {icon}
       </Box>
     </Box>
-    <div>
-      <Heading as="h6" size="xs" mb="2">
-        {title}
-      </Heading>
-      <Text size="smRegularNormal">{text}</Text>
-    </div>
-  </Box>
-);
+  );
+
+  const Card = (
+    <Box
+      px="6"
+      py="8"
+      marginBottom="4"
+      border="1.5px solid var(--boemly-colors-gray-200)"
+      borderRadius="2xl"
+      data-testid="text-card-with-icon"
+      display="flex"
+      alignItems={displayAs === 'row' ? 'center' : 'flex-start'}
+      flexDir={displayAs}
+      height={height}
+      backgroundColor="white"
+    >
+      {image && displayAs === 'column' && (
+        <Box
+          position="relative"
+          height="36"
+          width="full"
+          css={css`
+            & span,
+            div,
+            img {
+              border-radius: var(--boemly-radii-xl);
+            }
+          `}
+        >
+          {image}
+        </Box>
+      )}
+      {!image && Icon}
+      <div>
+        <Flex alignItems="center" gap="2" mb={image ? '2' : '0'} mt={image ? '6' : '0'}>
+          {image && Icon}
+          <Heading as="h6" size="xs" mb="2">
+            {title}
+          </Heading>
+        </Flex>
+        <Text size="smRegularNormal">{text}</Text>
+      </div>
+    </Box>
+  );
+  return (
+    <Box display="flex" flexDir="row" gap="4">
+      {Card}
+      {Card}
+      {Card}
+    </Box>
+  );
+  // return Card;
+};