{
  "name": "PageSections",
  "description": "A feature that lets users edit their pages faster By presenting dozens of pre-built page sections, the user does not need to pre-build their pages from scratch.  Instead they can build their pages from a collection of pre-assembled starting points Templates are too cookie cutter, but sections provide the simplicity & speed of templates, with the flexibility and customization of components",
  "workflow": "",
  "user_stories": [
    "As a user, I want to easily create an entire page quickly by selecting pre-built page sections or page \"blocks\" and drag it over to a page I'm working on.",
    "As a user, I would like the ability to create a block from scratch",
    "As a user, I would like to be able to see an indication of what section my objects are a part of as I hover over them",
    "As a user, I would like to see an outline/overview of the different sections that make up my page",
    "As a user, I would like ways to easily re-order my page sections",
    "As a user, I only want to move page sections up and down, not nest them inside of other page blocks/items",
    "As a user, I would like to be able to preview page blocks before committing to my selection",
    "As a user, I would like to be able to search/filter the list of sections you have available",
    "As a user, I would like the section to highlight if one of the child objects is activated or hovered over"
  ],
  "test_plan": [
    {
      "scenario": "Rendering",
      "expected": "Should show a new tab in the Add New Item drawer",
      "automated": "Yes",
      "type": "End to End"
    },
    {
      "scenario": "Rendering",
      "expected": "Should render a list of sections according to an onListItems plugin definition",
      "automated": "Yes",
      "type": "End to End"
    },
    {
      "scenario": "Rendering",
      "expected": "Should show the <SectionsLegend /> component in the main canvas",
      "automated": "Yes",
      "type": "End to End"
    },
    {
      "scenario": "Rendering",
      "expected": "Don't show the <SectionsLegend /> component on the canvas if there aren't any sections present on the page",
      "automated": "Yes",
      "type": "End to End"
    },
    {
      "scenario": "Rendering",
      "expected": "Don't show the <SectionsLegend /> component on the canvas if in FULL SCREEN view (or preview)",
      "automated": "Yes",
      "type": "End to End"
    },
    {
      "scenario": "Rendering",
      "expected": "Should show the <AddSectionsTab /> as a new component in the Item Drawer",
      "automated": "Yes",
      "type": "End to End"
    },
    {
      "scenario": "Actions",
      "expected": "Should highlight the associated canvas item is highlighted when section item is hovered over",
      "automated": "Yes",
      "type": "End to End"
    },
    {
      "scenario": "Actions",
      "expected": "Should activate the associated cavas editor item is selected when section item is active",
      "automated": "Yes",
      "type": "End to End"
    },
    {
      "scenario": "Actions",
      "expected": "Should be able to drag/drop a new section on to the page (from the add new item drawer)",
      "automated": "Yes",
      "type": "End to End"
    },
    {
      "scenario": "Actions",
      "expected": "Should be able to re-order a section on the page by dragging up and down",
      "automated": "Yes",
      "type": "End to End"
    },
    {
      "scenario": "Actions",
      "expected": "Should NOT be able to drag an object so that it's nested inside another container or adjacent to another component that is not a section itself",
      "automated": "Yes",
      "type": "End to End"
    }
  ],
  "screens": "http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/components_blocks_editor_simpler.png,http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/components_blocks_add.png",
  "components": [
    {
      "name": "SectionEditorWidget",
      "type": "components",
      "description": "A container for grouping internal objects together -- Usually the 2nd most parent object on the page (the Body is often it's direct parent) -- Used as a container for the myriad pre-built page sections that are provided • As a user I would like a simple container that will group internal objects • As a user I would like the ability to set the inner container width so I can have a container that stretches the full width of the page, while keeping its internal objects contained • As a user I would like similar capabilities as a traditional container (background, padding, \"shapes\") ...main difference is that it's locked to the parent most object (the body)",
      "exists": "No",
      "package": "No",
      "schema": [],
      "tests": [
        {
          "it": "Should show in the add new item drawer (Plugin hook is called)",
          "type": "Integration"
        },
        {
          "it": "Should show in editor when page content has a section as its type (plugin hook is called)",
          "type": "Integration"
        },
        {
          "it": "Should show up in the live page when thge page content has a section as its type (plugin hook is called)",
          "type": "Integration"
        }
      ]
    },
    {
      "name": "LiveSection",
      "type": "components",
      "description": "The version of the page section that shows up while in LIVE mode",
      "exists": "No",
      "package": "No",
      "schema": [
        {
          "name": "mode",
          "type": "EditorMode",
          "description": "",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "children",
          "type": "React.ReactNode",
          "description": "",
          "required": true,
          "schema_type": "prop"
        },
        {
          "name": "style",
          "type": "React.CSSProperties",
          "description": "",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "properties",
          "type": "React.CSSProperties",
          "description": "",
          "required": false,
          "schema_type": "prop"
        }
      ],
      "tests": [
        {
          "it": "Should render in the dom"
        },
        {
          "it": "Should render an inner width according to the \"width\" property settings"
        },
        {
          "it": "Should render background properly as provided by the property settings"
        },
        {
          "it": "Should render padding according to the property settings if provided"
        }
      ]
    },
    {
      "name": "EditorSection",
      "type": "components",
      "description": "The version of the page section that shows up while in EDIT mode -- Properties Used > Background, Padding, Inner Width",
      "schema": [],
      "exists": "No",
      "package": "No",
      "tests": [
        {
          "it": "Should render in the dom",
          "type": "Integration"
        },
        {
          "it": "Should render an inner width according to the \"width\" property settings",
          "type": "Integration"
        },
        {
          "it": "Should render background properly as provided by the property settings",
          "type": "Integration"
        },
        {
          "it": "Should render padding according to the property settings if provided",
          "type": "Integration"
        },
        {
          "it": "Should render a thicker border on the EditorObject component container",
          "type": "Integration"
        },
        {
          "it": "Should render an \"Move Section Up\" and a \"Move Section Down\" option the Editor Object drop down menu",
          "type": "Integration"
        },
        {
          "it": "Should reposition the section in the page content array appropriately when the \"Move up\" or \"Move down\" button is clicked (e.g should trigger updateComponentSettings)",
          "type": "Integration"
        }
      ]
    },
    {
      "name": "SectionsLegend",
      "type": "components",
      "description": "A quick at-a-glance way to see a manage all the sections on that page • As a user I would like to see all the sections on my page • As a user I would like a way to easily open the [Add New Section] drawer • As a user I would like to reorder them up and down using drag-and-drop and have the order immediately reflected in the editor canvas • As a user I would like to toggle between seeing and not seeing this view in case I want to focus only on the editor canvas • As a user I would like the section in the editor canvas to highlight when i mouse over • As a user I would like the section in the editor canvas to activate when I click on the section",
      "exists": "No",
      "package": "No",
      "schema": [
        {
          "name": "title",
          "type": "string",
          "description": "The caption that shows at the top of the section legend",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "sections",
          "type": "SectionItemProps[]",
          "description": "An array of section item settings.  Used to generate a list of sections.  This is usually derived from the page content data",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "onChange",
          "type": "(sections:SectionItemProps[]) => any",
          "description": "Triggers when the user initiates a change of some kind to the sections in the section item (such as drag-and-drop to re-order).  Returns an updated list of section item",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "onCreate",
          "type": "() => void",
          "description": "Triggers when the user clicks the [Add Section] button",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "showHideToggle",
          "type": "() => void",
          "description": "Shows or Hides the <SectionLegend /> component",
          "required": true,
          "schema_type": "method",
          "public": true
        }
      ],
      "tests": [
        {
          "it": "Rendering > Should render in the dom",
          "type": "Integration"
        },
        {
          "it": "Rendering > Should show a title in the dom that matches the title string passed in the prosp",
          "type": "Integration"
        },
        {
          "it": "Rendering > Should show a list of <SectionItem /> elements...the amount should match the number of sections passed in the sections array",
          "type": "Integration"
        },
        {
          "it": "Event > Should trigger the onChange event when the sections are re-ordered via drag-and-drop",
          "type": "Integration"
        },
        {
          "it": "Methods > Should return an updated list of settings from the onChange event return function when the sections are re-ordered via drag and drop",
          "type": "Integration"
        }
      ]
    },
    {
      "name": "SectionItem",
      "type": "components",
      "description": "The specific item in the legend representing a section on the page",
      "exists": "No",
      "package": "No",
      "schema": [
        {
          "name": "label",
          "type": "string",
          "description": "The text to display in the section item",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "type",
          "type": "SectionTypes",
          "description": "They type of section you are representing.  Used to display a relevant icon",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "settings",
          "type": "any",
          "description": "The specific section settings derived from the page content",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "onClick",
          "type": "() => any",
          "description": "Triggers when the user clicks on the section item",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "onMouseEnter",
          "type": "() => any",
          "description": "Triggers when the users mouse enters the section item",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "onMouseLeave",
          "type": "() => any",
          "description": "Triggers when the user's mouse leaves the section item",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "onDoubleClick",
          "type": "() => any",
          "description": "Triggers when the user double-clicks on the section item",
          "required": false,
          "schema_type": "prop"
        }
      ],
      "tests": [
        {
          "it": "Should render in the dom",
          "type": "Integration"
        },
        {
          "it": "Show render the component in a state (hovered, normal, active) that matches the state passed along in the settings prop",
          "type": "Integration"
        },
        {
          "it": "Should display an icon based on the section type",
          "type": "Integration"
        },
        {
          "it": "Should show a label that represents the text provided in the label prop",
          "type": "Integration"
        },
        {
          "it": "Should trigger the onClick event when it is clicked on",
          "type": "Integration"
        },
        {
          "it": "Should trigger the onMouseEnter event when the user double-clicks on the section item",
          "type": "Integration"
        },
        {
          "it": "Should trigger the onMouseLeave event when the user's mouse leaves the section item",
          "type": "Integration"
        },
        {
          "it": "Should trigger the onDoubleClick event when it is double-clicked on",
          "type": "Integration"
        }
      ]
    },
    {
      "name": "AddSectionsTab",
      "type": "components",
      "description": "A tab in the \"Add New\" Item Drawer with all of the available sections that can be added to the page • As a user, I would like to see a separate \"Sections\" tab in the Add New Item drawer • As a user, I would like to see a categorized list of all the available sections that I can add to my page • As a user, I would like to be able to search and filter that list • As a user, I would like to be able to add any of the sections to my page (via drag/drop, double-clicking on it, or a separate \"add to page\" button) • As a user, I would like to be able see a larger preview of any of the sections in the list • As a user, I would like to be able to add the section from the preview popup",
      "exists": "No",
      "package": "No",
      "schema": [
        {
          "name": "sections",
          "type": "SectionPreviewProps[]",
          "description": "An array of section preview items to display",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "categories",
          "type": "string[]",
          "description": "A list of categories that the user can quickly choose from to filter the section previews being displayed",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "onAddSection",
          "type": "(section: SectionPreviewProps) => void",
          "description": "Triggered when the [add to page] button on one of the section previews are clicked",
          "required": false,
          "schema_type": "prop"
        }
      ],
      "tests": [
        {
          "it": "Rendering > Should render in the dom",
          "type": "Integration"
        },
        {
          "it": "Rendering > Should show a list of section previews, the number of previews shown should match the number of sections provided in the sections array",
          "type": "Integration"
        },
        {
          "it": "Rendering > Should show a list of categories (as determined by the category array in the props) that the user can filter through",
          "type": "Integration"
        },
        {
          "it": "Events > Should trigger the onAddSection event when one of the section preview [add to page] buttons are clicked",
          "type": "Integration"
        },
        {
          "it": "Methods > Should filter the list of layouts being displayed when a category chip is toggled",
          "type": "Integration"
        },
        {
          "it": "Methods > Should filter the list of layouts being displayed when the search text field is typed in",
          "type": "Integration"
        }
      ]
    },
    {
      "name": "SectionPreview",
      "type": "components",
      "description": "A component for previewing blocks/sections -- Generates a picture of the provided component layout if a preview isn't provided",
      "exists": "No",
      "package": "No",
      "schema": [
        {
          "name": "label",
          "type": "string",
          "description": "The label to show on the section preview object.  Usually it's the name of the section",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "layout",
          "type": "LayoutType",
          "description": "The name of the layout being used.  This is used to look up and auto-generate the preview if possible",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "previewImage",
          "type": "string",
          "description": "Overrides the auto-generated preview image with this image",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "onAddSection",
          "type": "(layout:LayoutType) => void",
          "description": "Triggers when the [add to page] button is clicked",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "handlePreviewSection",
          "type": "() => void",
          "description": "Triggers when the [preview] button is clicked.  Will show a popup window with a larger view of the section that will be added",
          "required": false,
          "schema_type": "method",
          "public": true
        }
      ],
      "tests": [
        {
          "it": "Rendering > Should render in the dom",
          "type": "Integration"
        },
        {
          "it": "Rendering > Should auto generate an image based on the LayoutType passed in the props",
          "type": "Integration"
        },
        {
          "it": "Rendering > Should show the previewImage (instead of the auto-generated image) when one is provided in the previewImage props",
          "type": "Integration"
        },
        {
          "it": "Events > Should trigger the onAddSection event when the [add to page] button is clicked",
          "type": "Integration"
        },
        {
          "it": "Events > Should receive the LayoutType when the onAddSection event is triggered",
          "type": "Integration"
        },
        {
          "it": "Methods > Should show a popup window with the actual layout displaying when the [preview] button is clicked",
          "type": "Integration"
        }
      ]
    }
  ],
  "database": [],
  "api": []
}