Be able to use the Accordion component from Felles Designsystem

[mikaelrss]

Description

We want to be able to display information with the use of the Accordion component from @digdir/design-system-react.

Proposed techincal solution

This needs to be solved as a new component Can be solved by providing an option to Group and RepeatingGroup which implements the Accordion component from @digdir/design-system-react.

The new component behaviour of Group and RepeatingGroup should:

• Be able to accept a list of options to support multiple items in the Accordion.
• Each option should accept a title text resource via the textResourceBindings-property.
• Be able to accept dynamic content. Text body should be provided by placing a Paragraph inside the Accordion.

After discussing this with the apps team, we have decided that we will introduce two new components. Accordion and AccordionGroup.

Accordion

Accordion would be a single stand alone component which can have a title and some contents in a body. The contents of the body should be comprised of other Altinn 3 components. If the Accordion should contain only text, this should be solved with placing a Paragraph inside it. There will be some contraints on what content could go into an Accordion. The title of the Accordion will be provided via textResourceBindings.

Closed state:

Open state:

AccordionGroup

AccordionGroup should be a component that groups Accordion components together. The only content that would be allowed to place inside an AccordionGroup is Accordions.

Additional Information

The accordion component from digdir's design system

[mikaelrss]

The Accordion component from the design system does not seem to react to height changes of the contents. This means that if app developers put content with dynamic heights inside, the Accordion will behave like this:

and this:

We should therefore limit the Accordion to be able to contain only elements that we are sure will not resize.