## Spec for "Shapes" Plugin...

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

## Table of Contents​

- [Spec for "Shapes" Plugin...](#spec-for-%22shapes%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 Shapes object on my page

## Screens / States​

![]()

## Sections Used

- Shape Builder (list builder)
  - Opens shape property
  - Position/Padding (x/y)
  - Shape selector
  - Before vs After
  - Container selector
  - Color - Stroke (color/size)
  - Shape settings -- circle: radius (react-shape-editor) | elipse: x radius / y radius, | rectangle: width/height | line/polygon builder: x1,y1,x2,y2 | path builder: points/curves btw (use "Cubic Bezier Curve editor")
  - Presets
- Position/Padding
- Actions
- Alignment
- Borders & Shadow

## Test Plan

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