chore: adapt Tag to design

[RamProg]

🚪 Why?

Update tag profile

🔑 What?

Add feedback for hover

🏡 Context

https://www.figma.com/design/uImdC0GKxH59DkjzBqRJEF/Layouts-%26-Blocks?node-id=1469-190164&node-type=frame&t=dm9bATe2HlYwytsm-0

Hover state:

[swarmia]

✅  Linked to FCT-19788 · Create Link Label
➡️  Part of Epic FCT-16894 · Web - Employee Profile MVP (Overview)

[github-actions]

🔍 Visual review for your branch is published 🔍

Here are the links to:

• the Visual Review Page

• the latest build on chromatic

• the full storybook

[eliseo-juan]

It's hard to me to keep calling this component Tag, maybe it's a selectable/navigable row? I know this is gonna be on experimental, but the name "tag" doesn't work well for this component

[RamProg]

It's hard to me to keep calling this component Tag, maybe it's a selectable/navigable row? I know this is gonna be on experimental, but the name "tag" doesn't work well for this component

Last time we reviewed these elements they were called Tags in the design system in Figma. I could create a wrapper to make it clickable, but I think this just adds feedback (bg-color and icon) on a feature that was already there and I don't see anywhere else where we could use the wrapper.

[nlopin]

shouldn't we make it a button or an a? this will help us dropping the !!onClick check in favor of disabled

[RamProg]

The thing is that if doesn't have an onClick action then it's not really a button or an a so then it would be semantically wrong.

[josepjaume]

Then we should probably change the HTML element conditionally for accessibility purposes

[josepjaume]

Okay, I see you're changing the role instead. It's probably ok then!