feat: add CrossLink component

[HinataKah0]

Description

Implement new CrossLink component and Storybook's story as specified in the Figma.

Validation

1. Deploy Storybook
2. Manual testing by comparing to Figma
3. And check if Github pipeline passes

Related Issues

Fixes #5761

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	Sep 26, 2023 3:15pm

[HinataKah0]

Marked it as draft because there are still some things that I want to check/think first.

[AugustinMauroy]

Good work ! Don't forget to give the box a maximum size

[github-actions]

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	90.24% (185/205)	75% (30/40)	86.66% (39/45)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
14	0 💤	0 ❌	0 🔥	3.605s ⏱️

[AugustinMauroy]

The last thing for me is the background, you should try to make it transparent. Because on a dark theme it's white whereas in the figma the background is black. I'm not sure that's clear but I hope you've understood 😁.

[ovflowd]

The last thing for me is the background, you should try to make it transparent. Because on a dark theme it's white whereas in the figma the background is black. I'm not sure that's clear but I hope you've understood 😁.

I dont think the bg should be transparent. Should be white.

[AugustinMauroy]

I dont think the bg should be transparent. Should be white.

on figma the background of box is same of app background so it's should be transparent.

[ovflowd]

I dont think the bg should be transparent. Should be white.

on figma the background of box is same of app background so it's should be transparent.

That's an overstatement. The Component Figma's CSS properties definitely declares a white background. This should not be transparent. First, if we add this to a non-white background we would already be non-compliant with the theme, same on dark mode.

[HinataKah0]

Addressing @AugustinMauroy comments here

Don't forget to give the box a maximum size

Actually I am not sure what "maximum size" you're talking about. If you're talking about the max-height/width property, I don't think we need to specify it as there's no need for it.

If you're talking about the preview in Storybook, I followed the 305px described in the Figma to demonstrate that the text truncation works.

Transparent background

As Claudio has described, we have color schemes for both light and dark mode. It's better to state what background color is used for each component as per the Figma. So there are no surprises when we are using the components later.

[ovflowd]

FYI @HinataKah0 that we moved to PostCSS, so you need to rename the file from .scss to .css

[ovflowd]

I think we're ready! LGTM! Thank you, @HinataKah0 !!