feat: add id support to patterns (#5703)

* feat: add title ID to basic section pattern

* feat: add title ID to pricing block pattern

* feat: add title ID to equal heights pattern

* feat: add id support to basic section, pricing block and equal heights patterns

* feat: add id to section attrs

* feat: add id as pricing block attrs

* feat: add id attrs to equal height pattern

* Address code comments

Author: britneywwc

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"

releases.yml

@@ -1,3 +1,17 @@
+- version: 4.38.0
+  features:
+    - component: Basic section
+      url: /docs/patterns/basic-section
+      status: Updated
+      notes: Added <code>attrs</code> parameter to the section element.
+    - component: Pricing block
+      url: /docs/patterns/pricing-block
+      status: Updated
+      notes: Added <code>attrs</code> parameter to the section element.
+    - component: Equal heights
+      url: /docs/patterns/equal-heights
+      status: Updated
+      notes: Added <code>attrs</code> parameter to the section element.
 - version: 4.37.0
   features:
     - component: Icon

templates/_macros/vf_basic-section.jinja

@@ -300,14 +300,16 @@
 # 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="",
   subtitle={},
   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">

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 -%}

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">

templates/docs/examples/patterns/basic-section/mixed-content.html

@@ -124,7 +124,8 @@
         }
       }
     }
-  ]
+  ],
+  attrs= {"id": "mixed-content-section"}
 ) }}
 
 {% endblock %} 

templates/docs/examples/patterns/equal-heights/2-columns-responsive.html

@@ -8,6 +8,7 @@
 
 {% call(slot) vf_equal_heights(
   title_text="Keep this heading to 2 lines on large screens.",
+  attrs={ "id": "2-columns-responsive" },
   subtitle_text="Ensure the right hand side of this 50/50 split is taller than the left hand side (heading) on its left. This includes the subtitle and description.",
   items=[
     {

templates/docs/examples/patterns/equal-heights/3-columns-responsive.html

@@ -8,6 +8,7 @@
 
 {% call(slot) vf_equal_heights(
   title_text="Keep this heading to 2 lines on large screens.",
+  attrs={ "id": "3-columns-responsive" },
   subtitle_text="Ensure the right hand side of this 50/50 split is taller than the left hand side (heading) on its left. This includes the subtitle and description.",
   items=[
     {

templates/docs/examples/patterns/equal-heights/4-columns-responsive.html

@@ -8,6 +8,7 @@
 
 {% call(slot) vf_equal_heights(
   title_text="Keep this heading to 2 lines on large screens.",
+  attrs={ "id": "4-columns-responsive" },
   subtitle_text="Ensure the right hand side of this 50/50 split is taller than the left hand side (heading) on its left. This includes the subtitle and description.",
   items=[
     {

templates/docs/examples/patterns/pricing-block/1-block.html

@@ -5,6 +5,7 @@
 {% block content %}
   {% call(slot) vf_pricing_block(
     title_text='Kubernetes pricing',
+    attrs={"id": "1-block"},
     tiers=[
     {
     'tier_name_text': 'Kubernetes Explorer',