Skip to content

Commit 398afa8

Browse files
immortalcodesimmortalcodes
authored
Merge pull request #5769 from canonical/WD-33531-dev-update-cta-section-to-support-blocks-like-newer-patterns
WD-33531: Dev update cta section to support blocks like newer patterns
2 parents 9ddd37d + 48e0bf4 commit 398afa8

17 files changed

Lines changed: 405 additions & 97 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.45.0",
3+
"version": "4.46.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.46.0
2+
features:
3+
- component: CTA section
4+
url: /docs/patterns/cta-section
5+
status: Updated
6+
notes: Added <a href="/docs/patterns/cta-section#blocks">blocks</a> successor to slots.
17
- version: 4.45.0
28
features:
39
- component: In-page navigation

‎templates/_macros/vf_cta-section.jinja‎

Lines changed: 57 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
1+
{% from "_macros/shared/vf_cta-block.jinja" import vf_cta_block %}
2+
{% from "_macros/shared/vf_description-block.jinja" import vf_description_block %}
3+
14
# All Params
25
# title_text: H2 title text
36
# variant: variant for the cta section. Options are "default", "block". Default is "default".
47
# layout: Layout type of cta section. Options are "100", "25-75".
8+
# blocks: list of content blocks for the CTA section. Includes description and cta blocks.
59

610
# All Slots
7-
# description: Paragraph-style (one or more) content below the title. This slot is required for "cta-block-100" and "cta-block-25-75" layouts.
8-
# cta: Call-to-action block with action links/buttons. This slot is required for "cta-block-100" and "cta-block-25-75" layouts.
11+
# description (deprecated): Paragraph-style (one or more) content below the title. This slot is required for "cta-block-100" and "cta-block-25-75" layouts.
12+
# cta (deprecated): Call-to-action block with action links/buttons. This slot is required for "cta-block-100" and "cta-block-25-75" layouts.
913

1014
# Variants:
1115
# default-100: Full-width CTA with title and link text
@@ -14,6 +18,7 @@
1418
# variant: default
1519
# layout: 100
1620
# attrs: A dictionary of attributes to apply to the section element
21+
# blocks: cta-block is required
1722

1823
# Slots:
1924
# cta: The cta link - required
@@ -23,6 +28,7 @@
2328
# title_text: H2 title text - optional
2429
# variant: default
2530
# layout: 25-75
31+
# blocks: cta-block is required
2632

2733
# Slots:
2834
# cta: The cta link - required
@@ -32,6 +38,7 @@
3238
# title_text: H2 title text - required
3339
# variant: block
3440
# layout: 100
41+
# blocks: cta-block is required
3542

3643
# Slots:
3744
# description: Paragraph-style (one or more) content below the title - Optional
@@ -42,31 +49,69 @@
4249
# title_text: H2 title text - required
4350
# variant: block
4451
# layout: 25-75
52+
# blocks: cta-block is required
4553

4654
# Slots:
4755
# description: Paragraph-style (one or more) content below the title - Optional
4856
# cta: Call-to-action block (required)
4957

50-
{%- macro vf_cta_section(title_text, variant='default', layout='100', caller=None, attrs={}) -%}
58+
{%- macro vf_cta_section(title_text, variant='default', layout='100', caller=None, attrs={}, blocks=[]) -%}
59+
60+
{%- set description_block = blocks | selectattr("type", "equalto", "description") | list | last | default(None) -%}
61+
{%- set cta_block = blocks | selectattr("type", "equalto", "cta") | list | last | default(None) -%}
62+
5163
{% set description_content = caller('description') %}
52-
{% set has_description = description_content|trim|length > 0 %}
64+
{% set has_description = description_block or description_content|trim|length > 0 %}
5365
{% set cta_content = caller('cta') %}
54-
{% set has_cta = cta_content|trim|length > 0 %}
66+
{% set has_cta = cta_block or cta_content|trim|length > 0 %}
67+
68+
{%- if cta_block -%}
69+
{%- set cta_block_item = cta_block.get("item", {}) -%}
70+
{%- set cta_block_type = cta_block_item.get("type","") | trim -%}
71+
72+
{%- if cta_block_type == "html" -%}
73+
{%- set cta_content = cta_block_item.get("content","") | trim -%}
74+
{%- endif -%}
75+
{%- endif -%}
76+
77+
{%- if description_block -%}
78+
{%- set description_block_item = description_block.get("item", {}) -%}
79+
{%- endif -%}
80+
5581
{#- User can pass layout as "X-Y" or "X/Y" -#}
5682
{% set layout = layout | trim | replace('/', '-') %}
83+
5784
{% if layout not in ['100', '25-75'] %}
5885
{% set layout = "100" %}
5986
{% endif %}
87+
6088
{% set variant = variant | trim %}
6189
{% if variant not in ['default', 'block'] %}
6290
{% set variant = "default" %}
6391
{% endif %}
92+
6493
{%- macro _description_block() -%}
65-
{% if has_description %}{{ description_content }}{% endif %}
66-
{%- endmacro -%}
94+
{%- if description_block -%}
95+
{{ vf_description_block(type = description_block_item.get("type", ""), content = description_block_item.get("content","")) }}
96+
{% elif has_description %}
97+
{{ description_content }}
98+
{% endif %}
99+
{%- endmacro %}
100+
67101
{%- macro _cta_block() -%}
68-
{% if has_cta -%}<div class="p-cta-block">{{ cta_content }}</div>{% endif %}
69-
{%- endmacro -%}
102+
{%- if cta_block -%}
103+
{%- if cta_block_type == "html" -%}
104+
<div class="p-cta-block">{{- cta_content | safe -}}</div>
105+
{%- else -%}
106+
{{ vf_cta_block( primary=cta_block_item.get("primary", {}),
107+
secondaries=cta_block_item.get("secondaries", []),
108+
link=cta_block_item.get("link",{})) }}
109+
{% endif %}
110+
{% elif has_cta %}
111+
<div class="p-cta-block">{{ cta_content }}</div>
112+
{% endif %}
113+
{%- endmacro %}
114+
70115
{%- macro _cta_default_variant() -%}
71116
<h2>
72117
{%- if title_text -%}
@@ -76,18 +121,21 @@
76121
{{ cta_content }}
77122
</h2>
78123
{%- endmacro -%}
124+
79125
{%- macro _cta_block_variant() -%}
80126
<h2>{{ title_text }}</h2>
81127
{{ _description_block() -}}
82128
{{ _cta_block() }}
83129
{%- endmacro -%}
130+
84131
{%- macro _cta_variant() -%}
85132
{%- if variant == 'default' -%}
86133
{{ _cta_default_variant() }}
87134
{%- elif variant == 'block' -%}
88135
{{ _cta_block_variant() }}
89136
{%- endif -%}
90137
{%- endmacro -%}
138+
91139
<hr class="p-rule is-fixed-width u-no-margin--bottom" />
92140
<section class="p-strip is-deep {{ attrs.get("class", "") -}}"
93141
{%- for attr, value in attrs.items() -%}

‎templates/docs/examples/patterns/cta-section/block-25-75.html‎

Lines changed: 41 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,45 @@
44
{% block standalone_css %}patterns_all{% endblock %}
55
{% set is_paper = true %}
66
{% block content %}
7-
{% call(slot) vf_cta_section(
8-
title_text='The quick brown fox jumps over the lazy dog',
9-
variant='block',
10-
layout='25-75'
11-
) -%}
12-
{%- if slot == 'description' -%}
13-
<p>The quick brown fox jumps over the lazy dog.</p>
14-
{%- endif -%}
15-
{%- if slot == 'cta' -%}
16-
<a href="#" class="p-button--positive">Action</a>
17-
<a href="#" class="p-button">Action</a>
18-
<a href="#">Lorem ipsum dolor sit amet&#32;&rsaquo;</a>
19-
{%- endif -%}
20-
{% endcall -%}
7+
{% call(slot) vf_cta_section(
8+
title_text='The quick brown fox jumps over the lazy dog',
9+
variant='block',
10+
layout='25-75',
11+
blocks=[
12+
{
13+
"type": "description",
14+
"item": {
15+
"type": "text",
16+
"content": "The quick brown fox jumps over the lazy dog."
17+
}
18+
},
19+
{
20+
"type": "cta",
21+
"item": {
22+
"primary": {
23+
"content_html": "Action",
24+
"attrs": {
25+
"href": "#",
26+
"class": "optional-css-class"
27+
}
28+
},
29+
"secondaries": [
30+
{
31+
"content_html": "Secondary action",
32+
"attrs": {
33+
"href": "#"
34+
}
35+
}
36+
],
37+
"link": {
38+
"content_html": "Lorem ipsum dolor sit amet&#32;&rsaquo;",
39+
"attrs": {
40+
"href": "#"
41+
}
42+
}
43+
}
44+
}
45+
]
46+
) -%}
47+
{% endcall -%}
2148
{% endblock %}

‎templates/docs/examples/patterns/cta-section/block-full-width.html‎

Lines changed: 41 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,45 @@
44
{% block standalone_css %}patterns_all{% endblock %}
55
{% set is_paper = true %}
66
{% block content %}
7-
{% call(slot) vf_cta_section(
8-
title_text='The quick brown fox jumps over the lazy dog',
9-
variant='block',
10-
layout='100'
11-
) -%}
12-
{%- if slot == 'description' -%}
13-
<p>The quick brown fox jumps over the lazy dog.</p>
14-
{%- endif -%}
15-
{%- if slot == 'cta' -%}
16-
<a href="#" class="p-button--positive">Action</a>
17-
<a href="#" class="p-button">Action</a>
18-
<a href="#">Lorem ipsum dolor sit amet&#32;&rsaquo;</a>
19-
{%- endif -%}
20-
{% endcall -%}
7+
{% call(slot) vf_cta_section(
8+
title_text='The quick brown fox jumps over the lazy dog',
9+
variant='block',
10+
layout='100',
11+
blocks=[
12+
{
13+
"type": "description",
14+
"item": {
15+
"type": "text",
16+
"content": "The quick brown fox jumps over the lazy dog."
17+
}
18+
},
19+
{
20+
"type": "cta",
21+
"item": {
22+
"primary": {
23+
"content_html": "Action",
24+
"attrs": {
25+
"href": "#",
26+
"class": "optional-css-class"
27+
}
28+
},
29+
"secondaries": [
30+
{
31+
"content_html": "Action",
32+
"attrs": {
33+
"href": "#"
34+
}
35+
}
36+
],
37+
"link": {
38+
"content_html": "Lorem ipsum dolor sit amet&#32;&rsaquo;",
39+
"attrs": {
40+
"href": "#"
41+
}
42+
}
43+
}
44+
}
45+
]
46+
) -%}
47+
{% endcall -%}
2148
{% endblock %}

‎templates/docs/examples/patterns/cta-section/cta-block.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{% extends "_layouts/examples.html" %}
2+
{% from "_macros/vf_cta-section.jinja" import vf_cta_section %}
3+
{% block title %}CTA section / CTA block{% endblock %}
4+
{% block standalone_css %}patterns_all{% endblock %}
5+
{% set is_paper = true %}
6+
{% block content %}
7+
{% call(slot) vf_cta_section(
8+
title_text='The quick brown fox jumps over the lazy dog',
9+
variant='block',
10+
layout='25-75',
11+
blocks=[
12+
{
13+
"type": "cta",
14+
"item": {
15+
"primary": {
16+
"content_html": "Action",
17+
"attrs": {
18+
"href": "#",
19+
"class": "optional-css-class"
20+
}
21+
},
22+
"secondaries": [
23+
{
24+
"content_html": "Secondary action",
25+
"attrs": {
26+
"href": "#"
27+
}
28+
}
29+
],
30+
"link": {
31+
"content_html": "Lorem ipsum dolor sit amet&#32;&rsaquo;",
32+
"attrs": {
33+
"href": "#"
34+
}
35+
}
36+
}
37+
}
38+
]
39+
) -%}
40+
{% endcall -%}
41+
{% endblock %}

‎templates/docs/examples/patterns/cta-section/default-25-75-links-within-text.html‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,18 @@
44
{% block standalone_css %}patterns_all{% endblock %}
55
{% set is_paper = true %}
66
{% block content %}
7-
{% call(slot) vf_cta_section(
8-
variant='default',
9-
layout='25/75',
10-
) -%}
11-
{%- if slot == 'cta' -%}
12-
For more information, <a href="#">read the docs</a>
13-
<br />
14-
or <a href="#">contact us</a> to let our experts help you take the next step
15-
{%- endif -%}
16-
{% endcall -%}
7+
{% call(slot) vf_cta_section(
8+
variant='default',
9+
layout='25/75',
10+
blocks=[
11+
{
12+
"type": "cta",
13+
"item": {
14+
"type": "html",
15+
"content": "For more information, <a href='link-url'>read the docs</a><br />or <a href='link-url'>contact us</a> to let our experts help you take the next step"
16+
}
17+
}
18+
]
19+
) -%}
20+
{% endcall -%}
1721
{% endblock %}

‎templates/docs/examples/patterns/cta-section/default-25-75.html‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,19 @@
44
{% block standalone_css %}patterns_all{% endblock %}
55
{% set is_paper = true %}
66
{% block content %}
7-
{% call(slot) vf_cta_section(
8-
title_text='The quick brown fox jumps over the lazy dog',
9-
variant='default',
10-
layout='25-75',
11-
) -%}
12-
{%- if slot == 'cta' -%}
13-
<a href="#">The quick brown fox jumps over the lazy dog &rsaquo;</a>
14-
{%- endif -%}
15-
{% endcall -%}
7+
{% call(slot) vf_cta_section(
8+
title_text='The quick brown fox jumps over the lazy dog',
9+
variant='default',
10+
layout='25-75',
11+
blocks=[
12+
{
13+
"type": "cta",
14+
"item": {
15+
"type": "html",
16+
"content": "<a href='link-url'>The quick brown fox jumps over the lazy dog &rsaquo;</a>"
17+
}
18+
}
19+
]
20+
) -%}
21+
{% endcall -%}
1622
{% endblock %}

0 commit comments

Comments
 (0)