Added Avatar image prop

buildo · Jul 19, 2022 · bc532aa · bc532aa
1 parent 1c9db48
commit bc532aa
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 3 deletions.
diff --git a/packages/bento-design-system/src/Avatar/Avatar.css.ts b/packages/bento-design-system/src/Avatar/Avatar.css.ts
@@ -23,3 +23,9 @@ export const avatarRecipe = strictRecipe({
     },
   },
 });
+
+export const avatarImage = strictRecipe({
+  base: bentoSprinkles({
+    width: "full",
+  }),
+});
diff --git a/packages/bento-design-system/src/Avatar/createAvatar.tsx b/packages/bento-design-system/src/Avatar/createAvatar.tsx
@@ -1,7 +1,8 @@
 import { Label } from "..";
-import { avatarRecipe } from "./Avatar.css";
+import { avatarImage, avatarRecipe } from "./Avatar.css";
 import { Box } from "../internal";
 import { AvatarConfig } from "./Config";
+import { useEffect, useState } from "react";
 
 type Props = {
   name?: string;
@@ -16,14 +17,28 @@ type Props = {
     | "indigo"
     | "violet"
     | "pink";
+  imageSrc?: string;
 };
 
 export type { Props as AvatarProps };
 
 export function createAvatar(config: AvatarConfig) {
-  return function Avatar({ color, name }: Props) {
+  return function Avatar({ color, name, imageSrc }: Props) {
     const initial = name?.trim()[0];
 
+    const [imageAvailable, setImageAvailable] = useState<boolean | undefined>(undefined);
+
+    useEffect(() => {
+      setImageAvailable(undefined);
+    }, [imageSrc]);
+
+    const handleImageLoaded = () => {
+      setImageAvailable(true);
+    };
+    const handleImageErrored = () => {
+      setImageAvailable(false);
+    };
+
     return (
       <Box display="flex">
         <Box
@@ -35,7 +50,15 @@ export function createAvatar(config: AvatarConfig) {
           borderRadius={config.radius}
           boxShadow={config.outline}
         >
-          {initial ? (
+          {imageSrc && imageAvailable !== false ? (
+            <img
+              style={{ display: imageAvailable ? "block" : "none" }}
+              src={imageSrc}
+              className={avatarImage({})}
+              onLoad={handleImageLoaded}
+              onError={handleImageErrored}
+            />
+          ) : initial ? (
             <Label size={config.labelSize}>{initial}</Label>
           ) : (
             config.icon({

diff --git a/packages/storybook/stories/Components/Avatar.stories.tsx b/packages/storybook/stories/Components/Avatar.stories.tsx
@@ -18,3 +18,8 @@ export const WithoutName = createStory({
   color: "blue",
   name: undefined,
 });
+
+export const WithImageUrl = createStory({
+  color: "blue",
+  imageSrc: "https://static.thenounproject.com/png/447685-200.png",
+});