## Spec for "Container" Plugin...

A configurable container Container widget that can be added to any web page

## Table of Contents​

- [Spec for "Container" Plugin...](#spec-for-%22container%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](#sections)
  - [Basic](#basic)
  - [Advanced](#advanced)
- [Test Plan](#test-plan)

## Workflow

(N/A)​

## User Stories

As a user, I can...

- As a user, I would like the ability to create a container to combine groups of widgets
- As a user, I want a page object to be cut out to a shape I want
- Shapes, Overlays, Gradients, Parallax
- As a user, I want to apply an overlay that appears on the top layer of a page object

## Screens / States​

![]()

## Sections

### Basic

- background
- size
- position/padding
- alignment

### Advanced

- border/shadow
- actions

## Test Plan

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