Merge pull request #48 from input-output-hk/chore/lw-10712-use-custom-component-in-profile-dropdown

feat: allow custom components as profile dropdown profile image

Author: tomislavhoracek

src/design-system/profile-dropdown/profile-dropdown-trigger.component.tsx

@@ -11,19 +11,15 @@ import { Flex } from '../flex';
 import * as cx from './profile-dropdown-trigger.css';
 import { WalletCard } from './profile-dropdown-wallet-card.component';
 
+import type { ProfileType } from './profile-dropdown-wallet-card.component';
 import type { WalletType } from './profile-dropdown.data';
 
 export type Props = Omit<ComponentPropsWithoutRef<'button'>, 'type'> & {
   disabled?: boolean;
   active?: boolean;
   title: string;
   subtitle?: string;
-  profile?: {
-    imageSrc: string;
-    fallbackText: string;
-    alt?: string;
-    delayMs?: number;
-  };
+  profile?: ProfileType;
   type: WalletType;
 };
 

src/design-system/profile-dropdown/profile-dropdown-trigger.stories.tsx

@@ -8,6 +8,8 @@ import { Flex } from '../flex';
 import { Grid, Cell } from '../grid';
 
 import { Trigger } from './profile-dropdown-trigger.component';
+
+import type { ProfileType } from './profile-dropdown-wallet-card.component';
 const subtitle = `Reusable button component for use in a variety of controls containing only an icon for its content.`;
 
 export default {
@@ -24,11 +26,13 @@ const TriggerSample = ({
   id,
   active,
   hasSubtitle = true,
+  profile,
 }: Readonly<{
   disabled?: boolean;
   id?: string;
   active?: boolean;
   hasSubtitle?: boolean;
+  profile?: ProfileType;
 }>): JSX.Element => (
   <Trigger
     title="Alice's wallet"
@@ -37,6 +41,7 @@ const TriggerSample = ({
     id={id}
     active={active}
     type="hot"
+    profile={profile}
   />
 );
 
@@ -67,6 +72,21 @@ export const Overview = (): JSX.Element => (
         <Flex gap="$16" alignItems="center" w="$fill" justifyContent="center">
           <TriggerSample />
           <TriggerSample hasSubtitle={false} />
+          <TriggerSample
+            hasSubtitle={false}
+            profile={{
+              customProfileComponent: (
+                <Flex
+                  alignItems="center"
+                  w={'$32'}
+                  h={'$32'}
+                  justifyContent="center"
+                >
+                  TT
+                </Flex>
+              ),
+            }}
+          />
         </Flex>
       </Section>
 

src/design-system/profile-dropdown/profile-dropdown-wallet-card.component.tsx

@@ -12,18 +12,26 @@ import { WalletIcon } from './profile-dropdown-wallet-icon.component';
 
 import type { WalletType } from './profile-dropdown.data';
 
+type UserProfileComponentType = {
+  imageSrc: string;
+  fallbackText: string;
+  alt?: string;
+  delayMs?: number;
+};
+
+type CustomProfileComponentType = {
+  customProfileComponent: React.ReactNode;
+};
+
+export type ProfileType = UserProfileComponentType | CustomProfileComponentType;
+
 export interface Props {
   title: {
     text: string;
     type: 'button' | 'content';
   };
   subtitle?: string;
-  profile?: {
-    imageSrc: string;
-    fallbackText: string;
-    alt?: string;
-    delayMs?: number;
-  };
+  profile?: ProfileType;
   type: WalletType;
   testId?: string;
 }
@@ -32,6 +40,22 @@ const makeTestId = (namespace = '', path = ''): string => {
   return namespace === '' ? namespace : `${namespace}${path}`;
 };
 
+const getProfileImage = (
+  profile: ProfileType,
+  testId: string,
+): React.ReactNode => {
+  if ('customProfileComponent' in profile) {
+    return profile.customProfileComponent;
+  }
+  return (
+    <UserProfile
+      {...profile}
+      radius="rounded"
+      testId={makeTestId(testId, '-icon')}
+    />
+  );
+};
+
 export const WalletCard = ({
   title,
   subtitle,
@@ -43,16 +67,11 @@ export const WalletCard = ({
 
   return (
     <Flex>
-      {profile === undefined ? (
-        <WalletIcon type={type} testId={makeTestId(testId, '-icon')} />
+      {profile ? (
+        getProfileImage(profile, testId)
       ) : (
-        <UserProfile
-          {...profile}
-          radius="rounded"
-          testId={makeTestId(testId, '-icon')}
-        />
+        <WalletIcon type={type} testId={makeTestId(testId, '-icon')} />
       )}
-
       {subtitle ? (
         <Flex flexDirection="column" ml="$10" h="$32" alignItems="flex-start">
           <Title color="secondary" data-testid={makeTestId(testId, '-title')}>

src/design-system/profile-dropdown/profile-dropdown-wallet-option.component.tsx

@@ -11,18 +11,14 @@ import { Flex } from '../flex';
 import { WalletCard } from './profile-dropdown-wallet-card.component';
 import * as cx from './profile-dropdown-wallet-option.css';
 
+import type { ProfileType } from './profile-dropdown-wallet-card.component';
 import type { WalletType } from './profile-dropdown.data';
 
 export type Props = Omit<ComponentPropsWithoutRef<'button'>, 'type'> & {
   disabled?: boolean;
   title: string;
   subtitle?: string;
-  profile?: {
-    imageSrc: string;
-    fallbackText: string;
-    alt?: string;
-    delayMs?: number;
-  };
+  profile?: ProfileType;
   type: WalletType;
   onOpenAccountsMenu?: () => void;
 };