NXT-15224: Updated Card to the latest GUI

[ion-andrusciac-lgp]

Checklist

• I have read and understand the contribution guide
• A CHANGELOG entry is included
• At least one test case is included for this feature or bug fix
• Documentation was added or is not needed
• This is an API breaking change

Issue Resolved / Feature Added

Updated Card to the latest GUI

Resolution

• Icons can be placed as a prefix for labels
• Badges now natively support Icon, Image, or Text sub-components.
• Title and ImageIcon can be centered using centeredTitle alongside captionOverlay or captionOverlayOnFocus
• ProgressBar or MediaDuration badge can be overlaid inside the card component using progressBarOverlay or durationOverlay
• Captions can now overflow their container using captionOverflow or captionOverflowOnFocus

Additional Considerations

Links

NXT-15224

Comments

Enact-DCO-1.0-Signed-off-by: Ion Andrusciac ion.andrusciac@lgepartner.com

[codecov]

Codecov Report

❌ Patch coverage is 92.40506% with 6 lines in your changes missing coverage. Please review.
✅ Project coverage is 82.54%. Comparing base (4378483) to head (0f0be4d).

Files with missing lines	Patch %	Lines
Card/Card.js	92.40%	5 Missing and 1 partial ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##           develop     #372      +/-   ##
===========================================
+ Coverage    82.46%   82.54%   +0.07%     
===========================================
  Files          153      153              
  Lines         7523     7579      +56     
  Branches      2270     2298      +28     
===========================================
+ Hits          6204     6256      +52     
- Misses        1026     1029       +3     
- Partials       293      294       +1     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[daniel-stoian-lgp]

is this intended? showDuration && durationOverlay false/ true. More exactly, the left image position changes

vs

[daniel-stoian-lgp]

only a few comments. great job

[ion-andrusciac-lgp]

is this intended? showDuration && durationOverlay false/ true. More exactly, the left image position changes vs

As long as we do not have a specific design for that case, this is intended. The same behavior we can observe on showProgressBar true/false.

[daniel-stoian-lgp]

LGTM

[alexandrumorariu]

LGTM