feat: add attribute support to CTA section (#5723)

* feat: add attribute support to CTA section

* chore: bump to v4.39.0

Author: britneywwc

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.38.0",
+  "version": "4.39.0",
   "author": {
     "email": "[email protected]",
     "name": "Canonical Webteam"

releases.yml

@@ -1,3 +1,9 @@
+- version: 4.39.0
+  features:
+    - component: CTA section
+      url: /docs/patterns/cta-section
+      status: Updated
+      notes: Added <code>attrs</code> parameter to the section element.
 - version: 4.38.0
   features:
     - component: Basic section

templates/_macros/vf_cta-section.jinja

@@ -13,6 +13,7 @@
         # title_text: H2 title text - optional
         # variant: default
         # layout: 100
+        # attrs: A dictionary of attributes to apply to the section element
 
     # Slots:
         # cta: The cta link - required
@@ -46,7 +47,7 @@
         # description: Paragraph-style (one or more) content below the title - Optional
         # cta: Call-to-action block (required)
 
-{%- macro vf_cta_section(title_text, variant='default', layout='100', caller=None) -%}
+{%- macro vf_cta_section(title_text, variant='default', layout='100', caller=None, attrs={}) -%}
   {% set description_content = caller('description') %}
   {% set has_description = description_content|trim|length > 0 %}
   {% set cta_content = caller('cta') %}
@@ -88,7 +89,13 @@
     {%- endif -%}
   {%- endmacro -%}
   <hr class="p-rule is-fixed-width u-no-margin--bottom" />
-  <section class="p-strip is-deep">
+  <section class="p-strip is-deep {{ attrs.get("class", "") -}}"
+    {%- for attr, value in attrs.items() -%}
+      {% if attr != "class" %}
+        {{ attr }}="{{ value }}"
+      {%- endif -%}
+    {%- endfor -%}
+  >
     {%- if layout == "25-75" -%}
       <div class="grid-row">
         <div class="grid-col-start-large-3 grid-col-9">{{ _cta_variant() }}</div>

templates/docs/examples/patterns/cta-section/default-full-width.html

@@ -8,6 +8,7 @@
         title_text='The quick brown fox jumps over the lazy dog',
         variant='default',
         layout='100',
+        attrs={'id': 'full-width-default'}
         ) -%}
         {%- if slot == 'cta' -%}
             <a href="#">The quick brown fox jumps over the lazy dog &rsaquo;</a>

templates/docs/patterns/cta-section/index.md

@@ -149,6 +149,23 @@ The `vf_cta_section` Jinja macro can be used to generate a CTA section pattern.
           <code>h2</code> title text
         </td>
       </tr>
+      <tr>
+        <td>
+          <code>attrs</code>
+        </td>
+        <td>
+          No
+        </td>
+        <td>
+          <code>&lt;Object&gt;</code>
+        </td>
+        <td>
+          <code>N/A</code>
+        </td>
+        <td>
+          Attributes to apply to the CTA section. See <a href="/docs/building-vanilla#attribute-forwarding">attribute forwarding docs</a> for more info.
+        </td>
+      </tr>
     </tbody>
   </table>
 </div>