Feat: create Common/BlogPostCard component

[danielmarcano]

Description

• Create the Common/Card component, based on these Figma designs.
  • It takes the following properties:

type Author = {
  fullName: string;
  src: string;
};

export type CardProps = {
  title: ComponentProps<typeof Preview>['title'];
  type: Required<ComponentProps<typeof Preview>>['type'];
  description: string;
  authors: Author[];
  date: Date;
};

• The component uses the Preview and AvatarGroup components, and semantic HTML tags to keep it as accessible as possible.

The PR includes two minor fixes:

• Common/AvatarGroup/Avatar: Update component styles as it was creating a layout shift issue, which is not accessible, as it increases Cumulative Layout Shift, a Web Core Vital that is supposed to stay as low as possible. Here's a short video demonstrating this:

delay-ms-issue.mov

• Common/Preview: the h1 tag has been replaced with an h2 one, so as to avoid having more than one h1 tag per page, as it's not considered a good practice, and is also better for screen reader users.

Validation

• Here's a short video showcasing the stories for this new component:

card-component.mov

• Here's a short video showing the styles fix on the Avatar component:

delay-ms-and-layout-fixed.mov

• Unit tests have been added to prevent regression errors on the Common/BlogPostCard component

Related Issues

Closes #6033.

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run npx turbo lint to ensure the code follows the style guide. And run npx turbo lint:fix to fix the style errors if necessary.
• I have run npx turbo format to ensure the code follows the style guide.
• I have run npx turbo test to check if all tests are passing.
• 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	Comments	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 25, 2023 10:55pm

[github-actions]

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	95.07% (309/325)	76.38% (55/72)	93.93% (62/66)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
38	0 💤	0 ❌	0 🔥	6.729s ⏱️

[ovflowd]

Common/AvatarGroup/Avatar: The delayMs prop has been removed from the RedixAvatar.Fallback component, as it was creating a layout shift issue, which is not accessible, as it increases Cumulative Layout Shift, a Web Core Vital that is supposed to stay as low as possible. Here's a short video demonstrating this:

Could you let me know if you are sure about this? According to Radix documentation, delayMs exist exactly to reduce layout shift and reduce screen flickering.

[danielmarcano]

Common/AvatarGroup/Avatar: The delayMs prop has been removed from the RedixAvatar.Fallback component, as it was creating a layout shift issue, which is not accessible, as it increases Cumulative Layout Shift, a Web Core Vital that is supposed to stay as low as possible. Here's a short video demonstrating this:

Could you let me know if you are sure about this? According to Radix documentation, delayMs exist exactly to reduce layout shift and reduce screen flickering.

Hi, @ovflowd! Thank you for your comment.

I checked the Radix UI docs before removing the delayMs prop, and noticed that they mentioned flickering, which tends to be associated with the "swap" of two elements, in this case the RadixAvatar.Image and the RadixAvatar.Fallback ones, but does not cause a layout shift.

Here's a video showing the result of removing delayMs. You can notice the flickering issue for src values that do resolve to images:

delay-no-shift-but-flickering.mov

After reading your comment, I have come up with a better way of avoiding the layout shift. This way, we can keep the delayMs prop, and avoid both the flickering issue, and the layout shift issue.

I will push the changes now. This is how it looks like:

delay-ms-and-layout-fixed.mov

[canerakdas]

Great work and the component layout exactly matches! I have added some reviews to help 😄

[danielmarcano]

Great work and the component layout exactly matches! I have added some reviews to help 😄

Thank you for the kind review! I have applied most of the changes you have suggested, and replied to all of them.

I have also left a couple of doubts for @ovflowd to solve, as neither of them are clear from the designs.

[danielmarcano]

Hi @bmuenzenmeyer, I have just pushed the latest changes, allowing the Common/Card component to receive more than one author.

[ovflowd]

I have also left a couple of doubts for @ovflowd to solve, as neither of them are clear from the designs.

Hey there, are there still open questions for me?

[danielmarcano]

I have also left a couple of doubts for @ovflowd to solve, as neither of them are clear from the designs.

Hey there, are there still open questions for me?

Hi, @ovflowd! Thanks for asking.

Just a single doubt left: should we pass a limit to the AvatarGroup?

[danielmarcano]

Hi, @ovflowd.

I have pushed the changes you have suggested, along with new unit tests for the Common/BlogPostCard component.

[ovflowd]

I know I've left a few last comments but after that I swear, this is good to go.

[danielmarcano]

I know I've left a few last comments but after that I swear, this is good to go.

No worries! Thanks for your suggestions and for your feedback. I have just pushed the changes 🚀

[ovflowd]

Hey @danielmarcano just wanted to again appreciate the fantastic work you've been doing. We truly appreciate it!

[danielmarcano]

Hey @danielmarcano just wanted to again appreciate the fantastic work you've been doing. We truly appreciate it!

That's really kind of you, @ovflowd. Thank you for sharing these thoughts with me!