{
"name": "Properties",
"description": "Property windows are used when you want to provide the user with configuration options. --It is also used to present a consistent user experience throughout the app. --This module provides a collection of re-usable tools to make that building properties simple. --It does so by providing a number of common property setters right out of the box that you can assemble into sidebars, popups, etc.. --...and lets you build your own as well",
"workflow": "",
"user_stories": [
"As a developer I would like to provide my users with a tool to configure an object I have prepared",
"As a user I would like a consistent user experience when I configure objects",
"As a developer I would like a collection of pre-built property setters so that I don't have to build them from scratch each time"
],
"test_plan": [
{
"scenario": "Rendering",
"expected": "Should render in the dom",
"automated": "Yes",
"type": "End to End"
},
{
"scenario": "Rendering",
"expected": "Should render a different component for each type provided in the prop",
"automated": "Yes",
"type": "End to End"
},
{
"scenario": "Rendering",
"expected": "Should render in the location provided in the location prop",
"automated": "Yes",
"type": "End to End"
},
{
"scenario": "Rendering",
"expected": "Should render a title in the dom that matches the title present in the title prop",
"automated": "Yes",
"type": "End to End"
},
{
"scenario": "Rendering",
"expected": "Should render the same amount of tabs as the number of items in the tabs prop array",
"automated": "Yes",
"type": "End to End"
},
{
"scenario": "Rendering",
"expected": "Should render a caption for each tab as defined by the appropriate tab in the tabs prop array",
"automated": "Yes",
"type": "End to End"
},
{
"scenario": "Rendering",
"expected": "Should render the provided component view for each tab as defined by the appropriate tab in the tabs prop array",
"automated": "Yes",
"type": "End to End"
},
{
"scenario": "Rendering",
"expected": "Should show the default tab as defined by the tab that has the default property in the specific tab in the tab props array",
"automated": "Yes",
"type": "End to End"
},
{
"scenario": "Rendering",
"expected": "Should not render any tab controls when the tabsAreVisible prop is false. Should instead just show the default tab component",
"automated": "Yes",
"type": "End to End"
},
{
"scenario": "Rendering",
"expected": "Should render whatever children components are provided in the props",
"automated": "Yes",
"type": "End to End"
},
{
"scenario": "Events",
"expected": "Should trigger the onChange() event when a change occurs in the settings for that object",
"automated": "Yes",
"type": "End to End"
},
{
"scenario": "Events",
"expected": "Should trigger the onClose() event when the property window is exiting",
"automated": "Yes",
"type": "End to End"
},
{
"scenario": "Methods",
"expected": "Should switch the tab views when the switchTab() method is called",
"automated": "Yes",
"type": "End to End"
},
{
"scenario": "Methods",
"expected": "Should close the property window completely when the closeWindow() method is called",
"automated": "Yes",
"type": "End to End"
},
{
"scenario": "Hooks",
"expected": "Should trigger the _onPropertiesRender_ plugin hook when the Properties component is being rendered",
"automated": "Yes",
"type": "End to End"
},
{
"scenario": "Hooks",
"expected": "Should trigger the _onTabsList_ plugin hook when the tabs list is being generated",
"automated": "Yes",
"type": "End to End"
},
{
"scenario": "Hooks",
"expected": "Should trigger the _onPropertiesWindowClose_ plugin hook when the properties window is being closed",
"automated": "Yes",
"type": "End to End"
}
],
"screens": "",
"components": [
{
"type": "Containers",
"name": "Properties",
"description": "Property windows are used when you want to provide the user with configuration options. --It is also used to present a consistent user experience throughout the app. --This module provides a collection of re-usable tools to make that building properties simple. --It does so by providing a number of common property setters right out of the box that you can assemble into sidebars, popups, etc.. --...and lets you build your own as well",
"behaviors": "",
"exists": "No",
"package": "No",
"schema": [
{
"name": "type",
"type": "enum[SIDEBAR,POPUP,INLINE,TOOLBAR]",
"description": "Establishes the type of UX to present to the user--This is the main window that opens up--It is the window that will contain all of the property setters",
"schema_type": "prop",
"required": false
},
{
"name": "location",
"type": "enum[LEFT,RIGHT,TOP,BOTTOM]",
"description": "The location of where the window should show up",
"schema_type": "prop",
"required": false
},
{
"name": "title",
"type": "string",
"description": "The default title of the property window",
"schema_type": "prop",
"required": true
},
{
"name": "tabs",
"type": "array",
"description": "An array of tabs to use in the property window--Each tab has a title, and an associated component to show when that tab is active--(id, title, active, component)",
"schema_type": "prop",
"required": true
},
{
"name": "tabsAreVisible",
"type": "bool",
"description": "Whether or not the tabs should be visible",
"schema_type": "prop",
"required": false
},
{
"name": "children",
"type": "element",
"description": "todo",
"schema_type": "prop",
"required": true
},
{
"name": "onChange",
"type": "method",
"description": "Triggers when a change occurs in the settings for that object",
"schema_type": "prop",
"required": false
},
{
"name": "onClose",
"type": "method",
"description": "Triggers when the property window is exiting",
"schema_type": "prop",
"required": false
},
{
"name": "switchTab",
"type": "method",
"description": "Switches the active tab to another one",
"schema_type": "method",
"required": false,
"public": "true"
},
{
"name": "closeWindow",
"type": "method",
"description": "Closes the property window",
"schema_type": "method",
"required": false,
"public": "true"
}
]
},
{
"type": "Components",
"name": "ButtonSliderGroup",
"description": "Renders two buttons and an optional slider --Used for use cases like incrementing/decrementing a property, or setting a precise value (using the slider)",
"behaviors": "",
"exists": "No",
"package": "No",
"schema": [
{
"schema_type": "prop",
"name": "value",
"type": "string",
"required": false,
"description": "The current value of the property"
},
{
"schema_type": "prop",
"name": "maxCheckValue",
"type": "Number",
"required": false,
"description": "The value to assign when the max checkbox is checked"
},
{
"schema_type": "prop",
"name": "autoCheckValue",
"type": "Number",
"required": false,
"description": "The value to assign the property when the auto checkbox is checked"
},
{
"schema_type": "prop",
"name": "toolTip",
"type": "string",
"required": false,
"description": "The tooltip to show when the group is hovered over"
},
{
"schema_type": "prop",
"name": "button1",
"type": "object",
"required": false,
"description": "The settings for the first button { value, style, events, icon }"
},
{
"schema_type": "prop",
"name": "showSlider",
"type": "Boolean",
"required": false,
"description": "Whether or not to show the slider"
},
{
"schema_type": "prop",
"name": "button2",
"type": "object",
"required": false,
"description": "The settings for the second button { value, style, events, icon }"
},
{
"schema_type": "prop",
"name": "text",
"type": "string",
"required": false,
"description": "The label caption for the group"
},
{
"schema_type": "prop",
"name": "minValue",
"type": "Number",
"required": false,
"description": "The minimum allowed value for the property"
},
{
"schema_type": "prop",
"name": "maxValue",
"type": "Number",
"required": false,
"description": "The maximum allowed value for the property"
},
{
"schema_type": "prop",
"name": "showMaxCheck",
"type": "Boolean",
"required": false,
"description": "Whether or not to show a checkbox that lets the user immediately set the maximum value"
},
{
"schema_type": "prop",
"name": "showAutoCheck",
"type": "Boolean",
"required": false,
"description": "Whether or not to show a checkbox that lets the user set the value to _auto_, representing the fact that the value will be set automatically"
},
{
"schema_type": "prop",
"name": "originalValue",
"type": "string",
"required": false,
"description": "The value to revert to if the autoCheck Checkbox is turned off"
},
{
"schema_type": "prop",
"name": "onChange",
"type": "() => any",
"description": "Triggers when the value of the property changes"
},
{
"schema_type": "prop",
"name": "onFinish",
"type": "() => any",
"description": "Triggers when the mouse button is released (on the button or slider)"
}
],
"tests": [
{
"it": "Should render component in the dom",
"type": "Integration"
},
{
"it": "Should render a _Max Value_ checkbox when the showMaxCheck prop is true",
"type": "Integration"
},
{
"it": "Should render the _Auto Set_ checkbox when the showAutoCheck prop is set to true",
"type": "Integration"
},
{
"it": "Slider should be positioned at the value provided in the prop",
"type": "Integration"
},
{
"it": "Should show a tooltip when the group is hovered over",
"type": "Integration"
},
{
"it": "Should not show a slider when the showSlider prop is set to false",
"type": "Integration"
},
{
"it": "Should show a label caption for the group using the text prop",
"type": "Integration"
},
{
"it": "Should render a button with the value, style, events, icon attributes provided in the button1 prop",
"type": "Integration"
},
{
"it": "Should render a button with the value, style, events, icon attributes provided in the button2 prop",
"type": "Integration"
},
{
"it": "Should not allow any values below the provided minValue prop",
"type": "Integration"
},
{
"it": "Should not allow any values above the provided maxValue prop",
"type": "Integration"
},
{
"it": "Should set the value to the autoCheckValue prop's value when the _Auto_ checkbox is checked",
"type": "Integration"
},
{
"it": "Should set the value to the maxCheckValue prop's value when the _Max_ checkbox is checked",
"type": "Integration"
},
{
"it": "Should immediately uncheck the AutoCheck and MaxCheck checkbox when the button is clicked or slider is changed",
"type": "Integration"
},
{
"it": "Should automatically check the MaxCheck Checkbox when the slider is at the maximum position",
"type": "Integration"
},
{
"it": "Should position the value of the slider to the max position if the MaxCheck checkbox is checked",
"type": "Integration"
},
{
"it": "Should revert the value back to the original value if the _Auto_ checkbox is un-checked",
"type": "Integration"
},
{
"it": "Component updates should occur immediately, but database persistence should apply on the mouse up event",
"type": "Integration"
},
{
"it": "Should trigger the onChange() event with the new value when either of the buttons are clicked",
"type": "Integration"
},
{
"it": "Should trigger the onChange() event with the new value when the slider is moved",
"type": "Integration"
},
{
"it": "Should trigger the _onButtonSliderGroupRender_ plugin hook when the ButtonSliderGroup component renders",
"type": "Integration"
},
{
"it": "Should trigger the _onButtonSliderGroupChange_ plugin hook when the value of the ButtonSliderGroup property changes",
"type": "Integration"
},
{
"it": "Should trigger the onButtonSliderGroupFinish plugin hook when the mouse button is released (on the button or slider)",
"type": "Integration"
}
]
},
{
"type": "Components",
"name": "ColorPicker",
"description": "A tool for picking and settings colors",
"behaviors": "",
"exists": "No",
"package": "No",
"schema": [
{
"schema_type": "prop",
"name": "color",
"required": false,
"type": "string",
"description": "This is the color that is currently selected"
},
{
"schema_type": "prop",
"name": "text",
"required": false,
"type": "string",
"description": "This is the descriptive text label that will appear next to the colors"
},
{
"schema_type": "prop",
"name": "showCircles",
"required": false,
"type": "Boolean",
"description": "Whether or not the array of circles should show"
},
{
"schema_type": "prop",
"name": "showSlider",
"required": false,
"type": "Boolean",
"description": "Whether or not the horizontal slider hue picker should show"
},
{
"schema_type": "prop",
"name": "showHex",
"required": false,
"type": "Boolean",
"description": "Whether or not the hex picker should show"
},
{
"schema_type": "prop",
"name": "showAlpha",
"required": false,
"type": "Boolean",
"description": "Whether or not the the Alpha Picker should show"
},
{
"schema_type": "prop",
"name": "colorExpanded",
"required": false,
"type": "Boolean",
"description": "Whether or not the expanded color options should show"
},
{
"schema_type": "prop",
"name": "toolTip",
"required": false,
"type": "string",
"description": "The tooltip to show when the group is hovered over"
},
{
"schema_type": "prop",
"name": "colorArray",
"required": false,
"type": "any[]",
"description": "An array of colors to show in the circles. Overrides the default choices"
},
{
"schema_type": "prop",
"name": "onChange",
"required": false,
"type": "() => void",
"description": "This event is triggered when the color is changed"
}
],
"tests": [
{
"id": "Should render the component in the dom",
"type": "Integration"
},
{
"id": "Should show the value in the color prop in the main color picker as a highlighted color and/or a hex value in the picker",
"type": "Integration"
},
{
"id": "Should show the value from the text prop in the section title",
"type": "Integration"
},
{
"id": "Should show a tooltip when the group is hovered over",
"type": "Integration"
},
{
"id": "Should show a collection of colors as provided by the colorArray prop",
"type": "Integration"
},
{
"id": "Should show a default collection of colors if no colors are provided in a colorArray prop",
"type": "Integration"
},
{
"id": "Should show the array of circles when the showCircles prop is true",
"type": "Integration"
},
{
"id": "Should show the horizontal slider hue picker when the showSlider prop is true",
"type": "Integration"
},
{
"id": "Should show the hex picker when the showHex prop is true",
"type": "Integration"
},
{
"id": "Should show the the Alpha Picker when the showAlpha prop is true",
"type": "Integration"
},
{
"id": "Should show the expanded color options when the colorExpanded prop is true",
"type": "Integration"
},
{
"id": "Should trigger the onChange() event with the new color when the color is changed",
"type": "Integration"
},
{
"id": "Should update the color prop with the newly selected value after one is selected",
"type": "Integration"
},
{
"id": "Should trigger the _onColorPickerRender_ plugin hook when the Color Picker component is being rendered",
"type": "Integration"
},
{
"id": "Should trigger the _onColorPickerChange_ plugin hook when the color is changing",
"type": "Integration"
}
]
},
{
"type": "Components",
"name": "DropDownCollapse",
"description": "A dropdown menu of FancySelectors",
"behaviors": "",
"exists": "No",
"package": "No",
"schema": [
{
"schema_type": "prop",
"name": "text",
"required": false,
"type": "string",
"description": "This is the text that will appear inside of the dropdown menu"
},
{
"schema_type": "prop",
"name": "children",
"required": false,
"type": "React.ReactNode",
"description": "These are the elements that are collapsed inside of the dropdown element"
},
{
"schema_type": "prop",
"name": "isExpanded",
"required": false,
"type": "Boolean",
"description": "Bool if the dropdown should be collapsed or expanded"
},
{
"schema_type": "prop",
"name": "onChange",
"required": false,
"type": "() => void",
"description": "This event is triggered when the dropdown is changed"
}
],
"tests": [
{
"it": "The component should render in the dom",
"type": "Integration"
},
{
"it": "Should render a caption in the dom that matches the text prop",
"type": "Integration"
},
{
"it": "Should not show children if the isExpanded prop is false",
"type": "Integration"
},
{
"it": "Should toggle between collapsed and expanded when clicked",
"type": "Integration"
},
{
"it": "Should trigger the onChange() event when the dropdown is changed",
"type": "Integration"
},
{
"it": "Should trigger the _onDropDownCollapseRender_ plugin hook when the DropDownCollapse is being rendered",
"type": "Integration"
},
{
"it": "Should trigger the _onDropDownCollapseChange_ plugin hook when the dropdown is changed",
"type": "Integration"
}
]
},
{
"type": "Components",
"name": "Margin",
"description": "Creates a Button Slider Group to Change the Components top position",
"behaviors": "",
"exists": "No",
"package": "No",
"schema": [
{
"schema_type": "prop",
"name": "minValue",
"required": false,
"type": "Number",
"description": "The minimum value that the slider can set"
},
{
"schema_type": "prop",
"name": "maxValue",
"required": false,
"type": "Number",
"description": "The maximum value that the slider can set"
},
{
"schema_type": "prop",
"name": "onChange",
"required": false,
"type": "Number",
"description": "Triggered when the setting changes"
}
],
"tests": [
{
"it": "Should render the component in the dom",
"type": "Integration"
},
{
"it": "Should not be able to set the value to one less than the minValue prop",
"type": "Integration"
},
{
"it": "Should not be able to set the value to one more than the maxValue prop",
"type": "Integration"
},
{
"it": "Should update the margin-top of the item to the value when the slider has changed",
"type": "Integration"
},
{
"it": "Should trigger the onChange() event when the setting changes",
"type": "Integration"
},
{
"it": "Should trigger the _onMarginChange_ plugin hook when the setting changes",
"type": "Integration"
},
{
"it": "Should trigger the _onMarginRender_ plugin hook when the component is being rendered",
"type": "Integration"
}
]
},
{
"type": "Components",
"name": "Spacing",
"description": "Creates a Button Slider Group to Change the Components margin",
"behaviors": "",
"exists": "No",
"package": "No",
"schema": [
{
"schema_type": "prop",
"name": "minValue",
"required": false,
"type": "Number",
"description": "The minimum value that the slider can set"
},
{
"schema_type": "prop",
"name": "maxValue",
"required": false,
"type": "Number",
"description": "The maximum value that the slider can set"
},
{
"schema_type": "prop",
"name": "onChange",
"required": false,
"type": "() => any",
"description": "Triggered when the setting changes"
}
],
"tests": [
{
"it": "Should render the component in the dom",
"type": "Integration"
},
{
"it": "Should not be able to set the value to one less than the minValue prop",
"type": "Integration"
},
{
"it": "Should not be able to set the value to one more than the maxValue prop",
"type": "Integration"
},
{
"it": "Should update the spacing to the value when the slider has changed",
"type": "Integration"
},
{
"it": "Should trigger the onChange() event when the setting changes",
"type": "Integration"
},
{
"it": "Should trigger the _onSpacingChange_ plugin hook when the setting changes",
"type": "Integration"
},
{
"it": "Should trigger the _onSpacingChange_ plugin hook when the component is being rendered",
"type": "Integration"
}
]
},
{
"type": "Components",
"name": "Padding",
"description": "Creates a Button Slider Group to Change the Components Padding",
"behaviors": "",
"exists": "No",
"package": "No",
"schema": [
{
"schema_type": "prop",
"name": "minValue",
"type": "Number",
"required": false,
"description": "The minimum value that the slider can set"
},
{
"schema_type": "prop",
"name": "maxValue",
"type": "Number",
"required": false,
"description": "The maximum value that the slider can set"
},
{
"schema_type": "prop",
"name": "onChange",
"type": "() => void",
"required": false,
"description": "Triggered when the setting changes"
}
],
"tests": [
{
"it": "Should render the component in the dom",
"type": "Integration"
},
{
"it": "Should not be able to set the value to one less than the minValue prop",
"type": "Integration"
},
{
"it": "Should not be able to set the value to one more than the maxValue prop",
"type": "Integration"
},
{
"it": "Should update the padding to the value when the slider has changed",
"type": "Integration"
},
{
"it": "Should trigger the onChange() event when the setting changes",
"type": "Integration"
},
{
"it": "Should trigger the _onPaddingChange_ plugin hook when the setting changes",
"type": "Integration"
},
{
"it": "Should trigger the _onPaddingRender_ plugin hook when the component is being rendered",
"type": "Integration"
}
]
},
{
"type": "Components",
"name": "Width",
"description": "Creates a Button Slider Group to Change the Components Width",
"behaviors": "",
"exists": "No",
"package": "No",
"schema": [
{
"schema_type": "prop",
"name": "onChange",
"type": "() => void",
"required": false,
"description": "Triggered when the setting changes"
}
],
"tests": [
{
"it": "Should render the component in the dom",
"type": "Integration"
},
{
"it": "Should update the width to the value when the slider has changed",
"type": "Integration"
},
{
"it": "Should trigger the onChange() event when the setting changes",
"type": "Integration"
},
{
"it": "Should trigger the _onWidthChange_ plugin hook when the setting changes",
"type": "Integration"
},
{
"it": "Should trigger the _onWidthRender_ plugin hook when the component is being rendered",
"type": "Integration"
}
]
},
{
"type": "Components",
"name": "Height",
"description": "Creates a Button Slider Group to Change the Components Height",
"behaviors": "",
"exists": "No",
"package": "No",
"schema": [
{
"schema_type": "prop",
"name": "onChange",
"type": "() => void",
"required": false,
"description": "Triggered when the setting changes"
}
],
"tests": [
{
"it": "Should render the component in the dom",
"type": "Integration"
},
{
"it": "Should update the width to the value when the slider has changed",
"type": "Integration"
},
{
"it": "Should trigger the onChange() event when the setting changes",
"type": "Integration"
},
{
"it": "Should trigger the _onHeightChange_ plugin hook when the setting changes",
"type": "Integration"
},
{
"it": "Should trigger the _onHeightRender_ plugin hook when the component is being rendered",
"type": "Integration"
}
]
},
{
"name": "LineHeight",
"description": "Creates a Button Slider Group to Change the Line Height of the component",
"behaviors": "",
"exists": "No",
"package": "No",
"type": "Components",
"schema": [
{
"schema_type": "prop",
"name": "onChange",
"type": "() => void",
"required": false,
"description": "Triggered when the setting changes"
}
],
"tests": [
{
"it": "Should render the component in the dom",
"type": "Integration"
},
{
"it": "Should update the width to the value when the slider has changed",
"type": "Integration"
},
{
"it": "Should trigger the onChange() event when the setting changes",
"type": "Integration"
},
{
"it": "Should trigger the _onLineHeightChange_ plugin hook when the setting changes",
"type": "Integration"
},
{
"it": "Should trigger the _onLineHeightRender_ plugin hook when the component is being rendered",
"type": "Integration"
}
]
},
{
"name": "SectionWrapper",
"type": "Components",
"description": "A convenient way to wrap your properties into functional groups (e.g. [Text], [Image Settings], etc.). Groups are collapsable so that the amount of controls do not overwhelm the user",
"behaviors": "",
"exists": "No",
"package": "No",
"schema": [
{
"schema_type": "prop",
"name": "title",
"required": false,
"type": "string",
"description": "The title to show as the label of the group"
},
{
"schema_type": "prop",
"name": "icon",
"required": false,
"type": "string",
"description": "The icon to show as part of the label of the group"
},
{
"schema_type": "prop",
"name": "backgroundIsShowing",
"required": false,
"type": "Boolean",
"description": "Whether or not the background of the section is showing. Useful for when you want to disguise the fact that you're in a group"
},
{
"schema_type": "prop",
"name": "labelIsShowing",
"required": false,
"type": "Boolean",
"description": "Whether or not the label is showing"
},
{
"schema_type": "prop",
"name": "style",
"required": false,
"type": "object",
"description": "The custom style to apply to this section"
},
{
"schema_type": "prop",
"name": "isExpanded",
"required": false,
"type": "Boolean",
"description": "Whether or not the group should be expanded by default"
},
{
"schema_type": "prop",
"name": "sectionWrapperComponent",
"required": false,
"type": "React.ReactNode",
"description": "The component to use instead of the default that wraps each group of properties"
},
{
"schema_type": "prop",
"name": "onExpand",
"required": false,
"type": "() => void",
"description": "Triggers when the section should expand"
},
{
"schema_type": "prop",
"name": "onCollapse",
"required": false,
"type": "() => void",
"description": "Triggers when the section should collapse"
}
],
"tests": [
{
"it": "Should render a SectionWrapper component in the dom",
"type": "Integration"
},
{
"it": "Should show a title in the dom as provided by the title prop",
"type": "Integration"
},
{
"it": "Should not show any background colors when the backgroundIsShowing prop is set to false",
"type": "Integration"
},
{
"it": "Should not show a label header when the labelIsShowing prop is false",
"type": "Integration"
},
{
"it": "Should style the wrapper according to the style provided in the style prop",
"type": "Integration"
},
{
"it": "Show the section in a collapsed (where no children components are visible) form when the isExpanded prop is false",
"type": "Integration"
},
{
"it": "Should show the component provided by the sectionWrapperComponent instead of the default section component when one is provided",
"type": "Integration"
},
{
"it": "Should render any provided children elements when the isExpanded component is true",
"type": "Integration"
},
{
"it": "Should trigger the onExpand() event when the section should expand",
"type": "Integration"
},
{
"it": "Should trigger the onCollapse() event when the section should collapse",
"type": "Integration"
}
]
},
{
"name": "Alignment",
"type": "Components",
"description": "A section with tools for aligning content (horizontally, vertically, etc)",
"behaviors": "",
"exists": "No",
"package": "No",
"schema": [
{
"schema_type": "prop",
"name": "showMarginAlignmentGroup",
"type": "Boolean",
"required": false,
"description": "Whether or not to show the margin alignment group"
},
{
"schema_type": "prop",
"name": "showHorizontalAlignmentGroup",
"type": "Boolean",
"required": false,
"description": "Whether or not to show the horizontal alignment group"
},
{
"schema_type": "prop",
"name": "showVerticalAlignmentGroup",
"type": "Boolean",
"required": false,
"description": "Whether or not to show the vertical alignment group"
},
{
"schema_type": "prop",
"name": "showTextAlignmentGroup",
"type": "Boolean",
"required": false,
"description": "Whether or not to show the text alignment buttons"
},
{
"schema_type": "prop",
"name": "onChange",
"type": "() => void",
"required": false,
"description": "Triggers when the alignment changes in some way"
}
],
"tests": [
{
"it": "Should render the Alignment component in the dom",
"type": "Integration"
},
{
"it": "Should render the margin alignment group when the showMarginAlignmentGroup prop is true",
"type": "Integration"
},
{
"it": "Should render the horizontal alignment group when the showHorizontalAlignmentGroup prop is true",
"type": "Integration"
},
{
"it": "Should render the vertical alignment group when the showVerticalAlignmentGroup prop is true",
"type": "Integration"
},
{
"it": "Should render the text alignment buttons when the showTextAlignmentGroup prop is true",
"type": "Integration"
},
{
"it": "Should trigger the _onChange_ event when the alignment changes in some way",
"type": "Integration"
},
{
"it": "Should update the selected item's alignment when the onChange event is triggered",
"type": "Integration"
},
{
"it": "Should trigger the _onAlignmentRender_ plugin hook when the Alignment component is rendering",
"type": "Integration"
},
{
"it": "Should trigger the _onAlignmentChange_ plugin hook when the alignment changes in some way",
"type": "Integration"
}
]
},
{
"name": "Background",
"type": "Components",
"description": "A section for configuring the background properties of an object",
"behaviors": "",
"exists": "No",
"package": "No",
"schema": [
{
"schema_type": "prop",
"name": "...all of the section props",
"type": "any",
"required": false,
"description": "extends the section props"
},
{
"schema_type": "prop",
"name": "propertiesToHide",
"type": "any[]",
"required": false,
"description": "An array of properties to hide - color, image, (video), (parallax)"
},
{
"schema_type": "prop",
"name": "onChange",
"type": " () => void",
"required": false,
"description": "Triggers when the background changes in some way"
}
],
"tests": [
{ "it": "Should render in the dom", "type": "Integration" },
{ "it": "Should render an image tab", "type": "Integration" },
{ "it": "Should render a color tab", "type": "Integration" },
{ "it": "Should render a video tab", "type": "Integration" },
{ "it": "Should render parallax settings", "type": "Integration" },
{
"it": "Should hide the color properties when _color_ is found in the propertiesToHide array",
"type": "Integration"
},
{
"it": "Should hide the color properties when _image_ is found in the propertiesToHide array",
"type": "Integration"
},
{
"it": "Should hide the video properties when _video_ is found in the propertiesToHide array",
"type": "Integration"
},
{
"it": "Should hide the parallax properties when _parallax_ is found in the propertiesToHide array",
"type": "Integration"
},
{
"it": "Should trigger the onChange() event when the background changes in some way",
"type": "Integration"
},
{
"it": "Should change the background color when the color is chosen in the color tools",
"type": "Integration"
},
{
"it": "Should change the background image when one is chosen",
"type": "Integration"
},
{
"it": "Should change the background repeat settings according to the option chosen (no-repeat, repeat-x, repeat-y, both)",
"type": "Integration"
},
{
"it": "Should change the background positioning settings according to the option chosen (auto, cover, contain)",
"type": "Integration"
},
{
"it": "Should change the background's parallax settings according to the parallax settings chosen",
"type": "Integration"
},
{
"it": "Should change the background video when a video is chosen in the video tab",
"type": "Integration"
},
{
"it": "Should trigger the _onBackgroundRender_ plugin hook when the Background component is rendering",
"type": "Integration"
},
{
"it": "Should trigger the _onBackgroundChange_ plugin hook when the background changes in some way",
"type": "Integration"
}
]
},
{
"name": "BordersShadow",
"type": "Components",
"description": "A section for configuring the borders and shadows of an object",
"behaviors": "",
"exists": "No",
"package": "No",
"schema": [
{
"schema_type": "prop",
"name": "...all of the section props",
"type": "any",
"required": false,
"description": "...all of the section props"
},
{
"schema_type": "prop",
"name": "showBorderRadiusGroup",
"type": "Boolean",
"required": false,
"description": "Whether or not to show the border radius group"
},
{
"schema_type": "prop",
"name": "showShadowGroup",
"type": "Boolean",
"required": false,
"description": "Whether or not to show the shadow group"
},
{
"schema_type": "prop",
"name": "onChange",
"type": "() => void",
"required": false,
"description": "Triggers when the borders or shadows change in some way"
}
],
"tests": [
{
"it": "Should render the BordersShadow component in the dom",
"type": "Integration"
},
{
"it": "Should trigger the onChange() event when the borders or shadows change in some way",
"type": "Integration"
},
{
"it": "Should trigger the _onBordersShadowRender_ plugin hook when the BordersShadow component is rendering",
"type": "Integration"
},
{
"it": "Should trigger the _onBordersShadowChange_ plugin hook when the borders or shadows change in some way",
"type": "Integration"
},
{
"it": "Should not render the border radius group when the showBorderRadiusGroup prop is false",
"type": "Integration"
},
{
"it": "Should not render the shadow group of properties when the showShadowGroup prop is false",
"type": "Integration"
},
{
"it": "Should change the thickness of the border when the _thickness_ slider changes or +/- buttons are clicked",
"type": "Integration"
},
{
"it": "Should change the radius of the border when the _Round_ slider changes or +/- buttons are clicked",
"type": "Integration"
},
{
"it": "Should change the border color when the color picker changes to a different color",
"type": "Integration"
},
{
"it": "Should change the shadow blur when the _Blur_ slider changes or +/- buttons are clicked",
"type": "Integration"
},
{
"it": "Should change the border style to none, solid, or dashed when the appropriate preset is selected",
"type": "Integration"
}
]
},
{
"name": "PositionPadding",
"description": "A section for configuring the position and padding of an object",
"type": "Components",
"behaviors": "",
"exists": "No",
"package": "No",
"schema": [
{
"schema_type": "prop",
"name": "...all of the section props",
"type": "any",
"required": false,
"description": "...all of the section props"
},
{
"schema_type": "prop",
"name": "onChange",
"type": "() => void",
"required": false,
"description": "Triggers when the position/padding changes in some way"
}
],
"tests": [
{
"it": "Should render the PositionPadding Component in the dom",
"type": "Integration"
},
{
"it": "Triggers the onChange() event when the position/padding changes in some way",
"type": "Integration"
},
{
"it": "Triggers the _onObjectPreviewRender_ plugin hook when the ObjectPreview component renders",
"type": "Integration"
},
{
"it": "Triggers the _onPositionPaddingChange_ plugin hook when the position/padding changes in some way",
"type": "Integration"
}
]
},
{
"name": "Typography",
"description": "A section for configuring the typography of an object",
"type": "Components",
"behaviors": "",
"exists": "No",
"package": "No",
"schema": [
{
"schema_type": "prop",
"name": "...all of the section props",
"type": "any",
"required": false,
"description": "...all of the section props"
},
{
"schema_type": "prop",
"name": "showFontsGroup",
"type": "Boolean",
"required": false,
"description": "Whether or not to show the font selection group"
},
{
"schema_type": "prop",
"name": "showColorsGroup",
"type": "Boolean",
"required": false,
"description": "Whether or not to show the colorPicker group"
},
{
"schema_type": "prop",
"name": "showLineHeightGroup",
"type": "Boolean",
"required": false,
"description": "Whether or not to show the lineHeight group"
},
{
"schema_type": "prop",
"name": "showTextFormattingGroup",
"type": "Boolean",
"required": false,
"description": "Whether or not to show the text formatting group. This includes features like bold, italics, and text alignment"
},
{
"schema_type": "prop",
"name": "type",
"type": "string",
"required": false,
"description": "prepends the section title"
},
{
"schema_type": "prop",
"name": "onChange",
"type": "() => void",
"required": false,
"description": "Triggers when the typography settings change in some way "
}
],
"tests": [
{
"it": "Should render the font selection group when the showFontsGroup prop is true",
"type": "Integration"
},
{
"it": "Should show a list of Google fonts to choose from",
"type": "Integration"
},
{
"it": "Should render the colorPicker group when the showColorsGroup prop is true",
"type": "Integration"
},
{
"it": "Should render the lineHeight group when the showLineHeightGroup prop is true",
"type": "Integration"
},
{
"it": "Should render the text formatting group when the showTextFormattingGroup prop is true",
"type": "Integration"
},
{
"it": "Should render a title that has the type prop as one of the words in the title",
"type": "Integration"
},
{
"it": "Triggers the onChange() event when the typography settings change in some way",
"type": "Integration"
},
{
"it": "Should change the font family of the component to the font family selected (if no text is selected)",
"type": "Integration"
},
{
"it": "Should change the font family of the selected text inside the component to the font family selected",
"type": "Integration"
},
{
"it": "Should change the size of the font in the component to the size selected (if no text is selected)",
"type": "Integration"
},
{
"it": "Should change the size of the font of the selected text inside the component to the font size selected",
"type": "Integration"
},
{
"it": "Triggers the _onTypographyRender_ plugin hook when the Typography component is rendering",
"type": "Integration"
},
{
"it": "Triggers the _onTypographyChange_ plugin hook when the typography settings change in some way",
"type": "Integration"
}
]
},
{
"name": "WidthHeight",
"description": "A section for configuring the width and height of an object",
"type": "Components",
"behaviors": "",
"exists": "No",
"package": "No",
"schema": [
{
"schema_type": "prop",
"name": "...all of the section props",
"type": "any",
"required": false,
"description": "...all of the section props"
},
{
"schema_type": "prop",
"name": "showWidthGroup",
"type": "Boolean",
"required": false,
"description": "Whether or not to show the Width properties"
},
{
"schema_type": "prop",
"name": "showHeightGroup",
"type": "Boolean",
"required": false,
"description": "Whether or not to show the Height properties"
},
{
"schema_type": "prop",
"name": "onChange",
"type": "() => void",
"required": false,
"description": "Triggers when the width or height changes in some way"
}
],
"tests": [
{
"it": "Triggers the onChange() event when the width or height changes in some way",
"type": "Integration"
},
{
"it": "Triggers the _onWidthHeightRender_ plugin hook when the WidthHeight component renders",
"type": "Integration"
},
{
"it": "Triggers the _onWidthHeightChange_ plugin hook when the width or height changes in some way",
"type": "Integration"
},
{
"it": "Should not render the Width component when the showWidthGroup prop is false",
"type": "Integration"
},
{
"it": "Should not render the Height component when the showHeightGroup prop is false",
"type": "Integration"
}
]
},
{
"name": "ObjectPreview",
"description": "Show's a small preview of the component. The wrapper calculates how much zoom to apply to the child component in order to fit it nicely inside of the viewport",
"type": "Components",
"behaviors": "",
"exists": "No",
"package": "No",
"schema": [
{
"schema_type": "prop",
"name": "...all of the section props",
"type": "any",
"required": false,
"description": "...all of the section props"
},
{
"schema_type": "prop",
"name": "children",
"type": "React.ReactNode",
"required": false,
"description": "..."
},
{
"schema_type": "prop",
"name": "color",
"type": "string",
"required": false,
"description": "This is a way to set the background color of the preview view port"
}
],
"tests": [
{ "it": "Should render in the dom", "type": "Integration" },
{
"it": "Should render a child component if one is provided",
"type": "Integration"
},
{
"it": "Should zoom out or in the child component in such a way that it fits the container with no overlaps",
"type": "Integration"
},
{
"it": "Should have a backgroundColor that matches the color prop",
"type": "Integration"
},
{
"it": "Triggers the _onObjectPreviewRender_ plugin hook when the ObjectPreview component renders",
"type": "Integration"
}
]
},
{
"name": "ObjectPresets",
"description": "Show's a collection of pre-built components with each having a specific setting that will apply when clicked. If more presets exist than can fill the viewport, it will show in a carousel",
"type": "Components",
"behaviors": "",
"exists": "No",
"package": "No",
"schema": [
{
"schema_type": "prop",
"name": "...all of the section props",
"type": "any",
"required": false,
"description": "...all of the section props"
},
{
"schema_type": "prop",
"name": "presets",
"type": "any[]",
"description": "An array of presets to show the user",
"required": false
},
{
"schema_type": "prop",
"name": "component",
"type": "element",
"description": "The component to show inside each preset",
"required": false
}
]
},
{
"name": "Preset",
"description": "This is an individual preset. It simply is a wrapper around a child component",
"type": "Components",
"behaviors": "",
"exists": "No",
"package": "No",
"schema": [
{
"schema_type": "prop",
"name": "...all of the section props",
"type": "any",
"required": false,
"description": "...all of the section props"
},
{
"schema_type": "prop",
"name": "children",
"type": "element",
"description": "",
"required": false
},
{
"schema_type": "prop",
"name": "onChange",
"type": "element",
"description": "Triggers when a preset is selected",
"required": false
}
],
"tests": [
{ "it": "Should render in the dom", "type": "Integration" },
{
"it": "Should show an array of components in the dom. The number should match the length of the presets array prop",
"type": "Integration"
},
{
"it": "Should show the same component (the one provided in the props) as a child of each component",
"type": "Integration"
},
{
"it": "Triggers the onChange() event when a preset is selected",
"type": "Integration"
},
{
"it": "Should change the selected editor item's properties according to the setting of the preset clicked",
"type": "Integration"
},
{
"it": "Triggers the _onObjectPresetsList_ plugin hook when the list is being established, so plugins can modify this list if necessary",
"type": "Integration"
},
{
"it": "Triggers the _onObjectPresetsChange_ plugin hook when a preset is selected",
"type": "Integration"
},
{
"it": "Triggers the _onObjectPresetsRender_ plugin hook when the ObjectPresets component is rendered",
"type": "Integration"
}
]
},
{
"name": "UploadGroup",
"description": "A section for uploading content. Through drag/drop, clicking an upload button, or entering in a url",
"type": "Components",
"behaviors": "",
"exists": "No",
"package": "No",
"schema": [
{
"schema_type": "prop",
"name": "...all of the section props",
"type": "any",
"required": false,
"description": "...all of the section props"
},
{
"schema_type": "prop",
"name": "(DropZone props)",
"type": "Boolean",
"required": false,
"description": "(DropZone props)"
},
{
"schema_type": "prop",
"name": "showURLPicker",
"type": "Boolean",
"required": false,
"description": "Whether or not to show the dropzone with upload and url selection buttons or just the dropzone alone"
},
{
"schema_type": "prop",
"name": "text",
"type": "string",
"required": false,
"description": "This is the label for the upload button. Used to inform the user what it's uploading (e.g. [UPLOAD VIDEO] if text=[video])"
},
{
"schema_type": "prop",
"name": "style",
"type": "object",
"required": false,
"description": "The style to apply to the container just inside the object"
},
{
"schema_type": "prop",
"name": "url",
"type": "string",
"required": false,
"description": "The current url that is being used for the object (e.g. an image or video)."
},
{
"schema_type": "prop",
"name": "onChange",
"type": "() => void",
"required": false,
"description": "Triggered after the upload occurs. Passes in a preview url for an instant view. And then the actual url once the upload is complete"
}
],
"tests": [
{ "it": "Should render in the dom", "type": "Integration" },
{
"it": "Should be able to drag a file to the component and trigger an upload",
"type": "Integration"
},
{
"it": "Should be able to select a file from my computer",
"type": "Integration"
},
{
"it": "Should be able to enter a custom url for the file I want to use instead of uploading",
"type": "Integration"
},
{
"it": "Should not show any url selection buttons if the showURLPicker prop is false",
"type": "Integration"
},
{
"it": "Should show a preview of the uploaded file (if an image) immediately after uploading",
"type": "Integration"
},
{
"it": "Should have the text prop as part of the section label",
"type": "Integration"
},
{
"it": "Should set the style using the style prop instead of the default style if one is provided",
"type": "Integration"
},
{
"it": "The url (prop) should be updated and the editor item should have the url in its settings after the upload has completed",
"type": "Integration"
},
{
"it": "Should show a progress loader while the upload is occuring",
"type": "Integration"
},
{
"it": "Triggers the onChange() event after the upload occurs",
"type": "Integration"
},
{
"it": "Triggers the _onUploadGroupChange_ plugin hook when the upload occurs",
"type": "Integration"
},
{
"it": "Triggers the _onUploadGroupRender_ plugin hook when the UploadGroup component is rendering",
"type": "Integration"
}
]
},
{
"name": "BehaviorsAndActions",
"description": "A section for handling editor object behaviors and their corresponding actions, --For example, if someone clicks on a button (a behavior) on the canvas, you likely will want the page to redirect to a different page (an action). Or you may want it to trigger an upsell purchase (a different action) --For example, if someone watches a video for more than 2.5 minutes (a behavior), it should show an order button --This component will show an component for each of the behaviors associated with the selected object",
"type": "Components",
"behaviors": "",
"exists": "No",
"package": "No",
"schema": [
{
"schema_type": "prop",
"name": "...all of the section props",
"type": "any",
"required": false,
"description": "...all of the section props"
},
{
"schema_type": "prop",
"name": "label",
"type": "string",
"required": false,
"description": "The caption to apply to the section group. (will also apply the caption to each interaction fieldset group as the title and legend)"
},
{
"schema_type": "prop",
"name": "(filter)",
"type": "string",
"required": false,
"description": "only show a subset of the behaviors"
},
{
"schema_type": "prop",
"name": "onUpdate",
"type": "() => any",
"required": false,
"description": "Triggers when an interaction setting has changed"
}
],
"tests": [
{
"it": "Should render the component in the dom",
"type": "Integration"
},
{
"it": "Should render an component for each behavior associated with this item",
"type": "Integration"
},
{
"it": "Should be able to add new behaviors to the list so that multiple behaviors can be tracked",
"type": "Integration"
},
{
"it": "Should be able to delete any behavior and have it be removed from the list of behaviors to track",
"type": "Integration"
},
{
"it": "Should be able to add multiple actions to any of my tracked behaviors",
"type": "Integration"
},
{
"it": "Should be able to delete any 's that show and have it be removed from the list of actions to perform",
"type": "Integration"
},
{
"it": "Should show the text found in the label prop as the title for the section (and each action's fieldset group)",
"type": "Integration"
},
{
"it": "Should only show a subset of behaviors based on the filter given in the filter prop (e.g. only show button behaviors, etc.)",
"type": "Integration"
},
{
"it": "The actions property of the editor item's setting object should update to reflect the changes set when the onUpdate() event has been called",
"type": "Integration"
},
{
"it": "Should trigger the onUpdate() event when an interaction setting has changed",
"type": "Integration"
},
{
"it": "Should trigger the [onInteractionUpdate] plugin hook when an interaction setting has changed",
"type": "Integration"
},
{
"it": "Should trigger the [onInteractionsRender] plugin hook when the Interactions component is being rendered",
"type": "Integration"
}
]
},
{
"name": "BehaviorSelector",
"description": "This component lets you choose from a list of available behaviors (e.g. Clicks, Watches, Pauses, etc.) that they want the system to listen out for --When a behavior is selected, it may also show a sub selection of components to fine-tune details about the behavior --For example, if the behavior is _Watches a Video,_ a fine-tuning sub selection may ask _For How Long?_",
"type": "Components",
"behaviors": "",
"exists": "No",
"package": "No",
"schema": [
{
"name": "filter",
"type": "string",
"description": "Only behaviors that match this filter are available for selecting"
},
{
"name": "label",
"type": "string",
"description": "The label to use in the title/caption of the BehaviorSelector"
},
{
"name": "behavior",
"type": "object",
"description": "The specific properties of this behavior"
},
{
"name": "onSetBehavior",
"type": "() => void",
"description": "Triggers when a behavior is to be set for the object"
},
{
"name": "onDeleteBehavior",
"type": "() => void",
"description": "Triggers when a behavior is to be deleted from the stack"
}
],
"tests": [
{
"it": "Should render the component in the dom",
"type": "Integration"
},
{
"it": "Should only show behaviors that match the filter provided in the filter prop",
"type": "Integration"
},
{
"it": "Should show the title of the behavior as indicated by the label prop",
"type": "Integration"
},
{
"it": "Should update the settings with the new behavior object once it has been set or updated",
"type": "Integration"
},
{
"it": "Should render a relevant after the initial behavior is selected",
"type": "Integration"
},
{
"it": "Should trigger the onSetBehavior() event when a behavior is to be set for the object",
"type": "Integration"
},
{
"it": "Should trigger the onDeleteBehavior() event when a behavior is to be deleted from the stack",
"type": "Integration"
},
{
"it": "Should trigger the _onBehaviorSelectorMenuList_ plugin hook when the menu list of behaviors are being listed",
"type": "Integration"
},
{
"it": "Should trigger the _onBehaviorSelectorRender_ plugin hook when the BehaviorSelector component is being rendered",
"type": "Integration"
},
{
"it": "Should trigger the _onDeleteBehavior_ plugin hook when a behavior is to be deleted from the stack",
"type": "Integration"
}
]
},
{
"name": "BehaviorSubSelector",
"description": "An optional sub selector to show after a behavior is selected. --It's used for capturing more specific information about the behavior they want detected --e.g. if the behavior (in the type) is WATCHES_VIDEO, the sub selector component should be rendered (which asks the user to specific what length of time should trigger this behavior)",
"type": "Components",
"behaviors": "",
"exists": "No",
"package": "No",
"schema": [
{
"name": "type",
"type": "enum",
"description": "the constant used to determine which SubSelector component to show. e.g. CLICKS, WATCHES_VIDEO, PAUSES_VIDEO, DOUBLE_CLICK, NONE, APPLIES_TAG, etc."
},
{
"name": "behavior",
"type": "object",
"description": "The specific properites of this behavior"
},
{
"name": "onSetBehavior",
"type": "() => void",
"description": "Triggers when a behavior is to be set for the editor item"
}
],
"tests": [
{ "it": "Should render in the dom", "type": "Integration" },
{
"it": "Should have an option to bypass picking a subselector (e.g. subselector type is _NONE_)",
"type": "Integration"
},
{
"it": "Should render the appropriate sub selector component based on the chosen _type_ in the props",
"type": "Integration"
},
{
"it": "Should update the behavior object's properties once the sub selector information is set",
"type": "Integration"
},
{
"it": "Should trigger the onSetBehavior() event when a behavior is to be set for the editor item",
"type": "Integration"
},
{
"it": "Should show once the sub selector is chosen",
"type": "Integration"
},
{
"it": "Should be able to add multiple 's once a sub selector has been selected",
"type": "Integration"
},
{
"it": "Should be able to delete any of the 's",
"type": "Integration"
},
{
"it": "Should trigger the _onSetBehavior_ plugin hook when a behavior is to be set for an editor item",
"type": "Integration"
},
{
"it": "Should trigger the onSubSelectionRender({type}) plugin hook",
"type": "Integration"
}
]
},
{
"name": "ActionSelector",
"description": "This component lets you customize a specific action. --It renders a drop-down menu that will show the list of available actions that can be performed for the associated behavior --When an action is selected, it may also show a sub selection of components to fine-tune the selection --For example, if the action selected is [Go To a URL], a fine-tuning sub selection may ask [What URL?]",
"type": "Components",
"behaviors": "",
"exists": "No",
"package": "No",
"schema": [
{
"schema_type": "prop",
"name": "behavior",
"type": "string",
"description": "The name of the specific behavior that has to occur (e.g. _click_, _mouseEnter_, etc) before the selected action is triggered",
"required": false
},
{
"schema_type": "prop",
"name": "(filter)",
"type": "string",
"description": "Only actions that match this filter are available for selecting",
"required": false
},
{
"schema_type": "prop",
"name": "label",
"type": "string",
"description": "The label to use in the title/caption of the ActionSelector",
"required": false
},
{
"schema_type": "prop",
"name": "action",
"type": "object",
"description": "The specific properties of this action",
"required": false
},
{
"schema_type": "prop",
"name": "myKey",
"type": "Number",
"description": "The index of this particular action if there are multiple actions to be triggered",
"required": false
},
{
"schema_type": "prop",
"name": "onSetAction",
"type": "() => void",
"description": "Triggers when an action is to be set for the object",
"required": false
},
{
"schema_type": "prop",
"name": "onDeleteAction",
"type": "() => void",
"description": "Triggers when an action is to be deleted from the stack",
"required": false
}
],
"tests": [
{
"it": "Should render the component in the dom",
"type": "Integration"
},
{
"it": "Should only show actions that match the filter provided in the filter prop",
"type": "Integration"
},
{
"it": "Should show the title of the action as indicated by the label prop",
"type": "Integration"
},
{
"it": "Should update the settings with the new action object once it has been set or updated",
"type": "Integration"
},
{
"it": "Should render a relevant after the initial action is selected",
"type": "Integration"
},
{
"it": "Should trigger the onSetAction() event when a action is to be set for the object",
"type": "Integration"
},
{
"it": "Should trigger the onDeleteAction() event when a action is to be deleted from the stack",
"type": "Integration"
},
{
"it": "Should trigger the _onActionSelectorMenuList_ plugin hook when the menu list of actions are being listed",
"type": "Integration"
},
{
"it": "Should trigger the _onActionSelectorRender_ plugin hook when the ActionSelector component is being rendered",
"type": "Integration"
},
{
"it": "Should trigger the _onDeleteAction_ plugin hook when a action is to be deleted from the stack",
"type": "Integration"
}
]
},
{
"name": "ActionSubSelector",
"description": "An optional sub selector to show after an action is selected. --Used for capturing more specific information about the the action they want performed. --e.g. if the action (in the type) selected is GO_TO_URL, the sub selector component should be rendered (which asks the user to specify the url or page they want the visitor to be redirected to)",
"type": "Components",
"behaviors": "",
"exists": "No",
"package": "No",
"schema": [
{
"name": "type",
"type": "enum",
"description": "the constant used to determine which SubSelector component to show - e.g. GO_TO_URL, SUBMIT_FORM, OPEN_POPUP, TRIGGER_PURCHASE, TRIGGER_UPSELL, SHOW_AND_HIDE, CREATE_TAG"
},
{
"name": "action",
"type": "object",
"description": "The specific properties of this action"
},
{
"name": "myKey",
"type": "Number",
"description": "The index of this particular action if there are multiple actions to be triggered"
},
{
"name": "onSetAction",
"type": "() => void",
"description": "Triggers when an action is to be set for the object"
}
],
"tests": [
{ "it": "Should render in the dom", "type": "Integration" },
{
"it": "Should have an option to bypass picking a subselector (e.g. subselector type is _NONE_)",
"type": "Integration"
},
{
"it": "Should render the appropriate sub selector component based on the chosen _type_ in the props",
"type": "Integration"
},
{
"it": "Should update the action object's properties once the sub selector information is set",
"type": "Integration"
},
{
"it": "Should trigger the onSetAction() event when a action is to be set for the editor item",
"type": "Integration"
},
{
"it": "Should trigger the _onSetAction_ plugin hook when an action is to be set for an editor item",
"type": "Integration"
},
{
"it": "Should trigger the onSubSelectionRender({type}) plugin hook",
"type": "Integration"
}
]
},
{
"name": "PopupOptions",
"description": "Lets the user select from a list of available popup windows or create a new one from scratch",
"type": "Components",
"behaviors": "",
"exists": "No",
"package": "No",
"schema": [
{
"name": "action",
"type": "string",
"description": "The current action settings for this specific interaction",
"schema_type": "prop",
"required": false
},
{
"name": "onChange",
"type": "() => void",
"description": "Triggers when the popup settings have been set",
"schema_type": "prop",
"required": false
},
{
"name": "setPopup",
"type": "() => void",
"description": "Sets the selected popup window as the popup window to show when the action is triggered",
"schema_type": "method",
"required": false
},
{
"name": "createPopupWindow",
"type": "() => void",
"description": "Creates a new popup window on the page",
"schema_type": "method",
"required": false
},
{
"name": "showSelectedPopup",
"type": "() => void",
"description": "Shows the selected popup window on the page",
"schema_type": "method",
"required": false
}
],
"tests": [
{
"it": "Should render the component in the dom",
"type": "Integration"
},
{
"it": "Should show the list of existing popup windows in the dropdown menu to select from",
"type": "Integration"
},
{
"it": "Should show the chosen popup window in the dropdown menu if one was previously chosen",
"type": "Integration"
},
{
"it": "Should let the user create a new popup window",
"type": "Integration"
},
{
"it": "Should trigger the onChange() event when the popup settings have been set",
"type": "Integration"
},
{
"it": "Should update the action settings with the correct popup action information once the popup settings change",
"type": "Integration"
},
{
"it": "Should trigger the onSubSelectionRender([PopupOptions]) plugin hook when the PopupOptions component is rendering",
"type": "Integration"
}
]
},
{
"name": "GoToUrl",
"description": "Provides a list of options for linking to another pag. For example: A custom url, the next page in the funnel, or one of the other pages in this particular funnel",
"type": "Components",
"behaviors": "",
"exists": "No",
"package": "No",
"schema": [
{
"name": "action",
"type": "string",
"description": "The current action settings for this specific interaction",
"schema_type": "prop",
"required": false
},
{
"name": "onChange",
"type": "() => void",
"description": "Triggers when the GoToUrl settings have been set",
"schema_type": "prop",
"required": false
}
],
"tests": [
{
"it": "Should render the component in the dom",
"type": "Integration"
},
{
"it": "Should trigger the onSubSelectionRender([GoToUrl]) plugin hook when the GoToUrl component is rendering",
"type": "Integration"
},
{
"it": "Should trigger the onChange() event when the GoToUrl settings have been set",
"type": "Integration"
},
{
"it": "Should update the action settings with the url redirect action information once the GoToUrl settings change",
"type": "Integration"
}
]
},
{
"name": "SubmitForm",
"description": "A link to open campaign settings. If for example, a button is clicked that has an action set to SUBMIT_FORM, by associating a 3rd party campaign with this page, the system will know to pass the form data to it",
"type": "Components",
"behaviors": "",
"exists": "No",
"package": "No",
"tests": [
{
"it": "Should render the component in the dom",
"type": "Integration"
},
{
"it": "Should trigger the onSubSelectionRender([SubmitForm]) plugin hook when the GoToUrl component is rendering",
"type": "Integration"
},
{
"it": "Should open the campaign settings window when the rendered link is clicked",
"type": "Integration"
}
]
},
{
"name": "TriggerPurchase",
"description": "A link to open merchant settings",
"type": "Components",
"behaviors": "",
"exists": "No",
"package": "No",
"tests": [
{
"it": "Should render the component in the dom",
"type": "Integration"
},
{
"it": "Should trigger the onSubSelectionRender([TriggerPurchase]) plugin hook when the TriggerPurchase component is rendering",
"type": "Integration"
},
{
"it": "Should open the payment settings window when the rendered link is clicked",
"type": "Integration"
}
]
},
{
"name": "TriggerUpsell",
"description": "A link to open merchant settings",
"type": "Components",
"behaviors": "",
"exists": "No",
"package": "No",
"tests": [
{
"it": "Should render the component in the dom",
"type": "Integration"
},
{
"it": "Should trigger the onSubSelectionRender([TriggerUpsell]) plugin hook when the TriggerUpsell component is rendering",
"type": "Integration"
},
{
"it": "Should open the payment settings window if the rendered link is clicked",
"type": "Integration"
}
]
},
{
"name": "ShowHide",
"description": "Lets the user indicate which page item they want to show, and which page item they want to hide once the action is triggered",
"type": "Components",
"behaviors": "",
"exists": "No",
"package": "No",
"tests": [
{
"it": "Should render the component in the dom",
"type": "Integration"
},
{
"it": "Should show a list of page items that the user can choose to [show] as part of this action",
"type": "Integration"
},
{
"it": "Should show a list of page items that the user can choose to [hide] as part of this action",
"type": "Integration"
},
{
"it": "Should update the action settings with the id of the components to show and hide once the ShowHide settings change",
"type": "Integration"
},
{
"it": "Should trigger the onSubSelectionRender([ShowHide]) plugin hook when the ShowHide component is rendering",
"type": "Integration"
},
{
"it": "Should trigger the onChange() event when the ShowHide settings have been set",
"type": "Integration"
}
]
},
{
"name": "CreateTag",
"description": "Lets the user enter the name of the tag they want applied when this action is chosen. Lets the user enter an optional value to associate with the tag",
"type": "Components",
"behaviors": "",
"exists": "No",
"package": "No",
"tests": [
{
"it": "Should render the component in the dom",
"type": "Integration"
},
{
"it": "Should trigger the onSubSelectionRender([CreateTag]) plugin hook when the CreateTag component is rendering",
"type": "Integration"
},
{
"it": "Should trigger the onChange() event when the CreateTag settings have been set",
"type": "Integration"
},
{
"it": "Should update the action settings with the name of the tag, and optional value of the tag once the CreateTag settings change",
"type": "Integration"
}
]
}
],
"database": [],
"api": []
}