avatar storries

frontend/app/element/avatar.less

@@ -25,8 +25,8 @@
 
     .status-indicator {
         position: absolute;
-        bottom: -5px;
-        right: -5px;
+        bottom: 2px;
+        right: 2px;
         width: 12px;
         height: 12px;
         border-radius: 50%;

frontend/app/element/avatar.stories.tsx

@@ -0,0 +1,68 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { Avatar } from "./avatar";
+
+const meta = {
+    title: "Elements/Avatar",
+    component: Avatar,
+    args: {
+        name: "John Doe",
+        status: "offline",
+        imageUrl: "",
+    },
+    argTypes: {
+        name: {
+            control: { type: "text" },
+            description: "The name of the user",
+        },
+        status: {
+            control: { type: "select", options: ["online", "offline", "busy", "away"] },
+            description: "The status of the user",
+        },
+        imageUrl: {
+            control: { type: "text" },
+            description: "Optional image URL for the avatar",
+        },
+    },
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default case (without an image, default status: offline)
+export const Default: Story = {
+    args: {
+        name: "John Doe",
+        status: "offline",
+        imageUrl: "",
+    },
+};
+
+// Online status with an image
+export const OnlineWithImage: Story = {
+    args: {
+        name: "Alice Smith",
+        status: "online",
+        imageUrl: "https://i.pravatar.cc/150?u=a042581f4e29026704d",
+    },
+};
+
+// Busy status without an image
+export const BusyWithoutImage: Story = {
+    args: {
+        name: "Michael Johnson",
+        status: "busy",
+        imageUrl: "",
+    },
+};
+
+// Away status with an image
+export const AwayWithImage: Story = {
+    args: {
+        name: "Sarah Connor",
+        status: "away",
+        imageUrl: "https://i.pravatar.cc/150?u=a042581f4e29026704d",
+    },
+};

frontend/app/element/avatar.tsx

@@ -1,15 +1,16 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
+import { memo } from "react";
 
 import "./avatar.less";
 
 interface AvatarProps {
     name: string;
-    status: "online" | "offline";
+    status: "online" | "offline" | "busy" | "away";
     imageUrl?: string;
 }
 
-const Avatar = ({ name, status, imageUrl }: AvatarProps) => {
+const Avatar = memo(({ name, status = "offline", imageUrl }: AvatarProps) => {
     const getInitials = (name: string) => {
         const nameParts = name.split(" ");
         const initials = nameParts.map((part) => part[0]).join("");
@@ -26,6 +27,8 @@ const Avatar = ({ name, status, imageUrl }: AvatarProps) => {
             <div className={`status-indicator ${status}`} />
         </div>
     );
-};
+});
 
-export default Avatar;
+Avatar.displayName = "Avatar";
+
+export { Avatar };