Split up the Group component into different components

[olemartinorg]

Description

After #1406, we've come a bit further on the quest to split up the Group component. With different types for each sub-component, it is obvious that we should do the rest of the job and separate these components altogether.

My suggestion:

• RepeatingGroup replaces a repeating Group
• LikertGroup replaces a repeating Group with edit-mode set to likert
• Group stays as-is, or is renamed to Collection or similar. If it is not renamed, we should make sure app developers are given ample warnings if they re-use old configuration.
• Group with Panel styling should be moved to the Panel component, using children, if possible
• Panels with group-reference should be separated into a distinct component (RepeatingGroupReference?)

Additional Information

• Considerations for v4 #339

[Magnusrm]

Relevant slack discussion: https://altinndevops.slack.com/archives/C045EB3JA9X/p1701786089111159
For info: @lassopicasso @olemartinorg @Febakke @RonnyB71

After fetching all altinn apps currently in production and tt02 using the fetch script i have found these uses of the "Panel" and "Panelgroup" components:

I am disregarding our own e2e test apps.

Panel-group with repeating group reference

No one is using this

Panel-group

"Group" component with "panel" property set.

There are 27 instances of this configuration being used.

• Every instance has "showIcon": false. (Not using icon)
• 25 instances use the "info" color
• 2 instances in the same app use the "success" color

The app using "success" is the signing app "KRT-1185 Forsikringsforetakets behandling av klientmidler"
It is used to group a button-group used to sign with the tekst reading in the lines of "I am confirming that the form is correct".

Alternatives after removing "panel" property:

1. with "groupingIndicator" set to panel (will allways be "info" color)

• sidenote: alert is being used instead of panel for the top message

2. using "showGroupingIndicator" and changing the "Paragraph" component to "Alert".

3. using using "showGroupingIndicator" and changing the "Paragraph" component to "Alert" as info.

4. We could also not group the text and button group at all and just have the text as an info Alert say "By signing this form I am confirming ..."

Other examples of PanelGroup and an alternative solution:

Panel

"Panel" component with title and body.

There are about 1000 instances of "Panel" being used in this way throughout our apps. Whereas "Alert" is used about 160 times.

Some before and after examples of using "Alert" instead of "Panel":