FunnelBuilder*
FunnelBuilder*
  Description
    A flexible module for quickly building a simple funnel
    It provides a collection of commonly used components for funnel building (such as campaign settings, campaign-wide domains/branding, web site editing, campaign tracking, a funnel pipeline builder, etc.)
    ...including a container that wraps them all into a convenient group of tabs so users can build their funnel through a quick funnel building wizard
  Screens/States
    Full Funnel Builder
  User stories
    As a user I want a way to quickly, step-by-step build a funnel without the burden of a drag/drop funnel builder experience
    As a developer I would like to quickly configure a group of pre-existing or custom components as the list of "steps" to walk the user through when building a funnel
    As a developer I would like to hook into the changes made to these "steps" and be able to handle them in ways that I choose. In other words, I don't want to rely on the components themselves for data handling
  Pre-built Components
    <CampaignSettings />
      Description
        A module for setting campaign-wide settings
        Such as entering a name, Connect/Create a domain, Set campaign wide branding, Choose a campaign wide theme, Set up campaign tracking, Campaign Visibility and Scheduling
        Can arrange the screen into a collection of "questions" where the answers given contribute to the campaign wide settings
        The main (this) component will be notified when answers are given to the questions
        Questions typically are asked directly within the component or launch a screen with the relevant component
      User Stories
        As a user I would like a screen that provides me a simple/concise overview of the different settings I can apply to my campaign
        As a developer I want the option to show those steps/questions in one long page (with buttons linking to bigger questions) of sections or separated into tabs
        As a developer I want the flexibility to show either the questions themselves or the actual wizard
        As a developer I would like to hook into the answers given to these "questions" and be able to handle them in ways that I choose. In other words, I don't want to rely on the components themselves for main data handling (unless it's specifically unique to the component and not the campaign-wide settings)
      Question Components
        <CampaignNameSection />
          Description
            A section where a name for the campaign is asked
          User Stories
            As a user I would like to enter a name for my campaign
          Props
            data:object
              The campaign settings
          Events
            onChange()
              Triggers when the data in this component changes
          Hooks
            onComponentRender()
              CampaignNameSection
                Triggers when the component renders
            onEventTrigger()
              CampaignNameChange
                Triggers when the name changes
          Tests
            Rendering
              Should render the component in the dom
              Should show the existing name in the campaign name field from the data object prop
            Events
              Triggers the onChange() event when the data in this component changes
            Hooks
              Triggers the onComponentRender("CampaignNameSection") plugin hook when the component renders
              Triggers the onEventTriggers("CampaignNameChange") plugin hook when the name changes
        <SetBrandingSection />
          Description
            Prebuilt section for opening the <Branding /> section (e.g. in a popup window or inline)
          User Stories
            As a user I would like a way to access the brand building tools
          Props
            data:object
              The campaign settings
          Events
            onChange()
              Triggers when the data in this component changes
          Tests
            Rendering
              Should render the component in the dom
            Events
              Should trigger the onChange() event when the data in this component changes
        <SetCampaignThemeSection />
          Description
            A section for opening the <CampaignTheme /> component
            Just some instructional text and a button
          User Stories
            As a user I would like a way to access the campaign theme building tools
          Props
            data:object
              The campaign settings
          Events
            onChange()
              Triggers when the data in this component changes
          Tests
            Rendering
              Should render the component in the dom
            Events
              Should trigger the onChange() event when the data in this component changes
        <SetCampaignTrackingSection />
          Description
            A section for opening the <CampaignTracking /> component
            Instructional text and a button
          User Stories
            As a user I would like a way to place a tracking script in every page that is in my campaign
          Props
            data:object
              The campaign settings
            showAsButton:bool
            showActualComponent:bool
            trackingComponent:element
          Events
            onChange()
              Triggers when the data in this component changes
          Tests
            Rendering
              Should render the component in the dom
              Should render the "launch" version when the showAsButton prop is true
              Should show the <CampaignTracking /> component when the showActualComponent prop is true
              Should show the component in the trackingComponent prop instead of the default one when one exists
            Events
              Should trigger the onChange() event when the data in this component changes
        <CampaignVisibilitySection />
          Description
            Shows the <VisibilitySection /> component from the <FunnelBuilder /> component
          User Stories
            As a user I would like to establish whether my campaign is live or in draft mode
          Props
            data:object
              All of the campaign settings
          Events
            onChange()
              Triggers when the campaign settings change
          Hooks
            onComponentRender()
              CampaignVisibility
                Triggers when the component renders in the dom
          Tests
            Rendering
              Should render in the dom
            Events
              Should trigger the onChange() event when the campaign settings are to be changed
            Hooks
              Should trigger the onComponentRender("CampaignVisibility") plugin hook when the component renders in the dom
        <PrintThisFunnel />
          Description
            Renders a button that when clicked will open a window for printing the funnel
          User Stories
            As a user, I would like the option to print my funnel
          Props
            data:object
              The campaign settings
            printFunnelComponent:element
              The component to use instead of the default component for printing the funnel
          Hooks
            onComponentRender()
              PrintThisFunnel
                Triggers when the component renders in the dom
          Tests
            Rendering
              Should render the component in the dom
              Should render the component provided in the printFunnelComponent prop instead of the default component if one is provided
            Hooks
              Should trigger the onComponentRender("PrintThisFunnel") plugin hook when the component renders in the dom
        <SetCampaign404Page />
          Description
            A way to choose which page in the funnel should be the 404 page of the domain name
            Overrides if you've set this in a different place
          User Stories
            As a user, I would like to quickly establish which page of my campaign is the 404 page
          Props
            data:object
              The campaign settings
          Events
            onChange()
              Triggers when the data in this component changes
          Hooks
            onComponentRender()
              SetCampaign404Page
                Triggers when the component renders in the dom
          Tests
            Rendering
              Should render in the dom
              Should show a list of pages in a dropdown menu (the number of pages should match the number of pages in the campaign settings)
            Events
              Should trigger the onChange() event when the campaign settings are to be changed
            Hooks
              Should trigger the onComponentRender("SetCampaign404Page") plugin hook when the component renders in the dom
        <SetCampaignHomePage />
          Description
            A way to choose which page in the funnel should be the Home page of the domain name
            Overrides if you've set this in a different place
          User Stories
            As a user, I would like to quickly establish which page of my campaign is the start (home) page
          Props
            data:object
              The campaign settings
          Events
            onChange()
              Triggers when the data in this component changes
          Hooks
            onComponentRender()
              SetCampaignHomePage
                Triggers when the component renders in the dom
          Tests
            Rendering
              Should render in the dom
              Should show a list of pages in a dropdown menu (the number of pages should match the number of pages in the campaign settings)
            Events
              Should trigger the onChange() event when the campaign settings are to be changed
            Hooks
              Should trigger the onComponentRender("SetCampaignHomePage") plugin hook when the component renders in the dom
      Props
        data:object
          The campaign settings
        sections:array
          The list of sections to show
          { id, component, settings }
        showAsAPage:bool
          Whether or not to show the sections as a long page
        showAsTabs:bool
          Whether or not to show the sections as tabs
      Events
        onChange()
          Triggers when any of the page settings changes
      Hooks
        onComponentRender()
          CampaignSettings
            Triggers when the component is rendered
        onListItems()
          CampaignSettingsSections
            Triggers when the list of sections are being generated
        onEventTrigger()
          CampaignSettingsChange
            Triggers when the campaign settings change
      Tests
        Rendering
          Renders the component in the dom
          Should show a list of sections (amount should match the number of items in the section prop list)
          Should show all of the sections on a single page if the showAsPage prop is true
          Show show the sections as tabs if the showAsTabs prop is true
        Events
          Triggers the onChange() event when any of the page settings change
        Hooks
          Triggers the onComponentRender("CampaignSettings") plugin hook when the component is rendered
          Triggers the onListItems("CampaignSettingsSections") plugin hook when the list of sections are being generated
          Triggers the onEventTrigger("CampaignSettingsChange") plugin hook when the campaign settings change
    <Branding />
      Description
        A section for choosing or creating a branding profile to use for this campaign
        (e.g. color scheme, logo, business name, business category, other meta data about the business or campaign)
        Funnel is updated immediately as this info is set, meaning, if I trying out a color scheme, it is immediately reflected across every visible page
      User Stories
        As a user I want to maintain various branding profiles to use throughout my campaigns
        As a user I would like the campaigns I build to leverage my branding profile information so that the funnel building experience is quicker
        As a user I would like to re-use previous branding profiles I have built
        As a user I would like to provide things like my color scheme, my logo, business name, font family, category, address, saved blocks, components, symbols, & user templates, etc.
      Components
        ProfileBuilder
          Description
            A tool for building a new profile
            Asks from a list of pre-built questions to build the profile, which is saved/updated in parent container
          Props
            data:array
              The list of sections to show for building the profile
              { id, component, settings }
          Events
            onChange()
              Triggers when a question is answered
          Hooks
            onComponentRender()
              ProfileBuilder
                Triggers when the component renders
            onListItems()
              ProfileBuilderList
                Triggers when the list of questions are being generated
            onEventAction()
              ProfileChange
                Triggers when a profile question is answered
          Tests
            Should render in the dom
            Should show a list of questions (amount should match the number of items in the data prop list)
            Should trigger the onChange() event when a question is answered
            Should trigger the onComponentRender("ProfileBuilder") plugin hook when the component renders
            Should trigger the onListItems("ProfileBuilderList") when the list of questions are being generated
            Should trigger the onEventAction("ProfileChange") plugin hook when a profile question is answered
        Logo
          Description
            A quick way to add a logo
          Props
            data:object
              The data to use for the logo
          Events
            onChange()
              Triggers when the logo changes
          Tests
            Should render in the dom
            Should show the logo provided in the data prop
            Should trigger the onChange() event when the logo changes
        ColorScheme
          Description
            A quick way to select/build a color scheme
          Props
            data:array
              The available color schemes
              { id, colorList:arrayOfObjects, isSelected }
            canCreateSchemes:bool
              Whether or not the user can create new color schemes
            canDeleteSchemes:bool
              Whether or not the user can delete existing color schemes
          Events
            onChange()
              Triggers when a color scheme is chosen
            onCreateColorScheme()
              Triggers when the user creates a new color scheme
            onDeleteColorScheme()
              Triggers when the user deletes an existing color scheme
          Tests
            Should render in the dom
            Should show the list of color schemes provided in the data prop
            Should show the chosen color scheme as selected
            Should not show any options for creating schemes when the canCreateSchemes prop is false
            Should not show any options for deleting schemes when the canDeleteSchemes prop is false
            Should trigger the onChange() event when the color scheme changes
            Should trigger the onCreateColorScheme() event when the user creates a new color scheme
            Should trigger the onDeleteColorScheme() event when the user deletes an existing color scheme
        BusinessInfo
          Description
            A quick way to collect business information
          Props
            data:object
              The business information for the profile
          Events
            onChange()
              Triggers when information about the business changes
          Tests
            Should render in the dom
            Should show the business information provided in the data prop in the available fields
            Should trigger the onChange() event when the business information changes
        SavedItems
          Description
            A quick way to select from the library of saved components, blocks, symbols, and user templates
            Shows a list of saved items, which can be "selected" for use within this profile
            There will be hooks in the web page builder so that when an item (a block, template, component) is saved it can be associated with this branding profile
          Props
            data:array
              The list of all saved items, separated by category
              { id, category, elementId, ... }
          Events
            onChange()
              Triggers when something changes about the saved items (they add to the profile, etc.)
          Tests
            Should render in the dom
            Should render a new item for each item found in the data prop (number of items rendered should match)
            Should allow the user to select items that should be associated with this branding profile
            Should trigger the onChange() event when something changes about the saved items (they add to the profile, etc.)
        ThemeSelector
          Description
            A quick way to choose the default theme to use with this brand
          Props
            availableThemes:array
              The list of themes that are available for selection
            data:object
              The chosen theme
          Events
            onChange()
              Triggers when a theme selection is made
          Tests
            Should render in the dom
            Should show the list of available themes provided in the available themes prop (number of items should match)
            Should highlight the selected theme in some way
            Should trigger the onChange() event when a theme selection is made
      Props
        availableProfiles:array
          A list of available branding profiles
        data:object
          The current branding profile
      Events
        onChange()
          Triggers when the branding profile changes
      Hooks
        onComponentRender()
          Branding
            Triggers when the component renders in the dom
        onListItems()
          BrandingProfiles
            Triggers when the list of branding profiles are being generated
        onEventTrigger()
          BrandingProfileChange
            Triggers when a branding profile changes
      Tests
        Rendering
          Should render in the dom
          Should render the same number of branding profiles in the dom as the number of items in the availableProfiles prop array
          Should show details about the current branding profile in the dom
        Events
          Should trigger the onChange() event when the branding profile chagnes
        Hooks
          Should trigger the onComponentRender("Branding") plugin hook when the component renders in the dom
          Should trigger the onListItems("BrandingProfiles") when the list of branding profiles are being generated
          Should trigger the onEventTrigger("BrandingProfileChange") plugin hook when a branding profile changes
    <VisibilitySection />
      Description
        Prebuilt section for capturing what the publish status should be for that page or cmapaign.
        Useful for if someone wants to un-publish a page or campaign
      Props
        data:object
          All of the page or campaign settings
      Events
        onChange()
          Triggers when the page or campaign settings are to be changed
      Hooks
        onComponentRender()
          VisibilitySection
            Triggers when the component renders in the dom
      Tests
        Rendering
          Should render in the dom
        Events
          Should trigger the onChange() event when the page or campaign settings are to be changed
        Hooks
          Should trigger the onComponentRender("VisibilitySection") plugin hook when the component renders in the dom
    <ThemeSelector />
      Description
        A section for picking a theme (not a template).
        Then, each page will inherit the template associated with the page type and the chosen theme by default (can obviously be overwritten)
      User Stories
        As a user I would like to choose a "theme" for my campaign so that I don't have to pick a template for each and every page
        As a user I would like to be able to preview the various pages that are a part of the theme I am choosing
        As a user, if no theme is set, the first template I choose for a page will set the theme
        As a user I should be able to overwrite any of the template choices my theme makes
      Props
        tabs:array
          An optional list of tabs to show and what they do when activated
          { id, caption, isActive, filter, component }
        showTabs:bool
          Whether or not to show the tab strip
        title:string
          The title/caption to show at the top of the theme selector
        filter:object
          The initial filter to use against the incoming list of templates
        templates:array
          The incoming list of templates
          { id, description, theme, image, component, name, page, type, isHighlighted }
        thumbnailWrapperComponent:element
          The component to use (instead of the default) as the parent component for each thumbnail
        thumbnailComponent:element
          The component to use instead of the default thumbnail component
        templateWrapper:element
          The component to use (instead of the default) as the parent component for the theme selection window
          (for overwriting the traditional grid/column style)
        previewComponent:element
          The component to use (instead of the default) as the component for showing previews
        filterComponent:element
          The component to use (instead of the default) as the component for handling filters
      Components
        <ThemeItem />
          description
            The specific theme item that can be selected
          props
            name:string
              The name to use for the template item
            description:string
              The description of the template item
            themeId:string
              The themeId in the database associated with this theme
            mode:enum
              The current mode that the theme item is in. States will often toggle when hovered on/off (e.g. preview mode vs take action mode)
              enum(NORMAL, ACTIVE)
            image:string
              The image to use for this theme
            component:element
              The component to use (instead of an image) for this template
          events
            onSelect()
              Triggered when the user selects the theme
            onPreview()
              Triggers when the user tries to preview the theme
          tests
            Rendering
              Should render in the dom
              Should render a name in the dom when one is provided in the props
              Should render a description in the dom when one is provided in the props
              Should render the component in its "normal" mode when the mode prop is set to "NORMAL"
              Should render the component in its "ACTIVE" mode when the mode prop is set to "ACTIVE"
              Should render the provided image in the image prop when one is provided
              Should render the provided component in the component prop when one is provided
            Events
              Should trigger the onSelect() event when the user selects the theme
              Should trigger the onPreview() event when the user tries to preview the theme
        <PreviewTheme />
          description
            The window that appears when the user wants to preview the theme details in a larger screen
            Shows details about the theme, such as large previews of all the templates/etc. that are a part of the theme (think ui8.net / dribbble.com / behance.com)
          props
            ...the same theme item props
            title:string
              The title of the theme
            description:string
              A simple description about the theme
            thumbnails:array
              The list of thumbnails to show that are a part of this theme
            thumbnailComponent:element
              The component to use instead of the default component for each thumbnail item
            themeInformation:object
              A larger body of text/content that further explains information about the theme
              { content, component, }
            themeInformationIsVisible:bool
              Whether or not to show the theme information section
          events
            onClose()
              Triggers when the preview window is to be closed
            onSelect()
              Triggers when the user decides to select this theme
          tests
            Rendering
              Should render in the dom
              Should s how a list of thumbnails that reflect the same number of thumbnails in the thumbnail array prop
              Should render the theme information passed in the themeInformation prop
              Should not render the theme information if the themeInformationIsVisible prop is false
            Events
              Triggers the onClose() event when the preview window is to be closed
              Should trigger the onSelect() event if the user clicks something indicating that they want to use this theme
        <FilterComponent />
          description
            The default window used to filter the list of themes that are showing
            (default method is tabs and a couple dropdowns)
          props
            themes:array
              The incoming list of themes
            filter:object
              The active filter conditions being applied right now
          events
            onFilterChange()
              Triggers when the filter conditions change and the new filter is to be applied
          tests
            Rendering
              Should render in the dom
              Should show the filter conditions in the dom reflected by the properties found in the filter prop
            Events
              Should trigger the onFilterChange() event when the filter conditions change and the new filter is to be applied
      Events
        onItemSelect()
          Triggers when a theme item is selected
        onItemClick()
          Triggers when a theme item is clicked
        onDoubleClick()
          Triggers when a theme item is double clicked
        onItemMouseEnter()
          Triggers when the mouse enters a theme item
        onItemMouseLeave()
          Triggers when the leaves a theme item
        onFilterUpdate()
          Triggers when a theme's filter settings change
        onShowPreview()
          Triggers when a theme item is to be previewed
      Methods
        previewTheme()
          Opens the theme preview window
      Hooks
        onComponentRender()
          ThemeSelector
            Triggers the plugin hook when the component renders in the dom
          ThumbnailComponent
            Triggers the plugin hook when the component renders in the dom
          ThemeWrapper
            Triggers the plugin hook when the component renders in the dom
          ThemeSelectorPreviewComponent
            Triggers the plugin hook when the component renders in the dom
        onListItems()
          ThemeSelectorTabs
            Trigger the plugin hook when theme selector tabs are being listed
          Templates
            Trigger the plugin hook when theme are being listed
        onEventTrigger()
          ThemeItemSelect
            Triggers the plugin event hook when a theme item is selected
          ThemeItemClick
            Triggers the plugin event hook when a theme item is clicked
          ThemeDoubleClick
            Triggers the plugin event hook when a theme item is double clicked
          ThemeItemMouseEnter
            Triggers the plugin event hook when the mouse enters a theme item
          ThemeItemMouseLeave
            Triggers the plugin event hook when the leaves a theme item
          ThemeItemDelete
            Triggers the plugin event hook when a theme item is to be deleted
          ThemeFilterUpdate
            Triggers the plugin event hook when a theme's filter settings change
          ShowThemePreview
            Triggers the plugin event hook when a theme item is to be previewed
      Tests
        Rendering
          Should render in the dom
          Should render the same number of tabs in the dom as the number of items in the tabs array
          Should not show any tab strip when the showTabs prop is false
          Should render a title/caption in the dom when one is provided in the title prop
          Should render the same number of themes in the dom as the number of items in the themes array
          Should apply the filter found in the filter prop to the themes array and thus render the same number of themes found after the filter is applied
          Should render the component found in the thumbnailWrapperComponent prop (instead of the default) as the parent component for each thumbnail when one is provided
          Should render the component found in the thumbnailComponent prop instead of the default thumbnail component when one is provided
          Should render the component found in the themeWrapper prop (instead of the default) as the parent component for the theme selection window when one is provided
          Should render the component found in the previewComponent prop (instead of the default) as the component for showing previews when one is provided
          Should render the component found in the filterComponent prop (instead of the default) as the component for handling filters when one is provided
        Events
          Triggers the onItemSelect() event when a theme item is selected
          Triggers the onItemClick() event when a theme item is clicked
          Triggers the onDoubleClick() event when a theme item is double clicked
          Triggers the onItemMouseEnter() event when the mouse enters a theme item
          Triggers the onItemMouseLeave() event when the mouse leaves a theme item
          Triggers the onItemDelete() event when a theme item is to be deleted
          Triggers the onFilterUpdate() event when a theme's filter settings change
          Triggers the onShowPreview() event when a theme item is to be previewed
        Methods
          Should open a preview screen when the previewTheme method is called
        Hooks
          Should trigger the onComponentRender("ThemeSelector") plugin hook when the component renders in the dom
          Should trigger the onComponentRender("ThumbnailComponent") plugin hook when the component renders in the dom
          Should trigger the onComponentRender("ThemeWrapper") plugin hook when the component renders in the dom
          Should trigger the onComponentRender("PreviewComponent") plugin hook when the component renders in the dom
          Should trigger the onListItems("ThemeSelectorTabs") plugin hook when theme selector tabs are being listed
          Should trigger the onListItems("Themes") plugin hook when themes are being listed
          Should trigger the onEventTrigger("ThemeItemSelect") plugin event hook when a theme item is selected
          Should trigger the onEventTrigger("ThemeItemClick") plugin event hook when a theme item is clicked
          Should trigger the onEventTrigger("ThemeDoubleClick") plugin event hook when a theme item is double clicked
          Should trigger the onEventTrigger("ThemeItemMouseEnter") plugin event hook when the mouse enters a theme item
          Should trigger the onEventTrigger("ThemeItemMouseLeave") plugin event hook when the leaves a theme item
          Should trigger the onEventTrigger("ThemeItemDelete") plugin event hook when a theme item is to be deleted
          Should trigger the onEventTrigger("ThemeFilterUpdate") plugin event hook when a theme's filter settings change
          Should trigger the onEventTrigger("ShowThemePreview") plugin event hook when a theme item is to be previewed
    <DomainSettings />
      Description
        A section for connecting or adding a domain name
        In the form of an easy to follow wizard
        Links out to different kb articles depending on the information given (e.g. namecheap should point to a namecheap article)
      User Stories
        As a user, I want to publish my web pages to a custom domain name
        As a user I would like to be able to configure my domain and subdomain settings from a simple, easy to use wizard
        As a user I would like to see videos (or links to videos/articles) that help me connect to the different domain names depending on the registrar chosen
      Components
        ChooseOne
          Description
            A wizard step asking you to choose from your existing domains
          Props
            domainNames:array
              The list of existing domain names
              { id, name, verified, ssl }
            message:string
              The main message to show (overrides the default)
          Events
            onChange()
              Triggers when the domainName information changes
            onNextStep()
              Triggers when the next step is to be shown
          Tests
            Rendering
              Should render in the dom
              Should render a list of domain names. The number of names should match the number of items in the domainNames array
              Should show the provided message in the dom
            Events
              Should trigger the onChange() event when the domainName information changes
              Should trigger the onNextStep() event when the next step is to be shown
        AddOne
          Description
            A wizard step for adding a new domain name
          Props
            message:string
              The main message to show (overrides the default)
          Events
            onChange()
              Triggers when the domainName information changes
            onKeyUp()
              Triggers when the user enters a key in the text field
            onBlur()
              Triggers when the user leaves the text field
            onNextStep()
              Triggers when the next step is to be shown
          Methods
            extractHostname()
              removes the domain protocol (https://) so that just the host name is returned
            getRootDomain()
              Strips everything out (including the subdomain) just so that we're left with the root domain
            validateDomain()
              Verifies that the domain entered is in the desired format
          Tests
            Rendering
              Should render in the dom
              Should show the provided message in the dom
            Events
              Should trigger the onChange() event when the domainName information changes
              Should trigger the onKeyUp() event when the user enters a key in the text field
              Should trigger the onBlur() event when the user leaves the text field
              Should trigger the onNextStep() event when the next step is to be shown
            Methods
              Should remove the domain protocol from the host name before accepting the provided domain
              Should not accept any subdomains (or anything) provided...just the root domain name
        HasContent
          Description
            A wizard step asking if to preserve current domain content
          Props
            message:string
              The main message to show (overrides the default)
            domainName:string
              The domain name being connected
          Events
            onChange()
              Triggers when the domainName information changes
            onNextStep()
              Triggers when the next step is to be shown
          Tests
            Rendering
              Should render in the dom
              Should show the provided message in the dom
            Events
              Should trigger the onChange() event when the domainName information changes
              Should trigger the onNextStep() event when the next step is to be shown
        Subdomain
          Description
            A wizard step for adding a subdomain
          Props
            message:string
              The main message to show (overrides the default)
            domainName:string
              The domain name being connected
          Events
            onChange()
              Triggers when the domainName information changes
            onNextStep()
              Triggers when the next step is to be shown
          Tests
            Rendering
              Should render in the dom
              Should show the provided message in the dom
            Events
              Should trigger the onChange() event when the domainName information changes
              Should trigger the onNextStep() event when the next step is to be shown
        Tutorial
          Description
            A wizard step for locating a tutorial to explain how to complete the setup
            Asks for their registrar, then shows them the tutorial for that registrar
          Props
            cname:string
              The cname to tell the user to connect their domain name to
            message:string
              The main message to show (overrides the default)
            domainName:string
              The domain name being connected
            registrar:string
              The registrar the user is choosing (overrides the default)
          Events
            onChange()
              Triggers when the domainName information changes
            onRegistrarSelect()
              Triggers when the user chooses a registrar
            onNextStep()
              Triggers when the next step is to be shown
          Tests
            Rendering
              Should render in the dom
              Should show the provided message in the dom
              Should show the provided cname in the dom when informing users what to do
              Should show the tutorial associated with the registrar provided in the pros
            Events
              Should trigger the onChange() event when the domainName information changes
              Triggers the onRegistrarSelect() when the user choose a registrar
              Should trigger the onNextStep() event when the next step is to be shown
        Success
          Description
            The final screen to show once their domain has been created
          Props
            message:string
              The main message to show (overrides the default)
            domainName:string
              The domain name being connected
          Events
            onNextStep()
              Triggers when the next step is to be shown
          Tests
            Rendering
              Should render in the dom
              Should show the provided message in the dom
            Events
              Should trigger the onNextStep() event when the next step is to be shown
      Props
        domainNames:array
          The list of existing domain names
          { id, name, verified, ssl }
        children:array
          The different steps of the wizard
          (e.g. <ChooseOne />, <AddOne />, etc.)
      Events
        onChange()
          Triggers when the domain information changes in one of the child steps
      Globals
        switchStep()
          A method for switching the wizard steps.
          Let's progress be conditional
      Hooks
        onComponentRender()
          DomainSettings
            Triggers when the component is to be rendered in the dom
        onListItems()
          DomainNamesList
            Triggers when the list of domains are being generated
        onEventTrigger()
          DomainSettingsChange
            Triggers when the domain information changes
          DomainSettingsStepChange
            Triggers when the user goes to another step in the wizard
      Tests
        Rendering
          Should render the component in the dom
          Should render a list of wizard steps that represents the same number of children passed in the props
        Events
          Should trigger the onChange() event when the domain information changes in one of the child steps
        Hooks
          Should trigger the onComponentRender("DomainSettings") plugin hook when the component is to be rendered in the dom
          Should trigger the onListItems("DomainNamesList") plugin hook when the list of domains are being generated
          Should trigger the onEventTrigger("DomainSettingsChange") plugin hook when the domain information changes
          Should trigger the onEventTrigger("DomainSettingsStepChange") plugin hook when the user goes to another step in the wizard
    <Communication />
      Description
        A section that lets the user choose or create a pipeline to route communications through
        Another view for funnel building (instead of a tab-based web page builder)
        Users can build-out a funnel sequence in limited steps (e.g. LP > EM > TY > SP > EM CHK > UP > TY)
        Pipelines can flow left to right or top to bottom
        ...but x,y positioning is fixed to the canvas
      Screens/States
        Subtopic 1
      User Stories
        As a user I would like to be able to create a simple flow of communication (e.g. pages/emails/texts/etc.) that my funnel can trigger
        As a developer I would like to configure whether the flow occurs top to bottom or left to right
      Props
        data:array
          The list of nodes to add to the pipeline
      Events
        onChange()
          Triggers when the canvas is updated
      Hooks
        onComponentRender()
          FunnelCommunication
            Triggers when the component is rendering in the dom
      Tests
        Rendering
          Should render the component in the dom
        Events
          Should trigger the onChange() prop when the canvas is updated
        Hooks
          Should trigger the onComponentRender("FunnelCommunication") plugin hook when the component is rendering in the dom
    <Publish />
      Description
        A section/screen that shows the status of a publish
      User Stories
        As a user I would like a window showing the status of my publish request
        As a user when my publish request is complete, I would like to see a way (links, etc.) to see the campaign live
        As a user I would like to see other steps I can take after my campaign has been launched, such as sharing it on social media
        As a developer I would like to be able to customize the different publish screens
      Props
        data:object
          All of the campaign data
        title:string
          The title to show on the publish screen
        message:string
          The message to show in the publish window
        url:string
          The url of the item being published
        status:enum
          The current status of the publish
          enum(QUEUED,PUBLISHING,ERROR,DONE)
        children:element
          A way to add custom information (e.g. sharing on social media) to the publish screen
      Events
        onStop()
          Triggers when the user stops the publish from proceeding
        onRetry()
          Triggers when the user wants to retry a publish
        onClose()
          Triggers when the publish screen is to be closed
      Hooks
        onComponentRender()
          Publish
            Triggers this plugin hook when the component is being rendered in the dom
        onEventTrigger()
          StopPublish
            Triggers when the user stops a publish from proceeding
          RetryPublish
            Triggers when the user wants to retry a publish
          ClosePublish
            Triggers when the publish screen is to be closed
      Tests
        Rendering
          Should render in the dom
          Should show the title provided in the props somewhere in the dom
          Should show the message provided in the props somewhere in the dom
          Should Should the url of the item being published in the dom once the publish has completed
          Should render a specific component when the status prop is "QUEUED"
          Should render a specific component when the status prop is "PUBLISHING"
          Should render a specific component when the status prop is "ERROR"
          Should render a specific component when the status prop is "DONE"
          Should render whatever children are present in the props
        Events
          Should trigger the onStop() event when the user stops the publish from proceeding
          Should trigger the onRetry() event when the user wants to retry a publish
          Should trigger the onClose() event when the publish screen is to be closed
        Hooks
          Should trigger the onComponentRender("Publish") plugin hook when the component is being rendered in the dom
          Should trigger the onEventTrigger("StopPublish") plugin hook when the user stops a publish from proceeding
          Should trigger the onEventTrigger("RetryPublish") plugin hook when the user wants to retry a publish
          Should trigger the onEventTrigger("ClosePublish") plugin hook when the publish screen is to be closed
  Schema
    Props
      name:string
        The name of the funnel builder
      tabs:array
        The array of tabs to show
        { id, label, icon, active, subTabs, component }
      tabType:enum
        The type of tabs to show (subtle, in your face, etc.)
        enum(MAX,MIN,NONE)
      tabsComponent:element
        The component to use instead of the default tabs
      data
        All of existing campaign data
    Events
      onChange()
        Triggers when the campaign data changes in any way
      onTabChange()
        Triggers when the tab is switched
    Methods
      switchTab()
        Switches the tab from one to another
    Hooks
      onComponentRender()
        FunnelBuilder
          Triggers when the component is rendering to the dom
      onListItems()
        FunnelBuilderTabs
          Triggers when the list of tabs for the funnel builder are being generated
        FunnelBuilderNodes
          Triggers when the list of nodes in the campaign are being generated
      onEventTrigger()
        FunnelBuilderChange
          Triggers when the campaign data changes in some way
        FunnelBuilderTabChange
          Triggers when a tab in the funnel builder switches
  Test Scenarios
    Rendering
      Should render the component in the dom
      Should render the same number of tabs as the number of items in the tabs prop
      Should render the tabs in MAX mode with the tabType prop is MAX
      Should render the tabs in MIN mode with the tabType prop is MIN
      Should not render the tabs when the tabType prop is NONE
      Should render the component found in the tabsComponent prop instead of the default tabs when one is provided
    Events
      Should trigger the onChange() event when the campaign data changes in any way
      Should trigger the onTabChange() event when the tab is switched
    Methods
      Should switch the tab from one to another when they are clicked on
    Hooks
      Should trigger the onComponentRender("FunnelBuilder") plugin hook when the component is rendering in the dom
      Should trigger the onListItems("FunnelBuilderTabs") plugin hook when the list of tabs for the funnel builder are being generated
      Should trigger the onListItems("FunnelBuilderNodes") plugin hook when the list of nodes in the campaign are being generated
      Should render the onComponentRender("FunnelBuilder") plugin hook when the component is rendering to the dom
      Should render the onListItems("FunnelBuilderTabs") plugin hook when the list of tabs for the funnel builder are being generated
      Should render the onListItems("FunnelBuilderNodes") plugin hook when the list of nodes in the campaign are being generated
      Should render the onEventTrigger("FunnelBuilderChange") plugin hook when the campaign data changes in some way
      Should render the onEventTrigger("FunnelBuilderTabChange") plugin hook when a tab in the funnel builder switches
formerly "domainInfo"
formerly "domainInfo"
formerly "domainInfo"
metaData
nodes
each tab updates a key in this prop
e.g. pages = nodes; branding = meta; domains, etc.