vanilla-framework 4.39.0 → 4.40.0

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.39.0",
3
+ "version": "4.40.0",
4
4
  "author": {
5
5
  "email": "webteam@canonical.com",
6
6
  "name": "Canonical Webteam"
@@ -29,20 +29,24 @@
29
29
  - title (object) (required): A dictionary with the title configuration.
30
30
  - text (string) (required): The text to be displayed as the title.
31
31
  - 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".
33
33
  - blocks (array<object>) (required): List of blocks to be displayed in the section. Supported block types include:
34
34
  - cta-block: Configuration for a call-to-action block.
35
35
  - logo-block: Configuration for a logo block. Must include:
36
36
  - 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
+ - mode (string) (optional): The layout mode. Allowed values: "default" or "minimal".
39
+ "default": renders a <section> as the root element, and includes title, description and cta (suitable when used standalone).
40
+ "minimal": renders a <div> as the root element, and does not render title, description and cta (suitable when used inside another section).
41
+
38
42
  Slots
39
43
  - description (optional): Paragraph-style content displayed below the title. Can include one or more paragraphs.
40
44
  #}
41
- {%- macro vf_logo_section(title, padding="regular", blocks=[], caller=None) -%}
45
+ {%- macro vf_logo_section(title, padding="default", blocks=[], top_rule_variant="default", mode="default", caller=None) -%}
42
46
  {% set description_content = caller('description') %}
43
47
  {% set has_description = description_content|trim|length > 0 %}
44
48
  {%- set padding = padding | trim -%}
45
- {%- if padding not in ["deep", "default"] -%}
49
+ {%- if padding not in ["deep", "default", "none"] -%}
46
50
  {%- set padding = "default" -%}
47
51
  {%- endif -%}
48
52
  {%- if padding == "default" -%}
@@ -52,6 +56,14 @@
52
56
  {%- endif -%}
53
57
  {%- set cta_block = blocks | selectattr("type", "equalto", "cta-block") | first -%}
54
58
  {%- set logo_block = blocks | selectattr("type", "equalto", "logo-block") | first -%}
59
+ {%- set top_rule_variant = top_rule_variant | trim -%}
60
+ {%- if top_rule_variant not in ["default", "none"] -%}
61
+ {%- set top_rule_variant = "default" -%}
62
+ {%- endif -%}
63
+ {%- set mode = mode | trim -%}
64
+ {%- if mode not in ["default", "minimal"] -%}
65
+ {%- set mode = "default" -%}
66
+ {%- endif -%}
55
67
  {%- macro _title_block(title={}) -%}
56
68
  <h2 class="p-text--small-caps">
57
69
  {%- if "link_attrs" in title and "href" in title.get("link_attrs", {}) -%}
@@ -68,15 +80,27 @@
68
80
  {%- macro _description_block() -%}
69
81
  {% if has_description %}{{ description_content | safe }}{% endif %}
70
82
  {%- endmacro -%}
71
- <section class="{{ padding_classes }}">
72
- <hr class="p-rule is-fixed-width" />
73
- <div class="grid-row--50-50">
74
- <div class="grid-col">{{- _title_block(title) -}}</div>
75
- <div class="grid-col">
76
- {{- _description_block() -}}
77
- {% if cta_block %}{{- basic_section_item(cta_block) -}}{% endif %}
83
+
84
+ {%- set rootElement = "div" if mode == "minimal" else "section" -%}
85
+
86
+ <{{ rootElement }}{%- if padding != 'none' %} class="{{ padding_classes }}"{% endif %}>
87
+ {%- if mode == "default" -%}
88
+ {%- if top_rule_variant == "default" -%}
89
+ <hr class="p-rule is-fixed-width" />
90
+ {%- endif -%}
91
+ <div class="grid-row--50-50">
92
+ {%- if title and title.get('text') -%}
93
+ <div class="grid-col">{{- _title_block(title) -}}</div>
94
+ {%- endif -%}
95
+ {%- if has_description or cta_block -%}
96
+ <div class="grid-col">
97
+ {{- _description_block() -}}
98
+ {% if cta_block %}{{- basic_section_item(cta_block) -}}{% endif %}
99
+ </div>
100
+ {%- endif -%}
78
101
  </div>
79
- </div>
102
+ {%- endif -%}
103
+
80
104
  {{- _logo_block(logo_block) -}}
81
- </section>
105
+ </{{ rootElement }}>
82
106
  {%- endmacro -%}