feat(UserInfo): added size variants.

DevoInc · Jan 29, 2025 · fcf3c05 · fcf3c05
1 parent c209d73
commit fcf3c05
Show file tree

Hide file tree

Showing 5 changed files with 188 additions and 9 deletions.
diff --git a/packages/core/src/components/UserInfo/components/UserInfoAvatar/UserInfoAvatar.mdx b/packages/core/src/components/UserInfo/components/UserInfoAvatar/UserInfoAvatar.mdx
@@ -37,6 +37,13 @@ Anyway, when the subtitle is set, then the format is automatically set to 'bold'
 
 <Canvas of={Stories.WithSubtitle} />
 
+## Sizes
+
+You can define a pre-defined size for the component which affects to the avatar and text blocks. The final result
+depends on the format and whether there is a subtitle or not.
+
+<Canvas of={Stories.Sizes} />
+
 ## Avatar sizes
 
 You can define a specific size for the avatar block in the same way it's defined for the `Avatar` component.

diff --git a/packages/core/src/components/UserInfo/components/UserInfoAvatar/UserInfoAvatar.stories.tsx b/packages/core/src/components/UserInfo/components/UserInfoAvatar/UserInfoAvatar.stories.tsx
@@ -55,6 +55,114 @@ export const Formats: Story = {
     ))(args),
 };
 
+export const Sizes: Story = {
+  tags: ['isHidden'],
+  render: (args) =>
+    ((props) => (
+      <VFlex>
+        <UserInfo.Avatar name={props.name} avatar={avatarImage} size="sm" />
+        <UserInfo.Avatar name={props.name} avatar={avatarImage} size="md" />
+        <UserInfo.Avatar name={props.name} avatar={avatarImage} size="lg" />
+        <UserInfo.Avatar
+          name={props.name}
+          avatar={avatarImage}
+          format="bold"
+          size="sm"
+        />
+        <UserInfo.Avatar
+          name={props.name}
+          avatar={avatarImage}
+          format="bold"
+          size="md"
+        />
+        <UserInfo.Avatar
+          name={props.name}
+          avatar={avatarImage}
+          format="bold"
+          size="lg"
+        />
+        <UserInfo.Avatar
+          name={props.name}
+          avatar={avatarImage}
+          format="heading"
+          size="sm"
+        />
+        <UserInfo.Avatar
+          name={props.name}
+          avatar={avatarImage}
+          format="heading"
+          size="md"
+        />
+        <UserInfo.Avatar
+          name={props.name}
+          avatar={avatarImage}
+          format="heading"
+          size="lg"
+        />
+        <UserInfo.Avatar
+          name={props.name}
+          avatar={avatarImage}
+          subtitle="This is a subtitle"
+          size="sm"
+        />
+        <UserInfo.Avatar
+          name={props.name}
+          avatar={avatarImage}
+          subtitle="This is a subtitle"
+          size="md"
+        />
+        <UserInfo.Avatar
+          name={props.name}
+          avatar={avatarImage}
+          subtitle="This is a subtitle"
+          size="lg"
+        />
+        <UserInfo.Avatar
+          name={props.name}
+          avatar={avatarImage}
+          format="bold"
+          size="sm"
+          subtitle="This is a subtitle"
+        />
+        <UserInfo.Avatar
+          name={props.name}
+          avatar={avatarImage}
+          format="bold"
+          size="md"
+          subtitle="This is a subtitle"
+        />
+        <UserInfo.Avatar
+          name={props.name}
+          avatar={avatarImage}
+          format="bold"
+          size="lg"
+          subtitle="This is a subtitle"
+        />
+        <UserInfo.Avatar
+          name={props.name}
+          avatar={avatarImage}
+          format="heading"
+          size="sm"
+          subtitle="This is a subtitle"
+        />
+        <UserInfo.Avatar
+          name={props.name}
+          avatar={avatarImage}
+          format="heading"
+          size="md"
+          subtitle="This is a subtitle"
+        />
+        <UserInfo.Avatar
+          name={props.name}
+          avatar={avatarImage}
+          format="heading"
+          size="lg"
+          subtitle="This is a subtitle"
+        />
+      </VFlex>
+    ))(args),
+};
+
 export const AvatarSizes: Story = {
   tags: ['isHidden'],
   render: (args) =>

diff --git a/packages/core/src/components/UserInfo/components/UserInfoAvatar/UserInfoAvatar.tsx b/packages/core/src/components/UserInfo/components/UserInfoAvatar/UserInfoAvatar.tsx
@@ -1,11 +1,16 @@
 import * as React from 'react';
 
 import type { IUserInfo } from '../../declarations';
+import type { IDataAttrs } from '../../../../declarations';
+import {
+  USER_INFO_SIZE_AVATAR_MAP,
+  USER_INFO_SIZE_HEADING_FORMAT_MAP,
+  USER_INFO_SIZE_SUBTITLE_FORMAT_MAP,
+} from './constants';
 import { HFlex } from '../../../HFlex';
 import { Avatar } from '../../../Avatar';
 import { Typography } from '../../../Typography';
 import { VFlex } from '../../../VFlex';
-import { IDataAttrs } from '../../../../declarations';
 
 export interface UserInfoAvatarProps
   extends Pick<
@@ -15,6 +20,7 @@ export interface UserInfoAvatarProps
       | 'avatarSize'
       | 'format'
       | 'id'
+      | 'size'
       | 'subtitle'
       | 'tooltip'
     >,
@@ -29,12 +35,19 @@ export const UserInfoAvatar: React.FC<UserInfoAvatarProps> = ({
   format = 'base',
   id,
   name,
+  size = 'md',
   subtitle,
   tooltip,
   ...dataAttrs
 }) => {
-  const evalAvatarSize =
-    avatarSize || (format === 'heading' ? 'lg' : subtitle ? 'sm' : 'xxs');
+  const defaultAvatarSize = subtitle
+    ? size === 'sm'
+      ? 'xs'
+      : size === 'lg'
+        ? 'md'
+        : 'sm'
+    : USER_INFO_SIZE_AVATAR_MAP[format][size];
+  const evalAvatarSize = avatarSize || defaultAvatarSize;
   const evalSpacing = format === 'heading' ? 'cmp-sm' : 'cmp-xs';
   const evalFormat = format !== 'base' ? format : subtitle ? 'bold' : 'base';
   return (
@@ -47,17 +60,22 @@ export const UserInfoAvatar: React.FC<UserInfoAvatarProps> = ({
       />
       <VFlex minWidth="0" width="100%" spacing="0">
         {evalFormat === 'heading' ? (
-          <Typography.Heading>{name}</Typography.Heading>
+          <Typography format={USER_INFO_SIZE_HEADING_FORMAT_MAP[size]}>
+            {name}
+          </Typography>
         ) : (
           <Typography
-            format={evalFormat === 'bold' ? 'action-md' : 'body-md'}
-            colorScheme={evalFormat === 'bold' ? 'stronger' : 'base'}
+            format={evalFormat === 'bold' ? `action-${size}` : `body-${size}`}
+            colorScheme="base"
           >
             {name}
           </Typography>
         )}
         {subtitle && (
-          <Typography format="body-sm" colorScheme="weak">
+          <Typography
+            format={USER_INFO_SIZE_SUBTITLE_FORMAT_MAP[size]}
+            colorScheme="weak"
+          >
             {subtitle}
           </Typography>
         )}

diff --git a/packages/core/src/components/UserInfo/components/UserInfoAvatar/constants.ts b/packages/core/src/components/UserInfo/components/UserInfoAvatar/constants.ts
@@ -0,0 +1,41 @@
+import { TUserInfoFormat, TUserInfoSize } from '../../declarations';
+import type { TypographyProps } from '../../../Typography';
+import { AvatarProps } from '../../../Avatar';
+
+export const USER_INFO_SIZE_HEADING_FORMAT_MAP: {
+  [key in TUserInfoSize]: TypographyProps['format'];
+} = {
+  sm: 'heading-h6',
+  md: 'heading-h4',
+  lg: 'heading-h3',
+};
+
+export const USER_INFO_SIZE_SUBTITLE_FORMAT_MAP: {
+  [key in TUserInfoSize]: TypographyProps['format'];
+} = {
+  sm: 'body-xs',
+  md: 'body-sm',
+  lg: 'body-md',
+};
+
+export const USER_INFO_SIZE_AVATAR_MAP: {
+  [key in TUserInfoFormat]: {
+    [key in TUserInfoSize]: AvatarProps['size'];
+  };
+} = {
+  base: {
+    sm: 'xxxs',
+    md: 'xxs',
+    lg: 'xs',
+  },
+  bold: {
+    sm: 'xxxs',
+    md: 'xxs',
+    lg: 'xs',
+  },
+  heading: {
+    sm: 'md',
+    md: 'lg',
+    lg: 'xl',
+  },
+};
diff --git a/packages/core/src/components/UserInfo/declarations.ts b/packages/core/src/components/UserInfo/declarations.ts
@@ -2,7 +2,10 @@ import * as React from 'react';
 
 import type { TAvatarColorScheme, TAvatarSize } from '../Avatar/declarations';
 import { IKeyValue } from '../KeyValue/declarations';
-import { IGlobalAttrs } from '../../declarations';
+import { IGlobalAttrs, TBaseSize } from '../../declarations';
+
+export type TUserInfoSize = TBaseSize;
+export type TUserInfoFormat = 'base' | 'heading' | 'bold';
 
 export interface IUserInfo extends Pick<IGlobalAttrs, 'id' | 'tooltip'> {
   /** The children for the user info. */
@@ -24,7 +27,7 @@ export interface IUserInfo extends Pick<IGlobalAttrs, 'id' | 'tooltip'> {
   /** The email key. */
   emailKey?: string;
   /** The format for the user info. */
-  format?: 'base' | 'heading' | 'bold';
+  format?: TUserInfoFormat;
   /** The job/position of the user. */
   job?: string;
   /** The job key. */
@@ -39,6 +42,8 @@ export interface IUserInfo extends Pick<IGlobalAttrs, 'id' | 'tooltip'> {
   role?: string;
   /** The role key. */
   roleKey?: string;
+  /** The size of the user which affects to the typographic styles and the default avatar size.  */
+  size?: TUserInfoSize;
   /** The content which will be rendered as subtitle below the name.  */
   subtitle?: React.ReactNode;
 }