From 85be6871623004e7340123734319f319dd0edf1b Mon Sep 17 00:00:00 2001
From: Muhammad Amien <muhammadamien23@gmail.com>
Date: Fri, 23 Feb 2024 10:32:48 +0700
Subject: [PATCH] fix: avatar

---
 .../components/user/stories/user.stories.tsx  | 171 +++++++++---------
 packages/core/theme/src/components/user.ts    |  14 +-
 2 files changed, 91 insertions(+), 94 deletions(-)

diff --git a/packages/components/user/stories/user.stories.tsx b/packages/components/user/stories/user.stories.tsx
index 391dbc7e..5a0ae417 100644
--- a/packages/components/user/stories/user.stories.tsx
+++ b/packages/components/user/stories/user.stories.tsx
@@ -7,91 +7,88 @@ export default {
   component: User,
 } as Meta<typeof User>;
 
-// const url = "https://avatars.githubusercontent.com/u/30373425?v=4";
+const url = "https://avatars.githubusercontent.com/u/14818854?s=200&v=4";
 
-// export const Default = {
-// parameters: {
-//   design: {
-//     type: "figma",
-//         url: "",
-//   },
-// },
-//   args: {
-//     name: "Junior Garcia",
-//     avatarProps: {
-//       src: url,
-//     },
-//   },
-// };
-//
-// export const isFocusable = {
-// parameters: {
-//   design: {
-//     type: "figma",
-//         url: "",
-//   },
-// },
-//   args: {
-//     name: "Junior Garcia",
-//     isFocusable: true,
-//     avatarProps: {
-//       src: url,
-//     },
-//   },
-// };
-//
-// export const WithDefaultAvatar = {
-// parameters: {
-//   design: {
-//     type: "figma",
-//         url: "",
-//   },
-// },
-//   args: {
-//     name: "Junior Garcia",
-//     avatarProps: {
-//       name: "Junior Garcia",
-//       getInitials: (name) =>
-//         name
-//           .split(" ")
-//           .map((n) => n[0])
-//           .join(""),
-//     },
-//   },
-// };
-//
-// export const WithDescription = {
-// parameters: {
-//   design: {
-//     type: "figma",
-//         url: "",
-//   },
-// },
-//   args: {
-//     name: "Junior Garcia",
-//     description: "Software Engineer",
-//     avatarProps: {
-//       src: url,
-//     },
-//   },
-// };
-//
-// export const WithLinkDescription = {
-// parameters: {
-//   design: {
-//     type: "figma",
-//         url: "",
-//   },
-// },
-//   args: {
-//     name: "Junior Garcia",
-//     description: (
-//       <Link href="https://twitter.com/jrgarciadev" size="sm">
-//         @jrgarciadev
-//       </Link>
-//     ),
-//     avatarProps: {
-//       src: url,
-//     },
-//   },
-// };
+export const Default = {
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/T0TUGURgVGElV6MtU2EPYU/%5BJDS%5D-Design-System---Banyu-1.0?type=design&node-id=3616-231802&mode=dev",
+    },
+  },
+  args: {
+    name: "JALA Official",
+    avatarProps: {
+      src: url,
+    },
+  },
+};
+
+export const isFocusable = {
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/T0TUGURgVGElV6MtU2EPYU/%5BJDS%5D-Design-System---Banyu-1.0?type=design&node-id=3616-231802&mode=dev",
+    },
+  },
+  args: {
+    name: "JALA Official",
+    isFocusable: true,
+    avatarProps: {
+      src: url,
+    },
+  },
+};
+
+export const WithDefaultAvatar = {
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/T0TUGURgVGElV6MtU2EPYU/%5BJDS%5D-Design-System---Banyu-1.0?type=design&node-id=3616-231802&mode=dev",
+    },
+  },
+  args: {
+    name: "Muhammad Amien",
+    avatarProps: {
+      name: "Muhammad Amien",
+      src: "https://avatars.githubusercontent.com/u/54246272?v=4",
+      getInitials: (name: string) =>
+        name
+          .split(" ")
+          .map((n) => n[0])
+          .join(""),
+    },
+  },
+};
+
+export const WithDescription = {
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/T0TUGURgVGElV6MtU2EPYU/%5BJDS%5D-Design-System---Banyu-1.0?type=design&node-id=3616-231802&mode=dev",
+    },
+  },
+  args: {
+    name: "Muhammad Amien",
+    description: "Software Engineer",
+    avatarProps: {
+      src: "https://avatars.githubusercontent.com/u/54246272?v=4",
+    },
+  },
+};
+
+export const WithLinkDescription = {
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/T0TUGURgVGElV6MtU2EPYU/%5BJDS%5D-Design-System---Banyu-1.0?type=design&node-id=3616-231802&mode=dev",
+    },
+  },
+  args: {
+    name: "Muhammad Amien",
+    description: <span>@muhamien</span>,
+    avatarProps: {
+      src: "https://avatars.githubusercontent.com/u/54246272?v=4",
+    },
+  },
+};
diff --git a/packages/core/theme/src/components/user.ts b/packages/core/theme/src/components/user.ts
index 8aa25ddd..3be8c800 100644
--- a/packages/core/theme/src/components/user.ts
+++ b/packages/core/theme/src/components/user.ts
@@ -1,5 +1,5 @@
-import {tv} from "../utils/tv"
-import {dataFocusVisibleClasses} from "../utils"
+import {tv} from "../utils/tv";
+import {dataFocusVisibleClasses} from "../utils";
 
 /**
  * User wrapper **Tailwind Variants** component
@@ -23,11 +23,11 @@ const user = tv({
       ...dataFocusVisibleClasses,
     ],
     wrapper: "inline-flex flex-col items-start",
-    name: "text-sm text-inherit",
-    description: "text-xs text-foreground-400",
+    name: "text-xs text-black font-semibold",
+    description: "text-xs text-neutral-500 font-normal",
   },
-})
+});
 
-export type UserSlots = keyof ReturnType<typeof user>
+export type UserSlots = keyof ReturnType<typeof user>;
 
-export {user}
+export {user};