## Spec for "Stacks Component" Plugin...

A configurable Stacks Component widget that can be added to any web page

## Table of Contents​

- [Spec for "Stacks Component" Plugin...](#spec-for-stacks-component-plugin)
- [Table of Contents​](#table-of-contents)
- [Workflow](#workflow)
- [User Stories](#user-stories)
- [Screens / States​](#screens--states)
- [Sections Used](#sections-used)
- [Test Plan](#test-plan)

## Workflow

(N/A)​

## User Stories

As a user, I can...

- Add a Stacks Component object on my page
- Add any component to the stack collection
- Pixel Perfect Drag and Moving of Inner Components
- ...all relative to the main stack
- Add Above/Below/To Top/Bottom/Etc.

## Screens / States​

![]()

## Sections Used

- Stack Builder (+/- container u can drop stuff in, let you edit each one, make each absolute drag/drop based on "stack container object's" relative position)

## Test Plan

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