refactor: Make the avatar component accept custom sizes (#255)

* initial commit * added extra values to size props to accept numbers * polishing and testing the added feature * Added story for Custom avatar * polishing and finishing touch Fixes #235
open-sauced · Aug 23, 2022 · 9076e91 · 9076e91
1 parent ba1ef69
commit 9076e91
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 18 deletions.
diff --git a/components/atoms/Avatar/avatar.tsx b/components/atoms/Avatar/avatar.tsx
@@ -3,34 +3,77 @@ import Image, { StaticImageData } from "next/image";
 import AvatarImage from "../../../public/hacktoberfest-icon.png";
 
 interface AvatarProps {
-    className?: string;
-    avatarURL?: string | StaticImageData;
-    initials?: string;
-    alt?: string;
-    size?: "sm" | "base" | "lg";
-    hasBorder?: boolean;
+  className?: string;
+  avatarURL?: string | StaticImageData;
+  initials?: string;
+  alt?: string;
+  size?: "sm" | "base" | "lg" | number;
+  hasBorder?: boolean;
 }
 
 const avatarLoader = () => {
   return "https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80";
 };
 
-const Avatar: React.FC<AvatarProps> = ({ className, avatarURL, initials, alt, size, hasBorder }) => {
+const Avatar = (props: AvatarProps): JSX.Element => {
+  switch (typeof props.size) {
+  case "string":
+    return <DefaultAvatar {...props} />;
+  case "number":
+    return <CustomAvatar {...props} />;
 
+  default:
+    return <span>invalid avatar size props!!!</span>;
+  }
+};
+
+export default Avatar;
+
+const CustomAvatar = ({ className, avatarURL, initials, alt, size, hasBorder }: AvatarProps): JSX.Element => {
   return (
     <div
-      className={`inline-flex bg-orange-500 justify-center items-center rounded-full overflow-hidden ${hasBorder ? "ring-2 ring-slate-200" : ""} ${size === "sm" ? "w-6 h-6" : size === "base" ? "w-8 h-8" : size === "lg" ? "w-12 h-12" : "w-8 h-8"}`}>
-      { avatarURL ?
-        <Image 
+      className={`inline-flex bg-orange-500 justify-center relative items-center rounded-full w-max h-max overflow-hidden ${
+        hasBorder ? "ring-2 ring-slate-200" : ""
+      }`}
+    >
+      {avatarURL ? (
+        <Image
           className={`${className ? className : ""} object-cover`}
-          alt={alt ? alt : "Avatar"} width={size === "sm" ? 16 : size === "base" ? 32 : size === "lg" ? 48 : 32} height={size === "sm" ? 16 : size === "base" ? 32 : size === "lg" ? 48 : 32} /* loader={avatarLoader} */ src={avatarURL ? avatarURL : AvatarImage} />
-        :
-        <div className={`font-bold leading-none text-slate-50 mb-0.25 ${size === "sm" ? "text-xs" : size === "base" ? "text-sm" : size === "lg" ? "text-lg" : "text-sm"}`}>
-          { initials }
-        </div>
-      }
+          alt={alt ? alt : "Avatar"}
+          width={size}
+          height={size}
+          /* loader={avatarLoader} */ src={avatarURL ? avatarURL : AvatarImage}
+        />
+      ) : (
+        <div className={`font-bold leading-none text-slate-50 mb-0.25 text-${size}`}>{initials}</div>
+      )}
     </div>
   );
 };
 
-export default Avatar;
+const DefaultAvatar = ({ className, avatarURL, initials, alt, size, hasBorder }: AvatarProps): JSX.Element => {
+  return (
+    <div
+      className={`inline-flex bg-orange-500 justify-center relative items-center rounded-full overflow-hidden ${
+        hasBorder ? "ring-2 ring-slate-200" : ""
+      } ${size === "sm" ? "w-6 h-6" : size === "base" ? "w-8 h-8" : size === "lg" ? "w-12 h-12" : "w-8 h-8"}`}
+    >
+      {avatarURL ? (
+        <Image
+          className={`${className ? className : ""} object-cover`}
+          alt={alt ? alt : "Avatar"}
+          layout="fill"
+          /* loader={avatarLoader} */ src={avatarURL ? avatarURL : AvatarImage}
+        />
+      ) : (
+        <div
+          className={`font-bold leading-none text-slate-50 mb-0.25 ${
+            size === "sm" ? "text-xs" : size === "base" ? "text-sm" : size === "lg" ? "text-lg" : "text-sm"
+          }`}
+        >
+          {initials}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/stories/atoms/avatar.stories.tsx b/stories/atoms/avatar.stories.tsx
@@ -28,4 +28,14 @@ export const HasBorder = AvatarTemplate.bind({});
 HasBorder.args = { size: "base", hasBorder: true, avatarURL: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80", initials: "BD", alt:"Hello" };
 
 export const NoURL = AvatarTemplate.bind({});
-NoURL.args = { size: "base", hasBorder: true, initials: "BD", alt:"Hello" };
+NoURL.args = { size: "base", hasBorder: true, initials: "BD", alt:"Hello" };
+
+export const CustomAvatar = AvatarTemplate.bind({});
+CustomAvatar.args = {
+  size: 56,
+  hasBorder: true,
+  avatarURL:
+    "https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1064&q=80",
+  initials: "BD",
+  alt: "Hello"
+};