chore(Cross): [IOAPPX-283] Add IOScrollView (next iteration of GradientScroll, now deprecated) + IOScrollViewWithLargeHeader

[dmnplb]

Note

This PR is the result of the discussion we had in the PR below:

• [IOAPPX-283] Deprecate GradientScrollView for IOScrollView io-app-design-system#243

Short description

This PR add the new IOScrollView, next iteration of the GradientScrollView (now officially deprecated):

• Simpler UI logic without unnecessary calculations
• Option to add a tertiary button
• Dark mode support

It also adds the new IOScrollViewWithLargeHeader screen component that should replace RNavScreenWithLargeHeader.

List of changes proposed in this pull request

• Add the new IOScrollView screen component. Compared to the previous GradientScrollView:

  • Remove GradientBottomActions because it hasn't added any advantage
  • Add the new snapOffset prop to optionally configure the snap point
  • Add optional headerConfig prop
  • Add optional includeContentMargins boolean value to remove content margins if needed
  • Manage everything inside GradientScrollView (now IOScrollView)
  • Refactor action related props by adding a single actions config object
  • Change opacity transition from discrete to continuous
  • Apply the opacity transition just to the gradient, excluding safe background block
  • Improve debugMode so you can see the gradient area even when the end is reached

• Add the new IOScrollViewWithLargeHeader screen component. Compared to the previous RNavScreenWithLargeHeader:

  • Remove fixedBottomSlot because we already manage the actions at the bottom with the IOScrollView component
  • Simpler inner component logic

Preview

Three buttons	Debug section
three-buttons.mp4	ioscrollview.mp4

New opacity transition	Dark mode
new-opacity-transition.mp4	gradient-scroll-dark-mode.mp4

As you can see from the video above, in the most extreme case you can see all kinds of buttons.

How to test

1. Launch the app in the local environment
2. Go to the Design System → Screens → IOScrollView… screens

[pagopa-github-bot]

Affected stories

• ⚙️ IOAPPX-283: Refactor di GradientScrollView per diverse combinazioni di pulsanti
  subtask of
  • ⚡ IOAPPX-32: Design System

Generated by 🚫 dangerJS against fb4f97f

[codecov]

Codecov Report

Attention: Patch coverage is 10.43478% with 103 lines in your changes are missing coverage. Please review.

Project coverage is 49.40%. Comparing base (4f204b4) to head (763d43d).
Report is 85 commits behind head on master.

❗ Current head 763d43d differs from pull request most recent head fb4f97f

Please upload reports for the commit fb4f97f to get more accurate results.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #5704      +/-   ##
==========================================
+ Coverage   48.42%   49.40%   +0.97%     
==========================================
  Files        1488     1608     +120     
  Lines       31617    31988     +371     
  Branches     7669     7744      +75     
==========================================
+ Hits        15311    15804     +493     
+ Misses      16238    16121     -117     
+ Partials       68       63       -5     

Files	Coverage Δ
ts/components/ui/RNavScreenWithLargeHeader.tsx	80.76% <ø> (+3.84%)	⬆️
ts/features/design-system/navigation/navigator.tsx	18.75% <ø> (-4.11%)	⬇️
ts/features/design-system/navigation/routes.ts	100.00% <ø> (ø)
...esign-system/core/DSIOScrollViewWithoutActions.tsx	25.00% <25.00%> (ø)
...sign-system/core/DSIOScrollViewWithLargeHeader.tsx	20.00% <20.00%> (ø)
ts/features/design-system/core/DSIOScrollView.tsx	11.11% <11.11%> (ø)
ts/components/ui/IOScrollViewWithLargeHeader.tsx	5.26% <5.26%> (ø)
ts/components/ui/IOScrollView.tsx	10.25% <10.25%> (ø)

... and 442 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 cb333d9...fb4f97f. Read the comment docs.

[dmnplb]

@CrisTofani Let's merge this iteration for now, unless we have something else to add. Then we can easily iterate from the first release by adding what's needed. What do you think?

[CrisTofani]

what about merging pagopa/io-app-design-system#243 , and upgrade it in this PR before merging this one?

[dmnplb]

what about merging pagopa/io-app-design-system#243 , and upgrade it in this PR before merging this one?

@CrisTofani We need to release a new version for the @giuseppedipinto's PR about ServiceCards, so it seems a good idea for me.

[CrisTofani]

LGTM