chore(Cross): [IOAPPX-372] Add iridescent credential trust mark

[dmnplb]

trafficstars

[!warning] This PR depends on:

• https://github.com/pagopa/io-app/pull/6123
• https://github.com/pagopa/io-app/pull/6176

Short description

This PR adds a new iridescent credential trust mark to the cards managed through ITWallet. The iridescence effect is the result of a combination of three dynamic elements:

• A source of light created by an easing white radial gradient that moves along the horizontal axis
• A rainbow gradient moving along the vertical axis:
  • Through the stamp mask in a much more visible way
  • Through the entire surface of the button in a subtle way

These three elements are all managed using the react-native-skia library.

Please note: This effect is the result of a trade-off. I could have come up with a more sophisticated and realistic solution, but:

• It would have meant using more filters and layers, with a potential loss of performance
• The sophistication probably wouldn't have resulted in a noticeably superior effect

The effect must convey the idea of a reflective metallic foil, not necessarily a realistic metallic foil (although it would certainly be much more attractive).

[!important] To avoid disruptions in the current test environment, the effect is visible only if you enable experimental DS

Preview

Visible rainbow movement (WIP)	Final result

Effect IRL

https://github.com/user-attachments/assets/50b129dc-5b3e-4a31-8659-ae065ff3c2f0

List of changes proposed in this pull request

• Add specific code for the effect to the ItwCredentialTrustmark component
• Add the new Iridescent trustmark screen to the DS

How to test

1. Run the app in the local environment
2. Enable the experimental DS in the Developer section
3. Go to the Design System → Iridescent trustmark (Experimental lab)

[pagopa-github-bot]

Affected stories

• ⚙️ IOAPPX-372: [io-app] Trustmark con effetto iridescente
  subtask of
  • ⚡ IOAPPX-32: Design System

Generated by :no_entry_sign: dangerJS against 858c532464bd41a6deeaf4bf570e7d4048b98316

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 25.00000% with 36 lines in your changes missing coverage. Please review.

Project coverage is 47.05%. Comparing base (4f204b4) to head (858c532). Report is 657 commits behind head on master.

Files with missing lines	Patch %	Lines
...presentation/components/ItwCredentialTrustmark.tsx	24.44%	34 Missing :warning:
...tures/design-system/core/DSIridescentTrustmark.tsx	33.33%	2 Missing :warning:

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #6179      +/-   ##
==========================================
- Coverage   48.42%   47.05%   -1.37%     
==========================================
  Files        1488     1811     +323     
  Lines       31617    36856    +5239     
  Branches     7669     8806    +1137     
==========================================
+ Hits        15311    17344    +2033     
- Misses      16238    19446    +3208     
+ Partials       68       66       -2     

Files with missing lines	Coverage Δ
ts/features/design-system/navigation/navigator.tsx	17.64% <ø> (-5.22%)	:arrow_down:
ts/features/design-system/navigation/routes.ts	100.00% <ø> (ø)
...tures/design-system/core/DSIridescentTrustmark.tsx	33.33% <33.33%> (ø)
...presentation/components/ItwCredentialTrustmark.tsx	25.80% <24.44%> (ø)

... and 1432 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 4a19c6b...858c532. Read the comment docs.