add tests to AvatarWithDetails

Signed-off-by: Timo K <[email protected]>

Author: toger5

playwright/shared-component-snapshots/avatar-avatarwithdetails--default-linux.png

@@ -9,22 +9,16 @@
     display: flex;
     align-items: center;
 
-    border-radius: var(--cpd-space-3x);
+    border-radius: 12px;
     background-color: var(--cpd-color-gray-200);
     padding: var(--cpd-space-2x);
-
-    div {
-        margin-left: var(--cpd-space-2x);
-        display: flex;
-        flex-direction: column;
-    }
+    gap: var(--cpd-space-2x);
 
     .room {
         display: inline-block;
 
         font-weight: var(--cpd-font-weight-semibold);
         font-size: var(--cpd-font-size-body-md);
-        line-height: var(--cpd-font-size-heading-md);
 
         overflow: hidden;
         text-overflow: ellipsis;
@@ -33,6 +27,5 @@
 
     .details {
         font-size: var(--cpd-font-size-body-sm);
-        line-height: var(--cpd-font-size-body-md);
     }
 }

src/shared-components/avatar/AvatarWithDetails/AvatarWithDetails.module.css

@@ -0,0 +1,21 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { composeStories } from "@storybook/react-vite";
+import { render } from "jest-matrix-react";
+import React from "react";
+
+import * as stories from "./AvatarWithDetails.stories.tsx";
+
+const { Default } = composeStories(stories);
+
+describe("AvatarWithDetails", () => {
+    it("renders a textual event", () => {
+        const { container } = render(<Default />);
+        expect(container).toMatchSnapshot();
+    });
+});

src/shared-components/avatar/AvatarWithDetails/AvatarWithDetails.test.tsx

@@ -10,6 +10,7 @@ import React from "react";
 import classNames from "classnames";
 
 import styles from "./AvatarWithDetails.module.css";
+import { Flex } from "../../utils/Flex";
 
 export type AvatarWithDetailsProps<C extends ElementType> = {
     /**
@@ -48,10 +49,10 @@ export function AvatarWithDetails<C extends React.ElementType = "div">({
     return (
         <Component className={classNames(styles.avatarWithDetails, className)} {...props}>
             {avatar}
-            <div>
+            <Flex direction="column">
                 <span className={styles.room}>{roomName}</span>
                 <span className={styles.details}>{details}</span>
-            </div>
+            </Flex>
         </Component>
     );
 }

src/shared-components/avatar/AvatarWithDetails/AvatarWithDetails.tsx

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AvatarWithDetails renders a textual event 1`] = `
+<div>
+  <div
+    class="avatarWithDetails"
+  >
+    <div
+      style="width: 40px; height: 40px; background-color: rgb(136, 136, 136); border-radius: 50%;"
+    />
+    <div
+      class="flex"
+      style="--mx-flex-display: flex; --mx-flex-direction: column; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+    >
+      <span
+        class="room"
+      >
+        Room Name
+      </span>
+      <span
+        class="details"
+      >
+        Details about the avatar go here
+      </span>
+    </div>
+  </div>
+</div>
+`;