Merge pull request #40 from input-output-hk/chore/lw-10712-profile-dropdown-adjustments

chore: make profile dropdown more scalable

Author: tomislavhoracek

src/design-system/profile-dropdown/index.ts

@@ -6,3 +6,4 @@ export type { AccountData } from './accounts/profile-dropdown-accounts-list.comp
 export type { WalletType } from './profile-dropdown.data';
 export { WalletCard } from './profile-dropdown-wallet-card.component';
 export { WalletIcon } from './profile-dropdown-wallet-icon.component';
+export { Separator } from './profile-dropdown-separator.component';

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

@@ -17,7 +17,7 @@ export type Props = Omit<ComponentPropsWithoutRef<'button'>, 'type'> & {
   disabled?: boolean;
   active?: boolean;
   title: string;
-  subtitle: string;
+  subtitle?: string;
   profile?: {
     imageSrc: string;
     fallbackText: string;

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

@@ -23,14 +23,16 @@ const TriggerSample = ({
   disabled,
   id,
   active,
+  hasSubtitle = true,
 }: Readonly<{
   disabled?: boolean;
   id?: string;
   active?: boolean;
+  hasSubtitle?: boolean;
 }>): JSX.Element => (
   <Trigger
     title="Alice's wallet"
-    subtitle="Account #0"
+    subtitle={hasSubtitle ? 'Account #0' : undefined}
     disabled={disabled}
     id={id}
     active={active}
@@ -62,8 +64,9 @@ export const Overview = (): JSX.Element => (
   <Grid columns="$1">
     <Cell>
       <Section title="Examples">
-        <Flex flexDirection="column" alignItems="center" w="$fill">
+        <Flex gap="$16" alignItems="center" w="$fill" justifyContent="center">
           <TriggerSample />
+          <TriggerSample hasSubtitle={false} />
         </Flex>
       </Section>
 

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

@@ -17,7 +17,7 @@ export interface Props {
     text: string;
     type: 'button' | 'content';
   };
-  subtitle: string;
+  subtitle?: string;
   profile?: {
     imageSrc: string;
     fallbackText: string;
@@ -52,24 +52,37 @@ export const WalletCard = ({
           testId={makeTestId(testId, '-icon')}
         />
       )}
-      <Flex flexDirection="column" ml="$10" h="$32" alignItems="flex-start">
-        <Title color="secondary" data-testid={makeTestId(testId, '-title')}>
-          {title.text}
-        </Title>
-        <Box
-          className={cn(cx.subtitleBox, {
-            [cx.subtitleButtonOffset]: title.type === 'button',
-            [cx.subtitleContentOffset]: title.type === 'content',
-          })}
-        >
+
+      {subtitle ? (
+        <Flex flexDirection="column" ml="$10" h="$32" alignItems="flex-start">
+          <Title color="secondary" data-testid={makeTestId(testId, '-title')}>
+            {title.text}
+          </Title>
+          <Box
+            className={cn(cx.subtitleBox, {
+              [cx.subtitleButtonOffset]: title.type === 'button',
+              [cx.subtitleContentOffset]: title.type === 'content',
+            })}
+          >
+            <Text.Body.Small
+              weight="$semibold"
+              data-testid={makeTestId(testId, '-subtitle')}
+            >
+              {subtitle}
+            </Text.Body.Small>
+          </Box>
+        </Flex>
+      ) : (
+        <Flex ml="$10" h="$32" alignItems="center">
           <Text.Body.Small
             weight="$semibold"
-            data-testid={makeTestId(testId, '-subtitle')}
+            color="secondary"
+            data-testid={makeTestId(testId, '-title')}
           >
-            {subtitle}
+            {title.text}
           </Text.Body.Small>
-        </Box>
-      </Flex>
+        </Flex>
+      )}
     </Flex>
   );
 };

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

@@ -16,7 +16,7 @@ import type { WalletType } from './profile-dropdown.data';
 export type Props = Omit<ComponentPropsWithoutRef<'button'>, 'type'> & {
   disabled?: boolean;
   title: string;
-  subtitle: string;
+  subtitle?: string;
   profile?: {
     imageSrc: string;
     fallbackText: string;
@@ -57,7 +57,7 @@ export const WalletOption = ({
           type={type}
           testId="wallet-option"
         />
-        {type !== 'shared' && (
+        {type !== 'shared' && onOpenAccountsMenu && (
           <Box ml="$10">
             <Flex
               className={cx.icon}

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

@@ -8,19 +8,21 @@ import * as cx from './profile-dropdown-wallet-status.css';
 export interface Props {
   status: 'error' | 'synced' | 'syncing';
   label: string;
+  type?: 'button' | 'flat';
 }
 
 export const WalletStatus = ({
   label,
   status,
+  type = 'button',
 }: Readonly<Props>): JSX.Element => {
   return (
     <Flex
       alignItems="center"
       justifyContent="space-between"
       py="$8"
       px="$12"
-      className={cx.button}
+      className={type === 'button' ? cx.button : cx.flat}
     >
       <Flex
         className={cx.icon({

src/design-system/profile-dropdown/profile-dropdown-wallet-status.css.ts

@@ -9,6 +9,8 @@ export const button = style([
   }),
 ]);
 
+export const flat = style([]);
+
 export const icon = recipe({
   base: sx({
     w: '$10',

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

@@ -69,6 +69,28 @@ const WalletStatuses = (): JSX.Element => (
   </Variants.Row>
 );
 
+const WalletStatusesFlat = (): JSX.Element => (
+  <Variants.Row>
+    <Variants.Cell>
+      <WalletStatus type="flat" status="synced" label="Wallet synced (flat)" />
+    </Variants.Cell>
+    <Variants.Cell>
+      <WalletStatus
+        type="flat"
+        status="syncing"
+        label="Wallet syncing (flat)"
+      />
+    </Variants.Cell>
+    <Variants.Cell>
+      <WalletStatus
+        type="flat"
+        status="error"
+        label="Not synced to the blockchain (flat)"
+      />
+    </Variants.Cell>
+  </Variants.Row>
+);
+
 export const Overview = (): JSX.Element => (
   <Grid columns="$1">
     <Cell>
@@ -81,11 +103,13 @@ export const Overview = (): JSX.Element => (
 
         <Variants.Table headers={['Synced', 'Syncing', 'Not synced']}>
           <WalletStatuses />
+          <WalletStatusesFlat />
         </Variants.Table>
 
         <LocalThemeProvider colorScheme={ThemeColorScheme.Dark}>
           <Variants.Table>
             <WalletStatuses />
+            <WalletStatusesFlat />
           </Variants.Table>
         </LocalThemeProvider>
       </Section>