vanilla-framework 4.37.2 → 4.38.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.37.2",
+  "version": "4.38.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"
@@ -95,5 +95,9 @@
   },
   "peerDependencies": {
     "sass": "^1.79.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
   }
 }

package/templates/_macros/vf_basic-section.jinja

@@ -300,6 +300,7 @@
 # padding: Type of padding to apply to the pattern - "deep", "shallow", "default" (default is "default").
 # is_split_on_medium: Boolean to indicate if the section should be split on medium screens (default is false).
 # top_rule_variant: Type of HR to render at the top of the pattern. "default" | "muted" (default is "default").
+# attrs: A dictionary of attributes to apply to the section element.
 {% macro vf_basic_section(
   title={},
   label_text="",
@@ -307,7 +308,8 @@
   items=[],
   padding="default",
   is_split_on_medium=false,
-  top_rule_variant="default"
+  top_rule_variant="default",
+  attrs={}
 ) -%}
 
   {%- set padding = padding | trim -%}
@@ -330,7 +332,13 @@
   {%- set has_label = label_text|length > 0 -%}
   {%- set has_subtitle = subtitle_text|length > 0 -%}
 
-<section class="{{ padding_classes }}">
+<section class="{{ padding_classes }} {{ attrs.get("class", "") -}}" 
+  {%- for attr, value in attrs.items() -%}
+    {% if attr != "class" %}
+      {{ attr }}="{{ value }}"
+    {%- endif -%}
+  {%- endfor -%}
+>
   <div class="grid-row--50-50{%- if not is_split_on_medium -%}-on-large{%- endif -%}">
     {{ vf_section_top_rule(top_rule_variant) }}
     <div class="grid-col">

package/templates/_macros/vf_equal-heights.jinja

@@ -1,6 +1,7 @@
 {#-
   Params
   - title_text (string) (required): The text to be displayed as the heading
+  - attrs (dictionary) (optional): A dictionary of attributes to apply to the equal heights pattern.
   - subtitle_text (string) (optional): The text to be displayed as the subtitle
   - subtitle_heading_level (int) (optional): The heading level for the subtitle. Can be 4 or 5. Defaults to 5.
   - highlight_images (boolean) (optional): If the images need to be highlighted, which means adding a subtle grey background. Not added by default.
@@ -11,6 +12,7 @@
  -#}
 {%- macro vf_equal_heights(
   title_text,
+  attrs={},
   subtitle_text="",
   subtitle_heading_level=5,
   highlight_images=false,
@@ -31,7 +33,13 @@
     {% set subtitle_heading_level=5 %}
   {%- endif -%}
 
-  <div class="p-section">
+  <div class="p-section {{ attrs.get("class", "") -}}"
+    {%- for attr, value in attrs.items() -%}
+      {% if attr != "class" %}
+        {{ attr }}="{{ value }}"
+      {%- endif -%}
+    {%- endfor -%}
+  >
     <hr class="p-rule is-fixed-width"/>
     <div class="p-section--shallow">
     {%- if has_two_top_cols -%}

package/templates/_macros/vf_pricing-block.jinja

@@ -2,6 +2,7 @@
   Params
   - title_text (string) (required): The text to be displayed as the heading
   - top_rule_variant (string) (optional): Variant of the top rule, default is "default". Options are "muted", "highlighted", "default", "none".
+  - attrs (dictionary) (optional): A dictionary of attributes to apply to the Pricing block section.
   - tiers (Array<{
       tier_name_text: String (optional),
       tier_price_text: String,
@@ -20,6 +21,7 @@
 {%- macro vf_pricing_block(
   top_rule_variant="default",
   title_text="",
+  attrs={},
   tiers=[]
   ) -%}
   {% set top_rule_variant = top_rule_variant | trim %}
@@ -86,7 +88,13 @@
       <hr class="p-rule{% if top_rule_variant != 'default' %}--{{ rule_class }}{% endif %} is-fixed-width" />
     {% endif %}
   {%- endmacro -%}
-  <div class="p-section">
+  <div class="p-section {{ attrs.get("class", "") -}}"
+    {%- for attr, value in attrs.items() -%}
+      {% if attr != "class" %}
+        {{ attr }}="{{ value }}"
+      {%- endif -%}
+    {%- endfor -%}
+  >
     {{ _top_rule() }}
     <div class="grid-row">
       <div class="grid-col-4 grid-col-medium-4 grid-col-small-4">