feat: colored avatar (#554)

* feat: colored avatar

* fix: use id instead of name & remove unused

* fix: remove unused

* Allow empty ID to avoid empty string

* Fix tests

* Add person chip story

---------

Co-authored-by: Emilien <emilien.chauvet.enpc@gmail.com>

front/src/modules/users/components/Avatar.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import { stringToHslColor } from '@/utils/string-to-hsl';
 import { isNonEmptyString } from '@/utils/type-guards/isNonEmptyString';
 
 export type AvatarType = 'squared' | 'rounded';
@@ -8,26 +9,23 @@ type OwnProps = {
   avatarUrl: string | null | undefined;
   size: number;
   placeholder: string;
+  colorId?: string;
   type?: AvatarType;
 };
 
-export const StyledAvatar = styled.div<Omit<OwnProps, 'placeholder'>>`
+export const StyledAvatar = styled.div<OwnProps & { colorId: string }>`
   align-items: center;
-  background-color: ${(props) =>
-    !isNonEmptyString(props.avatarUrl)
-      ? props.theme.background.tertiary
-      : 'none'};
-  ${(props) =>
-    isNonEmptyString(props.avatarUrl)
-      ? `background-image: url(${props.avatarUrl});`
-      : ''}
+  background-color: ${({ avatarUrl, colorId }) =>
+    !isNonEmptyString(avatarUrl) ? stringToHslColor(colorId, 75, 85) : 'none'};
+  ${({ avatarUrl }) =>
+    isNonEmptyString(avatarUrl) ? `background-image: url(${avatarUrl});` : ''}
   background-size: cover;
   border-radius: ${(props) => (props.type === 'rounded' ? '50%' : '2px')};
-  color: ${({ theme }) => theme.font.color.primary};
+  color: ${({ colorId }) => stringToHslColor(colorId, 75, 25)};
   display: flex;
 
   flex-shrink: 0;
-  font-size: ${({ theme }) => theme.font.size.sm};
+  font-size: ${({ theme }) => theme.font.size.xs};
   font-weight: ${({ theme }) => theme.font.weight.medium};
 
   height: ${(props) => props.size}px;
@@ -39,12 +37,19 @@ export function Avatar({
   avatarUrl,
   size,
   placeholder,
+  colorId = placeholder,
   type = 'squared',
 }: OwnProps) {
   const noAvatarUrl = !isNonEmptyString(avatarUrl);
 
   return (
-    <StyledAvatar avatarUrl={avatarUrl} size={size} type={type}>
+    <StyledAvatar
+      avatarUrl={avatarUrl}
+      placeholder={placeholder}
+      size={size}
+      type={type}
+      colorId={colorId}
+    >
       {noAvatarUrl && placeholder[0]?.toLocaleUpperCase()}
     </StyledAvatar>
   );