Update Avatar and UserDisplayItem constants for improved size options

- Adjusted `AVATAR_SIZES` in `Avatar.constants.js` to include 'xmd' size. - Modified `USER_DISPLAY_ITEM_SIZES` in `UserDisplayItem.js` to include 'xmd', 'lg'. --- Ticket: task/Comunica-136 Reviewed-by: @johan-fx Ref: #181
leemonade · Jul 19, 2024 · 707760f · 707760f
1 parent f635f3e
commit 707760f
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 32 deletions.
diff --git a/packages/components/src/informative/Avatar/Avatar.constants.js b/packages/components/src/informative/Avatar/Avatar.constants.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 
-export const AVATAR_SIZES = ['sm', 'md', 'lg', 'xlg'];
+export const AVATAR_SIZES = ['sm', 'md', 'xmd', 'lg', 'xlg'];
 export const AVATAR_STATE = ['normal', 'alert', 'notifications', 'error', 'activity'];
 export const AVATAR_COLORS = [
   '#DC5571',

diff --git a/packages/components/src/informative/UserDisplayItem/UserDisplayItem.js b/packages/components/src/informative/UserDisplayItem/UserDisplayItem.js
@@ -13,7 +13,7 @@ import { UserDisplayItemStyles } from './UserDisplayItem.styles';
 
 export const USER_DISPLAY_ITEM_VARIANTS = ['inline', 'block', 'rol', 'email'];
 export const USER_DISPLAY_ITEM_LAYOUT = ['left', 'right'];
-export const USER_DISPLAY_ITEM_SIZES = ['xs', 'sm'];
+export const USER_DISPLAY_ITEM_SIZES = ['xs', 'sm', 'xmd', 'lg'];
 
 export const USER_DISPLAY_ITEM_DEFAULT_PROPS = {
   variant: 'inline',
@@ -83,13 +83,12 @@ const UserDisplayItem = (properties) => {
   const textColor = variant === 'block' ? 'secondary' : 'primary';
 
   const role = useMemo(() => (!isEmpty(center) ? `${rol} · ${center}` : rol), [rol, center]);
-  const fullName = useMemo(
-    () =>
-      ['rol', 'inline'].includes(variant)
-        ? `${surnames || ''}${!surnames ? '' : ', '}${name}`
-        : name,
-    [name, surnames, variant],
-  );
+  const fullName = useMemo(() => {
+    if (['rol', 'inline'].includes(variant)) {
+      return `${surnames || ''}${surnames ? ', ' : ''}${name}`;
+    }
+    return name;
+  }, [name, surnames, variant]);
 
   const userFullName = getUserFullName(properties);
 

diff --git a/packages/components/src/informative/UserDisplayItem/UserDisplayItem.styles.js b/packages/components/src/informative/UserDisplayItem/UserDisplayItem.styles.js
@@ -8,23 +8,19 @@ function infoFromSize(size, theme) {
     rol: {},
   };
 
-  switch (size) {
-    case 'xs':
-      result = {
-        root: {},
-        rol: {
-          fontSize: pxToRem(11),
-          lineHeight: 1.2,
-        },
-        name: {
-          fontSize: theme.fontSizes[1],
-          lineHeight: 1.2,
-          marginTop: 2,
-        },
-      };
-      break;
-    default:
-      break;
+  if (size === 'xs') {
+    result = {
+      root: {},
+      rol: {
+        fontSize: pxToRem(11),
+        lineHeight: 1.2,
+      },
+      name: {
+        fontSize: theme.fontSizes[1],
+        lineHeight: 1.2,
+        marginTop: 2,
+      },
+    };
   }
 
   return result;
@@ -42,7 +38,7 @@ const getColor = (theme, severity) => {
   }[severity];
 };
 
-export const UserDisplayItemStyles = createStyles(
+const UserDisplayItemStyles = createStyles(
   (theme, { variant, layout, size, noBreak, severity }) => {
     const isBlock = variant === 'block';
     const isRol = variant === 'rol';
@@ -57,12 +53,31 @@ export const UserDisplayItemStyles = createStyles(
         }
       : {};
 
+    function getNameLineHeight() {
+      if (isBlock) return pxToRem(18.5);
+      if (isRol) return pxToRem(20);
+      return pxToRem(24);
+    }
+
+    function getUserInfoFlexProps() {
+      if (isEmail) {
+        return {
+          flexDirection: isRight ? 'row-reverse' : 'row',
+          alignItems: 'center',
+        };
+      }
+      return {
+        flexDirection: 'column',
+        alignItems: isRight ? 'flex-end' : null,
+      };
+    }
+
     return {
       root: {
         display: 'flex',
         alignItems: 'center',
         flexDirection: isRight && 'row-reverse',
-        gap: pxToRem(8),
+        gap: pxToRem(isRol ? 16 : 8),
         ...inf.root,
         ...getColor(theme, severity),
         padding: theme.spacing[1],
@@ -72,7 +87,7 @@ export const UserDisplayItemStyles = createStyles(
         verticalAlign: 'middle',
       },
       name: {
-        lineHeight: isBlock ? pxToRem(18.5) : isRol ? pxToRem(20) : pxToRem(24),
+        lineHeight: getNameLineHeight(),
         fontWeight: isBlock && 600,
         ...inf.name,
         // ...breakProps,
@@ -106,9 +121,10 @@ export const UserDisplayItemStyles = createStyles(
       },
       userInfo: {
         display: 'flex',
-        flexDirection: isEmail ? (isRight ? 'row-reverse' : 'row') : 'column',
-        alignItems: isEmail ? 'center' : isRight ? 'flex-end' : null,
+        ...getUserInfoFlexProps(),
       },
     };
-  }
+  },
 );
+
+export { UserDisplayItemStyles };