Skip to content

Commit 163d3c8

Browse files
muhammad-ali-pkjmuzina
muhammad-ali-pk
and
jmuzina
authored
[WD-24276] feat: implemented Single Pricing Block pattern variant (#5607)
* feat: implemented single pricing block pattern variant * Updated release * Remove unnecessary shallow * Addressed review comments * address comments * prettier * pricing block top rule defaults to highlighted. removed option for a default rule (no use case yet) --------- Co-authored-by: Julie Muzina <julie.muzina@canonical.com> Co-authored-by: Julie Muzina <jmuzina@pm.me>
1 parent 6355cfc commit 163d3c8

8 files changed

Lines changed: 320 additions & 45 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vanilla-framework",
3-
"version": "4.28.1",
3+
"version": "4.29.0",
44
"author": {
55
"email": "webteam@canonical.com",
66
"name": "Canonical Webteam"

‎releases.yml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
- version: 4.29.0
2+
features:
3+
- component: Single-tier pricing block pattern variant
4+
url: /docs/patterns/pricing-block#1-block
5+
status: New
6+
notes: We've added a new single-tier variant for the pricing block pattern.
17
- version: 4.28.0
28
features:
39
- component: Equal heights

‎templates/_macros/vf_pricing-block.jinja‎

Lines changed: 50 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
{#
22
Params
33
- 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".
45
- tiers (Array<{
5-
tier_name_text: String,
6+
tier_name_text: String (optional),
67
tier_price_text: String,
78
tier_price_explanation: String,
89
tier_description_html?: String,
@@ -17,9 +18,14 @@
1718
- description (optional): paragraph-style content below the title
1819
#}
1920
{%- macro vf_pricing_block(
21+
top_rule_variant="highlighted",
2022
title_text="",
2123
tiers=[]
2224
) -%}
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 %}
2329
{% set section_description = caller('section_description') %}
2430
{% set has_tier_descriptions = (tiers | selectattr("tier_description_html") | list | length) > 0 %}
2531
{% if tiers|length == 2 %}
@@ -29,7 +35,6 @@
2935
{% else %}
3036
{% set base_class_name = "p-pricing-block" %}
3137
{% endif %}
32-
3338
{%- macro _tier_offerings_list(tier) %}
3439
<p class="u-text--muted">What's included</p>
3540
<hr class="p-rule--muted u-no-margin--bottom" />
@@ -47,42 +52,53 @@
4752
{% endfor -%}
4853
</ul>
4954
{%- endmacro -%}
50-
51-
<div class="p-section">
52-
<div class="p-section--shallow">
53-
<hr class="p-rule--highlight is-fixed-width" />
54-
<div class="grid-row">
55-
<div class="grid-col-4 grid-col-medium-4 grid-col-small-4">
56-
<h2>{{ title_text }}</h2>
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 %}
7062
{{ tier.get("tier_name_text") }}
7163
<br />
72-
<strong>{{ tier.get("tier_price_text") }}</strong>
73-
<span class="u-text--muted">{{ tier.get("tier_price_explanation") }}</span>
74-
</h3>
75-
</div>
64+
{% endif %}
65+
<strong>{{ tier.get("tier_price_text") }}</strong>
66+
<span class="u-text--muted">{{ tier.get("tier_price_explanation") }}</span>
67+
</h3>
7668
</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 -%}
8469
</div>
85-
{%- endfor -%}
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>
86101
</div>
102+
{% if tiers|length > 1 %}<div class="{{ base_class_name }}">{{ _tiers() }}</div>{% endif %}
87103
</div>
88104
{% endmacro -%}

‎templates/docs/examples/patterns/pricing-block/1-block.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
{% extends '_layouts/examples.html' %}
2+
{% from '_macros/vf_pricing-block.jinja' import vf_pricing_block %}
3+
{% block title %}Pricing block / 1-block{% endblock %}
4+
{% block standalone_css %}patterns_all{% endblock %}
5+
{% block content %}
6+
{% call(slot) vf_pricing_block(
7+
title_text='Kubernetes pricing',
8+
tiers=[
9+
{
10+
'tier_name_text': 'Kubernetes Explorer',
11+
'tier_price_text': '$3099',
12+
'tier_price_explanation': 'per year, per VM',
13+
'tier_description_html': '<p>Three-day Kubernetes training to ramp up your team\'s skills.</p>',
14+
'tier_label_text': 'What\'s included',
15+
'tier_offerings': [
16+
{
17+
'list_item_style': 'ticked',
18+
'list_item_content_html': 'High availability'
19+
},
20+
{
21+
'list_item_style': 'ticked',
22+
'list_item_content_html': '<a href="#">Public clouds</a>, VMware, <a href="#">OpenStack</a>'
23+
},
24+
{
25+
'list_item_style': 'ticked',
26+
'list_item_content_html': 'Storage and SDN basic options'
27+
},
28+
{
29+
'list_item_style': 'ticked',
30+
'list_item_content_html': 'Logging, monitoring, alerting'
31+
},
32+
{
33+
'list_item_style': 'ticked',
34+
'list_item_content_html': 'Kubernetes lifecycle management'
35+
},
36+
{
37+
'list_item_style': 'ticked',
38+
'list_item_content_html': 'Security essentials'
39+
},
40+
{
41+
'list_item_style': 'crossed',
42+
'list_item_content_html': 'Support or Fully Managed'
43+
},
44+
{
45+
'list_item_style': 'crossed',
46+
'list_item_content_html': 'Third-party integrations'
47+
},
48+
{
49+
'list_item_style': 'crossed',
50+
'list_item_content_html': 'GPU acceleration'
51+
},
52+
{
53+
'list_item_style': 'crossed',
54+
'list_item_content_html': 'GPU acceleration'
55+
}
56+
],
57+
'cta_html': '<a href="#">Three-day Kubernetes training to ramp up your team’s skills.</a>'
58+
},
59+
]
60+
) -%}
61+
{%- if slot == 'section_description' -%}
62+
<p>
63+
A low total cost of ownership. Up to five times lower than public clouds. A low total cost of ownership. Up to five times lower than public clouds. A low total cost of ownership. Up to five times lower than public clouds.
64+
</p>
65+
{%- endif -%}
66+
{% endcall %}
67+
{% endblock content %}

‎templates/docs/examples/patterns/pricing-block/block-with-description-and-highlighted-rule.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
{% extends '_layouts/examples.html' %}
2+
{% from '_macros/vf_pricing-block.jinja' import vf_pricing_block %}
3+
{% block title %}Pricing block / With optional elements{% endblock %}
4+
{% block standalone_css %}patterns_all{% endblock %}
5+
{% block content %}
6+
{% call(slot) vf_pricing_block(
7+
title_text='Kubernetes pricing',
8+
tiers=[
9+
{
10+
'tier_name_text': 'Kubernetes Explorer',
11+
'tier_price_text': '$3099',
12+
'tier_price_explanation': 'per year, per VM',
13+
'tier_description_html': '<p>Three-day Kubernetes training to ramp up your team\'s skills.</p>',
14+
'tier_label_text': 'What\'s included',
15+
'tier_offerings': [
16+
{
17+
'list_item_style': 'ticked',
18+
'list_item_content_html': 'High availability'
19+
},
20+
{
21+
'list_item_style': 'ticked',
22+
'list_item_content_html': '<a href="#">Public clouds</a>, VMware, <a href="#">OpenStack</a>'
23+
},
24+
{
25+
'list_item_style': 'ticked',
26+
'list_item_content_html': 'Storage and SDN basic options'
27+
},
28+
{
29+
'list_item_style': 'ticked',
30+
'list_item_content_html': 'Logging, monitoring, alerting'
31+
},
32+
{
33+
'list_item_style': 'ticked',
34+
'list_item_content_html': 'Kubernetes lifecycle management'
35+
},
36+
{
37+
'list_item_style': 'ticked',
38+
'list_item_content_html': 'Security essentials'
39+
},
40+
{
41+
'list_item_style': 'crossed',
42+
'list_item_content_html': 'Support or Fully Managed'
43+
},
44+
{
45+
'list_item_style': 'crossed',
46+
'list_item_content_html': 'Third-party integrations'
47+
},
48+
{
49+
'list_item_style': 'crossed',
50+
'list_item_content_html': 'GPU acceleration'
51+
},
52+
{
53+
'list_item_style': 'crossed',
54+
'list_item_content_html': 'GPU acceleration'
55+
}
56+
],
57+
'cta_html': '<a href="#">Three-day Kubernetes training to ramp up your team’s skills.</a>'
58+
},
59+
]
60+
) -%}
61+
{%- if slot == 'section_description' -%}
62+
<p>
63+
A low total cost of ownership. Up to five times lower than public clouds. A low total cost of ownership. Up to five times lower than public clouds. A low total cost of ownership. Up to five times lower than public clouds.
64+
</p>
65+
{%- endif -%}
66+
{% endcall %}
67+
{% endblock content %}

‎templates/docs/examples/patterns/pricing-block/block-without-description-and-muted-rule.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
{% extends '_layouts/examples.html' %}
2+
{% from '_macros/vf_pricing-block.jinja' import vf_pricing_block %}
3+
{% block title %}Pricing block / Without optional elements{% endblock %}
4+
{% block standalone_css %}patterns_all{% endblock %}
5+
{% block content %}
6+
{% call(slot) vf_pricing_block(
7+
top_rule_variant="muted",
8+
title_text='Kubernetes pricing',
9+
tiers=[
10+
{
11+
'tier_price_text': '$3099',
12+
'tier_price_explanation': 'per year, per VM',
13+
'tier_description_html': '<p>Three-day Kubernetes training to ramp up your team\'s skills.</p>',
14+
'tier_label_text': 'What\'s included',
15+
'tier_offerings': [
16+
{
17+
'list_item_style': 'ticked',
18+
'list_item_content_html': 'High availability'
19+
},
20+
{
21+
'list_item_style': 'ticked',
22+
'list_item_content_html': '<a href="#">Public clouds</a>, VMware, <a href="#">OpenStack</a>'
23+
},
24+
{
25+
'list_item_style': 'ticked',
26+
'list_item_content_html': 'Storage and SDN basic options'
27+
},
28+
{
29+
'list_item_style': 'ticked',
30+
'list_item_content_html': 'Logging, monitoring, alerting'
31+
},
32+
{
33+
'list_item_style': 'ticked',
34+
'list_item_content_html': 'Kubernetes lifecycle management'
35+
},
36+
{
37+
'list_item_style': 'ticked',
38+
'list_item_content_html': 'Security essentials'
39+
},
40+
{
41+
'list_item_style': 'crossed',
42+
'list_item_content_html': 'Support or Fully Managed'
43+
},
44+
{
45+
'list_item_style': 'crossed',
46+
'list_item_content_html': 'Third-party integrations'
47+
},
48+
{
49+
'list_item_style': 'crossed',
50+
'list_item_content_html': 'GPU acceleration'
51+
},
52+
{
53+
'list_item_style': 'crossed',
54+
'list_item_content_html': 'GPU acceleration'
55+
}
56+
],
57+
'cta_html': '<a href="#">Three-day Kubernetes training to ramp up your team’s skills.</a>'
58+
},
59+
]
60+
) -%}
61+
{% endcall %}
62+
{% endblock content %}

‎templates/docs/examples/patterns/pricing-block/combined.html‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
11
{% extends "_layouts/examples.html" %}
22
{% block title %}Pricing block / Combined{% endblock %}
3-
43
{% block standalone_css %}patterns_all{% endblock %}
5-
64
{% block content %}
75
{% with is_combined = true %}
6+
<section>
7+
{% include 'docs/examples/patterns/pricing-block/1-block.html' %}
8+
</section>
9+
<section>
10+
{% include 'docs/examples/patterns/pricing-block/block-with-description-and-highlighted-rule.html' %}
11+
</section>
12+
<section>
13+
{% include 'docs/examples/patterns/pricing-block/block-without-description-and-muted-rule.html' %}
14+
</section>
815
<section>
916
{% include 'docs/examples/patterns/pricing-block/2-blocks.html' %}
1017
</section>

0 commit comments

Comments
 (0)