## Spec for "Switch/Tab" Plugin...

A configurable Switch/Tab widget that can be added to any web page

## Table of Contents​

- [Spec for "Switch/Tab" Plugin...](#spec-for-%22switchtab%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 Switch/Tab object on my page
- As a user, I want to add content on a page where visitors can toggle between tabs to see different content based on the tab clicked.
- Re-order the list of tabs & titles
- Establish the inner content settings (same as container)
- Choose between a horizontal or vertical tab/switcher
- Presets
- Set Default tab (opened)

## Screens / States​

![]()

## Sections Used

- Container List Builder (each item creates two components: a trigger and a container -- choose trigger type: e.g. Button, List Item)
- Presets (Vertical, HOrizontal, etc.)
- Position/Padding/Space
-

## Test Plan

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