vanilla-framework 4.20.3 → 4.21.1
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
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vanilla-framework",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.21.1",
|
|
4
4
|
"author": {
|
|
5
5
|
"email": "webteam@canonical.com",
|
|
6
6
|
"name": "Canonical Webteam"
|
|
@@ -59,25 +59,25 @@
|
|
|
59
59
|
"devDependencies": {
|
|
60
60
|
"@canonical/cookie-policy": "3.6.5",
|
|
61
61
|
"@canonical/latest-news": "1.5.0",
|
|
62
|
-
"@percy/cli": "1.30.
|
|
63
|
-
"@testing-library/cypress": "10.0.
|
|
62
|
+
"@percy/cli": "1.30.7",
|
|
63
|
+
"@testing-library/cypress": "10.0.3",
|
|
64
64
|
"autoprefixer": "10.4.20",
|
|
65
|
-
"cypress": "
|
|
65
|
+
"cypress": "14.0.2",
|
|
66
66
|
"jest": "29.7.0",
|
|
67
67
|
"js-beautify": "1.15.1",
|
|
68
68
|
"markdown-spellcheck": "1.3.1",
|
|
69
69
|
"mime": "3.0.0",
|
|
70
70
|
"parker": "0.0.10",
|
|
71
|
-
"postcss": "8.
|
|
71
|
+
"postcss": "8.5.1",
|
|
72
72
|
"postcss-cli": "11.0.0",
|
|
73
73
|
"postcss-scss": "4.0.9",
|
|
74
74
|
"prettier": "3.4.2",
|
|
75
|
-
"sass": "1.
|
|
76
|
-
"style-dictionary": "4.3.
|
|
77
|
-
"stylelint": "16.
|
|
75
|
+
"sass": "1.84.0",
|
|
76
|
+
"style-dictionary": "4.3.2",
|
|
77
|
+
"stylelint": "16.14.1",
|
|
78
78
|
"stylelint-config-recommended-scss": "14.1.0",
|
|
79
79
|
"stylelint-order": "6.0.4",
|
|
80
|
-
"stylelint-prettier": "5.0.
|
|
80
|
+
"stylelint-prettier": "5.0.3",
|
|
81
81
|
"svgo": "3.3.2",
|
|
82
82
|
"yaml": "2.7.0"
|
|
83
83
|
},
|
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
# Params
|
|
2
|
+
# title_text (string) (required): Title of the rich horizontal list
|
|
3
|
+
# layout (string) (optional): layout of the rich horizontal list. Options are "full-width", "50/50"
|
|
4
|
+
# list_item_style (string) (optional): Style of the list items. Options are "bullet", "tick", "number"
|
|
5
|
+
# Slots
|
|
6
|
+
# image (optional): Image displayed at the top of the pattern
|
|
7
|
+
# description (optional): Description paragraph
|
|
8
|
+
# logo_section_items (optional): Block of `.p-logo-section__item` elements, ideally between 4 and 8 items.
|
|
9
|
+
# cta (optional): Call to action area, likely a paragraph element with a button and a link
|
|
10
|
+
# list_item_[1-8]: List item contents for items in the `.p-list--horizontal-section`. Each will be wrapped in a `li.p-list__item` element, with the item style decided by the `list_item_style` parameter.
|
|
11
|
+
{% macro vf_rich_horizontal_list(
|
|
12
|
+
title_text,
|
|
13
|
+
layout="full-width",
|
|
14
|
+
list_item_style=""
|
|
15
|
+
) -%}
|
|
16
|
+
{% set image_content = caller("image") %}
|
|
17
|
+
{% set description_content = caller("description") %}
|
|
18
|
+
{% set logo_section_content = caller("logo_section_items") %}
|
|
19
|
+
{% set cta_content = caller("cta") %}
|
|
20
|
+
{% set has_image = image_content|trim|length > 0 %}
|
|
21
|
+
{% set has_logo_section = logo_section_content|trim|length > 0 %}
|
|
22
|
+
{% set has_list = caller("list_item_1")|trim|length > 0 %}
|
|
23
|
+
{% set has_cta = cta_content|trim|length > 0 %}
|
|
24
|
+
{% set has_description = description_content|trim|length > 0 %}
|
|
25
|
+
{% set max_list_items = 8 %}
|
|
26
|
+
|
|
27
|
+
{% set list_item_style = list_item_style|trim|lower %}
|
|
28
|
+
{% set layout = layout|trim|lower|replace("/", "-") %}
|
|
29
|
+
|
|
30
|
+
{% if list_item_style|length > 0 and list_item_style not in ["bullet", "tick", "number"] %}
|
|
31
|
+
{% set list_item_style = "" %}
|
|
32
|
+
{% endif %}
|
|
33
|
+
|
|
34
|
+
{% if layout not in ["full-width", "50-50"] %}
|
|
35
|
+
{% set layout = "full-width" %}
|
|
36
|
+
{% endif %}
|
|
37
|
+
|
|
38
|
+
{#- 50/50 layout requires that content for the right column is passed in -#}
|
|
39
|
+
{% if layout == "50-50" and not has_description and not has_logo_section %}
|
|
40
|
+
{% set layout = "full-width" %}
|
|
41
|
+
{% endif %}
|
|
42
|
+
|
|
43
|
+
{% if list_item_style == "bullet" %}
|
|
44
|
+
{% set list_item_class = "has-bullet" %}
|
|
45
|
+
{% elif list_item_style == "tick" %}
|
|
46
|
+
{% set list_item_class = "is-ticked" %}
|
|
47
|
+
{% endif %}
|
|
48
|
+
|
|
49
|
+
{% set list_element_type = "ul" %}
|
|
50
|
+
{% if list_item_style == "number" %}
|
|
51
|
+
{% set list_element_type = "ol" %}
|
|
52
|
+
{% endif %}
|
|
53
|
+
|
|
54
|
+
{#-
|
|
55
|
+
Construct list of list items using caller in the top-level macro
|
|
56
|
+
The internal _list macro will not have access to the caller block, so we need to extract the list items here.
|
|
57
|
+
-#}
|
|
58
|
+
{% set list_items = [] %}
|
|
59
|
+
{%- if has_list %}
|
|
60
|
+
{% for list_item_index in range(1, max_list_items + 1) %}
|
|
61
|
+
{% set list_item_content = caller('list_item_' + list_item_index|string) %}
|
|
62
|
+
{% set has_list_item_content = list_item_content|trim|length > 0 %}
|
|
63
|
+
{% if has_list_item_content %}
|
|
64
|
+
{{- list_items.append(list_item_content) or "" -}}
|
|
65
|
+
{% endif %}
|
|
66
|
+
{% endfor %}
|
|
67
|
+
{%- endif -%}
|
|
68
|
+
|
|
69
|
+
{%- macro _list(list_items) -%}
|
|
70
|
+
{%- if has_list %}
|
|
71
|
+
<div class="p-list--horizontal-section-wrapper">
|
|
72
|
+
<{{ list_element_type }} class="p-list--horizontal-section">
|
|
73
|
+
{%- for list_item_content in list_items -%}
|
|
74
|
+
<li class="p-list__item {{ list_item_class }}">
|
|
75
|
+
{{- list_item_content -}}
|
|
76
|
+
</li>
|
|
77
|
+
{%- endfor -%}
|
|
78
|
+
</{{ list_element_type }}>
|
|
79
|
+
</div>
|
|
80
|
+
{%- endif -%}
|
|
81
|
+
{%- endmacro -%}
|
|
82
|
+
|
|
83
|
+
{%- macro _logo_section(logo_section_content) -%}
|
|
84
|
+
<div class="p-logo-section">
|
|
85
|
+
<div class="p-logo-section__items">
|
|
86
|
+
{{- logo_section_content -}}
|
|
87
|
+
</div>
|
|
88
|
+
</div>
|
|
89
|
+
{%- endmacro -%}
|
|
90
|
+
|
|
91
|
+
<div class="p-section">
|
|
92
|
+
<div class="grid-row">
|
|
93
|
+
{%- if has_image %}
|
|
94
|
+
{{- image_content -}}
|
|
95
|
+
{%- endif -%}
|
|
96
|
+
{%- if layout == "50-50" %}
|
|
97
|
+
<div class="grid-col-8">
|
|
98
|
+
<div class="grid-row">
|
|
99
|
+
{#- If there is a description, split the title and description. Otherwise, the title spans full width. -#}
|
|
100
|
+
<div class="grid-col-4{% if has_description %} grid-col-medium-2{% endif %}">
|
|
101
|
+
<div class="p-section--shallow">
|
|
102
|
+
<h2>{{- title_text -}}</h2>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
{%- if has_description %}
|
|
106
|
+
<div class="grid-col-4 grid-col-medium-2">
|
|
107
|
+
{{- description_content -}}
|
|
108
|
+
</div>
|
|
109
|
+
{%- endif -%}
|
|
110
|
+
{%- if has_logo_section %}
|
|
111
|
+
{#- When the description is present, the logo section wraps to another line, so we need to offset it to align with the description. -#}
|
|
112
|
+
<div class="grid-col-4{% if has_description %} grid-col-start-large-5{% endif %}">
|
|
113
|
+
{{- _logo_section(logo_section_content) -}}
|
|
114
|
+
</div>
|
|
115
|
+
{%- endif -%}
|
|
116
|
+
{%- if has_list %}
|
|
117
|
+
<div class="grid-col-8">
|
|
118
|
+
{{- _list(list_items) -}}
|
|
119
|
+
</div>
|
|
120
|
+
{%- endif -%}
|
|
121
|
+
{%- if has_cta %}
|
|
122
|
+
<hr class="p-rule--muted"/>
|
|
123
|
+
<div class="grid-col-8 grid-col-start-large-5">
|
|
124
|
+
{{- cta_content -}}
|
|
125
|
+
</div>
|
|
126
|
+
{%- endif -%}
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
{#- Full-width layout -#}
|
|
130
|
+
{%- else %}
|
|
131
|
+
<div class="p-section--shallow">
|
|
132
|
+
<h2>{{- title_text -}}</h2>
|
|
133
|
+
</div>
|
|
134
|
+
{%- if has_logo_section %}
|
|
135
|
+
<div class="grid-col-8 grid-col-order-small-2">
|
|
136
|
+
{{- _logo_section(logo_section_content) -}}
|
|
137
|
+
</div>
|
|
138
|
+
{%- endif -%}
|
|
139
|
+
{% if has_description %}
|
|
140
|
+
<div class="grid-col-8 grid-col-order-small-1">
|
|
141
|
+
{{- description_content -}}
|
|
142
|
+
</div>
|
|
143
|
+
{% endif %}
|
|
144
|
+
{%- if has_list %}
|
|
145
|
+
<div class="grid-col-8 grid-col-order-small-2">
|
|
146
|
+
{{- _list(list_items) -}}
|
|
147
|
+
</div>
|
|
148
|
+
{%- endif -%}
|
|
149
|
+
{%- if has_cta %}
|
|
150
|
+
<div class="grid-col-8 grid-col-order-small-2">
|
|
151
|
+
<hr class="p-rule--muted"/>
|
|
152
|
+
</div>
|
|
153
|
+
<div class="grid-col-4 grid-col-start-large-5 grid-col-order-small-2">
|
|
154
|
+
{{- cta_content -}}
|
|
155
|
+
</div>
|
|
156
|
+
{%- endif -%}
|
|
157
|
+
{%- endif %}
|
|
158
|
+
</div>
|
|
159
|
+
</div>
|
|
160
|
+
|
|
161
|
+
{%- endmacro %}
|