vanilla-framework 4.27.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
|
@@ -103,7 +103,7 @@ $aspect-ratios: (
|
|
|
103
103
|
|
|
104
104
|
@mixin vf-p-image {
|
|
105
105
|
.p-image-container,
|
|
106
|
-
[class
|
|
106
|
+
[class*='p-image-container--'] {
|
|
107
107
|
display: block;
|
|
108
108
|
position: relative;
|
|
109
109
|
width: 100%;
|
|
@@ -125,12 +125,7 @@ $aspect-ratios: (
|
|
|
125
125
|
&.is-cover {
|
|
126
126
|
.p-image-container__image {
|
|
127
127
|
height: 100%;
|
|
128
|
-
left: 0;
|
|
129
|
-
margin: 0;
|
|
130
128
|
object-fit: cover;
|
|
131
|
-
position: absolute;
|
|
132
|
-
top: 0;
|
|
133
|
-
transform: none;
|
|
134
129
|
width: 100%;
|
|
135
130
|
}
|
|
136
131
|
}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
- title_text (string) (required): The text to be displayed as the heading
|
|
4
4
|
- subtitle_text (string) (optional): The text to be displayed as the subtitle
|
|
5
5
|
- subtitle_heading_level (int) (optional): The heading level for the subtitle. Can be 4 or 5. Defaults to 5.
|
|
6
|
+
- highlight_images (boolean) (optional): If the images need to be highlighted, which means adding a subtle grey background. Not added by default.
|
|
6
7
|
- image_aspect_ratio_small (string) (optional): The aspect ratio for item images on small screens. Defaults to "square". Can be "square", "2-3", "3-2", "16-9", "cinematic". Defaults to "square".
|
|
7
8
|
- image_aspect_ratio_medium (string) (optional): The aspect ratio for item images on medium screens. Defaults to "square". Can be "square", "2-3", "3-2", "16-9", "cinematic". Defaults to "square".
|
|
8
9
|
- image_aspect_ratio_large (string) (optional): The aspect ratio for item images on large screens. Defaults to "2-3". Can be "square", "2-3", "3-2", "16-9", "cinematic". Defaults to "2-3".
|
|
@@ -12,6 +13,7 @@
|
|
|
12
13
|
title_text,
|
|
13
14
|
subtitle_text="",
|
|
14
15
|
subtitle_heading_level=5,
|
|
16
|
+
highlight_images=false,
|
|
15
17
|
image_aspect_ratio_small="square",
|
|
16
18
|
image_aspect_ratio_medium="square",
|
|
17
19
|
image_aspect_ratio_large="2-3",
|
|
@@ -67,7 +69,7 @@
|
|
|
67
69
|
{#- Image item (required) -#}
|
|
68
70
|
<div class="p-equal-height-row__item">
|
|
69
71
|
<div
|
|
70
|
-
class="p-image-container--{{ image_aspect_ratio_small }}-on-small p-image-container--{{ image_aspect_ratio_medium }}-on-medium p-image-container--{{ image_aspect_ratio_large }}-on-large is-cover">
|
|
72
|
+
class="p-image-container--{{ image_aspect_ratio_small }}-on-small p-image-container--{{ image_aspect_ratio_medium }}-on-medium p-image-container--{{ image_aspect_ratio_large }}-on-large is-cover{% if highlight_images %} is-highlighted{% endif %}" >
|
|
71
73
|
{#- The consumer must pass in an img.p-image-container__image for the image to be properly formatted -#}
|
|
72
74
|
{{- image | safe -}}
|
|
73
75
|
</div>
|
|
@@ -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 -%}
|