## Spec for Properties Package 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 ## Table of Contents - [Spec for Properties Package](#spec-for-properties-package) - [Table of Contents](#table-of-contents) - [Workflow](#workflow) - [User Stories](#user-stories) - [Test Plan](#test-plan) - [Acceptance Tests](#acceptance-tests) - [Screens / States](#screens--states) - [Usage](#usage) - [Components](#components) - [Layouts](#layouts) - [Containers](#containers) - [Components](#components-1) - [Schema](#schema) - [Component Schema](#component-schema) - [Properties](#properties) - [Schema](#schema-1) - [Tests](#tests) - [ButtonSliderGroup](#buttonslidergroup) - [Schema](#schema-2) - [Tests](#tests-1) - [ColorPicker](#colorpicker) - [Schema](#schema-3) - [Tests](#tests-2) - [DropDownCollapse](#dropdowncollapse) - [Schema](#schema-4) - [Tests](#tests-3) - [Margin](#margin) - [Schema](#schema-5) - [Tests](#tests-4) - [Spacing](#spacing) - [Schema](#schema-6) - [Tests](#tests-5) - [Padding](#padding) - [Schema](#schema-7) - [Tests](#tests-6) - [Width](#width) - [Schema](#schema-8) - [Tests](#tests-7) - [Height](#height) - [Schema](#schema-9) - [Tests](#tests-8) - [LineHeight](#lineheight) - [Schema](#schema-10) - [Tests](#tests-9) - [SectionWrapper](#sectionwrapper) - [Schema](#schema-11) - [Tests](#tests-10) - [Alignment](#alignment) - [Schema](#schema-12) - [Tests](#tests-11) - [Background](#background) - [Schema](#schema-13) - [Tests](#tests-12) - [BordersShadow](#bordersshadow) - [Schema](#schema-14) - [Tests](#tests-13) - [PositionPadding](#positionpadding) - [Schema](#schema-15) - [Tests](#tests-14) - [Typography](#typography) - [Schema](#schema-16) - [Tests](#tests-15) - [WidthHeight](#widthheight) - [Schema](#schema-17) - [Tests](#tests-16) - [ObjectPreview](#objectpreview) - [Schema](#schema-18) - [Tests](#tests-17) - [ObjectPresets](#objectpresets) - [Schema](#schema-19) - [Tests](#tests-18) - [Preset](#preset) - [Schema](#schema-20) - [Tests](#tests-19) - [UploadGroup](#uploadgroup) - [Schema](#schema-21) - [Tests](#tests-20) - [BehaviorsAndActions](#behaviorsandactions) - [Schema](#schema-22) - [Tests](#tests-21) - [BehaviorSelector](#behaviorselector) - [Schema](#schema-23) - [Tests](#tests-22) - [BehaviorSubSelector](#behaviorsubselector) - [Schema](#schema-24) - [Tests](#tests-23) - [ActionSelector](#actionselector) - [Schema](#schema-25) - [Tests](#tests-24) - [ActionSubSelector](#actionsubselector) - [Schema](#schema-26) - [Tests](#tests-25) - [PopupOptions](#popupoptions) - [Schema](#schema-27) - [Tests](#tests-26) - [GoToUrl](#gotourl) - [Schema](#schema-28) - [Tests](#tests-27) - [SubmitForm](#submitform) - [Schema](#schema-29) - [Tests](#tests-28) - [TriggerPurchase](#triggerpurchase) - [Schema](#schema-30) - [Tests](#tests-29) - [TriggerUpsell](#triggerupsell) - [Schema](#schema-31) - [Tests](#tests-30) - [ShowHide](#showhide) - [Schema](#schema-32) - [Tests](#tests-31) - [CreateTag](#createtag) - [Schema](#schema-33) - [Tests](#tests-32) - [Database Schema](#database-schema) - [Store/Reducers](#storereducers) - [APIs/Hook Schema](#apishook-schema) ## 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 | Expected | Automated | Type | | --------- | ---------------------------------------------------------------------------------------------------------------------------- | --------- | ---------- | | Rendering | Should render in the dom | Yes | End to End | | Rendering | Should render a different component for each type provided in the prop | Yes | End to End | | Rendering | Should render in the location provided in the location prop | Yes | End to End | | Rendering | Should render a title in the dom that matches the title present in the title prop | Yes | End to End | | Rendering | Should render the same amount of tabs as the number of items in the tabs prop array | Yes | End to End | | Rendering | Should render a caption for each tab as defined by the appropriate tab in the tabs prop array | Yes | End to End | | Rendering | Should render the provided component view for each tab as defined by the appropriate tab in the tabs prop array | Yes | End to End | | Rendering | Should show the default tab as defined by the tab that has the default property in the specific tab in the tab props array | Yes | End to End | | Rendering | Should not render any tab controls when the tabsAreVisible prop is false. Should instead just show the default tab component | Yes | End to End | | Rendering | Should render whatever children components are provided in the props | Yes | End to End | | Events | Should trigger the onChange() event when a change occurs in the settings for that object | Yes | End to End | | Events | Should trigger the onClose() event when the property window is exiting | Yes | End to End | | Methods | Should switch the tab views when the switchTab() method is called | Yes | End to End | | Methods | Should close the property window completely when the closeWindow() method is called | Yes | End to End | | Hooks | Should trigger the _onPropertiesRender_ plugin hook when the Properties component is being rendered | Yes | End to End | | Hooks | Should trigger the _onTabsList_ plugin hook when the tabs list is being generated | Yes | End to End | | Hooks | Should trigger the _onPropertiesWindowClose_ plugin hook when the properties window is being closed | Yes | End to End | ## Acceptance Tests (N/A) ## Screens / States ![]() ## Usage To install it... > npm install @sandcastle/components Add it to your project... ``` import * as React from 'react' import * as Properties from '@sandcastle/components/Properties` export default () => ( } /> ) ``` ## Components ### Layouts N/A ### Containers | Type | Name | Description | Behaviors | Exists | Package | | ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------ | ------- | | Containers | Properties | 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 | | No | No | ### Components | Type | Name | Description | Behaviors | Exists | Package | | ---------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------ | ------- | | Components | ButtonSliderGroup | Renders two buttons and an optional slider --Used for use cases like incrementing/decrementing a property, or setting a precise value (using the slider) | | No | No | | Components | ColorPicker | A tool for picking and settings colors | | No | No | | Components | DropDownCollapse | A dropdown menu of FancySelectors | | No | No | | Components | Margin | Creates a Button Slider Group to Change the Components top position | | No | No | | Components | Spacing | Creates a Button Slider Group to Change the Components margin | | No | No | | Components | Padding | Creates a Button Slider Group to Change the Components Padding | | No | No | | Components | Width | Creates a Button Slider Group to Change the Components Width | | No | No | | Components | Height | Creates a Button Slider Group to Change the Components Height | | No | No | | Components | LineHeight | Creates a Button Slider Group to Change the Line Height of the component | | No | No | | Components | SectionWrapper | 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 | | No | No | | Components | Alignment | A section with tools for aligning content (horizontally, vertically, etc) | | No | No | | Components | Background | A section for configuring the background properties of an object | | No | No | | Components | BordersShadow | A section for configuring the borders and shadows of an object | | No | No | | Components | PositionPadding | A section for configuring the position and padding of an object | | No | No | | Components | Typography | A section for configuring the typography of an object | | No | No | | Components | WidthHeight | A section for configuring the width and height of an object | | No | No | | Components | ObjectPreview | 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 | | No | No | | Components | ObjectPresets | 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 | | No | No | | Components | Preset | This is an individual preset. It simply is a wrapper around a child component | | No | No | | Components | UploadGroup | A section for uploading content. Through drag/drop, clicking an upload button, or entering in a url | | No | No | | Components | BehaviorsAndActions | 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 | | No | No | | Components | BehaviorSelector | 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?_ | | No | No | | Components | BehaviorSubSelector | 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) | | No | No | | Components | ActionSelector | 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?] | | No | No | | Components | ActionSubSelector | 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) | | No | No | | Components | PopupOptions | Lets the user select from a list of available popup windows or create a new one from scratch | | No | No | | Components | GoToUrl | 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 | | No | No | | Components | SubmitForm | 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 | | No | No | | Components | TriggerPurchase | A link to open merchant settings | | No | No | | Components | TriggerUpsell | A link to open merchant settings | | No | No | | Components | ShowHide | Lets the user indicate which page item they want to show, and which page item they want to hide once the action is triggered | | No | No | | Components | CreateTag | 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 | | No | No | ## Schema ### Component Schema #### Properties ##### Schema | Name | Type | Description | Schema Type | | -------------- | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | type | enum[SIDEBAR,POPUP,INLINE,TOOLBAR] | 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 | prop | | location | enum[LEFT,RIGHT,TOP,BOTTOM] | The location of where the window should show up | prop | | title | string | The default title of the property window | prop | | tabs | array | 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) | prop | | tabsAreVisible | bool | Whether or not the tabs should be visible | prop | | children | element | todo | prop | | onChange | method | Triggers when a change occurs in the settings for that object | prop | | onClose | method | Triggers when the property window is exiting | prop | | switchTab | method | Switches the active tab to another one | method | | closeWindow | method | Closes the property window | method | ##### Tests N/A #### ButtonSliderGroup ##### Schema | Schema Type | Name | Type | Description | | ----------- | -------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | prop | value | string | The current value of the property | | prop | maxCheckValue | Number | The value to assign when the max checkbox is checked | | prop | autoCheckValue | Number | The value to assign the property when the auto checkbox is checked | | prop | toolTip | string | The tooltip to show when the group is hovered over | | prop | button1 | object | The settings for the first button { value, style, events, icon } | | prop | showSlider | Boolean | Whether or not to show the slider | | prop | button2 | object | The settings for the second button { value, style, events, icon } | | prop | text | string | The label caption for the group | | prop | minValue | Number | The minimum allowed value for the property | | prop | maxValue | Number | The maximum allowed value for the property | | prop | showMaxCheck | Boolean | Whether or not to show a checkbox that lets the user immediately set the maximum value | | prop | showAutoCheck | Boolean | 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 | | prop | originalValue | string | The value to revert to if the autoCheck Checkbox is turned off | | prop | onChange | () => any | Triggers when the value of the property changes | | prop | onFinish | () => any | Triggers when the mouse button is released (on the button or slider) | ##### Tests | It | Type | | -------------------------------------------------------------------------------------------------------------------- | ----------- | | Should render component in the dom | Integration | | Should render a _Max Value_ checkbox when the showMaxCheck prop is true | Integration | | Should render the _Auto Set_ checkbox when the showAutoCheck prop is set to true | Integration | | Slider should be positioned at the value provided in the prop | Integration | | Should show a tooltip when the group is hovered over | Integration | | Should not show a slider when the showSlider prop is set to false | Integration | | Should show a label caption for the group using the text prop | Integration | | Should render a button with the value, style, events, icon attributes provided in the button1 prop | Integration | | Should render a button with the value, style, events, icon attributes provided in the button2 prop | Integration | | Should not allow any values below the provided minValue prop | Integration | | Should not allow any values above the provided maxValue prop | Integration | | Should set the value to the autoCheckValue prop's value when the _Auto_ checkbox is checked | Integration | | Should set the value to the maxCheckValue prop's value when the _Max_ checkbox is checked | Integration | | Should immediately uncheck the AutoCheck and MaxCheck checkbox when the button is clicked or slider is changed | Integration | | Should automatically check the MaxCheck Checkbox when the slider is at the maximum position | Integration | | Should position the value of the slider to the max position if the MaxCheck checkbox is checked | Integration | | Should revert the value back to the original value if the _Auto_ checkbox is un-checked | Integration | | Component updates should occur immediately, but database persistence should apply on the mouse up event | Integration | | Should trigger the onChange() event with the new value when either of the buttons are clicked | Integration | | Should trigger the onChange() event with the new value when the slider is moved | Integration | | Should trigger the _onButtonSliderGroupRender_ plugin hook when the ButtonSliderGroup component renders | Integration | | Should trigger the _onButtonSliderGroupChange_ plugin hook when the value of the ButtonSliderGroup property changes | Integration | | Should trigger the onButtonSliderGroupFinish plugin hook when the mouse button is released (on the button or slider) | Integration | #### ColorPicker ##### Schema | Schema Type | Name | Type | Description | | ----------- | ------------- | ---------- | ------------------------------------------------------------------------ | | prop | color | string | This is the color that is currently selected | | prop | text | string | This is the descriptive text label that will appear next to the colors | | prop | showCircles | Boolean | Whether or not the array of circles should show | | prop | showSlider | Boolean | Whether or not the horizontal slider hue picker should show | | prop | showHex | Boolean | Whether or not the hex picker should show | | prop | showAlpha | Boolean | Whether or not the the Alpha Picker should show | | prop | colorExpanded | Boolean | Whether or not the expanded color options should show | | prop | toolTip | string | The tooltip to show when the group is hovered over | | prop | colorArray | any[] | An array of colors to show in the circles. Overrides the default choices | | prop | onChange | () => void | This event is triggered when the color is changed | ##### Tests | Id | Type | | ------------------------------------------------------------------------------------------------------------------------ | ----------- | | Should render the component in the dom | Integration | | 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 | Integration | | Should show the value from the text prop in the section title | Integration | | Should show a tooltip when the group is hovered over | Integration | | Should show a collection of colors as provided by the colorArray prop | Integration | | Should show a default collection of colors if no colors are provided in a colorArray prop | Integration | | Should show the array of circles when the showCircles prop is true | Integration | | Should show the horizontal slider hue picker when the showSlider prop is true | Integration | | Should show the hex picker when the showHex prop is true | Integration | | Should show the the Alpha Picker when the showAlpha prop is true | Integration | | Should show the expanded color options when the colorExpanded prop is true | Integration | | Should trigger the onChange() event with the new color when the color is changed | Integration | | Should update the color prop with the newly selected value after one is selected | Integration | | Should trigger the _onColorPickerRender_ plugin hook when the Color Picker component is being rendered | Integration | | Should trigger the _onColorPickerChange_ plugin hook when the color is changing | Integration | #### DropDownCollapse ##### Schema | Schema Type | Name | Type | Description | | ----------- | ---------- | --------------- | ------------------------------------------------------------------------------------------ | | prop | text | string | This is the text that will appear inside of the dropdown menu | | prop | children | React.ReactNode | These are the elements that are collapsed inside of the dropdown element | | prop | isExpanded | Boolean | Bool if the dropdown should be collapsed or expanded | | prop | onChange | () => void | This event is triggered when the dropdown is changed | ##### Tests | It | Type | | ----------------------------------------------------------------------------------------------------- | ----------- | | The component should render in the dom | Integration | | Should render a caption in the dom that matches the text prop | Integration | | Should not show children if the isExpanded prop is false | Integration | | Should toggle between collapsed and expanded when clicked | Integration | | Should trigger the onChange() event when the dropdown is changed | Integration | | Should trigger the _onDropDownCollapseRender_ plugin hook when the DropDownCollapse is being rendered | Integration | | Should trigger the _onDropDownCollapseChange_ plugin hook when the dropdown is changed | Integration | #### Margin ##### Schema | Schema Type | Name | Type | Description | | ----------- | -------- | ------ | ----------------------------------------- | | prop | minValue | Number | The minimum value that the slider can set | | prop | maxValue | Number | The maximum value that the slider can set | | prop | onChange | Number | Triggered when the setting changes | ##### Tests | It | Type | | ------------------------------------------------------------------------------------ | ----------- | | Should render the component in the dom | Integration | | Should not be able to set the value to one less than the minValue prop | Integration | | Should not be able to set the value to one more than the maxValue prop | Integration | | Should update the margin-top of the item to the value when the slider has changed | Integration | | Should trigger the onChange() event when the setting changes | Integration | | Should trigger the _onMarginChange_ plugin hook when the setting changes | Integration | | Should trigger the _onMarginRender_ plugin hook when the component is being rendered | Integration | #### Spacing ##### Schema | Schema Type | Name | Type | Description | | ----------- | -------- | --------- | ----------------------------------------- | | prop | minValue | Number | The minimum value that the slider can set | | prop | maxValue | Number | The maximum value that the slider can set | | prop | onChange | () => any | Triggered when the setting changes | ##### Tests | It | Type | | ------------------------------------------------------------------------------------- | ----------- | | Should render the component in the dom | Integration | | Should not be able to set the value to one less than the minValue prop | Integration | | Should not be able to set the value to one more than the maxValue prop | Integration | | Should update the spacing to the value when the slider has changed | Integration | | Should trigger the onChange() event when the setting changes | Integration | | Should trigger the _onSpacingChange_ plugin hook when the setting changes | Integration | | Should trigger the _onSpacingChange_ plugin hook when the component is being rendered | Integration | #### Padding ##### Schema | Schema Type | Name | Type | Description | | ----------- | -------- | ---------- | ----------------------------------------- | | prop | minValue | Number | The minimum value that the slider can set | | prop | maxValue | Number | The maximum value that the slider can set | | prop | onChange | () => void | Triggered when the setting changes | ##### Tests | It | Type | | ------------------------------------------------------------------------------------- | ----------- | | Should render the component in the dom | Integration | | Should not be able to set the value to one less than the minValue prop | Integration | | Should not be able to set the value to one more than the maxValue prop | Integration | | Should update the padding to the value when the slider has changed | Integration | | Should trigger the onChange() event when the setting changes | Integration | | Should trigger the _onPaddingChange_ plugin hook when the setting changes | Integration | | Should trigger the _onPaddingRender_ plugin hook when the component is being rendered | Integration | #### Width ##### Schema | Schema Type | Name | Type | Description | | ----------- | -------- | ---------- | ---------------------------------- | | prop | onChange | () => void | Triggered when the setting changes | ##### Tests | It | Type | | ----------------------------------------------------------------------------------- | ----------- | | Should render the component in the dom | Integration | | Should update the width to the value when the slider has changed | Integration | | Should trigger the onChange() event when the setting changes | Integration | | Should trigger the _onWidthChange_ plugin hook when the setting changes | Integration | | Should trigger the _onWidthRender_ plugin hook when the component is being rendered | Integration | #### Height ##### Schema | Schema Type | Name | Type | Description | | ----------- | -------- | ---------- | ---------------------------------- | | prop | onChange | () => void | Triggered when the setting changes | ##### Tests | It | Type | | ------------------------------------------------------------------------------------ | ----------- | | Should render the component in the dom | Integration | | Should update the width to the value when the slider has changed | Integration | | Should trigger the onChange() event when the setting changes | Integration | | Should trigger the _onHeightChange_ plugin hook when the setting changes | Integration | | Should trigger the _onHeightRender_ plugin hook when the component is being rendered | Integration | #### LineHeight ##### Schema | Schema Type | Name | Type | Description | | ----------- | -------- | ---------- | ---------------------------------- | | prop | onChange | () => void | Triggered when the setting changes | ##### Tests | It | Type | | ---------------------------------------------------------------------------------------- | ----------- | | Should render the component in the dom | Integration | | Should update the width to the value when the slider has changed | Integration | | Should trigger the onChange() event when the setting changes | Integration | | Should trigger the _onLineHeightChange_ plugin hook when the setting changes | Integration | | Should trigger the _onLineHeightRender_ plugin hook when the component is being rendered | Integration | #### SectionWrapper ##### Schema | Schema Type | Name | Type | Description | | ----------- | ----------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------- | | prop | title | string | The title to show as the label of the group | | prop | icon | string | The icon to show as part of the label of the group | | prop | backgroundIsShowing | Boolean | 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 | | prop | labelIsShowing | Boolean | Whether or not the label is showing | | prop | style | object | The custom style to apply to this section | | prop | isExpanded | Boolean | Whether or not the group should be expanded by default | | prop | sectionWrapperComponent | React.ReactNode | The component to use instead of the default that wraps each group of properties | | prop | onExpand | () => void | Triggers when the section should expand | | prop | onCollapse | () => void | Triggers when the section should collapse | ##### Tests | It | Type | | ------------------------------------------------------------------------------------------------------------------------------- | ----------- | | Should render a SectionWrapper component in the dom | Integration | | Should show a title in the dom as provided by the title prop | Integration | | Should not show any background colors when the backgroundIsShowing prop is set to false | Integration | | Should not show a label header when the labelIsShowing prop is false | Integration | | Should style the wrapper according to the style provided in the style prop | Integration | | Show the section in a collapsed (where no children components are visible) form when the isExpanded prop is false | Integration | | Should show the component provided by the sectionWrapperComponent instead of the default section component when one is provided | Integration | | Should render any provided children elements when the isExpanded component is true | Integration | | Should trigger the onExpand() event when the section should expand | Integration | | Should trigger the onCollapse() event when the section should collapse | Integration | #### Alignment ##### Schema | Schema Type | Name | Type | Description | | ----------- | ---------------------------- | ---------- | ----------------------------------------------------- | | prop | showMarginAlignmentGroup | Boolean | Whether or not to show the margin alignment group | | prop | showHorizontalAlignmentGroup | Boolean | Whether or not to show the horizontal alignment group | | prop | showVerticalAlignmentGroup | Boolean | Whether or not to show the vertical alignment group | | prop | showTextAlignmentGroup | Boolean | Whether or not to show the text alignment buttons | | prop | onChange | () => void | Triggers when the alignment changes in some way | ##### Tests | It | Type | | ----------------------------------------------------------------------------------------------- | ----------- | | Should render the Alignment component in the dom | Integration | | Should render the margin alignment group when the showMarginAlignmentGroup prop is true | Integration | | Should render the horizontal alignment group when the showHorizontalAlignmentGroup prop is true | Integration | | Should render the vertical alignment group when the showVerticalAlignmentGroup prop is true | Integration | | Should render the text alignment buttons when the showTextAlignmentGroup prop is true | Integration | | Should trigger the _onChange_ event when the alignment changes in some way | Integration | | Should update the selected item's alignment when the onChange event is triggered | Integration | | Should trigger the _onAlignmentRender_ plugin hook when the Alignment component is rendering | Integration | | Should trigger the _onAlignmentChange_ plugin hook when the alignment changes in some way | Integration | #### Background ##### Schema | Schema Type | Name | Type | Description | | ----------- | --------------------------- | ---------- | ------------------------------------------------------------------ | | prop | ...all of the section props | any | extends the section props | | prop | propertiesToHide | any[] | An array of properties to hide - color, image, (video), (parallax) | | prop | onChange | () => void | Triggers when the background changes in some way | ##### Tests | It | Type | | ----------------------------------------------------------------------------------------------------------------- | ----------- | | Should render in the dom | Integration | | Should render an image tab | Integration | | Should render a color tab | Integration | | Should render a video tab | Integration | | Should render parallax settings | Integration | | Should hide the color properties when _color_ is found in the propertiesToHide array | Integration | | Should hide the color properties when _image_ is found in the propertiesToHide array | Integration | | Should hide the video properties when _video_ is found in the propertiesToHide array | Integration | | Should hide the parallax properties when _parallax_ is found in the propertiesToHide array | Integration | | Should trigger the onChange() event when the background changes in some way | Integration | | Should change the background color when the color is chosen in the color tools | Integration | | Should change the background image when one is chosen | Integration | | Should change the background repeat settings according to the option chosen (no-repeat, repeat-x, repeat-y, both) | Integration | | Should change the background positioning settings according to the option chosen (auto, cover, contain) | Integration | | Should change the background's parallax settings according to the parallax settings chosen | Integration | | Should change the background video when a video is chosen in the video tab | Integration | | Should trigger the _onBackgroundRender_ plugin hook when the Background component is rendering | Integration | | Should trigger the _onBackgroundChange_ plugin hook when the background changes in some way | Integration | #### BordersShadow ##### Schema | Schema Type | Name | Type | Description | | ----------- | --------------------------- | ---------- | ------------------------------------------------------- | | prop | ...all of the section props | any | ...all of the section props | | prop | showBorderRadiusGroup | Boolean | Whether or not to show the border radius group | | prop | showShadowGroup | Boolean | Whether or not to show the shadow group | | prop | onChange | () => void | Triggers when the borders or shadows change in some way | ##### Tests | It | Type | | -------------------------------------------------------------------------------------------------------- | ----------- | | Should render the BordersShadow component in the dom | Integration | | Should trigger the onChange() event when the borders or shadows change in some way | Integration | | Should trigger the _onBordersShadowRender_ plugin hook when the BordersShadow component is rendering | Integration | | Should trigger the _onBordersShadowChange_ plugin hook when the borders or shadows change in some way | Integration | | Should not render the border radius group when the showBorderRadiusGroup prop is false | Integration | | Should not render the shadow group of properties when the showShadowGroup prop is false | Integration | | Should change the thickness of the border when the _thickness_ slider changes or +/- buttons are clicked | Integration | | Should change the radius of the border when the _Round_ slider changes or +/- buttons are clicked | Integration | | Should change the border color when the color picker changes to a different color | Integration | | Should change the shadow blur when the _Blur_ slider changes or +/- buttons are clicked | Integration | | Should change the border style to none, solid, or dashed when the appropriate preset is selected | Integration | #### PositionPadding ##### Schema | Schema Type | Name | Type | Description | | ----------- | --------------------------- | ---------- | ------------------------------------------------------ | | prop | ...all of the section props | any | ...all of the section props | | prop | onChange | () => void | Triggers when the position/padding changes in some way | ##### Tests | It | Type | | ------------------------------------------------------------------------------------------------ | ----------- | | Should render the PositionPadding Component in the dom | Integration | | Triggers the onChange() event when the position/padding changes in some way | Integration | | Triggers the _onObjectPreviewRender_ plugin hook when the ObjectPreview component renders | Integration | | Triggers the _onPositionPaddingChange_ plugin hook when the position/padding changes in some way | Integration | #### Typography ##### Schema | Schema Type | Name | Type | Description | | ----------- | --------------------------- | ---------- | --------------------------------------------------------------------------------------------------------------- | | prop | ...all of the section props | any | ...all of the section props | | prop | showFontsGroup | Boolean | Whether or not to show the font selection group | | prop | showColorsGroup | Boolean | Whether or not to show the colorPicker group | | prop | showLineHeightGroup | Boolean | Whether or not to show the lineHeight group | | prop | showTextFormattingGroup | Boolean | Whether or not to show the text formatting group. This includes features like bold, italics, and text alignment | | prop | type | string | prepends the section title | | prop | onChange | () => void | Triggers when the typography settings change in some way | ##### Tests | It | Type | | ------------------------------------------------------------------------------------------------------ | ----------- | | Should render the font selection group when the showFontsGroup prop is true | Integration | | Should show a list of Google fonts to choose from | Integration | | Should render the colorPicker group when the showColorsGroup prop is true | Integration | | Should render the lineHeight group when the showLineHeightGroup prop is true | Integration | | Should render the text formatting group when the showTextFormattingGroup prop is true | Integration | | Should render a title that has the type prop as one of the words in the title | Integration | | Triggers the onChange() event when the typography settings change in some way | Integration | | Should change the font family of the component to the font family selected (if no text is selected) | Integration | | Should change the font family of the selected text inside the component to the font family selected | Integration | | Should change the size of the font in the component to the size selected (if no text is selected) | Integration | | Should change the size of the font of the selected text inside the component to the font size selected | Integration | | Triggers the _onTypographyRender_ plugin hook when the Typography component is rendering | Integration | | Triggers the _onTypographyChange_ plugin hook when the typography settings change in some way | Integration | #### WidthHeight ##### Schema | Schema Type | Name | Type | Description | | ----------- | --------------------------- | ---------- | ----------------------------------------------------- | | prop | ...all of the section props | any | ...all of the section props | | prop | showWidthGroup | Boolean | Whether or not to show the Width properties | | prop | showHeightGroup | Boolean | Whether or not to show the Height properties | | prop | onChange | () => void | Triggers when the width or height changes in some way | ##### Tests | It | Type | | ------------------------------------------------------------------------------------------- | ----------- | | Triggers the onChange() event when the width or height changes in some way | Integration | | Triggers the _onWidthHeightRender_ plugin hook when the WidthHeight component renders | Integration | | Triggers the _onWidthHeightChange_ plugin hook when the width or height changes in some way | Integration | | Should not render the Width component when the showWidthGroup prop is false | Integration | | Should not render the Height component when the showHeightGroup prop is false | Integration | #### ObjectPreview ##### Schema | Schema Type | Name | Type | Description | | ----------- | --------------------------- | --------------- | ------------------------------------------------------------------ | | prop | ...all of the section props | any | ...all of the section props | | prop | children | React.ReactNode | ... | | prop | color | string | This is a way to set the background color of the preview view port | ##### Tests | It | Type | | --------------------------------------------------------------------------------------------------- | ----------- | | Should render in the dom | Integration | | Should render a child component if one is provided | Integration | | Should zoom out or in the child component in such a way that it fits the container with no overlaps | Integration | | Should have a backgroundColor that matches the color prop | Integration | | Triggers the _onObjectPreviewRender_ plugin hook when the ObjectPreview component renders | Integration | #### ObjectPresets ##### Schema | Schema Type | Name | Type | Description | | ----------- | --------------------------- | ------- | ---------------------------------------- | | prop | ...all of the section props | any | ...all of the section props | | prop | presets | any[] | An array of presets to show the user | | prop | component | element | The component to show inside each preset | ##### Tests N/A #### Preset ##### Schema | Schema Type | Name | Type | Description | | ----------- | --------------------------- | ------- | ---------------------------------- | | prop | ...all of the section props | any | ...all of the section props | | prop | children | element | | | prop | onChange | element | Triggers when a preset is selected | ##### Tests | It | Type | | ------------------------------------------------------------------------------------------------------------------------------- | ----------- | | Should render in the dom | Integration | | Should show an array of components in the dom. The number should match the length of the presets array prop | Integration | | Should show the same component (the one provided in the props) as a child of each component | Integration | | Triggers the onChange() event when a preset is selected | Integration | | Should change the selected editor item's properties according to the setting of the preset clicked | Integration | | Triggers the _onObjectPresetsList_ plugin hook when the list is being established, so plugins can modify this list if necessary | Integration | | Triggers the _onObjectPresetsChange_ plugin hook when a preset is selected | Integration | | Triggers the _onObjectPresetsRender_ plugin hook when the ObjectPresets component is rendered | Integration | #### UploadGroup ##### Schema | Schema Type | Name | Type | Description | | ----------- | --------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------- | | prop | ...all of the section props | any | ...all of the section props | | prop | (DropZone props) | Boolean | (DropZone props) | | prop | showURLPicker | Boolean | Whether or not to show the dropzone with upload and url selection buttons or just the dropzone alone | | prop | text | string | This is the label for the upload button. Used to inform the user what it's uploading (e.g. [UPLOAD VIDEO] if text=[video]) | | prop | style | object | The style to apply to the container just inside the
object | | prop | url | string | The current url that is being used for the object (e.g. an image or video). | | prop | onChange | () => void | 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 | Type | | ----------------------------------------------------------------------------------------------------------------------- | ----------- | | Should render in the dom | Integration | | Should be able to drag a file to the component and trigger an upload | Integration | | Should be able to select a file from my computer | Integration | | Should be able to enter a custom url for the file I want to use instead of uploading | Integration | | Should not show any url selection buttons if the showURLPicker prop is false | Integration | | Should show a preview of the uploaded file (if an image) immediately after uploading | Integration | | Should have the text prop as part of the section label | Integration | | Should set the style using the style prop instead of the default style if one is provided | Integration | | The url (prop) should be updated and the editor item should have the url in its settings after the upload has completed | Integration | | Should show a progress loader while the upload is occuring | Integration | | Triggers the onChange() event after the upload occurs | Integration | | Triggers the _onUploadGroupChange_ plugin hook when the upload occurs | Integration | | Triggers the _onUploadGroupRender_ plugin hook when the UploadGroup component is rendering | Integration | #### BehaviorsAndActions ##### Schema | Schema Type | Name | Type | Description | | ----------- | --------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------- | | prop | ...all of the section props | any | ...all of the section props | | prop | label | string | The caption to apply to the section group. (will also apply the caption to each interaction fieldset group as the title and legend) | | prop | (filter) | string | only show a subset of the behaviors | | prop | onUpdate | () => any | Triggers when an interaction setting has changed | ##### Tests | It | Type | | ------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | Should render the component in the dom | Integration | | Should render an component for each behavior associated with this item | Integration | | Should be able to add new behaviors to the list so that multiple behaviors can be tracked | Integration | | Should be able to delete any behavior and have it be removed from the list of behaviors to track | Integration | | Should be able to add multiple actions to any of my tracked behaviors | Integration | | Should be able to delete any 's that show and have it be removed from the list of actions to perform | Integration | | Should show the text found in the label prop as the title for the section (and each action's fieldset group) | Integration | | Should only show a subset of behaviors based on the filter given in the filter prop (e.g. only show button behaviors, etc.) | Integration | | The actions property of the editor item's setting object should update to reflect the changes set when the onUpdate() event has been called | Integration | | Should trigger the onUpdate() event when an interaction setting has changed | Integration | | Should trigger the [onInteractionUpdate] plugin hook when an interaction setting has changed | Integration | | Should trigger the [onInteractionsRender] plugin hook when the Interactions component is being rendered | Integration | #### BehaviorSelector ##### Schema | Name | Type | Description | | ---------------- | ---------- | ----------------------------------------------------------------- | | filter | string | Only behaviors that match this filter are available for selecting | | label | string | The label to use in the title/caption of the BehaviorSelector | | behavior | object | The specific properties of this behavior | | onSetBehavior | () => void | Triggers when a behavior is to be set for the object | | onDeleteBehavior | () => void | Triggers when a behavior is to be deleted from the stack | ##### Tests | It | Type | | --------------------------------------------------------------------------------------------------------------- | ----------- | | Should render the component in the dom | Integration | | Should only show behaviors that match the filter provided in the filter prop | Integration | | Should show the title of the behavior as indicated by the label prop | Integration | | Should update the settings with the new behavior object once it has been set or updated | Integration | | Should render a relevant after the initial behavior is selected | Integration | | Should trigger the onSetBehavior() event when a behavior is to be set for the object | Integration | | Should trigger the onDeleteBehavior() event when a behavior is to be deleted from the stack | Integration | | Should trigger the _onBehaviorSelectorMenuList_ plugin hook when the menu list of behaviors are being listed | Integration | | Should trigger the _onBehaviorSelectorRender_ plugin hook when the BehaviorSelector component is being rendered | Integration | | Should trigger the _onDeleteBehavior_ plugin hook when a behavior is to be deleted from the stack | Integration | #### BehaviorSubSelector ##### Schema | Name | Type | Description | | ------------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | | type | enum | the constant used to determine which SubSelector component to show. e.g. CLICKS, WATCHES_VIDEO, PAUSES_VIDEO, DOUBLE_CLICK, NONE, APPLIES_TAG, etc. | | behavior | object | The specific properites of this behavior | | onSetBehavior | () => void | Triggers when a behavior is to be set for the editor item | ##### Tests | It | Type | | ---------------------------------------------------------------------------------------------- | ----------- | | Should render in the dom | Integration | | Should have an option to bypass picking a subselector (e.g. subselector type is _NONE_) | Integration | | Should render the appropriate sub selector component based on the chosen _type_ in the props | Integration | | Should update the behavior object's properties once the sub selector information is set | Integration | | Should trigger the onSetBehavior() event when a behavior is to be set for the editor item | Integration | | Should show once the sub selector is chosen | Integration | | Should be able to add multiple 's once a sub selector has been selected | Integration | | Should be able to delete any of the 's | Integration | | Should trigger the _onSetBehavior_ plugin hook when a behavior is to be set for an editor item | Integration | | Should trigger the onSubSelectionRender({type}) plugin hook | Integration | #### ActionSelector ##### Schema | Schema Type | Name | Type | Description | | ----------- | -------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------- | | prop | behavior | string | The name of the specific behavior that has to occur (e.g. _click_, _mouseEnter_, etc) before the selected action is triggered | | prop | (filter) | string | Only actions that match this filter are available for selecting | | prop | label | string | The label to use in the title/caption of the ActionSelector | | prop | action | object | The specific properties of this action | | prop | myKey | Number | The index of this particular action if there are multiple actions to be triggered | | prop | onSetAction | () => void | Triggers when an action is to be set for the object | | prop | onDeleteAction | () => void | Triggers when an action is to be deleted from the stack | ##### Tests | It | Type | | ----------------------------------------------------------------------------------------------------------- | ----------- | | Should render the component in the dom | Integration | | Should only show actions that match the filter provided in the filter prop | Integration | | Should show the title of the action as indicated by the label prop | Integration | | Should update the settings with the new action object once it has been set or updated | Integration | | Should render a relevant after the initial action is selected | Integration | | Should trigger the onSetAction() event when a action is to be set for the object | Integration | | Should trigger the onDeleteAction() event when a action is to be deleted from the stack | Integration | | Should trigger the _onActionSelectorMenuList_ plugin hook when the menu list of actions are being listed | Integration | | Should trigger the _onActionSelectorRender_ plugin hook when the ActionSelector component is being rendered | Integration | | Should trigger the _onDeleteAction_ plugin hook when a action is to be deleted from the stack | Integration | #### ActionSubSelector ##### Schema | Name | Type | Description | | ----------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | type | enum | 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 | | action | object | The specific properties of this action | | myKey | Number | The index of this particular action if there are multiple actions to be triggered | | onSetAction | () => void | Triggers when an action is to be set for the object | ##### Tests | It | Type | | -------------------------------------------------------------------------------------------- | ----------- | | Should render in the dom | Integration | | Should have an option to bypass picking a subselector (e.g. subselector type is _NONE_) | Integration | | Should render the appropriate sub selector component based on the chosen _type_ in the props | Integration | | Should update the action object's properties once the sub selector information is set | Integration | | Should trigger the onSetAction() event when a action is to be set for the editor item | Integration | | Should trigger the _onSetAction_ plugin hook when an action is to be set for an editor item | Integration | | Should trigger the onSubSelectionRender({type}) plugin hook | Integration | #### PopupOptions ##### Schema | Name | Type | Description | Schema Type | | ----------------- | ---------- | --------------------------------------------------------------------------------------- | ----------- | | action | string | The current action settings for this specific interaction | prop | | onChange | () => void | Triggers when the popup settings have been set | prop | | setPopup | () => void | Sets the selected popup window as the popup window to show when the action is triggered | method | | createPopupWindow | () => void | Creates a new popup window on the page | method | | showSelectedPopup | () => void | Shows the selected popup window on the page | method | ##### Tests | It | Type | | ---------------------------------------------------------------------------------------------------------------- | ----------- | | Should render the component in the dom | Integration | | Should show the list of existing popup windows in the dropdown menu to select from | Integration | | Should show the chosen popup window in the dropdown menu if one was previously chosen | Integration | | Should let the user create a new popup window | Integration | | Should trigger the onChange() event when the popup settings have been set | Integration | | Should update the action settings with the correct popup action information once the popup settings change | Integration | | Should trigger the onSubSelectionRender([PopupOptions]) plugin hook when the PopupOptions component is rendering | Integration | #### GoToUrl ##### Schema | Name | Type | Description | Schema Type | | -------- | ---------- | --------------------------------------------------------- | ----------- | | action | string | The current action settings for this specific interaction | prop | | onChange | () => void | Triggers when the GoToUrl settings have been set | prop | ##### Tests | It | Type | | ----------------------------------------------------------------------------------------------------------- | ----------- | | Should render the component in the dom | Integration | | Should trigger the onSubSelectionRender([GoToUrl]) plugin hook when the GoToUrl component is rendering | Integration | | Should trigger the onChange() event when the GoToUrl settings have been set | Integration | | Should update the action settings with the url redirect action information once the GoToUrl settings change | Integration | #### SubmitForm ##### Schema N/A ##### Tests | It | Type | | --------------------------------------------------------------------------------------------------------- | ----------- | | Should render the component in the dom | Integration | | Should trigger the onSubSelectionRender([SubmitForm]) plugin hook when the GoToUrl component is rendering | Integration | | Should open the campaign settings window when the rendered link is clicked | Integration | #### TriggerPurchase ##### Schema N/A ##### Tests | It | Type | | ---------------------------------------------------------------------------------------------------------------------- | ----------- | | Should render the component in the dom | Integration | | Should trigger the onSubSelectionRender([TriggerPurchase]) plugin hook when the TriggerPurchase component is rendering | Integration | | Should open the payment settings window when the rendered link is clicked | Integration | #### TriggerUpsell ##### Schema N/A ##### Tests | It | Type | | ------------------------------------------------------------------------------------------------------------------ | ----------- | | Should render the component in the dom | Integration | | Should trigger the onSubSelectionRender([TriggerUpsell]) plugin hook when the TriggerUpsell component is rendering | Integration | | Should open the payment settings window if the rendered link is clicked | Integration | #### ShowHide ##### Schema N/A ##### Tests | It | Type | | ------------------------------------------------------------------------------------------------------------------ | ----------- | | Should render the component in the dom | Integration | | Should show a list of page items that the user can choose to [show] as part of this action | Integration | | Should show a list of page items that the user can choose to [hide] as part of this action | Integration | | Should update the action settings with the id of the components to show and hide once the ShowHide settings change | Integration | | Should trigger the onSubSelectionRender([ShowHide]) plugin hook when the ShowHide component is rendering | Integration | | Should trigger the onChange() event when the ShowHide settings have been set | Integration | #### CreateTag ##### Schema N/A ##### Tests | It | Type | | ---------------------------------------------------------------------------------------------------------------------------- | ----------- | | Should render the component in the dom | Integration | | Should trigger the onSubSelectionRender([CreateTag]) plugin hook when the CreateTag component is rendering | Integration | | Should trigger the onChange() event when the CreateTag settings have been set | Integration | | Should update the action settings with the name of the tag, and optional value of the tag once the CreateTag settings change | Integration | ### Database Schema ### Store/Reducers ### APIs/Hook Schema