Update Workflows (#46)

* Consolidate triggers.

* Re-add navigation

* Add workflow image

* Remove google tag manager

* Update images.

Author: shawnmclean

docs/references/sdks/web/reference/samelogic-js.elementeventprops.delaydefaultbehavior.md

@@ -0,0 +1,18 @@
+---
+id: samelogic-js.elementeventprops.delaydefaultbehavior
+title: ElementEventProps.delayDefaultBehavior property
+hide_title: true
+---
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[@samelogic/samelogic-js](./samelogic-js.md) &gt; [ElementEventProps](./samelogic-js.elementeventprops.md) &gt; [delayDefaultBehavior](./samelogic-js.elementeventprops.delaydefaultbehavior.md)
+
+## ElementEventProps.delayDefaultBehavior property
+
+If the element had a default behavior, it will be delayed until the workflow is completed.
+
+<b>Signature:</b>
+
+```typescript
+delayDefaultBehavior?: boolean;
+```

docs/references/sdks/web/reference/samelogic-js.elementeventprops.md

@@ -23,4 +23,5 @@ export interface ElementEventProps extends TriggerEventProps
 |  Property | Type | Description |
 |  --- | --- | --- |
 |  [cssSelector](./samelogic-js.elementeventprops.cssselector.md) | string | The CSS Selector of the element that was clicked or hovered over. |
+|  [delayDefaultBehavior?](./samelogic-js.elementeventprops.delaydefaultbehavior.md) | boolean | <i>(Optional)</i> If the element had a default behavior, it will be delayed until the workflow is completed. |
 |  [event](./samelogic-js.elementeventprops.event.md) | 'ElementClick' &#124; 'ElementMouseOver' |  |

docs/references/sdks/web/reference/samelogic-js.md

@@ -27,13 +27,13 @@ The main entry point to samelogic.js is the [Samelogic](./samelogic-js.samelogic
 |  [PageEventProps](./samelogic-js.pageeventprops.md) | The shape of the payload for the PageView event. |
 |  [StepConfig](./samelogic-js.stepconfig.md) |  |
 |  [StepNeeds](./samelogic-js.stepneeds.md) |  |
-|  [TriggerConfig](./samelogic-js.triggerconfig.md) | The configuration of a trigger. Triggers are made up of events. All events must be met before the trigger is fired. The order of the event is not taken into account. |
 |  [TriggerEventProps](./samelogic-js.triggereventprops.md) | The properties of an event. |
 |  [WorkflowConfig](./samelogic-js.workflowconfig.md) | This is the configuration of a workflow. Workflows are made up of steps and triggers. Triggers are events used to trigger the execution of steps. |
 
 ## Type Aliases
 
 |  Type Alias | Description |
 |  --- | --- |
+|  [TriggerConfig](./samelogic-js.triggerconfig.md) | The configuration of a trigger. |
 |  [TriggerEvents](./samelogic-js.triggerevents.md) | The different trigger events that are supported. The properties of this object is dependent on the [TriggerEventProps.event](./samelogic-js.triggereventprops.event.md) property. |
 |  [TriggerEventType](./samelogic-js.triggereventtype.md) | The type of event. This will determine what properties of [TriggerEvents](./samelogic-js.triggerevents.md) are required. |

docs/references/sdks/web/reference/samelogic-js.triggerconfig.events.md

@@ -1,24 +1,19 @@
 ---
 id: samelogic-js.triggerconfig
-title: TriggerConfig interface
+title: TriggerConfig type
 hide_title: true
 ---
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
 [@samelogic/samelogic-js](./samelogic-js.md) &gt; [TriggerConfig](./samelogic-js.triggerconfig.md)
 
-## TriggerConfig interface
+## TriggerConfig type
 
-The configuration of a trigger. Triggers are made up of events. All events must be met before the trigger is fired. The order of the event is not taken into account.
+The configuration of a trigger.
 
 <b>Signature:</b>
 
 ```typescript
-export interface TriggerConfig 
+export declare type TriggerConfig = TriggerEvents;
 ```
-
-## Properties
-
-|  Property | Type | Description |
-|  --- | --- | --- |
-|  [events](./samelogic-js.triggerconfig.events.md) | [TriggerEvents](./samelogic-js.triggerevents.md)<!-- -->\[\] | The events that must be met before the trigger is fired. |
+**References:** [TriggerEvents](./samelogic-js.triggerevents.md)

docs/references/sdks/web/reference/samelogic-js.triggerconfig.md

@@ -27,4 +27,4 @@ When the Samelogic SDK is initialized, the workflow configuration is loaded and
 |  --- | --- | --- |
 |  [name](./samelogic-js.workflowconfig.name.md) | string | The name given to the workflow. |
 |  [steps](./samelogic-js.workflowconfig.steps.md) | [StepConfig](./samelogic-js.stepconfig.md)<!-- -->\[\] | The configuration of all the steps to be executed when the trigger is fired. |
-|  [trigger?](./samelogic-js.workflowconfig.trigger.md) | [TriggerConfig](./samelogic-js.triggerconfig.md) | <i>(Optional)</i> The configuration of the trigger. |
+|  [triggers?](./samelogic-js.workflowconfig.triggers.md) | [TriggerConfig](./samelogic-js.triggerconfig.md)<!-- -->\[\] | <i>(Optional)</i> A list of events or conditions that needs to be met to trigger the execution of the steps. If this is not specified, the trigger will be executed immediately. The order of the trigger is not taken into account. |

docs/references/sdks/web/reference/samelogic-js.workflowconfig.md

@@ -0,0 +1,18 @@
+---
+id: samelogic-js.workflowconfig.triggers
+title: WorkflowConfig.triggers property
+hide_title: true
+---
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[@samelogic/samelogic-js](./samelogic-js.md) &gt; [WorkflowConfig](./samelogic-js.workflowconfig.md) &gt; [triggers](./samelogic-js.workflowconfig.triggers.md)
+
+## WorkflowConfig.triggers property
+
+A list of events or conditions that needs to be met to trigger the execution of the steps. If this is not specified, the trigger will be executed immediately. The order of the trigger is not taken into account.
+
+<b>Signature:</b>
+
+```typescript
+triggers?: TriggerConfig[];
+```

docs/references/sdks/web/reference/samelogic-js.workflowconfig.trigger.md

@@ -4,3 +4,8 @@ title: Data Mapping
 sidebar_label: Data Mapping
 slug: /workflows/data_mapping
 ---
+
+import Image from "@theme/IdealImage";
+import workflowImg from "./images/data-mapping-workflow.png";
+
+<Image height={600} img={workflowImg} />

docs/references/sdks/web/reference/samelogic-js.workflowconfig.triggers.md

@@ -4,12 +4,17 @@ title: Workflows Overview
 slug: /workflows
 ---
 
-Workflows make it easy to automate various steps that should happen during an experiment.
+import Image from "@theme/IdealImage";
+import workflowImg from "./images/workflow-example.png";
+
+Workflows make it easy to run various actions that should happen for an experiment. Workflows are made up of one or more steps that can be executed by one or more trigger events.
+
+<Image height={500} img={workflowImg} />
 
 ### Triggers
 
-Triggers are defined as a list of events that occur in the application to start the workflow. Please see [Triggers Overview documentation](./workflows/triggers) for more details.
+Triggers are a a list of events that occurs in the application to start the workflow. For example, a trigger can be configured to fire when the user clicks on an element on a specific page. Please see [Triggers Overview documentation](./workflows/triggers) for more details.
 
 ### Steps
 
-Steps are defined as a group of actions that are executed after a workflow is triggered. Please see [Steps Overview documentation](./steps)
+Steps are a set of actions that are executed after a workflow is triggered. Please see [Steps Overview documentation](./steps)

docs/workflows/data_mapping.mdx

@@ -0,0 +1,51 @@
+---
+id: triggers
+title: Workflow Triggers
+sidebar_label: Triggers
+slug: /workflows/triggers
+---
+
+A trigger is a specific activity that starts a workflow—for example, a user interaction within the application, such as clicking or hovering a button. A workflow will begin automatically when no trigger is specified.
+
+You can combine triggers; all trigger conditions must be met for the workflow to execute. You can arrange triggers in a sequence that represents complex user flows that might need to happen.
+
+We currently support the following triggers:
+
+- Element Hover - When the user mouse over a specified element.
+- Element Click - When the user clicks a specified element.
+- Page View - When the user visits a specified page URL.
+
+## Element Interactions
+
+There are a few triggers available to start a workflow when the user is interacting with elements in your product. Setting up a trigger on an element requires some understanding of [CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors).
+
+An example of a cssSelector is using the element ID such as `#my-element-id`, where `my-element-id` is the element's ID.
+
+The available triggers for elements are:
+
+1. `ElementClick`
+2. `ElementMouseOver`
+
+## Page Interactions
+
+Triggers can be further constrained by the page URL pattern. Page View triggers will only allow a Workflow to be triggered if there is a match of the URL pattern, which can include wildcards.
+
+The page trigger is known as `PageView`.
+
+Example matches:
+
+URL Pattern: `https://samelogic.com/*\/docs`
+
+Matches:
+
+- :white_check_mark: - `https://samelogic.com/myproduct/docs`
+- :white_check_mark: - `https://samelogic.com/hello/docs?param=123`
+- :x: - `https://samelogic.com/hello`
+
+URL Pattern: `https://*.samelogic.com/`
+
+Matches:
+
+- :white_check_mark: - `https://app.samelogic.com/`
+- :white_check_mark: - `https://app.samelogic.com/hello/docs?param=123`
+- :x: - `https://should-not-run.samelogic.com/hello`

docs/workflows/images/data-mapping-execution-multiple.png

@@ -9,7 +9,29 @@ module.exports = {
   favicon: "img/favicon.png",
   organizationName: "Samelogic, Inc.", // Usually your GitHub org/user name.
   projectName: "Samelogic", // Usually your repo name.
+  plugins: [
+    "@docusaurus/theme-live-codeblock",
+    [
+      "@docusaurus/plugin-ideal-image",
+      {
+        quality: 70,
+        max: 1030, // max resized image's size.
+        min: 640, // min resized image's size. if original is lower, use that size.
+        steps: 2, // the max number of images generated between min and max (inclusive)
+      },
+    ],
+  ],
   themeConfig: {
+    gtag: {
+      trackingID: "GTM-KVPQMPT",
+    },
+    liveCodeBlock: {
+      /**
+       * The position of the live playground, above or under the editor
+       * Possible values: "top" | "bottom"
+       */
+      playgroundPosition: "bottom",
+    },
     navbar: {
       title: "",
       logo: {
@@ -93,19 +115,6 @@ module.exports = {
       ],
       copyright: `Copyright © ${new Date().getFullYear()} Samelogic, Inc.`,
     },
-    gtag: {
-      trackingID: "GTM-KVPQMPT",
-    },
-  },
-  plugins: ["@docusaurus/theme-live-codeblock"],
-  themeConfig: {
-    liveCodeBlock: {
-      /**
-       * The position of the live playground, above or under the editor
-       * Possible values: "top" | "bottom"
-       */
-      playgroundPosition: "bottom",
-    },
   },
   presets: [
     [