Added Avatar image prop

packages/bento-design-system/src/Avatar/Avatar.css.ts

@@ -23,3 +23,7 @@ export const avatarRecipe = strictRecipe({
  },
  },
 });
+
+export const avatarImage = bentoSprinkles({
+ width: 24,
+});

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,16 @@ export function createAvatar(config: AvatarConfig) {
  borderRadius={config.radius}
  boxShadow={config.outline}
  >
- {initial ? (
+ {imageSrc && imageAvailable !== false ? (
+ <Box
+ as="img"
+ display={imageAvailable ? "block" : "none"}
+ src={imageSrc}
+ className={avatarImage}
+ onLoad={handleImageLoaded}
+ onError={handleImageErrored}
+ />
+ ) : initial ? (
  <Label size={config.labelSize}>{initial}</Label>
  ) : (
  config.icon({

packages/storybook/stories/Components/Avatar.stories.tsx

@@ -18,3 +18,13 @@ export const WithoutName = createStory({
  color: "blue",
  name: undefined,
 });
+
+export const WithImageUrl = createStory({
+ color: "blue",
+ imageSrc: "https://bento.buildo.io/img/logo.svg",
+});
+
+export const WithImageUrlBroken = createStory({
+ color: "blue",
+ imageSrc: "https://bento.buildo.io/broken-url.svg",
+});