Create AvatarGroup Component

[bmuenzenmeyer]

Create an AvatarGroup component using the new figma design (direct link).

This component is a group of multiple Avatars, with optional display of overflow.

Read more about the Node.js Website redesign

---

Before You Start...

• Use the Contributor's Guide to learn how to setup your environment, run available commands, and construct proper commits.
• Review the technologies used when building the site, and why they were chosen.
• Review the component creation guide to follow our standards.

---

Details

❓ Not sure where to start breaking down the figma? Read this short guide

• Create a new directory called AvatarGroup within the Common directory that contains all the new code.
• Use the new tailwind color and typography system to assign properties. For example, the background of the overflow Avatar uses Neutral/100 in light mode per the figma.
• Add a new dependency,@radix-ui/avatar, for the basic Avatar functionality. Follow the the dependency guide
• After limit Avatars are provided, an overflow Avatar displaying +N should render, where N is the length of the avatar collection minus limit. Make sure the math is correct before, at, and past the limit.
• Add a storybook story file components/Common/AvatarGroup/index.stories.tsx which exercises each of the component's states.

Suggested props include:

• limit (integer, default 10): dictates total Avatars to render
• avatars (object[]): that follows this general shape:

[
  {
    "imageUrl": "https://avatars.githubusercontent.com/u/298435?v=4",
    "href": "https://github.com/bmuenzenmeyer"
  },
  ...
]

There are 6 states to capture within styles and stories:

• Light, under limit
• Light, over limit
• Light, at limit
• Dark, under limit
• Dark, over limit
• Dark, at limit

[AugustinMauroy]

Can I work on this ?

[bmuenzenmeyer]

you bet!

[shishiro26]

@ovflowd if this issue still open I would like to work on this. can u please assign this to me

[ovflowd]

@ovflowd if this issue still open I would like to work on this. can u please assign this to me

If you look with attention, you'll see this issue state is "In Review" and there's already an open PR.