[IOPLT-237] Refinement of ListItemRadio and RadioGroup

[CrisTofani]

Short description

This PR introduces a refinement to ListItemRadio component to handle loading state and support payment logo rendering in place of an icon in exclusion of it.
ListItemRadio props startImage replaces the flat icon or paymentLogo props to solve an issue in RadioGroup usage that was not recognizing the correct prop spec in its usage.

List of changes proposed in this pull request

• Refinement ListItemRadio
• Refinement RadioGroup

How to test

Check the Selection page on example app.

[dmnplb]

Just a couple of little things:

• The first two id fields provided in the example are the same, so if you try to select the second radio item, you will have two items selected at the same time.
• The ListItemRadio item should be disabled during the loading state. Currently the circle has the same color as the enabled item.

[dmnplb]

As for the skeleton component, right now we're only managing one scenario: when we're sure that the title and description are present. But if we look at the different flows (for example, the "Choose your payment method" screen), there are other possible combinations:

• Title only
• Title and icon (without description)
• The full one: icon, title and description

We should provide the flexibility to let the developer choose the right one depending on the context. Feel free to get in touch with me if you would like to see the different scenarios from our design projects.

[CrisTofani]

As for the skeleton component, right now we're only managing one scenario: when we're sure that the title and description are present. But if we look at the different flows (for example, the "Choose your payment method" screen), there are other possible combinations:

• Title only
• Title and icon (without description)
• The full one: icon, title and description

We should provide the flexibility to let the developer choose the right one depending on the context. Feel free to get in touch with me if you would like to see the different scenarios from our design projects.

addressed in d0e83ce

[dmnplb]

A specific skeleton case was missing (base with icon), so I refactored the loadingProps with boolean values. In short:

• a single line as base behavior, when the state is set to true
• a single line with an icon, if skeletonIcon is set to true
• a single line with an icon and description, if both skeletonIcon and skeletonDescription are set to true

With the most complex skeleton, we have:

    loadingProps: {
      state: true,
      skeletonDescription: true,
      skeletonIcon: true
    }

Also used the optional chaining operator to replace loadingProps && loadingProps.state with loadingProps?.state

Let me know if it makes sense.