chore(Cross): [IOAPPX-448] Add missing components to the Design System section, remove legacy ones + Change ListItemMessage component API

[dmnplb]

Short description

This PR updates the Design System section with missing components. Checking them in isolation is essential to avoid regression during development.

List of changes proposed in this pull request

• Add BannerErrorState to the DSAdvice page
  • Restrict the choice of possible icons to avoid excessive generalisation of the component itself
• Add the ListItemSearchInstitution to the DSListItems page
• Rename CgnModuleDiscount to ModuleCgnDiscount, refactor it and move it to DSModules from DSListItems
• Remove gradients from DSColors because CGN doesn't use them anymore

MessageListItem → ListItemMessage

• Change the component name
• Rename DoubleAvatar to AvatarDouble (to keep the same convention as the others) and add it to the DSLogos page
• Replace badgeText and badgeVariant props with the single tag prop
• Remove CustomPressableListItemBase by integrating it into ListItemMessage
• Add all the ListItemMessage possible combinations to DSListItems for testing purposes

Preview

The new ListItemMessage section in the List Items page

How to test

Go to the Design System section and check the update pages

[pagopa-github-bot]

Affected stories

• ⚙️ IOAPPX-448: Aggiunta di alcuni componenti all'interno della sezione DS
  subtask of
  • ⚡ IOAPPX-32: Design System

Generated by 🚫 dangerJS against 6b3f740

[codecov]

Codecov Report

Attention: Patch coverage is 78.78788% with 14 lines in your changes missing coverage. Please review.

Project coverage is 49.16%. Comparing base (4f204b4) to head (1ddd447).
Report is 907 commits behind head on master.

Files with missing lines	Patch %	Lines
ts/features/design-system/core/DSListItems.tsx	40.00%	6 Missing ⚠️
ts/features/messages/components/Home/homeUtils.ts	0.00%	3 Missing ⚠️
ts/components/ui/BannerErrorState.tsx	0.00%	1 Missing ⚠️
ts/features/design-system/core/DSAdvice.tsx	50.00%	1 Missing ⚠️
ts/features/design-system/core/DSModules.tsx	66.66%	1 Missing ⚠️
...features/messages/screens/MessagesSearchScreen.tsx	0.00%	1 Missing ⚠️
...es/common/components/ListItemSearchInstitution.tsx	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #6541      +/-   ##
==========================================
+ Coverage   48.42%   49.16%   +0.73%     
==========================================
  Files        1488     1553      +65     
  Lines       31617    32068     +451     
  Branches     7669     7259     -410     
==========================================
+ Hits        15311    15765     +454     
- Misses      16238    16264      +26     
+ Partials       68       39      -29     

Files with missing lines	Coverage Δ
.../components/merchants/CgnMerchantsDiscountItem.tsx	22.22% <ø> (-17.78%)	⬇️
...nus/cgn/components/merchants/ModuleCgnDiscount.tsx	94.44% <100.00%> (ø)
...omponents/merchants/discount/CgnDiscountHeader.tsx	100.00% <ø> (ø)
ts/features/design-system/DesignSystem.tsx	31.03% <ø> (-3.75%)	⬇️
ts/features/design-system/core/DSColors.tsx	22.95% <ø> (+2.95%)	⬆️
ts/features/design-system/core/DSLogos.tsx	31.42% <ø> (+0.39%)	⬆️
ts/features/design-system/core/DSTypography.tsx	45.65% <ø> (-4.35%)	⬇️
...tures/messages/components/Home/DS/AvatarDouble.tsx	60.00% <100.00%> (ø)
...es/messages/components/Home/DS/ListItemMessage.tsx	100.00% <100.00%> (ø)
...ges/components/Home/DS/ListItemMessageSkeleton.tsx	100.00% <100.00%> (ø)
... and 11 more

... and 1717 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 dc66860...1ddd447. Read the comment docs.

[github-actions]

Jira Pull Request Link

This Pull Request refers to the following Jira issue IOAPPX-448

[Hantex9]

Do we really need to limit the icons here? What do you think about making the entire IOIcons set available instead? It would certainly provide more flexibility for potential future use cases.

[dmnplb]

@Hantex9 It certainly provides more flexibility, but the component already has a specific job (Error...), which is to signal states related to errors or warnings. For other purposes we already have other components like Banner or Alert. I can't see BannerErrorState being used with a smiley icon, for example.

So I think it's better to limit the choice for now. If we need some flexibility in the future, things will change.

[Hantex9]

It makes sense, and I understand your point about the component having a specific purpose. However, limiting the icons to a predefined set could become a constraint in the future if new error-related icons are introduced or required for additional use cases.

This approach might lead to an increased boilerplate if we need to update the component later to include more icons. Allowing the entire IOIcons set would future-proof the component and reduce the need for maintenance in case requirements evolve. What do you think?

[dmnplb]

limiting the icons to a predefined set could become a constraint in the future if new error-related icons are introduced or required for additional use cases

I consider adding this level of friction to be a feature rather than a bug, but I also understand your point about new error-related icons. I'll restore the IOIcons generic type 👍🏻

[dmnplb]

@Hantex9 Addressed here → 1ddd447 (#6541)

[Hantex9]

LGTM!