Merge branch 'main' into feat/action-card-test-ids

Author: wklos-iohk

src/design-system/flow-card/flow-card-profile.component.tsx

@@ -14,13 +14,15 @@ interface Props {
   icon?: ReactNode;
   name: string;
   description?: string;
+  testId?: string;
 }
 
 export const Profile = ({
   imageSrc,
   icon,
   name,
   description,
+  testId,
 }: Readonly<Props>): JSX.Element => {
   const renderProfileImage = () => {
     if (typeof icon !== 'undefined') {
@@ -34,18 +36,33 @@ export const Profile = ({
     <div className={cx.container}>
       <Grid columns="$fitContent" gutters="$0">
         <Cell>
-          <Flex className={cx.image} alignItems="center" h="$fill">
+          <Flex
+            className={cx.image}
+            alignItems="center"
+            h="$fill"
+            data-testid={testId ? `${testId}-image` : 'profile-image'}
+          >
             {renderProfileImage()}
           </Flex>
         </Cell>
         <Cell>
           <Flex justifyContent="center" flexDirection="column" h="$fill">
-            <Text.Body.Large color="primary" weight="$semibold">
+            <Text.Body.Large
+              color="primary"
+              weight="$semibold"
+              data-testid={testId ? `${testId}-name` : 'profile-name'}
+            >
               {name}
             </Text.Body.Large>
             {description === undefined ? undefined : (
               <Box>
-                <Text.Body.Normal color="secondary" weight="$semibold">
+                <Text.Body.Normal
+                  color="secondary"
+                  weight="$semibold"
+                  data-testid={
+                    testId ? `${testId}-description` : 'profile-description'
+                  }
+                >
                   {description}
                 </Text.Body.Normal>
               </Box>