Skip to content

Commit 5669d38

Browse files
muhammad-ali-pkmuhammad-ali-pk
committed
feat(Logo section): Support block level usage
1 parent ad94436 commit 5669d38

File tree

5 files changed

+167
-8
lines changed

5 files changed

+167
-8
lines changed

‎releases.yml‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
- version: 4.40.0
2+
features:
3+
- component: Logo section
4+
url: /docs/patterns/logo-section
5+
status: Updated
6+
notes: Added <code>scope</code> parameter. Updated <code>padding</code> and <code>top_rule_variant</code> parameters.
17
- version: 4.39.0
28
features:
39
- component: CTA section

‎templates/_macros/vf_logo-section.jinja‎

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,20 +29,25 @@
2929
- title (object) (required): A dictionary with the title configuration.
3030
- text (string) (required): The text to be displayed as the title.
3131
- link_attrs (object) (optional): A dictionary of link attributes for the title.
32-
- padding (string) (optional): Type of padding to apply. Options are "deep", "default". Default is "default".
32+
- padding (string) (optional): Type of padding to apply. Options are "deep", "default", "none". Default is "default".
3333
- blocks (array<object>) (required): List of blocks to be displayed in the section. Supported block types include:
3434
- cta-block: Configuration for a call-to-action block.
3535
- logo-block: Configuration for a logo block. Must include:
3636
- item.logos (array): A list of logos to display.
37-
37+
- top_rule_variant (string) (optional): The variant of the top rule to apply. Options are "default", "none". Default is "default".
38+
- scope (string) (optional): Which root element the macro renders. Allowed values: "section" or "block".
39+
"section" (default): renders a <section> as the root element (suitable when used standalone).
40+
"block": renders a <div> as the root element (suitable when used inside another section).
41+
If an unknown value is provided, default behavior is "section".
42+
3843
Slots
3944
- description (optional): Paragraph-style content displayed below the title. Can include one or more paragraphs.
4045
#}
41-
{%- macro vf_logo_section(title, padding="regular", blocks=[], caller=None) -%}
46+
{%- macro vf_logo_section(title, padding="default", blocks=[], top_rule_variant="default", scope="section", caller=None) -%}
4247
{% set description_content = caller('description') %}
4348
{% set has_description = description_content|trim|length > 0 %}
4449
{%- set padding = padding | trim -%}
45-
{%- if padding not in ["deep", "default"] -%}
50+
{%- if padding not in ["deep", "default", "none"] -%}
4651
{%- set padding = "default" -%}
4752
{%- endif -%}
4853
{%- if padding == "default" -%}
@@ -52,6 +57,14 @@
5257
{%- endif -%}
5358
{%- set cta_block = blocks | selectattr("type", "equalto", "cta-block") | first -%}
5459
{%- set logo_block = blocks | selectattr("type", "equalto", "logo-block") | first -%}
60+
{%- set top_rule_variant = top_rule_variant | trim -%}
61+
{%- if top_rule_variant not in ["default", "none"] -%}
62+
{%- set top_rule_variant = "default" -%}
63+
{%- endif -%}
64+
{%- set scope = scope | trim -%}
65+
{%- if scope not in ["section", "block"] -%}
66+
{%- set scope = "section" -%}
67+
{%- endif -%}
5568
{%- macro _title_block(title={}) -%}
5669
<h2 class="p-text--small-caps">
5770
{%- if "link_attrs" in title and "href" in title.get("link_attrs", {}) -%}
@@ -68,15 +81,22 @@
6881
{%- macro _description_block() -%}
6982
{% if has_description %}{{ description_content | safe }}{% endif %}
7083
{%- endmacro -%}
71-
<section class="{{ padding_classes }}">
72-
<hr class="p-rule is-fixed-width" />
84+
85+
{%- set rootElement = "div" if scope == "block" else "section" -%}
86+
87+
<{{ rootElement }}{%- if padding != 'none' %} class="{{ padding_classes }}"{% endif %}>
88+
{%- if top_rule_variant == "default" -%}
89+
<hr class="p-rule is-fixed-width" />
90+
{%- endif -%}
91+
{%- if title.get('text') or description_content | trim | length > 0 -%}
7392
<div class="grid-row--50-50">
7493
<div class="grid-col">{{- _title_block(title) -}}</div>
7594
<div class="grid-col">
7695
{{- _description_block() -}}
7796
{% if cta_block %}{{- basic_section_item(cta_block) -}}{% endif %}
7897
</div>
7998
</div>
99+
{%- endif -%}
80100
{{- _logo_block(logo_block) -}}
81-
</section>
101+
</{{ rootElement }}>
82102
{%- endmacro -%}

‎templates/docs/examples/patterns/logo-section/block-scoped.html‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
{% extends "_layouts/examples.html" %}
2+
{% from "_macros/vf_logo-section.jinja" import vf_logo_section %}
3+
{% from "_macros/vf_tiered-list.jinja" import vf_tiered_list %}
4+
{% block title %}Logo section / Default{% endblock %}
5+
{% block standalone_css %}patterns_all{% endblock %}
6+
{% set is_paper = true %}
7+
{% block content %}
8+
{%- call(slot) vf_tiered_list(is_description_full_width_on_desktop=false, is_list_full_width_on_tablet=true) -%}
9+
{%- if slot == 'title' -%}
10+
<h2>H2 - up to two lines; ideally one.</h2>
11+
{%- endif -%}
12+
13+
{%- if slot == 'description' -%}
14+
<p>A <a href="#">private cloud</a> provides organisations with on-demand
15+
compute, storage and other resources that can be accessed over the network
16+
and that are reserved exclusively for them - either in their own data centre
17+
or via a 3rd party.
18+
</p>
19+
{%- endif -%}
20+
21+
{%- if slot == 'list_item_title_1' -%}
22+
<h3 class="p-heading--5">Rich portfolio of products</h3>
23+
{%- endif -%}
24+
25+
{%- if slot == 'list_item_description_1' -%}
26+
<p>Resell the full range of Canonical’s portfolio of private and public
27+
cloud products: OpenStack, Kubernetes, IoT, support, security and
28+
compliance for Ubuntu.
29+
</p>
30+
31+
{% call(slot) vf_logo_section(
32+
title={"text": ""},
33+
top_rule_variant="none",
34+
padding="none",
35+
scope="block",
36+
blocks=[
37+
{
38+
"type": "logo-block",
39+
"item": {
40+
"logos": [
41+
{
42+
"src": "https://assets.ubuntu.com/v1/38fdfd23-Dell-logo.png",
43+
"alt": "Dell Technologies"
44+
},
45+
{
46+
"src": "https://assets.ubuntu.com/v1/cd5f636a-hp-logo.png",
47+
"alt": "Hewlett Packard"
48+
},
49+
{
50+
"src": "https://assets.ubuntu.com/v1/f90702cd-lenovo-logo.png",
51+
"alt": "Lenovo"
52+
},
53+
{
54+
"src": "https://assets.ubuntu.com/v1/2ef3c028-amazon-web-services-logo.png",
55+
"alt": "Amazon Web Services"
56+
},
57+
{
58+
"src": "https://assets.ubuntu.com/v1/cb7ef8ac-ibm-cloud-logo.png",
59+
"alt": "IBM Cloud"
60+
},
61+
{
62+
"src": "https://assets.ubuntu.com/v1/210f44e4-microsoft-azure-new-logo.png",
63+
"alt": "Microsoft Azure"
64+
},
65+
{
66+
"src": "https://assets.ubuntu.com/v1/a554a818-google-cloud-logo.png",
67+
"alt": "Google Cloud Platform"
68+
},
69+
{
70+
"src": "https://assets.ubuntu.com/v1/b3e692f4-oracle-new-logo.png",
71+
"alt": "Oracle"
72+
}
73+
]
74+
}
75+
}
76+
]
77+
) -%}
78+
{% endcall -%}
79+
80+
<div class="p-cta-block">
81+
<a href="#">Learn more &rsaquo;</a>
82+
</div>
83+
{%- endif -%}
84+
{% endcall -%}
85+
{% endblock %}

‎templates/docs/examples/patterns/logo-section/combined.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,8 @@
2121
<section>
2222
{% include 'docs/examples/patterns/logo-section/padding-variants.html' %}
2323
</section>
24+
<section>
25+
{% include 'docs/examples/patterns/logo-section/block-scoped.html' %}
26+
</section>
2427
{% endwith %}
2528
{% endblock %}

‎templates/docs/patterns/logo-section/index.md‎

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,12 @@ View example of the logo section pattern without CTA block
151151
View example of the logo section pattern without description and CTA block
152152
</a></div>
153153

154+
#### Logo section within another section
155+
156+
<div class="embedded-example"><a href="/docs/examples/patterns/logo-section/block-scoped" class="js-example" data-lang="jinja">
157+
View example of the block scoped logo section
158+
</a></div>
159+
154160
## Jinja Macro
155161

156162
The `vf_logo_section` Jinja macro can be used to generate a logo section pattern. The API for the macro is shown
@@ -247,7 +253,8 @@ below.
247253
<td>
248254
One of:<br>
249255
<code>'deep'</code>,<br>
250-
<code>'default'</code>
256+
<code>'default'</code>,<br>
257+
<code>'none'</code>
251258
</td>
252259
<td>
253260
<code>'default'</code>
@@ -256,6 +263,44 @@ below.
256263
Padding variant for the entire section
257264
</td>
258265
</tr>
266+
<tr>
267+
<td>
268+
<code>top_rule_variant</code>
269+
</td>
270+
<td>
271+
No
272+
</td>
273+
<td>
274+
One of:<br>
275+
<code>'default'</code>,<br>
276+
<code>'none'</code>
277+
</td>
278+
<td>
279+
<code>'default'</code>
280+
</td>
281+
<td>
282+
Variant of <a href="/docs/patterns/rule">horizontal rule</a> to display at the top of the section."
283+
</td>
284+
</tr>
285+
<tr>
286+
<td>
287+
<code>scope</code>
288+
</td>
289+
<td>
290+
No
291+
</td>
292+
<td>
293+
One of:<br>
294+
<code>'section'</code>,<br>
295+
<code>'block'</code>
296+
</td>
297+
<td>
298+
<code>'section'</code>
299+
</td>
300+
<td>
301+
Which root element the macro renders. Renders <code>&lt;section&gt;</code> or <code>&lt;div&gt;</code> depending on the value.
302+
</td>
303+
</tr>
259304
</tbody>
260305
</table>
261306
</div>

0 commit comments

Comments
 (0)