feat:#243 add features component

[ss-dimasm]

Pull request checklist

Detail as per issue below (required):

part of #243

Context

Initialize a new component as part of elements v5 'Features

Design:

Preview (with Tooltip support):

2025-01-17_16-31-30.mp4

[codacy-production]

Coverage summary from Codacy

See diff coverage on Codacy

Coverage variation	Diff coverage
Report missing for 09632f01	✅ 83.33%

Coverage variation details

	Coverable lines	Covered lines	Coverage
Common ancestor commit (09632f0)	Report Missing	Report Missing	Report Missing
Head commit (101f336)	4760	4242	89.12%

Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch: <coverage of head commit> - <coverage of common ancestor commit>

Diff coverage details

	Coverable lines	Covered lines	Diff coverage
Pull request (#265)	24	20	83.33%

Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified: <covered lines added or modified>/<coverable lines added or modified> * 100%

See your quality gate settings    Change summary preferences

_{Codacy stopped sending the deprecated coverage status on June 5th, 2024. Learn more}

Footnotes

1. Codacy didn't receive coverage data for the commit, or there was an error processing the received data. Check your integration for errors and validate that your coverage setup is correct. ↩

[ksolanki7]

@ss-dimasm The issue you discussed with me is maybe the race condition on the visibility of the Tooltip v/s the placement of the tooltip on the canvas. The solution to that can be adding data attribute to tooltip by updating the useTooltip hook -> getTooltipProps i.e. data-visible to boolean isVisible state and then managing the animation using CSS as below.

export const ElTooltip = styled.div`
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes fadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  ... (rest of CSS)

  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
  opacity: 0;

  &[data-visible='true'] {
    animation-name: fadeIn;
  }
  &[data-visible='false'] {
    animation-name: fadeOut;
  }

[ss-dimasm]

Hey @ksolanki7 while I agree it's caused by the race condition that appear between javascript logic and the canvas, and we would fix it with CSS solution

I suppose it would be more handy if it have their own isolated ticket; hence it's not only appearing in the Features and I believe as far as it not changing the API it would not cause a major change, what do you say?

[ksolanki7]

@ss-dimasm Yes, definately. This requires changes in the Tooltip itself i.e. at the component level and not at the consumer end.

[kurtdoherty]

Looks good, just the one question which may or may not be a blocker.

[kurtdoherty]

Thanks @ss-dimasm. Just the one todo off the back of your answer.