**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
- **Head** with arrow icon and label that can be 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
**Configurable demo** will include:
- Description: hide/display it with a toggle switch
- End action prop (icon-only button) with customizable icon if possible
- Disabled: enable/disable the accordion with a toggle switch
- Slot to customize the text in the body content and make it longer if necessary
- 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.
---
### Design review
More info in T326665#8905947
[] The label in the accordion should use the base text that in Codex is 16/22
[] Could we extend the accordion content to a bigger paragraph? We could use this text from the spec //"The accordion content can be as longer as needed, and the type of content can vary according to the need of each use case. Headings should be used to label each section of content."//
[] Padding between the arrow and the accordion label should be 8px `@spacing-50`
[] Accordion content - padding on top should be 8px `@spacing-50`
[] Updated the configurable and standalone demos