refactor: use template literal typing

contentful · Sep 20, 2024 · 6e04018 · 6e04018
1 parent 0d375e0
commit 6e04018
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 16 deletions.
diff --git 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
@@ -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,24 +56,25 @@ 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
  *
  * @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
@@ -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" />