Skip to content

Commit 909bff7

Browse files
mtruj013mtruj013
committed
Address code review
1 parent b487f47 commit 909bff7

7 files changed

Lines changed: 106 additions & 174 deletions

File tree

‎templates/_macros/vf_linked-logo-section.jinja‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@
2222
{% set links = links[:max_logos] %}
2323

2424
{% macro _list(links, cols_per_item=2) %}
25-
{% if links|length > 1 %}
25+
{%- if links|length > 1 -%}
2626
<div class="grid-row">
27-
{% for link in links %}
27+
{%- for link in links -%}
2828
<div class="grid-col-{{ cols_per_item }} grid-col-medium-{{ cols_per_item }}">
2929
<a href="{{ link.href }}" aria-label="{{ link.label }}">
3030
<div class="p-image-container--16-9 is-highlighted">
@@ -34,14 +34,14 @@
3434
<p>{{ link.text }}</p>
3535
</a>
3636
</div>
37-
{% endfor %}
37+
{%- endfor -%}
3838
</div>
39-
{% endif %}
39+
{%- endif -%}
4040
{% endmacro %}
4141

4242
<section class="p-section">
4343
<hr class="p-rule is-fixed-width"/>
44-
{% if layout == "50-50" %}
44+
{%- if layout == "50-50" -%}
4545
<div class="p-section--shallow">
4646
<div class="grid-row">
4747
<div class="grid-col-4">
@@ -52,7 +52,7 @@
5252
</div>
5353
</div>
5454
</div>
55-
{% elif layout == "25-75" %}
55+
{%- elif layout == "25-75" -%}
5656
<div class="p-section--shallow">
5757
<div class="grid-row">
5858
<div class="grid-col-2">
@@ -63,13 +63,13 @@
6363
</div>
6464
</div>
6565
</div>
66-
{% else %}
66+
{%- else -%}
6767
<div class="p-section--shallow">
6868
<div class="grid-row">
69-
<h2>{{ title_text }}</h2>
69+
<h2>{{- title_text -}}</h2>
7070
</div>
7171
</div>
7272
{{ _list(links) }}
73-
{% endif %}
73+
{%- endif -%}
7474
</section>
7575
{%- endmacro %}

‎templates/docs/examples/patterns/linked-logo-section/25-75.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
{% extends "_layouts/examples.html" %}
22
{% from "_macros/vf_linked-logo-section.jinja" import vf_linked_logo_section %}
3-
{% from "docs/examples/patterns/linked-logo-section/_shared-context.jinja" import example_list_items with context %}
43

54
{% block title %}Linked Logo Section / 25/75{% endblock %}
65
{% block standalone_css %}patterns_all{% endblock %}

‎templates/docs/examples/patterns/linked-logo-section/50-50.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
{% extends "_layouts/examples.html" %}
22
{% from "_macros/vf_linked-logo-section.jinja" import vf_linked_logo_section %}
3-
{% from "docs/examples/patterns/linked-logo-section/_shared-context.jinja" import example_list_items with context %}
43

54
{% block title %}Linked Logo Section / 50/50{% endblock %}
65
{% block standalone_css %}patterns_all{% endblock %}

‎templates/docs/examples/patterns/linked-logo-section/_shared-context.jinja‎

Lines changed: 0 additions & 126 deletions
This file was deleted.

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{% extends "_layouts/examples.html" %}
2+
{% block title %}Linked Logo Section / Combined {% endblock %}
3+
4+
{% block standalone_css %}patterns_all{% endblock %}
5+
6+
{% block content %}
7+
{% with is_combined = true %}
8+
<section>{% include 'docs/examples/patterns/linked-logo-section/default' %}</section>
9+
<section>{% include 'docs/examples/patterns/linked-logo-section/25-75' %}</section>
10+
<section>{% include 'docs/examples/patterns/linked-logo-section/50-50' %}</section>
11+
{% endwith %}
12+
{% endblock %}

‎templates/docs/examples/patterns/linked-logo-section/default.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
{% extends "_layouts/examples.html" %}
22
{% from "_macros/vf_linked-logo-section.jinja" import vf_linked_logo_section %}
3-
{% from "docs/examples/patterns/linked-logo-section/_shared-context.jinja" import example_list_items with context %}
43

54
{% block title %}Linked Logo Section / Default{% endblock %}
65
{% block standalone_css %}patterns_all{% endblock %}

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

Lines changed: 85 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -12,39 +12,15 @@ A linked logo section is used to display a list of logos which explicitly link t
1212

1313
The linked logo section pattern is composed of the following elements:
1414

15-
| Element | Description |
16-
| ------------------------- | ------------------------------------------------------------------------------------------------------ |
17-
| title_text (**required**) | `H2` title text. |
18-
| Links (**required**) | A list of image links containing four fields for each link: `href`, `text`, `label`, and `image_html`. |
19-
| Layout | Defaults to `full-width`, with additional options for `50-50`, and `25-75` layout splits. |
20-
21-
### Image variations and considerations
22-
23-
The `image_html` field can be defined using raw html or using the [Canonical image-template module](https://github.com/canonical/canonicalwebteam.image-template/tree/6ebd34c5967f69ac23c97a24bcf6bd703a1ab7ce) as in the following link example:
24-
25-
<pre>
26-
{
27-
"href": "#",
28-
"text": "Learn more&nbsp;&rsaquo;",
29-
"label": "MLflow",
30-
"image_html": image(url="https://assets.ubuntu.com/v1/104192d9-mlflow-logo-container-vert-fill.png",
31-
alt="",
32-
width="222",
33-
height="481",
34-
hi_def=True,
35-
loading="auto",
36-
attrs={"class": "p-image-container__image"}
37-
) | safe
38-
},
39-
</pre>
40-
41-
#### Image containers
42-
43-
Each image is wrapped in a [highlighted image container](/docs/patterns/images#highlighted-image) under the hood. To make correct use of this component the `p-image-container__image` class should be added to each to each image.
44-
45-
### Accessibility
46-
47-
Each image in this component is wrapped by an `a` tag which includes an `aria-label` defined in the `label` field. Therefore, this is the label screenreaders will read, `alt` text added to the image itself will be ignored by assistive techjonology.
15+
| Element | Description |
16+
| --------------------------------- | ----------------------------------------------------------------------------------------- |
17+
| title_text (**required**) | `H2` title text. |
18+
| Layout | Defaults to `full-width`, with additional options for `50-50`, and `25-75` layout splits. |
19+
| Links (**required**) | An `Array<Object>` of individual image link properties. |
20+
| Links[].href (**required**) | The target link for the logo. |
21+
| Links[].text (**required**) | The link text for the logo. |
22+
| Links[].label (**required**) | The `aria-label` for the logo. |
23+
| Links[].image_html (**required**) | The logo image element. |
4824

4925
## Full width
5026

@@ -119,7 +95,7 @@ The `vf_linked_logo_section` Jinja macro can be used to generate a linked logo l
11995
<code>full-wdith</code>
12096
</td>
12197
<td>
122-
The intented grid layout for the section.
98+
The intended grid layout for the section.
12399
</td>
124100
</tr>
125101
<tr>
@@ -136,7 +112,75 @@ The `vf_linked_logo_section` Jinja macro can be used to generate a linked logo l
136112
N/A
137113
</td>
138114
<td>
139-
Array of image links, each including <code>href</code>, <code>label</code>, <code>text</code>, and <code>image_html</code> fields.
115+
Array of image links.
116+
</td>
117+
</tr>
118+
<tr>
119+
<td>
120+
<code>links[].href</code>
121+
</td>
122+
<td>
123+
Yes
124+
</td>
125+
<td>
126+
String
127+
</td>
128+
<td>
129+
N/A
130+
</td>
131+
<td>
132+
Target link for the image.
133+
</td>
134+
</tr>
135+
<tr>
136+
<td>
137+
<code>links[].text</code>
138+
</td>
139+
<td>
140+
Yes
141+
</td>
142+
<td>
143+
String
144+
</td>
145+
<td>
146+
N/A
147+
</td>
148+
<td>
149+
Logo link text.
150+
</td>
151+
</tr>
152+
<tr>
153+
<td>
154+
<code>links[].label</code>
155+
</td>
156+
<td>
157+
Yes
158+
</td>
159+
<td>
160+
String
161+
</td>
162+
<td>
163+
N/A
164+
</td>
165+
<td>
166+
<code>aria-label</code> for the logo link. This attribute is added to the wrapping `a` tag under the hood and it is this label that screenreaders will read. Additional alt text added to the image element will be ignored by assistive techology and as such can be set to null.
167+
</td>
168+
</tr>
169+
<tr>
170+
<td>
171+
<code>links[].image_html</code>
172+
</td>
173+
<td>
174+
Yes
175+
</td>
176+
<td>
177+
HTMLImageElement
178+
</td>
179+
<td>
180+
N/A
181+
</td>
182+
<td>
183+
Logo image element. This can be defined using raw HTML or using the <a href="https://github.com/canonical/canonicalwebteam.image-template/">Canonical image-template module</a>. Regardless of how this is initialized, it will need to include the <code>p-image-container__image</code> to comply with the <a href="/docs/patterns/images#highlighted-image">Highlighted image pattern</a> which wraps each link item under the hood.
140184
</td>
141185
</tr>
142186
</tbody>
@@ -153,9 +197,14 @@ Jinja template.
153197

154198
```jinja
155199
{% raw -%}
156-
{% from "_macros/vf_linked_logo_section.jinja" import vf_linked_logo_section %}
200+
{% from "_macros/vf_linked-logo-section.jinja" import vf_linked_logo_section %}
157201
{%- endraw -%}
158202
```
159203

160204
View the [building with Jinja macros guide](/docs/building-vanilla#jinja-macros)
161205
for macro installation instructions.
206+
207+
### SCSS
208+
209+
Since Patterns leverage many other parts of Vanilla in their composition and content, we
210+
recommend [importing the entirety of Vanilla](/docs#install) for full support.

0 commit comments

Comments
 (0)