Skip to content

Commit a21abd2

Browse files
sanscontextmarkzegarelli
sanscontext
and
markzegarelli
authored
DOC-74 Plan availability grid (#1421)
* POC of plan-availability grid * add to Protocols and Privacy portal * pill style * add plan notes * hoverhelp -> popover * tweaks to grid, added it to IAM and warehouses * tweak per Rach * tweak for data lakes Co-authored-by: markzegarelli <[email protected]>
1 parent b699abc commit a21abd2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+380
-18
lines changed

‎js/hoverhelp/index.js

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
const COMPONENT_NAME = 'data-hoverhelp'
2+
const COMPONENT_SELECTOR = `[${COMPONENT_NAME}]`
3+
const BODY_SELECTOR = 'data-hoverhelp-body'
4+
const TRIGGER_SELECTOR = '[data-hoverhelp-target]'
5+
6+
export default function () {
7+
const components = document.querySelectorAll(COMPONENT_SELECTOR)
8+
9+
for (let i = 0; i < components.length; i++) {
10+
const triggers = components[i].querySelectorAll(TRIGGER_SELECTOR)
11+
12+
for (let i = 0; i < triggers.length; i++) {
13+
triggers[i].addEventListener('mouseover', e => {
14+
e.preventDefault()
15+
16+
const targetBody = document.querySelector(`[${BODY_SELECTOR}=${e.target.dataset.hoverhelpTarget}]`)
17+
18+
components[i].classList.toggle(components[i].dataset.activeClass)
19+
})
20+
}
21+
22+
document.addEventListener('mouseover', e => {
23+
if (components[i].classList.contains(components[i].dataset.activeClass)) {
24+
const hoverhelpBody = components[i].querySelector(`[${BODY_SELECTOR}]`)
25+
26+
for (let i = 0; i < triggers.length; i++) {
27+
if (!hoverhelpBody.contains(e.target) && e.target !== triggers[i]) {
28+
components[i].classList.remove(components[i].dataset.activeClass)
29+
}
30+
}
31+
}
32+
})
33+
}
34+
}

‎js/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import dropdownMenu from './dropdown-menu'
99
import anchorsIndicator from './anchors-indicator'
1010
import codeExample from './code-example'
1111
import popover from './popover'
12+
import hoverhelp from './hoverhelp'
1213
import menuPanels from './menu-panels'
1314
import searchBar404 from './search-bar-404'
1415
import backScrolling from './back-scrolling'
@@ -30,6 +31,7 @@ dropdownMenu()
3031
anchorsIndicator()
3132
codeExample()
3233
popover()
34+
hoverhelp()
3335
searchBar404()
3436
backScrolling()
3537
navigation()

‎src/_data/products.yml

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
items:
2+
- product_display_name: Personas
3+
slug: personas
4+
plan-note: "Personas is available as an add-on for Business plans only."
5+
plans:
6+
free: false
7+
team: false
8+
business: true
9+
add-on: true
10+
- product_display_name: Personas Identity Graph
11+
slug: personas-id
12+
plans:
13+
free: false
14+
team: false
15+
business: true
16+
add-on: true
17+
- product_display_name: Protocols
18+
slug: protocols
19+
plan-note: "Protocols is available as an add-on for Business plans only."
20+
plans:
21+
free: false
22+
team: false
23+
business: true
24+
add-on: true
25+
- product_display_name: Advanced Access Management
26+
slug: iam
27+
plan-note: "Advanced Access Management is available for all Business plans."
28+
plans:
29+
free: false
30+
team: false
31+
business: true
32+
add-on: false
33+
- product_display_name: Replay
34+
slug: replay
35+
plan-note: "Replay is available to all Business plans."
36+
plans:
37+
free: false
38+
team: false
39+
business: true
40+
add-on: false
41+
- product_display_name: Privacy Portal
42+
slug: privacy
43+
plans:
44+
free: true
45+
team: true
46+
business: true
47+
add-on: false
48+
- product_display_name: Warehouses
49+
slug: warehouses
50+
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."
51+
plans:
52+
free: true
53+
team: trues
54+
business: true
55+
add-on: false
56+
- product_display_name: Warehouse custom sync
57+
slug: warehouse-sync
58+
plans:
59+
free: false
60+
team: false
61+
business: true
62+
add-on: true
63+
- product_display_name: Data Lakes
64+
slug: data-lakes
65+
plans:
66+
free: false
67+
team: false
68+
business: true
69+
add-on: false
70+
- product_display_name: Audit Trail
71+
slug: audit-trail
72+
plans:
73+
free: false
74+
team: false
75+
business: true
76+
add-on: false
77+
- product_display_name: Single Sign-on
78+
slug: sso
79+
plan-note: "Single Sign-on is only available in Business plan workspaces."
80+
plans:
81+
free: false
82+
team: false
83+
business: true
84+
add-on: false
85+
- product_display_name: Multi-factor authentication
86+
slug: mfa
87+
plan-note: "MFA is available to all Segment plans, but cannot be used with SSO."
88+
plans:
89+
free: true
90+
team: true
91+
business: true
92+
add-on: false

‎src/_includes/content/plan-grid.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{% assign thisProduct = include.name %}
2+
{% assign productData = site.data.products.items | where: "slug", thisProduct | first %}
3+
<!-- The line below hides the grid if there's no matching data in products.yml-->
4+
{% if productData %}
5+
6+
{% assign productPlans = productData.plans %}
7+
8+
9+
<div class="popover" data-popover data-active-class="popover--active">
10+
<div class="flex flex--wrap waffle" style="margin-top: -25px;margin-bottom: 40px;" >
11+
12+
{% for item in productPlans %}
13+
{% if item[1] == true %}
14+
<div class="flex__column flex__column--shrink">
15+
<span class="badge badge--{% if item[0] == 'add-on' %}success{% else %}primary{%endif%}"> {{item[0] | capitalize }} ✓ </span>
16+
</div>
17+
{% else %}
18+
<div class="flex__column flex__column--shrink">
19+
<span class="badge badge--gray" style="opacity:0.2"> {{item[0] | capitalize }} x </span>
20+
</div>
21+
{% endif %}
22+
23+
{% endfor %}
24+
<div class="flex__column flex__column--shrink" style="padding-top:0px">
25+
<a class="recent-contributor__button button-link" href="#" data-popover-target="contributors">?</a>
26+
</div>
27+
</div>
28+
29+
30+
31+
<div class="popover__body" data-popover-body="contributors">
32+
{% if productData.plan-note %}
33+
<p style="font-size:12px">{{productData.plan-note}}
34+
{% elsif productData.plans.add-on and productData.plans.business == false%}
35+
<p style="font-size:12px">{{productData.product_display_name}} is available as an add-on for the displayed plans only.</p>
36+
{% elsif productData.plans.add-on and productData.plans.business %}
37+
<p style="font-size:12px">{{productData.product_display_name}} is available as an add-on for Business plans only.
38+
{% else %}
39+
<p style="font-size:12px">{{productData.product_display_name}} is available for the listed account plans only.
40+
{% endif %}
41+
<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>
42+
</div>
43+
{% endif %}

‎src/_sass/components/_hoverhelp.scss

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.hoverhelp {
2+
$this: &;
3+
4+
position: relative;
5+
6+
&__body {
7+
position: absolute;
8+
top: 100%;
9+
left: 0;
10+
z-index: 10;
11+
width: 100%;
12+
margin-top: 10px;
13+
padding: 15px;
14+
opacity: 0;
15+
visibility: hidden;
16+
border: 1px solid color(gray-400);
17+
border-radius: 4px;
18+
background: color(white);
19+
transition: 200ms ease;
20+
}
21+
22+
&--active {
23+
#{$this}__body {
24+
opacity: 1;
25+
visibility: visible;
26+
}
27+
}
28+
}

‎src/_sass/segment.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@
8484
@import "components/integration-header";
8585
@import "components/code-example";
8686
@import "components/popover";
87+
@import "components/hoverhelp";
8788
@import "components/avatars-list";
8889
@import "components/mobile-menu-side";
8990
@import "components/gloss";

‎src/connections/storage/catalog/data-lakes/index.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
title: Set Up Segment Data Lakes
33
redirect_from: '/connections/destinations/catalog/data-lakes/'
44
---
5+
{% include content/plan-grid.md name="data-lakes" %}
6+
57

68
Segment Data Lakes provide a way to collect large quantities of data in a format that's optimized for targeted data science and data analytics workflows. You can read [more information about Data Lakes](/docs/connections/storage/data-lakes/) and learn [how they differ from Warehouses](/docs/connections/storage/data-lakes/comparison/) in our documentation.
79

@@ -158,4 +160,4 @@ Replace:
158160
- [glue_db_name] = The Glue database created by Data Lakes which is named after the source slug
159161
- [spectrum_schema_name] = The schema name in Redshift you want to map to
160162
{% endfaqitem %}
161-
{% endfaq %}
163+
{% endfaq %}

‎src/connections/storage/data-lakes/comparison.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
---
22
title: Comparing Data Lakes and Warehouses
33
---
4+
{% include content/plan-grid.md name="data-lakes" %}
5+
46

57
As Segment builds new data storage products, each product evolves from prior products to best support the needs of customers. Segment Data Lakes is an evolution of the Warehouses product that meets the changing needs of customers.
68

‎src/connections/storage/data-lakes/data-lakes-manual-setup.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
hidden: true
33
title: Configure the Data Lakes AWS Environment
44
---
5+
{% include content/plan-grid.md name="data-lakes" %}
6+
57

68
The instructions below will guide you through the process required to configure the environment required to begin loading data into your Segment Data Lake. For a more automated process, see [Step 1 - Configure AWS Resources](#step-1---configure-aws-resources) above.
79

‎src/connections/storage/data-lakes/index.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ title: Segment Data Lakes Overview
33
redirect_from: '/connections/destinations/catalog/data-lakes/'
44
---
55

6+
{% include content/plan-grid.md name="data-lakes" %}
7+
68
Segment Data Lakes sends Segment data to a cloud data store (for example AWS S3) in a format optimized to reduce processing for data analytics and data science workloads. Segment data is great for building machine learning models for personalization and recommendations, and for other large scale advanced analytics. Data Lakes can reduce the amount of processing required to get real value out of your data.
79

810
> info ""

0 commit comments

Comments
 (0)