Merge branch 'master' into DOC_131-Algolia

Author: markzegarelli

js/hoverhelp/index.js

@@ -0,0 +1,34 @@
+const COMPONENT_NAME = 'data-hoverhelp'
+const COMPONENT_SELECTOR = `[${COMPONENT_NAME}]`
+const BODY_SELECTOR = 'data-hoverhelp-body'
+const TRIGGER_SELECTOR = '[data-hoverhelp-target]'
+
+export default function () {
+  const components = document.querySelectorAll(COMPONENT_SELECTOR)
+
+  for (let i = 0; i < components.length; i++) {
+    const triggers = components[i].querySelectorAll(TRIGGER_SELECTOR)
+
+    for (let i = 0; i < triggers.length; i++) {
+      triggers[i].addEventListener('mouseover', e => {
+        e.preventDefault()
+
+        const targetBody = document.querySelector(`[${BODY_SELECTOR}=${e.target.dataset.hoverhelpTarget}]`)
+
+        components[i].classList.toggle(components[i].dataset.activeClass)
+      })
+    }
+
+    document.addEventListener('mouseover', e => {
+      if (components[i].classList.contains(components[i].dataset.activeClass)) {
+        const hoverhelpBody = components[i].querySelector(`[${BODY_SELECTOR}]`)
+
+        for (let i = 0; i < triggers.length; i++) {
+          if (!hoverhelpBody.contains(e.target) && e.target !== triggers[i]) {
+            components[i].classList.remove(components[i].dataset.activeClass)
+          }
+        }
+      }
+    })
+  }
+}

js/index.js

@@ -9,6 +9,7 @@ import dropdownMenu from './dropdown-menu'
 import anchorsIndicator from './anchors-indicator'
 import codeExample from './code-example'
 import popover from './popover'
+import hoverhelp from './hoverhelp'
 import menuPanels from './menu-panels'
 import searchBar404 from './search-bar-404'
 import backScrolling from './back-scrolling'
@@ -30,6 +31,7 @@ dropdownMenu()
 anchorsIndicator()
 codeExample()
 popover()
+hoverhelp()
 searchBar404()
 backScrolling()
 navigation()

src/_data/catalog/destination_categories.yml

@@ -1,5 +1,5 @@
 # AUTOGENERATED FROM PLATFORM API. DO NOT EDIT
-# destination categories last updated 2021-02-23 
+# destination categories last updated 2021-03-05 
 items:
 - display_name: Email Marketing
   slug: email-marketing

src/_data/catalog/destinations.yml

@@ -1,5 +1,5 @@
 # AUTOGENERATED FROM PLATFORM API. DO NOT EDIT
-# destination data last updated 2021-02-23 
+# destination data last updated 2021-03-05 
 items:
 - display_name: ActiveCampaign
   slug: activecampaign
@@ -2893,6 +2893,7 @@ items:
   mark:
     url: 'https://cdn.filepicker.io/api/file/sybdw0htTTKBmrgD1jJI'
   categories:
+  - Referrals
   - Attribution
   components:
   - type: CLOUD
@@ -10990,7 +10991,9 @@ items:
   mark:
     url: >-
       https://public-segment-devcenter-production.s3.amazonaws.com/edaa6886-d1fe-4af5-a76b-e2832fea8884.svg
-  categories: []
+  categories:
+  - Attribution
+  - Referrals
   components: []
   platforms:
     browser: true
@@ -16141,28 +16144,6 @@ items:
       Code**. Note: you can still use a URL query parameter of `pi_campaign_id`
       to override this on specific pages.
     settings: []
-  - name: email
-    display_name: Pardot Account Email
-    type: STRING
-    deprecated: false
-    required: false
-    string_validators:
-      regexp: ''
-    description: Your account email.
-    settings: []
-  - name: password
-    display_name: Pardot Account Password
-    type: PASSWORD
-    deprecated: false
-    required: false
-    string_validators:
-      regexp: ''
-    description: >-
-      Pardot requires we store a Pardot user email and password to access their
-      API. For security, we recommend you add a new user to your Pardot account
-      under **Admin > Users and Groups > Add User**, so that you don't have to
-      tell us your actual password.
-    settings: []
   - name: primaryBusinessUnitId
     display_name: Primary Business Unit Id
     type: STRING
@@ -16206,17 +16187,6 @@ items:
       lookup key value. If disabled, we will search for a trait in the event
       with the same name as the lookup field ID and match on that.
     settings: []
-  - name: userKey
-    display_name: User Key
-    type: STRING
-    deprecated: false
-    required: false
-    string_validators:
-      regexp: '^[a-f0-9]{32}$'
-    description: >-
-      You can find your User Key on under **User Settings** in your [Pardot
-      account](https://pi.pardot.com/account).
-    settings: []
   connection_modes:
     device:
       web: true

src/_data/catalog/source_categories.yml

@@ -1,5 +1,5 @@
 # AUTOGENERATED FROM PLATFORM API. DO NOT EDIT
-# source cateogries last updated 2021-02-23 
+# source cateogries last updated 2021-03-05 
 items:
 - display_name: Server
   slug: server

src/_data/catalog/sources.yml

@@ -1,5 +1,5 @@
 # AUTOGENERATED FROM PLATFORM API. DO NOT EDIT
-# sources last updated 2021-02-23 
+# sources last updated 2021-03-05 
 items:
 - display_name: .NET
   slug: net

src/_data/products.yml

@@ -0,0 +1,92 @@
+items:
+- product_display_name: Personas
+  slug: personas
+  plan-note: "Personas is available as an add-on for Business plans only."
+  plans:
+    free: false
+    team: false
+    business: true
+    add-on: true
+- product_display_name: Personas Identity Graph
+  slug: personas-id
+  plans:
+    free: false
+    team: false
+    business: true
+    add-on: true
+- product_display_name: Protocols
+  slug: protocols
+  plan-note: "Protocols is available as an add-on for Business plans only."
+  plans:
+    free: false
+    team: false
+    business: true
+    add-on: true
+- product_display_name: Advanced Access Management
+  slug: iam
+  plan-note: "Advanced Access Management is available for all Business plans."
+  plans:
+    free: false
+    team: false
+    business: true
+    add-on: false
+- product_display_name: Replay
+  slug: replay
+  plan-note: "Replay is available to all Business plans."
+  plans:
+    free: false
+    team: false
+    business: true
+    add-on: false
+- product_display_name: Privacy Portal
+  slug: privacy
+  plans:
+    free: true
+    team: true
+    business: true
+    add-on: false
+- product_display_name: Warehouses
+  slug: warehouses
+  plan-note: "Free and Team plan workspaces can have 1 warehouse. Business plans can have more than one, and include custom sync schedules and filtering."
+  plans:
+    free: true
+    team: true
+    business: true
+    add-on: false
+- product_display_name: Warehouse custom sync
+  slug: warehouse-sync
+  plans:
+    free: false
+    team: false
+    business: true
+    add-on: true
+- product_display_name: Data Lakes
+  slug: data-lakes
+  plans:
+    free: false
+    team: false
+    business: true
+    add-on: false
+- product_display_name: Audit Trail
+  slug: audit-trail
+  plans:
+    free: false
+    team: false
+    business: true
+    add-on: false
+- product_display_name: Single Sign-on
+  slug: sso
+  plan-note: "Single Sign-on is only available in Business plan workspaces."
+  plans:
+    free: false
+    team: false
+    business: true
+    add-on: false
+- product_display_name: Multi-factor authentication
+  slug: mfa
+  plan-note: "MFA is available to all Segment plans, but cannot be used with SSO."
+  plans:
+    free: true
+    team: true
+    business: true
+    add-on: false

src/_includes/content/plan-grid.md

@@ -0,0 +1,43 @@
+{% assign thisProduct = include.name %}
+{% assign productData = site.data.products.items | where: "slug", thisProduct | first %}
+<!-- The line below hides the grid if there's no matching data in products.yml-->
+{% if productData %}
+
+{% assign productPlans = productData.plans %}
+
+
+<div class="popover" data-popover data-active-class="popover--active">
+<div class="flex flex--wrap waffle" style="margin-top: -25px;margin-bottom: 40px;" >
+
+{% for item in productPlans %}
+{% if item[1] == true %}
+<div class="flex__column flex__column--shrink">
+        <span class="badge badge--{% if item[0] == 'add-on' %}success{% else %}primary{%endif%}"> {{item[0] | capitalize }} ✓ </span>
+</div>
+{% else %}
+<div class="flex__column flex__column--shrink">
+        <span class="badge badge--gray" style="opacity:0.2"> {{item[0] | capitalize }} x </span>
+        </div>
+{% endif %}
+
+{% endfor %}
+<div class="flex__column flex__column--shrink" style="padding-top:0px">
+  <a class="recent-contributor__button button-link" href="#" data-popover-target="contributors">?</a>
+</div>
+</div>
+
+
+
+<div class="popover__body" data-popover-body="contributors">
+{% if productData.plan-note %}
+<p style="font-size:12px">{{productData.plan-note}}
+{% elsif productData.plans.add-on and productData.plans.business == false%}
+<p style="font-size:12px">{{productData.product_display_name}} is available as an add-on for the displayed plans only.</p>
+{% elsif productData.plans.add-on and productData.plans.business %}
+<p style="font-size:12px">{{productData.product_display_name}} is available as an add-on for Business plans only.
+{% else %}
+<p style="font-size:12px">{{productData.product_display_name}} is available for the listed account plans only.
+{% endif %}
+<br>See the <a href="https://segment.com/pricing">available plans</a>, or <a href="https://segment.com/help/contact/">contact us</a>.</p></div>
+</div>
+{% endif %}

src/_sass/components/_hoverhelp.scss

@@ -0,0 +1,28 @@
+.hoverhelp {
+  $this: &;
+
+  position: relative;
+
+  &__body {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 10;
+    width: 100%;
+    margin-top: 10px;
+    padding: 15px;
+    opacity: 0;
+    visibility: hidden;
+    border: 1px solid color(gray-400);
+    border-radius: 4px;
+    background: color(white);
+    transition: 200ms ease;
+  }
+
+  &--active {
+    #{$this}__body {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+}

src/_sass/segment.scss

@@ -84,6 +84,7 @@
 @import "components/integration-header";
 @import "components/code-example";
 @import "components/popover";
+@import "components/hoverhelp";
 @import "components/avatars-list";
 @import "components/mobile-menu-side";
 @import "components/gloss";