From 6e04018264b4d643ae85840fc9f899e21fec8a26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9my=20Lenoir?= <remy.lenoir@contentful.com>
Date: Fri, 20 Sep 2024 10:24:23 +0200
Subject: [PATCH] refactor: use template literal typing

---
 .../components/avatar/src/Avatar/Avatar.tsx   | 11 +++++++---
 .../components/avatar/src/Avatar/utils.ts     | 20 ++++++++++---------
 .../avatar/stories/Avatar.stories.tsx         |  8 ++++----
 3 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/packages/components/avatar/src/Avatar/Avatar.tsx b/packages/components/avatar/src/Avatar/Avatar.tsx
index a73b58d686..d2959cb54b 100644
--- a/packages/components/avatar/src/Avatar/Avatar.tsx
+++ b/packages/components/avatar/src/Avatar/Avatar.tsx
@@ -10,7 +10,12 @@ import {
 } from '@contentful/f36-tooltip';
 
 import { getAvatarStyles } from './Avatar.styles';
-import { getSizeInPixels, type Size, type ColorVariant } from './utils';
+import {
+  getSizeInPixels,
+  type ColorVariant,
+  type Size,
+  type SizeInPixel,
+} from './utils';
 
 export type Variant = 'app' | 'user';
 
@@ -21,10 +26,10 @@ export interface AvatarProps extends CommonProps {
    */
   isLoading?: boolean;
   /**
-   * Use the available sizes or a numerical custom one, e.g. '52' or '52px'
+   * Use the available sizes or a numerical custom one, e.g. '52px'
    * @default 'medium'
    */
-  size?: Size | string;
+  size?: Size | SizeInPixel;
   initials?: string;
   src?: ImageProps['src'];
   /**
diff --git a/packages/components/avatar/src/Avatar/utils.ts b/packages/components/avatar/src/Avatar/utils.ts
index 495c990451..f9b7a5eeb5 100644
--- a/packages/components/avatar/src/Avatar/utils.ts
+++ b/packages/components/avatar/src/Avatar/utils.ts
@@ -4,6 +4,7 @@ import { AvatarProps } from './Avatar';
 
 export const SIZES = ['tiny', 'small', 'medium', 'large'] as const;
 export type Size = (typeof SIZES)[number];
+export type SizeInPixel = `${number}px`;
 
 export type ColorVariant = keyof typeof avatarColorMap;
 
@@ -55,13 +56,16 @@ export const isSizeVariant = (size: string): size is Size => {
  * @param size
  * @returns the variant size value in pixels
  */
-export const convertSizeToPixels = (size: AvatarProps['size']) =>
-  ({
+export const convertSizeToPixels = (size: AvatarProps['size']): SizeInPixel => {
+  const sizes: Record<Size, SizeInPixel> = {
     tiny: '20px',
     small: '24px',
     medium: '32px',
     large: '48px',
-  }[size]);
+  };
+
+  return sizes[size];
+};
 
 /**
  * Utility function to convert the given size variant/custom size to pixels
@@ -69,10 +73,8 @@ export const convertSizeToPixels = (size: AvatarProps['size']) =>
  * @param size
  * @returns The variant or custom size in pixels, e.g. '32px'
  */
-export function getSizeInPixels(size: AvatarProps['size']): string {
-  return isSizeVariant(size)
-    ? convertSizeToPixels(size)
-    : size.includes('px')
-    ? size
-    : `${size}px`;
+export function getSizeInPixels(
+  size: AvatarProps['size'],
+): AvatarProps['size'] {
+  return isSizeVariant(size) ? convertSizeToPixels(size) : size;
 }
diff --git a/packages/components/avatar/stories/Avatar.stories.tsx b/packages/components/avatar/stories/Avatar.stories.tsx
index 9ff2388c0d..4ebb62ddcb 100644
--- a/packages/components/avatar/stories/Avatar.stories.tsx
+++ b/packages/components/avatar/stories/Avatar.stories.tsx
@@ -51,12 +51,12 @@ export const Overview: Story<AvatarProps> = (args) => {
         />
         <Avatar
           {...args}
-          size="75"
+          size="75px"
           icon={<CheckCircleIcon variant="positive" />}
         />
         <Avatar
           {...args}
-          size="75"
+          size="75px"
           variant="app"
           icon={<CheckCircleIcon variant="positive" />}
         />
@@ -100,8 +100,8 @@ export const Overview: Story<AvatarProps> = (args) => {
         <Avatar isLoading size="small" variant="user" />
         <Avatar isLoading size="medium" variant="user" />
         <Avatar isLoading size="large" variant="user" />
-        <Avatar isLoading size="75" variant="user" />
-        <Avatar isLoading size="75" variant="app" />
+        <Avatar isLoading size="75px" variant="user" />
+        <Avatar isLoading size="75px" variant="app" />
         <Avatar isLoading size="large" variant="app" />
         <Avatar isLoading size="medium" variant="app" />
         <Avatar isLoading size="small" variant="app" />