vanilla-framework 4.28.0 → 4.29.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
{#
|
|
2
2
|
Params
|
|
3
3
|
- title_text (string) (required): The text to be displayed as the heading
|
|
4
|
+
- top_rule_variant (string) (optional): Variant of the top rule, default is "highlighted". Options are "muted", "highlighted", "none".
|
|
4
5
|
- tiers (Array<{
|
|
5
|
-
tier_name_text: String,
|
|
6
|
+
tier_name_text: String (optional),
|
|
6
7
|
tier_price_text: String,
|
|
7
8
|
tier_price_explanation: String,
|
|
8
9
|
tier_description_html?: String,
|
|
@@ -17,9 +18,14 @@
|
|
|
17
18
|
- description (optional): paragraph-style content below the title
|
|
18
19
|
#}
|
|
19
20
|
{%- macro vf_pricing_block(
|
|
21
|
+
top_rule_variant="highlighted",
|
|
20
22
|
title_text="",
|
|
21
23
|
tiers=[]
|
|
22
24
|
) -%}
|
|
25
|
+
{% set top_rule_variant = top_rule_variant | trim %}
|
|
26
|
+
{% if top_rule_variant not in ['muted', 'highlighted', 'none'] %}
|
|
27
|
+
{% set top_rule_variant = "highlighted" %}
|
|
28
|
+
{% endif %}
|
|
23
29
|
{% set section_description = caller('section_description') %}
|
|
24
30
|
{% set has_tier_descriptions = (tiers | selectattr("tier_description_html") | list | length) > 0 %}
|
|
25
31
|
{% if tiers|length == 2 %}
|
|
@@ -29,7 +35,6 @@
|
|
|
29
35
|
{% else %}
|
|
30
36
|
{% set base_class_name = "p-pricing-block" %}
|
|
31
37
|
{% endif %}
|
|
32
|
-
|
|
33
38
|
{%- macro _tier_offerings_list(tier) %}
|
|
34
39
|
<p class="u-text--muted">What's included</p>
|
|
35
40
|
<hr class="p-rule--muted u-no-margin--bottom" />
|
|
@@ -47,42 +52,53 @@
|
|
|
47
52
|
{% endfor -%}
|
|
48
53
|
</ul>
|
|
49
54
|
{%- endmacro -%}
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
</div>
|
|
58
|
-
{%- if section_description -%}
|
|
59
|
-
<div class="grid-col-4 grid-col-medium-4 grid-col-small-4">{{ section_description }}</div>
|
|
60
|
-
{%- endif -%}
|
|
61
|
-
</div>
|
|
62
|
-
</div>
|
|
63
|
-
|
|
64
|
-
<div class="{{ base_class_name }}">
|
|
65
|
-
{%- for tier in tiers %}
|
|
66
|
-
<div class="p-pricing-block__tier">
|
|
67
|
-
<div class="p-pricing-block__section">
|
|
68
|
-
<div class="p-section--shallow">
|
|
69
|
-
<h3 class="p-heading--4">
|
|
55
|
+
{%- macro _tiers() -%}
|
|
56
|
+
{%- for tier in tiers %}
|
|
57
|
+
<div class="p-pricing-block__tier">
|
|
58
|
+
<div class="p-pricing-block__section">
|
|
59
|
+
<div class="p-section--shallow">
|
|
60
|
+
<h3 class="p-heading--{% if tiers|length == 1 and (not 'tier_name_text' in tier) %}2{% else %}4{% endif %}">
|
|
61
|
+
{% if 'tier_name_text' in tier %}
|
|
70
62
|
{{ tier.get("tier_name_text") }}
|
|
71
63
|
<br />
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
</
|
|
75
|
-
</
|
|
64
|
+
{% endif %}
|
|
65
|
+
<strong>{{ tier.get("tier_price_text") }}</strong>
|
|
66
|
+
<span class="u-text--muted">{{ tier.get("tier_price_explanation") }}</span>
|
|
67
|
+
</h3>
|
|
76
68
|
</div>
|
|
77
|
-
{%- if has_tier_descriptions -%}
|
|
78
|
-
{% set description = tier.get("tier_description_html") if tier.get("tier_description_html") else '' %}
|
|
79
|
-
<div class="p-pricing-block__section"
|
|
80
|
-
{% if not description %}role="presentation"{% endif %}>{{ description }}</div>
|
|
81
|
-
{%- endif %}
|
|
82
|
-
<div class="p-pricing-block__section">{{ _tier_offerings_list(tier) }}</div>
|
|
83
|
-
{% if tier.cta_html %}<div class="p-pricing-block__section">{{ tier.cta_html }}</div>{% endif -%}
|
|
84
69
|
</div>
|
|
85
|
-
|
|
70
|
+
{%- if has_tier_descriptions -%}
|
|
71
|
+
{% set description = tier.get("tier_description_html") if tier.get("tier_description_html") else '' %}
|
|
72
|
+
<div class="p-pricing-block__section"
|
|
73
|
+
{% if not description %}role="presentation"{% endif %}>{{ description }}</div>
|
|
74
|
+
{%- endif %}
|
|
75
|
+
<div class="p-pricing-block__section">{{ _tier_offerings_list(tier) }}</div>
|
|
76
|
+
{% if tier.cta_html %}
|
|
77
|
+
<div class="p-pricing-block__section">{{ tier.cta_html }}</div>
|
|
78
|
+
{% endif -%}
|
|
79
|
+
</div>
|
|
80
|
+
{%- endfor -%}
|
|
81
|
+
{%- endmacro -%}
|
|
82
|
+
{%- macro _top_rule() -%}
|
|
83
|
+
{% if top_rule_variant == 'muted' %}
|
|
84
|
+
<hr class="p-rule--muted is-fixed-width" />
|
|
85
|
+
{% elif top_rule_variant == 'highlighted' %}
|
|
86
|
+
<hr class="p-rule--highlight is-fixed-width" />
|
|
87
|
+
{% elif top_rule_variant == 'none' %}
|
|
88
|
+
{# No rule #}
|
|
89
|
+
{% endif %}
|
|
90
|
+
{%- endmacro -%}
|
|
91
|
+
<div class="p-section">
|
|
92
|
+
{{ _top_rule() }}
|
|
93
|
+
<div class="grid-row">
|
|
94
|
+
<div class="grid-col-4 grid-col-medium-4 grid-col-small-4">
|
|
95
|
+
<h2>{{ title_text }}</h2>
|
|
96
|
+
</div>
|
|
97
|
+
<div class="grid-col-4 grid-col-medium-4 grid-col-small-4">
|
|
98
|
+
{% if section_description %}<div class="p-section--shallow">{{ section_description }}</div>{% endif %}
|
|
99
|
+
{% if tiers|length == 1 %}{{ _tiers() }}{% endif %}
|
|
100
|
+
</div>
|
|
86
101
|
</div>
|
|
102
|
+
{% if tiers|length > 1 %}<div class="{{ base_class_name }}">{{ _tiers() }}</div>{% endif %}
|
|
87
103
|
</div>
|
|
88
104
|
{% endmacro -%}
|