Merge pull request #79 from input-output-hk/feat/allow-passing-elements-to-asstes-table

feat: allow passing elements to asset table props

Author: szymonmaslowski

src/design-system/assets-table/assets-table-token-amount.component.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import { Flex } from '../flex';
 import { Text } from '../text';
@@ -11,7 +11,7 @@ import type { TypographyVariants } from '../text/text.css';
 
 interface Props {
   amount: string;
-  details: string;
+  details: ReactNode;
   detailsColor?: TypographyVariants['color'];
   detailsWeight?: FontWeights;
   detailsTooltip?: string;

src/design-system/assets-table/assets-table-token-profile.component.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 
 import { Box } from '../box';
 import { Grid, Cell } from '../grid';
@@ -7,26 +7,42 @@ import { Text } from '../text';
 
 import * as cx from './assets-table-token-profile.css';
 
-interface Props {
-  imageSrc: string;
-  name: string;
-  description: string;
+const getImageAlt = ({ alt, name }: { alt?: string; name: ReactNode }) => {
+  if (alt) return alt;
+  return typeof name === 'string' ? name : undefined;
+};
+
+type TokenProfileProps = {
+  alt?: string;
+  image: ReactNode;
+  name: ReactNode;
+  description: ReactNode;
   testId?: string;
-}
+};
 
 export const TokenProfile = ({
-  imageSrc,
+  alt,
+  image,
   name,
   description,
   testId = 'token-profile',
-}: Readonly<Props>): JSX.Element => {
+}: Readonly<TokenProfileProps>): ReactElement => {
+  const imageNode =
+    typeof image === 'string' ? (
+      <Image
+        imageSrc={image}
+        alt={getImageAlt({ alt, name })}
+        testId={`${testId}-icon`}
+      />
+    ) : (
+      image
+    );
+
   return (
     <div className={cx.container} data-testid={testId}>
       <Grid columns="$fitContent" gutters="$0">
         <Cell>
-          <Box mr="$24">
-            <Image imageSrc={imageSrc} alt={name} testId={`${testId}-icon`} />
-          </Box>
+          <Box mr="$24">{imageNode}</Box>
         </Cell>
         <Cell>
           <Text.Body.Large weight="$semibold" data-testid={`${testId}-name`}>

src/design-system/assets-table/assets-table.stories.tsx

@@ -49,7 +49,7 @@ interface AssetInfoProps {
 const SimpleAssetInfo = ({ id }: Readonly<AssetInfoProps>): JSX.Element => (
   <AssetsTable id={id}>
     <TokenProfile
-      imageSrc={cardanoImage}
+      image={cardanoImage}
       name="Token name"
       description="Subtitle"
     />
@@ -60,7 +60,7 @@ const SimpleAssetInfo = ({ id }: Readonly<AssetInfoProps>): JSX.Element => (
 const PendingAssetInfo = ({ id }: Readonly<AssetInfoProps>): JSX.Element => (
   <AssetsTable id={id}>
     <TokenProfile
-      imageSrc={cardanoImage}
+      image={cardanoImage}
       name="Token with pending amount"
       description="description"
     />
@@ -79,7 +79,7 @@ const DetailedAssetInfo = ({
 }: Readonly<AssetInfoProps>): JSX.Element => (
   <AssetsTable id={id}>
     <TokenProfile
-      imageSrc={cardanoImage}
+      image={cardanoImage}
       name="Token name"
       description="Subtitle"
     />
@@ -200,7 +200,7 @@ export const Controls: Controls = ({
         <Flex alignItems="center" flexDirection="column">
           <AssetsTable>
             <TokenProfile
-              imageSrc={cardanoImage}
+              image={cardanoImage}
               name={tokenName}
               description={tokenSubtitle}
             />