--- 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: []