{
  "name": "SortableListSection",
  "description": "A section for the property builder that is used to provide a user interface which generates an array of objects for the programmer.  •  It is useful for editor objects that need to gather informatino from the user in order to gather a list of data (e.g. List, Navigation, Stacks, Accordian, Repeater, Shapes, SmartContainer, Stepper, Tab Switcher)",
  "workflow": "",
  "user_stories": [],
  "test_plan": [
    {
      "scenario": "Rendering",
      "expected": "Should show in dom",
      "automated": "Yes",
      "type": "End to End"
    }
  ],
  "screens": "http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/component_navigation.JPG",
  "components": [
    {
      "name": "SortableList",
      "type": "components",
      "description": "A component that provides a nice UX for data entry of lists.  Displays a list of items based on the incoming array, facilitates CRUD actions via drag and drop and customizable buttons and display types.",
      "exists": "No",
      "package": "No",
      "schema": [
        {
          "name": "data",
          "type": "ItemComponentProps[]",
          "description": "The incoming data that this component will manage",
          "required": true,
          "schema_type": "prop"
        },
        {
          "name": "itemComponent",
          "type": "React.ReactNode",
          "description": "The component to use that will represent each item in the incoming data array",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "addButtonComponent",
          "type": "React.ReactNode",
          "description": "A component to use instead of the default add button component",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "editButtonComponent",
          "type": "React.ReactNode",
          "description": "A component to use instead of the default edit button component",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "deleteButtonComponent",
          "type": "React.ReactNode",
          "description": "A component to use instead of the default delete button component",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "showCRUDOnHover",
          "type": "boolean",
          "description": "Whether or not show the CRUD icons when the mouse is hovered on the item or not (always shows)",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "showDragHandle",
          "type": "boolean",
          "description": "Whether or not to show a draggable handle indicator next to each item",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "canDragAndDrop",
          "type": "boolean",
          "description": "Whether or not drag and drop is enabled",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "canDelete",
          "type": "boolean",
          "description": "Whether or not to display the delete icon next to each item",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "canAdd",
          "type": "boolean",
          "description": "Whether or not to show the add button",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "canEdit",
          "type": "boolean",
          "description": "Whether or not to display the edit icon next to each item",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "onChange",
          "type": "(section:ItemComponentProps[]) => void",
          "description": "Triggered when an item changes.  Returns an updated version of the data array.  It's up to the component provider to update the data prop",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "onEdit",
          "type": "(section:ItemComponentProps) => void",
          "description": "Triggers when the edit button next to an item is clicked",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "onAdd",
          "type": "() => void",
          "description": "Triggers when the [Add] button is clicked",
          "required": false,
          "schema_type": "prop"
        },
        {
          "name": "onDelete",
          "type": "(section:ItemComponentProps) => void",
          "description": "Triggers when the [Delete] button is clicked",
          "required": false,
          "schema_type": "prop"
        }
      ],
      "tests": [
        {
          "it": "Rendering --> Should render in the dom",
          "type": "Integration"
        },
        {
          "it": "Rendering --> Should render the same number of item components as the number of items in the provided data prop",
          "type": "Integration"
        },
        {
          "it": "Rendering --> Should pass along the object's payload as props to the itemCmponent",
          "type": "Integration"
        },
        {
          "it": "Rendering --> Should render an addButtonComponent (instead of the default component) in each item if one is provided",
          "type": "Integration"
        },
        {
          "it": "Rendering --> Should render an editButtonComponent (instead of the default component) in each item if one is provided",
          "type": "Integration"
        },
        {
          "it": "Rendering --> Should render an deleteButtonComponent (instead of the default component) in each item if one is provided",
          "type": "Integration"
        },
        {
          "it": "Rendering --> Should not display a delete button if the canDelete prop is false",
          "type": "Integration"
        },
        {
          "it": "Rendering --> Should not display an add button if the canDelete prop is false",
          "type": "Integration"
        },
        {
          "it": "Rendering --> Should not display an edit button if the canDelete prop is false",
          "type": "Integration"
        },
        {
          "it": "Actions --> Should not allow drag and drop actions if the canDragAndDrop prop is false",
          "type": "Integration"
        },
        {
          "it": "Events --> Should trigger the onChange event when the items are re-ordered via drag-and-drop",
          "type": "Integration"
        },
        {
          "it": "Events --> Should include an updated list of items from the onChange event return function when the sections are re-ordered via drag and drop",
          "type": "Integration"
        },
        {
          "it": "Events --> Should trigger the onEdit event when an edit button is clicked",
          "type": "Integration"
        },
        {
          "it": "Events --> Should include the associated object's payload when the onEdit event is called",
          "type": "Integration"
        },
        {
          "it": "Events --> Should trigger the onAdd event when a add button is clicked",
          "type": "Integration"
        },
        {
          "it": "Events --> Should trigger the onDelete event when a delete button is clicked",
          "type": "Integration"
        },
        {
          "it": "Events --> Should include the associated object's payload when the onDelete event is called",
          "type": "Integration"
        }
      ]
    }
  ],
  "database": [],
  "api": []
}