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

treely · Oct 23, 2024 · cc86666 · cc86666
1 parent 6850fc5
commit cc86666
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 26 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,28 @@ 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' }}
+    />
+  ),
+};
+
+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') },
+};
diff --git a/src/components/TextCardWithIcon/TextCardWithIcon.test.tsx b/src/components/TextCardWithIcon/TextCardWithIcon.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { TextCardWithIcon } from '.';
-import { render, screen } from '../../test/testUtils';
+import { fireEvent, render, screen } from '../../test/testUtils';
 import { TextCardWithIconProps } from './TextCardWithIcon';
 
 const defaultProps: TextCardWithIconProps = {
@@ -33,4 +33,26 @@ describe('The TextCardWithIcon component', () => {
 
     expect(screen.getByRole('img')).toHaveAttribute('alt', 'Alt text');
   });
+
+  it('displays the image', () => {
+    setup({ image: <img alt="Alt text" src="/src" />, displaysAs: 'column' });
+
+    expect(screen.getByRole('img')).toHaveAttribute('alt', 'Alt text');
+  });
+
+  it('displays a button if one is passed in', () => {
+    const onClickSpy = jest.fn();
+    setup({
+      button: {
+        onClick: onClickSpy,
+        text: 'Button text',
+      },
+    });
+
+    expect(screen.getByRole('button')).toHaveTextContent('Button text');
+
+    fireEvent.click(screen.getByRole('button'));
+
+    expect(onClickSpy).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/src/components/TextCardWithIcon/TextCardWithIcon.tsx b/src/components/TextCardWithIcon/TextCardWithIcon.tsx
@@ -1,11 +1,14 @@
-import { Box, Heading, Text } from '@chakra-ui/react';
+import { Box, Heading, Text, Flex, Button } 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';
+  button?: { text: string; onClick: () => void };
 
   displayAs?: 'row' | 'column';
 }
@@ -14,30 +17,20 @@ 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"
-  >
+  button,
+}: 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 +43,53 @@ 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>
-);
+  );
+
+  return (
+    <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>
+        {button && (
+          <Button width="full" mt="6" size="lg" onClick={button.onClick}>
+            {button.text}
+          </Button>
+        )}
+      </div>
+    </Box>
+  );
+};