## Spec for "Accordian" Plugin...

A configurable Accordian widget that can be added to any web page

## Table of Contents​

- [Spec for "Accordian" Plugin...](#spec-for-%22accordian%22-plugin)
- [Table of Contents​](#table-of-contents%e2%80%8b)
- [Workflow](#workflow)
- [User Stories](#user-stories)
- [Screens / States​](#screens--states%e2%80%8b)
- [Sections Used](#sections-used)
- [Test Plan](#test-plan)

## Workflow

(N/A)​

## User Stories

As a user, I can...

- Add a Accordian object on my page
- Display list of items on a page and when an item is clicked, it expands and displays different content based on the item clicked.
- List of steps & titles
- Drop in inner content
- Establish inner container content settings for each container (same as container)
- Select a Toggle icon
- Establish which step is the default step (opened)

## Screens / States​

![]()

## Sections Used

- Typography
- Accordian Item Builder (crud list, icon, caption, link to container properties, default)
- Position/Padding/Spacing

## Test Plan

| √   | Scenario                                                            | Expected                                                               |
| --- | ------------------------------------------------------------------- | ---------------------------------------------------------------------- |
| √   | When a user opens the [add new] tab                                 | A [Accordian Widget] appears                                           |
| √   | When a user drags the Accordian widget to the canvas                | A simple Accordian appears                                             |
| √   | When a user clicks the [*] button on the widget                     | The Accordian properties box appears                                   |
| √   | When a user changes the layout (align, position)                    | settings adjust accordingly (both editor & live mode)                  |
| √   | When a user configures the design (font, color, bg, border, shadow) | settings adjust accordingly (both editor & live mode)                  |
| √   | When a user publishes a page with the Accordian                     | The destination page shows the Accordian as specified on the live page |
| x   | When a user chooses a preset                                        | settings overwrite to the preset settings                              |