From 3f0380617a5707ebc7d235b20f0989631ee0d67f Mon Sep 17 00:00:00 2001
From: Peer Richelsen <peeroke@gmail.com>
Date: Tue, 5 Sep 2023 19:56:02 +0200
Subject: [PATCH] chore: removed gravatar (#11153)

---
 .../steps-views/UserProfile.tsx               |  9 +--
 apps/web/lib/csp.ts                           |  2 +-
 apps/web/lib/profile.ts                       | 11 ---
 apps/web/pages/api/user/avatar.ts             | 11 +--
 .../web/pages/settings/my-account/profile.tsx |  2 +-
 apps/web/public/avatar.svg                    |  1 +
 apps/web/public/static/locales/en/common.json |  2 +-
 .../components/TeamInviteFromOrg.tsx          |  1 -
 .../ee/teams/components/AddNewTeamMembers.tsx |  7 +-
 .../features/ee/users/components/UserForm.tsx |  2 +-
 .../ee/users/components/UsersTable.tsx        |  1 -
 .../features/ee/users/server/trpc-router.ts   |  4 +-
 .../features/ee/workflows/pages/index.tsx     |  2 -
 .../components/TotalBookingUsersTable.tsx     |  1 -
 .../components/AvailabilitySliderTable.tsx    |  7 +-
 .../UserTable/EditSheet/EditUserForm.tsx      |  7 +-
 .../UserTable/EditSheet/EditUserSheet.tsx     |  1 -
 .../components/UserTable/UserListTable.tsx    |  7 +-
 packages/lib/constants.ts                     |  1 +
 packages/lib/defaultAvatarImage.test.ts       | 67 -------------------
 packages/lib/defaultAvatarImage.ts            | 16 -----
 packages/ui/components/avatar/Avatar.tsx      | 15 +----
 .../ui/components/avatar/avatar.stories.mdx   | 10 ++-
 23 files changed, 22 insertions(+), 165 deletions(-)
 delete mode 100644 apps/web/lib/profile.ts
 create mode 100644 apps/web/public/avatar.svg
 delete mode 100644 packages/lib/defaultAvatarImage.test.ts

diff --git a/apps/web/components/getting-started/steps-views/UserProfile.tsx b/apps/web/components/getting-started/steps-views/UserProfile.tsx
index d1b1fa1d65..aae5e10f7d 100644
--- a/apps/web/components/getting-started/steps-views/UserProfile.tsx
+++ b/apps/web/components/getting-started/steps-views/UserProfile.tsx
@@ -98,14 +98,7 @@ const UserProfile = () => {
   return (
     <form onSubmit={onSubmit}>
       <div className="flex flex-row items-center justify-start rtl:justify-end">
-        {user && (
-          <Avatar
-            alt={user.username || "user avatar"}
-            gravatarFallbackMd5={user.emailMd5}
-            size="lg"
-            imageSrc={imageSrc}
-          />
-        )}
+        {user && <Avatar alt={user.username || "user avatar"} size="lg" imageSrc={imageSrc} />}
         <input
           ref={avatarRef}
           type="hidden"
diff --git a/apps/web/lib/csp.ts b/apps/web/lib/csp.ts
index c033ccd031..4896e9b2c8 100644
--- a/apps/web/lib/csp.ts
+++ b/apps/web/lib/csp.ts
@@ -32,7 +32,7 @@ function getCspPolicy(nonce: string) {
       IS_PRODUCTION ? (useNonStrictPolicy ? "'unsafe-inline'" : "") : "'unsafe-inline'"
     } app.cal.com;
 	  font-src 'self';
-	  img-src 'self' ${WEBAPP_URL} https://www.gravatar.com https://img.youtube.com https://eu.ui-avatars.com/api/ data:;
+	  img-src 'self' ${WEBAPP_URL} https://img.youtube.com https://eu.ui-avatars.com/api/ data:;
     connect-src 'self'
 	`;
 }
diff --git a/apps/web/lib/profile.ts b/apps/web/lib/profile.ts
deleted file mode 100644
index de6f4e280f..0000000000
--- a/apps/web/lib/profile.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import crypto from "crypto";
-
-export const defaultAvatarSrc = function ({ email, md5 }: { md5?: string; email?: string }) {
-  if (!email && !md5) return "";
-
-  if (email && !md5) {
-    md5 = crypto.createHash("md5").update(email).digest("hex");
-  }
-
-  return `https://www.gravatar.com/avatar/${md5}?s=160&d=mp&r=PG`;
-};
diff --git a/apps/web/pages/api/user/avatar.ts b/apps/web/pages/api/user/avatar.ts
index 2535ddfc6b..a3881970c8 100644
--- a/apps/web/pages/api/user/avatar.ts
+++ b/apps/web/pages/api/user/avatar.ts
@@ -1,13 +1,11 @@
-import crypto from "crypto";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { z } from "zod";
 
 import { getSlugOrRequestedSlug, orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
+import { AVATAR_FALLBACK } from "@calcom/lib/constants";
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import prisma from "@calcom/prisma";
 
-import { defaultAvatarSrc } from "@lib/profile";
-
 const querySchema = z
   .object({
     username: z.string(),
@@ -75,12 +73,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       res.setHeader("x-cal-org", identity.org);
     }
     res.writeHead(302, {
-      Location: defaultAvatarSrc({
-        md5: crypto
-          .createHash("md5")
-          .update(identity?.email || "guest@example.com")
-          .digest("hex"),
-      }),
+      Location: AVATAR_FALLBACK,
     });
 
     return res.end();
diff --git a/apps/web/pages/settings/my-account/profile.tsx b/apps/web/pages/settings/my-account/profile.tsx
index 317f9ce91e..c83fe55106 100644
--- a/apps/web/pages/settings/my-account/profile.tsx
+++ b/apps/web/pages/settings/my-account/profile.tsx
@@ -406,7 +406,7 @@ const ProfileForm = ({
           name="avatar"
           render={({ field: { value } }) => (
             <>
-              <Avatar alt="" imageSrc={value} gravatarFallbackMd5="fallback" size="lg" />
+              <Avatar alt="" imageSrc={value} size="lg" />
               <div className="ms-4">
                 <ImageUploader
                   target="avatar"
diff --git a/apps/web/public/avatar.svg b/apps/web/public/avatar.svg
new file mode 100644
index 0000000000..477277f509
--- /dev/null
+++ b/apps/web/public/avatar.svg
@@ -0,0 +1 @@
+<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><rect width="32" height="32" rx="16" fill="#E5E7EB"/><path d="M16 21.333A6.667 6.667 0 1 0 16 8a6.667 6.667 0 0 0 0 13.333Z" fill="#1F2937"/><path d="M26.667 32a10.667 10.667 0 1 0-21.334 0" fill="#1F2937"/><path d="M16 21.333A6.667 6.667 0 1 0 16 8a6.667 6.667 0 0 0 0 13.333Zm0 0A10.667 10.667 0 0 1 26.667 32M16 21.333A10.666 10.666 0 0 0 5.333 32" stroke="#1F2937" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="a"><rect width="32" height="32" rx="16" fill="#fff"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index c2979a5ec2..58f83d4d21 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -1093,7 +1093,7 @@
   "or_lowercase": "or",
   "nevermind": "Nevermind",
   "go_to": "Go to: ",
-  "invite_link_make": "<li>Go to<a>Make Invite Link</a> and install Cal.com appp</li>",
+  "invite_link_make": "<li>Go to<a>Make Invite Link</a> and install Cal.com app</li>",
   "zapier_invite_link": "Zapier Invite Link",
   "meeting_url_provided_after_confirmed": "A Meeting URL will be created once the event is confirmed.",
   "dynamically_display_attendee_or_organizer": "Dynamically display the name of your attendee for you, or your name if it's viewed by your attendee",
diff --git a/packages/features/ee/organizations/components/TeamInviteFromOrg.tsx b/packages/features/ee/organizations/components/TeamInviteFromOrg.tsx
index a015f38b64..dcdd0e8809 100644
--- a/packages/features/ee/organizations/components/TeamInviteFromOrg.tsx
+++ b/packages/features/ee/organizations/components/TeamInviteFromOrg.tsx
@@ -80,7 +80,6 @@ function UserToInviteItem({
           alt="Users avatar"
           asChild
           imageSrc={`${bookerUrl}/${member.user.username}/avatar.png`}
-          gravatarFallbackMd5="hash"
         />
         <label
           htmlFor={`${member.user.id}`}
diff --git a/packages/features/ee/teams/components/AddNewTeamMembers.tsx b/packages/features/ee/teams/components/AddNewTeamMembers.tsx
index f58076bca2..917d06e537 100644
--- a/packages/features/ee/teams/components/AddNewTeamMembers.tsx
+++ b/packages/features/ee/teams/components/AddNewTeamMembers.tsx
@@ -241,12 +241,7 @@ const PendingMemberItem = (props: { member: TeamMember; index: number; teamId: n
       )}
       data-testid="pending-member-item">
       <div className="flex space-x-2 rtl:space-x-reverse">
-        <Avatar
-          gravatarFallbackMd5="teamMember"
-          size="mdLg"
-          imageSrc={bookerUrl + "/" + member.username + "/avatar.png"}
-          alt="owner-avatar"
-        />
+        <Avatar size="mdLg" imageSrc={bookerUrl + "/" + member.username + "/avatar.png"} alt="owner-avatar" />
         <div>
           <div className="flex space-x-1">
             <p>{member.name || member.email || t("team_member")}</p>
diff --git a/packages/features/ee/users/components/UserForm.tsx b/packages/features/ee/users/components/UserForm.tsx
index 130682e2bc..1bc3101308 100644
--- a/packages/features/ee/users/components/UserForm.tsx
+++ b/packages/features/ee/users/components/UserForm.tsx
@@ -119,7 +119,7 @@ export const UserForm = ({
           name="avatar"
           render={({ field: { value } }) => (
             <>
-              <Avatar alt="" imageSrc={value} gravatarFallbackMd5="fallback" size="lg" />
+              <Avatar alt="" imageSrc={value} size="lg" />
               <div className="ml-4">
                 <ImageUploader
                   target="avatar"
diff --git a/packages/features/ee/users/components/UsersTable.tsx b/packages/features/ee/users/components/UsersTable.tsx
index c3134de67f..96340689a0 100644
--- a/packages/features/ee/users/components/UsersTable.tsx
+++ b/packages/features/ee/users/components/UsersTable.tsx
@@ -134,7 +134,6 @@ function UsersTableBare() {
                     <Avatar
                       size="md"
                       alt={`Avatar of ${user.username || "Nameless"}`}
-                      gravatarFallbackMd5=""
                       imageSrc={`${WEBAPP_URL}/${user.username}/avatar.png?orgId=${user.organizationId}`}
                     />
 
diff --git a/packages/features/ee/users/server/trpc-router.ts b/packages/features/ee/users/server/trpc-router.ts
index e15103460d..fd4fec9115 100644
--- a/packages/features/ee/users/server/trpc-router.ts
+++ b/packages/features/ee/users/server/trpc-router.ts
@@ -1,7 +1,7 @@
 import { z } from "zod";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
-import { defaultAvatarSrc } from "@calcom/lib/defaultAvatarImage";
+import { AVATAR_FALLBACK } from "@calcom/lib/constants";
 import { _UserModel as User } from "@calcom/prisma/zod";
 import type { inferRouterOutputs } from "@calcom/trpc";
 import { TRPCError } from "@calcom/trpc";
@@ -39,7 +39,7 @@ export function getAvatarUrlFromUser(user: {
   username: string | null;
   email: string;
 }) {
-  if (!user.avatar || !user.username) return defaultAvatarSrc({ email: user.email });
+  if (!user.avatar || !user.username) return AVATAR_FALLBACK;
   return `${WEBAPP_URL}/${user.username}/avatar.png`;
 }
 
diff --git a/packages/features/ee/workflows/pages/index.tsx b/packages/features/ee/workflows/pages/index.tsx
index 7c72c114f8..0ce8732f29 100644
--- a/packages/features/ee/workflows/pages/index.tsx
+++ b/packages/features/ee/workflows/pages/index.tsx
@@ -135,7 +135,6 @@ const Filter = (props: {
             imageSrc={userAvatar || ""}
             size="sm"
             alt={`${user} Avatar`}
-            gravatarFallbackMd5="fallback"
             className="self-center"
             asChild
           />
@@ -172,7 +171,6 @@ const Filter = (props: {
               imageSrc={profile.image || ""}
               size="sm"
               alt={`${profile.slug} Avatar`}
-              gravatarFallbackMd5="fallback"
               className="self-center"
               asChild
             />
diff --git a/packages/features/insights/components/TotalBookingUsersTable.tsx b/packages/features/insights/components/TotalBookingUsersTable.tsx
index e0633410bd..1f9982c0f4 100644
--- a/packages/features/insights/components/TotalBookingUsersTable.tsx
+++ b/packages/features/insights/components/TotalBookingUsersTable.tsx
@@ -24,7 +24,6 @@ export const TotalBookingUsersTable = ({
                     imageSrc={item.user.avatar}
                     title={item.user.name || ""}
                     className="m-2"
-                    gravatarFallbackMd5={item.emailMd5}
                   />
                   <p className="text-default mx-0 my-auto">
                     <strong>{item.user.name}</strong>
diff --git a/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx b/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx
index b718cad2f2..d1f8e9a77a 100644
--- a/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx
+++ b/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx
@@ -76,12 +76,7 @@ export function AvailabilitySliderTable() {
           const { username, email, timeZone } = row.original;
           return (
             <div className="max-w-64 flex flex-shrink-0 items-center gap-2 overflow-hidden">
-              <Avatar
-                size="sm"
-                alt={username || email}
-                imageSrc={"/" + username + "/avatar.png"}
-                gravatarFallbackMd5="fallback"
-              />
+              <Avatar size="sm" alt={username || email} imageSrc={"/" + username + "/avatar.png"} />
               <div className="">
                 <div className="text-emphasis max-w-64 truncate text-sm font-medium" title={email}>
                   {username || "No username"}
diff --git a/packages/features/users/components/UserTable/EditSheet/EditUserForm.tsx b/packages/features/users/components/UserTable/EditSheet/EditUserForm.tsx
index 805210ae37..8e5858241b 100644
--- a/packages/features/users/components/UserTable/EditSheet/EditUserForm.tsx
+++ b/packages/features/users/components/UserTable/EditSheet/EditUserForm.tsx
@@ -93,12 +93,7 @@ export function EditForm({
         });
       }}>
       <div className="mt-4 flex items-center gap-2">
-        <Avatar
-          size="lg"
-          alt={`${selectedUser?.name} avatar`}
-          imageSrc={avatarUrl}
-          gravatarFallbackMd5="fallback"
-        />
+        <Avatar size="lg" alt={`${selectedUser?.name} avatar`} imageSrc={avatarUrl} />
         <div className="space-between flex flex-col leading-none">
           <span className="text-emphasis text-lg font-semibold">{selectedUser?.name ?? "Nameless User"}</span>
           <p className="subtle text-sm font-normal">
diff --git a/packages/features/users/components/UserTable/EditSheet/EditUserSheet.tsx b/packages/features/users/components/UserTable/EditSheet/EditUserSheet.tsx
index 5fba289e1b..898c884008 100644
--- a/packages/features/users/components/UserTable/EditSheet/EditUserSheet.tsx
+++ b/packages/features/users/components/UserTable/EditSheet/EditUserSheet.tsx
@@ -46,7 +46,6 @@ export function EditUserSheet({ state, dispatch }: { state: State; dispatch: Dis
                     className="h-[36px] w-[36px]"
                     alt={`${loadedUser?.name} avatar`}
                     imageSrc={avatarURL}
-                    gravatarFallbackMd5="fallback"
                   />
                   <div className="space-between flex flex-col leading-none">
                     <Skeleton loading={isLoading} as="p" waitForTranslation={false}>
diff --git a/packages/features/users/components/UserTable/UserListTable.tsx b/packages/features/users/components/UserTable/UserListTable.tsx
index ffc9c49aae..7a73106c16 100644
--- a/packages/features/users/components/UserTable/UserListTable.tsx
+++ b/packages/features/users/components/UserTable/UserListTable.tsx
@@ -163,12 +163,7 @@ export function UserListTable() {
           const { username, email } = row.original;
           return (
             <div className="flex items-center gap-2">
-              <Avatar
-                size="sm"
-                alt={username || email}
-                imageSrc={domain + "/" + username + "/avatar.png"}
-                gravatarFallbackMd5="fallback"
-              />
+              <Avatar size="sm" alt={username || email} imageSrc={domain + "/" + username + "/avatar.png"} />
               <div className="">
                 <div className="text-emphasis text-sm font-medium leading-none">
                   {username || "No username"}
diff --git a/packages/lib/constants.ts b/packages/lib/constants.ts
index 714626527b..6d302d7d03 100644
--- a/packages/lib/constants.ts
+++ b/packages/lib/constants.ts
@@ -58,6 +58,7 @@ export const HOSTED_CAL_FEATURES = process.env.NEXT_PUBLIC_HOSTED_CAL_FEATURES |
 export const NEXT_PUBLIC_BASE_URL = process.env.NEXT_PUBLIC_WEBAPP_URL || `https://${process.env.VERCEL_URL}`;
 export const LOGO = "/calcom-logo-white-word.svg";
 export const LOGO_ICON = "/cal-com-icon-white.svg";
+export const AVATAR_FALLBACK = "/avatar.svg";
 export const FAVICON_16 = "/favicon-16x16.png";
 export const FAVICON_32 = "/favicon-32x32.png";
 export const APPLE_TOUCH_ICON = "/apple-touch-icon.png";
diff --git a/packages/lib/defaultAvatarImage.test.ts b/packages/lib/defaultAvatarImage.test.ts
deleted file mode 100644
index 14d7ca2392..0000000000
--- a/packages/lib/defaultAvatarImage.test.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import { defaultAvatarSrc, getPlaceholderAvatar } from "./defaultAvatarImage";
-
-describe("Default Avatar Image tests", () => {
-  describe("fn: defaultAvatarSrc", () => {
-    it("should return a gravatar URL when an email is provided", () => {
-      const email = "john@example.com";
-      const result = defaultAvatarSrc({ email });
-
-      expect(result).toEqual(
-        "https://www.gravatar.com/avatar/d4c74594d841139328695756648b6bd6?s=160&d=mp&r=PG"
-      );
-    });
-
-    it("should return a gravatar URL when an MD5 hash is provided", () => {
-      const md5 = "my-md5-hash";
-      const result = defaultAvatarSrc({ md5 });
-
-      expect(result).toEqual("https://www.gravatar.com/avatar/my-md5-hash?s=160&d=mp&r=PG");
-    });
-
-    it("should return a gravatar URL using the MD5 hash when an email and MD5 hash are provided", () => {
-      const email = "john@example.com";
-      const md5 = "my-md5-hash";
-
-      const result = defaultAvatarSrc({ email, md5 });
-
-      expect(result).toEqual("https://www.gravatar.com/avatar/my-md5-hash?s=160&d=mp&r=PG");
-    });
-
-    it("should return an empty string when neither an email or MD5 hash is provided", () => {
-      const result = defaultAvatarSrc({});
-
-      expect(result).toEqual("");
-    });
-  });
-
-  describe("fn: getPlaceholderAvatar", () => {
-    it("should return the avatar URL when one is provided", () => {
-      const avatar = "https://example.com/avatar.png";
-      const name = "John Doe";
-
-      const result = getPlaceholderAvatar(avatar, name);
-
-      expect(result).toEqual(avatar);
-    });
-
-    it("should return a placeholder avatar URL when no avatar is provided", () => {
-      const name = "John Doe";
-
-      const result = getPlaceholderAvatar(null, name);
-
-      expect(result).toEqual(
-        "https://eu.ui-avatars.com/api/?background=fff&color=f9f9f9&bold=true&background=000000&name=John%20Doe"
-      );
-    });
-
-    it("should return a placeholder avatar URL when no avatar is provided and no name is provided", () => {
-      const result = getPlaceholderAvatar(null, null);
-
-      expect(result).toEqual(
-        "https://eu.ui-avatars.com/api/?background=fff&color=f9f9f9&bold=true&background=000000&name="
-      );
-    });
-  });
-});
diff --git a/packages/lib/defaultAvatarImage.ts b/packages/lib/defaultAvatarImage.ts
index f9f3eb1864..2fee3bffee 100644
--- a/packages/lib/defaultAvatarImage.ts
+++ b/packages/lib/defaultAvatarImage.ts
@@ -1,19 +1,3 @@
-import md5Parser from "md5";
-
-/**
- * Provided either an email or an MD5 hash, return the URL for the Gravatar
- * image aborting early if neither is provided.
- */
-export const defaultAvatarSrc = function ({ email, md5 }: { md5?: string; email?: string }) {
-  if (!email && !md5) return "";
-
-  if (email && !md5) {
-    md5 = md5Parser(email);
-  }
-
-  return `https://www.gravatar.com/avatar/${md5}?s=160&d=mp&r=PG`;
-};
-
 /**
  * Given an avatar URL and a name, return the appropriate avatar URL. In the
  * event that no avatar URL is provided, return a placeholder avatar URL from
diff --git a/packages/ui/components/avatar/Avatar.tsx b/packages/ui/components/avatar/Avatar.tsx
index 4377f0fd22..2c3b3c4c6c 100644
--- a/packages/ui/components/avatar/Avatar.tsx
+++ b/packages/ui/components/avatar/Avatar.tsx
@@ -3,7 +3,7 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import Link from "next/link";
 
 import classNames from "@calcom/lib/classNames";
-import { defaultAvatarSrc } from "@calcom/lib/defaultAvatarImage";
+import { AVATAR_FALLBACK } from "@calcom/lib/constants";
 
 import type { Maybe } from "@trpc/server";
 
@@ -17,7 +17,6 @@ export type AvatarProps = {
   title?: string;
   alt: string;
   href?: string;
-  gravatarFallbackMd5?: string;
   fallback?: React.ReactNode;
   accepted?: boolean;
   asChild?: boolean; // Added to ignore the outer span on the fallback component - messes up styling
@@ -35,7 +34,7 @@ const sizesPropsBySize = {
 } as const;
 
 export function Avatar(props: AvatarProps) {
-  const { imageSrc, gravatarFallbackMd5, size = "md", alt, title, href } = props;
+  const { imageSrc, size = "md", alt, title, href } = props;
   const rootClass = classNames("aspect-square rounded-full", sizesPropsBySize[size]);
   let avatar = (
     <AvatarPrimitive.Root
@@ -55,15 +54,7 @@ export function Avatar(props: AvatarProps) {
           asChild={props.asChild}
           className="flex h-full items-center justify-center">
           <>
-            {props.fallback ? (
-              props.fallback
-            ) : (
-              <img
-                src={defaultAvatarSrc({ md5: gravatarFallbackMd5 ?? "fallback" })}
-                alt={alt}
-                className={rootClass}
-              />
-            )}
+            {props.fallback ? props.fallback : <img src={AVATAR_FALLBACK} alt={alt} className={rootClass} />}
           </>
         </AvatarPrimitive.Fallback>
         {props.accepted && (
diff --git a/packages/ui/components/avatar/avatar.stories.mdx b/packages/ui/components/avatar/avatar.stories.mdx
index 94f650f13a..43e73630f5 100644
--- a/packages/ui/components/avatar/avatar.stories.mdx
+++ b/packages/ui/components/avatar/avatar.stories.mdx
@@ -29,10 +29,10 @@ Avatar group can be composed differently based on the number of user profile.
 
 <Examples title="Avatar style">
   <Example title="Small">
-    <Avatar size="sm" alt="Avatar Story" gravatarFallbackMd5="Ui@CAL.com" />
+    <Avatar size="sm" alt="Avatar Story" />
   </Example>
   <Example title="Large">
-    <Avatar size="lg" alt="Avatar Story" gravatarFallbackMd5="Ui@CAL.com" />
+    <Avatar size="lg" alt="Avatar Story" />
   </Example>
 </Examples>
 
@@ -146,7 +146,6 @@ Avatar group can be composed differently based on the number of user profile.
     args={{
       size: "sm",
       alt: "Avatar Story",
-      gravatarFallbackMd5: "Ui@CAL.com",
     }}
     argTypes={{
       size: {
@@ -156,12 +155,11 @@ Avatar group can be composed differently based on the number of user profile.
         },
       },
       alt: { control: "text" },
-      gravatarFallbackMd5: { control: "text" },
     }}>
-    {({ size, alt, gravatarFallbackMd5 }) => (
+    {({ size, alt }) => (
       <VariantsTable titles={["Default"]} columnMinWidth={150}>
         <VariantRow variant={size}>
-          <Avatar size={size} alt={alt} gravatarFallbackMd5={gravatarFallbackMd5} />
+          <Avatar size={size} alt={alt} />
         </VariantRow>
       </VariantsTable>
     )}