feat: Introducing avatar tooltip

[canerakdas]

Description

I saw it in Slack (OpenJS Foundation) threads and thought it was a good way to support contributors

With this PR, the Tooltip component was created and minor refactors were made to Avatar and AvatarGroup components. In addition, the WithAvatarGroup component was created to make avatars easier to manage to simplify the process

I took care to use the elements/components in the existing design system as a design, I was inspired by (Search typing) in the Figma for the Tooltip component;

https://www.figma.com/design/pu1vZPqNIM7BePd6W8APA5/Node.js?node-id=464-6397&node-type=frame&t=dj6OGYBZLLo5cp4z-0

Validation

• Avatars should continue to work as it is.
• A tooltip should appear for users in authors.json whose website field is exist

Example screenshot;

Related Issues

Related to #7141

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run npm run format to ensure the code follows the style guide.
• I have run npm run test to check if all tests are passing.
• I have run npx turbo build to check if the website builds without errors.
• I've covered new added functionality with unit tests if necessary.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Nov 18, 2024 3:04pm

[mcollina]

Does it work on mobile? I've tried from my iphone and it didn't work from the preview.

[AugustinMauroy]

First look, it's great but maybe have separate type for avatar/ frontmatter/intermediate objects

[AugustinMauroy]

After some test on desktop few point:

• For the learn section, all the authors have a GitHub username, so there's no need to go into the authors.json file.
• For the blog section, we'd have to try and standardise the data so that eventually it's just GitHub usernames. To reduce the complexity of things
• Like Matteo said need to found something for mobile

[canerakdas]

Does it work on mobile? I've tried from my iphone and it didn't work from the preview.

This is the design choice of the radix tooltip component I use, and IMO it is the right choice (radix-ui/primitives#955 (comment))

Here, as an alternative, it may be better to redirect directly when a profile image is clicked on mobile (like GitHub), but the current profile images are too small for mobile resolution, I will check the accessibility and try to implement a better solution👍

[github-actions]

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 100	🟢 100	🟢 100	🟢 91	🔗
/en/about	🟢 100	🟢 100	🟢 100	🟢 91	🔗
/en/about/previous-releases	🟢 95	🟢 100	🟢 100	🟢 92	🔗
/en/download	🟢 100	🟢 100	🟢 100	🟢 91	🔗
/en/blog	🟢 100	🟢 100	🟢 96	🟢 92	🔗

[AugustinMauroy]

Does it work on mobile? I've tried from my iphone and it didn't work from the preview.

This is the design choice of the radix tooltip component I use, and IMO it is the right choice (radix-ui/primitives#955 (comment))

Here, as an alternative, it may be better to redirect directly when a profile image is clicked on mobile (like GitHub), but the current profile images are too small for mobile resolution, I will check the accessibility and try to implement a better solution👍

IMO, double can do the job and increase little bit the size of the avatar for mobile

[ovflowd]

@canerakdas can you resolve the conflicts? 👀

[ovflowd]

I've finally done the review :)

[avivkeller]

LGTM!

[ovflowd]

Awesome work here, @canerakdas, thank you so much!! <3 <3

[AugustinMauroy]

Awesome work here, @canerakdas, thank you so much!! <3 <3

yeah it's super cool !

thanks @canerakdas !