feat: Introducing avatar tooltip

apps/site/components/Common/AvatarGroup/Avatar/index.module.css

@@ -1,6 +1,9 @@
-.avatar {
+.item {
   @apply flex
-    size-8
+    h-full
+    max-h-10
+    w-full
+    max-w-10
     items-center
     justify-center
     rounded-full
@@ -15,9 +18,21 @@
     dark:text-neutral-300;
 }
 
-.avatarRoot {
+.avatar {
   @apply -ml-2
     size-8
     flex-shrink-0
     first:ml-0;
+
+  &:hover {
+    @apply z-10;
+  }
+}
+
+.small {
+  @apply size-8;
+}
+
+.medium {
+  @apply size-10;
 }

apps/site/components/Common/AvatarGroup/Avatar/index.stories.tsx

@@ -8,22 +8,23 @@ type Meta = MetaObj<typeof Avatar>;
 
 export const Default: Story = {
   args: {
-    src: getGitHubAvatarUrl('ovflowd'),
-    alt: 'ovflowd',
+    image: getGitHubAvatarUrl('ovflowd'),
+    nickname: 'ovflowd',
   },
 };
 
 export const NoSquare: Story = {
   args: {
-    src: '/static/images/logos/nodejs.png',
-    alt: 'SD',
+    image: '/static/images/logo-hexagon-card.png',
+    nickname: 'SD',
   },
 };
 
 export const FallBack: Story = {
   args: {
-    src: 'https://avatars.githubusercontent.com/u/',
-    alt: 'UA',
+    image: 'https://avatars.githubusercontent.com/u/',
+    nickname: 'John Doe',
+    fallback: 'JD',
   },
 };
 

apps/site/components/Common/AvatarGroup/Avatar/index.tsx

@@ -1,27 +1,40 @@
 import * as RadixAvatar from '@radix-ui/react-avatar';
-import type { FC } from 'react';
+import classNames from 'classnames';
+import type { ComponentPropsWithoutRef, ElementRef } from 'react';
+import { forwardRef } from 'react';
 
 import styles from './index.module.css';
 
 export type AvatarProps = {
-  src: string;
-  alt: string;
-  fallback: string;
+  image?: string;
+  name?: string;
+  nickname: string;
+  fallback?: string;
+  size?: 'small' | 'medium';
 };
 
-const Avatar: FC<AvatarProps> = ({ src, alt, fallback }) => (
-  <RadixAvatar.Root className={styles.avatarRoot}>
+const Avatar = forwardRef<
+  ElementRef<typeof RadixAvatar.Root>,
+  ComponentPropsWithoutRef<typeof RadixAvatar.Root> & AvatarProps
+>(({ image, name, fallback, size = 'small', ...props }, ref) => (
+  <RadixAvatar.Root
+    {...props}
+    className={classNames(styles.avatar, styles[size], props.className)}
+    ref={ref}
+  >
     <RadixAvatar.Image
       loading="lazy"
-      src={src}
-      alt={alt}
-      title={alt}
-      className={styles.avatar}
+      src={image}
+      alt={name}
+      className={styles.item}
     />
-    <RadixAvatar.Fallback delayMs={500} className={styles.avatar}>
+    <RadixAvatar.Fallback
+      delayMs={500}
+      className={classNames(styles.item, styles[size])}
+    >
       {fallback}
     </RadixAvatar.Fallback>
   </RadixAvatar.Root>
-);
+));
 
 export default Avatar;

apps/site/components/Common/AvatarGroup/Overlay/index.module.css

@@ -0,0 +1,28 @@
+.overlay {
+  @apply flex
+    min-w-56
+    gap-2
+    p-3;
+}
+
+.user {
+  @apply grow;
+}
+
+.name {
+  @apply font-semibold
+    text-neutral-900
+    dark:text-neutral-300;
+}
+
+.nickname {
+  @apply font-medium
+    text-neutral-700
+    dark:text-neutral-500;
+}
+
+.arrow {
+  @apply w-3
+    fill-neutral-600
+    dark:fill-white;
+}

apps/site/components/Common/AvatarGroup/Overlay/index.tsx

@@ -0,0 +1,36 @@
+import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
+import type { ComponentProps, FC } from 'react';
+
+import Avatar from '@/components/Common/AvatarGroup/Avatar';
+import Link from '@/components/Link';
+
+import styles from './index.module.css';
+
+export type AvatarOverlayProps = ComponentProps<typeof Avatar> & {
+  website?: string;
+};
+
+const AvatarOverlay: FC<AvatarOverlayProps> = ({
+  image,
+  name,
+  nickname,
+  fallback,
+  website,
+}) => (
+  <Link className={styles.overlay} href={website} target="_blank">
+    <Avatar
+      image={image}
+      name={name}
+      nickname={nickname}
+      fallback={fallback}
+      size="medium"
+    />
+    <div className={styles.user}>
+      {name && <div className={styles.name}>{name}</div>}
+      {nickname && <div className={styles.nickname}>{nickname}</div>}
+    </div>
+    <ArrowUpRightIcon className={styles.arrow} />
+  </Link>
+);
+
+export default AvatarOverlay;

apps/site/components/Common/AvatarGroup/__tests__/index.test.mjs

@@ -22,8 +22,8 @@ const names = [
 ];
 
 const avatars = names.map(name => ({
-  src: getGitHubAvatarUrl(name),
-  alt: name,
+  image: getGitHubAvatarUrl(name),
+  nickname: name,
 }));
 
 describe('AvatarGroup', () => {

apps/site/components/Common/AvatarGroup/index.stories.tsx

@@ -24,14 +24,25 @@ const names = [
 ];
 
 const unknownAvatar = {
-  src: 'https://avatars.githubusercontent.com/u/',
-  alt: 'unknown-avatar',
+  image: 'https://avatars.githubusercontent.com/u/',
+  nickname: 'unknown-avatar',
 };
 
 const defaultProps = {
   avatars: [
     unknownAvatar,
-    ...names.map(name => ({ src: getGitHubAvatarUrl(name), alt: name })),
+    ...names.map(name => ({ image: getGitHubAvatarUrl(name), nickname: name })),
+  ],
+};
+
+const avatarOverlay = {
+  avatars: [
+    {
+      image: getGitHubAvatarUrl('nodejs'),
+      name: 'Node.js',
+      nickname: 'nodejs',
+      website: 'https://nodejs.org',
+    },
   ],
 };
 
@@ -46,6 +57,10 @@ export const WithCustomLimit: Story = {
   },
 };
 
+export const WithOverlay: Story = {
+  args: avatarOverlay,
+};
+
 export const InSmallContainer: Story = {
   decorators: [
     Story => (

apps/site/components/Common/AvatarGroup/index.tsx

@@ -1,25 +1,29 @@
 'use client';
 
 import classNames from 'classnames';
-import type { ComponentProps, FC } from 'react';
-import { useState, useMemo } from 'react';
+import type { FC } from 'react';
+import { useState, useMemo, Fragment } from 'react';
 
+import type { AvatarProps } from '@/components/Common/AvatarGroup/Avatar';
 import Avatar from '@/components/Common/AvatarGroup/Avatar';
 import avatarstyles from '@/components/Common/AvatarGroup/Avatar/index.module.css';
-import { getAcronymFromString } from '@/util/stringUtils';
+import AvatarOverlay from '@/components/Common/AvatarGroup/Overlay';
+import Tooltip from '@/components/Common/Tooltip';
 
 import styles from './index.module.css';
 
-type AvatarGroupProps = {
-  avatars: Array<Omit<ComponentProps<typeof Avatar>, 'fallback'>>;
+export type AvatarGroupProps = {
+  avatars: Array<AvatarProps & { website?: string }>;
   limit?: number;
   isExpandable?: boolean;
+  size?: AvatarProps['size'];
 };
 
 const AvatarGroup: FC<AvatarGroupProps> = ({
   avatars,
   limit = 10,
   isExpandable = true,
+  size = 'small',
 }) => {
   const [showMore, setShowMore] = useState(false);
 
@@ -30,21 +34,26 @@ const AvatarGroup: FC<AvatarGroupProps> = ({
 
   return (
     <div className={styles.avatarGroup}>
-      {renderAvatars.map((avatar, index) => (
-        <Avatar
-          src={avatar.src}
-          alt={avatar.alt}
-          fallback={getAcronymFromString(avatar.alt)}
-          key={index}
-        />
+      {renderAvatars.map(({ website, ...avatar }) => (
+        <Fragment key={avatar.nickname}>
+          {website ? (
+            <Tooltip
+              content={<AvatarOverlay {...avatar} website={website} />}
+              asChild
+            >
+              <Avatar {...avatar} size={size} className="cursor-pointer" />
+            </Tooltip>
+          ) : (
+            <Avatar {...avatar} size={size} />
+          )}
+        </Fragment>
       ))}
-
       {avatars.length > limit && (
         <span
           onClick={isExpandable ? () => setShowMore(prev => !prev) : undefined}
-          className={classNames(avatarstyles.avatarRoot, 'cursor-pointer')}
+          className={classNames(avatarstyles.avatar, 'cursor-pointer')}
         >
-          <span className={avatarstyles.avatar}>
+          <span className={avatarstyles.item}>
             {`${showMore ? '-' : '+'}${avatars.length - limit}`}
           </span>
         </span>

apps/site/components/Common/BlogPostCard/__tests__/index.test.mjs

@@ -65,38 +65,32 @@ describe('BlogPostCard', () => {
     );
 
     it('Renders all passed authors fullName(s), comma-separated', () => {
-      const authors = [
-        { fullName: 'Jane Doe', src: '' },
-        { fullName: 'John Doe', src: '' },
-      ];
+      const authors = ['Jane Doe', 'John Doe'];
 
       renderBlogPostCard({ authors });
 
       const fullNames = authors.reduce((prev, curr, index) => {
         if (index === 0) {
-          return curr.fullName;
+          return curr;
         }
 
-        return `${prev}, ${curr.fullName}`;
+        return `${prev}, ${curr}`;
       }, '');
 
       expect(screen.getByText(fullNames)).toBeVisible();
     });
 
     it('Renders all passed authors fullName(s), comma-separated', () => {
-      const authors = [
-        { fullName: 'Jane Doe', src: '' },
-        { fullName: 'John Doe', src: '' },
-      ];
+      const authors = ['Jane Doe', 'John Doe'];
 
       renderBlogPostCard({ authors });
 
       const fullNames = authors.reduce((prev, curr, index) => {
         if (index === 0) {
-          return curr.fullName;
+          return curr;
         }
 
-        return `${prev}, ${curr.fullName}`;
+        return `${prev}, ${curr}`;
       }, '');
 
       expect(screen.getByText(fullNames)).toBeVisible();

apps/site/components/Common/BlogPostCard/index.stories.tsx

@@ -11,12 +11,7 @@ export const Default: Story = {
     category: 'vulnerability',
     description:
       'Starting on March 15th and going through to March 17th (with much of the issue being mitigated on the 16th), users were receiving intermittent 404 responses when trying to download Node.js from nodejs.org, or even accessing parts of the website.',
-    authors: [
-      {
-        fullName: 'Hayden Bleasel',
-        src: 'https://avatars.githubusercontent.com/u/',
-      },
-    ],
+    authors: ['Hayden Bleasel'],
     slug: '/blog/vulnerability/something',
     date: new Date('17 October 2023'),
   },
@@ -33,13 +28,7 @@ export const MoreThanOneAuthor: Story = {
   ...Default,
   args: {
     ...Default.args,
-    authors: [
-      ...(Default.args?.authors ?? []),
-      {
-        fullName: 'Jane Doe',
-        src: 'https://avatars.githubusercontent.com/u/',
-      },
-    ],
+    authors: [...(Default.args?.authors ?? []), 'Jane Doe'],
   },
 };