**This task defines the minimum viable product (MVP) of the Accordion component.**
---
## Scope
The MVP covers these Abstract Wikipedia use cases:
| **Wikifunctions** T323013 {F35870050}
Also the accordion is being used in Web Improvements:
| **Vector Tools panel** ([[ https://vector-2022.web.app/Moth | Prototype ]]) {F35870064} | Expanded {F35870067}
## Considerations
//To be added.//
## Open questions
[-] ~~**End action**: currently it’s visible just when the accordion is expanded. Do we want to maintain it in the label section or could we move it to the accordion content?~~ End action will be always visible on the head section. In some cases, it will be visible as default and in other cases it will be visible just when expanded (e.g. Minerva's article). Check the [[ https://www.figma.com/file/6Cw5sCk0FlyY3XRLOe7870/Accordion---T314569?node-id=1190%3A5339&t=1PaVJHtHyuhY9wPZ-11 | recommendations ]] section.
{F36572147}
[-] ~~**Arrow position**: Op.1. Up-Down / Op.2. Right-Down~~ We will go with the Up-Down arrow for this MVP task and we will iterate in the future if needed.
{F36572149}
[-] ~~**Contour properties**: the default version of the component will include dividers to separate each stacked accordion. Do we want to include the version without dividers or the version with outline? ~~ We will implement just the accordion with dividers for this MVP task and we will include the rest of props in the future if needed.
{F36572151}
### Design spec
| [[ https://www.figma.com/file/6Cw5sCk0FlyY3XRLOe7870/Accordion---T314569?node-id=101%3A2115&t=aHR8ZYHThrNZHYwr-11 | Component spec sheet ]] |
#### Anatomy
//To- **Head** with arrow icon and label that can be added.//expanded
- **Body** with free content that is expanded when opening the head
#### Style
- **Arrow icon**: 20px //(this icon cannot be customizable)//
- **Label**: can be customizable
- **End action**: quiet icon-only button //(if needed)//
- **Expandable content**: customizable (e.g. text paragraphs, menu items, links, images, table) //(some examples will be included in the demo)//
*Accordions will be vertically stacked (free number of accordion items).
#### Interaction
- Collapsed: just the label is visible (Default, Hover, Active, Focus, Disabled)
- Expanded: label and accordion content are visible (Default, Hover, Active, Focus) //The different states changes will be visible just in the head section.//
NOTE: the arrow will rotate when expands/collapses. We will apply our system transition tokens to expand and collapse the expanded section.
####### Documentation
//To be added.//
## Considertations
//To be added.//
## Open questions
[-] ~~**End action**: currently it’s visible just when the accordion is expanded. Do we want to maintain it in the label section or could we move it to the accordion content?~~ End action will be always visible on the head section. In some cases, it will be visible as default and in other cases it will be visible just when expanded (e.g. Minerva's article). Check the [[ https://www.figma.com/file/6Cw5sCk0FlyY3XRLOe7870/Accordion---T314569?node-id=1190%3A5339&t=1PaVJHtHyuhY9wPZ-11 | recommendations ]] section.**Configurable demo** will include:
{F36572147}- Description: hide/display it with a toggle switch
[-] ~~**Arrow position**: Op.1. Up-Down / Op.2. Right-Down~~ We will go with the Up-Down arrow for this MVP task and we will iterate in the future if needed.- End action prop (icon-only button) with customizable icon if possible
{F36572149}- Disabled: enable/disable the accordion with a toggle switch
[-] ~~**Contour properties**: the default version of the component will include dividers to separate each stacked accordion. Do we want to include the version without dividers or the version with outline? ~~ We will implement just the accordion with dividers for this MVP task and we will include the rest of props in the future if needed.- Slot to customize the text in the body content and make it longer if necessary
{F36572151}- LTR/RTL visualization
**Other demos** in the page will include:
- Customizable label's text style (customize with one of our text tokens, e.g. Heading L 24/30 used in the Minerva's Wikipedia article)
- Represent other body content within the accordion (e.g. an image, a combination of form items, etc.)
---
## Acceptance criteria
[-] A Figma spec sheet is created for the component that includes the scope defined here. A link to the Figma spec sheet's MVP version has been added to this task's description.
[] The initial component is implemented in Codex.