Component Request - Accordion

[sbmadhav]

Accordion Component

The Accordion displays as a single stack of Accordion Blades in all the views.

The component has the following elements:

• Accordion Blade:

1. On click/tap, opens the accordion panel and changes to the OPEN state (i.e. the Blade Label is bold, and the Hide icon displays).
2. On click/tap again, closes the accordion panel and changes to the CLOSE state (i.e. the Blade Label is not bold, and the Hide icon displays).

• Blade Label:

1. Supports an unlimited number of characters.

• Show icon:

1. Only displays in the closed state.
2. On click/tap, opens the accordion panel and changes to the OPEN state.

• Hide icon:

1. Only displays in the open state.
2. On click/tap, closes the accordion panel and changes to the CLOSE state.

• Flexible Panel:

1. Only shown in the OPEN state.
2. Must be able to configure whether only one or multiple panels can be open at a time.
3. Must be able to configure which panel(s) is open by default.
4. Each panel holds self-contained content. The panel adjusts to the height of the content.
5. The Accordion occupies 100% of the width of the parent container. The components and content inside the Accordion wrap based on the width of the parent container.