WD-33531: Dev update cta section to support blocks like newer patterns

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.45.0",
+  "version": "4.46.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"

releases.yml

@@ -1,3 +1,9 @@
+- version: 4.46.0
+  features:
+    - component: CTA section
+      url: /docs/patterns/cta-section
+      status: Updated
+      notes: Added <a href="/docs/patterns/cta-section#blocks">blocks</a> successor to slots.
 - version: 4.45.0
   features:
     - component: In-page navigation

templates/_macros/vf_cta-section.jinja

@@ -1,11 +1,15 @@
+{% from "_macros/shared/vf_cta-block.jinja" import vf_cta_block %}
+{% from "_macros/shared/vf_description-block.jinja" import vf_description_block %}
+
 # All Params
   # title_text: H2 title text
   # variant: variant for the cta section. Options are "default", "block". Default is "default".
   # layout: Layout type of cta section. Options are "100", "25-75".
+  # blocks: list of content blocks for the CTA section. Includes description and cta blocks.
 
 # All Slots
-  # description: Paragraph-style (one or more) content below the title. This slot is required for "cta-block-100" and "cta-block-25-75" layouts.
-  # cta: Call-to-action block with action links/buttons. This slot is required for "cta-block-100" and "cta-block-25-75" layouts.
+  # description (deprecated): Paragraph-style (one or more) content below the title. This slot is required for "cta-block-100" and "cta-block-25-75" layouts.
+  # cta (deprecated): Call-to-action block with action links/buttons. This slot is required for "cta-block-100" and "cta-block-25-75" layouts.
 
 # Variants:
   # default-100: Full-width CTA with title and link text
@@ -14,6 +18,7 @@
         # variant: default
         # layout: 100
         # attrs: A dictionary of attributes to apply to the section element
+        # blocks: cta-block is required
 
     # Slots:
         # cta: The cta link - required
@@ -23,6 +28,7 @@
         # title_text: H2 title text - optional
         # variant: default
         # layout: 25-75
+        # blocks: cta-block is required
 
       # Slots:
         # cta: The cta link - required
@@ -32,6 +38,7 @@
         # title_text: H2 title text - required
         # variant: block
         # layout: 100
+        # blocks: cta-block is required
 
     # Slots:
         # description: Paragraph-style (one or more) content below the title - Optional
@@ -42,31 +49,69 @@
         # title_text: H2 title text - required
         # variant: block
         # layout: 25-75
+        # blocks: cta-block is required
 
     # Slots:
         # 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, attrs={}) -%}
+{%- macro vf_cta_section(title_text, variant='default', layout='100', caller=None, attrs={}, blocks=[]) -%}
+
+  {%- set description_block = blocks | selectattr("type", "equalto", "description") | list | last | default(None) -%} 
+  {%- set cta_block = blocks | selectattr("type", "equalto", "cta") | list | last | default(None) -%}
+
   {% set description_content = caller('description') %}
-  {% set has_description = description_content|trim|length > 0 %}
+  {% set has_description = description_block or description_content|trim|length > 0 %}
   {% set cta_content = caller('cta') %}
-  {% set has_cta = cta_content|trim|length > 0 %}
+  {% set has_cta = cta_block or cta_content|trim|length > 0 %}
+
+  {%- if cta_block -%}
+    {%- set cta_block_item = cta_block.get("item", {}) -%}
+    {%- set cta_block_type = cta_block_item.get("type","") | trim -%}
+
+    {%- if  cta_block_type == "html" -%}
+        {%- set cta_content = cta_block_item.get("content","") | trim -%}
+    {%- endif -%}
+  {%- endif -%}
+
+  {%- if description_block -%}
+    {%- set description_block_item = description_block.get("item", {}) -%}
+  {%- endif -%}    
+
   {#- User can pass layout as "X-Y" or "X/Y" -#}
   {% set layout = layout | trim | replace('/', '-') %}
+
   {% if layout not in ['100', '25-75'] %}
     {% set layout = "100" %}
   {% endif %}
+
   {% set variant = variant | trim %}
   {% if variant not in ['default', 'block'] %}
     {% set variant = "default" %}
   {% endif %}
+
   {%- macro _description_block() -%}
-    {% if has_description %}{{ description_content }}{% endif %}
-  {%- endmacro -%}
+    {%- if description_block -%}
+      {{ vf_description_block(type = description_block_item.get("type", ""), content = description_block_item.get("content","")) }}
+    {% elif has_description %}
+      {{ description_content }}
+    {% endif %}
+  {%- endmacro %}
+
   {%- macro _cta_block() -%}
-    {% if has_cta -%}<div class="p-cta-block">{{ cta_content }}</div>{% endif %}
-  {%- endmacro -%}
+    {%- if cta_block -%}
+        {%- if  cta_block_type == "html" -%}
+          <div class="p-cta-block">{{- cta_content | safe -}}</div>
+        {%- else -%}
+          {{ vf_cta_block( primary=cta_block_item.get("primary", {}),
+                           secondaries=cta_block_item.get("secondaries", []),
+                           link=cta_block_item.get("link",{})) }}
+        {% endif %}
+    {% elif has_cta %}
+      <div class="p-cta-block">{{ cta_content }}</div>
+    {% endif %}
+  {%- endmacro %}
+
   {%- macro _cta_default_variant() -%}
     <h2>
       {%- if title_text -%}
@@ -76,18 +121,21 @@
       {{ cta_content }}
     </h2>
   {%- endmacro -%}
+
   {%- macro _cta_block_variant() -%}
     <h2>{{ title_text }}</h2>
     {{ _description_block() -}}
     {{ _cta_block() }}
   {%- endmacro -%}
+
   {%- macro _cta_variant() -%}
     {%- if variant == 'default' -%}
       {{ _cta_default_variant() }}
     {%- elif variant == 'block' -%}
       {{ _cta_block_variant() }}
     {%- endif -%}
   {%- endmacro -%}
+
   <hr class="p-rule is-fixed-width u-no-margin--bottom" />
   <section class="p-strip is-deep {{ attrs.get("class", "") -}}"
     {%- for attr, value in attrs.items() -%}

templates/docs/examples/patterns/cta-section/block-25-75.html

@@ -4,18 +4,45 @@
 {% block standalone_css %}patterns_all{% endblock %}
 {% set is_paper = true %}
 {% block content %}
-    {% call(slot) vf_cta_section(
-        title_text='The quick brown fox jumps over the lazy dog',
-        variant='block',
-        layout='25-75'
-        ) -%}
-        {%- if slot == 'description' -%}
-            <p>The quick brown fox jumps over the lazy dog.</p>
-        {%- endif -%}
-        {%- if slot == 'cta' -%}
-            <a href="#" class="p-button--positive">Action</a>
-            <a href="#" class="p-button">Action</a>
-            <a href="#">Lorem ipsum dolor sit amet&#32;&rsaquo;</a>
-        {%- endif -%}
-    {% endcall -%}
+  {% call(slot) vf_cta_section(
+    title_text='The quick brown fox jumps over the lazy dog',
+    variant='block',
+    layout='25-75',
+    blocks=[
+      {
+        "type": "description",
+        "item": {
+          "type": "text",
+          "content": "The quick brown fox jumps over the lazy dog."
+        }
+      },
+      {
+        "type": "cta",
+        "item": {
+          "primary": {
+            "content_html": "Action",
+            "attrs": {
+              "href": "#",
+              "class": "optional-css-class"
+            }
+          },
+          "secondaries": [
+            {
+              "content_html": "Secondary action",
+              "attrs": {
+                "href": "#"
+              }
+            }
+          ],
+          "link": {
+            "content_html": "Lorem ipsum dolor sit amet&#32;&rsaquo;",
+            "attrs": {
+              "href": "#"
+            }
+          }
+        }
+      }
+    ]
+  ) -%}
+  {% endcall -%}
 {% endblock %}

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

@@ -4,18 +4,45 @@
 {% block standalone_css %}patterns_all{% endblock %}
 {% set is_paper = true %}
 {% block content %}
-    {% call(slot) vf_cta_section(
-        title_text='The quick brown fox jumps over the lazy dog',
-        variant='block',
-        layout='100'
-        ) -%}
-        {%- if slot == 'description' -%}
-            <p>The quick brown fox jumps over the lazy dog.</p>
-        {%- endif -%}
-        {%- if slot == 'cta' -%}
-            <a href="#" class="p-button--positive">Action</a>
-            <a href="#" class="p-button">Action</a>
-            <a href="#">Lorem ipsum dolor sit amet&#32;&rsaquo;</a>
-        {%- endif -%}
-    {% endcall -%}
+  {% call(slot) vf_cta_section(
+    title_text='The quick brown fox jumps over the lazy dog',
+    variant='block',
+    layout='100',
+    blocks=[
+      {
+        "type": "description",
+        "item": {
+          "type": "text",
+          "content": "The quick brown fox jumps over the lazy dog."
+        }
+      },
+      {
+        "type": "cta",
+        "item": {
+          "primary": {
+            "content_html": "Action",
+            "attrs": {
+              "href": "#",
+              "class": "optional-css-class"
+            }
+          },
+          "secondaries": [
+            {
+              "content_html": "Action",
+              "attrs": {
+                "href": "#"
+              }
+            }
+          ],
+          "link": {
+            "content_html": "Lorem ipsum dolor sit amet&#32;&rsaquo;",
+            "attrs": {
+              "href": "#"
+            }
+          }
+        }
+      }
+    ]
+  ) -%}
+  {% endcall -%}
 {% endblock %}

templates/docs/examples/patterns/cta-section/cta-block.html

@@ -0,0 +1,41 @@
+{% extends "_layouts/examples.html" %}
+{% from "_macros/vf_cta-section.jinja" import vf_cta_section %}
+{% block title %}CTA section / CTA block{% endblock %}
+{% block standalone_css %}patterns_all{% endblock %}
+{% set is_paper = true %}
+{% block content %}
+  {% call(slot) vf_cta_section(
+    title_text='The quick brown fox jumps over the lazy dog',
+    variant='block',
+    layout='25-75',
+    blocks=[
+      {
+        "type": "cta",
+        "item": {
+          "primary": {
+            "content_html": "Action",
+            "attrs": {
+              "href": "#",
+              "class": "optional-css-class"
+            }
+          },
+          "secondaries": [
+            {
+              "content_html": "Secondary action",
+              "attrs": {
+                "href": "#"
+              }
+            }
+          ],
+          "link": {
+            "content_html": "Lorem ipsum dolor sit amet ›",
+            "attrs": {
+              "href": "#"
+            }
+          }
+        }
+      }
+    ]
+  ) -%}
+  {% endcall -%}
+{% endblock %}

templates/docs/examples/patterns/cta-section/default-25-75-links-within-text.html

@@ -4,14 +4,18 @@
 {% block standalone_css %}patterns_all{% endblock %}
 {% set is_paper = true %}
 {% block content %}
-    {% call(slot) vf_cta_section(
-        variant='default',
-        layout='25/75',
-        ) -%}
-        {%- if slot == 'cta' -%}
-            For more information, <a href="#">read the docs</a>
-            <br />
-            or <a href="#">contact us</a> to let our experts help you take the next step
-        {%- endif -%}
-    {% endcall -%}
+  {% call(slot) vf_cta_section(
+    variant='default',
+    layout='25/75',
+    blocks=[
+      {
+        "type": "cta",
+        "item": {
+          "type": "html",
+          "content": "For more information, <a href='link-url'>read the docs</a><br />or <a href='link-url'>contact us</a> to let our experts help you take the next step"
+        }
+      }
+    ]
+  ) -%}
+  {% endcall -%}
 {% endblock %}

templates/docs/examples/patterns/cta-section/default-25-75.html

@@ -4,13 +4,19 @@
 {% block standalone_css %}patterns_all{% endblock %}
 {% set is_paper = true %}
 {% block content %}
-    {% call(slot) vf_cta_section(
-        title_text='The quick brown fox jumps over the lazy dog',
-        variant='default',
-        layout='25-75',
-        ) -%}
-        {%- if slot == 'cta' -%}
-            <a href="#">The quick brown fox jumps over the lazy dog &rsaquo;</a>
-        {%- endif -%}
-    {% endcall -%}
+  {% call(slot) vf_cta_section(
+    title_text='The quick brown fox jumps over the lazy dog',
+    variant='default',
+    layout='25-75',
+    blocks=[
+      {
+        "type": "cta",
+        "item": {
+          "type": "html",
+          "content": "<a href='link-url'>The quick brown fox jumps over the lazy dog &rsaquo;</a>"
+        }
+      }
+    ]
+  ) -%}
+  {% endcall -%}
 {% endblock %}